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

package/dist/ui/packages/devtools/ui/src/devtools/CustomizeTabsPanel.qwik.mjs

@@ -1,201 +1,114 @@
-import { componentQrl, inlinedQrl, useSignal, _jsxSorted, _captures, _qrlSync, _wrapProp, _fnSignal, Slot } from "@qwik.dev/core";
-import { IconXMark, IconGripVertical } from "../components/Icons/Icons.qwik.mjs";
+import { IconGripVertical, IconXMark } from "../components/Icons/Icons.qwik.mjs";
 import { IconButton } from "../components/IconButton/IconButton.qwik.mjs";
-import { resolveTabs, getAvailableTabs, reorderVisibleTabs, saveVisibleTabIds, setTabVisible } from "./sidebar-tabs.qwik.mjs";
-const _hf0 = (p0) => [
-  "transition-opacity",
-  p0.dragging ? "opacity-40" : ""
-];
-const _hf1 = (p0, p1) => p0.value === p1;
-const TabRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxSorted("li", {
-  class: _fnSignal(_hf0, [
-    props
-  ]),
-  draggable: _wrapProp(props, "draggable"),
-  "q-e:dragend": props.onDragEnd$,
-  "q-e:dragenter": props.onDragEnter$,
-  "q-e:dragstart": props.onDragStart$
-}, null, /* @__PURE__ */ _jsxSorted("label", null, {
-  class: "hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5"
-}, [
-  props.draggable && /* @__PURE__ */ _jsxSorted("span", null, {
-    class: "text-muted-foreground cursor-grab",
-    title: "Drag to reorder"
-  }, /* @__PURE__ */ _jsxSorted(IconGripVertical, null, {
-    class: "h-4 w-4"
-  }, null, 3, "Mh_0"), 1, "Mh_1"),
-  /* @__PURE__ */ _jsxSorted("input", {
-    checked: _wrapProp(props, "checked"),
-    "q-e:change": /* @__PURE__ */ inlinedQrl((_, el, props2) => props2.onToggle$(props2.id, el.checked), "TabRow_component_li_label_input_q_e_change_34xiTR3EoWM").m(),
-    "q:p": props
-  }, {
-    type: "checkbox",
-    class: "h-3.5 w-3.5 rounded",
-    style: {
-      accentColor: "var(--color-primary-active)"
-    }
-  }, null, 6, null),
-  /* @__PURE__ */ _jsxSorted("span", null, {
-    class: "text-muted-foreground"
-  }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Mh_2"), 1, null),
-  /* @__PURE__ */ _jsxSorted("span", null, {
-    class: "text-foreground text-sm"
-  }, _wrapProp(props, "title"), 1, null)
+import { getAvailableTabs, reorderVisibleTabs, resolveTabs, saveVisibleTabIds, setTabVisible } from "./sidebar-tabs.qwik.mjs";
+import { Slot, _captures, _fnSignal, _jsxSorted, _qrlSync, _wrapProp, componentQrl, inlinedQrl, useSignal } from "@qwik.dev/core";
+var _hf0 = (p0) => ["transition-opacity", p0.dragging ? "opacity-40" : ""];
+var _hf1 = (p0, p1) => p0.value === p1;
+/** One selectable tab. The icon is passed as children so no non-serializable config crosses props. */ var TabRow = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => /*#__PURE__*/ _jsxSorted("li", {
+	class: _fnSignal(_hf0, [props]),
+	draggable: _wrapProp(props, "draggable"),
+	"q-e:dragend": props.onDragEnd$,
+	"q-e:dragenter": props.onDragEnter$,
+	"q-e:dragstart": props.onDragStart$
+}, null, /*#__PURE__*/ _jsxSorted("label", null, { class: "hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5" }, [
+	props.draggable && /*#__PURE__*/ _jsxSorted("span", null, {
+		class: "text-muted-foreground cursor-grab",
+		title: "Drag to reorder"
+	}, /*#__PURE__*/ _jsxSorted(IconGripVertical, null, { class: "h-4 w-4" }, null, 3, "Mh_0"), 1, "Mh_1"),
+	/*#__PURE__*/ _jsxSorted("input", {
+		checked: _wrapProp(props, "checked"),
+		"q-e:change": /*#__PURE__*/ inlinedQrl((_, el, props) => props.onToggle$(props.id, el.checked), "TabRow_component_li_label_input_q_e_change_34xiTR3EoWM").m(),
+		"q:p": props
+	}, {
+		type: "checkbox",
+		class: "h-3.5 w-3.5 rounded",
+		style: { accentColor: "var(--color-primary-active)" }
+	}, null, 6, null),
+	/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "Mh_2"), 1, null),
+	/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground text-sm" }, _wrapProp(props, "title"), 1, null)
 ], 1, null), 0, "Mh_3"), "TabRow_component_OkPaM0aSuSk"));
