react-grab 0.1.20 → 0.1.22

package/dist/react.js

@@ -1884,7 +1884,7 @@ var init_web = __esm({
 var styles_default;
 var init_styles = __esm({
   "dist/styles.css"() {
-    styles_default = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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;--tw-outline-style:solid;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-contain-size:initial;--tw-contain-layout:initial;--tw-contain-paint:initial;--tw-contain-style:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:"Geist",ui-sans-serif,system-ui,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--color-yellow-500:oklch(79.5% .184 86.047);--color-black:#000;--color-white:#fff;--spacing:4px;--text-sm:14px;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--radius-sm:4px;--ease-out:cubic-bezier(0,0,.2,1);--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--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);--transition-fast:.1s;--transition-normal:.15s;--transition-slow:.2s}}@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}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.touch-hitbox{position:relative}.touch-hitbox:before{content:"";width:100%;min-width:44px;height:100%;min-height:44px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.-top-0\\.5{top:calc(var(--spacing)*-.5)}.top-0{top:calc(var(--spacing)*0)}.top-0\\.5{top:calc(var(--spacing)*.5)}.top-1\\/2{top:50%}.top-full{top:100%}.-right-0\\.5{right:calc(var(--spacing)*-.5)}.right-full{right:100%}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-0\\.5{left:calc(var(--spacing)*.5)}.left-1\\.5{left:calc(var(--spacing)*1.5)}.left-1\\/2{left:50%}.left-2\\.5{left:calc(var(--spacing)*2.5)}.left-full{left:100%}.z-10{z-index:10}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.m-0{margin:calc(var(--spacing)*0)}.-mx-2{margin-inline:calc(var(--spacing)*-2)}.mx-0\\.5{margin-inline:calc(var(--spacing)*.5)}.-my-1\\.5{margin-block:calc(var(--spacing)*-1.5)}.my-0\\.5{margin-block:calc(var(--spacing)*.5)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-2\\.5{margin-top:calc(var(--spacing)*2.5)}.mr-0\\.5{margin-right:calc(var(--spacing)*.5)}.mr-1\\.5{margin-right:calc(var(--spacing)*1.5)}.mr-2\\.5{margin-right:calc(var(--spacing)*2.5)}.mb-0\\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-1\\.5{margin-bottom:calc(var(--spacing)*1.5)}.mb-2\\.5{margin-bottom:calc(var(--spacing)*2.5)}.-ml-\\[2px\\]{margin-left:-2px}.ml-0\\.5{margin-left:calc(var(--spacing)*.5)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2\\.5{margin-left:calc(var(--spacing)*2.5)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.line-clamp-5{-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-1\\.5{width:calc(var(--spacing)*1.5);height:calc(var(--spacing)*1.5)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-\\[18px\\]{width:18px;height:18px}.h-0{height:calc(var(--spacing)*0)}.h-1\\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-2\\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-\\[17px\\]{height:17px}.h-fit{height:fit-content}.max-h-\\[240px\\]{max-height:240px}.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-1\\.5{width:calc(var(--spacing)*1.5)}.w-2{width:calc(var(--spacing)*2)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-\\[calc\\(100\\%\\+16px\\)\\]{width:calc(100% + 16px)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.max-w-\\[280px\\]{max-width:280px}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[100px\\]{min-width:100px}.min-w-\\[150px\\]{min-width:150px}.flex-1{flex:1}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.-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)}.-rotate-90{rotate:-90deg}.rotate-0{rotate:none}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.interactive-scale{transition-property:transform;transition-duration:var(--transition-normal);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}@media (hover:hover) and (pointer:fine){.interactive-scale:hover{transform:scale(1.05)}}.interactive-scale:active{transform:scale(.97)}.press-scale{transition-property:transform;transition-duration:var(--transition-fast);transition-timing-function:ease-out}.press-scale:active{transform:scale(.97)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.grid-cols-\\[0fr\\]{grid-template-columns:0fr}.grid-cols-\\[1fr\\]{grid-template-columns:1fr}.grid-rows-\\[0fr\\]{grid-template-rows:0fr}.grid-rows-\\[1fr\\]{grid-template-rows:1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.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}.justify-end{justify-content:flex-end}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-\\[5px\\]{gap:5px}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-\\[1px\\]{border-radius:1px}.rounded-\\[10px\\]{border-radius:10px}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-\\[10px\\]{border-top-left-radius:10px;border-top-right-radius:10px}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-l-\\[10px\\]{border-top-left-radius:10px;border-bottom-left-radius:10px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-\\[10px\\]{border-top-right-radius:10px;border-bottom-right-radius:10px}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-b-\\[6px\\]{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.rounded-b-\\[10px\\]{border-bottom-right-radius:10px;border-bottom-left-radius:10px}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.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-t-\\[\\#D9D9D9\\]{border-top-color:#d9d9d9}.bg-\\[\\#404040\\]{background-color:#404040}.bg-\\[\\#FEF2F2\\]{background-color:#fef2f2}.bg-black{background-color:var(--color-black)}.bg-black\\/5{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\\/5{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-black\\/25{background-color:#00000040}@supports (color:color-mix(in lab, red, red)){.bg-black\\/25{background-color:color-mix(in oklab,var(--color-black)25%,transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-yellow-500{background-color:var(--color-yellow-500)}.p-0{padding:calc(var(--spacing)*0)}.px-0\\.25{padding-inline:calc(var(--spacing)*.25)}.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\\.5{padding-block:calc(var(--spacing)*.5)}.py-0\\.25{padding-block:calc(var(--spacing)*.25)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-px{padding-block:1px}.pt-1\\.5{padding-top:calc(var(--spacing)*1.5)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.text-left{text-align:left}.font-sans{font-family:var(--font-sans)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[13px\\]{font-size:13px}.leading-3{--tw-leading:calc(var(--spacing)*3);line-height:calc(var(--spacing)*3)}.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)}.wrap-break-word{overflow-wrap:break-word}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-\\[\\#71717a\\]{color:#71717a}.text-\\[\\#B3B3B3\\]{color:#b3b3b3}.text-\\[\\#B91C1C\\]{color:#b91c1c}.text-\\[\\#B91C1C\\]\\/50{color:oklab(50.542% .168942 .0880134/.5)}.text-black{color:var(--color-black)}.text-black\\/25{color:#00000040}@supports (color:color-mix(in lab, red, red)){.text-black\\/25{color:color-mix(in oklab,var(--color-black)25%,transparent)}}.text-black\\/30{color:#0000004d}@supports (color:color-mix(in lab, red, red)){.text-black\\/30{color:color-mix(in oklab,var(--color-black)30%,transparent)}}.text-black\\/40{color:#0006}@supports (color:color-mix(in lab, red, red)){.text-black\\/40{color:color-mix(in oklab,var(--color-black)40%,transparent)}}.text-black\\/50{color:#00000080}@supports (color:color-mix(in lab, red, red)){.text-black\\/50{color:color-mix(in oklab,var(--color-black)50%,transparent)}}.text-black\\/60{color:#0009}@supports (color:color-mix(in lab, red, red)){.text-black\\/60{color:color-mix(in oklab,var(--color-black)60%,transparent)}}.text-black\\/70{color:#000000b3}@supports (color:color-mix(in lab, red, red)){.text-black\\/70{color:color-mix(in oklab,var(--color-black)70%,transparent)}}.text-black\\/80{color:#000c}@supports (color:color-mix(in lab, red, red)){.text-black\\/80{color:color-mix(in oklab,var(--color-black)80%,transparent)}}.text-black\\/85{color:#000000d9}@supports (color:color-mix(in lab, red, red)){.text-black\\/85{color:color-mix(in oklab,var(--color-black)85%,transparent)}}.text-white{color:var(--color-white)}.italic{font-style:italic}.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-35{opacity:.35}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px 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)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);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,)}.filter-\\[drop-shadow\\(0px_1px_2px_\\#51515140\\)\\]{filter:drop-shadow(0 1px 2px #51515140)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.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-columns\\,opacity\\]{transition-property:grid-template-columns,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[grid-template-rows\\,opacity\\]{transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[opacity\\,transform\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[transform\\,opacity\\]{transition-property:transform,opacity;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-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;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-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.will-change-\\[opacity\\,transform\\]{will-change:opacity,transform}.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}.select-none{-webkit-user-select:none;user-select:none}.\\[corner-shape\\:superellipse\\(1\\.25\\)\\]{corner-shape:superellipse(1.25)}.\\[font-synthesis\\:none\\]{font-synthesis:none}.\\[grid-area\\:1\\/1\\]{grid-area:1/1}.group-focus-within\\:invisible:is(:where(.group):focus-within *){visibility:hidden}.group-focus-within\\:visible:is(:where(.group):focus-within *){visibility:visible}@media (hover:hover){.group-hover\\:invisible:is(:where(.group):hover *){visibility:hidden}.group-hover\\:visible:is(:where(.group):hover *){visibility:visible}}.before\\:\\!min-h-full:before{content:var(--tw-content);min-height:100%!important}.before\\:\\!min-w-full:before{content:var(--tw-content);min-width:100%!important}.focus-within\\:bg-black\\/5:focus-within{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.focus-within\\:bg-black\\/5:focus-within{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}@media (hover:hover){.hover\\:bg-\\[\\#F5F5F5\\]:hover{background-color:#f5f5f5}.hover\\:bg-\\[\\#FEE2E2\\]:hover{background-color:#fee2e2}.hover\\:bg-black\\/5:hover{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-black\\/5:hover{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.hover\\:bg-black\\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-black\\/10:hover{background-color:color-mix(in oklab,var(--color-black)10%,transparent)}}.hover\\:text-\\[\\#B91C1C\\]:hover{color:#b91c1c}.hover\\:text-black:hover{color:var(--color-black)}.hover\\:text-black\\/60:hover{color:#0009}@supports (color:color-mix(in lab, red, red)){.hover\\:text-black\\/60:hover{color:color-mix(in oklab,var(--color-black)60%,transparent)}}.hover\\:opacity-100:hover{opacity:1}}.disabled\\:cursor-default:disabled{cursor:default}.disabled\\:opacity-40:disabled{opacity:.4}@media (hover:hover){.disabled\\:hover\\:bg-transparent:disabled:hover{background-color:#0000}}}:host{all:initial;direction:ltr}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-3px)}30%{transform:translate(3px)}45%{transform:translate(-3px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.9)}70%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes pop-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-bottom{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-top{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes success-pop{0%{opacity:0;transform:scale(.9)}60%{opacity:1;transform:scale(1.1)}80%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-fade-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes icon-loader-spin{0%{opacity:1}50%{opacity:.5}to{opacity:.2}}.icon-loader-bar{animation:.5s linear infinite icon-loader-spin}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.shimmer-text{color:#0000;background:linear-gradient(90deg,#71717a 0%,#a1a1aa 25%,#71717a 50%,#a1a1aa 75%,#71717a 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:2.5s linear infinite shimmer}@keyframes clock-flash{0%{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(.92)}75%{transform:scale(1.05)}to{transform:scale(1)}}.animate-clock-flash{will-change:transform;animation:.4s ease-out clock-flash}.animate-shake{will-change:transform;animation:.3s ease-out shake}.animate-pop-in{animation:pop-in var(--transition-normal)ease-out;will-change:transform,opacity}.animate-pop-out{animation:pop-out var(--transition-normal)ease-out forwards;will-change:transform,opacity}.animate-slide-in-bottom{animation:slide-in-bottom var(--transition-slow)ease-out;will-change:transform,opacity}.animate-slide-in-top{animation:slide-in-top var(--transition-slow)ease-out;will-change:transform,opacity}.animate-slide-in-left{animation:slide-in-left var(--transition-slow)ease-out;will-change:transform,opacity}.animate-slide-in-right{animation:slide-in-right var(--transition-slow)ease-out;will-change:transform,opacity}.animate-success-pop{will-change:transform,opacity;animation:.25s ease-out success-pop}.animate-tooltip-fade-in{animation:tooltip-fade-in var(--transition-fast)ease-out;will-change:transform,opacity}@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-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-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}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{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-content{syntax:"*";inherits:false;initial-value:""}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}';
+    styles_default = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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;--tw-outline-style:solid;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-contain-size:initial;--tw-contain-layout:initial;--tw-contain-paint:initial;--tw-contain-style:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:"Geist",ui-sans-serif,system-ui,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--color-yellow-500:oklch(79.5% .184 86.047);--color-black:#000;--color-white:#fff;--spacing:4px;--text-sm:14px;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--radius-sm:4px;--ease-out:cubic-bezier(0,0,.2,1);--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--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);--transition-fast:.1s;--transition-normal:.15s;--transition-slow:.2s}}@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}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.touch-hitbox{position:relative}.touch-hitbox:before{content:"";width:100%;min-width:44px;height:100%;min-height:44px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.-top-0\\.5{top:calc(var(--spacing)*-.5)}.top-0{top:calc(var(--spacing)*0)}.top-0\\.5{top:calc(var(--spacing)*.5)}.top-1\\/2{top:50%}.top-full{top:100%}.-right-0\\.5{right:calc(var(--spacing)*-.5)}.right-full{right:100%}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-0\\.5{left:calc(var(--spacing)*.5)}.left-1\\.5{left:calc(var(--spacing)*1.5)}.left-1\\/2{left:50%}.left-2\\.5{left:calc(var(--spacing)*2.5)}.left-full{left:100%}.z-1{z-index:1}.z-10{z-index:10}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.m-0{margin:calc(var(--spacing)*0)}.-mx-2{margin-inline:calc(var(--spacing)*-2)}.mx-0\\.5{margin-inline:calc(var(--spacing)*.5)}.-my-1\\.5{margin-block:calc(var(--spacing)*-1.5)}.my-0\\.5{margin-block:calc(var(--spacing)*.5)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-2\\.5{margin-top:calc(var(--spacing)*2.5)}.mr-0\\.5{margin-right:calc(var(--spacing)*.5)}.mr-1\\.5{margin-right:calc(var(--spacing)*1.5)}.mr-2\\.5{margin-right:calc(var(--spacing)*2.5)}.mb-0\\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-1\\.5{margin-bottom:calc(var(--spacing)*1.5)}.mb-2\\.5{margin-bottom:calc(var(--spacing)*2.5)}.-ml-\\[2px\\]{margin-left:-2px}.ml-0\\.5{margin-left:calc(var(--spacing)*.5)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2\\.5{margin-left:calc(var(--spacing)*2.5)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.line-clamp-5{-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-1\\.5{width:calc(var(--spacing)*1.5);height:calc(var(--spacing)*1.5)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-\\[18px\\]{width:18px;height:18px}.h-0{height:calc(var(--spacing)*0)}.h-1\\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-2\\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-\\[17px\\]{height:17px}.h-fit{height:fit-content}.max-h-\\[240px\\]{max-height:240px}.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-1\\.5{width:calc(var(--spacing)*1.5)}.w-2{width:calc(var(--spacing)*2)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-\\[calc\\(100\\%\\+16px\\)\\]{width:calc(100% + 16px)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.max-w-\\[280px\\]{max-width:280px}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[100px\\]{min-width:100px}.min-w-\\[150px\\]{min-width:150px}.flex-1{flex:1}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.-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)}.-rotate-90{rotate:-90deg}.rotate-0{rotate:none}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.interactive-scale{transition-property:transform;transition-duration:var(--transition-normal);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}@media (hover:hover) and (pointer:fine){.interactive-scale:hover{transform:scale(1.05)}}.interactive-scale:active{transform:scale(.97)}.press-scale{transition-property:transform;transition-duration:var(--transition-fast);transition-timing-function:ease-out}.press-scale:active{transform:scale(.97)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.grid-cols-\\[0fr\\]{grid-template-columns:0fr}.grid-cols-\\[1fr\\]{grid-template-columns:1fr}.grid-rows-\\[0fr\\]{grid-template-rows:0fr}.grid-rows-\\[1fr\\]{grid-template-rows:1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.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}.justify-end{justify-content:flex-end}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-\\[5px\\]{gap:5px}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-\\[1px\\]{border-radius:1px}.rounded-\\[10px\\]{border-radius:10px}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-\\[10px\\]{border-top-left-radius:10px;border-top-right-radius:10px}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-l-\\[10px\\]{border-top-left-radius:10px;border-bottom-left-radius:10px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-\\[10px\\]{border-top-right-radius:10px;border-bottom-right-radius:10px}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-b-\\[6px\\]{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.rounded-b-\\[10px\\]{border-bottom-right-radius:10px;border-bottom-left-radius:10px}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.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-t-\\[\\#D9D9D9\\]{border-top-color:#d9d9d9}.bg-\\[\\#404040\\]{background-color:#404040}.bg-\\[\\#FEF2F2\\]{background-color:#fef2f2}.bg-black{background-color:var(--color-black)}.bg-black\\/5{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\\/5{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-black\\/25{background-color:#00000040}@supports (color:color-mix(in lab, red, red)){.bg-black\\/25{background-color:color-mix(in oklab,var(--color-black)25%,transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-yellow-500{background-color:var(--color-yellow-500)}.p-0{padding:calc(var(--spacing)*0)}.px-0\\.25{padding-inline:calc(var(--spacing)*.25)}.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\\.5{padding-block:calc(var(--spacing)*.5)}.py-0\\.25{padding-block:calc(var(--spacing)*.25)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-px{padding-block:1px}.pt-1\\.5{padding-top:calc(var(--spacing)*1.5)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.text-left{text-align:left}.font-sans{font-family:var(--font-sans)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[13px\\]{font-size:13px}.leading-3{--tw-leading:calc(var(--spacing)*3);line-height:calc(var(--spacing)*3)}.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)}.wrap-break-word{overflow-wrap:break-word}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-\\[\\#71717a\\]{color:#71717a}.text-\\[\\#B3B3B3\\]{color:#b3b3b3}.text-\\[\\#B91C1C\\]{color:#b91c1c}.text-\\[\\#B91C1C\\]\\/50{color:oklab(50.542% .168942 .0880134/.5)}.text-black{color:var(--color-black)}.text-black\\/25{color:#00000040}@supports (color:color-mix(in lab, red, red)){.text-black\\/25{color:color-mix(in oklab,var(--color-black)25%,transparent)}}.text-black\\/30{color:#0000004d}@supports (color:color-mix(in lab, red, red)){.text-black\\/30{color:color-mix(in oklab,var(--color-black)30%,transparent)}}.text-black\\/40{color:#0006}@supports (color:color-mix(in lab, red, red)){.text-black\\/40{color:color-mix(in oklab,var(--color-black)40%,transparent)}}.text-black\\/50{color:#00000080}@supports (color:color-mix(in lab, red, red)){.text-black\\/50{color:color-mix(in oklab,var(--color-black)50%,transparent)}}.text-black\\/60{color:#0009}@supports (color:color-mix(in lab, red, red)){.text-black\\/60{color:color-mix(in oklab,var(--color-black)60%,transparent)}}.text-black\\/70{color:#000000b3}@supports (color:color-mix(in lab, red, red)){.text-black\\/70{color:color-mix(in oklab,var(--color-black)70%,transparent)}}.text-black\\/80{color:#000c}@supports (color:color-mix(in lab, red, red)){.text-black\\/80{color:color-mix(in oklab,var(--color-black)80%,transparent)}}.text-black\\/85{color:#000000d9}@supports (color:color-mix(in lab, red, red)){.text-black\\/85{color:color-mix(in oklab,var(--color-black)85%,transparent)}}.text-white{color:var(--color-white)}.italic{font-style:italic}.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-35{opacity:.35}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px 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)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);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,)}.filter-\\[drop-shadow\\(0px_1px_2px_\\#51515140\\)\\]{filter:drop-shadow(0 1px 2px #51515140)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.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-columns\\,opacity\\]{transition-property:grid-template-columns,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[grid-template-rows\\,opacity\\]{transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[opacity\\,transform\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[top\\,left\\,width\\,height\\,opacity\\]{transition-property:top,left,width,height,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[transform\\,opacity\\]{transition-property:transform,opacity;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-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;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-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-75{--tw-duration:75ms;transition-duration:75ms}.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-\\[opacity\\,transform\\]{will-change:opacity,transform}.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}.select-none{-webkit-user-select:none;user-select:none}.\\[corner-shape\\:superellipse\\(1\\.25\\)\\]{corner-shape:superellipse(1.25)}.\\[font-synthesis\\:none\\]{font-synthesis:none}.\\[grid-area\\:1\\/1\\]{grid-area:1/1}.\\[scrollbar-color\\:transparent_transparent\\]{scrollbar-color:transparent transparent}.\\[scrollbar-width\\:thin\\]{scrollbar-width:thin}.group-focus-within\\:invisible:is(:where(.group):focus-within *){visibility:hidden}.group-focus-within\\:visible:is(:where(.group):focus-within *){visibility:visible}@media (hover:hover){.group-hover\\:invisible:is(:where(.group):hover *){visibility:hidden}.group-hover\\:visible:is(:where(.group):hover *){visibility:visible}}.before\\:\\!min-h-full:before{content:var(--tw-content);min-height:100%!important}.before\\:\\!min-w-full:before{content:var(--tw-content);min-width:100%!important}@media (hover:hover){.hover\\:bg-\\[\\#F5F5F5\\]:hover{background-color:#f5f5f5}.hover\\:bg-\\[\\#FEE2E2\\]:hover{background-color:#fee2e2}.hover\\:bg-black\\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-black\\/10:hover{background-color:color-mix(in oklab,var(--color-black)10%,transparent)}}.hover\\:text-\\[\\#B91C1C\\]:hover{color:#b91c1c}.hover\\:text-black:hover{color:var(--color-black)}.hover\\:text-black\\/60:hover{color:#0009}@supports (color:color-mix(in lab, red, red)){.hover\\:text-black\\/60:hover{color:color-mix(in oklab,var(--color-black)60%,transparent)}}.hover\\:opacity-100:hover{opacity:1}.hover\\:\\[scrollbar-color\\:rgba\\(0\\,0\\,0\\,0\\.15\\)_transparent\\]:hover{scrollbar-color:#00000026 transparent}}.disabled\\:cursor-default:disabled{cursor:default}.disabled\\:opacity-40:disabled{opacity:.4}}:host{all:initial;direction:ltr}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-3px)}30%{transform:translate(3px)}45%{transform:translate(-3px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.9)}70%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes pop-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-bottom{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-top{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes success-pop{0%{opacity:0;transform:scale(.9)}60%{opacity:1;transform:scale(1.1)}80%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-fade-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes icon-loader-spin{0%{opacity:1}50%{opacity:.5}to{opacity:.2}}.icon-loader-bar{animation:.5s linear infinite icon-loader-spin}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.shimmer-text{color:#0000;background:linear-gradient(90deg,#71717a 0%,#a1a1aa 25%,#71717a 50%,#a1a1aa 75%,#71717a 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:2.5s linear infinite shimmer}@keyframes clock-flash{0%{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(.92)}75%{transform:scale(1.05)}to{transform:scale(1)}}.animate-clock-flash{will-change:transform;animation:.4s ease-out clock-flash}.animate-shake{will-change:transform;animation:.3s ease-out shake}.animate-pop-in{animation:pop-in var(--transition-normal)ease-out;will-change:transform,opacity}.animate-pop-out{animation:pop-out var(--transition-normal)ease-out forwards;will-change:transform,opacity}.animate-slide-in-bottom{animation:slide-in-bottom var(--transition-slow)ease-out;will-change:transform,opacity}.animate-slide-in-top{animation:slide-in-top var(--transition-slow)ease-out;will-change:transform,opacity}.animate-slide-in-left{animation:slide-in-left var(--transition-slow)ease-out;will-change:transform,opacity}.animate-slide-in-right{animation:slide-in-right var(--transition-slow)ease-out;will-change:transform,opacity}.animate-success-pop{will-change:transform,opacity;animation:.25s ease-out success-pop}.animate-tooltip-fade-in{animation:tooltip-fade-in var(--transition-fast)ease-out;will-change:transform,opacity}@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-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-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}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{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-content{syntax:"*";inherits:false;initial-value:""}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}';
   }
 });
 
@@ -2140,7 +2140,7 @@ var VERSION, VIEWPORT_MARGIN_PX, OFFSCREEN_POSITION, SELECTION_LERP_FACTOR, FEED
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
-    VERSION = "0.1.20";
+    VERSION = "0.1.22";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -2530,6 +2530,46 @@ var init_is_element_connected = __esm({
   }
 });
 
+// src/utils/get-bounds-center.ts
+var getBoundsCenter;
+var init_get_bounds_center = __esm({
+  "src/utils/get-bounds-center.ts"() {
+    "use strict";
+    getBoundsCenter = (bounds) => ({
+      x: bounds.x + bounds.width / 2,
+      y: bounds.y + bounds.height / 2
+    });
+  }
+});
+
+// src/utils/recalculate-session-position.ts
+var recalculateSessionPosition;
+var init_recalculate_session_position = __esm({
+  "src/utils/recalculate-session-position.ts"() {
+    "use strict";
+    init_get_bounds_center();
+    recalculateSessionPosition = ({
+      currentPosition,
+      previousBounds,
+      nextBounds
+    }) => {
+      if (!previousBounds || !nextBounds) {
+        return currentPosition;
+      }
+      const previousBoundsCenter = getBoundsCenter(previousBounds);
+      const nextBoundsCenter = getBoundsCenter(nextBounds);
+      const previousBoundsHalfWidth = previousBounds.width / 2;
+      const positionOffsetFromCenterX = currentPosition.x - previousBoundsCenter.x;
+      const positionOffsetRatio = previousBoundsHalfWidth > 0 ? positionOffsetFromCenterX / previousBoundsHalfWidth : 0;
+      const nextBoundsHalfWidth = nextBounds.width / 2;
+      return {
+        ...currentPosition,
+        x: nextBoundsCenter.x + positionOffsetRatio * nextBoundsHalfWidth
+      };
+    };
+  }
+});
+
 // src/core/store.ts
 var createInitialStore, createGrabStore;
 var init_store2 = __esm({
@@ -2539,6 +2579,7 @@ var init_store2 = __esm({
     init_constants();
     init_create_element_bounds();
     init_is_element_connected();
+    init_recalculate_session_position();
     createInitialStore = (input) => ({
       current: { state: "idle" },
       wasActivatedByToggle: false,
@@ -2938,19 +2979,11 @@ var init_store2 = __esm({
             if (isElementConnected(element)) {
               const newBounds = createElementBounds(element);
               const oldFirstBounds = session.selectionBounds[0];
-              let updatedPosition = session.position;
-              if (oldFirstBounds) {
-                const oldCenterX = oldFirstBounds.x + oldFirstBounds.width / 2;
-                const oldHalfWidth = oldFirstBounds.width / 2;
-                const offsetX = session.position.x - oldCenterX;
-                const offsetRatio = oldHalfWidth > 0 ? offsetX / oldHalfWidth : 0;
-                const newCenterX = newBounds.x + newBounds.width / 2;
-                const newHalfWidth = newBounds.width / 2;
-                updatedPosition = {
-                  ...session.position,
-                  x: newCenterX + offsetRatio * newHalfWidth
-                };
-              }
+              const updatedPosition = recalculateSessionPosition({
+                currentPosition: session.position,
+                previousBounds: oldFirstBounds,
+                nextBounds: newBounds
+              });
               updatedSessions.set(sessionId, {
                 ...session,
                 selectionBounds: [newBounds],
@@ -3882,7 +3915,7 @@ var init_truncate_string = __esm({
 });
 
 // src/core/context.ts
-var NEXT_INTERNAL_COMPONENT_NAMES, REACT_INTERNAL_COMPONENT_NAMES, cachedIsNextProject, checkIsNextProject, checkIsInternalComponentName, checkIsSourceComponentName, SERVER_COMPONENT_URL_PREFIXES, isServerComponentUrl, devirtualizeServerUrl, symbolicateServerFrames, extractServerFramesFromDebugStack, enrichServerFrameLocations, stackCache, fetchStackForElement, getStack, getNearestComponentName, resolveSourceFromStack, isUsefulComponentName, getComponentDisplayName, hasSourceFiles, getComponentNamesFromFiber, formatStackContext, getStackContext, getElementContext, getFallbackContext, truncateAttrValue, formatPriorityAttrs, getHTMLPreview;
+var NON_COMPONENT_PREFIXES, NEXT_INTERNAL_COMPONENT_NAMES, REACT_INTERNAL_COMPONENT_NAMES, cachedIsNextProject, checkIsNextProject, checkIsInternalComponentName, checkIsSourceComponentName, SERVER_COMPONENT_URL_PREFIXES, isServerComponentUrl, devirtualizeServerUrl, symbolicateServerFrames, extractServerFramesFromDebugStack, enrichServerFrameLocations, findNearestFiberElement, stackCache, fetchStackForElement, getStack, getNearestComponentName, resolveSourceFromStack, isUsefulComponentName, getComponentDisplayName, hasSourceFiles, getComponentNamesFromFiber, formatStackContext, getStackContext, getElementContext, getFallbackContext, truncateAttrValue, formatPriorityAttrs, getHTMLPreview;
 var init_context = __esm({
   "src/core/context.ts"() {
     "use strict";
@@ -3892,6 +3925,16 @@ var init_context = __esm({
     init_constants();
     init_get_tag_name();
     init_truncate_string();
+    NON_COMPONENT_PREFIXES = /* @__PURE__ */ new Set([
+      "_",
+      "$",
+      "motion.",
+      "styled.",
+      "chakra.",
+      "ark.",
+      "Primitive.",
+      "Slot."
+    ]);
     NEXT_INTERNAL_COMPONENT_NAMES = /* @__PURE__ */ new Set([
       "InnerLayoutRouter",
       "RedirectErrorBoundary",
@@ -3936,9 +3979,11 @@ var init_context = __esm({
       return cachedIsNextProject;
     };
     checkIsInternalComponentName = (name) => {
-      if (name.startsWith("_")) return true;
       if (NEXT_INTERNAL_COMPONENT_NAMES.has(name)) return true;
       if (REACT_INTERNAL_COMPONENT_NAMES.has(name)) return true;
+      for (const prefix of NON_COMPONENT_PREFIXES) {
+        if (name.startsWith(prefix)) return true;
+      }
       return false;
     };
     checkIsSourceComponentName = (name) => {
@@ -4061,6 +4106,15 @@ var init_context = __esm({
         };
       });
     };
+    findNearestFiberElement = (element) => {
+      if (!Ee()) return element;
+      let current = element;
+      while (current) {
+        if (Pe(current)) return current;
+        current = current.parentElement;
+      }
+      return element;
+    };
     stackCache = /* @__PURE__ */ new WeakMap();
     fetchStackForElement = async (element) => {
       try {
@@ -4078,10 +4132,11 @@ var init_context = __esm({
     };
     getStack = (element) => {
       if (!Ee()) return Promise.resolve([]);
-      const cached = stackCache.get(element);
+      const resolvedElement = findNearestFiberElement(element);
+      const cached = stackCache.get(resolvedElement);
       if (cached) return cached;
-      const promise = fetchStackForElement(element);
-      stackCache.set(element, promise);
+      const promise = fetchStackForElement(resolvedElement);
+      stackCache.set(resolvedElement, promise);
       return promise;
     };
     getNearestComponentName = async (element) => {
@@ -4117,7 +4172,8 @@ var init_context = __esm({
     };
     getComponentDisplayName = (element) => {
       if (!Ee()) return null;
-      const fiber = Pe(element);
+      const resolvedElement = findNearestFiberElement(element);
+      const fiber = Pe(resolvedElement);
       if (!fiber) return null;
       let currentFiber = fiber.return;
       while (currentFiber) {
@@ -4204,12 +4260,13 @@ var init_context = __esm({
       return "";
     };
     getElementContext = async (element, options = {}) => {
-      const html = getHTMLPreview(element);
-      const stackContext = await getStackContext(element, options);
+      const resolvedElement = findNearestFiberElement(element);
+      const html = getHTMLPreview(resolvedElement);
+      const stackContext = await getStackContext(resolvedElement, options);
       if (stackContext) {
         return `${html}${stackContext}`;
       }
-      return getFallbackContext(element);
+      return getFallbackContext(resolvedElement);
     };
     getFallbackContext = (element) => {
       const tagName = getTagName(element);
@@ -8017,12 +8074,10 @@ var init_completion_view = __esm({
       return (() => {
         var _el$ = _tmpl$15();
         addEventListener(_el$, "click", (event) => {
-          event.stopPropagation();
           event.stopImmediatePropagation();
           props.onClick();
         });
         addEventListener(_el$, "pointerdown", (event) => {
-          event.stopPropagation();
           event.stopImmediatePropagation();
         });
         insert(_el$, createComponent(IconEllipsis, {
@@ -8074,7 +8129,6 @@ var init_completion_view = __esm({
         const isEnterWithoutShift = event.code === "Enter" && !event.shiftKey;
         const isEscape = event.code === "Escape";
         if (!isUndoRedo) {
-          event.stopPropagation();
           event.stopImmediatePropagation();
         }
         if (isEnterWithoutShift) {
@@ -8281,8 +8335,166 @@ var init_completion_view = __esm({
   }
 });
 
+// src/utils/create-menu-highlight.ts
+var DEFAULT_HIDDEN_OPACITY, DEFAULT_VISIBLE_OPACITY, createAnimatedBoundsFollower, createMenuHighlight;
+var init_create_menu_highlight = __esm({
+  "src/utils/create-menu-highlight.ts"() {
+    "use strict";
+    DEFAULT_HIDDEN_OPACITY = "0";
+    DEFAULT_VISIBLE_OPACITY = "1";
+    createAnimatedBoundsFollower = ({
+      hiddenOpacity = DEFAULT_HIDDEN_OPACITY,
+      visibleOpacity = DEFAULT_VISIBLE_OPACITY
+    } = {}) => {
+      let containerElement;
+      let followerElement;
+      const hideFollower = () => {
+        if (!followerElement) return;
+        followerElement.style.opacity = hiddenOpacity;
+      };
+      const followElement = (targetElement) => {
+        if (!followerElement || !containerElement) return;
+        if (!targetElement) {
+          hideFollower();
+          return;
+        }
+        const containerRect = containerElement.getBoundingClientRect();
+        const targetRect = targetElement.getBoundingClientRect();
+        const targetTopWithinContainer = targetRect.top - containerRect.top + containerElement.scrollTop;
+        const targetLeftWithinContainer = targetRect.left - containerRect.left + containerElement.scrollLeft;
+        followerElement.style.opacity = visibleOpacity;
+        followerElement.style.top = `${targetTopWithinContainer}px`;
+        followerElement.style.left = `${targetLeftWithinContainer}px`;
+        followerElement.style.width = `${targetRect.width}px`;
+        followerElement.style.height = `${targetRect.height}px`;
+      };
+      const setContainerRef = (containerNode) => {
+        containerElement = containerNode;
+      };
+      const setFollowerRef = (followerNode) => {
+        followerElement = followerNode;
+      };
+      return {
+        containerRef: setContainerRef,
+        followerRef: setFollowerRef,
+        followElement,
+        hideFollower
+      };
+    };
+    createMenuHighlight = () => {
+      const {
+        containerRef,
+        followerRef: highlightRef,
+        followElement: updateHighlight,
+        hideFollower: clearHighlight
+      } = createAnimatedBoundsFollower();
+      return {
+        containerRef,
+        highlightRef,
+        updateHighlight,
+        clearHighlight
+      };
+    };
+  }
+});
+
+// src/components/selection-label/arrow-navigation-menu.tsx
+var _tmpl$16, _tmpl$26, _tmpl$34, ArrowNavigationMenu;
+var init_arrow_navigation_menu = __esm({
+  "src/components/selection-label/arrow-navigation-menu.tsx"() {
+    "use strict";
+    init_web();
+    init_web();
+    init_web();
+    init_web();
+    init_web();
+    init_web();
+    init_web();
+    init_web();
+    init_solid();
+    init_create_menu_highlight();
+    init_bottom_section();
+    _tmpl$16 = /* @__PURE__ */ template(`<div class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`);
+    _tmpl$26 = /* @__PURE__ */ template(`<span class=text-black/40>.`);
+    _tmpl$34 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="relative z-1 contain-layout flex items-center w-full px-2 py-1 cursor-pointer text-left border-none bg-transparent"><span class="text-[13px] leading-4 h-fit font-medium overflow-hidden text-ellipsis whitespace-nowrap min-w-0 transition-colors">`);
+    ArrowNavigationMenu = (props) => {
+      const {
+        containerRef: highlightContainerRef,
+        highlightRef,
+        updateHighlight,
+        clearHighlight
+      } = createMenuHighlight();
+      let itemRefs = [];
+      createEffect(() => {
+        const itemRef = itemRefs[props.activeIndex];
+        if (itemRef) {
+          updateHighlight(itemRef);
+        }
+      });
+      return createComponent(BottomSection, {
+        get children() {
+          var _el$ = _tmpl$16(), _el$2 = _el$.firstChild;
+          use(highlightContainerRef, _el$);
+          use(highlightRef, _el$2);
+          insert(_el$, createComponent(For, {
+            get each() {
+              return props.items;
+            },
+            children: (item, itemIndex) => (() => {
+              var _el$3 = _tmpl$34(), _el$4 = _el$3.firstChild;
+              _el$3.$$click = (event) => {
+                event.stopPropagation();
+                props.onSelect(itemIndex());
+              };
+              _el$3.addEventListener("pointerleave", () => {
+                const activeRef = itemRefs[props.activeIndex];
+                if (activeRef) {
+                  updateHighlight(activeRef);
+                } else {
+                  clearHighlight();
+                }
+              });
+              _el$3.addEventListener("pointerenter", (event) => {
+                updateHighlight(event.currentTarget);
+                props.onSelect(itemIndex());
+              });
+              _el$3.$$pointerdown = (event) => event.stopPropagation();
+              use((element) => {
+                itemRefs[itemIndex()] = element;
+              }, _el$3);
+              insert(_el$4, createComponent(Show, {
+                get when() {
+                  return item.componentName;
+                },
+                get children() {
+                  return [memo(() => item.componentName), _tmpl$26()];
+                }
+              }), null);
+              insert(_el$4, () => item.tagName, null);
+              createRenderEffect((_p$) => {
+                var _v$ = item.tagName, _v$2 = !!(itemIndex() === props.activeIndex), _v$3 = !!(itemIndex() !== props.activeIndex);
+                _v$ !== _p$.e && setAttribute(_el$3, "data-react-grab-arrow-nav-item", _p$.e = _v$);
+                _v$2 !== _p$.t && _el$4.classList.toggle("text-black", _p$.t = _v$2);
+                _v$3 !== _p$.a && _el$4.classList.toggle("text-black/30", _p$.a = _v$3);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              });
+              return _el$3;
+            })()
+          }), null);
+          return _el$;
+        }
+      });
+    };
+    delegateEvents(["pointerdown", "click"]);
+  }
+});
+
 // src/components/selection-label/index.tsx
-var _tmpl$16, _tmpl$26, _tmpl$34, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$92, _tmpl$0, _tmpl$1, _tmpl$102, DEFAULT_OFFSCREEN_POSITION, SelectionLabel;
+var _tmpl$17, _tmpl$27, _tmpl$35, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$92, _tmpl$0, _tmpl$1, _tmpl$102, DEFAULT_OFFSCREEN_POSITION, SelectionLabel;
 var init_selection_label = __esm({
   "src/components/selection-label/index.tsx"() {
     "use strict";
@@ -8296,6 +8508,7 @@ var init_selection_label = __esm({
     init_web();
     init_web();
     init_web();
+    init_web();
     init_solid();
     init_constants();
     init_get_arrow_size();
@@ -8312,11 +8525,12 @@ var init_selection_label = __esm({
     init_discard_prompt();
     init_error_view();
     init_completion_view();
-    _tmpl$16 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-abort class="contain-layout shrink-0 flex items-center justify-center size-4 rounded-full bg-black cursor-pointer ml-1 interactive-scale"><div class="size-1.5 bg-white rounded-[1px]">`);
-    _tmpl$26 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-end w-full min-h-4"><textarea data-react-grab-ignore-events class="text-black text-[13px] leading-4 font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0 opacity-50 wrap-break-word overflow-y-auto"placeholder="Add context"rows=1 disabled style=field-sizing:content;min-height:16px;max-height:95px;scrollbar-width:none>`);
-    _tmpl$34 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start w-fit h-fit max-w-[280px]"><div class="contain-layout shrink-0 flex items-center gap-1 py-1.5 px-2 w-full h-fit"><span class="shimmer-text text-[13px] leading-4 font-sans font-medium h-fit tabular-nums overflow-hidden text-ellipsis whitespace-nowrap">`);
+    init_arrow_navigation_menu();
+    _tmpl$17 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-abort class="contain-layout shrink-0 flex items-center justify-center size-4 rounded-full bg-black cursor-pointer ml-1 interactive-scale"><div class="size-1.5 bg-white rounded-[1px]">`);
+    _tmpl$27 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-end w-full min-h-4"><textarea data-react-grab-ignore-events class="text-black text-[13px] leading-4 font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0 opacity-50 wrap-break-word overflow-y-auto"placeholder="Add context"rows=1 disabled style=field-sizing:content;min-height:16px;max-height:95px;scrollbar-width:none>`);
+    _tmpl$35 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start w-fit h-fit max-w-[280px]"><div class="contain-layout shrink-0 flex items-center gap-1 py-1.5 px-2 w-full h-fit"><span class="shimmer-text text-[13px] leading-4 font-sans font-medium h-fit tabular-nums overflow-hidden text-ellipsis whitespace-nowrap">`);
     _tmpl$43 = /* @__PURE__ */ template(`<div class="flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5">`);
-    _tmpl$53 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col items-start w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 py-1.5 w-fit h-fit px-2">`);
+    _tmpl$53 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col items-start w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 w-fit h-fit px-2">`);
     _tmpl$63 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 w-full mb-1 overflow-hidden"><span class="text-black/40 text-[11px] leading-3 font-medium truncate italic">`);
     _tmpl$73 = /* @__PURE__ */ template(`<button data-react-grab-submit class="contain-layout shrink-0 flex items-center justify-center size-4 rounded-full bg-black cursor-pointer ml-1 interactive-scale">`);
     _tmpl$83 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-end w-full min-h-4"><textarea data-react-grab-ignore-events data-react-grab-input class="text-black text-[13px] leading-4 font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0 wrap-break-word overflow-y-auto"placeholder="Add context"rows=1 style=field-sizing:content;min-height:16px;max-height:95px;scrollbar-width:none>`);
@@ -8356,6 +8570,7 @@ var init_selection_label = __esm({
         if (props.status === "error" && (props.onAcknowledgeError || props.onRetry)) {
           return true;
         }
+        if (props.arrowNavigationState?.isVisible) return true;
         return false;
       };
       let resizeObserver;
@@ -8371,12 +8586,10 @@ var init_selection_label = __esm({
         const isCtrlCToAbort = event.code === "KeyC" && event.ctrlKey && props.status === "copying" && props.onAbort;
         if (isEnterToExpand) {
           event.preventDefault();
-          event.stopPropagation();
           event.stopImmediatePropagation();
           props.onToggleExpand?.();
         } else if (isCtrlCToAbort) {
           event.preventDefault();
-          event.stopPropagation();
           event.stopImmediatePropagation();
           props.onAbort?.();
         }
@@ -8447,8 +8660,8 @@ var init_selection_label = __esm({
             computedArrowPosition: null
           };
         }
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
         const isSelectionVisibleInViewport = bounds.x + bounds.width > 0 && bounds.x < viewportWidth && bounds.y + bounds.height > 0 && bounds.y < viewportHeight;
         if (!isSelectionVisibleInViewport) {
           return {
@@ -8501,7 +8714,6 @@ var init_selection_label = __esm({
           computedArrowPosition
         };
       });
-      const computedPosition = () => positionComputation().position;
       createEffect(() => {
         const result = positionComputation();
         if (result.computedArrowPosition !== null) {
@@ -8514,7 +8726,6 @@ var init_selection_label = __esm({
         if (event.isComposing || event.keyCode === IME_COMPOSING_KEY_CODE) {
           return;
         }
-        event.stopPropagation();
         event.stopImmediatePropagation();
         const isEnterWithoutShift = event.code === "Enter" && !event.shiftKey;
         const isEscape = event.code === "Escape";
@@ -8543,8 +8754,8 @@ var init_selection_label = __esm({
       const actionCycleItems = () => props.actionCycleState?.items ?? [];
       const actionCycleActiveIndex = () => props.actionCycleState?.activeIndex ?? 0;
       const isActionCycleVisible = () => Boolean(props.actionCycleState?.isVisible);
+      const isArrowNavigationVisible = () => Boolean(props.arrowNavigationState?.isVisible);
       const handleTagClick = (event) => {
-        event.stopPropagation();
         event.stopImmediatePropagation();
         if (props.filePath && props.onOpen) {
           props.onOpen();
@@ -8552,7 +8763,6 @@ var init_selection_label = __esm({
       };
       const isTagClickable = () => Boolean(props.filePath && props.onOpen);
       const handleContainerPointerDown = (event) => {
-        event.stopPropagation();
         event.stopImmediatePropagation();
         const isEditableInputVisible = canInteract() && props.isPromptMode && !props.isPendingDismiss && props.onSubmit;
         if (isEditableInputVisible && inputRef) {
@@ -8569,7 +8779,6 @@ var init_selection_label = __esm({
           _el$.addEventListener("mouseleave", () => props.onHoverChange?.(false));
           _el$.addEventListener("mouseenter", () => props.onHoverChange?.(true));
           _el$.$$click = (event) => {
-            event.stopPropagation();
             event.stopImmediatePropagation();
           };
           _el$.$$pointerdown = handleContainerPointerDown;
@@ -8585,10 +8794,10 @@ var init_selection_label = __esm({
                   return arrowPosition();
                 },
                 get leftPercent() {
-                  return computedPosition().arrowLeftPercent;
+                  return positionComputation().position.arrowLeftPercent;
                 },
                 get leftOffsetPx() {
-                  return computedPosition().arrowLeftOffset;
+                  return positionComputation().position.arrowLeftOffset;
                 },
                 get labelWidth() {
                   return panelWidth();
@@ -8640,7 +8849,7 @@ var init_selection_label = __esm({
               return memo(() => props.status === "copying")() && !props.isPendingAbort;
             },
             get children() {
-              var _el$3 = _tmpl$34(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
+              var _el$3 = _tmpl$35(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
               insert(_el$4, createComponent(IconLoader, {
                 size: 13,
                 "class": "text-[#71717a] shrink-0"
@@ -8653,7 +8862,7 @@ var init_selection_label = __esm({
                 get children() {
                   return createComponent(BottomSection, {
                     get children() {
-                      var _el$6 = _tmpl$26(), _el$7 = _el$6.firstChild;
+                      var _el$6 = _tmpl$27(), _el$7 = _el$6.firstChild;
                       var _ref$3 = inputRef;
                       typeof _ref$3 === "function" ? use(_ref$3, _el$7) : inputRef = _el$7;
                       insert(_el$6, createComponent(Show, {
@@ -8661,7 +8870,7 @@ var init_selection_label = __esm({
                           return props.onAbort;
                         },
                         get children() {
-                          var _el$8 = _tmpl$16();
+                          var _el$8 = _tmpl$17();
                           _el$8.$$click = (event) => {
                             event.stopPropagation();
                             props.onAbort?.();
@@ -8715,12 +8924,28 @@ var init_selection_label = __esm({
                 onHoverChange: handleTagHoverChange,
                 shrink: true,
                 get forceShowIcon() {
-                  return Boolean(props.isContextMenuOpen);
+                  return memo(() => !!isArrowNavigationVisible())() ? isTagClickable() : Boolean(props.isContextMenuOpen);
                 }
               }));
               insert(_el$9, createComponent(Show, {
                 get when() {
-                  return isActionCycleVisible();
+                  return props.arrowNavigationState?.isVisible;
+                },
+                get children() {
+                  return createComponent(ArrowNavigationMenu, {
+                    get items() {
+                      return props.arrowNavigationState.items;
+                    },
+                    get activeIndex() {
+                      return props.arrowNavigationState.activeIndex;
+                    },
+                    onSelect: (index) => props.onArrowNavigationSelect?.(index)
+                  });
+                }
+              }), null);
+              insert(_el$9, createComponent(Show, {
+                get when() {
+                  return memo(() => !!!isArrowNavigationVisible())() && isActionCycleVisible();
                 },
                 get children() {
                   return createComponent(BottomSection, {
@@ -8744,10 +8969,10 @@ var init_selection_label = __esm({
                             }
                           }), null);
                           createRenderEffect((_p$) => {
-                            var _v$1 = item.label.toLowerCase(), _v$10 = !!(itemIndex() === actionCycleActiveIndex()), _v$11 = !!(itemIndex() === actionCycleItems().length - 1);
-                            _v$1 !== _p$.e && setAttribute(_el$17, "data-react-grab-action-cycle-item", _p$.e = _v$1);
-                            _v$10 !== _p$.t && _el$17.classList.toggle("bg-black/5", _p$.t = _v$10);
-                            _v$11 !== _p$.a && _el$17.classList.toggle("rounded-b-[6px]", _p$.a = _v$11);
+                            var _v$11 = item.label.toLowerCase(), _v$12 = !!(itemIndex() === actionCycleActiveIndex()), _v$13 = !!(itemIndex() === actionCycleItems().length - 1);
+                            _v$11 !== _p$.e && setAttribute(_el$17, "data-react-grab-action-cycle-item", _p$.e = _v$11);
+                            _v$12 !== _p$.t && _el$17.classList.toggle("bg-black/5", _p$.t = _v$12);
+                            _v$13 !== _p$.a && _el$17.classList.toggle("rounded-b-[6px]", _p$.a = _v$13);
                             return _p$;
                           }, {
                             e: void 0,
@@ -8762,6 +8987,18 @@ var init_selection_label = __esm({
                   });
                 }
               }), null);
+              createRenderEffect((_p$) => {
+                var _v$ = !!isArrowNavigationVisible(), _v$2 = {
+                  "py-1.5": !isArrowNavigationVisible(),
+                  "pt-1.5 pb-1": isArrowNavigationVisible()
+                };
+                _v$ !== _p$.e && _el$9.classList.toggle("min-w-[100px]", _p$.e = _v$);
+                _p$.t = classList(_el$0, _v$2, _p$.t);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
               return _el$9;
             }
           }), null);
@@ -8821,9 +9058,9 @@ var init_selection_label = __esm({
                       }
                     }), null);
                     createRenderEffect((_p$) => {
-                      var _v$ = props.replyToPrompt ? "14px" : "0", _v$2 = !props.onSubmit;
-                      _v$ !== _p$.e && setStyleProperty(_el$14, "padding-left", _p$.e = _v$);
-                      _v$2 !== _p$.t && (_el$15.readOnly = _p$.t = _v$2);
+                      var _v$3 = props.replyToPrompt ? "14px" : "0", _v$4 = !props.onSubmit;
+                      _v$3 !== _p$.e && setStyleProperty(_el$14, "padding-left", _p$.e = _v$3);
+                      _v$4 !== _p$.t && (_el$15.readOnly = _p$.t = _v$4);
                       return _p$;
                     }, {
                       e: void 0,
@@ -8871,15 +9108,15 @@ var init_selection_label = __esm({
             }
           }), null);
           createRenderEffect((_p$) => {
-            var _v$3 = cn("fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-opacity duration-100 ease-out"), _v$4 = `${computedPosition().top}px`, _v$5 = `${computedPosition().left}px`, _v$6 = `translateX(calc(-50% + ${computedPosition().edgeOffsetX}px))`, _v$7 = shouldEnablePointerEvents() ? "auto" : "none", _v$8 = props.status === "fading" || isInternalFading() ? 0 : 1, _v$9 = cn("contain-layout flex items-center gap-[5px] rounded-[10px] antialiased w-fit h-fit p-0 [font-synthesis:none] [corner-shape:superellipse(1.25)]", PANEL_STYLES), _v$0 = isCompletedStatus() && !props.error ? "none" : void 0;
-            _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
-            _v$4 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$4);
-            _v$5 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$5);
-            _v$6 !== _p$.o && setStyleProperty(_el$, "transform", _p$.o = _v$6);
-            _v$7 !== _p$.i && setStyleProperty(_el$, "pointer-events", _p$.i = _v$7);
-            _v$8 !== _p$.n && setStyleProperty(_el$, "opacity", _p$.n = _v$8);
-            _v$9 !== _p$.s && className(_el$2, _p$.s = _v$9);
-            _v$0 !== _p$.h && setStyleProperty(_el$2, "display", _p$.h = _v$0);
+            var _v$5 = cn("fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-opacity duration-100 ease-out"), _v$6 = `${positionComputation().position.top}px`, _v$7 = `${positionComputation().position.left}px`, _v$8 = `translateX(calc(-50% + ${positionComputation().position.edgeOffsetX}px))`, _v$9 = shouldEnablePointerEvents() ? "auto" : "none", _v$0 = props.status === "fading" || isInternalFading() ? 0 : 1, _v$1 = cn("contain-layout flex items-center gap-[5px] rounded-[10px] antialiased w-fit h-fit p-0 [font-synthesis:none] [corner-shape:superellipse(1.25)]", PANEL_STYLES), _v$10 = isCompletedStatus() && !props.error ? "none" : void 0;
+            _v$5 !== _p$.e && className(_el$, _p$.e = _v$5);
+            _v$6 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$6);
+            _v$7 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$7);
+            _v$8 !== _p$.o && setStyleProperty(_el$, "transform", _p$.o = _v$8);
+            _v$9 !== _p$.i && setStyleProperty(_el$, "pointer-events", _p$.i = _v$9);
+            _v$0 !== _p$.n && setStyleProperty(_el$, "opacity", _p$.n = _v$0);
+            _v$1 !== _p$.s && className(_el$2, _p$.s = _v$1);
+            _v$10 !== _p$.h && setStyleProperty(_el$2, "display", _p$.h = _v$10);
             return _p$;
           }, {
             e: void 0,
@@ -8940,18 +9177,18 @@ var init_state = __esm({
 });
 
 // src/components/icons/icon-select.tsx
-var _tmpl$17, IconSelect;
+var _tmpl$18, IconSelect;
 var init_icon_select = __esm({
   "src/components/icons/icon-select.tsx"() {
     "use strict";
     init_web();
     init_web();
     init_web();
-    _tmpl$17 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 18 18"fill=currentColor><path opacity=0.4 d="M7.65631 10.9565C7.31061 10.0014 7.54012 8.96635 8.25592 8.25195C8.74522 7.76615 9.38771 7.49951 10.0694 7.49951C10.3682 7.49951 10.6641 7.55171 10.9483 7.65381L16.0001 9.49902V4.75C16.0001 3.2334 14.7667 2 13.2501 2H4.75012C3.23352 2 2.00012 3.2334 2.00012 4.75V13.25C2.00012 14.7666 3.23352 16 4.75012 16H9.49962L7.65631 10.9565Z"></path><path d="M17.296 11.5694L10.4415 9.06545C10.0431 8.92235 9.61441 9.01658 9.31551 9.31338C9.01671 9.61168 8.92101 10.0429 9.06551 10.4413L11.5704 17.2948C11.7247 17.7191 12.128 18.0004 12.5772 18.0004C12.585 18.0004 12.5918 17.9999 12.5987 17.9999C13.0577 17.9906 13.4591 17.6913 13.5987 17.2543L14.4854 14.4857L17.2559 13.5985C17.6914 13.4589 17.9903 13.057 18 12.599C18.0097 12.141 17.7267 11.7276 17.296 11.5694Z">`);
+    _tmpl$18 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 18 18"fill=currentColor><path opacity=0.4 d="M7.65631 10.9565C7.31061 10.0014 7.54012 8.96635 8.25592 8.25195C8.74522 7.76615 9.38771 7.49951 10.0694 7.49951C10.3682 7.49951 10.6641 7.55171 10.9483 7.65381L16.0001 9.49902V4.75C16.0001 3.2334 14.7667 2 13.2501 2H4.75012C3.23352 2 2.00012 3.2334 2.00012 4.75V13.25C2.00012 14.7666 3.23352 16 4.75012 16H9.49962L7.65631 10.9565Z"></path><path d="M17.296 11.5694L10.4415 9.06545C10.0431 8.92235 9.61441 9.01658 9.31551 9.31338C9.01671 9.61168 8.92101 10.0429 9.06551 10.4413L11.5704 17.2948C11.7247 17.7191 12.128 18.0004 12.5772 18.0004C12.585 18.0004 12.5918 17.9999 12.5987 17.9999C13.0577 17.9906 13.4591 17.6913 13.5987 17.2543L14.4854 14.4857L17.2559 13.5985C17.6914 13.4589 17.9903 13.057 18 12.599C18.0097 12.141 17.7267 11.7276 17.296 11.5694Z">`);
     IconSelect = (props) => {
       const size = () => props.size ?? 14;
       return (() => {
-        var _el$ = _tmpl$17();
+        var _el$ = _tmpl$18();
         createRenderEffect((_p$) => {
           var _v$ = size(), _v$2 = size(), _v$3 = props.class;
           _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -8970,18 +9207,18 @@ var init_icon_select = __esm({
 });
 
 // src/components/icons/icon-chevron.tsx
-var _tmpl$18, IconChevron;
+var _tmpl$19, IconChevron;
 var init_icon_chevron = __esm({
   "src/components/icons/icon-chevron.tsx"() {
     "use strict";
     init_web();
     init_web();
     init_web();
-    _tmpl$18 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="m18 15-6-6-6 6">`);
+    _tmpl$19 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="m18 15-6-6-6 6">`);
     IconChevron = (props) => {
       const size = () => props.size ?? 12;
       return (() => {
-        var _el$ = _tmpl$18();
+        var _el$ = _tmpl$19();
         createRenderEffect((_p$) => {
           var _v$ = size(), _v$2 = size(), _v$3 = props.class;
           _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -9000,18 +9237,18 @@ var init_icon_chevron = __esm({
 });
 
 // src/components/icons/icon-clock.tsx
-var _tmpl$19, IconClock;
+var _tmpl$20, IconClock;
 var init_icon_clock = __esm({
   "src/components/icons/icon-clock.tsx"() {
     "use strict";
     init_web();
     init_web();
     init_web();
-    _tmpl$19 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.2652 11.1054 12.5196 11.2929 12.7071L13.2929 14.7071C13.6834 15.0976 14.3166 15.0976 14.7071 14.7071C15.0976 14.3166 15.0976 13.6834 14.7071 13.2929L13 11.5858V8Z">`);
+    _tmpl$20 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.2652 11.1054 12.5196 11.2929 12.7071L13.2929 14.7071C13.6834 15.0976 14.3166 15.0976 14.7071 14.7071C15.0976 14.3166 15.0976 13.6834 14.7071 13.2929L13 11.5858V8Z">`);
     IconClock = (props) => {
       const size = () => props.size ?? 14;
       return (() => {
-        var _el$ = _tmpl$19();
+        var _el$ = _tmpl$20();
         createRenderEffect((_p$) => {
           var _v$ = size(), _v$2 = size(), _v$3 = props.class;
           _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -9030,18 +9267,18 @@ var init_icon_clock = __esm({
 });
 
 // src/components/icons/icon-copy.tsx
-var _tmpl$20, IconCopy;
+var _tmpl$21, IconCopy;
 var init_icon_copy = __esm({
   "src/components/icons/icon-copy.tsx"() {
     "use strict";
     init_web();
     init_web();
     init_web();
-    _tmpl$20 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path d="M16.0549 8.25C17.4225 8.24998 18.5248 8.24996 19.3918 8.36652C20.2919 8.48754 21.0497 8.74643 21.6517 9.34835C22.2536 9.95027 22.5125 10.7081 22.6335 11.6083C22.75 12.4752 22.75 13.5775 22.75 14.9451V14.9451V16.0549V16.0549C22.75 17.4225 22.75 18.5248 22.6335 19.3918C22.5125 20.2919 22.2536 21.0497 21.6517 21.6517C21.0497 22.2536 20.2919 22.5125 19.3918 22.6335C18.5248 22.75 17.4225 22.75 16.0549 22.75H16.0549H14.9451H14.9451C13.5775 22.75 12.4752 22.75 11.6082 22.6335C10.7081 22.5125 9.95027 22.2536 9.34835 21.6516C8.74643 21.0497 8.48754 20.2919 8.36652 19.3918C8.24996 18.5248 8.24998 17.4225 8.25 16.0549V16.0549V14.9451V14.9451C8.24998 13.5775 8.24996 12.4752 8.36652 11.6082C8.48754 10.7081 8.74643 9.95027 9.34835 9.34835C9.95027 8.74643 10.7081 8.48754 11.6083 8.36652C12.4752 8.24996 13.5775 8.24998 14.9451 8.25H14.9451H16.0549H16.0549Z"></path><path d="M6.75 14.8569C6.74991 13.5627 6.74983 12.3758 6.8799 11.4084C7.0232 10.3425 7.36034 9.21504 8.28769 8.28769C9.21504 7.36034 10.3425 7.0232 11.4084 6.8799C12.3758 6.74983 13.5627 6.74991 14.8569 6.75L17.0931 6.75C17.3891 6.75 17.5371 6.75 17.6261 6.65419C17.7151 6.55838 17.7045 6.4142 17.6833 6.12584C17.6648 5.87546 17.6412 5.63892 17.6111 5.41544C17.4818 4.45589 17.2232 3.6585 16.6718 2.98663C16.4744 2.74612 16.2539 2.52558 16.0134 2.3282C15.3044 1.74638 14.4557 1.49055 13.4248 1.36868C12.4205 1.24998 11.1512 1.24999 9.54893 1.25H9.45109C7.84883 1.24999 6.57947 1.24998 5.57525 1.36868C4.54428 1.49054 3.69558 1.74638 2.98663 2.3282C2.74612 2.52558 2.52558 2.74612 2.3282 2.98663C1.74638 3.69558 1.49055 4.54428 1.36868 5.57525C1.24998 6.57947 1.24999 7.84882 1.25 9.45108V9.54891C1.24999 11.1512 1.24998 12.4205 1.36868 13.4247C1.49054 14.4557 1.74638 15.3044 2.3282 16.0134C2.52558 16.2539 2.74612 16.4744 2.98663 16.6718C3.6585 17.2232 4.45589 17.4818 5.41544 17.6111C5.63892 17.6412 5.87546 17.6648 6.12584 17.6833C6.4142 17.7045 6.55838 17.7151 6.65419 17.6261C6.75 17.5371 6.75 17.3891 6.75 17.0931V14.8569Z">`);
+    _tmpl$21 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path d="M16.0549 8.25C17.4225 8.24998 18.5248 8.24996 19.3918 8.36652C20.2919 8.48754 21.0497 8.74643 21.6517 9.34835C22.2536 9.95027 22.5125 10.7081 22.6335 11.6083C22.75 12.4752 22.75 13.5775 22.75 14.9451V14.9451V16.0549V16.0549C22.75 17.4225 22.75 18.5248 22.6335 19.3918C22.5125 20.2919 22.2536 21.0497 21.6517 21.6517C21.0497 22.2536 20.2919 22.5125 19.3918 22.6335C18.5248 22.75 17.4225 22.75 16.0549 22.75H16.0549H14.9451H14.9451C13.5775 22.75 12.4752 22.75 11.6082 22.6335C10.7081 22.5125 9.95027 22.2536 9.34835 21.6516C8.74643 21.0497 8.48754 20.2919 8.36652 19.3918C8.24996 18.5248 8.24998 17.4225 8.25 16.0549V16.0549V14.9451V14.9451C8.24998 13.5775 8.24996 12.4752 8.36652 11.6082C8.48754 10.7081 8.74643 9.95027 9.34835 9.34835C9.95027 8.74643 10.7081 8.48754 11.6083 8.36652C12.4752 8.24996 13.5775 8.24998 14.9451 8.25H14.9451H16.0549H16.0549Z"></path><path d="M6.75 14.8569C6.74991 13.5627 6.74983 12.3758 6.8799 11.4084C7.0232 10.3425 7.36034 9.21504 8.28769 8.28769C9.21504 7.36034 10.3425 7.0232 11.4084 6.8799C12.3758 6.74983 13.5627 6.74991 14.8569 6.75L17.0931 6.75C17.3891 6.75 17.5371 6.75 17.6261 6.65419C17.7151 6.55838 17.7045 6.4142 17.6833 6.12584C17.6648 5.87546 17.6412 5.63892 17.6111 5.41544C17.4818 4.45589 17.2232 3.6585 16.6718 2.98663C16.4744 2.74612 16.2539 2.52558 16.0134 2.3282C15.3044 1.74638 14.4557 1.49055 13.4248 1.36868C12.4205 1.24998 11.1512 1.24999 9.54893 1.25H9.45109C7.84883 1.24999 6.57947 1.24998 5.57525 1.36868C4.54428 1.49054 3.69558 1.74638 2.98663 2.3282C2.74612 2.52558 2.52558 2.74612 2.3282 2.98663C1.74638 3.69558 1.49055 4.54428 1.36868 5.57525C1.24998 6.57947 1.24999 7.84882 1.25 9.45108V9.54891C1.24999 11.1512 1.24998 12.4205 1.36868 13.4247C1.49054 14.4557 1.74638 15.3044 2.3282 16.0134C2.52558 16.2539 2.74612 16.4744 2.98663 16.6718C3.6585 17.2232 4.45589 17.4818 5.41544 17.6111C5.63892 17.6412 5.87546 17.6648 6.12584 17.6833C6.4142 17.7045 6.55838 17.7151 6.65419 17.6261C6.75 17.5371 6.75 17.3891 6.75 17.0931V14.8569Z">`);
     IconCopy = (props) => {
       const size = () => props.size ?? 14;
       return (() => {
-        var _el$ = _tmpl$20();
+        var _el$ = _tmpl$21();
         createRenderEffect((_p$) => {
           var _v$ = size(), _v$2 = size(), _v$3 = props.class;
           _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -9141,7 +9378,7 @@ var init_safe_polygon = __esm({
 });
 
 // src/utils/freeze-updates.ts
-var isUpdatesPaused, getOrCache, patchedDispatchers, wrappedDispatchCache, wrappedStartTransitionCache, pendingStoreCallbacks, pendingTransitionCallbacks, pendingStateUpdates, pausedQueueStates, pausedContextStates, renderersWithPatchedDispatcher, typedFiberRoots, getFiberRoot, collectFiberRoots, mergePendingChains, pauseHookQueue, resumeHookQueue, pauseContextDependency, resumeContextDependency, forEachHookQueue, forEachContextDependency, traverseFibers, pauseFiber, resumeFiber, patchDispatcher, installDispatcherPatching, scheduleReactUpdate, invokeCallbacks, initializeFreezeSupport, freezeUpdates;
+var isUpdatesPaused, getOrCache, patchedDispatchers, wrappedDispatchCache, wrappedStartTransitionCache, pendingStoreCallbacks, pendingTransitionCallbacks, pendingStateUpdates, pausedQueueStates, pausedContextStates, renderersWithPatchedDispatcher, typedFiberRoots, getFiberRoot, collectFiberRoots, mergePendingChains, pauseHookQueue, extractActionsFromChain, resumeHookQueue, pauseContextDependency, resumeContextDependency, forEachHookQueue, forEachContextDependency, traverseFibers, pauseFiber, resumeFiber, patchDispatcher, installDispatcherPatching, scheduleReactUpdate, invokeCallbacks, initializeFreezeSupport, freezeUpdates;
 var init_freeze_updates = __esm({
   "src/utils/freeze-updates.ts"() {
     "use strict";
@@ -9233,26 +9470,42 @@ var init_freeze_updates = __esm({
       Object.defineProperty(queue, "pending", {
         configurable: true,
         enumerable: true,
-        get: () => isUpdatesPaused ? pauseState.bufferedPending : currentPendingValue,
+        get: () => isUpdatesPaused ? null : currentPendingValue,
         set: (newValue) => {
           if (isUpdatesPaused) {
-            pauseState.bufferedPending = newValue;
+            if (newValue !== null) {
+              pauseState.bufferedPending = mergePendingChains(
+                pauseState.bufferedPending ?? null,
+                newValue
+              );
+            }
+            return;
           }
           currentPendingValue = newValue;
         }
       });
       pausedQueueStates.set(queue, pauseState);
     };
+    extractActionsFromChain = (pending) => {
+      if (!pending) return [];
+      const actions = [];
+      const first = pending.next;
+      if (!first) return [];
+      let current = first;
+      do {
+        if (current) {
+          actions.push(current.action);
+          current = current.next;
+        }
+      } while (current && current !== first);
+      return actions;
+    };
     resumeHookQueue = (queue) => {
       const pauseState = pausedQueueStates.get(queue);
       if (!pauseState) return;
       if (pauseState.originalGetSnapshot) {
         queue.getSnapshot = pauseState.originalGetSnapshot;
       }
-      const mergedPending = mergePendingChains(
-        pauseState.pendingValueAtPause ?? null,
-        pauseState.bufferedPending ?? null
-      );
       if (pauseState.originalPendingDescriptor) {
         Object.defineProperty(
           queue,
@@ -9262,7 +9515,19 @@ var init_freeze_updates = __esm({
       } else {
         delete queue.pending;
       }
-      queue.pending = mergedPending;
+      queue.pending = null;
+      const dispatch = queue.dispatch;
+      if (typeof dispatch === "function") {
+        const pendingActions = extractActionsFromChain(
+          pauseState.pendingValueAtPause ?? null
+        );
+        const bufferedActions = extractActionsFromChain(
+          pauseState.bufferedPending ?? null
+        );
+        for (const action of [...pendingActions, ...bufferedActions]) {
+          pendingStateUpdates.push(() => dispatch(action));
+        }
+      }
       pausedQueueStates.delete(queue);
     };
     pauseContextDependency = (contextDependency) => {
@@ -9635,7 +9900,7 @@ var init_freeze_gsap = __esm({
 });
 
 // src/utils/freeze-animations.ts
-var FROZEN_STYLES, GLOBAL_FREEZE_STYLES, styleElement, frozenElements, lastInputElements, globalAnimationStyleElement, ensureStylesInjected, areElementsSame, freezeAllAnimations, unfreezeAllAnimations, freezeAnimations, freezeGlobalAnimations, unfreezeGlobalAnimations;
+var FROZEN_STYLES, GLOBAL_FREEZE_STYLES, SVG_ROOT_SELECTOR, styleElement, frozenElements, frozenSvgElements, lastInputElements, globalAnimationStyleElement, globalFrozenSvgElements, svgFreezeDepthMap, frozenWaapiAnimations, ensureStylesInjected, areElementsSame, collectFrozenSvgElements, callSvgAnimationMethod, pauseSvgAnimations, resumeSvgAnimations, collectWaapiAnimations, finishAnimations, freezeAllAnimations, unfreezeAllAnimations, freezeAnimations, freezeGlobalAnimations, unfreezeGlobalAnimations;
 var init_freeze_animations = __esm({
   "src/utils/freeze-animations.ts"() {
     "use strict";
@@ -9655,10 +9920,15 @@ var init_freeze_animations = __esm({
   transition: none !important;
 }
 `;
+    SVG_ROOT_SELECTOR = "svg";
     styleElement = null;
     frozenElements = [];
+    frozenSvgElements = [];
     lastInputElements = [];
     globalAnimationStyleElement = null;
+    globalFrozenSvgElements = [];
+    svgFreezeDepthMap = /* @__PURE__ */ new Map();
+    frozenWaapiAnimations = [];
     ensureStylesInjected = () => {
       if (styleElement) return;
       styleElement = createStyleElement(
@@ -9666,7 +9936,70 @@ var init_freeze_animations = __esm({
         FROZEN_STYLES
       );
     };
-    areElementsSame = (a3, b3) => a3.length === b3.length && a3.every((element, index) => element === b3[index]);
+    areElementsSame = (firstElements, secondElements) => firstElements.length === secondElements.length && firstElements.every(
+      (currentElement, index) => currentElement === secondElements[index]
+    );
+    collectFrozenSvgElements = (elements) => {
+      const svgElements = /* @__PURE__ */ new Set();
+      for (const element of elements) {
+        if (element instanceof SVGSVGElement) {
+          svgElements.add(element);
+        } else if (element instanceof SVGElement && element.ownerSVGElement) {
+          svgElements.add(element.ownerSVGElement);
+        }
+        for (const innerSvgElement of element.querySelectorAll(SVG_ROOT_SELECTOR)) {
+          if (innerSvgElement instanceof SVGSVGElement) {
+            svgElements.add(innerSvgElement);
+          }
+        }
+      }
+      return [...svgElements];
+    };
+    callSvgAnimationMethod = (svgElement, methodName) => {
+      const animationMethod = Reflect.get(svgElement, methodName);
+      if (typeof animationMethod !== "function") return;
+      animationMethod.call(svgElement);
+    };
+    pauseSvgAnimations = (svgElements) => {
+      for (const svgElement of svgElements) {
+        const currentFreezeDepth = svgFreezeDepthMap.get(svgElement) ?? 0;
+        if (currentFreezeDepth === 0) {
+          callSvgAnimationMethod(svgElement, "pauseAnimations");
+        }
+        svgFreezeDepthMap.set(svgElement, currentFreezeDepth + 1);
+      }
+    };
+    resumeSvgAnimations = (svgElements) => {
+      for (const svgElement of svgElements) {
+        const currentFreezeDepth = svgFreezeDepthMap.get(svgElement);
+        if (!currentFreezeDepth) continue;
+        if (currentFreezeDepth === 1) {
+          svgFreezeDepthMap.delete(svgElement);
+          callSvgAnimationMethod(svgElement, "unpauseAnimations");
+          continue;
+        }
+        svgFreezeDepthMap.set(svgElement, currentFreezeDepth - 1);
+      }
+    };
+    collectWaapiAnimations = (elements) => {
+      const animations = [];
+      for (const element of elements) {
+        for (const animation of element.getAnimations({ subtree: true })) {
+          if (animation.playState === "running") {
+            animations.push(animation);
+          }
+        }
+      }
+      return animations;
+    };
+    finishAnimations = (animations) => {
+      for (const animation of animations) {
+        try {
+          animation.finish();
+        } catch {
+        }
+      }
+    };
     freezeAllAnimations = (elements) => {
       if (elements.length === 0) return;
       if (areElementsSame(elements, lastInputElements)) return;
@@ -9674,16 +10007,27 @@ var init_freeze_animations = __esm({
       lastInputElements = [...elements];
       ensureStylesInjected();
       frozenElements = elements;
+      frozenSvgElements = collectFrozenSvgElements(frozenElements);
+      pauseSvgAnimations(frozenSvgElements);
       for (const element of frozenElements) {
         element.setAttribute(FROZEN_ELEMENT_ATTRIBUTE, "");
       }
+      frozenWaapiAnimations = collectWaapiAnimations(frozenElements);
+      for (const animation of frozenWaapiAnimations) {
+        animation.pause();
+      }
     };
     unfreezeAllAnimations = () => {
-      if (frozenElements.length === 0) return;
+      if (frozenElements.length === 0 && frozenSvgElements.length === 0 && frozenWaapiAnimations.length === 0)
+        return;
       for (const element of frozenElements) {
         element.removeAttribute(FROZEN_ELEMENT_ATTRIBUTE);
       }
+      resumeSvgAnimations(frozenSvgElements);
+      finishAnimations(frozenWaapiAnimations);
       frozenElements = [];
+      frozenSvgElements = [];
+      frozenWaapiAnimations = [];
       lastInputElements = [];
     };
     freezeAnimations = (elements) => {
@@ -9701,6 +10045,10 @@ var init_freeze_animations = __esm({
         "data-react-grab-global-freeze",
         GLOBAL_FREEZE_STYLES
       );
+      globalFrozenSvgElements = collectFrozenSvgElements(
+        Array.from(document.querySelectorAll(SVG_ROOT_SELECTOR))
+      );
+      pauseSvgAnimations(globalFrozenSvgElements);
       freezeGsap();
     };
     unfreezeGlobalAnimations = () => {
@@ -9710,6 +10058,7 @@ var init_freeze_animations = __esm({
   transition: none !important;
 }
 `;
+      const animations = [];
       for (const animation of document.getAnimations()) {
         if (animation.effect instanceof KeyframeEffect) {
           const target = animation.effect.target;
@@ -9720,13 +10069,13 @@ var init_freeze_animations = __esm({
             }
           }
         }
-        try {
-          animation.finish();
-        } catch {
-        }
+        animations.push(animation);
       }
+      finishAnimations(animations);
       globalAnimationStyleElement.remove();
       globalAnimationStyleElement = null;
+      resumeSvgAnimations(globalFrozenSvgElements);
+      globalFrozenSvgElements = [];
       unfreezeGsap();
     };
   }
@@ -9840,7 +10189,6 @@ var init_get_element_at_position = __esm({
     init_is_valid_grabbable_element();
     init_constants();
     init_freeze_pseudo_states();
-    init_create_element_bounds();
     cache = null;
     resumeTimerId = null;
     scheduleResume = () => {
@@ -9899,9 +10247,6 @@ var init_get_element_at_position = __esm({
           }
         }
       }
-      if (result) {
-        createElementBounds(result);
-      }
       scheduleResume();
       cache = { clientX, clientY, element: result, timestamp: now };
       return result;
@@ -9915,13 +10260,13 @@ var init_get_element_at_position = __esm({
 });
 
 // src/utils/freeze-pseudo-states.ts
-var POINTER_EVENTS_STYLES, MOUSE_EVENTS_TO_BLOCK, FOCUS_EVENTS_TO_BLOCK, HOVER_STYLE_PROPERTIES, FOCUS_STYLE_PROPERTIES, ANIMATION_CONTROLLED_PROPERTIES, frozenHoverElements, frozenFocusElements, pointerEventsStyle, stopEvent, preventFocusChange, hasAnimationControlledProperty, collectHoverStates, collectFocusStates, applyFrozenStates, restoreFrozenStates, suspendPointerEventsFreeze, resumePointerEventsFreeze, freezePseudoStates, unfreezePseudoStates;
+var POINTER_EVENTS_STYLES, MOUSE_EVENTS_TO_BLOCK, FOCUS_EVENTS_TO_BLOCK, HOVER_STYLE_PROPERTIES, FOCUS_STYLE_PROPERTIES, frozenHoverElements, frozenFocusElements, pointerEventsStyle, stopEvent, preventFocusChange, collectOriginalPropertyValues, collectPseudoStates, applyFrozenStates, restoreFrozenStates, suspendPointerEventsFreeze, resumePointerEventsFreeze, freezePseudoStates, unfreezePseudoStates;
 var init_freeze_pseudo_states = __esm({
   "src/utils/freeze-pseudo-states.ts"() {
     "use strict";
     init_get_element_at_position();
     init_create_style_element();
-    POINTER_EVENTS_STYLES = "* { pointer-events: none !important; }";
+    POINTER_EVENTS_STYLES = "html { pointer-events: none !important; }";
     MOUSE_EVENTS_TO_BLOCK = [
       "mouseenter",
       "mouseleave",
@@ -9960,80 +10305,62 @@ var init_freeze_pseudo_states = __esm({
       "ring-color",
       "ring-width"
     ];
-    ANIMATION_CONTROLLED_PROPERTIES = [
-      "opacity",
-      "transform",
-      "scale",
-      "translate",
-      "rotate"
-    ];
     frozenHoverElements = /* @__PURE__ */ new Map();
     frozenFocusElements = /* @__PURE__ */ new Map();
     pointerEventsStyle = null;
     stopEvent = (event) => {
-      event.stopPropagation();
       event.stopImmediatePropagation();
     };
     preventFocusChange = (event) => {
       event.preventDefault();
-      event.stopPropagation();
       event.stopImmediatePropagation();
     };
-    hasAnimationControlledProperty = (cssText) => {
-      const lowerCssText = cssText.toLowerCase();
-      return ANIMATION_CONTROLLED_PROPERTIES.some(
-        (prop) => lowerCssText.includes(prop)
-      );
-    };
-    collectHoverStates = () => {
-      const elementsToFreeze = [];
-      for (const element of document.querySelectorAll(":hover")) {
-        if (!(element instanceof HTMLElement)) continue;
-        const originalCssText = element.style.cssText;
-        const computed = getComputedStyle(element);
-        let frozenStyles = originalCssText;
-        for (const prop of HOVER_STYLE_PROPERTIES) {
-          const computedValue = computed.getPropertyValue(prop);
-          if (computedValue) {
-            frozenStyles += `${prop}: ${computedValue} !important; `;
-          }
+    collectOriginalPropertyValues = (element, properties) => {
+      const originalPropertyValues = /* @__PURE__ */ new Map();
+      for (const prop of properties) {
+        const inlineValue = element.style.getPropertyValue(prop);
+        if (inlineValue) {
+          originalPropertyValues.set(prop, inlineValue);
         }
-        elementsToFreeze.push({ element, originalCssText, frozenStyles });
       }
-      return elementsToFreeze;
+      return originalPropertyValues;
     };
-    collectFocusStates = () => {
+    collectPseudoStates = (selector, properties, alreadyFrozen) => {
       const elementsToFreeze = [];
-      for (const element of document.querySelectorAll(":focus, :focus-visible")) {
+      for (const element of document.querySelectorAll(selector)) {
         if (!(element instanceof HTMLElement)) continue;
-        if (frozenFocusElements.has(element)) continue;
-        const originalCssText = element.style.cssText;
+        if (alreadyFrozen?.has(element)) continue;
         const computed = getComputedStyle(element);
-        let frozenStyles = originalCssText;
-        for (const prop of FOCUS_STYLE_PROPERTIES) {
+        let frozenStyles = element.style.cssText;
+        const originalPropertyValues = collectOriginalPropertyValues(
+          element,
+          properties
+        );
+        for (const prop of properties) {
           const computedValue = computed.getPropertyValue(prop);
           if (computedValue) {
             frozenStyles += `${prop}: ${computedValue} !important; `;
           }
         }
-        elementsToFreeze.push({ element, originalCssText, frozenStyles });
+        elementsToFreeze.push({ element, frozenStyles, originalPropertyValues });
       }
       return elementsToFreeze;
     };
     applyFrozenStates = (states, storageMap) => {
-      for (const { element, originalCssText, frozenStyles } of states) {
-        storageMap.set(element, originalCssText);
+      for (const { element, frozenStyles, originalPropertyValues } of states) {
+        storageMap.set(element, originalPropertyValues);
         element.style.cssText = frozenStyles;
       }
     };
     restoreFrozenStates = (storageMap, styleProperties) => {
-      for (const [element, originalCssText] of storageMap) {
-        if (hasAnimationControlledProperty(originalCssText)) {
-          for (const prop of styleProperties) {
+      for (const [element, originalPropertyValues] of storageMap) {
+        for (const prop of styleProperties) {
+          const originalValue = originalPropertyValues.get(prop);
+          if (originalValue) {
+            element.style.setProperty(prop, originalValue);
+          } else {
             element.style.removeProperty(prop);
           }
-        } else {
-          element.style.cssText = originalCssText;
         }
       }
       storageMap.clear();
@@ -10052,8 +10379,12 @@ var init_freeze_pseudo_states = __esm({
       for (const eventType of FOCUS_EVENTS_TO_BLOCK) {
         document.addEventListener(eventType, preventFocusChange, true);
       }
-      const hoverStates = collectHoverStates();
-      const focusStates = collectFocusStates();
+      const hoverStates = collectPseudoStates(":hover", HOVER_STYLE_PROPERTIES);
+      const focusStates = collectPseudoStates(
+        ":focus, :focus-visible",
+        FOCUS_STYLE_PROPERTIES,
+        frozenFocusElements
+      );
       applyFrozenStates(hoverStates, frozenHoverElements);
       applyFrozenStates(focusStates, frozenFocusElements);
       pointerEventsStyle = createStyleElement(
@@ -10078,7 +10409,7 @@ var init_freeze_pseudo_states = __esm({
 });
 
 // src/components/tooltip.tsx
-var _tmpl$21, tooltipCloseTimestamp, wasTooltipRecentlyVisible, Tooltip;
+var _tmpl$28, tooltipCloseTimestamp, wasTooltipRecentlyVisible, Tooltip;
 var init_tooltip = __esm({
   "src/components/tooltip.tsx"() {
     "use strict";
@@ -10090,7 +10421,7 @@ var init_tooltip = __esm({
     init_solid();
     init_cn();
     init_constants();
-    _tmpl$21 = /* @__PURE__ */ template(`<div style=z-index:2147483647>`);
+    _tmpl$28 = /* @__PURE__ */ template(`<div style=z-index:2147483647>`);
     tooltipCloseTimestamp = 0;
     wasTooltipRecentlyVisible = () => {
       return Date.now() - tooltipCloseTimestamp < TOOLTIP_GRACE_PERIOD_MS;
@@ -10134,7 +10465,7 @@ var init_tooltip = __esm({
           return delayedVisible();
         },
         get children() {
-          var _el$ = _tmpl$21();
+          var _el$ = _tmpl$28();
           insert(_el$, () => props.children);
           createRenderEffect(() => className(_el$, cn("absolute whitespace-nowrap px-1.5 py-0.5 rounded-[10px] text-[10px] text-black/60 pointer-events-none [corner-shape:superellipse(1.25)]", PANEL_STYLES, props.position === "left" || props.position === "right" ? "top-1/2 -translate-y-1/2" : "left-1/2 -translate-x-1/2", props.position === "top" && "bottom-full mb-2.5", props.position === "bottom" && "top-full mt-2.5", props.position === "left" && "right-full mr-2.5", props.position === "right" && "left-full ml-2.5", shouldAnimate() && "animate-tooltip-fade-in")));
           return _el$;
@@ -10163,7 +10494,7 @@ var init_toolbar_layout = __esm({
 });
 
 // src/components/toolbar/index.tsx
-var _tmpl$27, _tmpl$28, _tmpl$35, Toolbar;
+var _tmpl$29, _tmpl$210, _tmpl$36, Toolbar;
 var init_toolbar = __esm({
   "src/components/toolbar/index.tsx"() {
     "use strict";
@@ -10179,6 +10510,7 @@ var init_toolbar = __esm({
     init_web();
     init_web();
     init_web();
+    init_web();
     init_solid();
     init_cn();
     init_format_shortcut();
@@ -10196,9 +10528,9 @@ var init_toolbar = __esm({
     init_tooltip();
     init_toolbar_layout();
     init_native_raf();
-    _tmpl$27 = /* @__PURE__ */ template(`<span data-react-grab-unread-indicator class="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[#404040]">`);
-    _tmpl$28 = /* @__PURE__ */ template(`<div style=z-index:2147483647>Enable to continue`);
-    _tmpl$35 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar style=z-index:2147483647><div><div><div><div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-toggle></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-history><span class="inline-flex relative"></span></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-copy-all></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-menu></button></div></div></div><div class="relative shrink-0 overflow-visible"><button data-react-grab-ignore-events data-react-grab-toolbar-enabled><div><div></div></div></button></div></div></div><button data-react-grab-ignore-events data-react-grab-toolbar-collapse class="contain-layout shrink-0 flex items-center justify-center cursor-pointer interactive-scale">`);
+    _tmpl$29 = /* @__PURE__ */ template(`<span data-react-grab-unread-indicator class="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[#404040]">`);
+    _tmpl$210 = /* @__PURE__ */ template(`<div style=z-index:2147483647>Enable to continue`);
+    _tmpl$36 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar style=z-index:2147483647><div><div><div><div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-toggle></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-history aria-haspopup=menu><span class="inline-flex relative"></span></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-copy-all aria-label="Copy all history items"></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-menu aria-haspopup=menu></button></div></div></div><div class="relative shrink-0 overflow-visible"><button data-react-grab-ignore-events data-react-grab-toolbar-enabled><div><div></div></div></button></div></div></div><button data-react-grab-ignore-events data-react-grab-toolbar-collapse class="contain-layout shrink-0 flex items-center justify-center cursor-pointer interactive-scale">`);
     Toolbar = (props) => {
       let containerRef;
       let expandableButtonsRef;
@@ -10304,7 +10636,6 @@ var init_toolbar = __esm({
         return `left-1/2 -translate-x-1/2 ${placementClass}`;
       };
       const stopEventPropagation = (event) => {
-        event.stopPropagation();
         event.stopImmediatePropagation();
       };
       const createFreezeHandlers = (setTooltipVisible, options) => ({
@@ -10573,7 +10904,6 @@ var init_toolbar = __esm({
       };
       let didDragOccur = false;
       const createDragAwareHandler = (callback) => (event) => {
-        event.stopPropagation();
         event.stopImmediatePropagation();
         if (didDragOccur) {
           didDragOccur = false;
@@ -11138,9 +11468,9 @@ var init_toolbar = __esm({
         }
       };
       return (() => {
-        var _el$ = _tmpl$35(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$12 = _el$9.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$12.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$5.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.firstChild, _el$22 = _el$3.nextSibling;
+        var _el$ = _tmpl$36(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$12 = _el$9.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$12.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$5.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.firstChild, _el$22 = _el$3.nextSibling;
         _el$.addEventListener("mouseleave", () => props.onSelectHoverChange?.(false));
-        _el$.addEventListener("mouseenter", () => props.onSelectHoverChange?.(true));
+        _el$.addEventListener("mouseenter", () => !isCollapsed() && props.onSelectHoverChange?.(true));
         _el$.$$pointerdown = handlePointerDown;
         var _ref$ = containerRef;
         typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
@@ -11182,6 +11512,12 @@ var init_toolbar = __esm({
           handlePointerDown(event);
         });
         spread(_el$8, mergeProps({
+          get ["aria-label"]() {
+            return props.isActive ? "Stop selecting element" : "Select element";
+          },
+          get ["aria-pressed"]() {
+            return Boolean(props.isActive);
+          },
           get ["class"]() {
             return cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox", buttonSpacingClass(), hitboxConstraintClass());
           }
@@ -11213,6 +11549,12 @@ var init_toolbar = __esm({
           handlePointerDown(event);
         });
         spread(_el$1, mergeProps({
+          get ["aria-label"]() {
+            return `Open history${(props.historyItemCount ?? 0) > 0 ? ` (${props.historyItemCount ?? 0} items)` : ""}`;
+          },
+          get ["aria-expanded"]() {
+            return Boolean(props.isHistoryDropdownOpen);
+          },
           get ["class"]() {
             return cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox", buttonSpacingClass(), hitboxConstraintClass());
           }
@@ -11237,7 +11579,7 @@ var init_toolbar = __esm({
             return props.hasUnreadHistoryItems;
           },
           get children() {
-            return _tmpl$27();
+            return _tmpl$29();
           }
         }), null);
         insert(_el$0, createComponent(Tooltip, {
@@ -11292,6 +11634,12 @@ var init_toolbar = __esm({
           handlePointerDown(event);
         });
         spread(_el$17, mergeProps({
+          get ["aria-label"]() {
+            return props.isMenuOpen ? "Close more actions menu" : "Open more actions menu";
+          },
+          get ["aria-expanded"]() {
+            return Boolean(props.isMenuOpen);
+          },
           get ["class"]() {
             return cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox", buttonSpacingClass(), hitboxConstraintClass());
           }
@@ -11345,13 +11693,13 @@ var init_toolbar = __esm({
             return isShakeTooltipVisible();
           },
           get children() {
-            var _el$23 = _tmpl$28();
+            var _el$23 = _tmpl$210();
             createRenderEffect(() => className(_el$23, cn("absolute whitespace-nowrap px-1.5 py-0.5 rounded-[10px] text-[10px] text-black/60 pointer-events-none animate-tooltip-fade-in [corner-shape:superellipse(1.25)]", PANEL_STYLES, shakeTooltipPositionClass())));
             return _el$23;
           }
         }), null);
         createRenderEffect((_p$) => {
-          var _v$ = cn("fixed left-0 top-0 font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none", getCursorClass(), getTransitionClass(), isVisible() ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"), _v$2 = `translate(${currentPosition().x}px, ${currentPosition().y}px)`, _v$3 = getTransformOrigin(), _v$4 = cn("flex items-center justify-center rounded-[10px] antialiased relative overflow-visible [font-synthesis:none] [corner-shape:superellipse(1.25)]", isVertical() && "flex-col", PANEL_STYLES, !isCollapsed() && (isVertical() ? "px-1.5 gap-1.5 py-2" : "py-1.5 gap-1.5 px-2"), collapsedEdgeClasses(), isShaking() && "animate-shake"), _v$5 = getTransformOrigin(), _v$6 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(!isCollapsed(), "pointer-events-none")), _v$7 = cn("flex", isVertical() ? "flex-col items-center min-h-0" : "items-center min-w-0"), _v$8 = cn("flex items-center", isVertical() && "flex-col"), _v$9 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.enabled))), _v$0 = cn("relative overflow-visible", minDimensionClass()), _v$1 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.enabled) && (props.historyItemCount ?? 0) > 0, "pointer-events-none")), _v$10 = cn("relative overflow-visible", minDimensionClass()), _v$11 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.isHistoryDropdownOpen), "pointer-events-none")), _v$12 = cn("relative overflow-visible", minDimensionClass()), _v$13 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.enabled) && hasToolbarActions(), "pointer-events-none")), _v$14 = cn("relative overflow-visible", minDimensionClass()), _v$15 = cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale outline-none", isVertical() ? "my-0.5" : "mx-0.5"), _v$16 = cn("relative rounded-full transition-colors", isVertical() ? "w-3.5 h-2.5" : "w-5 h-3", props.enabled ? "bg-black" : "bg-black/25"), _v$17 = cn("absolute top-0.5 rounded-full bg-white transition-transform", isVertical() ? "w-1.5 h-1.5" : "w-2 h-2", !props.enabled && "left-0.5", props.enabled && (isVertical() ? "left-1.5" : "left-2.5"));
+          var _v$ = cn("fixed left-0 top-0 font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none", getCursorClass(), getTransitionClass(), isVisible() ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"), _v$2 = `translate(${currentPosition().x}px, ${currentPosition().y}px)`, _v$3 = getTransformOrigin(), _v$4 = cn("flex items-center justify-center rounded-[10px] antialiased relative overflow-visible [font-synthesis:none] [corner-shape:superellipse(1.25)]", isVertical() && "flex-col", PANEL_STYLES, !isCollapsed() && (isVertical() ? "px-1.5 gap-1.5 py-2" : "py-1.5 gap-1.5 px-2"), collapsedEdgeClasses(), isShaking() && "animate-shake"), _v$5 = getTransformOrigin(), _v$6 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(!isCollapsed(), "pointer-events-none")), _v$7 = cn("flex", isVertical() ? "flex-col items-center min-h-0" : "items-center min-w-0"), _v$8 = cn("flex items-center", isVertical() && "flex-col"), _v$9 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.enabled))), _v$0 = cn("relative overflow-visible", minDimensionClass()), _v$1 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.enabled) && (props.historyItemCount ?? 0) > 0, "pointer-events-none")), _v$10 = cn("relative overflow-visible", minDimensionClass()), _v$11 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.isHistoryDropdownOpen), "pointer-events-none")), _v$12 = cn("relative overflow-visible", minDimensionClass()), _v$13 = cn("grid", !isRapidRetoggle() && gridTransitionClass(), expandGridClass(Boolean(props.enabled) && hasToolbarActions(), "pointer-events-none")), _v$14 = cn("relative overflow-visible", minDimensionClass()), _v$15 = props.enabled ? "Disable React Grab" : "Enable React Grab", _v$16 = Boolean(props.enabled), _v$17 = cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale outline-none", isVertical() ? "my-0.5" : "mx-0.5"), _v$18 = cn("relative rounded-full transition-colors", isVertical() ? "w-3.5 h-2.5" : "w-5 h-3", props.enabled ? "bg-black" : "bg-black/25"), _v$19 = cn("absolute top-0.5 rounded-full bg-white transition-transform", isVertical() ? "w-1.5 h-1.5" : "w-2 h-2", !props.enabled && "left-0.5", props.enabled && (isVertical() ? "left-1.5" : "left-2.5")), _v$20 = isCollapsed() ? "Expand toolbar" : "Collapse toolbar";
           _v$ !== _p$.e && className(_el$, _p$.e = _v$);
           _v$2 !== _p$.t && setStyleProperty(_el$, "transform", _p$.t = _v$2);
           _v$3 !== _p$.a && setStyleProperty(_el$, "transform-origin", _p$.a = _v$3);
@@ -11368,9 +11716,12 @@ var init_toolbar = __esm({
           _v$12 !== _p$.w && className(_el$13, _p$.w = _v$12);
           _v$13 !== _p$.m && className(_el$15, _p$.m = _v$13);
           _v$14 !== _p$.f && className(_el$16, _p$.f = _v$14);
-          _v$15 !== _p$.y && className(_el$19, _p$.y = _v$15);
-          _v$16 !== _p$.g && className(_el$20, _p$.g = _v$16);
-          _v$17 !== _p$.p && className(_el$21, _p$.p = _v$17);
+          _v$15 !== _p$.y && setAttribute(_el$19, "aria-label", _p$.y = _v$15);
+          _v$16 !== _p$.g && setAttribute(_el$19, "aria-pressed", _p$.g = _v$16);
+          _v$17 !== _p$.p && className(_el$19, _p$.p = _v$17);
+          _v$18 !== _p$.b && className(_el$20, _p$.b = _v$18);
+          _v$19 !== _p$.T && className(_el$21, _p$.T = _v$19);
+          _v$20 !== _p$.A && setAttribute(_el$22, "aria-label", _p$.A = _v$20);
           return _p$;
         }, {
           e: void 0,
@@ -11391,7 +11742,10 @@ var init_toolbar = __esm({
           f: void 0,
           y: void 0,
           g: void 0,
-          p: void 0
+          p: void 0,
+          b: void 0,
+          T: void 0,
+          A: void 0
         });
         return _el$;
       })();
@@ -11409,6 +11763,52 @@ var init_clamp_to_viewport = __esm({
   }
 });
 
+// src/utils/get-anchored-dropdown-position.ts
+var getAnchoredDropdownPosition;
+var init_get_anchored_dropdown_position = __esm({
+  "src/utils/get-anchored-dropdown-position.ts"() {
+    "use strict";
+    init_clamp_to_viewport();
+    getAnchoredDropdownPosition = ({
+      anchor,
+      measuredWidth,
+      measuredHeight,
+      viewportWidth,
+      viewportHeight,
+      anchorGapPx,
+      viewportPaddingPx,
+      offscreenPosition
+    }) => {
+      if (!anchor || measuredWidth === 0 || measuredHeight === 0) {
+        return offscreenPosition;
+      }
+      let rawLeft;
+      let rawTop;
+      if (anchor.edge === "left" || anchor.edge === "right") {
+        rawLeft = anchor.edge === "left" ? anchor.x + anchorGapPx : anchor.x - measuredWidth - anchorGapPx;
+        rawTop = anchor.y - measuredHeight / 2;
+      } else {
+        rawLeft = anchor.x - measuredWidth / 2;
+        rawTop = anchor.edge === "top" ? anchor.y + anchorGapPx : anchor.y - measuredHeight - anchorGapPx;
+      }
+      return {
+        left: clampToViewport(
+          rawLeft,
+          measuredWidth,
+          viewportWidth,
+          viewportPaddingPx
+        ),
+        top: clampToViewport(
+          rawTop,
+          measuredHeight,
+          viewportHeight,
+          viewportPaddingPx
+        )
+      };
+    };
+  }
+});
+
 // src/utils/is-event-from-overlay.ts
 var isEventFromOverlay;
 var init_is_event_from_overlay = __esm({
@@ -11447,7 +11847,7 @@ var init_resolve_action_enabled = __esm({
 });
 
 // src/components/toolbar/toolbar-menu.tsx
-var _tmpl$29, _tmpl$210, _tmpl$36, _tmpl$44, ToolbarMenu;
+var _tmpl$30, _tmpl$211, _tmpl$37, _tmpl$44, ToolbarMenu;
 var init_toolbar_menu = __esm({
   "src/components/toolbar/toolbar-menu.tsx"() {
     "use strict";
@@ -11461,26 +11861,34 @@ var init_toolbar_menu = __esm({
     init_web();
     init_web();
     init_web();
+    init_web();
     init_solid();
     init_constants();
-    init_clamp_to_viewport();
+    init_get_anchored_dropdown_position();
     init_cn();
     init_format_shortcut();
     init_is_event_from_overlay();
     init_resolve_action_enabled();
     init_native_raf();
-    _tmpl$29 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div><div class="flex flex-col py-1">`);
-    _tmpl$210 = /* @__PURE__ */ template(`<div><div>`);
-    _tmpl$36 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="contain-layout flex items-center justify-between w-full px-2 py-1 cursor-pointer transition-colors hover:bg-black/5 text-left border-none bg-transparent disabled:opacity-40 disabled:cursor-default disabled:hover:bg-transparent"><span class="text-[13px] leading-4 font-sans font-medium text-black">`);
+    init_create_menu_highlight();
+    _tmpl$30 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div><div class="relative flex flex-col py-1"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`);
+    _tmpl$211 = /* @__PURE__ */ template(`<div><div>`);
+    _tmpl$37 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="relative z-1 contain-layout flex items-center justify-between w-full px-2 py-1 cursor-pointer text-left border-none bg-transparent disabled:opacity-40 disabled:cursor-default"><span class="text-[13px] leading-4 font-sans font-medium text-black">`);
     _tmpl$44 = /* @__PURE__ */ template(`<span class="text-[11px] font-sans text-black/50 ml-4">`);
     ToolbarMenu = (props) => {
       let containerRef;
+      const {
+        containerRef: highlightContainerRef,
+        highlightRef,
+        updateHighlight,
+        clearHighlight
+      } = createMenuHighlight();
       const [measuredWidth, setMeasuredWidth] = createSignal(0);
       const [measuredHeight, setMeasuredHeight] = createSignal(0);
       const [shouldMount, setShouldMount] = createSignal(false);
       const [isAnimatedIn, setIsAnimatedIn] = createSignal(false);
       const [lastAnchorEdge, setLastAnchorEdge] = createSignal("bottom");
-      const [toggleTrigger, setToggleTrigger] = createSignal(0);
+      const [toggleRefreshCounter, setToggleRefreshCounter] = createSignal(0);
       let exitAnimationTimeout;
       let enterAnimationFrameId;
       const measureContainer = () => {
@@ -11509,32 +11917,17 @@ var init_toolbar_menu = __esm({
           }, DROPDOWN_ANIMATION_DURATION_MS);
         }
       });
-      const computedPosition = () => {
-        const anchor = props.position;
-        const width = measuredWidth();
-        const height = measuredHeight();
-        if (!anchor || width === 0 || height === 0) {
-          return DROPDOWN_OFFSCREEN_POSITION;
-        }
-        const {
-          edge
-        } = anchor;
-        let rawLeft;
-        let rawTop;
-        if (edge === "left" || edge === "right") {
-          rawLeft = edge === "left" ? anchor.x + DROPDOWN_ANCHOR_GAP_PX : anchor.x - width - DROPDOWN_ANCHOR_GAP_PX;
-          rawTop = anchor.y - height / 2;
-        } else {
-          rawLeft = anchor.x - width / 2;
-          rawTop = edge === "top" ? anchor.y + DROPDOWN_ANCHOR_GAP_PX : anchor.y - height - DROPDOWN_ANCHOR_GAP_PX;
-        }
-        return {
-          left: clampToViewport(rawLeft, width, window.innerWidth, DROPDOWN_VIEWPORT_PADDING_PX),
-          top: clampToViewport(rawTop, height, window.innerHeight, DROPDOWN_VIEWPORT_PADDING_PX)
-        };
-      };
       const displayPosition = createMemo((previousPosition) => {
-        const position = computedPosition();
+        const position = getAnchoredDropdownPosition({
+          anchor: props.position,
+          measuredWidth: measuredWidth(),
+          measuredHeight: measuredHeight(),
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          anchorGapPx: DROPDOWN_ANCHOR_GAP_PX,
+          viewportPaddingPx: DROPDOWN_VIEWPORT_PADDING_PX,
+          offscreenPosition: DROPDOWN_OFFSCREEN_POSITION
+        });
         if (position.left !== DROPDOWN_OFFSCREEN_POSITION.left) {
           return position;
         }
@@ -11551,7 +11944,7 @@ var init_toolbar_menu = __esm({
         if (!resolveToolbarActionEnabled(action)) return;
         action.onAction();
         if (action.isActive !== void 0) {
-          setToggleTrigger((previous) => previous + 1);
+          setToggleRefreshCounter((previous) => previous + 1);
         } else {
           props.onDismiss();
         }
@@ -11601,7 +11994,7 @@ var init_toolbar_menu = __esm({
           return shouldMount();
         },
         get children() {
-          var _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+          var _el$ = _tmpl$30(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
           _el$.$$contextmenu = handleMenuEvent;
           _el$.$$click = handleMenuEvent;
           _el$.$$mousedown = handleMenuEvent;
@@ -11609,6 +12002,8 @@ var init_toolbar_menu = __esm({
           var _ref$ = containerRef;
           typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
           setStyleProperty(_el$2, "min-width", `${TOOLBAR_MENU_MIN_WIDTH_PX}px`);
+          use(highlightContainerRef, _el$3);
+          use(highlightRef, _el$4);
           insert(_el$3, createComponent(For, {
             get each() {
               return props.actions;
@@ -11617,55 +12012,61 @@ var init_toolbar_menu = __esm({
               const isEnabled = () => resolveToolbarActionEnabled(action);
               const isToggle = () => action.isActive !== void 0;
               const toggleActive = () => {
-                void toggleTrigger();
+                void toggleRefreshCounter();
                 return Boolean(action.isActive?.());
               };
               return (() => {
-                var _el$4 = _tmpl$36(), _el$5 = _el$4.firstChild;
-                _el$4.$$click = (event) => handleActionClick(action, event);
-                _el$4.$$pointerdown = (event) => event.stopPropagation();
-                insert(_el$5, () => action.label);
-                insert(_el$4, createComponent(Show, {
+                var _el$5 = _tmpl$37(), _el$6 = _el$5.firstChild;
+                _el$5.$$click = (event) => handleActionClick(action, event);
+                addEventListener(_el$5, "pointerleave", clearHighlight);
+                _el$5.addEventListener("pointerenter", (event) => {
+                  if (isEnabled()) {
+                    updateHighlight(event.currentTarget);
+                  }
+                });
+                _el$5.$$pointerdown = (event) => event.stopPropagation();
+                insert(_el$6, () => action.label);
+                insert(_el$5, createComponent(Show, {
                   get when() {
                     return memo(() => !!!isToggle())() && action.shortcut;
                   },
                   children: (shortcutKey) => (() => {
-                    var _el$8 = _tmpl$44();
-                    insert(_el$8, () => formatShortcut(shortcutKey()));
-                    return _el$8;
+                    var _el$9 = _tmpl$44();
+                    insert(_el$9, () => formatShortcut(shortcutKey()));
+                    return _el$9;
                   })()
                 }), null);
-                insert(_el$4, createComponent(Show, {
+                insert(_el$5, createComponent(Show, {
                   get when() {
                     return isToggle();
                   },
                   get children() {
-                    var _el$6 = _tmpl$210(), _el$7 = _el$6.firstChild;
+                    var _el$7 = _tmpl$211(), _el$8 = _el$7.firstChild;
                     createRenderEffect((_p$) => {
                       var _v$8 = cn("relative rounded-full transition-colors ml-4 shrink-0 w-5 h-3", toggleActive() ? "bg-black" : "bg-black/25"), _v$9 = cn("absolute top-0.5 rounded-full bg-white transition-transform w-2 h-2", toggleActive() ? "left-2.5" : "left-0.5");
-                      _v$8 !== _p$.e && className(_el$6, _p$.e = _v$8);
-                      _v$9 !== _p$.t && className(_el$7, _p$.t = _v$9);
+                      _v$8 !== _p$.e && className(_el$7, _p$.e = _v$8);
+                      _v$9 !== _p$.t && className(_el$8, _p$.t = _v$9);
                       return _p$;
                     }, {
                       e: void 0,
                       t: void 0
                     });
-                    return _el$6;
+                    return _el$7;
                   }
                 }), null);
                 createRenderEffect((_p$) => {
                   var _v$0 = action.id, _v$1 = !isEnabled();
-                  _v$0 !== _p$.e && setAttribute(_el$4, "data-react-grab-menu-item", _p$.e = _v$0);
-                  _v$1 !== _p$.t && (_el$4.disabled = _p$.t = _v$1);
+                  _v$0 !== _p$.e && setAttribute(_el$5, "data-react-grab-menu-item", _p$.e = _v$0);
+                  _v$1 !== _p$.t && (_el$5.disabled = _p$.t = _v$1);
                   return _p$;
                 }, {
                   e: void 0,
                   t: void 0
                 });
-                return _el$4;
+                return _el$5;
               })();
             }
-          }));
+          }), null);
           createRenderEffect((_p$) => {
             var _v$ = `${displayPosition().top}px`, _v$2 = `${displayPosition().left}px`, _v$3 = isAnimatedIn() ? "auto" : "none", _v$4 = DROPDOWN_EDGE_TRANSFORM_ORIGIN[lastAnchorEdge()], _v$5 = isAnimatedIn() ? "1" : "0", _v$6 = isAnimatedIn() ? "scale(1)" : "scale(0.95)", _v$7 = cn("contain-layout flex flex-col rounded-[10px] antialiased w-fit h-fit overflow-hidden [font-synthesis:none] [corner-shape:superellipse(1.25)]", PANEL_STYLES);
             _v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
@@ -11694,7 +12095,7 @@ var init_toolbar_menu = __esm({
 });
 
 // src/components/context-menu.tsx
-var _tmpl$30, _tmpl$211, _tmpl$37, _tmpl$45, ContextMenu;
+var _tmpl$31, _tmpl$212, _tmpl$38, _tmpl$45, ContextMenu;
 var init_context_menu = __esm({
   "src/components/context-menu.tsx"() {
     "use strict";
@@ -11707,6 +12108,7 @@ var init_context_menu = __esm({
     init_web();
     init_web();
     init_web();
+    init_web();
     init_solid();
     init_constants();
     init_cn();
@@ -11718,12 +12120,19 @@ var init_context_menu = __esm({
     init_resolve_action_enabled();
     init_is_event_from_overlay();
     init_native_raf();
-    _tmpl$30 = /* @__PURE__ */ template(`<div class="flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5">`);
-    _tmpl$211 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-context-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none"style=z-index:2147483647;pointer-events:auto><div><div class="contain-layout shrink-0 flex items-center gap-1 pt-1.5 pb-1 w-fit h-fit px-2">`);
-    _tmpl$37 = /* @__PURE__ */ template(`<span class="text-[11px] font-sans text-black/50 ml-4">`);
-    _tmpl$45 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="contain-layout flex items-center justify-between w-full px-2 py-1 cursor-pointer hover:bg-black/5 text-left border-none bg-transparent disabled:opacity-40 disabled:cursor-default disabled:hover:bg-transparent"><span class="text-[13px] leading-4 font-sans font-medium text-black">`);
+    init_create_menu_highlight();
+    _tmpl$31 = /* @__PURE__ */ template(`<div class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`);
+    _tmpl$212 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-context-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none"style=z-index:2147483647;pointer-events:auto><div><div class="contain-layout shrink-0 flex items-center gap-1 pt-1.5 pb-1 w-fit h-fit px-2">`);
+    _tmpl$38 = /* @__PURE__ */ template(`<span class="text-[11px] font-sans text-black/50 ml-4">`);
+    _tmpl$45 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="relative z-1 contain-layout flex items-center justify-between w-full px-2 py-1 cursor-pointer text-left border-none bg-transparent disabled:opacity-40 disabled:cursor-default"><span class="text-[13px] leading-4 font-sans font-medium text-black">`);
     ContextMenu = (props) => {
       let containerRef;
+      const {
+        containerRef: highlightContainerRef,
+        highlightRef,
+        updateHighlight,
+        clearHighlight
+      } = createMenuHighlight();
       const [measuredWidth, setMeasuredWidth] = createSignal(0);
       const [measuredHeight, setMeasuredHeight] = createSignal(0);
       const isVisible = () => props.position !== null;
@@ -11878,7 +12287,7 @@ var init_context_menu = __esm({
           return isVisible();
         },
         get children() {
-          var _el$ = _tmpl$211(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+          var _el$ = _tmpl$212(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
           _el$.$$contextmenu = handleMenuEvent;
           _el$.$$click = handleMenuEvent;
           _el$.$$mousedown = handleMenuEvent;
@@ -11918,38 +12327,46 @@ var init_context_menu = __esm({
           }));
           insert(_el$2, createComponent(BottomSection, {
             get children() {
-              var _el$4 = _tmpl$30();
+              var _el$4 = _tmpl$31(), _el$5 = _el$4.firstChild;
+              use(highlightContainerRef, _el$4);
+              use(highlightRef, _el$5);
               insert(_el$4, createComponent(For, {
                 get each() {
                   return menuItems();
                 },
                 children: (item) => (() => {
-                  var _el$5 = _tmpl$45(), _el$6 = _el$5.firstChild;
-                  _el$5.$$click = (event) => handleAction(item, event);
-                  _el$5.$$pointerdown = (event) => event.stopPropagation();
-                  insert(_el$6, () => item.label);
-                  insert(_el$5, createComponent(Show, {
+                  var _el$6 = _tmpl$45(), _el$7 = _el$6.firstChild;
+                  _el$6.$$click = (event) => handleAction(item, event);
+                  addEventListener(_el$6, "pointerleave", clearHighlight);
+                  _el$6.addEventListener("pointerenter", (event) => {
+                    if (item.enabled) {
+                      updateHighlight(event.currentTarget);
+                    }
+                  });
+                  _el$6.$$pointerdown = (event) => event.stopPropagation();
+                  insert(_el$7, () => item.label);
+                  insert(_el$6, createComponent(Show, {
                     get when() {
                       return item.shortcut;
                     },
                     get children() {
-                      var _el$7 = _tmpl$37();
-                      insert(_el$7, () => formatShortcut(item.shortcut));
-                      return _el$7;
+                      var _el$8 = _tmpl$38();
+                      insert(_el$8, () => formatShortcut(item.shortcut));
+                      return _el$8;
                     }
                   }), null);
                   createRenderEffect((_p$) => {
                     var _v$4 = item.label.toLowerCase(), _v$5 = !item.enabled;
-                    _v$4 !== _p$.e && setAttribute(_el$5, "data-react-grab-menu-item", _p$.e = _v$4);
-                    _v$5 !== _p$.t && (_el$5.disabled = _p$.t = _v$5);
+                    _v$4 !== _p$.e && setAttribute(_el$6, "data-react-grab-menu-item", _p$.e = _v$4);
+                    _v$5 !== _p$.t && (_el$6.disabled = _p$.t = _v$5);
                     return _p$;
                   }, {
                     e: void 0,
                     t: void 0
                   });
-                  return _el$5;
+                  return _el$6;
                 })()
-              }));
+              }), null);
               return _el$4;
             }
           }), null);
@@ -11973,18 +12390,18 @@ var init_context_menu = __esm({
 });
 
 // src/components/icons/icon-trash.tsx
-var _tmpl$31, IconTrash;
+var _tmpl$39, IconTrash;
 var init_icon_trash = __esm({
   "src/components/icons/icon-trash.tsx"() {
     "use strict";
     init_web();
     init_web();
     init_web();
-    _tmpl$31 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M4.63751 20.1665L3.82444 6.75092L3.73431 5.06621C3.72513 4.89447 3.8619 4.75018 4.03388 4.75018H19.9945C20.1685 4.75018 20.306 4.89769 20.2938 5.07124L20.1756 6.75092L19.3625 20.1665C19.2745 21.618 18.0717 22.7502 16.6176 22.7502H7.38247C5.9283 22.7502 4.72548 21.618 4.63751 20.1665ZM8.74963 16.5002C8.74963 16.9144 9.08542 17.2502 9.49963 17.2502C9.91385 17.2502 10.2496 16.9144 10.2496 16.5002V10.5002C10.2496 10.086 9.91385 9.75018 9.49963 9.75018C9.08542 9.75018 8.74963 10.086 8.74963 10.5002V16.5002ZM14.4996 9.75018C14.9138 9.75018 15.2496 10.086 15.2496 10.5002V16.5002C15.2496 16.9144 14.9138 17.2502 14.4996 17.2502C14.0854 17.2502 13.7496 16.9144 13.7496 16.5002V10.5002C13.7496 10.086 14.0854 9.75018 14.4996 9.75018Z"></path><path fill-rule=evenodd clip-rule=evenodd d="M8.31879 2.46286C8.63394 1.7275 9.35702 1.2507 10.1571 1.2507H13.8383C14.6383 1.2507 15.3614 1.7275 15.6766 2.46286L16.6569 4.75034H19.2239C19.2903 4.75034 19.3523 4.75034 19.4102 4.7507H19.4637C19.4857 4.74973 19.5079 4.74972 19.5303 4.7507H20.9977C21.55 4.7507 21.9977 5.19842 21.9977 5.7507C21.9977 6.30299 21.55 6.7507 20.9977 6.7507H2.99768C2.4454 6.7507 1.99768 6.30299 1.99768 5.7507C1.99768 5.19842 2.4454 4.7507 2.99768 4.7507H4.46507C4.48746 4.74972 4.50968 4.74973 4.53167 4.7507H4.58469C4.6426 4.75034 4.70457 4.75034 4.77093 4.75034H7.33844L8.31879 2.46286ZM13.8903 3.37192L14.481 4.75034H9.5144L10.1052 3.37192C10.1367 3.29838 10.209 3.2507 10.289 3.2507L13.7064 3.2507C13.7864 3.2507 13.8587 3.29838 13.8903 3.37192Z">`);
+    _tmpl$39 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M4.63751 20.1665L3.82444 6.75092L3.73431 5.06621C3.72513 4.89447 3.8619 4.75018 4.03388 4.75018H19.9945C20.1685 4.75018 20.306 4.89769 20.2938 5.07124L20.1756 6.75092L19.3625 20.1665C19.2745 21.618 18.0717 22.7502 16.6176 22.7502H7.38247C5.9283 22.7502 4.72548 21.618 4.63751 20.1665ZM8.74963 16.5002C8.74963 16.9144 9.08542 17.2502 9.49963 17.2502C9.91385 17.2502 10.2496 16.9144 10.2496 16.5002V10.5002C10.2496 10.086 9.91385 9.75018 9.49963 9.75018C9.08542 9.75018 8.74963 10.086 8.74963 10.5002V16.5002ZM14.4996 9.75018C14.9138 9.75018 15.2496 10.086 15.2496 10.5002V16.5002C15.2496 16.9144 14.9138 17.2502 14.4996 17.2502C14.0854 17.2502 13.7496 16.9144 13.7496 16.5002V10.5002C13.7496 10.086 14.0854 9.75018 14.4996 9.75018Z"></path><path fill-rule=evenodd clip-rule=evenodd d="M8.31879 2.46286C8.63394 1.7275 9.35702 1.2507 10.1571 1.2507H13.8383C14.6383 1.2507 15.3614 1.7275 15.6766 2.46286L16.6569 4.75034H19.2239C19.2903 4.75034 19.3523 4.75034 19.4102 4.7507H19.4637C19.4857 4.74973 19.5079 4.74972 19.5303 4.7507H20.9977C21.55 4.7507 21.9977 5.19842 21.9977 5.7507C21.9977 6.30299 21.55 6.7507 20.9977 6.7507H2.99768C2.4454 6.7507 1.99768 6.30299 1.99768 5.7507C1.99768 5.19842 2.4454 4.7507 2.99768 4.7507H4.46507C4.48746 4.74972 4.50968 4.74973 4.53167 4.7507H4.58469C4.6426 4.75034 4.70457 4.75034 4.77093 4.75034H7.33844L8.31879 2.46286ZM13.8903 3.37192L14.481 4.75034H9.5144L10.1052 3.37192C10.1367 3.29838 10.209 3.2507 10.289 3.2507L13.7064 3.2507C13.7864 3.2507 13.8587 3.29838 13.8903 3.37192Z">`);
     IconTrash = (props) => {
       const size = () => props.size ?? 14;
       return (() => {
-        var _el$ = _tmpl$31();
+        var _el$ = _tmpl$39();
         createRenderEffect((_p$) => {
           var _v$ = size(), _v$2 = size(), _v$3 = props.class;
           _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -12003,7 +12420,7 @@ var init_icon_trash = __esm({
 });
 
 // src/components/history-dropdown.tsx
-var _tmpl$38, _tmpl$212, _tmpl$39, _tmpl$46, ITEM_ACTION_CLASS, formatRelativeTime, getHistoryItemDisplayName, HistoryDropdown;
+var _tmpl$40, _tmpl$213, _tmpl$310, _tmpl$46, ITEM_ACTION_CLASS, formatRelativeTime, getHistoryItemDisplayName, HistoryDropdown;
 var init_history_dropdown = __esm({
   "src/components/history-dropdown.tsx"() {
     "use strict";
@@ -12016,20 +12433,22 @@ var init_history_dropdown = __esm({
     init_web();
     init_web();
     init_web();
+    init_web();
     init_solid();
     init_constants();
     init_safe_polygon();
-    init_clamp_to_viewport();
+    init_get_anchored_dropdown_position();
     init_cn();
     init_icon_trash();
     init_icon_copy();
     init_icon_check();
     init_tooltip();
     init_native_raf();
-    _tmpl$38 = /* @__PURE__ */ template(`<div class="flex items-center gap-[5px]"><div class=relative><button data-react-grab-ignore-events data-react-grab-history-clear class="contain-layout shrink-0 flex items-center justify-center px-[3px] py-px rounded-sm bg-[#FEF2F2] cursor-pointer transition-all hover:bg-[#FEE2E2] press-scale h-[17px] text-[#B91C1C]"></button></div><div class=relative><button data-react-grab-ignore-events data-react-grab-history-copy-all class="contain-layout shrink-0 flex items-center justify-center gap-1 px-[3px] py-px rounded-sm bg-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px] text-black/60">`);
-    _tmpl$212 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-history-dropdown class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div><div class="contain-layout shrink-0 flex items-center justify-between px-2 pt-1.5 pb-1"><span class="text-[11px] font-medium text-black/40">History</span></div><div class="min-h-0 [border-top-width:0.5px] border-t-solid border-t-[#D9D9D9] px-2 py-1.5"><div class="flex flex-col max-h-[240px] overflow-y-auto -mx-2 -my-1.5"style="scrollbar-color:rgba(0,0,0,0.15) transparent">`);
-    _tmpl$39 = /* @__PURE__ */ template(`<span class="text-[11px] leading-3 font-sans text-black/40 truncate mt-0.5">`);
-    _tmpl$46 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-history-item class="group contain-layout flex items-start justify-between w-full px-2 py-1 cursor-pointer hover:bg-black/5 focus-within:bg-black/5 text-left gap-2"tabindex=0><span class="flex flex-col min-w-0 flex-1"><span class="text-[12px] leading-4 font-sans font-medium text-black truncate"></span></span><span class="shrink-0 grid"><span class="text-[10px] font-sans text-black/25 group-hover:invisible group-focus-within:invisible [grid-area:1/1] flex items-center justify-end"></span><span class="invisible group-hover:visible group-focus-within:visible [grid-area:1/1] flex items-center justify-end gap-1.5"><button data-react-grab-ignore-events data-react-grab-history-item-remove></button><button data-react-grab-ignore-events data-react-grab-history-item-copy>`);
+    init_create_menu_highlight();
+    _tmpl$40 = /* @__PURE__ */ template(`<div class="flex items-center gap-[5px]"><div class=relative><button data-react-grab-ignore-events data-react-grab-history-clear class="contain-layout shrink-0 flex items-center justify-center px-[3px] py-px rounded-sm bg-[#FEF2F2] cursor-pointer transition-all hover:bg-[#FEE2E2] press-scale h-[17px] text-[#B91C1C]"></button></div><div class=relative><button data-react-grab-ignore-events data-react-grab-history-copy-all class="contain-layout shrink-0 flex items-center justify-center gap-1 px-[3px] py-px rounded-sm bg-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px] text-black/60">`);
+    _tmpl$213 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-history-dropdown class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div><div class="contain-layout shrink-0 flex items-center justify-between px-2 pt-1.5 pb-1"><span class="text-[11px] font-medium text-black/40">History</span></div><div class="min-h-0 [border-top-width:0.5px] border-t-solid border-t-[#D9D9D9] px-2 py-1.5"><div class="relative flex flex-col max-h-[240px] overflow-y-auto -mx-2 -my-1.5 [scrollbar-width:thin] [scrollbar-color:transparent_transparent] hover:[scrollbar-color:rgba(0,0,0,0.15)_transparent]"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`);
+    _tmpl$310 = /* @__PURE__ */ template(`<span class="text-[11px] leading-3 font-sans text-black/40 truncate mt-0.5">`);
+    _tmpl$46 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-history-item class="group relative z-1 contain-layout flex items-start justify-between w-full px-2 py-1 cursor-pointer text-left gap-2"tabindex=0><span class="flex flex-col min-w-0 flex-1"><span class="text-[12px] leading-4 font-sans font-medium text-black truncate"></span></span><span class="shrink-0 grid"><span class="text-[10px] font-sans text-black/25 group-hover:invisible group-focus-within:invisible [grid-area:1/1] flex items-center justify-end"></span><span class="invisible group-hover:visible group-focus-within:visible [grid-area:1/1] flex items-center justify-end gap-1.5"><button data-react-grab-ignore-events data-react-grab-history-item-remove></button><button data-react-grab-ignore-events data-react-grab-history-item-copy>`);
     ITEM_ACTION_CLASS = "flex items-center justify-center cursor-pointer text-black/25 transition-colors press-scale";
     formatRelativeTime = (timestamp) => {
       const elapsedSeconds = Math.floor((Date.now() - timestamp) / 1e3);
@@ -12048,6 +12467,12 @@ var init_history_dropdown = __esm({
     };
     HistoryDropdown = (props) => {
       let containerRef;
+      const {
+        containerRef: highlightContainerRef,
+        highlightRef,
+        updateHighlight,
+        clearHighlight
+      } = createMenuHighlight();
       const safePolygonTracker = createSafePolygonTracker();
       const getToolbarTargetRects = () => {
         if (!containerRef) return null;
@@ -12107,32 +12532,17 @@ var init_history_dropdown = __esm({
       }, {
         defer: true
       }));
-      const computedPosition = () => {
-        const anchor = props.position;
-        const width = measuredWidth();
-        const height = measuredHeight();
-        if (!anchor || width === 0 || height === 0) {
-          return DROPDOWN_OFFSCREEN_POSITION;
-        }
-        const {
-          edge
-        } = anchor;
-        let rawLeft;
-        let rawTop;
-        if (edge === "left" || edge === "right") {
-          rawLeft = edge === "left" ? anchor.x + DROPDOWN_ANCHOR_GAP_PX : anchor.x - width - DROPDOWN_ANCHOR_GAP_PX;
-          rawTop = anchor.y - height / 2;
-        } else {
-          rawLeft = anchor.x - width / 2;
-          rawTop = edge === "top" ? anchor.y + DROPDOWN_ANCHOR_GAP_PX : anchor.y - height - DROPDOWN_ANCHOR_GAP_PX;
-        }
-        return {
-          left: clampToViewport(rawLeft, width, window.innerWidth, DROPDOWN_VIEWPORT_PADDING_PX),
-          top: clampToViewport(rawTop, height, window.innerHeight, DROPDOWN_VIEWPORT_PADDING_PX)
-        };
-      };
       const displayPosition = createMemo((previousPosition) => {
-        const position = computedPosition();
+        const position = getAnchoredDropdownPosition({
+          anchor: props.position,
+          measuredWidth: measuredWidth(),
+          measuredHeight: measuredHeight(),
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          anchorGapPx: DROPDOWN_ANCHOR_GAP_PX,
+          viewportPaddingPx: DROPDOWN_VIEWPORT_PADDING_PX,
+          offscreenPosition: DROPDOWN_OFFSCREEN_POSITION
+        });
         if (position.left !== DROPDOWN_OFFSCREEN_POSITION.left) {
           return position;
         }
@@ -12176,7 +12586,7 @@ var init_history_dropdown = __esm({
           return shouldMount();
         },
         get children() {
-          var _el$ = _tmpl$212(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$0 = _el$3.nextSibling, _el$1 = _el$0.firstChild;
+          var _el$ = _tmpl$213(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$0 = _el$3.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild;
           _el$.addEventListener("mouseleave", (event) => {
             const targetRects = getToolbarTargetRects();
             if (targetRects) {
@@ -12203,7 +12613,7 @@ var init_history_dropdown = __esm({
               return props.items.length > 0;
             },
             get children() {
-              var _el$5 = _tmpl$38(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild;
+              var _el$5 = _tmpl$40(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild;
               _el$7.addEventListener("mouseleave", () => setActiveHeaderTooltip(null));
               _el$7.addEventListener("mouseenter", () => setActiveHeaderTooltip("clear"));
               _el$7.$$click = (event) => {
@@ -12267,26 +12677,34 @@ var init_history_dropdown = __esm({
               return _el$5;
             }
           }), null);
+          use(highlightContainerRef, _el$1);
+          use(highlightRef, _el$10);
           insert(_el$1, createComponent(For, {
             get each() {
               return props.items;
             },
             children: (item) => (() => {
-              var _el$10 = _tmpl$46(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$14 = _el$11.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling;
-              _el$10.addEventListener("mouseleave", () => props.onItemHover?.(null));
-              _el$10.addEventListener("mouseenter", () => {
+              var _el$11 = _tmpl$46(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$15 = _el$12.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling;
+              addEventListener(_el$11, "blur", clearHighlight);
+              _el$11.addEventListener("focus", (event) => updateHighlight(event.currentTarget));
+              _el$11.addEventListener("mouseleave", () => {
+                props.onItemHover?.(null);
+                clearHighlight();
+              });
+              _el$11.addEventListener("mouseenter", (event) => {
                 if (!props.disconnectedItemIds?.has(item.id)) {
                   props.onItemHover?.(item.id);
                 }
+                updateHighlight(event.currentTarget);
               });
-              _el$10.$$keydown = (event) => {
+              _el$11.$$keydown = (event) => {
                 if (event.code === "Space" && event.currentTarget === event.target) {
                   event.preventDefault();
                   event.stopPropagation();
                   props.onSelectItem?.(item);
                 }
               };
-              _el$10.$$click = (event) => {
+              _el$11.$$click = (event) => {
                 event.stopPropagation();
                 props.onSelectItem?.(item);
                 setConfirmedCopyItemId(item.id);
@@ -12295,27 +12713,27 @@ var init_history_dropdown = __esm({
                   setConfirmedCopyItemId(null);
                 }, FEEDBACK_DURATION_MS);
               };
-              _el$10.$$pointerdown = (event) => event.stopPropagation();
-              insert(_el$12, () => getHistoryItemDisplayName(item));
-              insert(_el$11, createComponent(Show, {
+              _el$11.$$pointerdown = (event) => event.stopPropagation();
+              insert(_el$13, () => getHistoryItemDisplayName(item));
+              insert(_el$12, createComponent(Show, {
                 get when() {
                   return item.commentText;
                 },
                 get children() {
-                  var _el$13 = _tmpl$39();
-                  insert(_el$13, () => item.commentText);
-                  return _el$13;
+                  var _el$14 = _tmpl$310();
+                  insert(_el$14, () => item.commentText);
+                  return _el$14;
                 }
               }), null);
-              insert(_el$15, () => formatRelativeTime(item.timestamp));
-              _el$17.$$click = (event) => {
+              insert(_el$16, () => formatRelativeTime(item.timestamp));
+              _el$18.$$click = (event) => {
                 event.stopPropagation();
                 props.onRemoveItem?.(item);
               };
-              insert(_el$17, createComponent(IconTrash, {
+              insert(_el$18, createComponent(IconTrash, {
                 size: DROPDOWN_ICON_SIZE_PX
               }));
-              _el$18.$$click = (event) => {
+              _el$19.$$click = (event) => {
                 event.stopPropagation();
                 props.onCopyItem?.(item);
                 setConfirmedCopyItemId(item.id);
@@ -12324,7 +12742,7 @@ var init_history_dropdown = __esm({
                   setConfirmedCopyItemId(null);
                 }, FEEDBACK_DURATION_MS);
               };
-              insert(_el$18, createComponent(Show, {
+              insert(_el$19, createComponent(Show, {
                 get when() {
                   return confirmedCopyItemId() === item.id;
                 },
@@ -12344,18 +12762,18 @@ var init_history_dropdown = __esm({
                 var _v$1 = {
                   "opacity-40 hover:opacity-100": Boolean(props.disconnectedItemIds?.has(item.id))
                 }, _v$10 = cn(ITEM_ACTION_CLASS, "hover:text-[#B91C1C]"), _v$11 = cn(ITEM_ACTION_CLASS, "hover:text-black/60");
-                _p$.e = classList(_el$10, _v$1, _p$.e);
-                _v$10 !== _p$.t && className(_el$17, _p$.t = _v$10);
-                _v$11 !== _p$.a && className(_el$18, _p$.a = _v$11);
+                _p$.e = classList(_el$11, _v$1, _p$.e);
+                _v$10 !== _p$.t && className(_el$18, _p$.t = _v$10);
+                _v$11 !== _p$.a && className(_el$19, _p$.a = _v$11);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0
               });
-              return _el$10;
+              return _el$11;
             })()
-          }));
+          }), null);
           createRenderEffect((_p$) => {
             var _v$ = `${displayPosition().top}px`, _v$2 = `${displayPosition().left}px`, _v$3 = isAnimatedIn() ? "auto" : "none", _v$4 = DROPDOWN_EDGE_TRANSFORM_ORIGIN[lastAnchorEdge()], _v$5 = isAnimatedIn() ? "1" : "0", _v$6 = isAnimatedIn() ? "scale(1)" : "scale(0.95)", _v$7 = cn("contain-layout flex flex-col rounded-[10px] antialiased w-fit h-fit overflow-hidden [font-synthesis:none] [corner-shape:superellipse(1.25)]", PANEL_STYLES), _v$8 = `${panelMinWidth()}px`, _v$9 = `${clampedMaxWidth()}px`, _v$0 = `${clampedMaxHeight()}px`;
             _v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
@@ -12390,7 +12808,7 @@ var init_history_dropdown = __esm({
 });
 
 // src/components/clear-history-prompt.tsx
-var _tmpl$40, ClearHistoryPrompt;
+var _tmpl$41, ClearHistoryPrompt;
 var init_clear_history_prompt = __esm({
   "src/components/clear-history-prompt.tsx"() {
     "use strict";
@@ -12404,13 +12822,13 @@ var init_clear_history_prompt = __esm({
     init_web();
     init_solid();
     init_constants();
-    init_clamp_to_viewport();
+    init_get_anchored_dropdown_position();
     init_cn();
     init_is_event_from_overlay();
     init_is_keyboard_event_triggered_by_input();
     init_discard_prompt();
     init_native_raf();
-    _tmpl$40 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-clear-history-prompt class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div>`);
+    _tmpl$41 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-clear-history-prompt class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div>`);
     ClearHistoryPrompt = (props) => {
       let containerRef;
       const [measuredWidth, setMeasuredWidth] = createSignal(0);
@@ -12446,32 +12864,17 @@ var init_clear_history_prompt = __esm({
           }, DROPDOWN_ANIMATION_DURATION_MS);
         }
       });
-      const computedPosition = () => {
-        const anchor = props.position;
-        const width = measuredWidth();
-        const height = measuredHeight();
-        if (!anchor || width === 0 || height === 0) {
-          return DROPDOWN_OFFSCREEN_POSITION;
-        }
-        const {
-          edge
-        } = anchor;
-        let rawLeft;
-        let rawTop;
-        if (edge === "left" || edge === "right") {
-          rawLeft = edge === "left" ? anchor.x + DROPDOWN_ANCHOR_GAP_PX : anchor.x - width - DROPDOWN_ANCHOR_GAP_PX;
-          rawTop = anchor.y - height / 2;
-        } else {
-          rawLeft = anchor.x - width / 2;
-          rawTop = edge === "top" ? anchor.y + DROPDOWN_ANCHOR_GAP_PX : anchor.y - height - DROPDOWN_ANCHOR_GAP_PX;
-        }
-        return {
-          left: clampToViewport(rawLeft, width, window.innerWidth, DROPDOWN_VIEWPORT_PADDING_PX),
-          top: clampToViewport(rawTop, height, window.innerHeight, DROPDOWN_VIEWPORT_PADDING_PX)
-        };
-      };
       const displayPosition = createMemo((previousPosition) => {
-        const position = computedPosition();
+        const position = getAnchoredDropdownPosition({
+          anchor: props.position,
+          measuredWidth: measuredWidth(),
+          measuredHeight: measuredHeight(),
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          anchorGapPx: DROPDOWN_ANCHOR_GAP_PX,
+          viewportPaddingPx: DROPDOWN_VIEWPORT_PADDING_PX,
+          offscreenPosition: DROPDOWN_OFFSCREEN_POSITION
+        });
         if (position.left !== DROPDOWN_OFFSCREEN_POSITION.left) {
           return position;
         }
@@ -12492,7 +12895,6 @@ var init_clear_history_prompt = __esm({
           const isEscape = event.code === "Escape";
           if (isEnter || isEscape) {
             event.preventDefault();
-            event.stopPropagation();
             event.stopImmediatePropagation();
             if (isEscape) {
               props.onCancel();
@@ -12536,7 +12938,7 @@ var init_clear_history_prompt = __esm({
           return shouldMount();
         },
         get children() {
-          var _el$ = _tmpl$40(), _el$2 = _el$.firstChild;
+          var _el$ = _tmpl$41(), _el$2 = _el$.firstChild;
           _el$.$$contextmenu = handlePromptEvent;
           _el$.$$click = handlePromptEvent;
           _el$.$$mousedown = handlePromptEvent;
@@ -12581,7 +12983,7 @@ var init_clear_history_prompt = __esm({
 });
 
 // src/components/renderer.tsx
-var _tmpl$41, ReactGrabRenderer;
+var _tmpl$47, ReactGrabRenderer;
 var init_renderer = __esm({
   "src/components/renderer.tsx"() {
     "use strict";
@@ -12601,7 +13003,7 @@ var init_renderer = __esm({
     init_context_menu();
     init_history_dropdown();
     init_clear_history_prompt();
-    _tmpl$41 = /* @__PURE__ */ template(`<div style="position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;transition:opacity 100ms ease-out;will-change:opacity;contain:strict;transform:translateZ(0)">`);
+    _tmpl$47 = /* @__PURE__ */ template(`<div style="position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;transition:opacity 100ms ease-out;will-change:opacity;contain:strict;transform:translateZ(0)">`);
     ReactGrabRenderer = (props) => {
       return [createComponent(OverlayCanvas, {
         get crosshairVisible() {
@@ -12644,7 +13046,7 @@ var init_renderer = __esm({
           return props.labelInstances;
         }
       }), (() => {
-        var _el$ = _tmpl$41();
+        var _el$ = _tmpl$47();
         setStyleProperty(_el$, "z-index", Z_INDEX_OVERLAY_CANVAS);
         setStyleProperty(_el$, "box-shadow", `inset 0 0 ${FROZEN_GLOW_EDGE_PX}px ${FROZEN_GLOW_COLOR}`);
         createRenderEffect((_$p) => setStyleProperty(_el$, "opacity", props.isFrozen ? 1 : 0));
@@ -12766,6 +13168,12 @@ var init_renderer = __esm({
             get actionCycleState() {
               return props.selectionActionCycleState;
             },
+            get arrowNavigationState() {
+              return props.selectionArrowNavigationState;
+            },
+            get onArrowNavigationSelect() {
+              return props.onArrowNavigationSelect;
+            },
             get filePath() {
               return props.selectionFilePath;
             },
@@ -13661,18 +14069,6 @@ var init_create_bounds_from_drag_rect = __esm({
   }
 });
 
-// src/utils/get-bounds-center.ts
-var getBoundsCenter;
-var init_get_bounds_center = __esm({
-  "src/utils/get-bounds-center.ts"() {
-    "use strict";
-    getBoundsCenter = (bounds) => ({
-      x: bounds.x + bounds.width / 2,
-      y: bounds.y + bounds.height / 2
-    });
-  }
-});
-
 // src/utils/is-c-like-key.ts
 var C_LIKE_CHARACTERS, isCLikeKey;
 var init_is_c_like_key = __esm({
@@ -14260,6 +14656,7 @@ var init_manager = __esm({
     init_create_element_bounds();
     init_is_element_connected();
     init_generate_snippet();
+    init_recalculate_session_position();
     init_context();
     init_constants();
     init_get_tag_name();
@@ -14749,19 +15146,11 @@ var init_manager = __esm({
             if (newBounds.length > 0) {
               const oldFirstBounds = session.selectionBounds[0];
               const newFirstBounds = newBounds[0];
-              let updatedPosition = session.position;
-              if (oldFirstBounds && newFirstBounds) {
-                const oldCenterX = oldFirstBounds.x + oldFirstBounds.width / 2;
-                const oldHalfWidth = oldFirstBounds.width / 2;
-                const offsetX = session.position.x - oldCenterX;
-                const offsetRatio = oldHalfWidth > 0 ? offsetX / oldHalfWidth : 0;
-                const newCenterX = newFirstBounds.x + newFirstBounds.width / 2;
-                const newHalfWidth = newFirstBounds.width / 2;
-                updatedPosition = {
-                  ...session.position,
-                  x: newCenterX + offsetRatio * newHalfWidth
-                };
-              }
+              const updatedPosition = recalculateSessionPosition({
+                currentPosition: session.position,
+                previousBounds: oldFirstBounds,
+                nextBounds: newFirstBounds
+              });
               updatedSessions.set(sessionId, {
                 ...session,
                 selectionBounds: newBounds,
@@ -15057,7 +15446,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.20";
+        const version = "0.1.22";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c
@@ -15863,6 +16252,8 @@ var init_core = __esm({
         const [resolvedComponentName, setResolvedComponentName] = createSignal(void 0);
         const [actionCycleItems, setActionCycleItems] = createSignal([]);
         const [actionCycleActiveIndex, setActionCycleActiveIndex] = createSignal(null);
+        const [arrowNavigationElements, setArrowNavigationElements] = createSignal([]);
+        const [arrowNavigationActiveIndex, setArrowNavigationActiveIndex] = createSignal(0);
         const arrowNavigator = createArrowNavigator(isValidGrabbableElement, createElementBounds);
         const autoScroller = createAutoScroller(() => store.pointer, () => isDragging());
         const isRendererActive = createMemo(() => isActivated() && !isCopying());
@@ -16182,6 +16573,7 @@ var init_core = __esm({
           });
         };
         const targetElement = createMemo(() => {
+          void store.viewportVersion;
           if (!isRendererActive() || isDragging()) return null;
           const element = store.detectedElement;
           if (!isElementConnected(element)) return null;
@@ -16516,7 +16908,7 @@ var init_core = __esm({
           const wasDragging = isDragging();
           const previousFocused = store.previouslyFocusedElement;
           actions.deactivate();
-          arrowNavigator.clearHistory();
+          clearArrowNavigation();
           keyboardSelectedElement = null;
           isPendingContextMenuSelect = false;
           if (wasDragging) {
@@ -16710,6 +17102,7 @@ var init_core = __esm({
         };
         const openContextMenu = (element, position) => {
           actions.showContextMenu(position, element);
+          clearArrowNavigation();
           dismissAllPopups();
           pluginRegistry.hooks.onContextMenu(element, position);
         };
@@ -16915,7 +17308,6 @@ var init_core = __esm({
           if (shouldBlockEnter) {
             keyboardClaimer.claimedEvents.add(event);
             event.preventDefault();
-            event.stopPropagation();
             event.stopImmediatePropagation();
             return true;
           }
@@ -16949,30 +17341,67 @@ var init_core = __esm({
           }
           return false;
         };
+        const clearArrowNavigation = () => {
+          setArrowNavigationElements([]);
+          setArrowNavigationActiveIndex(0);
+          arrowNavigator.clearHistory();
+        };
+        const selectAndFocusElement = (element) => {
+          actions.setFrozenElement(element);
+          actions.freeze();
+          keyboardSelectedElement = element;
+          const bounds = createElementBounds(element);
+          const center = getBoundsCenter(bounds);
+          actions.setPointer(center);
+          if (store.contextMenuPosition !== null) {
+            actions.showContextMenu(center, element);
+          }
+        };
+        const openArrowNavigationMenu = (anchorElement) => {
+          const bounds = createElementBounds(anchorElement);
+          const elementsAtPoint = getElementsAtPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2).filter(isValidGrabbableElement).reverse();
+          setArrowNavigationElements(elementsAtPoint);
+          setArrowNavigationActiveIndex(Math.max(0, elementsAtPoint.indexOf(anchorElement)));
+        };
+        const handleArrowNavigationSelect = (index) => {
+          const targetElement2 = arrowNavigationElements()[index];
+          if (!targetElement2) return;
+          setArrowNavigationActiveIndex(index);
+          arrowNavigator.clearHistory();
+          selectAndFocusElement(targetElement2);
+        };
         const handleArrowNavigation = (event) => {
           if (!isActivated() || isPromptMode()) return false;
           if (!ARROW_KEYS.has(event.key)) return false;
           let currentElement = effectiveElement();
           const isInitialSelection = !currentElement;
           if (!currentElement) {
-            const viewportCenterX = window.innerWidth / 2;
-            const viewportCenterY = window.innerHeight / 2;
-            currentElement = getElementAtPosition(viewportCenterX, viewportCenterY);
+            currentElement = getElementAtPosition(window.innerWidth / 2, window.innerHeight / 2);
           }
           if (!currentElement) return false;
+          const isVertical = event.key === "ArrowUp" || event.key === "ArrowDown";
+          if (!isVertical) {
+            clearArrowNavigation();
+            const nextElement2 = arrowNavigator.findNext(event.key, currentElement);
+            if (!nextElement2 && !isInitialSelection) return false;
+            event.preventDefault();
+            event.stopPropagation();
+            selectAndFocusElement(nextElement2 ?? currentElement);
+            return true;
+          }
+          if (arrowNavigationElements().length === 0) {
+            openArrowNavigationMenu(currentElement);
+          }
           const nextElement = arrowNavigator.findNext(event.key, currentElement);
-          if (!nextElement && !isInitialSelection) return false;
           const elementToSelect = nextElement ?? currentElement;
           event.preventDefault();
           event.stopPropagation();
-          actions.setFrozenElement(elementToSelect);
-          actions.freeze();
-          keyboardSelectedElement = elementToSelect;
-          const selectionBounds2 = createElementBounds(elementToSelect);
-          const selectionCenter = getBoundsCenter(selectionBounds2);
-          actions.setPointer(selectionCenter);
-          if (store.contextMenuPosition !== null) {
-            actions.showContextMenu(selectionCenter, elementToSelect);
+          selectAndFocusElement(elementToSelect);
+          const newIndex = arrowNavigationElements().indexOf(elementToSelect);
+          if (newIndex !== -1) {
+            setArrowNavigationActiveIndex(newIndex);
+          } else {
+            openArrowNavigationMenu(elementToSelect);
           }
           return true;
         };
@@ -16983,7 +17412,6 @@ var init_core = __esm({
           const canActivateFromCopied = !isHoldingKeys() && !isPromptMode() && !isActivated() && copiedElement && isElementConnected(copiedElement) && !store.labelInstances.some((instance) => instance.status === "copied" || instance.status === "fading");
           if (canActivateFromCopied) {
             event.preventDefault();
-            event.stopPropagation();
             event.stopImmediatePropagation();
             const center = getBoundsCenter(createElementBounds(copiedElement));
             actions.setPointer(center);
@@ -16999,7 +17427,6 @@ var init_core = __esm({
           const canActivateFromHolding = isHoldingKeys() && !isPromptMode();
           if (canActivateFromHolding) {
             event.preventDefault();
-            event.stopPropagation();
             event.stopImmediatePropagation();
             const element = store.frozenElement || targetElement();
             if (element) {
@@ -17058,6 +17485,15 @@ var init_core = __esm({
           activeIndex: actionCycleActiveIndex(),
           isVisible: actionCycleActiveIndex() !== null && actionCycleItems().length > 0
         }));
+        const arrowNavigationItems = createMemo(() => arrowNavigationElements().map((element) => ({
+          tagName: getTagName(element) || "element",
+          componentName: getComponentDisplayName(element) ?? void 0
+        })));
+        const arrowNavigationState = createMemo(() => ({
+          items: arrowNavigationItems(),
+          activeIndex: arrowNavigationActiveIndex(),
+          isVisible: arrowNavigationElements().length > 0
+        }));
         createEffect(on(selectionElement, () => {
           resetActionCycle();
         }));
@@ -17170,7 +17606,6 @@ var init_core = __esm({
           if ((isActivated() || isHoldingKeys()) && !isPromptMode()) {
             event.preventDefault();
             if (isEnterCode(event.code)) {
-              event.stopPropagation();
               event.stopImmediatePropagation();
             }
           }
@@ -17374,7 +17809,7 @@ var init_core = __esm({
           const isActiveState = isTouchPointer ? isHoldingKeys() : isActivated();
           if (isActiveState && !isPromptMode() && isToggleFrozen()) {
             actions.unfreeze();
-            arrowNavigator.clearHistory();
+            clearArrowNavigation();
           }
           handlePointerMove(event.clientX, event.clientY);
         }, {
@@ -17401,7 +17836,6 @@ var init_core = __esm({
           if (didHandle) {
             document.documentElement.setPointerCapture(event.pointerId);
             event.preventDefault();
-            event.stopPropagation();
             event.stopImmediatePropagation();
           }
         }, {
@@ -17412,14 +17846,24 @@ var init_core = __esm({
           if (!event.isPrimary) return;
           if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
           if (store.contextMenuPosition !== null) return;
+          const isActive = isRendererActive() || isCopying() || isDragging();
           const hasModifierKeyHeld = event.metaKey || event.ctrlKey;
           handlePointerUp(event.clientX, event.clientY, hasModifierKeyHeld);
+          if (isActive) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+          }
         }, {
           capture: true
         });
         eventListenerManager.addWindowListener("contextmenu", (event) => {
           if (!isRendererActive() || isCopying() || isPromptMode()) return;
-          if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
+          const isFromOverlay = isEventFromOverlay(event, "data-react-grab-ignore-events");
+          if (isFromOverlay && arrowNavigationElements().length > 0) {
+            clearArrowNavigation();
+          } else if (isFromOverlay) {
+            return;
+          }
           if (store.contextMenuPosition !== null) {
             event.preventDefault();
             return;
@@ -17455,7 +17899,6 @@ var init_core = __esm({
           if (store.contextMenuPosition !== null) return;
           if (isRendererActive() || isCopying() || didJustDrag()) {
             event.preventDefault();
-            event.stopPropagation();
             event.stopImmediatePropagation();
             if (store.wasActivatedByToggle && !isCopying() && !isPromptMode()) {
               if (!isHoldingKeys()) {
@@ -17526,6 +17969,18 @@ var init_core = __esm({
           previousViewportHeight = currentViewportHeight;
           handleViewportChange();
         });
+        const visualViewport = window.visualViewport;
+        if (visualViewport) {
+          const {
+            signal
+          } = eventListenerManager;
+          visualViewport.addEventListener("resize", handleViewportChange, {
+            signal
+          });
+          visualViewport.addEventListener("scroll", handleViewportChange, {
+            signal
+          });
+        }
         let boundsRecalcIntervalId = null;
         let viewportChangeFrameId = null;
         const startBoundsRecalcIntervalIfNeeded = () => {
@@ -18307,6 +18762,10 @@ var init_core = __esm({
               get selectionActionCycleState() {
                 return actionCycleState();
               },
+              get selectionArrowNavigationState() {
+                return arrowNavigationState();
+              },
+              onArrowNavigationSelect: handleArrowNavigationSelect,
               get labelInstances() {
                 return computedLabelInstances();
               },