@vitejs/devtools 0.0.0-alpha.8 → 0.1.0

package/dist/client/webcomponents.js

@@ -1,99 +1,123 @@
-import { A as withDirectives, C as renderList, D as watch, E as useTemplateRef, F as unref, I as normalizeClass, L as normalizeStyle, M as reactive, N as ref, O as watchEffect, P as toRefs, R as toDisplayString, S as openBlock, T as useModel, _ as defineComponent, a as useWindowSize, b as onMounted, c as vShow, d as computed, f as createBaseVNode, g as createVNode, h as createElementBlock, i as useScreenSafeArea, j as markRaw, k as withCtx, l as withModifiers, m as createCommentVNode, n as useEventListener, o as toRefs$1, p as createBlock, s as defineCustomElement, t as useElementBounding, u as Fragment, v as mergeModels, w as renderSlot, x as onUnmounted, y as nextTick } from "../dist-BuuUhVT5.js";
-
-//#region src/client/webcomponents/.generated/css.ts
-var css_default = "*{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%}.vite-devtools-resize-handle-horizontal{cursor:ns-resize;-webkit-border-radius:.375rem;border-radius:.375rem;height:10px;margin-top:-5px;margin-bottom:-5px;position:absolute;left:6px;right:6px}.vite-devtools-resize-handle-vertical{cursor:ew-resize;-webkit-border-radius:.375rem;border-radius:.375rem;width:10px;margin-left:-5px;margin-right:-5px;position:absolute;top:6px;bottom:0}.vite-devtools-resize-handle-corner{-webkit-border-radius:.375rem;border-radius:.375rem;width:14px;height:14px;margin:-6px;position:absolute}.vite-devtools-resize-handle{z-index:2147483645}.vite-devtools-resize-handle:hover{background-color:rgba(156,163,175,.1)}#vite-devtools-anchor{z-index:2147483645;box-sizing:border-box;transform-origin:50%;width:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:15px;position:fixed;transform:translate(-50%,-50%)rotate(0)}#vite-devtools-anchor #vite-devtools-dock-container{width:max-content;min-width:100px;height:44px;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}#vite-devtools-anchor.vite-devtools-vertical #vite-devtools-dock-container{transition:all .6s,max-width .6s,padding .5s,transform .4s,opacity .2s;transform:translate(-50%,-50%)rotate(90deg)}#vite-devtools-anchor #vite-devtools-dock{touch-action:none;user-select:none;--vdt-border-opacity:.13;border-width:1px;border-color:rgba(136,136,136,var(--vdt-border-opacity));--vdt-backdrop-blur:blur(5px);min-width:100%;height:100%;backdrop-filter:var(--vdt-backdrop-blur)var(--vdt-backdrop-brightness)var(--vdt-backdrop-contrast)var(--vdt-backdrop-grayscale)var(--vdt-backdrop-hue-rotate)var(--vdt-backdrop-invert)var(--vdt-backdrop-opacity)var(--vdt-backdrop-saturate)var(--vdt-backdrop-sepia);--vdt-text-opacity:1;color:rgba(255,255,255,var(--vdt-text-opacity));--vdt-shadow:var(--vdt-shadow-inset)0 1px 3px 0 var(--vdt-shadow-color,rgba(0,0,0,.1)),var(--vdt-shadow-inset)0 1px 2px -1px var(--vdt-shadow-color,rgba(0,0,0,.1));box-shadow:var(--vdt-ring-offset-shadow),var(--vdt-ring-shadow),var(--vdt-shadow);background-color:rgba(255,255,255,.75);-webkit-border-radius:9999px;border-radius:9999px;padding-left:1rem;padding-right:1rem;transition:all .6s,max-width .6s,padding .5s,transform .4s,opacity .2s}@media (prefers-color-scheme:dark){#vite-devtools-anchor #vite-devtools-dock{background-color:rgba(17,17,17,.75)}}#vite-devtools-anchor.vite-devtools-minimized #vite-devtools-dock{width:52px;height:8px;padding:2px 0}#vite-devtools-anchor:hover #vite-devtools-glowing{opacity:.6}#vite-devtools-anchor #vite-devtools-glowing{pointer-events:none;z-index:-1;opacity:0;--vdt-blur:blur(60px);width:160px;height:160px;filter:var(--vdt-blur)var(--vdt-brightness)var(--vdt-contrast)var(--vdt-drop-shadow)var(--vdt-grayscale)var(--vdt-hue-rotate)var(--vdt-invert)var(--vdt-saturate)var(--vdt-sepia);background-image:linear-gradient(45deg,#61d9ff,#7a23a1,#715ebd);-webkit-border-radius:9999px;border-radius:9999px;transition-property:all;transition-duration:1s;transition-timing-function:cubic-bezier(0,0,.2,1);position:absolute;top:0;left:0;transform:translate(-50%,-50%)}@media print{#vite-devtools-anchor{display:none}}.vite-devtools-dock-label{--vdt-translate-x:-50%;transform:translateX(var(--vdt-translate-x))translateY(var(--vdt-translate-y))translateZ(var(--vdt-translate-z))rotate(var(--vdt-rotate))rotateX(var(--vdt-rotate-x))rotateY(var(--vdt-rotate-y))rotateZ(var(--vdt-rotate-z))skewX(var(--vdt-skew-x))skewY(var(--vdt-skew-y))scaleX(var(--vdt-scale-x))scaleY(var(--vdt-scale-y))scaleZ(var(--vdt-scale-z));bottom:-1.75rem;left:50%}.vite-devtools-vertical .vite-devtools-dock-label{--vdt-rotate-x:0;--vdt-rotate-y:0;--vdt-rotate-z:0;--vdt-rotate:270deg;transform:translateX(var(--vdt-translate-x))translateY(var(--vdt-translate-y))translateZ(var(--vdt-translate-z))rotate(var(--vdt-rotate))rotateX(var(--vdt-rotate-x))rotateY(var(--vdt-rotate-y))rotateZ(var(--vdt-rotate-z))skewX(var(--vdt-skew-x))skewY(var(--vdt-skew-y))scaleX(var(--vdt-scale-x))scaleY(var(--vdt-scale-y))scaleZ(var(--vdt-scale-z));bottom:-2.5rem}*{--vdt-rotate:0;--vdt-rotate-x:0;--vdt-rotate-y:0;--vdt-rotate-z:0;--vdt-scale-x:1;--vdt-scale-y:1;--vdt-scale-z:1;--vdt-skew-x:0;--vdt-skew-y:0;--vdt-translate-x:0;--vdt-translate-y:0;--vdt-translate-z:0;--vdt-pan-x: ;--vdt-pan-y: ;--vdt-pinch-zoom: ;--vdt-scroll-snap-strictness:proximity;--vdt-ordinal: ;--vdt-slashed-zero: ;--vdt-numeric-figure: ;--vdt-numeric-spacing: ;--vdt-numeric-fraction: ;--vdt-border-spacing-x:0;--vdt-border-spacing-y:0;--vdt-ring-offset-shadow:0 0 transparent;--vdt-ring-shadow:0 0 transparent;--vdt-shadow-inset: ;--vdt-shadow:0 0 transparent;--vdt-ring-inset: ;--vdt-ring-offset-width:0px;--vdt-ring-offset-color:#fff;--vdt-ring-width:0px;--vdt-ring-color:rgba(147,197,253,.5);--vdt-blur: ;--vdt-brightness: ;--vdt-contrast: ;--vdt-drop-shadow: ;--vdt-grayscale: ;--vdt-hue-rotate: ;--vdt-invert: ;--vdt-saturate: ;--vdt-sepia: ;--vdt-backdrop-blur: ;--vdt-backdrop-brightness: ;--vdt-backdrop-contrast: ;--vdt-backdrop-grayscale: ;--vdt-backdrop-hue-rotate: ;--vdt-backdrop-invert: ;--vdt-backdrop-opacity: ;--vdt-backdrop-saturate: ;--vdt-backdrop-sepia: }:before{--vdt-rotate:0;--vdt-rotate-x:0;--vdt-rotate-y:0;--vdt-rotate-z:0;--vdt-scale-x:1;--vdt-scale-y:1;--vdt-scale-z:1;--vdt-skew-x:0;--vdt-skew-y:0;--vdt-translate-x:0;--vdt-translate-y:0;--vdt-translate-z:0;--vdt-pan-x: ;--vdt-pan-y: ;--vdt-pinch-zoom: ;--vdt-scroll-snap-strictness:proximity;--vdt-ordinal: ;--vdt-slashed-zero: ;--vdt-numeric-figure: ;--vdt-numeric-spacing: ;--vdt-numeric-fraction: ;--vdt-border-spacing-x:0;--vdt-border-spacing-y:0;--vdt-ring-offset-shadow:0 0 transparent;--vdt-ring-shadow:0 0 transparent;--vdt-shadow-inset: ;--vdt-shadow:0 0 transparent;--vdt-ring-inset: ;--vdt-ring-offset-width:0px;--vdt-ring-offset-color:#fff;--vdt-ring-width:0px;--vdt-ring-color:rgba(147,197,253,.5);--vdt-blur: ;--vdt-brightness: ;--vdt-contrast: ;--vdt-drop-shadow: ;--vdt-grayscale: ;--vdt-hue-rotate: ;--vdt-invert: ;--vdt-saturate: ;--vdt-sepia: ;--vdt-backdrop-blur: ;--vdt-backdrop-brightness: ;--vdt-backdrop-contrast: ;--vdt-backdrop-grayscale: ;--vdt-backdrop-hue-rotate: ;--vdt-backdrop-invert: ;--vdt-backdrop-opacity: ;--vdt-backdrop-saturate: ;--vdt-backdrop-sepia: }:after{--vdt-rotate:0;--vdt-rotate-x:0;--vdt-rotate-y:0;--vdt-rotate-z:0;--vdt-scale-x:1;--vdt-scale-y:1;--vdt-scale-z:1;--vdt-skew-x:0;--vdt-skew-y:0;--vdt-translate-x:0;--vdt-translate-y:0;--vdt-translate-z:0;--vdt-pan-x: ;--vdt-pan-y: ;--vdt-pinch-zoom: ;--vdt-scroll-snap-strictness:proximity;--vdt-ordinal: ;--vdt-slashed-zero: ;--vdt-numeric-figure: ;--vdt-numeric-spacing: ;--vdt-numeric-fraction: ;--vdt-border-spacing-x:0;--vdt-border-spacing-y:0;--vdt-ring-offset-shadow:0 0 transparent;--vdt-ring-shadow:0 0 transparent;--vdt-shadow-inset: ;--vdt-shadow:0 0 transparent;--vdt-ring-inset: ;--vdt-ring-offset-width:0px;--vdt-ring-offset-color:#fff;--vdt-ring-width:0px;--vdt-ring-color:rgba(147,197,253,.5);--vdt-blur: ;--vdt-brightness: ;--vdt-contrast: ;--vdt-drop-shadow: ;--vdt-grayscale: ;--vdt-hue-rotate: ;--vdt-invert: ;--vdt-saturate: ;--vdt-sepia: ;--vdt-backdrop-blur: ;--vdt-backdrop-brightness: ;--vdt-backdrop-contrast: ;--vdt-backdrop-grayscale: ;--vdt-backdrop-hue-rotate: ;--vdt-backdrop-invert: ;--vdt-backdrop-opacity: ;--vdt-backdrop-saturate: ;--vdt-backdrop-sepia: }::backdrop{--vdt-rotate:0;--vdt-rotate-x:0;--vdt-rotate-y:0;--vdt-rotate-z:0;--vdt-scale-x:1;--vdt-scale-y:1;--vdt-scale-z:1;--vdt-skew-x:0;--vdt-skew-y:0;--vdt-translate-x:0;--vdt-translate-y:0;--vdt-translate-z:0;--vdt-pan-x: ;--vdt-pan-y: ;--vdt-pinch-zoom: ;--vdt-scroll-snap-strictness:proximity;--vdt-ordinal: ;--vdt-slashed-zero: ;--vdt-numeric-figure: ;--vdt-numeric-spacing: ;--vdt-numeric-fraction: ;--vdt-border-spacing-x:0;--vdt-border-spacing-y:0;--vdt-ring-offset-shadow:0 0 transparent;--vdt-ring-shadow:0 0 transparent;--vdt-shadow-inset: ;--vdt-shadow:0 0 transparent;--vdt-ring-inset: ;--vdt-ring-offset-width:0px;--vdt-ring-offset-color:#fff;--vdt-ring-width:0px;--vdt-ring-color:rgba(147,197,253,.5);--vdt-blur: ;--vdt-brightness: ;--vdt-contrast: ;--vdt-drop-shadow: ;--vdt-grayscale: ;--vdt-hue-rotate: ;--vdt-invert: ;--vdt-saturate: ;--vdt-sepia: ;--vdt-backdrop-blur: ;--vdt-backdrop-brightness: ;--vdt-backdrop-contrast: ;--vdt-backdrop-grayscale: ;--vdt-backdrop-hue-rotate: ;--vdt-backdrop-invert: ;--vdt-backdrop-opacity: ;--vdt-backdrop-saturate: ;--vdt-backdrop-sepia: }.container{width:100%}.border-base{--vdt-border-opacity:.13;border-color:rgba(136,136,136,var(--vdt-border-opacity))}.bg-glass{--vdt-backdrop-blur:blur(5px);backdrop-filter:var(--vdt-backdrop-blur)var(--vdt-backdrop-brightness)var(--vdt-backdrop-contrast)var(--vdt-backdrop-grayscale)var(--vdt-backdrop-hue-rotate)var(--vdt-backdrop-invert)var(--vdt-backdrop-opacity)var(--vdt-backdrop-saturate)var(--vdt-backdrop-sepia);background-color:rgba(255,255,255,.75)}@media (prefers-color-scheme:dark){.bg-glass{background-color:rgba(17,17,17,.75)}}@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}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{top:0;bottom:0;left:0;right:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z--1{z-index:-1}.z-10{z-index:10}.h-5{height:1.25rem}.h-full{height:100%}.w-5{width:1.25rem}.w-full{width:100%}.w-max{width:max-content}.flex{display:flex}.rotate-270{--vdt-rotate-x:0;--vdt-rotate-y:0;--vdt-rotate-z:0;--vdt-rotate:270deg;transform:translateX(var(--vdt-translate-x))translateY(var(--vdt-translate-y))translateZ(var(--vdt-translate-z))rotate(var(--vdt-rotate))rotateX(var(--vdt-rotate-x))rotateY(var(--vdt-rotate-y))rotateZ(var(--vdt-rotate-z))skewX(var(--vdt-skew-x))skewY(var(--vdt-skew-y))scaleX(var(--vdt-scale-x))scaleY(var(--vdt-scale-y))scaleZ(var(--vdt-scale-z))}.scale-120{--vdt-scale-x:1.2;--vdt-scale-y:1.2;transform:translateX(var(--vdt-translate-x))translateY(var(--vdt-translate-y))translateZ(var(--vdt-translate-z))rotate(var(--vdt-rotate))rotateX(var(--vdt-rotate-x))rotateY(var(--vdt-rotate-y))rotateZ(var(--vdt-rotate-z))skewX(var(--vdt-skew-x))skewY(var(--vdt-skew-y))scaleX(var(--vdt-scale-x))scaleY(var(--vdt-scale-y))scaleZ(var(--vdt-scale-z))}.hover\\:scale-120:hover{--vdt-scale-x:1.2;--vdt-scale-y:1.2;transform:translateX(var(--vdt-translate-x))translateY(var(--vdt-translate-y))translateZ(var(--vdt-translate-z))rotate(var(--vdt-rotate))rotateX(var(--vdt-rotate-x))rotateY(var(--vdt-rotate-y))rotateZ(var(--vdt-rotate-z))skewX(var(--vdt-skew-x))skewY(var(--vdt-skew-y))scaleX(var(--vdt-scale-x))scaleY(var(--vdt-scale-y))scaleZ(var(--vdt-scale-z))}.transform{transform:translateX(var(--vdt-translate-x))translateY(var(--vdt-translate-y))translateZ(var(--vdt-translate-z))rotate(var(--vdt-rotate))rotateX(var(--vdt-rotate-x))rotateY(var(--vdt-rotate-y))rotateZ(var(--vdt-rotate-z))skewX(var(--vdt-skew-x))skewY(var(--vdt-skew-y))scaleX(var(--vdt-scale-x))scaleY(var(--vdt-scale-y))scaleZ(var(--vdt-scale-z))}.select-none{user-select:none}.resize{resize:both}.items-center{align-items:center}.justify-center{justify-content:center}.border{border-width:1px}.rounded{-webkit-border-radius:.25rem;border-radius:.25rem}.rounded-lg{-webkit-border-radius:.5rem;border-radius:.5rem}.rounded-xl{-webkit-border-radius:.75rem;border-radius:.75rem}.hover\\:bg-\\[\\#8881\\]:hover{--vdt-bg-opacity:.07;background-color:rgba(136,136,136,var(--vdt-bg-opacity))}.p1{padding:.25rem}.p1\\.5{padding:.375rem}.px{padding-left:1rem;padding-right:1rem}.px2{padding-left:.5rem;padding-right:.5rem}.text-xs{font-size:.75rem;line-height:1rem}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.op50{opacity:.5}.opacity-0{opacity:0}.opacity-100{opacity:1}.group:hover .group-hover\\:opacity-100{opacity:1}.shadow{--vdt-shadow:var(--vdt-shadow-inset)0 1px 3px 0 var(--vdt-shadow-color,rgba(0,0,0,.1)),var(--vdt-shadow-inset)0 1px 2px -1px var(--vdt-shadow-color,rgba(0,0,0,.1));box-shadow:var(--vdt-ring-offset-shadow),var(--vdt-ring-shadow),var(--vdt-shadow)}.saturate-0{--vdt-saturate:saturate(0);filter:var(--vdt-blur)var(--vdt-brightness)var(--vdt-contrast)var(--vdt-drop-shadow)var(--vdt-grayscale)var(--vdt-hue-rotate)var(--vdt-invert)var(--vdt-saturate)var(--vdt-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-300{transition-duration:.3s}";
-
-//#endregion
-//#region src/client/webcomponents/components/DockIcon.vue
-const _hoisted_1$2 = ["src", "alt"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-	__name: "DockIcon",
-	props: {
-		icon: {},
-		title: {}
-	},
-	setup(__props) {
-		function getIconUrl(str, color) {
-			if (str.includes("/")) return str;
-			const match = str.match(/^([\w-]+):([\w-]+)$/);
-			if (match) {
-				const [, collection, icon] = match;
-				return `https://api.iconify.design/${collection}/${icon}.svg${color === "dark" ? "?color=%23eee" : "?color=%23111"}`;
-			}
-			return str;
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("img", {
-				src: getIconUrl(__props.icon, "dark"),
-				alt: __props.title,
-				draggable: "false"
-			}, null, 8, _hoisted_1$2);
-		};
-	}
-});
-var DockIcon_default = _sfc_main$7;
-
-//#endregion
-//#region src/client/webcomponents/components/DockEntries.vue
-const _hoisted_1$1 = { class: "vite-devtools-dock-entries flex items-center w-full h-full justify-center transition-opacity duration-300" };
-const _hoisted_2 = ["title", "onClick"];
-const _hoisted_3 = { class: "vite-devtools-dock-label text-xs group-hover:opacity-100 opacity-0 transition-opacity duration-300 w-max bg-glass border border-base z-10 rounded px2 absolute p1" };
+import { B as withDirectives, C as createElementBlock, E as createVNode, F as renderSlot, G as toRefs, H as reactive, I as useTemplateRef, J as normalizeStyle, K as unref, L as watch, M as onUnmounted, N as openBlock, O as defineComponent, R as watchEffect, S as createCommentVNode, U as ref, V as markRaw, _ as Fragment, a as useScreenSafeArea, b as createBaseVNode, f as defineCustomElement, g as withModifiers, j as onMounted, k as h, l as watchDebounced, m as vShow, n as useElementBounding, q as normalizeClass, r as useEventListener, s as useWindowSize, x as createBlock, y as computed, z as withCtx } from "../dist-3NIYLDlS.js";
+import { _ as useDocksEntries, f as useDocksOverflowPanel, g as sharedStateToRef, h as createDockEntryState, l as setDocksOverflowPanel, m as DEFAULT_DOCK_PANEL_STORE, n as filterPopupDockEntry, r as isDockPopupEntryVisible, s as useIsDockPopupOpen, t as closeDockPopup, x as BUILTIN_ENTRY_CLIENT_AUTH_NOTICE, y as docksSplitGroupsWithCapacity } from "../popup-EDv_a9nQ.js";
+import { c as _sfc_main$7, d as css_default, l as _sfc_main$8, n as _sfc_main$10, o as PersistedDomHolder, r as _sfc_main$9, s as PersistedDomViewsManager, t as _sfc_main$11, u as openDockContextMenu } from "../ToastOverlay-BVErqkif.js";
+import { n as VitePlusCore_default, r as export_helper_default } from "../DockIcon-Jbdv1CYn.js";
+//#region src/client/webcomponents/components/DockOverflowButton.vue
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-	__name: "DockEntries",
+	__name: "DockOverflowButton",
 	props: {
-		selected: {},
+		context: {},
 		isVertical: { type: Boolean },
-		entries: {}
+		groups: {},
+		selected: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { selected, isVertical, entries } = toRefs(props);
-		function toggleDockEntry(dock) {
-			if (selected.value?.id === dock.id) emit("select", void 0);
-			else emit("select", dock);
+		const overflowButton = useTemplateRef("overflowButton");
+		const overflowBadge = computed(() => {
+			const count = props.groups.reduce((acc, [_, items]) => acc + items.length, 0);
+			if (count > 9) return "9+";
+			return count.toString();
+		});
+		const isOverflowPanelVisible = ref(false);
+		const docksOverflowPanel = useDocksOverflowPanel();
+		function showOverflowPanel() {
+			if (!overflowButton.value) return;
+			isOverflowPanelVisible.value = true;
+			setDocksOverflowPanel({
+				content: () => h("div", { class: "flex gap-0 flex-wrap max-w-220px" }, [h(_sfc_main$7, {
+					context: props.context,
+					groups: props.groups,
+					isVertical: false,
+					selected: props.selected,
+					onSelect: (e) => emit("select", e)
+				})]),
+				el: overflowButton.value
+			});
+		}
+		watchDebounced(() => docksOverflowPanel.value, (value) => {
+			isOverflowPanelVisible.value = !!value;
+		}, { debounce: 1e3 });
+		function toggleOverflowPanel() {
+			if (isOverflowPanelVisible.value) hideOverflowPanel();
+			else showOverflowPanel();
+		}
+		function hideOverflowPanel() {
+			isOverflowPanelVisible.value = false;
+			setDocksOverflowPanel(null);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(entries), (dock) => {
-				return openBlock(), createElementBlock("div", {
-					key: dock.id,
-					class: "relative group vite-devtools-dock-entry"
-				}, [createBaseVNode("button", {
-					title: dock.title,
-					class: normalizeClass([[unref(isVertical) ? "rotate-270" : "", unref(selected) ? unref(selected).id !== dock.id ? "op50 saturate-0" : "scale-120" : ""], "flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"]),
-					onClick: ($event) => toggleDockEntry(dock)
-				}, [createVNode(DockIcon_default, {
-					icon: dock.icon,
-					title: dock.title,
-					class: "w-5 h-5 select-none"
-				}, null, 8, ["icon", "title"])], 10, _hoisted_2), createBaseVNode("div", _hoisted_3, toDisplayString(dock.title), 1)]);
-			}), 128))]);
+			return openBlock(), createElementBlock("div", {
+				ref_key: "overflowButton",
+				ref: overflowButton
+			}, [createVNode(_sfc_main$8, {
+				context: __props.context,
+				dock: {
+					id: "overflow",
+					title: "Overflow",
+					icon: "ph:dots-three-circle-duotone"
+				},
+				class: "overflow-button",
+				tooltip: false,
+				badge: overflowBadge.value,
+				"is-vertical": __props.isVertical,
+				"is-selected": false,
+				"is-dimmed": false,
+				onClick: toggleOverflowPanel
+			}, null, 8, [
+				"context",
+				"badge",
+				"is-vertical"
+			])], 512);
 		};
 	}
 });
