@vitejs/devtools 0.0.0-alpha.1 → 0.0.0-alpha.3

package/dist/client/webcomponents.js

@@ -0,0 +1,807 @@
+import { Fragment, computed, createBaseVNode, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, defineCustomElement, markRaw, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, toRefs as toRefs$1, toRefs$1 as toRefs, unref, useElementBounding, useEventListener, useModel, useScreenSafeArea, useTemplateRef, useWindowSize, vShow, watch, watchEffect, withCtx, withDirectives, withModifiers } from "../core-uTAXYiA1.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{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;--un-border-opacity:.13;border-width:1px;border-color:rgba(136,136,136,var(--un-border-opacity));--un-backdrop-blur:blur(5px);min-width:100%;height:100%;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);--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));--un-shadow:var(--un-shadow-inset)0 1px 3px 0 var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset)0 1px 2px -1px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);background-color:rgba(255,255,255,.75);-webkit-border-radius:9999px;border-radius:9999px;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;--un-blur:blur(60px);width:160px;height:160px;filter:var(--un-blur)var(--un-brightness)var(--un-contrast)var(--un-drop-shadow)var(--un-grayscale)var(--un-hue-rotate)var(--un-invert)var(--un-saturate)var(--un-sepia);background-image:linear-gradient(45deg,#00dc82,#00dc82,#00dc82);-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{--un-translate-x:-50%;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));bottom:-1.75rem;left:50%}.vite-devtools-vertical .vite-devtools-dock-label{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:270deg;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));bottom:-2.5rem}*{--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: }.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)}@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-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{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:270deg;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))}.scale-120{--un-scale-x:1.2;--un-scale-y:1.2;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))}.hover\\:scale-120:hover{--un-scale-x:1.2;--un-scale-y:1.2;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))}.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{--un-bg-opacity:.07;background-color:rgba(136,136,136,var(--un-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{--un-shadow:var(--un-shadow-inset)0 1px 3px 0 var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset)0 1px 2px -1px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.saturate-0{--un-saturate:saturate(0);filter:var(--un-blur)var(--un-brightness)var(--un-contrast)var(--un-drop-shadow)var(--un-grayscale)var(--un-hue-rotate)var(--un-invert)var(--un-saturate)var(--un-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/DockEntries.vue?vue&type=script&setup=true&lang.ts
+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 = ["src", "alt"];
+const _hoisted_4 = { 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" };
+var DockEntries_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DockEntries",
+	props: {
+		selected: {},
+		isVertical: { type: Boolean },
+		entries: {}
+	},
+	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);
+		}
+		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)
+				}, [createBaseVNode("img", {
+					src: dock.icon,
+					alt: dock.title,
+					class: "w-5 h-5 select-none",
+					draggable: "false"
+				}, null, 8, _hoisted_3)], 10, _hoisted_2), createBaseVNode("div", _hoisted_4, toDisplayString(dock.title), 1)]);
+			}), 128))]);
+		};
+	}
+});
+
+//#endregion
+//#region src/client/webcomponents/components/DockEntries.vue
+var DockEntries_default = DockEntries_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/client/webcomponents/components/Dock.vue?vue&type=script&setup=true&lang.ts
+const PANEL_MARGIN = 5;
+const SNAP_THRESHOLD = 2;
+var Dock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Dock",
+	props: /* @__PURE__ */ mergeModels({
+		state: {},
+		docks: {}
+	}, {
+		"isDragging": {
+			type: Boolean,
+			default: false
+		},
+		"isDraggingModifiers": {}
+	}),
+	emits: ["update:isDragging"],
+	setup(__props) {
+		const { state, docks } = toRefs(__props);
+		const isDragging = useModel(__props, "isDragging");
+		const isSafari = navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome");
+		const panelMargins = reactive({
+			left: PANEL_MARGIN,
+			top: PANEL_MARGIN,
+			right: PANEL_MARGIN,
+			bottom: PANEL_MARGIN
+		});
+		const safeArea = useScreenSafeArea();
+		function toNumber(value) {
+			const num = +value;
+			if (Number.isNaN(num)) return 0;
+			return num;
+		}
+		watchEffect(() => {
+			panelMargins.left = toNumber(safeArea.left.value) + PANEL_MARGIN;
+			panelMargins.top = toNumber(safeArea.top.value) + PANEL_MARGIN;
+			panelMargins.right = toNumber(safeArea.right.value) + PANEL_MARGIN;
+			panelMargins.bottom = toNumber(safeArea.bottom.value) + PANEL_MARGIN;
+		});
+		const dockEl = useTemplateRef("dockEl");
+		const anchorEl = useTemplateRef("anchorEl");
+		const windowSize = reactive({
+			width: window.innerWidth,
+			height: window.innerHeight
+		});
+		const draggingOffset = reactive({
+			x: 0,
+			y: 0
+		});
+		const mousePosition = reactive({
+			x: 0,
+			y: 0
+		});
+		function onPointerDown(e) {
+			if (!dockEl.value) return;
+			isDragging.value = true;
+			const { left, top, width, height } = dockEl.value.getBoundingClientRect();
+			draggingOffset.x = e.clientX - left - width / 2;
+			draggingOffset.y = e.clientY - top - height / 2;
+		}
+		onMounted(() => {
+			windowSize.width = window.innerWidth;
+			windowSize.height = window.innerHeight;
+			useEventListener(window, "resize", () => {
+				windowSize.width = window.innerWidth;
+				windowSize.height = window.innerHeight;
+			});
+			useEventListener(window, "pointermove", (e) => {
+				if (!isDragging.value) return;
+				const centerX = window.innerWidth / 2;
+				const centerY = window.innerHeight / 2;
+				const x = e.clientX - draggingOffset.x;
+				const y = e.clientY - draggingOffset.y;
+				if (Number.isNaN(x) || Number.isNaN(y)) return;
+				mousePosition.x = x;
+				mousePosition.y = y;
+				const deg = Math.atan2(y - centerY, x - centerX);
+				const HORIZONTAL_MARGIN = 70;
+				const TL = Math.atan2(0 - centerY + HORIZONTAL_MARGIN, 0 - centerX);
+				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);
+			});
+			useEventListener(window, "pointerup", () => {
+				isDragging.value = false;
+			});
+			useEventListener(window, "pointerleave", () => {
+				isDragging.value = false;
+			});
+		});
+		function snapToPoints(value) {
+			if (value < 5) return 0;
+			if (value > 95) return 100;
+			if (Math.abs(value - 50) < SNAP_THRESHOLD) return 50;
+			return value;
+		}
+		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 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) {
+				case "top": return {
+					left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
+					top: panelMargins.top + halfHeight
+				};
+				case "right": return {
+					left: windowSize.width - panelMargins.right - halfHeight,
+					top: clamp(top, halfWidth + panelMargins.top, windowSize.height - halfWidth - panelMargins.bottom)
+				};
+				case "left": return {
+					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
+				};
+			}
+		});
+		let _timer = null;
+		function bringUp() {
+			isHovering.value = true;
+			if (state.value.minimizePanelInactive < 0) return;
+			if (_timer) clearTimeout(_timer);
+			_timer = setTimeout(() => {
+				isHovering.value = false;
+			}, +state.value.minimizePanelInactive || 0);
+		}
+		const isHidden = computed(() => false);
+		const isMinimized = computed(() => {
+			if (state.value.minimizePanelInactive < 0) return false;
+			if (state.value.minimizePanelInactive === 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;
+		});
+		const anchorStyle = computed(() => {
+			return {
+				left: `${anchorPos.value.left}px`,
+				top: `${anchorPos.value.top}px`,
+				pointerEvents: isHidden.value ? "none" : "auto"
+			};
+		});
+		const panelStyle = computed(() => {
+			const style = { transform: isVertical.value ? `translate(-50%, -50%) rotate(90deg)` : `translate(-50%, -50%)` };
+			if (isHidden.value) {
+				style.opacity = 0;
+				style.pointerEvents = "none";
+			}
+			if (isDragging.value) style.transition = "none !important";
+			return style;
+		});
+		onMounted(() => {
+			bringUp();
+			recalculateCounter.value++;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: "vite-devtools-anchor",
+				ref_key: "anchorEl",
+				ref: anchorEl,
+				style: normalizeStyle([anchorStyle.value]),
+				class: normalizeClass({
+					"vite-devtools-horizontal": !isVertical.value,
+					"vite-devtools-vertical": isVertical.value,
+					"vite-devtools-minimized": isMinimized.value
+				}),
+				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),
+				createBaseVNode("div", {
+					id: "vite-devtools-dock-container",
+					ref_key: "dockEl",
+					ref: dockEl,
+					style: normalizeStyle(panelStyle.value)
+				}, [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: _cache[0] || (_cache[0] = (s) => unref(state).dockEntry = s)
+				}, null, 8, [
+					"entries",
+					"class",
+					"is-vertical",
+					"selected"
+				])], 32)], 4),
+				renderSlot(_ctx.$slots, "default", {
+					dockEl: dockEl.value,
+					panelMargins,
+					state: unref(state),
+					entry: unref(state).dockEntry
+				})
+			], 38);
+		};
+	}
+});
+
+//#endregion
+//#region src/client/webcomponents/components/Dock.vue
+var Dock_default = Dock_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/client/webcomponents/components/DockPanelResizer.vue?vue&type=script&setup=true&lang.ts
+const PANEL_MIN = 20;
+const PANEL_MAX = 100;
+var DockPanelResizer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DockPanelResizer",
+	props: /* @__PURE__ */ mergeModels({
+		state: {},
+		isDragging: { type: Boolean }
+	}, {
+		"isResizing": {
+			type: Boolean,
+			default: false
+		},
+		"isResizingModifiers": {}
+	}),
+	emits: ["update:isResizing"],
+	setup(__props) {
+		const props = __props;
+		const isResizing = useModel(__props, "isResizing");
+		const { state } = toRefs$1(props);
+		const container = ref();
+		const resizingState = ref(false);
+		function handleResize(e) {
+			if (!resizingState.value) return;
+			const box = container.value?.getBoundingClientRect();
+			if (!box) return;
+			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));
+			} 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));
+			}
+			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));
+			} 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));
+			}
+		}
+		useEventListener(window, "mousemove", handleResize);
+		useEventListener(window, "touchmove", handleResize);
+		useEventListener(window, "mouseup", () => resizingState.value = false);
+		useEventListener(window, "touchend", () => resizingState.value = false);
+		useEventListener(window, "mouseleave", () => resizingState.value = false);
+		watch(resizingState, (value) => {
+			isResizing.value = !!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"
+			}, [
+				createCommentVNode(" Handlers "),
+				withDirectives(createBaseVNode("div", {
+					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"]]),
+				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"]]),
+				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"]]),
+				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"]]),
+				withDirectives(createBaseVNode("div", {
+					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
+					style: {
+						top: 0,
+						left: 0,
+						cursor: "nwse-resize"
+					},
+					onMousedown: _cache[8] || (_cache[8] = withModifiers(() => resizingState.value = {
+						top: true,
+						left: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[9] || (_cache[9] = () => resizingState.value = {
+						top: true,
+						left: true
+					})
+				}, null, 544), [[vShow, unref(state).position !== "top" && unref(state).position !== "left"]]),
+				withDirectives(createBaseVNode("div", {
+					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
+					style: {
+						top: 0,
+						right: 0,
+						cursor: "nesw-resize"
+					},
+					onMousedown: _cache[10] || (_cache[10] = withModifiers(() => resizingState.value = {
+						top: true,
+						right: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[11] || (_cache[11] = () => resizingState.value = {
+						top: true,
+						right: true
+					})
+				}, null, 544), [[vShow, unref(state).position !== "top" && unref(state).position !== "right"]]),
+				withDirectives(createBaseVNode("div", {
+					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
+					style: {
+						bottom: 0,
+						left: 0,
+						cursor: "nesw-resize"
+					},
+					onMousedown: _cache[12] || (_cache[12] = withModifiers(() => resizingState.value = {
+						bottom: true,
+						left: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[13] || (_cache[13] = () => resizingState.value = {
+						bottom: true,
+						left: true
+					})
+				}, null, 544), [[vShow, unref(state).position !== "bottom" && unref(state).position !== "left"]]),
+				withDirectives(createBaseVNode("div", {
+					class: "vite-devtools-resize-handle vite-devtools-resize-handle-corner",
+					style: {
+						bottom: 0,
+						right: 0,
+						cursor: "nwse-resize"
+					},
+					onMousedown: _cache[14] || (_cache[14] = withModifiers(() => resizingState.value = {
+						bottom: true,
+						right: true
+					}, ["prevent"])),
+					onTouchstartPassive: _cache[15] || (_cache[15] = () => resizingState.value = {
+						bottom: true,
+						right: true
+					})
+				}, null, 544), [[vShow, unref(state).position !== "bottom" && unref(state).position !== "right"]])
+			], 512);
+		};
+	}
+});
+
+//#endregion
+//#region src/client/webcomponents/components/DockPanelResizer.vue
+var DockPanelResizer_default = DockPanelResizer_vue_vue_type_script_setup_true_lang_default;
+
+//#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?vue&type=script&setup=true&lang.ts
+var ViewIframe_vue_vue_type_script_setup_true_lang_default = /* @__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" }, " Loading iframe... ", -1)])], 512);
+		};
+	}
+});
+
+//#endregion
+//#region src/client/webcomponents/components/ViewIframe.vue
+var ViewIframe_default = ViewIframe_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/client/webcomponents/components/ViewEntry.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { key: 1 };
+var ViewEntry_vue_vue_type_script_setup_true_lang_default = /* @__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));
+		};
+	}
+});
+
+//#endregion
+//#region src/client/webcomponents/components/ViewEntry.vue
+var ViewEntry_default = ViewEntry_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/client/webcomponents/components/DockPanel.vue?vue&type=script&setup=true&lang.ts
+var DockPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DockPanel",
+	props: {
+		state: {},
+		entry: {},
+		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 windowSize = reactive(useWindowSize());
+		const isDragging = ref(false);
+		const isResizing = ref(false);
+		const isHovering = ref(false);
+		const mousePosition = reactive({
+			x: 0,
+			y: 0
+		});
+		function clamp(value, min, max) {
+			return Math.min(Math.max(value, min), max);
+		}
+		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) {
+				case "top": return {
+					left: clamp(left, halfWidth + panelMargins.value.left, windowSize.width - halfWidth - panelMargins.value.right),
+					top: panelMargins.value.top + halfHeight
+				};
+				case "right": return {
+					left: windowSize.width - panelMargins.value.right - halfHeight,
+					top: clamp(top, halfWidth + panelMargins.value.top, windowSize.height - halfWidth - panelMargins.value.bottom)
+				};
+				case "left": return {
+					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
+				};
+			}
+		});
+		let _timer = null;
+		function bringUp() {
+			isHovering.value = true;
+			if (state.value.minimizePanelInactive < 0) return;
+			if (_timer) clearTimeout(_timer);
+			_timer = setTimeout(() => {
+				isHovering.value = false;
+			}, +state.value.minimizePanelInactive || 0);
+		}
+		const { width: frameWidth, height: frameHeight } = useElementBounding(dockPanel);
+		const iframeStyle = computed(() => {
+			mousePosition.x, mousePosition.y;
+			const halfHeight = (props.dockEl?.clientHeight || 0) / 2;
+			const frameMargin = {
+				left: panelMargins.value.left + halfHeight,
+				top: panelMargins.value.top + halfHeight,
+				right: panelMargins.value.right + halfHeight,
+				bottom: panelMargins.value.bottom + halfHeight
+			};
+			const marginHorizontal = frameMargin.left + frameMargin.right;
+			const marginVertical = frameMargin.top + frameMargin.bottom;
+			const maxWidth = windowSize.width - marginHorizontal;
+			const maxHeight = windowSize.height - marginVertical;
+			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))`
+			};
+			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 anchorX = anchor?.left || 0;
+			const anchorY = anchor?.top || 0;
+			switch (state.value.position) {
+				case "top":
+				case "bottom":
+					style.left = `${-frameWidth.value / 2}px`;
+					style.transform = "translate(0, 0)";
+					if (anchorX - frameMargin.left < width / 2) style.left = `${width / 2 - anchorX + frameMargin.left - frameWidth.value / 2}px`;
+					else if (windowSize.width - anchorX - frameMargin.right < width / 2) style.left = `${windowSize.width - anchorX - width / 2 - frameMargin.right - frameWidth.value / 2}px`;
+					break;
+				case "right":
+				case "left":
+					style.top = `${-frameHeight.value / 2}px`;
+					style.transform = "translate(0, 0)";
+					if (anchorY - frameMargin.top < height / 2) style.top = `${height / 2 - anchorY + frameMargin.top - frameHeight.value / 2}px`;
+					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) {
+				case "top":
+					style.top = 0;
+					break;
+				case "right":
+					style.right = 0;
+					break;
+				case "left":
+					style.left = 0;
+					break;
+				case "bottom":
+				default:
+					style.bottom = 0;
+					break;
+			}
+			return style;
+		});
+		onMounted(() => {
+			bringUp();
+		});
+		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)
+			}, [
+				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),
+					"iframe-style": {
+						border: "1px solid #8885",
+						borderRadius: "0.5rem",
+						zIndex: "2147483645"
+					},
+					rounded: ""
+				}, null, 8, [
+					"state",
+					"is-dragging",
+					"is-resizing",
+					"entry",
+					"iframes"
+				])) : createCommentVNode("v-if", true),
+				createBaseVNode("div", {
+					id: "vite-devtools-iframe-container",
+					ref_key: "iframesContainer",
+					ref: iframesContainer,
+					class: "absolute inset-0"
+				}, null, 512)
+			], 4)), [[vShow, unref(entry)]]);
+		};
+	}
+});
+
+//#endregion
+//#region src/client/webcomponents/components/DockPanel.vue
+var DockPanel_default = DockPanel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/client/webcomponents/components/DockEmbedded.vue?vue&type=script&setup=true&lang.ts
+var DockEmbedded_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DockEmbedded",
+	props: {
+		state: {},
+		docks: {}
+	},
+	setup(__props) {
+		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"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/client/webcomponents/components/DockEmbedded.vue
+var DockEmbedded_default = DockEmbedded_vue_vue_type_script_setup_true_lang_default;
+
+//#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 };