@qwik.dev/devtools 0.3.0-beta.3 → 2.0.0-beta.45

package/dist/ui/packages/devtools/ui/src/components/DevtoolsPanel/DevtoolsPanel.qwik.mjs

@@ -1,497 +1,400 @@
-import { componentQrl, inlinedQrl, useSignal, useTaskQrl, _captures, isBrowser, useVisibleTaskQrl, _jsxSorted, _fnSignal, Slot } from "@qwik.dev/core";
+import { IconArrowsPointingIn, IconArrowsPointingOut, IconXMark, QwikLogo } from "../Icons/Icons.qwik.mjs";
+import { Slot, _captures, _fnSignal, _jsxSorted, componentQrl, inlinedQrl, isBrowser, useSignal, useTaskQrl, useVisibleTaskQrl } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
-import { QwikLogo, IconArrowsPointingIn, IconArrowsPointingOut, IconXMark } from "../Icons/Icons.qwik.mjs";
-const _hf0 = (p0) => [
-  "border-glass-border/80 flex items-center justify-between border-b px-4 py-3",
-  p0.state.isPanelFullscreen ? "cursor-default" : "cursor-grab"
-];
-const _hf1 = (p0) => p0.state.isPanelFullscreen ? "Fullscreen mode" : "Drag the title bar or resize from any edge";
-const _hf2 = (p0) => p0.state.isPanelFullscreen ? "Restore window" : "Enter fullscreen";
-const WINDOW_MARGIN = 24;
-const COMPACT_MARGIN = 8;
-const DEFAULT_WIDTH = 1180;
-const DEFAULT_HEIGHT = 760;
-const MIN_WIDTH = 320;
-const MIN_HEIGHT = 280;
-const MIN_WIDTH_MD = 520;
-const MIN_HEIGHT_MD = 360;
-const FULLSCREEN_PANEL_STYLE = {
-  left: "0px",
-  top: "0px",
-  width: "100vw",
-  height: "100vh"
+var _hf0 = (p0) => ["border-glass-border/80 flex items-center justify-between border-b px-4 py-3", p0.state.isPanelFullscreen ? "cursor-default" : "cursor-grab"];
+var _hf0_str = "[\"border-glass-border/80 flex items-center justify-between border-b px-4 py-3\",p0.state.isPanelFullscreen?\"cursor-default\":\"cursor-grab\"]";
+var _hf1 = (p0) => p0.state.isPanelFullscreen ? "Fullscreen mode" : "Drag the title bar or resize from any edge";
+var _hf1_str = "p0.state.isPanelFullscreen?\"Fullscreen mode\":\"Drag the title bar or resize from any edge\"";
+var _hf2 = (p0) => p0.state.isPanelFullscreen ? "Restore window" : "Enter fullscreen";
+var _hf2_str = "p0.state.isPanelFullscreen?\"Restore window\":\"Enter fullscreen\"";
+var WINDOW_MARGIN = 24;
+var COMPACT_MARGIN = 8;
+var DEFAULT_WIDTH = 1180;
+var DEFAULT_HEIGHT = 760;
+var MIN_WIDTH = 320;
+var MIN_HEIGHT = 280;
+var MIN_WIDTH_MD = 520;
+var MIN_HEIGHT_MD = 360;
+var FULLSCREEN_PANEL_STYLE = {
+	left: "0px",
+	top: "0px",
+	width: "100vw",
+	height: "100vh"
 };
 function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
+	return Math.min(Math.max(value, min), max);
 }
 function getWindowMargin() {
-  return window.innerWidth < 640 || window.innerHeight < 640 ? COMPACT_MARGIN : WINDOW_MARGIN;
+	return window.innerWidth < 640 || window.innerHeight < 640 ? COMPACT_MARGIN : WINDOW_MARGIN;
 }
 function getMinWidth() {
-  const margin = getWindowMargin();
-  const preferredWidth = window.innerWidth >= 768 ? MIN_WIDTH_MD : MIN_WIDTH;
-  return Math.min(preferredWidth, Math.max(window.innerWidth - margin * 2, 240));
+	const margin = getWindowMargin();
+	const preferredWidth = window.innerWidth >= 768 ? MIN_WIDTH_MD : MIN_WIDTH;
+	return Math.min(preferredWidth, Math.max(window.innerWidth - margin * 2, 240));
 }
 function getMinHeight() {
-  const margin = getWindowMargin();
-  const preferredHeight = window.innerHeight >= 768 ? MIN_HEIGHT_MD : MIN_HEIGHT;
-  return Math.min(preferredHeight, Math.max(window.innerHeight - margin * 2, 220));
+	const margin = getWindowMargin();
+	const preferredHeight = window.innerHeight >= 768 ? MIN_HEIGHT_MD : MIN_HEIGHT;
+	return Math.min(preferredHeight, Math.max(window.innerHeight - margin * 2, 220));
 }
 function getMaxWidth() {
-  const margin = getWindowMargin();
-  return Math.max(window.innerWidth - margin * 2, getMinWidth());
+	const margin = getWindowMargin();
+	return Math.max(window.innerWidth - margin * 2, getMinWidth());
 }
 function getMaxHeight() {
-  const margin = getWindowMargin();
-  return Math.max(window.innerHeight - margin * 2, getMinHeight());
+	const margin = getWindowMargin();
+	return Math.max(window.innerHeight - margin * 2, getMinHeight());
 }
 function normalizeBounds(bounds) {
-  const margin = getWindowMargin();
-  const width = clamp(bounds.width, getMinWidth(), getMaxWidth());
-  const height = clamp(bounds.height, getMinHeight(), getMaxHeight());
-  const maxX = Math.max(margin, window.innerWidth - width - margin);
-  const maxY = Math.max(margin, window.innerHeight - height - margin);
-  return {
-    x: clamp(bounds.x, margin, maxX),
-    y: clamp(bounds.y, margin, maxY),
-    width,
-    height
-  };
+	const margin = getWindowMargin();
+	const width = clamp(bounds.width, getMinWidth(), getMaxWidth());
+	const height = clamp(bounds.height, getMinHeight(), getMaxHeight());
+	const maxX = Math.max(margin, window.innerWidth - width - margin);
+	const maxY = Math.max(margin, window.innerHeight - height - margin);
+	return {
+		x: clamp(bounds.x, margin, maxX),
+		y: clamp(bounds.y, margin, maxY),
+		width,
+		height
+	};
 }
 function createDefaultBounds() {
-  const margin = getWindowMargin();
-  const width = Math.min(DEFAULT_WIDTH, getMaxWidth());
-  const height = Math.min(DEFAULT_HEIGHT, getMaxHeight());
-  return normalizeBounds({
-    x: window.innerWidth - width - margin,
-    y: window.innerHeight - height - margin,
-    width,
-    height
-  });
+	const margin = getWindowMargin();
+	const width = Math.min(DEFAULT_WIDTH, getMaxWidth());
+	const height = Math.min(DEFAULT_HEIGHT, getMaxHeight());
+	return normalizeBounds({
+		x: window.innerWidth - width - margin,
+		y: window.innerHeight - height - margin,
+		width,
+		height
+	});
 }
 function hasValidBounds(bounds) {
-  return bounds.width > 0 && bounds.height > 0 && bounds.x >= 0 && bounds.y >= 0;
+	return bounds.width > 0 && bounds.height > 0 && bounds.x >= 0 && bounds.y >= 0;
 }
 function getInteractionCursor(mode) {
-  switch (mode) {
-    case "drag":
-      return "grabbing";
-    case "n":
-    case "s":
-      return "ns-resize";
-    case "e":
-    case "w":
-      return "ew-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    default:
-      return "";
-  }
+	switch (mode) {
+		case "drag": return "grabbing";
+		case "n":
+		case "s": return "ns-resize";
+		case "e":
+		case "w": return "ew-resize";
+		case "ne":
+		case "sw": return "nesw-resize";
+		case "nw":
+		case "se": return "nwse-resize";
+		default: return "";
+	}
 }
 function resetPointerStyles() {
-  document.body.style.userSelect = "";
-  document.body.style.cursor = "";
+	document.body.style.userSelect = "";
+	document.body.style.cursor = "";
 }
 function updatePanelBounds(panelBounds, state, bounds) {
-  const nextBounds = {
-    ...bounds
-  };
-  panelBounds.value = nextBounds;
-  state.panelBounds.x = nextBounds.x;
-  state.panelBounds.y = nextBounds.y;
-  state.panelBounds.width = nextBounds.width;
-  state.panelBounds.height = nextBounds.height;
+	const nextBounds = { ...bounds };
+	panelBounds.value = nextBounds;
+	state.panelBounds.x = nextBounds.x;
+	state.panelBounds.y = nextBounds.y;
+	state.panelBounds.width = nextBounds.width;
+	state.panelBounds.height = nextBounds.height;
 }