-var DockEntries_default = _sfc_main$6;
-
+//#endregion
+//#region src/client/webcomponents/components/icons/BracketLeft.vue
+const _sfc_main$5 = {};
+const _hoisted_1$2 = {
+	viewBox: "0 0 9 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+function _sfc_render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [createBaseVNode("path", {
+		d: "M4.95763 0C1.02563 5.628 1.00263 14.351 4.95763 20H7.61363C3.65963 14.35 3.68363 5.627 7.61363 0H4.95763Z",
+		class: "fill-black dark:fill-white"
+	}, null, -1)])]);
+}
+var BracketLeft_default = /* @__PURE__ */ export_helper_default(_sfc_main$5, [["render", _sfc_render$1]]);
+//#endregion
+//#region src/client/webcomponents/components/icons/BracketRight.vue
+const _sfc_main$4 = {};
+const _hoisted_1$1 = {
+	viewBox: "0 0 9 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createBaseVNode("path", {
+		d: "M4.246 10H6.903C6.902 6.407 5.913 2.816 3.946 0H1.29C3.256 2.816 4.244 6.407 4.246 10ZM8.935 14.907H6.27C6.46624 14.1665 6.61752 13.4148 6.723 12.656H4.066C3.96052 13.4148 3.80924 14.1665 3.613 14.907H0.944C0.703507 15.8176 0.387753 16.7067 0 17.565H2.669C2.2859 18.4179 1.82388 19.2331 1.289 20H3.945C4.47988 19.2331 4.9419 18.4179 5.325 17.565H7.99C8.376 16.714 8.691 15.823 8.935 14.907Z",
+		class: "fill-black dark:fill-white"
+	}, null, -1)])]);
+}
+var BracketRight_default = /* @__PURE__ */ export_helper_default(_sfc_main$4, [["render", _sfc_render]]);
 //#endregion
 //#region src/client/webcomponents/components/Dock.vue