-const CustomizeTabsPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  const pendingVisibleIds = useSignal([
-    ..._rawProps.state.visibleTabIds
-  ]);
-  const draggingId = useSignal(null);
-  const visibleTabs = resolveTabs(pendingVisibleIds.value);
-  const availableTabs = getAvailableTabs(pendingVisibleIds.value);
-  const toggle$ = /* @__PURE__ */ inlinedQrl((id, checked) => {
-    const pendingVisibleIds2 = _captures[0];
-    pendingVisibleIds2.value = setTabVisible(pendingVisibleIds2.value, id, checked);
-  }, "CustomizeTabsPanel_component_toggle_7ito2DKngBw", [
-    pendingVisibleIds
-  ]);
-  const endDrag$ = /* @__PURE__ */ inlinedQrl(() => {
-    const draggingId2 = _captures[0];
-    return draggingId2.value = null;
-  }, "CustomizeTabsPanel_component_endDrag_GuR2fyNtG9E", [
-    draggingId
-  ]);
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "absolute inset-0 z-30 flex items-start justify-start p-4"
-  }, [
-    /* @__PURE__ */ _jsxSorted("div", {
-      "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2) => _rawProps2.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_q_e_click_l3t3UrZvZ6Y").m(),
-      "q:p": _rawProps
-    }, {
-      class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
-    }, null, 6, null),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "glass-panel relative z-10 flex max-h-full w-80 flex-col overflow-hidden rounded-2xl"
-    }, [
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "flex items-start justify-between p-4 pb-3"
-      }, [
-        /* @__PURE__ */ _jsxSorted("div", null, null, [
-          /* @__PURE__ */ _jsxSorted("h2", null, {
-            class: "text-foreground text-base font-semibold"
-          }, "Customize Tabs", 3, null),
-          /* @__PURE__ */ _jsxSorted("p", null, {
-            class: "text-muted-foreground text-xs"
-          }, "Choose which tools appear in the sidebar.", 3, null)
-        ], 3, null),
-        /* @__PURE__ */ _jsxSorted(IconButton, {
-          onClick$: /* @__PURE__ */ inlinedQrl(() => {
-            const _rawProps2 = _captures[0];
-            return _rawProps2.state.isCustomizeOpen = false;
-          }, "CustomizeTabsPanel_component_div_div_div_IconButton_onClick_BD1Lcw5n01g", [
-            _rawProps
-          ])
-        }, {
-          title: "Close"
-        }, /* @__PURE__ */ _jsxSorted(IconXMark, null, {
-          class: "h-5 w-5"
-        }, null, 3, "Mh_4"), 0, "Mh_5")
-      ], 1, null),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "custom-scrollbar flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-3"
-      }, [
-        /* @__PURE__ */ _jsxSorted("section", {
-          "q-e:dragover": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()"),
-          "q-e:drop": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()")
-        }, {
-          "preventdefault:dragover": true,
-          "preventdefault:drop": true
-        }, [
-          /* @__PURE__ */ _jsxSorted("h3", null, {
-            class: "text-foreground text-sm font-medium"
-          }, "Visible in Sidebar", 3, null),
-          /* @__PURE__ */ _jsxSorted("p", null, {
-            class: "text-muted-foreground text-xs"
-          }, "Drag to reorder.", 3, null),
-          /* @__PURE__ */ _jsxSorted("ul", null, {
-            class: "mt-2 flex flex-col gap-1"
-          }, visibleTabs.map((tab) => {
-            const id = tab.id;
-            return /* @__PURE__ */ _jsxSorted(TabRow, {
-              dragging: _fnSignal(_hf1, [
-                draggingId,
-                id
-              ]),
-              id,
-              onDragEnter$: /* @__PURE__ */ inlinedQrl(() => {
-                const draggingId2 = _captures[0], id2 = _captures[1], pendingVisibleIds2 = _captures[2];
-                const dragged = draggingId2.value;
-                if (dragged && dragged !== id2) {
-                  pendingVisibleIds2.value = reorderVisibleTabs(pendingVisibleIds2.value, dragged, id2);
-                }
-              }, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragEnter_yYXv7uhV1nk", [
-                draggingId,
-                id,
-                pendingVisibleIds
-              ]),
-              onDragStart$: /* @__PURE__ */ inlinedQrl(() => {
-                const draggingId2 = _captures[0], id2 = _captures[1];
-                return draggingId2.value = id2;
-              }, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragStart_j7We62qpm2E", [
-                draggingId,
-                id
-              ]),
-              title: _wrapProp(tab, "title")
-            }, {
-              checked: true,
-              onToggle$: toggle$,
-              draggable: true,
-              onDragEnd$: endDrag$
-            }, tab.renderIcon(), 0, id);
-          }), 1, null)
-        ], 0, null),
-        /* @__PURE__ */ _jsxSorted("section", null, null, [
-          /* @__PURE__ */ _jsxSorted("h3", null, {
-            class: "text-foreground text-sm font-medium"
-          }, "Available in More Panel", 3, null),
-          /* @__PURE__ */ _jsxSorted("p", null, {
-            class: "text-muted-foreground text-xs"
-          }, "Add tools to access them from the More panel.", 3, null),
-          /* @__PURE__ */ _jsxSorted("ul", null, {
-            class: "mt-2 flex flex-col gap-1"
-          }, availableTabs.map((tab) => /* @__PURE__ */ _jsxSorted(TabRow, {
-            id: _wrapProp(tab, "id"),
-            title: _wrapProp(tab, "title")
-          }, {
-            checked: false,
-            onToggle$: toggle$
-          }, tab.renderIcon(), 1, tab.id)), 1, null)
-        ], 1, null)
-      ], 1, null),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "border-glass-border flex justify-end gap-2 border-t p-4"
-      }, [
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2) => _rawProps2.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_bKi0Y3F44SM").m(),
-          "q:p": _rawProps
-        }, {
-          class: "text-muted-foreground hover:text-foreground rounded-lg px-4 py-1.5 text-sm font-medium transition-colors"
-        }, "Cancel", 6, null),
-        /* @__PURE__ */ _jsxSorted("button", {
-          "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2, pendingVisibleIds2) => {
-            _rawProps2.state.visibleTabIds = [
-              ...pendingVisibleIds2.value
-            ];
-            saveVisibleTabIds(pendingVisibleIds2.value);
-            _rawProps2.state.isCustomizeOpen = false;
-          }, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_1_QB9JB6Vwuyc").m(),
-          "q:ps": [
-            _rawProps,
-            pendingVisibleIds
-          ]
-        }, {
-          class: "bg-primary rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
-        }, "Apply", 6, null)
-      ], 1, null)
-    ], 1, null)
-  ], 1, "Mh_6");
+/**
+* Overlay for choosing which tools appear in the sidebar and in what order. Edits stay pending
+* until "Apply", so closing or cancelling discards them. Relies on remounting when reopened to
+* reset the pending list.
+*/ var CustomizeTabsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const pendingVisibleIds = useSignal([..._rawProps.state.visibleTabIds]);
+	const draggingId = useSignal(null);
+	const visibleTabs = resolveTabs(pendingVisibleIds.value);
+	const availableTabs = getAvailableTabs(pendingVisibleIds.value);
+	const toggle$ = /*#__PURE__*/ inlinedQrl((id, checked) => {
+		const pendingVisibleIds = _captures[0];
+		pendingVisibleIds.value = setTabVisible(pendingVisibleIds.value, id, checked);
+	}, "CustomizeTabsPanel_component_toggle_7ito2DKngBw", [pendingVisibleIds]);
+	const endDrag$ = /*#__PURE__*/ inlinedQrl(() => {
+		const draggingId = _captures[0];
+		return draggingId.value = null;
+	}, "CustomizeTabsPanel_component_endDrag_GuR2fyNtG9E", [draggingId]);
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "absolute inset-0 z-30 flex items-start justify-start p-4" }, [/*#__PURE__*/ _jsxSorted("div", {
+		"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps) => _rawProps.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_q_e_click_l3t3UrZvZ6Y").m(),
+		"q:p": _rawProps
+	}, { class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }, null, 6, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-panel relative z-10 flex max-h-full w-80 flex-col overflow-hidden rounded-2xl" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-start justify-between p-4 pb-3" }, [/*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("h2", null, { class: "text-foreground text-base font-semibold" }, "Customize Tabs", 3, null), /*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground text-xs" }, "Choose which tools appear in the sidebar.", 3, null)], 3, null), /*#__PURE__*/ _jsxSorted(IconButton, { onClick$: /*#__PURE__*/ inlinedQrl(() => {
+			const _rawProps = _captures[0];
+			return _rawProps.state.isCustomizeOpen = false;
+		}, "CustomizeTabsPanel_component_div_div_div_IconButton_onClick_BD1Lcw5n01g", [_rawProps]) }, { title: "Close" }, /*#__PURE__*/ _jsxSorted(IconXMark, null, { class: "h-5 w-5" }, null, 3, "Mh_4"), 0, "Mh_5")], 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-3" }, [/*#__PURE__*/ _jsxSorted("section", {
+			"q-e:dragover": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()"),
+			"q-e:drop": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()")
+		}, {
+			"preventdefault:dragover": true,
+			"preventdefault:drop": true
+		}, [
+			/*#__PURE__*/ _jsxSorted("h3", null, { class: "text-foreground text-sm font-medium" }, "Visible in Sidebar", 3, null),
+			/*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground text-xs" }, "Drag to reorder.", 3, null),
+			/*#__PURE__*/ _jsxSorted("ul", null, { class: "mt-2 flex flex-col gap-1" }, visibleTabs.map((tab) => {
+				const id = tab.id;
+				return /*#__PURE__*/ _jsxSorted(TabRow, {
+					dragging: _fnSignal(_hf1, [draggingId, id]),
+					id,
+					onDragEnter$: /*#__PURE__*/ inlinedQrl(() => {
+						const draggingId = _captures[0], id = _captures[1], pendingVisibleIds = _captures[2];
+						const dragged = draggingId.value;
+						if (dragged && dragged !== id) pendingVisibleIds.value = reorderVisibleTabs(pendingVisibleIds.value, dragged, id);
+					}, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragEnter_yYXv7uhV1nk", [
+						draggingId,
+						id,
+						pendingVisibleIds
+					]),
+					onDragStart$: /*#__PURE__*/ inlinedQrl(() => {
+						const draggingId = _captures[0];
+						return draggingId.value = _captures[1];
+					}, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragStart_j7We62qpm2E", [draggingId, id]),
+					title: _wrapProp(tab, "title")
+				}, {
+					checked: true,
+					onToggle$: toggle$,
+					draggable: true,
+					onDragEnd$: endDrag$
+				}, tab.renderIcon(), 0, id);
+			}), 1, null)
+		], 0, null), /*#__PURE__*/ _jsxSorted("section", null, null, [
+			/*#__PURE__*/ _jsxSorted("h3", null, { class: "text-foreground text-sm font-medium" }, "Available in More Panel", 3, null),
+			/*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground text-xs" }, "Add tools to access them from the More panel.", 3, null),
+			/*#__PURE__*/ _jsxSorted("ul", null, { class: "mt-2 flex flex-col gap-1" }, availableTabs.map((tab) => /*#__PURE__*/ _jsxSorted(TabRow, {
+				id: _wrapProp(tab, "id"),
+				title: _wrapProp(tab, "title")
+			}, {
+				checked: false,
+				onToggle$: toggle$
+			}, tab.renderIcon(), 1, tab.id)), 1, null)
+		], 1, null)], 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex justify-end gap-2 border-t p-4" }, [/*#__PURE__*/ _jsxSorted("button", {
+			"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps) => _rawProps.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_bKi0Y3F44SM").m(),
+			"q:p": _rawProps
+		}, { class: "text-muted-foreground hover:text-foreground rounded-lg px-4 py-1.5 text-sm font-medium transition-colors" }, "Cancel", 6, null), /*#__PURE__*/ _jsxSorted("button", {
+			"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps, pendingVisibleIds) => {
+				_rawProps.state.visibleTabIds = [...pendingVisibleIds.value];
+				saveVisibleTabIds(pendingVisibleIds.value);
+				_rawProps.state.isCustomizeOpen = false;
+			}, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_1_QB9JB6Vwuyc").m(),
+			"q:ps": [_rawProps, pendingVisibleIds]
+		}, { class: "bg-primary rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90" }, "Apply", 6, null)], 1, null)
+	], 1, null)], 1, "Mh_6");
 }, "CustomizeTabsPanel_component_sHmgDosprm8"));
-export {
-  CustomizeTabsPanel
-};
+export { CustomizeTabsPanel };