@qwik.dev/devtools 0.2.8 → 0.3.0-beta.3

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

@@ -0,0 +1,143 @@
+import { componentQrl, inlinedQrl, useSignal, useTaskQrl, _captures, _jsxSorted, _fnSignal } from "@qwik.dev/core";
+import { QwikLogo } from "../Icons/Icons.qwik.mjs";
+const _hf0 = (p0, p1) => ({
+  bottom: `${p1.value.y}px`,
+  right: `${p1.value.x}px`,
+  userSelect: p0.value ? "none" : void 0,
+  transition: p0.value ? "none" : void 0
+});
+const DevtoolsButton = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const position = useSignal({
+    x: 24,
+    y: 24
+  });
+  const isDragging = useSignal(false);
+  const elementRef = useSignal();
+  const startMousePos = useSignal({
+    x: 0,
+    y: 0
+  });
+  const startElementPos = useSignal({
+    x: 0,
+    y: 0
+  });
+  const isMoved = useSignal(false);
+  const handleMouseMove = /* @__PURE__ */ inlinedQrl((event) => {
+    const isDragging2 = _captures[0], isMoved2 = _captures[1], position2 = _captures[2], startElementPos2 = _captures[3], startMousePos2 = _captures[4];
+    if (!isDragging2.value) {
+      return;
+    }
+    const deltaX = event.clientX - startMousePos2.value.x;
+    const deltaY = event.clientY - startMousePos2.value.y;
+    if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
+      isMoved2.value = true;
+    }
+    let newX = startElementPos2.value.x - deltaX;
+    let newY = startElementPos2.value.y - deltaY;
+    newX = Math.max(0, newX);
+    newY = Math.max(0, newY);
+    position2.value = {
+      x: newX,
+      y: newY
+    };
+  }, "DevtoolsButton_component_handleMouseMove_Bm5qNmVpaXU", [
+    isDragging,
+    isMoved,
+    position,
+    startElementPos,
+    startMousePos
+  ]);
+  const handleMouseUp = /* @__PURE__ */ inlinedQrl(() => {
+    const isDragging2 = _captures[0];
+    if (isDragging2.value) {
+      isDragging2.value = false;
+    }
+  }, "DevtoolsButton_component_handleMouseUp_GgvQR4Yjzk0", [
+    isDragging
+  ]);
+  const handleClick = /* @__PURE__ */ inlinedQrl(() => {
+    const isMoved2 = _captures[0], props2 = _captures[1];
+    if (isMoved2.value) {
+      isMoved2.value = false;
+      return;
+    }
+    if (!props2.state) {
+      return;
+    }
+    props2.state.isOpen = !props2.state.isOpen;
+  }, "DevtoolsButton_component_handleClick_Rt3WuwyzzVQ", [
+    isMoved,
+    props
+  ]);
+  const handleMouseDown = /* @__PURE__ */ inlinedQrl((event) => {
+    const elementRef2 = _captures[0], isDragging2 = _captures[1], isMoved2 = _captures[2], position2 = _captures[3], startElementPos2 = _captures[4], startMousePos2 = _captures[5];
+    if (event.button !== 0) {
+      return;
+    }
+    if (!elementRef2.value) {
+      return;
+    }
+    event.preventDefault();
+    startMousePos2.value = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const computedStyle = window.getComputedStyle(elementRef2.value);
+    const currentRight = parseFloat(computedStyle.right) || 0;
+    const currentBottom = parseFloat(computedStyle.bottom) || 0;
+    startElementPos2.value = {
+      x: currentRight,
+      y: currentBottom
+    };
+    position2.value = {
+      x: currentRight,
+      y: currentBottom
+    };
+    isDragging2.value = true;
+    isMoved2.value = false;
+  }, "DevtoolsButton_component_handleMouseDown_ShLk1ZB0ELc", [
+    elementRef,
+    isDragging,
+    isMoved,
+    position,
+    startElementPos,
+    startMousePos
+  ]);
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
+    const handleMouseMove2 = _captures[0], handleMouseUp2 = _captures[1], isDragging2 = _captures[2];
+    track(() => isDragging2.value);
+    if (isDragging2.value && typeof window !== "undefined") {
+      window.addEventListener("mousemove", handleMouseMove2);
+      window.addEventListener("mouseup", handleMouseUp2);
+      cleanup(() => {
+        window.removeEventListener("mousemove", handleMouseMove2);
+        window.removeEventListener("mouseup", handleMouseUp2);
+      });
+    }
+  }, "DevtoolsButton_component_useTask_zFjnw3WvZRo", [
+    handleMouseMove,
+    handleMouseUp,
+    isDragging
+  ]));
+  return /* @__PURE__ */ _jsxSorted("div", {
+    class: [
+      "fixed z-[9990] flex h-14 w-14 origin-center items-center justify-center rounded-full select-none",
+      props.state?.isOpen && !isDragging.value ? "glass-button shadow-accent/20 pointer-events-none scale-90 rotate-90 opacity-0" : "glass-button animate-pulsar opacity-100 hover:scale-105 hover:shadow-[0_0_20px_rgba(22,182,246,0.5)]",
+      !isDragging.value ? "cursor-pointer transition-all duration-500 ease-out" : "scale-95 cursor-grabbing opacity-80"
+    ],
+    ref: elementRef
+  }, {
+    style: _fnSignal(_hf0, [
+      isDragging,
+      position
+    ]),
+    "q-e:mousedown": handleMouseDown,
+    "q-e:click": handleClick
+  }, /* @__PURE__ */ _jsxSorted(QwikLogo, null, {
+    title: "Qwik Logo",
+    class: "pointer-events-none h-7 w-7 opacity-90 drop-shadow-[0_2px_4px_rgba(0,0,0,0.2)]"
+  }, null, 3, "Ur_0"), 1, "Ur_1");
+}, "DevtoolsButton_component_pc0s731OwsI"));
+export {
+  DevtoolsButton
+};

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