-const PANEL_MARGIN = 5;
+const _hoisted_1 = {
+	key: 0,
+	class: "i-fluent-emoji-flat-warning absolute bottom-0 right--1px w-1.5 h-1.5"
+};
+const _hoisted_2 = { class: "flex items-center gap-1" };
+const PANEL_MARGIN = 2;
 const SNAP_THRESHOLD = 2;
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 	__name: "Dock",
-	props: /* @__PURE__ */ mergeModels({
-		state: {},
-		docks: {}
-	}, {
-		"isDragging": {
-			type: Boolean,
-			default: false
-		},
-		"isDraggingModifiers": {}
-	}),
-	emits: ["update:isDragging"],
+	props: { context: {} },
 	setup(__props) {
-		const { state, docks } = toRefs(__props);
-		const isDragging = useModel(__props, "isDragging");
+		const context = __props.context;
 		const isSafari = navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome");
 		const panelMargins = reactive({
 			left: PANEL_MARGIN,
@@ -115,6 +139,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 		});
 		const dockEl = useTemplateRef("dockEl");
 		const anchorEl = useTemplateRef("anchorEl");
+		const recalculateCounter = ref(0);
+		const isHovering = ref(false);
 		const windowSize = reactive({
 			width: window.innerWidth,
 			height: window.innerHeight
@@ -129,12 +155,28 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 		});
 		function onPointerDown(e) {
 			if (!dockEl.value) return;
-			isDragging.value = true;
+			context.panel.isDragging = true;
 			const { left, top, width, height } = dockEl.value.getBoundingClientRect();
 			draggingOffset.x = e.clientX - left - width / 2;
 			draggingOffset.y = e.clientY - top - height / 2;
 		}
-		onMounted(() => {
+		const isRpcTrusted = ref(context.rpc.isTrusted);
+		context.rpc.events.on("rpc:is-trusted:updated", (isTrusted) => {
+			isRpcTrusted.value = isTrusted;
+			if (isTrusted && context.docks.selected?.id === BUILTIN_ENTRY_CLIENT_AUTH_NOTICE.id) context.docks.switchEntry(null);
+		});
+		const isPopupEntryVisible = computed(() => isDockPopupEntryVisible(context.clientType));
+		const groupedEntries = computed(() => {
+			if (isPopupEntryVisible.value) return context.docks.groupedEntries;
+			return filterPopupDockEntry(context.docks.groupedEntries);
+		});
+		const splitEntries = computed(() => {
+			return docksSplitGroupsWithCapacity(groupedEntries.value, 5);
+		});
+		const selectedEntry = computed(() => {
+			return context.docks.selected;
+		});
+		onMounted(async () => {
 			windowSize.width = window.innerWidth;
 			windowSize.height = window.innerHeight;
 			useEventListener(window, "resize", () => {
@@ -142,7 +184,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 				windowSize.height = window.innerHeight;
 			});
 			useEventListener(window, "pointermove", (e) => {
-				if (!isDragging.value) return;
+				if (!context.panel.isDragging) return;
+				const store = context.panel.store;
 				const centerX = window.innerWidth / 2;
 				const centerY = window.innerHeight / 2;
 				const x = e.clientX - draggingOffset.x;
@@ -156,15 +199,15 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 				const TR = Math.atan2(0 - centerY + HORIZONTAL_MARGIN, window.innerWidth - centerX);
 				const BL = Math.atan2(window.innerHeight - HORIZONTAL_MARGIN - centerY, 0 - centerX);
 				const BR = Math.atan2(window.innerHeight - HORIZONTAL_MARGIN - centerY, window.innerWidth - centerX);
-				state.value.position = deg >= TL && deg <= TR ? "top" : deg >= TR && deg <= BR ? "right" : deg >= BR && deg <= BL ? "bottom" : "left";
-				state.value.left = snapToPoints(x / window.innerWidth * 100);
-				state.value.top = snapToPoints(y / window.innerHeight * 100);
+				store.position = deg >= TL && deg <= TR ? "top" : deg >= TR && deg <= BR ? "right" : deg >= BR && deg <= BL ? "bottom" : "left";
+				store.left = snapToPoints(x / window.innerWidth * 100);
+				store.top = snapToPoints(y / window.innerHeight * 100);
 			});
 			useEventListener(window, "pointerup", () => {
-				isDragging.value = false;
+				context.panel.isDragging = false;
 			});
 			useEventListener(window, "pointerleave", () => {
-				isDragging.value = false;
+				context.panel.isDragging = false;
 			});
 		});
 		function snapToPoints(value) {
@@ -176,16 +219,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 		function clamp(value, min, max) {
 			return Math.min(Math.max(value, min), max);
 		}
-		const recalculateCounter = ref(0);
-		const isHovering = ref(false);
-		const isVertical = computed(() => state.value.position === "left" || state.value.position === "right");
 		const anchorPos = computed(() => {
 			recalculateCounter.value;
+			const store = context.panel.store;
 			const halfWidth = (dockEl.value?.clientWidth || 0) / 2;
 			const halfHeight = (dockEl.value?.clientHeight || 0) / 2;
-			const left = state.value.left * windowSize.width / 100;
-			const top = state.value.top * windowSize.height / 100;
-			switch (state.value.position) {
+			const left = store.left * windowSize.width / 100;
+			const top = store.top * windowSize.height / 100;
+			switch (store.position) {
 				case "top": return {
 					left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
 					top: panelMargins.top + halfHeight
@@ -198,7 +239,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 					left: panelMargins.left + halfHeight,
 					top: clamp(top, halfWidth + panelMargins.top, windowSize.height - halfWidth - panelMargins.bottom)
 				};
-				case "bottom":
 				default: return {
 					left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
 					top: windowSize.height - panelMargins.bottom - halfHeight
@@ -208,18 +248,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 		let _timer = null;
 		function bringUp() {
 			isHovering.value = true;
-			if (state.value.minimizePanelInactive < 0) return;
+			if (context.panel.store.inactiveTimeout < 0) return;
 			if (_timer) clearTimeout(_timer);
 			_timer = setTimeout(() => {
 				isHovering.value = false;
-			}, +state.value.minimizePanelInactive || 0);
+			}, +context.panel.store.inactiveTimeout || 0);
 		}
 		const isHidden = computed(() => false);
 		const isMinimized = computed(() => {
-			if (state.value.minimizePanelInactive < 0) return false;
-			if (state.value.minimizePanelInactive === 0) return true;
+			if (context.panel.store.inactiveTimeout < 0) return false;
+			if (context.panel.store.inactiveTimeout === 0) return true;
 			const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-			return !isDragging.value && !state.value.open && !isHovering.value && !isTouchDevice && state.value.minimizePanelInactive;
+			return !context.panel.isDragging && !context.panel.store.open && !isHovering.value && !isTouchDevice && context.panel.store.inactiveTimeout;
 		});
 		const anchorStyle = computed(() => {
 			return {
@@ -229,32 +269,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 			};
 		});
 		const panelStyle = computed(() => {
-			const style = { transform: isVertical.value ? `translate(-50%, -50%) rotate(90deg)` : `translate(-50%, -50%)` };
+			const style = { transform: context.panel.isVertical ? `translate(-50%, -50%) rotate(90deg)` : `translate(-50%, -50%)` };
 			if (isHidden.value) {
 				style.opacity = 0;
 				style.pointerEvents = "none";
 			}
-			if (isDragging.value) style.transition = "none !important";
+			if (context.panel.isDragging) style.transition = "none !important";
 			return style;
 		});
-		function importScript(entry) {
-			return import(
-				/* @vite-ignore */
-				entry.importFrom
-).then((module) => {
-				return module[entry.importName || "default"];
-			}).catch((error) => {
-				console.error("[VITE DEVTOOLS] Error importing action", error);
-				return Promise.reject(error);
-			});
-		}
-		function onSelected(entry) {
-			if (entry?.type === "action") return importScript(entry.import).then((fn) => fn());
-			state.value.dockEntry = entry;
-			if ("import" in entry && entry.import) importScript(entry.import);
-		}
 		onMounted(() => {
-			bringUp();
+			if (context.panel.store.open && !isRpcTrusted.value) context.panel.store.open = false;
+			if (isRpcTrusted.value) bringUp();
 			recalculateCounter.value++;
 		});
 		return (_ctx, _cache) => {
@@ -263,18 +288,24 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 				ref_key: "anchorEl",
 				ref: anchorEl,
 				style: normalizeStyle([anchorStyle.value]),
-				class: normalizeClass({
-					"vite-devtools-horizontal": !isVertical.value,
-					"vite-devtools-vertical": isVertical.value,
+				class: normalizeClass([{
+					"vite-devtools-horizontal": !unref(context).panel.isVertical,
+					"vite-devtools-vertical": unref(context).panel.isVertical,
 					"vite-devtools-minimized": isMinimized.value
-				}),
+				}, "color-base"]),
 				onMousemove: bringUp
 			}, [
 				!unref(isSafari) ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					id: "vite-devtools-glowing",
-					style: normalizeStyle(isDragging.value ? "opacity: 0.6 !important" : "")
-				}, null, 4)) : createCommentVNode("v-if", true),
+					class: normalizeClass(unref(context).panel.isDragging ? "op60!" : "")
+				}, null, 2)) : createCommentVNode("v-if", true),
+				renderSlot(_ctx.$slots, "default", {
+					context: unref(context),
+					dockEl: dockEl.value,
+					selected: unref(context).docks.selected,
+					panelMargins
+				}),
 				createBaseVNode("div", {
 					id: "vite-devtools-dock-container",
 					ref_key: "dockEl",
@@ -283,71 +314,76 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 				}, [createBaseVNode("div", {
 					id: "vite-devtools-dock",
 					onPointerdown: onPointerDown
-				}, [createVNode(DockEntries_default, {
-					entries: unref(docks),
-					class: normalizeClass(isMinimized.value ? "opacity-0" : "opacity-100"),
-					"is-vertical": isVertical.value,
-					selected: unref(state).dockEntry,
-					onSelect: onSelected
-				}, null, 8, [
-					"entries",
-					"class",
-					"is-vertical",
-					"selected"
-				])], 32)], 4),
-				renderSlot(_ctx.$slots, "default", {
-					dockEl: dockEl.value,
-					panelMargins,
-					state: unref(state),
-					entry: unref(state).dockEntry
-				})
+				}, [
+					createVNode(BracketLeft_default, { class: "vite-devtools-dock-bracket absolute left--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75 transition-opacity duration-300" }),
+					createVNode(BracketRight_default, { class: normalizeClass(["vite-devtools-dock-bracket absolute right--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75 transition-opacity duration-300", unref(context).panel.isVertical ? "scale-y--100" : ""]) }, null, 8, ["class"]),
+					createBaseVNode("div", { class: normalizeClass(["w-3 h-3 absolute left-1/2 top-1/2 translate-x--1/2 translate-y--1/2 transition-opacity duration-300", [isMinimized.value ? "op100" : "op0", unref(context).panel.isVertical ? "rotate-270" : "rotate-0"]]) }, [createVNode(VitePlusCore_default), !isRpcTrusted.value ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true)], 2),
+					!isRpcTrusted.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["transition duration-300 delay-200", isMinimized.value ? "opacity-0 pointer-events-none ws-nowrap text-sm text-orange of-hidden" : "opacity-100"])
+					}, [createBaseVNode("button", {
+						class: "p2 transition hover:bg-active rounded-full px4",
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(context).docks.toggleEntry(unref(BUILTIN_ENTRY_CLIENT_AUTH_NOTICE).id))
+					}, [createBaseVNode("div", _hoisted_2, [createBaseVNode("div", { class: normalizeClass(["i-fluent-emoji-flat-warning flex-none", unref(context).panel.isVertical ? "rotate-270" : "rotate-0"]) }, null, 2), _cache[3] || (_cache[3] = createBaseVNode("div", { class: "ws-nowrap text-amber" }, " Unauthorized ", -1))])])], 2)) : createCommentVNode("v-if", true),
+					createBaseVNode("div", { class: normalizeClass([isMinimized.value ? "opacity-0 pointer-events-none" : "opacity-100", "transition duration-200 flex items-center w-full h-full justify-center px3"]) }, [createVNode(_sfc_main$7, {
+						context: unref(context),
+						groups: splitEntries.value.visible,
+						"is-vertical": unref(context).panel.isVertical,
+						selected: selectedEntry.value,
+						onSelect: _cache[1] || (_cache[1] = (e) => unref(context).docks.switchEntry(e?.id))
+					}, null, 8, [
+						"context",
+						"groups",
+						"is-vertical",
+						"selected"
+					]), splitEntries.value.overflow.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[4] || (_cache[4] = createBaseVNode("div", { class: "border-base m1 h-20px w-px border-r-1.5" }, null, -1)), createVNode(_sfc_main$6, {
+						context: unref(context),
+						"is-vertical": unref(context).panel.isVertical,
+						groups: splitEntries.value.overflow,
+						selected: selectedEntry.value,
+						onSelect: _cache[2] || (_cache[2] = (e) => unref(context).docks.switchEntry(e?.id))
+					}, null, 8, [
+						"context",
+						"is-vertical",
+						"groups",
+						"selected"
+					])], 64)) : createCommentVNode("v-if", true)], 2)
+				], 32)], 4)
 			], 38);
 		};
 	}
 });
