@nuxt/devtools 3.1.0 → 3.2.0

package/dist/webcomponents/index.mjs

@@ -1,6 +1,6 @@
-import { isRef, toRefs as toRefs$1, customRef, toValue, onMounted, nextTick, watch, getCurrentScope, onScopeDispose, getCurrentInstance, shallowRef, computed, unref, ref, defineComponent, mergeModels, useModel, watchEffect, withDirectives, createElementBlock, openBlock, createCommentVNode, createElementVNode, withModifiers, vShow, reactive, useTemplateRef, normalizeClass, normalizeStyle, toDisplayString, Fragment, createVNode, defineCustomElement } from 'vue';
+import { isRef, toRefs as toRefs$1, customRef, toValue, onMounted, nextTick, watch, getCurrentInstance, getCurrentScope, onScopeDispose, shallowRef, computed, ref, unref, defineComponent, useModel, watchEffect, mergeModels, withDirectives, openBlock, createElementBlock, createCommentVNode, createElementVNode, withModifiers, vShow, reactive, useTemplateRef, normalizeClass, normalizeStyle, toDisplayString, Fragment, createVNode, defineCustomElement, createTextVNode } from 'vue';
 
-const css = `*{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before{--un-content:""}:after{--un-content:""}html{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;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}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button{-webkit-appearance:button;background-color:transparent;background-image:none}[type=button]{-webkit-appearance:button;background-color:transparent;background-image:none}[type=reset]{-webkit-appearance:button;background-color:transparent;background-image:none}[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder{opacity:1;color:#9ca3af}textarea::placeholder{opacity:1;color:#9ca3af}button{cursor:pointer}[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--un-text-opacity:100%}@property --nuxt-devtools-inspect-border-angle{syntax:"<angle>";inherits:false;initial-value:90deg}.nuxt-devtools-inspect-running-border{filter:blur(10px);--nuxt-devtools-inspect-border-angle:0deg;background:conic-gradient(from var(--nuxt-devtools-inspect-border-angle),#00dc82,#00e6e8,#42e200,#0086e2,#00dc82)border-box;-webkit-mask:linear-gradient(#fff 0,#fff 0) padding-box,linear-gradient(#fff 0,#fff 0);-webkit-mask-composite:destination-out;transition:all .5s;animation:1s linear infinite color-rotate-background;mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);mask-position:0 0,0 0;mask-size:auto,auto;mask-repeat:repeat,repeat;mask-clip:padding-box,border-box;mask-origin:padding-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.nuxt-devtools-inspect-neon{background-image:linear-gradient(90deg,#00dc82,#00e6e8,#42e200,#00dc82,#00e6e8,#42e200,#00dc82,#00e6e8,#42e200);background-position:0;background-size:400% 400%}.nuxt-devtools-inspect-neon.running{animation:3s linear infinite neon-background}@keyframes neon-background{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.nuxt-devtools-frame{z-index:2147483645;-webkit-font-smoothing:antialiased;width:100%;height:100%;position:fixed}.nuxt-devtools-frame iframe{background:var(--nuxt-devtools-widget-bg);border:1px solid rgba(125,125,125,.2);-webkit-border-radius:10px;border-radius:10px;outline:none;width:100%;height:100%}.nuxt-devtools-resize-handle-horizontal{cursor:ns-resize;-webkit-border-radius:5px;border-radius:5px;height:10px;margin:-5px 0;position:absolute;left:6px;right:6px}.nuxt-devtools-resize-handle-vertical{cursor:ew-resize;-webkit-border-radius:5px;border-radius:5px;width:10px;margin:0 -5px;position:absolute;top:6px;bottom:0}.nuxt-devtools-resize-handle-corner{-webkit-border-radius:6px;border-radius:6px;width:14px;height:14px;margin:-6px;position:absolute}.nuxt-devtools-resize-handle:hover{background:rgba(125,125,125,.1)}#nuxt-devtools-anchor{z-index:2147483645;transform-origin:50%;box-sizing:border-box;width:0;font-family:Arial,Helvetica,sans-serif;position:fixed;transform:translate(-50%,-50%)rotate(0);font-size:15px!important}#nuxt-devtools-anchor *{box-sizing:border-box}#nuxt-devtools-anchor button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}#nuxt-devtools-anchor .nuxt-devtools-label{align-items:center;justify-items:center;gap:3px;padding:0 7px 0 8px;font-size:.8em;line-height:1em;display:flex}#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-main{opacity:.8;white-space:nowrap}#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-secondary{opacity:.5;white-space:nowrap;font-size:.8em;line-height:.6em}#nuxt-devtools-anchor .nuxt-devtools-nuxt-button{flex:none}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-nuxt-button{transform:rotate(-90deg)}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-label{flex-direction:column;gap:2px;padding:0 10px;transform:rotate(-90deg)}#nuxt-devtools-anchor .nuxt-devtools-panel{border:1px solid var(--nuxt-devtools-widget-border);background-color:var(--nuxt-devtools-widget-bg);backdrop-filter:blur(10px);height:30px;color:var(--nuxt-devtools-widget-fg);box-shadow:2px 2px 8px var(--nuxt-devtools-widget-shadow);user-select:none;touch-action:none;-webkit-border-radius:100px;border-radius:100px;justify-content:flex-start;align-items:center;gap:2px;max-width:150px;padding:2px 2px 2px 2.5px;transition:all .6s,max-width .6s,padding .5s,transform .4s,opacity .2s;display:flex;position:absolute;top:0;left:0;overflow:hidden;transform:translate(-50%,-50%)}#nuxt-devtools-anchor.nuxt-devtools-hide .nuxt-devtools-panel{max-width:32px;padding:2px 0}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-panel{box-shadow:2px -2px 8px var(--nuxt-devtools-widget-shadow);transform:translate(-50%,-50%)rotate(90deg)}#nuxt-devtools-anchor .nuxt-devtools-panel-content{transition:opacity .4s}#nuxt-devtools-anchor.nuxt-devtools-hide .nuxt-devtools-panel-content{opacity:0}#nuxt-devtools-anchor .nuxt-devtools-icon-button{opacity:.8;border-width:0;-webkit-border-radius:100%;border-radius:100%;justify-content:center;align-items:center;width:30px;height:30px;transition:opacity .2s ease-in-out;display:flex}#nuxt-devtools-anchor .nuxt-devtools-icon-button:hover{opacity:1}#nuxt-devtools-anchor:hover .nuxt-devtools-glowing{opacity:.6}#nuxt-devtools-anchor .nuxt-devtools-glowing{opacity:0;pointer-events:none;z-index:-1;filter:blur(60px);background-image:linear-gradient(45deg,#00dc82,#00dc82,#00dc82);-webkit-border-radius:9999px;border-radius:9999px;width:160px;height:160px;transition:all 1s;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}@media print{#nuxt-devtools-anchor{display:none}}*{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:before{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-ph-arrow-bend-left-up-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M152 80H56l48-48Z' opacity='.2'/%3E%3Cpath d='M200 216a88.1 88.1 0 0 1-88-88V88h40a8 8 0 0 0 5.66-13.66l-48-48a8 8 0 0 0-11.32 0l-48 48A8 8 0 0 0 56 88h40v40a104.11 104.11 0 0 0 104 104a8 8 0 0 0 0-16M104 43.31L132.69 72H75.31Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon)no-repeat;mask:var(--un-icon)no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-arrow-up-right-light{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M198 64v104a6 6 0 0 1-12 0V78.48L68.24 196.24a6 6 0 0 1-8.48-8.48L177.52 70H88a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon)no-repeat;mask:var(--un-icon)no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-x{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon)no-repeat;mask:var(--un-icon)no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.container{width:100%}.bg-glass{--un-backdrop-blur:blur(5px);backdrop-filter:var(--un-backdrop-blur)var(--un-backdrop-brightness)var(--un-backdrop-contrast)var(--un-backdrop-grayscale)var(--un-backdrop-hue-rotate)var(--un-backdrop-invert)var(--un-backdrop-opacity)var(--un-backdrop-saturate)var(--un-backdrop-sepia);background-color:rgba(255,255,255,.75)}.color-base{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity))}.ring-base{--un-ring-opacity:.13;--un-ring-color:rgba(136,136,136,var(--un-ring-opacity))}@media (prefers-color-scheme:dark){.bg-glass{background-color:rgba(17,17,17,.75)}.color-base{--un-text-opacity:1;color:rgba(229,229,229,var(--un-text-opacity))}}@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}}.pointer-events-none{pointer-events:none}.disabled\\:pointer-events-none:disabled{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{top:0;bottom:0;left:0;right:0}.z-10{z-index:10}.z-9999999{z-index:9999999}.ms:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:1rem}.ms:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:1rem}.mt--2{margin-top:-.5rem}.w-400px{width:400px}.flex{display:flex}.flex-auto{flex:auto}.flex-none{flex:none}.flex-col{flex-direction:column}.transform{transform:translateX(var(--un-translate-x))translateY(var(--un-translate-y))translateZ(var(--un-translate-z))rotate(var(--un-rotate))rotateX(var(--un-rotate-x))rotateY(var(--un-rotate-y))rotateZ(var(--un-rotate-z))skewX(var(--un-skew-x))skewY(var(--un-skew-y))scaleX(var(--un-scale-x))scaleY(var(--un-scale-y))scaleZ(var(--un-scale-z))}.resize{resize:both}.items-center{align-items:center}.gap-2{gap:.5rem}.of-hidden{overflow:hidden}.border-1\\.5{border-width:1.5px}.border-transparent{border-color:transparent}.rounded-lg{-webkit-border-radius:.5rem;border-radius:.5rem}.p2{padding:.5rem}.px{padding-left:1rem;padding-right:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.hover\\:text-green6:hover{--un-text-opacity:1;color:rgba(22,163,74,var(--un-text-opacity))}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.op0{opacity:0}.op100{opacity:1}.op50{opacity:.5}.hover\\:op100:hover{opacity:1}.disabled\\:op10\\!:disabled{opacity:.1!important}.shadow-lg{--un-shadow:var(--un-shadow-inset)0 10px 15px -3px var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset)0 4px 6px -4px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.ring-1{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset)0 0 0 var(--un-ring-offset-width)var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset)0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width))var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.backdrop-blur{--un-backdrop-blur:blur(8px);backdrop-filter:var(--un-backdrop-blur)var(--un-backdrop-brightness)var(--un-backdrop-contrast)var(--un-backdrop-grayscale)var(--un-backdrop-hue-rotate)var(--un-backdrop-invert)var(--un-backdrop-opacity)var(--un-backdrop-saturate)var(--un-backdrop-sepia)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.transition-none{transition:none}`;
+const css = `*{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before{--un-content:""}:after{--un-content:""}html{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;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}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button{-webkit-appearance:button;background-color:transparent;background-image:none}[type=button]{-webkit-appearance:button;background-color:transparent;background-image:none}[type=reset]{-webkit-appearance:button;background-color:transparent;background-image:none}[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder{opacity:1;color:#9ca3af}textarea::placeholder{opacity:1;color:#9ca3af}button{cursor:pointer}[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--un-text-opacity:100%}@property --nuxt-devtools-inspect-border-angle{syntax:"<angle>";inherits:false;initial-value:90deg}.nuxt-devtools-inspect-running-border{filter:blur(10px);--nuxt-devtools-inspect-border-angle:0deg;background:conic-gradient(from var(--nuxt-devtools-inspect-border-angle), #00dc82, #00e6e8, #42e200, #0086e2, #00dc82) border-box;-webkit-mask:linear-gradient(#fff 0,#fff 0) padding-box,linear-gradient(#fff 0,#fff 0);-webkit-mask-composite:destination-out;transition:all .5s;animation:1s linear infinite color-rotate-background;mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);mask-position:0 0,0 0;mask-size:auto,auto;mask-repeat:repeat,repeat;mask-clip:padding-box,border-box;mask-origin:padding-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.nuxt-devtools-inspect-neon{background-image:linear-gradient(90deg,#00dc82,#00e6e8,#42e200,#00dc82,#00e6e8,#42e200,#00dc82,#00e6e8,#42e200);background-position:0;background-size:400% 400%}.nuxt-devtools-inspect-neon.running{animation:3s linear infinite neon-background}@keyframes neon-background{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.nuxt-devtools-frame{z-index:2147483645;-webkit-font-smoothing:antialiased;width:100%;height:100%;position:fixed}.nuxt-devtools-frame iframe{background:var(--nuxt-devtools-widget-bg);border:1px solid rgba(125,125,125,.2);-webkit-border-radius:10px;border-radius:10px;outline:none;width:100%;height:100%}.nuxt-devtools-resize-handle-horizontal{cursor:ns-resize;-webkit-border-radius:5px;border-radius:5px;height:10px;margin:-5px 0;position:absolute;left:6px;right:6px}.nuxt-devtools-resize-handle-vertical{cursor:ew-resize;-webkit-border-radius:5px;border-radius:5px;width:10px;margin:0 -5px;position:absolute;top:6px;bottom:0}.nuxt-devtools-resize-handle-corner{-webkit-border-radius:6px;border-radius:6px;width:14px;height:14px;margin:-6px;position:absolute}.nuxt-devtools-resize-handle:hover{background:rgba(125,125,125,.1)}#nuxt-devtools-anchor{z-index:2147483645;transform-origin:50%;box-sizing:border-box;width:0;font-family:Arial,Helvetica,sans-serif;position:fixed;transform:translate(-50%,-50%)rotate(0);font-size:15px!important}#nuxt-devtools-anchor *{box-sizing:border-box}#nuxt-devtools-anchor button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}#nuxt-devtools-anchor .nuxt-devtools-label{align-items:center;justify-items:center;gap:3px;padding:0 7px 0 8px;font-size:.8em;line-height:1em;display:flex}#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-main{opacity:.8;white-space:nowrap}#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-secondary{opacity:.5;white-space:nowrap;font-size:.8em;line-height:.6em}#nuxt-devtools-anchor .nuxt-devtools-nuxt-button{flex:none}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-nuxt-button{transform:rotate(-90deg)}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-label{flex-direction:column;gap:2px;padding:0 10px;transform:rotate(-90deg)}#nuxt-devtools-anchor .nuxt-devtools-panel{border:1px solid var(--nuxt-devtools-widget-border);background-color:var(--nuxt-devtools-widget-bg);backdrop-filter:blur(10px);height:30px;color:var(--nuxt-devtools-widget-fg);box-shadow:2px 2px 8px var(--nuxt-devtools-widget-shadow);user-select:none;touch-action:none;-webkit-border-radius:100px;border-radius:100px;justify-content:flex-start;align-items:center;gap:2px;max-width:150px;padding:2px 2px 2px 2.5px;transition:all .6s,max-width .6s,padding .5s,transform .4s,opacity .2s;display:flex;position:absolute;top:0;left:0;overflow:hidden;transform:translate(-50%,-50%)}#nuxt-devtools-anchor.nuxt-devtools-hide .nuxt-devtools-panel{max-width:32px;padding:2px 0}#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-panel{box-shadow:2px -2px 8px var(--nuxt-devtools-widget-shadow);transform:translate(-50%,-50%)rotate(90deg)}#nuxt-devtools-anchor .nuxt-devtools-panel-content{transition:opacity .4s}#nuxt-devtools-anchor.nuxt-devtools-hide .nuxt-devtools-panel-content{opacity:0}#nuxt-devtools-anchor .nuxt-devtools-icon-button{opacity:.8;border-width:0;-webkit-border-radius:100%;border-radius:100%;justify-content:center;align-items:center;width:30px;height:30px;transition:opacity .2s ease-in-out;display:flex}#nuxt-devtools-anchor .nuxt-devtools-icon-button:hover{opacity:1}#nuxt-devtools-anchor:hover .nuxt-devtools-glowing{opacity:.6}#nuxt-devtools-anchor .nuxt-devtools-glowing{opacity:0;pointer-events:none;z-index:-1;filter:blur(60px);background-image:linear-gradient(45deg,#00dc82,#00dc82,#00dc82);-webkit-border-radius:9999px;border-radius:9999px;width:160px;height:160px;transition:all 1s;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}@media print{#nuxt-devtools-anchor{display:none}}*{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:before{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-ph-arrow-bend-left-up-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M152 80H56l48-48Z' opacity='.2'/%3E%3Cpath d='M200 216a88.1 88.1 0 0 1-88-88V88h40a8 8 0 0 0 5.66-13.66l-48-48a8 8 0 0 0-11.32 0l-48 48A8 8 0 0 0 56 88h40v40a104.11 104.11 0 0 0 104 104a8 8 0 0 0 0-16M104 43.31L132.69 72H75.31Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-arrow-up-right-light{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M198 64v104a6 6 0 0 1-12 0V78.48L68.24 196.24a6 6 0 0 1-8.48-8.48L177.52 70H88a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-check-circle-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96' opacity='.2'/%3E%3Cpath d='M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-copy-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M216 40v128h-48V88H88V40Z' opacity='.2'/%3E%3Cpath d='M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-file-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M208 88h-56V32Z' opacity='.2'/%3E%3Cpath d='m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-tree-view-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M104 32v32a8 8 0 0 1-8 8H64a8 8 0 0 1-8-8V32a8 8 0 0 1 8-8h32a8 8 0 0 1 8 8m104 64h-32a8 8 0 0 0-8 8v32a8 8 0 0 0 8 8h32a8 8 0 0 0 8-8v-32a8 8 0 0 0-8-8m0 88h-32a8 8 0 0 0-8 8v32a8 8 0 0 0 8 8h32a8 8 0 0 0 8-8v-32a8 8 0 0 0-8-8' opacity='.2'/%3E%3Cpath d='M176 152h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v8H88V80h8a16 16 0 0 0 16-16V32a16 16 0 0 0-16-16H64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h8v112a24 24 0 0 0 24 24h64v8a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v8H96a8 8 0 0 1-8-8v-64h72v8a16 16 0 0 0 16 16M64 32h32v32H64Zm112 160h32v32h-32Zm0-88h32v32h-32Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.i-ph-x{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;mask-size:100% 100%}.container{width:100%}.border-base{--un-border-opacity:.13;border-color:rgba(136,136,136,var(--un-border-opacity))}.bg-glass{--un-backdrop-blur:blur(5px);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);background-color:rgba(255,255,255,.75)}.color-base{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity))}.ring-base{--un-ring-opacity:.13;--un-ring-color:rgba(136,136,136,var(--un-ring-opacity))}@media (prefers-color-scheme:dark){.bg-glass{background-color:rgba(17,17,17,.75)}.color-base{--un-text-opacity:1;color:rgba(229,229,229,var(--un-text-opacity))}}@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}}.pointer-events-none{pointer-events:none}.disabled\\:pointer-events-none:disabled{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{top:0;bottom:0;left:0;right:0}.bottom-20px{bottom:20px}.right-20px{right:20px}.z-10{z-index:10}.z-9999999{z-index:9999999}.z-99999999{z-index:99999999}.grid{display:grid}.grid-cols-\\[max-content_1fr\\]{grid-template-columns:max-content 1fr}.ms:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:1rem}.ms:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:1rem}.mt-2{margin-top:.5rem}.max-h-200px{max-height:200px}.max-w-500px{max-width:500px}.w-400px{width:400px}.flex{display:flex}.flex-auto{flex:auto}.flex-none{flex:none}.flex-col{flex-direction:column}.translate-y-0{--un-translate-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.translate-y-10{--un-translate-y:2.5rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.resize{resize:both}.items-center{align-items:center}.gap-2{gap:.5rem}.of-auto{overflow:auto}.of-hidden{overflow:hidden}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.border-1{border-width:1px}.border-1\\.5{border-width:1.5px}.border-transparent{border-color:transparent}.rounded{-webkit-border-radius:.25rem;border-radius:.25rem}.rounded-lg{-webkit-border-radius:.5rem;border-radius:.5rem}.bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity))}.bg-op-20{--un-bg-opacity:.2}.p2{padding:.5rem}.p4{padding:1rem}.px{padding-left:1rem;padding-right:1rem}.px1{padding-left:.25rem;padding-right:.25rem}.py0\\.5{padding-top:.125rem;padding-bottom:.125rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.text-green6{--un-text-opacity:1;color:rgba(22,163,74,var(--un-text-opacity))}.hover\\:text-green6:hover{--un-text-opacity:1;color:rgba(22,163,74,var(--un-text-opacity))}.font-semibold{font-weight:600}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.op0{opacity:0}.op100{opacity:1}.op50{opacity:.5}.hover\\:op100:hover{opacity:1}.disabled\\:op10\\!:disabled{opacity:.1!important}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.ring-1{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.backdrop-blur{--un-backdrop-blur:blur(8px);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.transition-none{transition:none}`;
 
 //#endregion
 //#region tryOnScopeDispose/index.ts