@@ -0,0 +1,13 @@
+import { componentQrl, inlinedQrl, _jsxSorted, Slot } from "@qwik.dev/core";
+const DevtoolsContainer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "qwik-devtools"
+  }, /* @__PURE__ */ _jsxSorted("div", {
+    "q:slot": "content"
+  }, {
+    class: "fixed right-0 bottom-0 z-[2147483647] font-sans"
+  }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "9S_0"), 1, null), 1, "9S_1");
+}, "DevtoolsContainer_component_am55eKQZVYo"));
+export {
+  DevtoolsContainer
+};

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

@@ -0,0 +1,497 @@
+import { componentQrl, inlinedQrl, useSignal, useTaskQrl, _captures, isBrowser, useVisibleTaskQrl, _jsxSorted, _fnSignal, Slot } 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"
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function getWindowMargin() {
+  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));
+}
+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));
+}
+function getMaxWidth() {
+  const margin = getWindowMargin();
+  return Math.max(window.innerWidth - margin * 2, getMinWidth());
+}
+function getMaxHeight() {
+  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
+  };
+}
+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
+  });
+}
+function hasValidBounds(bounds) {
+  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 "";
+  }
+}
+function resetPointerStyles() {
+  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 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");
+}, "DevtoolsPanel_component_BVQpbxoWoJY"));
+export {
+  DevtoolsPanel
+};

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

@@ -0,0 +1,16 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, Slot } from "@qwik.dev/core";
+const IconButton = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxSorted("button", {
+    "aria-label": _wrapProp(props, "title"),
+    class: [
+      "flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-colors",
+      props.active ? "bg-primary/20 text-primary" : "text-muted-foreground hover:bg-card-item-hover-bg hover:text-foreground",
+      props.class
+    ],
+    "q-e:click": props.onClick$,
+    title: _wrapProp(props, "title")
+  }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Uf_0"), 0, "Uf_1");
+}, "IconButton_component_bgPeqZ4Kexo"));
+export {
+  IconButton
+};