-var Dock_default = _sfc_main$5;
-
 //#endregion
 //#region src/client/webcomponents/components/DockPanelResizer.vue
 const PANEL_MIN = 20;
 const PANEL_MAX = 100;
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 	__name: "DockPanelResizer",
-	props: /* @__PURE__ */ mergeModels({
-		state: {},
-		isDragging: { type: Boolean }
-	}, {
-		"isResizing": {
-			type: Boolean,
-			default: false
-		},
-		"isResizingModifiers": {}
-	}),
-	emits: ["update:isResizing"],
+	props: { panel: {} },
 	setup(__props) {
 		const props = __props;
-		const isResizing = useModel(__props, "isResizing");
-		const { state } = toRefs$1(props);
-		const container = ref();
+		const topHandle = useTemplateRef("topHandle");
+		const container = computed(() => topHandle.value?.parentElement);
 		const resizingState = ref(false);
 		function handleResize(e) {
 			if (!resizingState.value) return;
 			const box = container.value?.getBoundingClientRect();
 			if (!box) return;
+			const store = props.panel.store;
 			let widthPx, heightPx;
 			if (resizingState.value.right) {
 				widthPx = Math.abs(e instanceof MouseEvent ? e.clientX : (e.touches[0]?.clientX || 0) - (box?.left || 0));
-				state.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, widthPx / window.innerWidth * 100));
+				store.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, widthPx / window.innerWidth * 100));
 			} else if (resizingState.value.left) {
 				widthPx = Math.abs((box?.right || 0) - (e instanceof MouseEvent ? e.clientX : e.touches[0]?.clientX || 0));
-				state.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, widthPx / window.innerWidth * 100));
+				store.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, widthPx / window.innerWidth * 100));
 			}
 			if (resizingState.value.top) {
 				heightPx = Math.abs((box?.bottom || 0) - (e instanceof MouseEvent ? e.clientY : e.touches[0]?.clientY || 0));
-				state.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, heightPx / window.innerHeight * 100));
+				store.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, heightPx / window.innerHeight * 100));
 			} else if (resizingState.value.bottom) {
 				heightPx = Math.abs(e instanceof MouseEvent ? e.clientY : (e.touches[0]?.clientY || 0) - (box?.top || 0));
-				state.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, heightPx / window.innerHeight * 100));
+				store.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, heightPx / window.innerHeight * 100));
 			}
 		}
 		useEventListener(window, "mousemove", handleResize);