@@ -197,11 +197,6 @@ function unrefElement(elRef) {
 //#endregion
 //#region useEventListener/index.ts
 function useEventListener(...args) {
-	const cleanups = [];
-	const cleanup = () => {
-		cleanups.forEach((fn) => fn());
-		cleanups.length = 0;
-	};
 	const register = (el, event, listener, options) => {
 		el.addEventListener(event, listener, options);
 		return () => el.removeEventListener(event, listener, options);
@@ -210,7 +205,7 @@ function useEventListener(...args) {
 		const test = toArray(toValue(args[0])).filter((e) => e != null);
 		return test.every((e) => typeof e !== "string") ? test : void 0;
 	});
-	const stopWatch = watchImmediate(() => {
+	return watchImmediate(() => {
 		var _firstParamTargets$va, _firstParamTargets$va2;
 		return [
 			(_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
@@ -218,18 +213,14 @@ function useEventListener(...args) {
 			toArray(unref(firstParamTargets.value ? args[2] : args[1])),
 			toValue(firstParamTargets.value ? args[3] : args[2])
 		];
-	}, ([raw_targets, raw_events, raw_listeners, raw_options]) => {
-		cleanup();
+	}, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
 		if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
 		const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
-		cleanups.push(...raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone)))));
+		const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
+		onCleanup(() => {
+			cleanups.forEach((fn) => fn());
+		});
 	}, { flush: "post" });
-	const stop = () => {
-		stopWatch();
-		cleanup();
-	};
-	tryOnScopeDispose(cleanup);
-	return stop;
 }
 function onClickOutside(target, handler, options = {}) {
 	const { window: window$1 = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
@@ -436,6 +427,15 @@ function useCssVar(prop, target, options = {}) {
 
 //#endregion
 //#region useDraggable/index.ts
+const defaultScrollConfig = {
+	speed: 2,
+	margin: 30,
+	direction: "both"
+};
+function clampContainerScroll(container) {
+	if (container.scrollLeft > container.scrollWidth - container.clientWidth) container.scrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+	if (container.scrollTop > container.scrollHeight - container.clientHeight) container.scrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+}
 /**
 * Make elements draggable.
 *
@@ -444,8 +444,8 @@ function useCssVar(prop, target, options = {}) {
 * @param options
 */
 function useDraggable(target, options = {}) {
-	var _toValue;
-	const { pointerTypes, preventDefault: preventDefault$1, stopPropagation, exact, onMove, onEnd, onStart, initialValue, axis = "both", draggingElement = defaultWindow, containerElement, handle: draggingHandle = target, buttons = [0] } = options;
+	var _toValue, _toValue2, _toValue3, _scrollConfig$directi;
+	const { pointerTypes, preventDefault: preventDefault$1, stopPropagation, exact, onMove, onEnd, onStart, initialValue, axis = "both", draggingElement = defaultWindow, containerElement, handle: draggingHandle = target, buttons = [0], restrictInView, autoScroll = false } = options;
 	const position = ref((_toValue = toValue(initialValue)) !== null && _toValue !== void 0 ? _toValue : {
 		x: 0,
 		y: 0
@@ -459,6 +459,75 @@ function useDraggable(target, options = {}) {
 		if (toValue(preventDefault$1)) e.preventDefault();
 		if (toValue(stopPropagation)) e.stopPropagation();
 	};
+	const scrollConfig = toValue(autoScroll);
+	const scrollSettings = typeof scrollConfig === "object" ? {
+		speed: (_toValue2 = toValue(scrollConfig.speed)) !== null && _toValue2 !== void 0 ? _toValue2 : defaultScrollConfig.speed,
+		margin: (_toValue3 = toValue(scrollConfig.margin)) !== null && _toValue3 !== void 0 ? _toValue3 : defaultScrollConfig.margin,
+		direction: (_scrollConfig$directi = scrollConfig.direction) !== null && _scrollConfig$directi !== void 0 ? _scrollConfig$directi : defaultScrollConfig.direction
+	} : defaultScrollConfig;
+	const getScrollAxisValues = (value) => typeof value === "number" ? [value, value] : [value.x, value.y];
+	const handleAutoScroll = (container, targetRect, position$1) => {
+		const { clientWidth, clientHeight, scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
+		const [marginX, marginY] = getScrollAxisValues(scrollSettings.margin);
+		const [speedX, speedY] = getScrollAxisValues(scrollSettings.speed);
+		let deltaX = 0;
+		let deltaY = 0;
+		if (scrollSettings.direction === "x" || scrollSettings.direction === "both") {
+			if (position$1.x < marginX && scrollLeft > 0) deltaX = -speedX;
+			else if (position$1.x + targetRect.width > clientWidth - marginX && scrollLeft < scrollWidth - clientWidth) deltaX = speedX;
+		}
+		if (scrollSettings.direction === "y" || scrollSettings.direction === "both") {
+			if (position$1.y < marginY && scrollTop > 0) deltaY = -speedY;
+			else if (position$1.y + targetRect.height > clientHeight - marginY && scrollTop < scrollHeight - clientHeight) deltaY = speedY;
+		}
+		if (deltaX || deltaY) container.scrollBy({
+			left: deltaX,
+			top: deltaY,
+			behavior: "auto"
+		});
+	};
+	let autoScrollInterval = null;
+	const startAutoScroll = () => {
+		const container = toValue(containerElement);
+		if (container && !autoScrollInterval) autoScrollInterval = setInterval(() => {
+			const targetRect = toValue(target).getBoundingClientRect();
+			const { x, y } = position.value;
+			const relativePosition = {
+				x: x - container.scrollLeft,
+				y: y - container.scrollTop
+			};
+			if (relativePosition.x >= 0 && relativePosition.y >= 0) {
+				handleAutoScroll(container, targetRect, relativePosition);
+				relativePosition.x += container.scrollLeft;
+				relativePosition.y += container.scrollTop;
+				position.value = relativePosition;
+			}
+		}, 1e3 / 60);
+	};
+	const stopAutoScroll = () => {
+		if (autoScrollInterval) {
+			clearInterval(autoScrollInterval);
+			autoScrollInterval = null;
+		}
+	};
+	const isPointerNearEdge = (pointer, container, margin, targetRect) => {
+		const [marginX, marginY] = typeof margin === "number" ? [margin, margin] : [margin.x, margin.y];
+		const { clientWidth, clientHeight } = container;
+		return pointer.x < marginX || pointer.x + targetRect.width > clientWidth - marginX || pointer.y < marginY || pointer.y + targetRect.height > clientHeight - marginY;
+	};
+	const checkAutoScroll = () => {
+		if (toValue(options.disabled) || !pressedDelta.value) return;
+		const container = toValue(containerElement);
+		if (!container) return;
+		const targetRect = toValue(target).getBoundingClientRect();
+		const { x, y } = position.value;
+		if (isPointerNearEdge({
+			x: x - container.scrollLeft,
+			y: y - container.scrollTop
+		}, container, scrollSettings.margin, targetRect)) startAutoScroll();
+		else stopAutoScroll();
+	};
+	if (toValue(autoScroll)) watch(position, checkAutoScroll);
 	const start = (e) => {
 		var _container$getBoundin;
 		if (!toValue(buttons).includes(e.button)) return;
@@ -468,8 +537,8 @@ function useDraggable(target, options = {}) {
 		const containerRect = container === null || container === void 0 || (_container$getBoundin = container.getBoundingClientRect) === null || _container$getBoundin === void 0 ? void 0 : _container$getBoundin.call(container);
 		const targetRect = toValue(target).getBoundingClientRect();
 		const pos = {
-			x: e.clientX - (container ? targetRect.left - containerRect.left + container.scrollLeft : targetRect.left),
-			y: e.clientY - (container ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
+			x: e.clientX - (container ? targetRect.left - containerRect.left + (autoScroll ? 0 : container.scrollLeft) : targetRect.left),
+			y: e.clientY - (container ? targetRect.top - containerRect.top + (autoScroll ? 0 : container.scrollTop) : targetRect.top)
 		};
 		if ((onStart === null || onStart === void 0 ? void 0 : onStart(pos, e)) === false) return;
 		pressedDelta.value = pos;
@@ -479,6 +548,7 @@ function useDraggable(target, options = {}) {
 		if (toValue(options.disabled) || !filterEvent(e)) return;
 		if (!pressedDelta.value) return;
 		const container = toValue(containerElement);
+		if (container instanceof HTMLElement) clampContainerScroll(container);
 		const targetRect = toValue(target).getBoundingClientRect();
 		let { x, y } = position.value;
 		if (axis === "x" || axis === "both") {
@@ -489,6 +559,26 @@ function useDraggable(target, options = {}) {
 			y = e.clientY - pressedDelta.value.y;
 			if (container) y = Math.min(Math.max(0, y), container.scrollHeight - targetRect.height);
 		}
+		if (toValue(autoScroll) && container) {
+			if (autoScrollInterval === null) handleAutoScroll(container, targetRect, {
+				x,
+				y
+			});
+			x += container.scrollLeft;
+			y += container.scrollTop;
+		}
+		if (container && (restrictInView || autoScroll)) {
+			if (axis !== "y") {
+				const relativeX = x - container.scrollLeft;
+				if (relativeX < 0) x = container.scrollLeft;
+				else if (relativeX > container.clientWidth - targetRect.width) x = container.clientWidth - targetRect.width + container.scrollLeft;
+			}
+			if (axis !== "x") {
+				const relativeY = y - container.scrollTop;
+				if (relativeY < 0) y = container.scrollTop;
+				else if (relativeY > container.clientHeight - targetRect.height) y = container.clientHeight - targetRect.height + container.scrollTop;
+			}
+		}
 		position.value = {
 			x,
 			y
@@ -500,6 +590,7 @@ function useDraggable(target, options = {}) {
 		if (toValue(options.disabled) || !filterEvent(e)) return;
 		if (!pressedDelta.value) return;
 		pressedDelta.value = void 0;
+		if (autoScroll) stopAutoScroll();
 		onEnd === null || onEnd === void 0 || onEnd(position.value, e);
 		handleEvent(e);
 	};
@@ -519,7 +610,11 @@ function useDraggable(target, options = {}) {
 		...toRefs(position),
 		position,
 		isDragging: computed(() => !!pressedDelta.value),
-		style: computed(() => `left:${position.value.x}px;top:${position.value.y}px;`)
+		style: computed(() => `
+      left: ${position.value.x}px;
+      top: ${position.value.y}px;
+      ${autoScroll ? "text-wrap: nowrap;" : ""}
+    `)
 	};
 }
 
@@ -784,133 +879,155 @@ const _export_sfc = (sfc, props) => {
 };
 
 const _hoisted_1$2 = {
-  ref: "container",
-  class: "nuxt-devtools-frame"
+	ref: "container",
+	class: "nuxt-devtools-frame"
 };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return withDirectives((openBlock(), createElementBlock(
-    "div",
-    _hoisted_1$2,
-    [
-      createCommentVNode(" Handlers "),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal",
-          style: { top: 0 },
-          onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => $setup.isResizing = { top: true }, ["prevent"])),
-          onTouchstartPassive: _cache[1] || (_cache[1] = () => $setup.isResizing = { top: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "top"]
-      ]),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal",
-          style: { bottom: 0 },
-          onMousedown: _cache[2] || (_cache[2] = withModifiers(() => $setup.isResizing = { bottom: true }, ["prevent"])),
-          onTouchstartPassive: _cache[3] || (_cache[3] = () => $setup.isResizing = { bottom: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "bottom"]
-      ]),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical",
-          style: { left: 0 },
-          onMousedown: _cache[4] || (_cache[4] = withModifiers(() => $setup.isResizing = { left: true }, ["prevent"])),
-          onTouchstartPassive: _cache[5] || (_cache[5] = () => $setup.isResizing = { left: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "left"]
-      ]),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical",
-          style: { right: 0 },
-          onMousedown: _cache[6] || (_cache[6] = withModifiers(() => $setup.isResizing = { right: true }, ["prevent"])),
-          onTouchstartPassive: _cache[7] || (_cache[7] = () => $setup.isResizing = { right: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "right"]
-      ]),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
-          style: { top: 0, left: 0, cursor: "nwse-resize" },
-          onMousedown: _cache[8] || (_cache[8] = withModifiers(() => $setup.isResizing = { top: true, left: true }, ["prevent"])),
-          onTouchstartPassive: _cache[9] || (_cache[9] = () => $setup.isResizing = { top: true, left: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "top" && $setup.state.position !== "left"]
-      ]),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
-          style: { top: 0, right: 0, cursor: "nesw-resize" },
-          onMousedown: _cache[10] || (_cache[10] = withModifiers(() => $setup.isResizing = { top: true, right: true }, ["prevent"])),
-          onTouchstartPassive: _cache[11] || (_cache[11] = () => $setup.isResizing = { top: true, right: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "top" && $setup.state.position !== "right"]
-      ]),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
-          style: { bottom: 0, left: 0, cursor: "nesw-resize" },
-          onMousedown: _cache[12] || (_cache[12] = withModifiers(() => $setup.isResizing = { bottom: true, left: true }, ["prevent"])),
-          onTouchstartPassive: _cache[13] || (_cache[13] = () => $setup.isResizing = { bottom: true, left: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "bottom" && $setup.state.position !== "left"]
-      ]),
-      withDirectives(createElementVNode(
-        "div",
-        {
-          class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
-          style: { bottom: 0, right: 0, cursor: "nwse-resize" },
-          onMousedown: _cache[14] || (_cache[14] = withModifiers(() => $setup.isResizing = { bottom: true, right: true }, ["prevent"])),
-          onTouchstartPassive: _cache[15] || (_cache[15] = () => $setup.isResizing = { bottom: true, right: true })
-        },
-        null,
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      ), [
-        [vShow, $setup.state.position !== "bottom" && $setup.state.position !== "right"]
-      ])
-    ],
-    512
-    /* NEED_PATCH */
-  )), [
-    [vShow, $setup.state.open && !$props.client.inspector?.isEnabled.value && !$setup.popupWindow]
-  ]);
+	return withDirectives((openBlock(), createElementBlock(
+		"div",
+		_hoisted_1$2,
+		[
+			createCommentVNode(" Handlers "),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal",
+					style: { top: 0 },
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => $setup.isResizing = { top: true }, ["prevent"])),
+					onTouchstartPassive: _cache[1] || (_cache[1] = () => $setup.isResizing = { top: true })
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "top"]]),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal",
+					style: { bottom: 0 },
+					onMousedown: _cache[2] || (_cache[2] = withModifiers(() => $setup.isResizing = { bottom: true }, ["prevent"])),
+					onTouchstartPassive: _cache[3] || (_cache[3] = () => $setup.isResizing = { bottom: true })
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "bottom"]]),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical",
+					style: { left: 0 },
+					onMousedown: _cache[4] || (_cache[4] = withModifiers(() => $setup.isResizing = { left: true }, ["prevent"])),
+					onTouchstartPassive: _cache[5] || (_cache[5] = () => $setup.isResizing = { left: true })
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "left"]]),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical",
+					style: { right: 0 },
+					onMousedown: _cache[6] || (_cache[6] = withModifiers(() => $setup.isResizing = { right: true }, ["prevent"])),
+					onTouchstartPassive: _cache[7] || (_cache[7] = () => $setup.isResizing = { right: true })
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "right"]]),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
+					style: {
+						top: 0,
+						left: 0,
+						cursor: "nwse-resize"
+					},
+					onMousedown: _cache[8] || (_cache[8] = withModifiers(() => $setup.isResizing = {
+						top: true,
+						left: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[9] || (_cache[9] = () => $setup.isResizing = {
+						top: true,
+						left: true
+					})
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "top" && $setup.state.position !== "left"]]),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
+					style: {
+						top: 0,
+						right: 0,
+						cursor: "nesw-resize"
+					},
+					onMousedown: _cache[10] || (_cache[10] = withModifiers(() => $setup.isResizing = {
+						top: true,
+						right: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[11] || (_cache[11] = () => $setup.isResizing = {
+						top: true,
+						right: true
+					})
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "top" && $setup.state.position !== "right"]]),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
+					style: {
+						bottom: 0,
+						left: 0,
+						cursor: "nesw-resize"
+					},
+					onMousedown: _cache[12] || (_cache[12] = withModifiers(() => $setup.isResizing = {
+						bottom: true,
+						left: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[13] || (_cache[13] = () => $setup.isResizing = {
+						bottom: true,
+						left: true
+					})
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "bottom" && $setup.state.position !== "left"]]),
+			withDirectives(createElementVNode(
+				"div",
+				{
+					class: "nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner",
+					style: {
+						bottom: 0,
+						right: 0,
+						cursor: "nwse-resize"
+					},
+					onMousedown: _cache[14] || (_cache[14] = withModifiers(() => $setup.isResizing = {
+						bottom: true,
+						right: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[15] || (_cache[15] = () => $setup.isResizing = {
+						bottom: true,
+						right: true
+					})
+				},
+				null,
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			), [[vShow, $setup.state.position !== "bottom" && $setup.state.position !== "right"]])
+		],
+		512
+		/* NEED_PATCH */
+	)), [[vShow, $setup.state.open && !$props.client.inspector?.isEnabled.value && !$setup.popupWindow]]);
 }
 const FrameBox = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/runner/work/devtools/devtools/packages/devtools/src/webcomponents/components/NuxtDevtoolsFrameBox.vue"]]);
 