-const DevtoolsPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const interactionMode = useSignal(null);
-  const startMousePosition = useSignal({
-    x: 0,
-    y: 0
-  });
-  const startBounds = useSignal({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const panelBounds = useSignal({
-    ...props.state.panelBounds
-  });
-  const stopInteraction = /* @__PURE__ */ inlinedQrl(() => {
-    const interactionMode2 = _captures[0];
-    interactionMode2.value = null;
-    resetPointerStyles();
-  }, "DevtoolsPanel_component_stopInteraction_FDdPgYv46RA", [
-    interactionMode
-  ]);
-  const handleMouseMove = /* @__PURE__ */ inlinedQrl((event) => {
-    const interactionMode2 = _captures[0], panelBounds2 = _captures[1], props2 = _captures[2], startBounds2 = _captures[3], startMousePosition2 = _captures[4];
-    if (!interactionMode2.value || props2.state.isPanelFullscreen) {
-      return;
-    }
-    const deltaX = event.clientX - startMousePosition2.value.x;
-    const deltaY = event.clientY - startMousePosition2.value.y;
-    if (interactionMode2.value === "drag") {
-      updatePanelBounds(panelBounds2, props2.state, normalizeBounds({
-        ...startBounds2.value,
-        x: startBounds2.value.x + deltaX,
-        y: startBounds2.value.y + deltaY
-      }));
-      return;
-    }
-    const direction = interactionMode2.value;
-    const minWidth = getMinWidth();
-    const minHeight = getMinHeight();
-    const margin = getWindowMargin();
-    let nextX = startBounds2.value.x;
-    let nextY = startBounds2.value.y;
-    let nextWidth = startBounds2.value.width;
-    let nextHeight = startBounds2.value.height;
-    if (direction.includes("e")) {
-      nextWidth = clamp(startBounds2.value.width + deltaX, minWidth, window.innerWidth - startBounds2.value.x - margin);
-    }
-    if (direction.includes("s")) {
-      nextHeight = clamp(startBounds2.value.height + deltaY, minHeight, window.innerHeight - startBounds2.value.y - margin);
-    }
-    if (direction.includes("w")) {
-      const maxX = startBounds2.value.x + startBounds2.value.width - minWidth;
-      nextX = clamp(startBounds2.value.x + deltaX, margin, maxX);
-      nextWidth = startBounds2.value.width - (nextX - startBounds2.value.x);
-    }
-    if (direction.includes("n")) {
-      const maxY = startBounds2.value.y + startBounds2.value.height - minHeight;
-      nextY = clamp(startBounds2.value.y + deltaY, margin, maxY);
-      nextHeight = startBounds2.value.height - (nextY - startBounds2.value.y);
-    }
-    updatePanelBounds(panelBounds2, props2.state, normalizeBounds({
-      x: nextX,
-      y: nextY,
-      width: nextWidth,
-      height: nextHeight
-    }));
-  }, "DevtoolsPanel_component_handleMouseMove_0uKPli0Md6w", [
-    interactionMode,
-    panelBounds,
-    props,
-    startBounds,
-    startMousePosition
-  ]);
-  const handleDragStart = /* @__PURE__ */ inlinedQrl((event) => {
-    const interactionMode2 = _captures[0], panelBounds2 = _captures[1], props2 = _captures[2], startBounds2 = _captures[3], startMousePosition2 = _captures[4];
-    if (event.button !== 0 || props2.state.isPanelFullscreen) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    const normalizedBounds = hasValidBounds(panelBounds2.value) ? normalizeBounds(panelBounds2.value) : createDefaultBounds();
-    updatePanelBounds(panelBounds2, props2.state, normalizedBounds);
-    interactionMode2.value = "drag";
-    startMousePosition2.value = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    startBounds2.value = {
-      ...normalizedBounds
-    };
-    document.body.style.userSelect = "none";
-    document.body.style.cursor = getInteractionCursor("drag");
-  }, "DevtoolsPanel_component_handleDragStart_0ZAsfkQcGjg", [
-    interactionMode,
-    panelBounds,
-    props,
-    startBounds,
-    startMousePosition
-  ]);
-  const handleResizeStart = /* @__PURE__ */ inlinedQrl((direction, event) => {
-    const interactionMode2 = _captures[0], panelBounds2 = _captures[1], props2 = _captures[2], startBounds2 = _captures[3], startMousePosition2 = _captures[4];
-    if (event.button !== 0 || props2.state.isPanelFullscreen) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    const normalizedBounds = hasValidBounds(panelBounds2.value) ? normalizeBounds(panelBounds2.value) : createDefaultBounds();
-    updatePanelBounds(panelBounds2, props2.state, normalizedBounds);
-    interactionMode2.value = direction;
-    startMousePosition2.value = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    startBounds2.value = {
-      ...normalizedBounds
-    };
-    document.body.style.userSelect = "none";
-    document.body.style.cursor = getInteractionCursor(direction);
-  }, "DevtoolsPanel_component_handleResizeStart_YbpFHV5rQFs", [
-    interactionMode,
-    panelBounds,
-    props,
-    startBounds,
-    startMousePosition
-  ]);
-  const handleToggleFullscreen = /* @__PURE__ */ inlinedQrl(() => {
-    const interactionMode2 = _captures[0], panelBounds2 = _captures[1], props2 = _captures[2];
-    if (!isBrowser) {
-      return;
-    }
-    if (props2.state.isPanelFullscreen) {
-      props2.state.isPanelFullscreen = false;
-      updatePanelBounds(panelBounds2, props2.state, normalizeBounds(props2.state.lastPanelBounds ?? createDefaultBounds()));
-      return;
-    }
-    const normalizedBounds = hasValidBounds(panelBounds2.value) ? normalizeBounds(panelBounds2.value) : createDefaultBounds();
-    updatePanelBounds(panelBounds2, props2.state, normalizedBounds);
-    props2.state.lastPanelBounds = {
-      ...normalizedBounds
-    };
-    props2.state.isPanelFullscreen = true;
-    interactionMode2.value = null;
-    resetPointerStyles();
-  }, "DevtoolsPanel_component_handleToggleFullscreen_khraN508E1Y", [
-    interactionMode,
-    panelBounds,
-    props
-  ]);
-  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
-    const props2 = _captures[0];
-    const handleKeyPress = (e) => {
-      if (e.key === "`" && e.metaKey) {
-        props2.state.isOpen = !props2.state.isOpen;
-      }
-      if (e.key === "Escape" && props2.state.isPaletteOpen) {
-        props2.state.isPaletteOpen = false;
-      } else if (e.key === "Escape" && props2.state.isOpen) {
-        props2.state.isOpen = false;
-      }
-    };
-    if (!isBrowser) {
-      return;
-    }
-    window.addEventListener("keydown", handleKeyPress);
-    cleanup(() => {
-      window.removeEventListener("keydown", handleKeyPress);
-    });
-  }, "DevtoolsPanel_component_useTask_m0ftdAGWrnk", [
-    props
-  ]));
-  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
-    const handleMouseMove2 = _captures[0], interactionMode2 = _captures[1], stopInteraction2 = _captures[2];
-    track(() => interactionMode2.value);
-    if (!interactionMode2.value || !isBrowser) {
-      return;
-    }
-    window.addEventListener("mousemove", handleMouseMove2);
-    window.addEventListener("mouseup", stopInteraction2);
-    window.addEventListener("blur", stopInteraction2);
-    cleanup(() => {
-      window.removeEventListener("mousemove", handleMouseMove2);
-      window.removeEventListener("mouseup", stopInteraction2);
-      window.removeEventListener("blur", stopInteraction2);
-      resetPointerStyles();
-    });
-  }, "DevtoolsPanel_component_useTask_1_1lUwmQhVfAc", [
-    handleMouseMove,
-    interactionMode,
-    stopInteraction
-  ]));
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
-    const panelBounds2 = _captures[0], props2 = _captures[1];
-    track(() => props2.state.isOpen);
-    track(() => props2.state.isPanelFullscreen);
-    if (!props2.state.isOpen) {
-      return;
-    }
-    if (!props2.state.isPanelFullscreen) {
-      updatePanelBounds(panelBounds2, props2.state, hasValidBounds(props2.state.panelBounds) ? normalizeBounds(props2.state.panelBounds) : createDefaultBounds());
-    }
-    const handleWindowResize = () => {
-      if (props2.state.isPanelFullscreen) {
-        return;
-      }
-      updatePanelBounds(panelBounds2, props2.state, hasValidBounds(panelBounds2.value) ? normalizeBounds(panelBounds2.value) : createDefaultBounds());
-    };
-    window.addEventListener("resize", handleWindowResize);
-    cleanup(() => {
-      window.removeEventListener("resize", handleWindowResize);
-      resetPointerStyles();
-    });
-  }, "DevtoolsPanel_component_useVisibleTask_5CgtzZ7VIzI", [
-    panelBounds,
-    props
-  ]));
-  const hasBounds = hasValidBounds(panelBounds.value);
-  const panelStyle = props.state.isPanelFullscreen ? FULLSCREEN_PANEL_STYLE : hasBounds ? {
-    left: `${panelBounds.value.x}px`,
-    top: `${panelBounds.value.y}px`,
-    width: `${panelBounds.value.width}px`,
-    height: `${panelBounds.value.height}px`
-  } : {
-    right: `${WINDOW_MARGIN}px`,
-    bottom: `${WINDOW_MARGIN}px`,
-    width: `min(calc(100vw - ${WINDOW_MARGIN * 2}px), ${DEFAULT_WIDTH}px)`,
-    height: `min(calc(100vh - ${WINDOW_MARGIN * 2}px), ${DEFAULT_HEIGHT}px)`
-  };
-  return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
-    /* @__PURE__ */ _jsxSorted("div", {
-      "q-e:mousedown": /* @__PURE__ */ inlinedQrl((_, _1, props2) => {
-        props2.state.isOpen = false;
-      }, "DevtoolsPanel_component_Fragment_div_q_e_mousedown_Yyj4ufBP6gI").m(),
-      "q:p": props
-    }, {
-      class: "fixed inset-0 z-[9990] bg-black/50 backdrop-blur-sm transition-opacity duration-300"
-    }, null, 6, null),
-    /* @__PURE__ */ _jsxSorted("div", {
-      class: [
-        "glass-panel text-foreground fixed z-[9991] flex overflow-hidden border transition-[border-radius,width,height,left,top]",
-        interactionMode.value ? "duration-0" : "duration-200 ease-out",
-        props.state.isPanelFullscreen ? "inset-0 rounded-none" : "rounded-2xl shadow-2xl"
-      ],
-      "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event) => {
-        event.stopPropagation();
-      }, "DevtoolsPanel_component_Fragment_div_q_e_mousedown_1_TccpGpuhI0Q"),
-      style: panelStyle
-    }, null, [
-      !props.state.isPanelFullscreen && /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("n", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_Kpo8QnowZug").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize north",
-          class: "absolute inset-x-4 top-0 z-20 h-2 cursor-ns-resize"
-        }, null, 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("s", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_1_rpnKj8SmWbQ").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize south",
-          class: "absolute inset-x-4 bottom-0 z-20 h-2 cursor-ns-resize"
-        }, null, 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("e", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_2_7pH0bhGUSrQ").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize east",
-          class: "absolute top-4 right-0 bottom-4 z-20 w-2 cursor-ew-resize"
-        }, null, 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("w", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_3_BqRiXxG6CsY").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize west",
-          class: "absolute top-4 bottom-4 left-0 z-20 w-2 cursor-ew-resize"
-        }, null, 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("nw", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_4_azrG92Zn70A").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize northwest",
-          class: "absolute top-0 left-0 z-20 h-4 w-4 cursor-nwse-resize"
-        }, null, 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("ne", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_5_hTShrOzMO2s").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize northeast",
-          class: "absolute top-0 right-0 z-20 h-4 w-4 cursor-nesw-resize"
-        }, null, 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("sw", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_6_ukQTZz0jKXc").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize southwest",
-          class: "absolute bottom-0 left-0 z-20 h-4 w-4 cursor-nesw-resize"
-        }, null, 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event, _1, handleResizeStart2) => handleResizeStart2("se", event), "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_7_eWsKZf7ZlNg").m(),
-          "q:p": handleResizeStart
-        }, {
-          type: "button",
-          "aria-label": "Resize southeast",
-          class: "absolute right-0 bottom-0 z-20 h-4 w-4 cursor-nwse-resize"
-        }, null, 6, null)
-      ], 1, "Qq_0"),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
-      }, [
-        /* @__PURE__ */ _jsxSorted("div", {
-          class: _fnSignal(_hf0, [
-            props
-          ])
-        }, {
-          "q-e:mousedown": handleDragStart,
-          "q-e:dblclick": handleToggleFullscreen
-        }, [
-          /* @__PURE__ */ _jsxSorted("div", null, {
-            class: "flex min-w-0 items-center gap-3"
-          }, [
-            /* @__PURE__ */ _jsxSorted(QwikLogo, null, {
-              title: "Qwik Logo",
-              class: "h-5 w-5 shrink-0"
-            }, null, 3, "Qq_1"),
-            /* @__PURE__ */ _jsxSorted("div", null, {
-              class: "min-w-0"
-            }, [
-              /* @__PURE__ */ _jsxSorted("div", null, {
-                class: "truncate text-sm font-semibold"
-              }, "Qwik DevTools", 3, null),
-              /* @__PURE__ */ _jsxSorted("div", null, {
-                class: "text-muted-foreground truncate text-xs"
-              }, _fnSignal(_hf1, [
-                props
-              ]), 1, null)
-            ], 1, null)
-          ], 1, null),
-          /* @__PURE__ */ _jsxSorted("div", {
-            "q-e:mousedown": /* @__PURE__ */ inlinedQrl((event) => {
-              event.stopPropagation();
-            }, "DevtoolsPanel_component_Fragment_div_div_div_div_q_e_mousedown_4Q09AHNKYqo")
-          }, {
-            class: "flex items-center gap-2"
-          }, [
-            /* @__PURE__ */ _jsxSorted("button", {
-              "aria-label": _fnSignal(_hf2, [
-                props
-              ])
-            }, {
-              type: "button",
-              class: "bg-card-item-bg hover:bg-card-item-hover-bg border-glass-border text-muted-foreground hover:text-foreground flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border shadow-sm backdrop-blur-md transition-all hover:scale-105 active:scale-95",
-              "q-e:click": handleToggleFullscreen
-            }, props.state.isPanelFullscreen ? /* @__PURE__ */ _jsxSorted(IconArrowsPointingIn, null, {
-              class: "h-4 w-4"
-            }, null, 3, "Qq_2") : /* @__PURE__ */ _jsxSorted(IconArrowsPointingOut, null, {
-              class: "h-4 w-4"
-            }, null, 3, "Qq_3"), 1, null),
-            /* @__PURE__ */ _jsxSorted("button", {
-              "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, props2) => {
-                props2.state.isOpen = false;
-              }, "DevtoolsPanel_component_Fragment_div_div_div_div_button_q_e_click_wy3qFhRhsTU").m(),
-              "q:p": props
-            }, {
-              type: "button",
-              "aria-label": "Close devtools",
-              class: "bg-card-item-bg hover:bg-card-item-hover-bg border-glass-border text-muted-foreground hover:text-foreground flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border shadow-sm backdrop-blur-md transition-all hover:scale-105 active:scale-95"
-            }, /* @__PURE__ */ _jsxSorted(IconXMark, null, {
-              class: "h-5 w-5"
-            }, null, 3, "Qq_4"), 4, null)
-          ], 0, null)
-        ], 1, null),
-        /* @__PURE__ */ _jsxSorted("div", null, {
-          class: "flex min-h-0 min-w-0 flex-1 overflow-hidden"
-        }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Qq_5"), 1, null)
-      ], 1, null)
-    ], 0, null)
-  ], 1, "Qq_6");
+var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	const interactionMode = useSignal(null);
+	const startMousePosition = useSignal({
+		x: 0,
+		y: 0
+	});
+	const startBounds = useSignal({
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	});
+	const panelBounds = useSignal({ ...props.state.panelBounds });
+	const stopInteraction = /*#__PURE__*/ inlinedQrl(() => {
+		const interactionMode = _captures[0];
+		interactionMode.value = null;
+		resetPointerStyles();
+	}, "DevtoolsPanel_component_stopInteraction_FDdPgYv46RA", [interactionMode]);
+	const handleMouseMove = /*#__PURE__*/ inlinedQrl((event) => {
+		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2], startBounds = _captures[3], startMousePosition = _captures[4];
+		if (!interactionMode.value || props.state.isPanelFullscreen) return;
+		const deltaX = event.clientX - startMousePosition.value.x;
+		const deltaY = event.clientY - startMousePosition.value.y;
+		if (interactionMode.value === "drag") {
+			updatePanelBounds(panelBounds, props.state, normalizeBounds({
+				...startBounds.value,
+				x: startBounds.value.x + deltaX,
+				y: startBounds.value.y + deltaY
+			}));
+			return;
+		}
+		const direction = interactionMode.value;
+		const minWidth = getMinWidth();
+		const minHeight = getMinHeight();
+		const margin = getWindowMargin();
+		let nextX = startBounds.value.x;
+		let nextY = startBounds.value.y;
+		let nextWidth = startBounds.value.width;
+		let nextHeight = startBounds.value.height;
+		if (direction.includes("e")) nextWidth = clamp(startBounds.value.width + deltaX, minWidth, window.innerWidth - startBounds.value.x - margin);
+		if (direction.includes("s")) nextHeight = clamp(startBounds.value.height + deltaY, minHeight, window.innerHeight - startBounds.value.y - margin);
+		if (direction.includes("w")) {
+			const maxX = startBounds.value.x + startBounds.value.width - minWidth;
+			nextX = clamp(startBounds.value.x + deltaX, margin, maxX);
+			nextWidth = startBounds.value.width - (nextX - startBounds.value.x);
+		}
+		if (direction.includes("n")) {
+			const maxY = startBounds.value.y + startBounds.value.height - minHeight;
+			nextY = clamp(startBounds.value.y + deltaY, margin, maxY);
+			nextHeight = startBounds.value.height - (nextY - startBounds.value.y);
+		}
+		updatePanelBounds(panelBounds, props.state, normalizeBounds({
+			x: nextX,
+			y: nextY,
+			width: nextWidth,
+			height: nextHeight
+		}));
+	}, "DevtoolsPanel_component_handleMouseMove_0uKPli0Md6w", [
+		interactionMode,
+		panelBounds,
+		props,
+		startBounds,
+		startMousePosition
+	]);
+	const handleDragStart = /*#__PURE__*/ inlinedQrl((event) => {
+		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2], startBounds = _captures[3], startMousePosition = _captures[4];
+		if (event.button !== 0 || props.state.isPanelFullscreen) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const normalizedBounds = hasValidBounds(panelBounds.value) ? normalizeBounds(panelBounds.value) : createDefaultBounds();
+		updatePanelBounds(panelBounds, props.state, normalizedBounds);
+		interactionMode.value = "drag";
+		startMousePosition.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		startBounds.value = { ...normalizedBounds };
+		document.body.style.userSelect = "none";
+		document.body.style.cursor = getInteractionCursor("drag");
+	}, "DevtoolsPanel_component_handleDragStart_0ZAsfkQcGjg", [
+		interactionMode,
+		panelBounds,
+		props,
+		startBounds,
+		startMousePosition
+	]);
+	const handleResizeStart = /*#__PURE__*/ inlinedQrl((direction, event) => {
+		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2], startBounds = _captures[3], startMousePosition = _captures[4];
+		if (event.button !== 0 || props.state.isPanelFullscreen) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const normalizedBounds = hasValidBounds(panelBounds.value) ? normalizeBounds(panelBounds.value) : createDefaultBounds();
+		updatePanelBounds(panelBounds, props.state, normalizedBounds);
+		interactionMode.value = direction;
+		startMousePosition.value = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		startBounds.value = { ...normalizedBounds };
+		document.body.style.userSelect = "none";
+		document.body.style.cursor = getInteractionCursor(direction);
+	}, "DevtoolsPanel_component_handleResizeStart_YbpFHV5rQFs", [
+		interactionMode,
+		panelBounds,
+		props,
+		startBounds,
+		startMousePosition
+	]);
+	const handleToggleFullscreen = /*#__PURE__*/ inlinedQrl(() => {
+		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2];
+		if (!isBrowser) return;
+		if (props.state.isPanelFullscreen) {
+			props.state.isPanelFullscreen = false;
+			updatePanelBounds(panelBounds, props.state, normalizeBounds(props.state.lastPanelBounds ?? createDefaultBounds()));
+			return;
+		}
+		const normalizedBounds = hasValidBounds(panelBounds.value) ? normalizeBounds(panelBounds.value) : createDefaultBounds();
+		updatePanelBounds(panelBounds, props.state, normalizedBounds);
+		props.state.lastPanelBounds = { ...normalizedBounds };
+		props.state.isPanelFullscreen = true;
+		interactionMode.value = null;
+		resetPointerStyles();
+	}, "DevtoolsPanel_component_handleToggleFullscreen_khraN508E1Y", [
+		interactionMode,
+		panelBounds,
+		props
+	]);
+	useTaskQrl(/*#__PURE__*/ inlinedQrl(({ cleanup }) => {
+		const props = _captures[0];
+		const handleKeyPress = (e) => {
+			if (e.key === "`" && e.metaKey) props.state.isOpen = !props.state.isOpen;
+			if (e.key === "Escape" && props.state.isPaletteOpen) props.state.isPaletteOpen = false;
+			else if (e.key === "Escape" && props.state.isOpen) props.state.isOpen = false;
+		};
+		if (!isBrowser) return;
+		window.addEventListener("keydown", handleKeyPress);
+		cleanup(() => {
+			window.removeEventListener("keydown", handleKeyPress);
+		});
+	}, "DevtoolsPanel_component_useTask_m0ftdAGWrnk", [props]));
+	useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
+		const handleMouseMove = _captures[0], interactionMode = _captures[1], stopInteraction = _captures[2];
+		track(() => interactionMode.value);
+		if (!interactionMode.value || !isBrowser) return;
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", stopInteraction);
+		window.addEventListener("blur", stopInteraction);
+		cleanup(() => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", stopInteraction);
+			window.removeEventListener("blur", stopInteraction);
+			resetPointerStyles();
+		});
+	}, "DevtoolsPanel_component_useTask_1_1lUwmQhVfAc", [
+		handleMouseMove,
+		interactionMode,
+		stopInteraction
+	]));
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
+		const panelBounds = _captures[0], props = _captures[1];
+		track(() => props.state.isOpen);
+		track(() => props.state.isPanelFullscreen);
+		if (!props.state.isOpen) return;
+		if (!props.state.isPanelFullscreen) updatePanelBounds(panelBounds, props.state, hasValidBounds(props.state.panelBounds) ? normalizeBounds(props.state.panelBounds) : createDefaultBounds());
+		const handleWindowResize = () => {
+			if (props.state.isPanelFullscreen) return;
+			updatePanelBounds(panelBounds, props.state, hasValidBounds(panelBounds.value) ? normalizeBounds(panelBounds.value) : createDefaultBounds());
+		};
+		window.addEventListener("resize", handleWindowResize);
+		cleanup(() => {
+			window.removeEventListener("resize", handleWindowResize);
+			resetPointerStyles();
+		});
+	}, "DevtoolsPanel_component_useVisibleTask_5CgtzZ7VIzI", [panelBounds, props]));
+	const hasBounds = hasValidBounds(panelBounds.value);
+	const panelStyle = props.state.isPanelFullscreen ? FULLSCREEN_PANEL_STYLE : hasBounds ? {
+		left: `${panelBounds.value.x}px`,
+		top: `${panelBounds.value.y}px`,
+		width: `${panelBounds.value.width}px`,
+		height: `${panelBounds.value.height}px`
+	} : {
+		right: `${WINDOW_MARGIN}px`,
+		bottom: `${WINDOW_MARGIN}px`,
+		width: `min(calc(100vw - 48px), ${DEFAULT_WIDTH}px)`,
+		height: `min(calc(100vh - 48px), ${DEFAULT_HEIGHT}px)`
+	};
+	return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted("div", null, {
+		class: "fixed inset-0 z-[9990] bg-black/50 backdrop-blur-sm transition-opacity duration-300",
+		"q-e:mousedown": /*#__PURE__*/ inlinedQrl(() => {
+			const props = _captures[0];
+			props.state.isOpen = false;
+		}, "DevtoolsPanel_component_Fragment_div_q_e_mousedown_Yyj4ufBP6gI", [props])
+	}, null, 3, null), /*#__PURE__*/ _jsxSorted("div", {
+		class: [
+			"glass-panel text-foreground fixed z-[9991] flex overflow-hidden border transition-[border-radius,width,height,left,top]",
+			interactionMode.value ? "duration-0" : "duration-200 ease-out",
+			props.state.isPanelFullscreen ? "inset-0 rounded-none" : "rounded-2xl shadow-2xl"
+		],
+		style: panelStyle
+	}, { "q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+		event.stopPropagation();
+	}, "DevtoolsPanel_component_Fragment_div_q_e_mousedown_1_TccpGpuhI0Q") }, [!props.state.isPanelFullscreen && /*#__PURE__*/ _jsxSorted(Fragment, null, null, [
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize north",
+			class: "absolute inset-x-4 top-0 z-20 h-2 cursor-ns-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("n", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_Kpo8QnowZug", [handleResizeStart])
+		}, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize south",
+			class: "absolute inset-x-4 bottom-0 z-20 h-2 cursor-ns-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("s", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_1_rpnKj8SmWbQ", [handleResizeStart])
+		}, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize east",
+			class: "absolute top-4 right-0 bottom-4 z-20 w-2 cursor-ew-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("e", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_2_7pH0bhGUSrQ", [handleResizeStart])
+		}, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize west",
+			class: "absolute top-4 bottom-4 left-0 z-20 w-2 cursor-ew-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("w", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_3_BqRiXxG6CsY", [handleResizeStart])
+		}, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize northwest",
+			class: "absolute top-0 left-0 z-20 h-4 w-4 cursor-nwse-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("nw", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_4_azrG92Zn70A", [handleResizeStart])
+		}, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize northeast",
+			class: "absolute top-0 right-0 z-20 h-4 w-4 cursor-nesw-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("ne", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_5_hTShrOzMO2s", [handleResizeStart])
+		}, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize southwest",
+			class: "absolute bottom-0 left-0 z-20 h-4 w-4 cursor-nesw-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("sw", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_6_ukQTZz0jKXc", [handleResizeStart])
+		}, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"aria-label": "Resize southeast",
+			class: "absolute right-0 bottom-0 z-20 h-4 w-4 cursor-nwse-resize",
+			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+				const handleResizeStart = _captures[0];
+				return handleResizeStart("se", event);
+			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_7_eWsKZf7ZlNg", [handleResizeStart])
+		}, null, 3, null)
+	], 3, "YV_0"), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden" }, [/*#__PURE__*/ _jsxSorted("div", { class: _fnSignal(_hf0, [props], _hf0_str) }, {
+		"q-e:mousedown": handleDragStart,
+		"q-e:dblclick": handleToggleFullscreen
+	}, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-w-0 items-center gap-3" }, [/*#__PURE__*/ _jsxSorted(QwikLogo, null, {
+		title: "Qwik Logo",
+		class: "h-5 w-5 shrink-0"
+	}, null, 3, "YV_1"), /*#__PURE__*/ _jsxSorted("div", null, { class: "min-w-0" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "truncate text-sm font-semibold" }, "Qwik DevTools", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground truncate text-xs" }, _fnSignal(_hf1, [props], _hf1_str), 1, null)], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "flex items-center gap-2",
+		"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
+			event.stopPropagation();
+		}, "DevtoolsPanel_component_Fragment_div_div_div_div_q_e_mousedown_4Q09AHNKYqo")
+	}, [/*#__PURE__*/ _jsxSorted("button", { "aria-label": _fnSignal(_hf2, [props], _hf2_str) }, {
+		type: "button",
+		class: "bg-card-item-bg hover:bg-card-item-hover-bg border-glass-border text-muted-foreground hover:text-foreground flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border shadow-sm backdrop-blur-md transition-all hover:scale-105 active:scale-95",
+		"q-e:click": handleToggleFullscreen
+	}, props.state.isPanelFullscreen ? /*#__PURE__*/ _jsxSorted(IconArrowsPointingIn, null, { class: "h-4 w-4" }, null, 3, "YV_2") : /*#__PURE__*/ _jsxSorted(IconArrowsPointingOut, null, { class: "h-4 w-4" }, null, 3, "YV_3"), 1, null), /*#__PURE__*/ _jsxSorted("button", null, {
+		type: "button",
+		"aria-label": "Close devtools",
+		class: "bg-card-item-bg hover:bg-card-item-hover-bg border-glass-border text-muted-foreground hover:text-foreground flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border shadow-sm backdrop-blur-md transition-all hover:scale-105 active:scale-95",
+		"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+			const props = _captures[0];
+			props.state.isOpen = false;
+		}, "DevtoolsPanel_component_Fragment_div_div_div_div_button_q_e_click_wy3qFhRhsTU", [props])
+	}, /*#__PURE__*/ _jsxSorted(IconXMark, null, { class: "h-5 w-5" }, null, 3, "YV_4"), 1, null)], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-h-0 min-w-0 flex-1 overflow-hidden" }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "YV_5"), 1, null)], 1, null)], 1, null)], 1, "YV_6");
 }, "DevtoolsPanel_component_BVQpbxoWoJY"));
-export {
-  DevtoolsPanel
-};
+export { DevtoolsPanel };