@@ -356,40 +392,37 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 		useEventListener(window, "touchend", () => resizingState.value = false);
 		useEventListener(window, "mouseleave", () => resizingState.value = false);
 		watch(resizingState, (value) => {
-			isResizing.value = !!value;
+			props.panel.isResizing = !!value;
 		}, { flush: "sync" });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				id: "vite-devtools-resize-container",
-				ref_key: "container",
-				ref: container,
-				class: "w-full h-full absolute left-0 right-0 bottom-0 top-0 antialiased"
-			}, [
+			return openBlock(), createElementBlock(Fragment, null, [
 				createCommentVNode(" Handlers "),
 				withDirectives(createBaseVNode("div", {
+					ref_key: "topHandle",
+					ref: topHandle,
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-horizontal",
 					style: { top: 0 },
 					onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => resizingState.value = { top: true }, ["prevent"])),
 					onTouchstartPassive: _cache[1] || (_cache[1] = () => resizingState.value = { top: true })
-				}, null, 544), [[vShow, unref(state).position !== "top"]]),
+				}, null, 544), [[vShow, __props.panel.store.position !== "top"]]),
 				withDirectives(createBaseVNode("div", {
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-horizontal",
 					style: { bottom: 0 },
 					onMousedown: _cache[2] || (_cache[2] = withModifiers(() => resizingState.value = { bottom: true }, ["prevent"])),
 					onTouchstartPassive: _cache[3] || (_cache[3] = () => resizingState.value = { bottom: true })
-				}, null, 544), [[vShow, unref(state).position !== "bottom"]]),
+				}, null, 544), [[vShow, __props.panel.store.position !== "bottom"]]),
 				withDirectives(createBaseVNode("div", {
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-vertical",
 					style: { left: 0 },
 					onMousedown: _cache[4] || (_cache[4] = withModifiers(() => resizingState.value = { left: true }, ["prevent"])),
 					onTouchstartPassive: _cache[5] || (_cache[5] = () => resizingState.value = { left: true })
-				}, null, 544), [[vShow, unref(state).position !== "left"]]),
+				}, null, 544), [[vShow, __props.panel.store.position !== "left"]]),
 				withDirectives(createBaseVNode("div", {
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-vertical",
 					style: { right: 0 },
 					onMousedown: _cache[6] || (_cache[6] = withModifiers(() => resizingState.value = { right: true }, ["prevent"])),
 					onTouchstartPassive: _cache[7] || (_cache[7] = () => resizingState.value = { right: true })
-				}, null, 544), [[vShow, unref(state).position !== "right"]]),
+				}, null, 544), [[vShow, __props.panel.store.position !== "right"]]),
 				withDirectives(createBaseVNode("div", {
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
 					style: {
@@ -405,7 +438,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 						top: true,
 						left: true
 					})
-				}, null, 544), [[vShow, unref(state).position !== "top" && unref(state).position !== "left"]]),
+				}, null, 544), [[vShow, __props.panel.store.position !== "top" && __props.panel.store.position !== "left"]]),
 				withDirectives(createBaseVNode("div", {
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
 					style: {
@@ -421,7 +454,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 						top: true,
 						right: true
 					})
-				}, null, 544), [[vShow, unref(state).position !== "top" && unref(state).position !== "right"]]),
+				}, null, 544), [[vShow, __props.panel.store.position !== "top" && __props.panel.store.position !== "right"]]),
 				withDirectives(createBaseVNode("div", {
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
 					style: {
@@ -437,7 +470,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 						bottom: true,
 						left: true
 					})
-				}, null, 544), [[vShow, unref(state).position !== "bottom" && unref(state).position !== "left"]]),
+				}, null, 544), [[vShow, __props.panel.store.position !== "bottom" && __props.panel.store.position !== "left"]]),
 				withDirectives(createBaseVNode("div", {
 					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
 					style: {
@@ -453,197 +486,56 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 						bottom: true,
 						right: true
 					})
-				}, null, 544), [[vShow, unref(state).position !== "bottom" && unref(state).position !== "right"]])
-			], 512);
+				}, null, 544), [[vShow, __props.panel.store.position !== "bottom" && __props.panel.store.position !== "right"]])
+			], 64);
 		};
 	}
 });