@@ -1232,185 +1349,187 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$1 = {
-  viewBox: "0 0 324 324",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  style: { "margin-top": "-1px", "height": "1.2em", "width": "1.2em" }
+	viewBox: "0 0 324 324",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	style: {
+		"margin-top": "-1px",
+		"height": "1.2em",
+		"width": "1.2em"
+	}
 };
 const _hoisted_2$1 = ["title"];
 const _hoisted_3$1 = { class: "nuxt-devtools-label-main" };
-const _hoisted_4 = { class: "nuxt-devtools-label-secondary" };
+const _hoisted_4$1 = { class: "nuxt-devtools-label-secondary" };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "div",
-    {
-      id: "nuxt-devtools-anchor",
-      ref: "anchorEl",
-      style: normalizeStyle([$setup.anchorStyle, $setup.vars]),
-      class: normalizeClass({
-        "nuxt-devtools-vertical": $setup.isVertical,
-        "nuxt-devtools-hide": $setup.isMinimized
-      }),
-      onMousemove: $setup.bringUp
-    },
-    [
-      !$setup.isSafari ? (openBlock(), createElementBlock(
-        "div",
-        {
-          key: 0,
-          class: "nuxt-devtools-glowing",
-          style: normalizeStyle($setup.isDragging ? "opacity: 0.6 !important" : "")
-        },
-        null,
-        4
-        /* STYLE */
-      )) : createCommentVNode("v-if", true),
-      createElementVNode(
-        "div",
-        {
-          ref: "panelEl",
-          class: "nuxt-devtools-panel",
-          style: normalizeStyle($setup.panelStyle),
-          onPointerdown: $setup.onPointerDown
-        },
-        [
-          createElementVNode(
-            "button",
-            {
-              class: "nuxt-devtools-icon-button nuxt-devtools-nuxt-button",
-              title: "Toggle Nuxt DevTools",
-              style: normalizeStyle($setup.state.open ? "" : "filter:saturate(0)"),
-              onClick: _cache[0] || (_cache[0] = ($event) => $props.client.devtools.toggle())
-            },
-            [
-              (openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[2] || (_cache[2] = [
-                createElementVNode(
-                  "path",
-                  {
-                    d: "M181.767 270H302.211C306.037 270 309.795 269.003 313.108 267.107C316.421 265.211 319.172 262.484 321.084 259.2C322.996 255.915 324.002 252.19 324 248.399C323.998 244.607 322.989 240.883 321.074 237.601L240.187 98.7439C238.275 95.4607 235.525 92.7342 232.213 90.8385C228.901 88.9429 225.143 87.9449 221.318 87.9449C217.494 87.9449 213.736 88.9429 210.424 90.8385C207.112 92.7342 204.361 95.4607 202.449 98.7439L181.767 134.272L141.329 64.7975C139.416 61.5145 136.664 58.7884 133.351 56.8931C130.038 54.9978 126.28 54 122.454 54C118.629 54 114.871 54.9978 111.558 56.8931C108.245 58.7884 105.493 61.5145 103.58 64.7975L2.92554 237.601C1.01067 240.883 0.00166657 244.607 2.06272e-06 248.399C-0.00166244 252.19 1.00407 255.915 2.91605 259.2C4.82803 262.484 7.57884 265.211 10.8918 267.107C14.2047 269.003 17.963 270 21.7886 270H97.3936C127.349 270 149.44 256.959 164.641 231.517L201.546 168.172L221.313 134.272L280.637 236.1H201.546L181.767 270ZM96.1611 236.065L43.3984 236.054L122.49 100.291L161.953 168.172L135.531 213.543C125.436 230.051 113.968 236.065 96.1611 236.065Z",
-                    fill: "#00DC82"
-                  },
-                  null,
-                  -1
-                  /* CACHED */
-                )
-              ])]))
-            ],
-            4
-            /* STYLE */
-          ),
-          _cache[5] || (_cache[5] = createElementVNode(
-            "div",
-            {
-              style: { "border-left": "1px solid #8883", "width": "1px", "height": "10px" },
-              class: "nuxt-devtools-panel-content"
-            },
-            null,
-            -1
-            /* CACHED */
-          )),
-          createElementVNode("div", {
-            class: "nuxt-devtools-panel-content nuxt-devtools-label",
-            title: `${$setup.time[0]} load time`
-          }, [
-            createElementVNode(
-              "div",
-              _hoisted_3$1,
-              toDisplayString($setup.time[1]),
-              1
-              /* TEXT */
-            ),
-            createElementVNode(
-              "span",
-              _hoisted_4,
-              toDisplayString($setup.time[2]),
-              1
-              /* TEXT */
-            )
-          ], 8, _hoisted_2$1),
-          $props.client.inspector?.isAvailable ? (openBlock(), createElementBlock(
-            Fragment,
-            { key: 0 },
-            [
-              _cache[4] || (_cache[4] = createElementVNode(
-                "div",
-                {
-                  style: { "border-left": "1px solid #8883", "width": "1px", "height": "10px" },
-                  class: "nuxt-devtools-panel-content"
-                },
-                null,
-                -1
-                /* CACHED */
-              )),
-              createElementVNode("button", {
-                class: "nuxt-devtools-icon-button nuxt-devtools-panel-content",
-                title: "Toggle Component Inspector",
-                onClick: withModifiers($setup.toggleInspector, ["prevent", "stop"])
-              }, [
-                (openBlock(), createElementBlock(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    style: normalizeStyle([{ "height": "1.2em", "width": "1.2em", "opacity": "0.5" }, $props.client.inspector.isEnabled.value ? "opacity:1;color:#00dc82" : ""]),
-                    viewBox: "0 0 24 24"
-                  },
-                  [..._cache[3] || (_cache[3] = [
-                    createElementVNode(
-                      "g",
-                      {
-                        fill: "none",
-                        stroke: "currentColor",
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round",
-                        "stroke-width": "2"
-                      },
-                      [
-                        createElementVNode("circle", {
-                          cx: "12",
-                          cy: "12",
-                          r: ".5",
-                          fill: "currentColor"
-                        }),
-                        createElementVNode("path", { d: "M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2" })
-                      ],
-                      -1
-                      /* CACHED */
-                    )
-                  ])],
-                  4
-                  /* STYLE */
-                ))
-              ])
-            ],
-            64
-            /* STABLE_FRAGMENT */
-          )) : createCommentVNode("v-if", true)
-        ],
-        36
-        /* STYLE, NEED_HYDRATION */
-      ),
-      createElementVNode(
-        "div",
-        {
-          ref: "frameBox",
-          style: normalizeStyle($setup.iframeStyle)
-        },
-        [
-          createVNode($setup["FrameBox"], {
-            "popup-window": $setup.popupWindow,
-            "onUpdate:popupWindow": _cache[1] || (_cache[1] = ($event) => $setup.popupWindow = $event),
-            state: $setup.state,
-            client: $props.client,
-            "is-dragging": $setup.isDragging
-          }, null, 8, ["popup-window", "state", "client", "is-dragging"])
-        ],
-        4
-        /* STYLE */
-      )
-    ],
-    38
-    /* CLASS, STYLE, NEED_HYDRATION */
-  );
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			id: "nuxt-devtools-anchor",
+			ref: "anchorEl",
+			style: normalizeStyle([$setup.anchorStyle, $setup.vars]),
+			class: normalizeClass({
+				"nuxt-devtools-vertical": $setup.isVertical,
+				"nuxt-devtools-hide": $setup.isMinimized
+			}),
+			onMousemove: $setup.bringUp
+		},
+		[
+			!$setup.isSafari ? (openBlock(), createElementBlock(
+				"div",
+				{
+					key: 0,
+					class: "nuxt-devtools-glowing",
+					style: normalizeStyle($setup.isDragging ? "opacity: 0.6 !important" : "")
+				},
+				null,
+				4
+				/* STYLE */
+			)) : createCommentVNode("v-if", true),
+			createElementVNode(
+				"div",
+				{
+					ref: "panelEl",
+					class: "nuxt-devtools-panel",
+					style: normalizeStyle($setup.panelStyle),
+					onPointerdown: $setup.onPointerDown
+				},
+				[
+					createElementVNode(
+						"button",
+						{
+							class: "nuxt-devtools-icon-button nuxt-devtools-nuxt-button",
+							title: "Toggle Nuxt DevTools",
+							style: normalizeStyle($setup.state.open ? "" : "filter:saturate(0)"),
+							onClick: _cache[0] || (_cache[0] = ($event) => $props.client.devtools.toggle())
+						},
+						[(openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[2] || (_cache[2] = [createElementVNode(
+							"path",
+							{
+								d: "M181.767 270H302.211C306.037 270 309.795 269.003 313.108 267.107C316.421 265.211 319.172 262.484 321.084 259.2C322.996 255.915 324.002 252.19 324 248.399C323.998 244.607 322.989 240.883 321.074 237.601L240.187 98.7439C238.275 95.4607 235.525 92.7342 232.213 90.8385C228.901 88.9429 225.143 87.9449 221.318 87.9449C217.494 87.9449 213.736 88.9429 210.424 90.8385C207.112 92.7342 204.361 95.4607 202.449 98.7439L181.767 134.272L141.329 64.7975C139.416 61.5145 136.664 58.7884 133.351 56.8931C130.038 54.9978 126.28 54 122.454 54C118.629 54 114.871 54.9978 111.558 56.8931C108.245 58.7884 105.493 61.5145 103.58 64.7975L2.92554 237.601C1.01067 240.883 0.00166657 244.607 2.06272e-06 248.399C-0.00166244 252.19 1.00407 255.915 2.91605 259.2C4.82803 262.484 7.57884 265.211 10.8918 267.107C14.2047 269.003 17.963 270 21.7886 270H97.3936C127.349 270 149.44 256.959 164.641 231.517L201.546 168.172L221.313 134.272L280.637 236.1H201.546L181.767 270ZM96.1611 236.065L43.3984 236.054L122.49 100.291L161.953 168.172L135.531 213.543C125.436 230.051 113.968 236.065 96.1611 236.065Z",
+								fill: "#00DC82"
+							},
+							null,
+							-1
+							/* CACHED */
+						)])]))],
+						4
+						/* STYLE */
+					),
+					_cache[5] || (_cache[5] = createElementVNode(
+						"div",
+						{
+							style: {
+								"border-left": "1px solid #8883",
+								"width": "1px",
+								"height": "10px"
+							},
+							class: "nuxt-devtools-panel-content"
+						},
+						null,
+						-1
+						/* CACHED */
+					)),
+					createElementVNode("div", {
+						class: "nuxt-devtools-panel-content nuxt-devtools-label",
+						title: `${$setup.time[0]} load time`
+					}, [createElementVNode(
+						"div",
+						_hoisted_3$1,
+						toDisplayString($setup.time[1]),
+						1
+						/* TEXT */
+					), createElementVNode(
+						"span",
+						_hoisted_4$1,
+						toDisplayString($setup.time[2]),
+						1
+						/* TEXT */
+					)], 8, _hoisted_2$1),
+					$props.client.inspector?.isAvailable ? (openBlock(), createElementBlock(
+						Fragment,
+						{ key: 0 },
+						[_cache[4] || (_cache[4] = createElementVNode(
+							"div",
+							{
+								style: {
+									"border-left": "1px solid #8883",
+									"width": "1px",
+									"height": "10px"
+								},
+								class: "nuxt-devtools-panel-content"
+							},
+							null,
+							-1
+							/* CACHED */
+						)), createElementVNode("button", {
+							class: "nuxt-devtools-icon-button nuxt-devtools-panel-content",
+							title: "Toggle Component Inspector",
+							onClick: withModifiers($setup.toggleInspector, ["prevent", "stop"])
+						}, [(openBlock(), createElementBlock(
+							"svg",
+							{
+								xmlns: "http://www.w3.org/2000/svg",
+								style: normalizeStyle([{
+									"height": "1.2em",
+									"width": "1.2em",
+									"opacity": "0.5"
+								}, $props.client.inspector.isEnabled.value ? "opacity:1;color:#00dc82" : ""]),
+								viewBox: "0 0 24 24"
+							},
+							[..._cache[3] || (_cache[3] = [createElementVNode(
+								"g",
+								{
+									fill: "none",
+									stroke: "currentColor",
+									"stroke-linecap": "round",
+									"stroke-linejoin": "round",
+									"stroke-width": "2"
+								},
+								[createElementVNode("circle", {
+									cx: "12",
+									cy: "12",
+									r: ".5",
+									fill: "currentColor"
+								}), createElementVNode("path", { d: "M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2" })],
+								-1
+								/* CACHED */
+							)])],
+							4
+							/* STYLE */
+						))])],
+						64
+						/* STABLE_FRAGMENT */
+					)) : createCommentVNode("v-if", true)
+				],
+				36
+				/* STYLE, NEED_HYDRATION */
+			),
+			createElementVNode(
+				"div",
+				{
+					ref: "frameBox",
+					style: normalizeStyle($setup.iframeStyle)
+				},
+				[createVNode($setup["FrameBox"], {
+					"popup-window": $setup.popupWindow,
+					"onUpdate:popupWindow": _cache[1] || (_cache[1] = ($event) => $setup.popupWindow = $event),
+					state: $setup.state,
+					client: $props.client,
+					"is-dragging": $setup.isDragging
+				}, null, 8, [
+					"popup-window",
+					"state",
+					"client",
+					"is-dragging"
+				])],
+				4
+				/* STYLE */
+			)
+		],
+		38
+		/* CLASS, STYLE, NEED_HYDRATION */
+	);
 }
 const Component$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/devtools/devtools/packages/devtools/src/webcomponents/components/NuxtDevtoolsFrame.vue"]]);
 
