@qwik.dev/devtools 0.2.8 → 2.0.0-beta.43

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

@@ -0,0 +1,387 @@
+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";
+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 _hf1 = (p0) => 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 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);
+}
+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;
+}
+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", {
+		"q-e:mousedown": /*#__PURE__*/ inlinedQrl((_, _1, props) => {
+			props.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, handleResizeStart) => handleResizeStart("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, handleResizeStart) => handleResizeStart("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, handleResizeStart) => handleResizeStart("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, handleResizeStart) => handleResizeStart("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, handleResizeStart) => handleResizeStart("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, handleResizeStart) => handleResizeStart("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, handleResizeStart) => handleResizeStart("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, handleResizeStart) => handleResizeStart("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, props) => {
+			props.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,14 @@
+import { Slot, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+/** Small toolbar button with icon slot and optional text. Supports active/inactive visual states. */ var 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 };