-var DockPanelResizer_default = _sfc_main$4;
-
-//#endregion
-//#region src/client/webcomponents/components/IframeManager.ts
-var IframeManager = class {
-	iframes = {};
-	container = void 0;
-	constructor() {}
-	setContainer(container) {
-		this.container = container;
-	}
-	getIframeHolder(id) {
-		let iframe;
-		if (!this.iframes[id]) {
-			const el = document.createElement("iframe");
-			this.iframes[id] = new IframeHolder(id, el);
-			this.container.appendChild(el);
-			iframe = this.iframes[id];
-		} else iframe = this.iframes[id];
-		return iframe;
-	}
-};
-var IframeHolder = class {
-	iframe;
-	id;
-	parent;
-	_cleanups = [];
-	constructor(id, iframe) {
-		this.id = id;
-		this.iframe = iframe;
-	}
-	cleanup() {
-		this._cleanups.forEach((cleanup) => cleanup());
-		this._cleanups = [];
-	}
-	mount(parent) {
-		if (this.parent === parent) {
-			this.show();
-			return;
-		}
-		this.cleanup();
-		this.parent = parent;
-		const func = () => this.update();
-		window.addEventListener("resize", func);
-		this._cleanups.push(() => window.removeEventListener("resize", func));
-		this.show();
-	}
-	hide() {
-		this.iframe.style.display = "none";
-	}
-	show() {
-		this.iframe.style.display = "block";
-		this.update();
-	}
-	update() {
-		if (!this.parent) return;
-		const rect = this.parent.getBoundingClientRect();
-		this.iframe.style.position = "absolute";
-		this.iframe.style.width = `${rect.width}px`;
-		this.iframe.style.height = `${rect.height}px`;
-	}
-	unmount() {
-		this.cleanup();
-		this.hide();
-		this.parent = void 0;
-	}
-};
-
-//#endregion
-//#region src/client/webcomponents/components/ViewIframe.vue
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-	__name: "ViewIframe",
-	props: {
-		state: {},
-		isDragging: { type: Boolean },
-		isResizing: { type: Boolean },
-		entry: {},
-		iframes: {},
-		iframeStyle: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const viewFrame = useTemplateRef("viewFrame");
-		onMounted(() => {
-			const holder = props.iframes.getIframeHolder(props.entry.id);
-			holder.iframe.style.boxShadow = "none";
-			holder.iframe.style.outline = "none";
-			Object.assign(holder.iframe.style, props.iframeStyle);
-			if (!holder.iframe.src) holder.iframe.src = props.entry.url;
-			holder.mount(viewFrame.value);
-			nextTick(() => {
-				holder.update();
-			});
-			watch(() => props.state, () => {
-				holder.update();
-			}, { deep: true });
-			watchEffect(() => {
-				holder.iframe.style.pointerEvents = props.isDragging || props.isResizing ? "none" : "auto";
-			}, { flush: "sync" });
-		});
-		onUnmounted(() => {
-			props.iframes.getIframeHolder(props.entry.id).unmount();
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "viewFrame",
-				ref: viewFrame,
-				class: "vite-devtools-view-iframe w-full h-full flex items-center justify-center"
-			}, [..._cache[0] || (_cache[0] = [createBaseVNode("div", { class: "op50 z--1" }, " Loading iframe... ", -1)])], 512);
-		};
-	}
-});
-var ViewIframe_default = _sfc_main$3;
-
-//#endregion
-//#region src/client/webcomponents/components/ViewEntry.vue
-const _hoisted_1 = { key: 1 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-	__name: "ViewEntry",
-	props: {
-		state: {},
-		isDragging: { type: Boolean },
-		isResizing: { type: Boolean },
-		entry: {},
-		iframes: {},
-		iframeStyle: {}
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return __props.entry.type === "iframe" ? (openBlock(), createBlock(ViewIframe_default, {
-				key: 0,
-				state: __props.state,
-				"is-dragging": __props.isDragging,
-				"is-resizing": __props.isResizing,
-				entry: __props.entry,
-				iframes: __props.iframes,
-				"iframe-style": __props.iframeStyle
-			}, null, 8, [
-				"state",
-				"is-dragging",
-				"is-resizing",
-				"entry",
-				"iframes",
-				"iframe-style"
-			])) : (openBlock(), createElementBlock("div", _hoisted_1, " Unknown entry: " + toDisplayString(__props.entry), 1));
-		};
-	}
-});
-var ViewEntry_default = _sfc_main$2;
-
 //#endregion
 //#region src/client/webcomponents/components/DockPanel.vue
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 	__name: "DockPanel",
 	props: {
-		state: {},
-		entry: {},
+		context: {},
+		selected: {},
 		dockEl: {},
 		panelMargins: {}
 	},
 	setup(__props) {
 		const props = __props;
-		const { state, entry, panelMargins } = toRefs(props);
-		const dockPanel = useTemplateRef("dockPanel");
-		const iframesContainer = useTemplateRef("iframesContainer");
-		const iframes = markRaw(new IframeManager());
-		watchEffect(() => {
-			iframes.setContainer(iframesContainer.value);
-		}, { flush: "sync" });
+		const context = props.context;
+		const { selected, panelMargins } = toRefs(props);
 		const windowSize = reactive(useWindowSize());
-		const isDragging = ref(false);
-		const isResizing = ref(false);
 		const isHovering = ref(false);
 		const mousePosition = reactive({
 			x: 0,
 			y: 0
 		});
+		const dockPanel = useTemplateRef("dockPanel");
+		const viewsContainer = useTemplateRef("viewsContainer");
+		const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer));
 		function clamp(value, min, max) {
 			return Math.min(Math.max(value, min), max);
 		}