@@ -1435,6 +1554,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const emit = __emit;
+    const showToast = ref(false);
+    const toastContent = ref("");
+    let toastTimer;
     const initX = ref(0);
     const initY = ref(0);
     watch(
@@ -1483,97 +1605,276 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const file = `${__props.props.matched.pos[0]}:${__props.props.matched.pos[1]}:${__props.props.matched.pos[2]}`;
       emit("openInEditor", file);
     }
-    const __returned__ = { emit, PANEL_WIDTH, PANEL_HEIGHT, PANEL_MARGIN, initX, initY, el, draggingEl, x, y, style, isDragging, hasMoved, close, selectParent, openInEditor };
+    function generateUniqueSelector(element) {
+      if (!element)
+        return "";
+      const path = [];
+      let current = element;
+      while (current && current !== document.body) {
+        let selector = current.tagName.toLowerCase();
+        if (current.id) {
+          selector += `#${CSS.escape(current.id)}`;
+          path.unshift(selector);
+          break;
+        }
+        if (current.className && typeof current.className === "string") {
+          const classes = current.className.trim().split(/\s+/).filter(Boolean);
+          if (classes.length > 0)
+            selector += `.${classes.map((c) => CSS.escape(c)).join(".")}`;
+        }
+        const parent = current.parentElement;
+        if (parent) {
+          const siblings = Array.from(parent.children).filter(
+            (child) => child.tagName === current.tagName
+          );
+          if (siblings.length > 1) {
+            const index = siblings.indexOf(current) + 1;
+            selector += `:nth-of-type(${index})`;
+          }
+        }
+        path.unshift(selector);
+        current = current.parentElement;
+      }
+      if (path.length > 6)
+        return "";
+      return path.join(" > ");
+    }
+    function buildComponentTree() {
+      if (!__props.props.matched)
+        return "";
+      const components = [];
+      let current = __props.props.matched;
+      while (current) {
+        let componentName = "Unknown";
+        if (current.vnode) {
+          const vnode = current.vnode;
+          if (vnode.type) {
+            if (typeof vnode.type === "string") {
+              componentName = vnode.type;
+            } else if (typeof vnode.type === "object") {
+              const typeObj = vnode.type;
+              componentName = typeObj.name || typeObj.__name || typeObj.__file?.split("/").pop()?.replace(/\.\w+$/, "") || "AnonymousComponent";
+            } else if (typeof vnode.type === "function") {
+              componentName = vnode.type.name || "FunctionalComponent";
+            }
+          }
+        }
+        components.unshift(componentName);
+        try {
+          current = current.getParent();
+        } catch {
+          break;
+        }
+      }
+      return components.join(" > ");
+    }
+    async function copyAgentInfo() {
+      if (!__props.props.matched)
+        return;
+      try {
+        const pageUrl = window.location.href;
+        const viewport = `${window.innerWidth}x${window.innerHeight}`;
+        const selectedText = window.getSelection()?.toString()?.trim();
+        const filepath = __props.props.matched.pos[0];
+        const line = __props.props.matched.pos[1];
+        const column = __props.props.matched.pos[2];
+        const fileLocation = `${filepath}:${line}:${column}`;
+        const selector = generateUniqueSelector(__props.props.matched.el);
+        const componentTree = buildComponentTree();
+        const info = [
+          `Page URL: ${pageUrl}`,
+          `Viewport: ${viewport}`,
+          selectedText ? `Selected Text: ${selectedText}` : null,
+          selector ? `Selector: ${selector}` : null,
+          componentTree ? `Component Tree: ${componentTree}` : null,
+          `File: ${fileLocation}`
+        ].filter(Boolean).join("\n");
+        await navigator.clipboard.writeText(info);
+        toastContent.value = info;
+        showToast.value = true;
+        if (toastTimer)
+          clearTimeout(toastTimer);
+        toastTimer = setTimeout(() => {
+          showToast.value = false;
+        }, 6e3);
+      } catch (error) {
+        console.error("Failed to copy agent info:", error);
+      }
+    }
+    const __returned__ = { emit, PANEL_WIDTH, PANEL_HEIGHT, PANEL_MARGIN, showToast, toastContent, get toastTimer() {
+      return toastTimer;
+    }, set toastTimer(v) {
+      toastTimer = v;
+    }, initX, initY, el, draggingEl, x, y, style, isDragging, hasMoved, close, selectParent, openInEditor, generateUniqueSelector, buildComponentTree, copyAgentInfo };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 
 const _hoisted_1 = {
-  ref: "draggingEl",
-  class: "flex items-center gap-2 p2"
+	ref: "draggingEl",
+	class: "flex flex-col gap-2 of-hidden p2"
+};
+const _hoisted_2 = { class: "flex items-center gap-2" };
+const _hoisted_3 = { class: "grid grid-cols-[max-content_1fr] items-center gap-2" };
+const _hoisted_4 = {
+	class: "break-all text-xs font-mono",
+	title: "File location"
+};
+const _hoisted_5 = {
+	class: "break-all text-xs font-mono",
+	title: "Component Tree"
 };
-const _hoisted_2 = ["disabled"];
-const _hoisted_3 = { key: 0 };
+const _hoisted_6 = { class: "mt-2 max-h-200px of-auto whitespace-pre-wrap rounded bg-black bg-op-20 p2 text-xs font-mono" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "div",
-    {
-      ref: "el",
-      class: normalizeClass(["bg-glass ring-base color-base fixed relative z-9999999 w-400px flex flex-col of-hidden rounded-lg text-sm shadow-lg ring-1 backdrop-blur duration-200", [
-        $setup.isDragging ? "transition-none" : "transition-opacity",
-        $props.props.matched ? "op100" : "op0 pointer-events-none"
-      ]]),
-      style: normalizeStyle($setup.style)
-    },
-    [
-      createCommentVNode(' <div\n      class="pointer-events-none absolute inset-0 z-10 transition-opacity duration-300"\n    >\n      <div class="nuxt-devtools-inspect-running-border pointer-events-none absolute inset-0 z-10 border-1.5 border-transparent rounded-lg" />\n    </div> '),
-      createElementVNode(
-        "div",
-        _hoisted_1,
-        [
-          createElementVNode("button", {
-            title: "Go to parent",
-            class: "flex items-center text-sm font-mono op50 disabled:pointer-events-none hover:text-green6 hover:op100 disabled:op10!",
-            disabled: !$props.props.hasParent,
-            onClick: $setup.selectParent
-          }, [..._cache[0] || (_cache[0] = [
-            createElementVNode(
-              "div",
-              { class: "i-ph-arrow-bend-left-up-duotone text-lg" },
-              null,
-              -1
-              /* CACHED */
-            )
-          ])], 8, _hoisted_2),
-          createElementVNode("button", {
-            title: "Open in editor",
-            class: "flex items-center text-sm font-mono op50 hover:text-green6 hover:op100",
-            onClick: $setup.openInEditor
-          }, [
-            $props.props.matched ? (openBlock(), createElementBlock(
-              "span",
-              _hoisted_3,
-              toDisplayString($props.props.matched.pos[0]) + ":" + toDisplayString($props.props.matched.pos[1]) + ":" + toDisplayString($props.props.matched.pos[2]),
-              1
-              /* TEXT */
-            )) : createCommentVNode("v-if", true),
-            _cache[1] || (_cache[1] = createElementVNode(
-              "div",
-              { class: "i-ph-arrow-up-right-light mt--2 text-lg" },
-              null,
-              -1
-              /* CACHED */
-            ))
-          ]),
-          _cache[3] || (_cache[3] = createElementVNode(
-            "div",
-            { class: "flex-auto" },
-            null,
-            -1
-            /* CACHED */
-          )),
-          createElementVNode("button", {
-            title: "Close",
-            class: "flex-none op50 hover:op100",
-            onClick: $setup.close
-          }, [..._cache[2] || (_cache[2] = [
-            createElementVNode(
-              "div",
-              { class: "i-ph-x text-lg" },
-              null,
-              -1
-              /* CACHED */
-            )
-          ])])
-        ],
-        512
-        /* NEED_PATCH */
-      )
-    ],
-    6
-    /* CLASS, STYLE */
-  );
+	return openBlock(), createElementBlock(
+		Fragment,
+		null,
+		[
+			$props.props.matched ? (openBlock(), createElementBlock(
+				"div",
+				{
+					key: 0,
+					ref: "el",
+					class: normalizeClass(["fixed relative z-9999999 w-400px flex flex-col of-hidden rounded-lg bg-glass text-sm color-base shadow-lg ring-1 ring-base backdrop-blur duration-200", [$setup.isDragging ? "transition-none" : "transition-opacity", $props.props.matched ? "op100" : "op0 pointer-events-none"]]),
+					style: normalizeStyle($setup.style)
+				},
+				[createCommentVNode(" <div\n      class=\"pointer-events-none absolute inset-0 z-10 transition-opacity duration-300\"\n    >\n      <div class=\"nuxt-devtools-inspect-running-border pointer-events-none absolute inset-0 z-10 border-1.5 border-transparent rounded-lg\" />\n    </div> "), createElementVNode(
+					"div",
+					_hoisted_1,
+					[createElementVNode("div", _hoisted_2, [
+						$props.props.hasParent ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							title: "Go to parent",
+							class: "flex items-center border-1 border-base rounded px1 py0.5 text-sm font-mono op50 disabled:pointer-events-none hover:text-green6 hover:op100 disabled:op10!",
+							onClick: $setup.selectParent
+						}, [..._cache[0] || (_cache[0] = [createElementVNode(
+							"div",
+							{ class: "i-ph-arrow-bend-left-up-duotone text-lg" },
+							null,
+							-1
+							/* CACHED */
+						), createTextVNode(
+							" Parent ",
+							-1
+							/* CACHED */
+						)])])) : createCommentVNode("v-if", true),
+						createElementVNode("button", {
+							title: "Open in editor",
+							class: "flex items-center border-1 border-base rounded px1 py0.5 text-sm font-mono op50 hover:text-green6 hover:op100",
+							onClick: $setup.openInEditor
+						}, [..._cache[1] || (_cache[1] = [createElementVNode(
+							"div",
+							{ class: "i-ph-arrow-up-right-light text-lg" },
+							null,
+							-1
+							/* CACHED */
+						), createTextVNode(
+							" Open ",
+							-1
+							/* CACHED */
+						)])]),
+						createElementVNode("button", {
+							title: "Copy infos for agents",
+							class: "flex items-center border-1 border-base rounded px1 py0.5 text-sm font-mono op50 hover:text-green6 hover:op100",
+							onClick: $setup.copyAgentInfo
+						}, [..._cache[2] || (_cache[2] = [createElementVNode(
+							"div",
+							{ class: "i-ph-copy-duotone text-lg" },
+							null,
+							-1
+							/* CACHED */
+						), createTextVNode(
+							" Info ",
+							-1
+							/* CACHED */
+						)])]),
+						_cache[4] || (_cache[4] = createElementVNode(
+							"div",
+							{ class: "flex-auto" },
+							null,
+							-1
+							/* CACHED */
+						)),
+						createElementVNode("button", {
+							title: "Close",
+							class: "flex-none op50 hover:op100",
+							onClick: $setup.close
+						}, [..._cache[3] || (_cache[3] = [createElementVNode(
+							"div",
+							{ class: "i-ph-x text-lg" },
+							null,
+							-1
+							/* CACHED */
+						)])])
+					]), createElementVNode("div", _hoisted_3, [
+						createCommentVNode(" File "),
+						_cache[5] || (_cache[5] = createElementVNode(
+							"div",
+							{
+								class: "i-ph-file-duotone flex-none text-lg op50",
+								title: "File"
+							},
+							null,
+							-1
+							/* CACHED */
+						)),
+						createElementVNode(
+							"span",
+							_hoisted_4,
+							toDisplayString($props.props.matched.pos[0]) + ":" + toDisplayString($props.props.matched.pos[1]) + ":" + toDisplayString($props.props.matched.pos[2]),
+							1
+							/* TEXT */
+						),
+						createCommentVNode(" Component Tree "),
+						_cache[6] || (_cache[6] = createElementVNode(
+							"div",
+							{
+								class: "i-ph-tree-view-duotone flex-none text-lg op50",
+								title: "Component Tree"
+							},
+							null,
+							-1
+							/* CACHED */
+						)),
+						createElementVNode(
+							"span",
+							_hoisted_5,
+							toDisplayString($setup.buildComponentTree()),
+							1
+							/* TEXT */
+						)
+					])],
+					512
+					/* NEED_PATCH */
+				)],
+				6
+				/* CLASS, STYLE */
+			)) : createCommentVNode("v-if", true),
+			createCommentVNode(" Toast notification "),
+			withDirectives(createElementVNode(
+				"div",
+				{ class: normalizeClass(["fixed bottom-20px right-20px z-99999999 max-w-500px flex flex-col gap-2 rounded-lg bg-glass p4 text-sm color-base shadow-xl ring-1 ring-base backdrop-blur transition-all duration-300", $setup.showToast ? "translate-y-0 op100" : "translate-y-10 op0"]) },
+				[_cache[7] || (_cache[7] = createElementVNode(
+					"div",
+					{ class: "flex items-center gap-2" },
+					[createElementVNode("div", { class: "i-ph-check-circle-duotone text-xl text-green6" }), createElementVNode("span", { class: "font-semibold" }, "Infos for agents copied to clipboard")],
+					-1
+					/* CACHED */
+				)), createElementVNode(
+					"pre",
+					_hoisted_6,
+					toDisplayString($setup.toastContent),
+					1
+					/* TEXT */
+				)],
+				2
+				/* CLASS */
+			), [[vShow, $setup.showToast]])
+		],
+		64
+		/* STABLE_FRAGMENT */
+	);
 }
 const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/devtools/devtools/packages/devtools/src/webcomponents/components/NuxtDevtoolsInspectPanel.vue"]]);