+		function openContextMenu(e) {
+			if (!dockPanel.value) return;
+			const entry = selected.value;
+			if (!entry) return;
+			e.preventDefault();
+			openDockContextMenu({
+				context,
+				entry,
+				el: dockPanel.value,
+				gap: 6
+			});
+		}
 		const anchorPos = computed(() => {
 			const halfWidth = (props.dockEl?.clientWidth || 0) / 2;
 			const halfHeight = (props.dockEl?.clientHeight || 0) / 2;
-			const left = state.value.left * windowSize.width / 100;
-			const top = state.value.top * windowSize.height / 100;
-			switch (state.value.position) {
+			const store = context.panel.store;
+			const left = store.left * windowSize.width / 100;
+			const top = store.top * windowSize.height / 100;
+			switch (store.position) {
 				case "top": return {
 					left: clamp(left, halfWidth + panelMargins.value.left, windowSize.width - halfWidth - panelMargins.value.right),
 					top: panelMargins.value.top + halfHeight
@@ -656,7 +548,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 					left: panelMargins.value.left + halfHeight,
 					top: clamp(top, halfWidth + panelMargins.value.top, windowSize.height - halfWidth - panelMargins.value.bottom)
 				};
-				case "bottom":
 				default: return {
 					left: clamp(left, halfWidth + panelMargins.value.left, windowSize.width - halfWidth - panelMargins.value.right),
 					top: windowSize.height - panelMargins.value.bottom - halfHeight
@@ -666,14 +557,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		let _timer = null;
 		function bringUp() {
 			isHovering.value = true;
-			if (state.value.minimizePanelInactive < 0) return;
+			if (context.panel.store.inactiveTimeout < 0) return;
 			if (_timer) clearTimeout(_timer);
 			_timer = setTimeout(() => {
 				isHovering.value = false;
-			}, +state.value.minimizePanelInactive || 0);
+			}, +context.panel.store.inactiveTimeout || 0);
 		}
 		const { width: frameWidth, height: frameHeight } = useElementBounding(dockPanel);
-		const iframeStyle = computed(() => {
+		const panelStyle = computed(() => {
 			mousePosition.x, mousePosition.y;
 			const halfHeight = (props.dockEl?.clientHeight || 0) / 2;
 			const frameMargin = {
@@ -686,19 +577,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			const marginVertical = frameMargin.top + frameMargin.bottom;
 			const maxWidth = windowSize.width - marginHorizontal;
 			const maxHeight = windowSize.height - marginVertical;
+			const panel = context.panel;
+			const store = panel.store;
 			const style = {
 				position: "fixed",
-				zIndex: -1,
-				pointerEvents: isDragging.value || isResizing.value ? "none" : "auto",
-				width: `min(${state.value.width}vw, calc(100vw - ${marginHorizontal}px))`,
-				height: `min(${state.value.height}vh, calc(100vh - ${marginVertical}px))`
+				pointerEvents: panel.isDragging || panel.isResizing ? "none" : "auto",
+				width: `min(${store.width}vw, calc(100vw - ${marginHorizontal}px))`,
+				height: `min(${store.height}vh, calc(100vh - ${marginVertical}px))`
 			};
 			const anchor = anchorPos.value;
-			const width = Math.min(maxWidth, state.value.width * windowSize.width / 100);
-			const height = Math.min(maxHeight, state.value.height * windowSize.height / 100);
+			const width = Math.min(maxWidth, store.width * windowSize.width / 100);
+			const height = Math.min(maxHeight, store.height * windowSize.height / 100);
 			const anchorX = anchor?.left || 0;
 			const anchorY = anchor?.top || 0;
-			switch (state.value.position) {
+			switch (store.position) {
 				case "top":
 				case "bottom":
 					style.left = `${-frameWidth.value / 2}px`;
@@ -714,7 +606,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 					else if (windowSize.height - anchorY - frameMargin.bottom < height / 2) style.top = `${windowSize.height - anchorY - height / 2 - frameMargin.bottom - frameHeight.value / 2}px`;
 					break;
 			}
-			switch (state.value.position) {
+			switch (store.position) {
 				case "top":
 					style.top = 0;
 					break;
@@ -724,7 +616,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 				case "left":
 					style.left = 0;
 					break;
-				case "bottom":
 				default:
 					style.bottom = 0;
 					break;
@@ -736,95 +627,86 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", {
-				id: "vite-devtools-dock-panel",
 				ref_key: "dockPanel",
 				ref: dockPanel,
-				class: "bg-glass rounded-lg border border-base shadow",
-				style: normalizeStyle(iframeStyle.value)
+				class: "bg-glass:75 rounded-lg border border-base color-base shadow overflow-hidden",
+				style: normalizeStyle(panelStyle.value),
+				onContextmenu: openContextMenu
 			}, [
-				createVNode(DockPanelResizer_default, {
-					"is-resizing": isResizing.value,
-					"onUpdate:isResizing": _cache[0] || (_cache[0] = ($event) => isResizing.value = $event),
-					"is-dragging": isDragging.value,
-					state: unref(state),
-					entry: unref(entry)
-				}, null, 8, [
-					"is-resizing",
-					"is-dragging",
-					"state",
-					"entry"
-				]),
-				unref(entry) && iframesContainer.value ? (openBlock(), createBlock(ViewEntry_default, {
-					key: unref(entry).id,
-					state: unref(state),
-					"is-dragging": isDragging.value,
-					"is-resizing": isResizing.value,
-					entry: unref(entry),
-					iframes: unref(iframes),
+				createVNode(_sfc_main$2, { panel: unref(context).panel }, null, 8, ["panel"]),
+				unref(selected) && viewsContainer.value ? (openBlock(), createBlock(_sfc_main$9, {
+					key: unref(selected).id,
+					context: unref(context),
+					entry: unref(selected),
+					"persisted-doms": unref(persistedDoms),
 					"iframe-style": {
 						border: "1px solid #8883",
-						borderRadius: "0.5rem",
-						zIndex: "2147483645"
-					},
-					rounded: ""
+						borderRadius: "0.5rem"
+					}
 				}, null, 8, [
-					"state",
-					"is-dragging",
-					"is-resizing",
+					"context",
 					"entry",
-					"iframes"
+					"persisted-doms"
 				])) : createCommentVNode("v-if", true),
 				createBaseVNode("div", {
-					id: "vite-devtools-iframe-container",
-					ref_key: "iframesContainer",
-					ref: iframesContainer,
-					class: "absolute inset-0"
+					id: "vite-devtools-views-container",
+					ref_key: "viewsContainer",
+					ref: viewsContainer,
+					class: "absolute inset-0 pointer-events-none"
 				}, null, 512)
-			], 4)), [[vShow, unref(entry)]]);
+			], 36)), [[vShow, unref(context).docks.selected && unref(context).docks.selected.type !== "action"]]);
 		};
 	}
 });
-var DockPanel_default = _sfc_main$1;
-
 //#endregion
-//#region src/client/webcomponents/components/DockEmbedded.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
+//#region src/client/webcomponents/components/DockEmbedded.ts
+const DockEmbedded = defineCustomElement(/* @__PURE__ */ defineComponent({
 	__name: "DockEmbedded",
-	props: {
-		state: {},
-		docks: {}
-	},
+	props: { context: {} },
 	setup(__props) {
+		const props = __props;
+		const isDockPopupOpen = useIsDockPopupOpen();
+		const settings = sharedStateToRef(props.context.docks.settings);
+		useEventListener(window, "mousedown", (e) => {
+			if (!settings.value.closeOnOutsideClick) return;
+			if (isDockPopupOpen.value) return;
+			if (!props.context.panel.store.open || props.context.panel.isDragging || props.context.panel.isResizing) return;
+			if (!e.composedPath().find((_el) => {
+				const el = _el;
+				return [...el.classList || []].some((c) => c.startsWith("vite-devtools-")) || el.id?.startsWith("vite-devtools-") || el.tagName?.toLowerCase() === "iframe";
+			})) props.context.docks.switchEntry(null);
+		});
+		onUnmounted(() => {
+			closeDockPopup();
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Dock_default, {
-				state: __props.state,
-				docks: __props.docks
-			}, {
-				default: withCtx(({ dockEl, entry, panelMargins }) => [createVNode(DockPanel_default, {
-					"dock-el": dockEl,
-					state: __props.state,
-					"panel-margins": panelMargins,
-					entry
-				}, null, 8, [
-					"dock-el",
-					"state",
-					"panel-margins",
-					"entry"
-				])]),
-				_: 1
-			}, 8, ["state", "docks"]);
+			return openBlock(), createElementBlock(Fragment, null, [
+				!unref(isDockPopupOpen) ? (openBlock(), createBlock(_sfc_main$3, {
+					key: 0,
+					context: __props.context
+				}, {
+					default: withCtx(({ dockEl, panelMargins, selected }) => [createVNode(_sfc_main$1, {
+						context: __props.context,
+						selected,
+						"dock-el": dockEl,
+						"panel-margins": panelMargins
+					}, null, 8, [
+						"context",
+						"selected",
+						"dock-el",
+						"panel-margins"
+					])]),
+					_: 1
+				}, 8, ["context"])) : createCommentVNode("v-if", true),
+				!unref(isDockPopupOpen) ? (openBlock(), createBlock(_sfc_main$10, { key: 1 })) : createCommentVNode("v-if", true),
+				createVNode(_sfc_main$11, { context: __props.context }, null, 8, ["context"])
+			], 64);
 		};
 	}
-});
-var DockEmbedded_default = _sfc_main;
-
-//#endregion
-//#region src/client/webcomponents/components/DockEmbedded.ts
-const DockEmbedded = defineCustomElement(DockEmbedded_default, {
+}), {
 	shadowRoot: true,
 	styles: [css_default]
 });
 customElements.define("vite-devtools-dock-embedded", DockEmbedded);
-
 //#endregion
-export { DockEmbedded, IframeHolder, IframeManager };
+export { DEFAULT_DOCK_PANEL_STORE, DockEmbedded, PersistedDomHolder, PersistedDomViewsManager, createDockEntryState, sharedStateToRef, useDocksEntries };