@patterninc/pattern-ui 0.0.0-main.202610070722.e4b4a045849e → 0.0.0-main.202610080441.d12ae32dfdcb

package/dist/components/DevTools/DevTools.js

@@ -40,7 +40,7 @@ function usePatternUiDevTools() {
 	return enabled;
 }
 function DevToolsFab(t0) {
-	const $ = c(46);
+	const $ = c(49);
 	const { onOpen, qaTestId } = t0;
 	const { _: _t } = useLingui();
 	const [savedPosition, setSavedPosition] = useLocalStorage(DEVTOOLS_FAB_POSITION_KEY, null);
@@ -114,46 +114,63 @@ function DevToolsFab(t0) {
 	} else t6 = $[13];
 	useEventListener("resize", t6);
 	let t7;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = (pointerId) => {
+	if ($[14] !== setSavedPosition) {
+		t7 = (pointerId, commit) => {
 			const drag = dragRef.current;
 			if (!drag || pointerId !== drag.pointerId) return;
+			const didDrag = didDragRef.current;
 			dragRef.current = null;
-			didDragRef.current = false;
 			setIsDragging(false);
+			if (!didDrag) {
+				setDragPosition(null);
+				return;
+			}
+			if (!commit) {
+				setDragPosition(null);
+				return;
+			}
 			setDragPosition(null);
+			setSavedPosition(clampDevToolsFabPosition({
+				x: drag.originX + (drag.latestX - drag.startX),
+				y: drag.originY + (drag.latestY - drag.startY)
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight,
+				size: drag.size
+			}));
 		};
-		$[14] = t7;
-	} else t7 = $[14];
-	const clearActiveDrag = t7;
+		$[14] = setSavedPosition;
+		$[15] = t7;
+	} else t7 = $[15];
+	const finishDrag = t7;
 	const t8 = isDragging ? false : void 0;
 	let t9;
-	if ($[15] !== _t) {
+	if ($[16] !== _t) {
 		t9 = _t({ id: "IdoT3W" });
-		$[15] = _t;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[16] = _t;
+		$[17] = t9;
+	} else t9 = $[17];
 	const t10 = isDragging ? "cursor-grabbing" : "cursor-grab";
 	const t11 = !position && "right-4 bottom-4";
 	let t12;
-	if ($[17] !== t10 || $[18] !== t11) {
+	if ($[18] !== t10 || $[19] !== t11) {
 		t12 = cn("pointer-events-auto fixed z-9999 flex size-10 touch-none items-center justify-center rounded-full bg-primary-lighter text-primary-base select-none hover:bg-primary-light focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-base", t10, t11);
-		$[17] = t10;
-		$[18] = t11;
-		$[19] = t12;
-	} else t12 = $[19];
+		$[18] = t10;
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
 	let t13;
-	if ($[20] !== position) {
+	if ($[21] !== position) {
 		t13 = position ? {
 			left: position.x,
 			top: position.y
 		} : void 0;
-		$[20] = position;
-		$[21] = t13;
-	} else t13 = $[21];
+		$[21] = position;
+		$[22] = t13;
+	} else t13 = $[22];
 	let t14;
 	let t15;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
 		t14 = (event) => {
 			if (event.button !== 0) return;
 			const rect = event.currentTarget.getBoundingClientRect();
@@ -163,7 +180,9 @@ function DevToolsFab(t0) {
 				startY: event.clientY,
 				originX: rect.left,
 				originY: rect.top,
-				size: rect.width || 40
+				size: rect.width || 40,
+				latestX: event.clientX,
+				latestY: event.clientY
 			};
 			didDragRef.current = false;
 			event.currentTarget.setPointerCapture(event.pointerId);
@@ -171,6 +190,8 @@ function DevToolsFab(t0) {
 		t15 = (event_0) => {
 			const drag_0 = dragRef.current;
 			if (!drag_0 || event_0.pointerId !== drag_0.pointerId) return;
+			drag_0.latestX = event_0.clientX;
+			drag_0.latestY = event_0.clientY;
 			const dx = event_0.clientX - drag_0.startX;
 			const dy = event_0.clientY - drag_0.startY;
 			if (!didDragRef.current && !hasExceededDevToolsFabDragThreshold(dx, dy)) return;
@@ -185,71 +206,67 @@ function DevToolsFab(t0) {
 				size: drag_0.size
 			}));
 		};
-		$[22] = t14;
-		$[23] = t15;
+		$[23] = t14;
+		$[24] = t15;
 	} else {
-		t14 = $[22];
-		t15 = $[23];
+		t14 = $[23];
+		t15 = $[24];
 	}
 	let t16;
-	if ($[24] !== setSavedPosition) {
+	let t17;
+	let t18;
+	if ($[25] !== finishDrag) {
 		t16 = (event_1) => {
 			const drag_1 = dragRef.current;
 			if (!drag_1 || event_1.pointerId !== drag_1.pointerId) return;
-			const didDrag = didDragRef.current;
-			dragRef.current = null;
-			setIsDragging(false);
-			if (!didDrag) return;
-			setDragPosition(null);
-			setSavedPosition(clampDevToolsFabPosition({
-				x: drag_1.originX + (event_1.clientX - drag_1.startX),
-				y: drag_1.originY + (event_1.clientY - drag_1.startY)
-			}, {
-				width: window.innerWidth,
-				height: window.innerHeight,
-				size: drag_1.size
-			}));
+			drag_1.latestX = event_1.clientX;
+			drag_1.latestY = event_1.clientY;
+			const dx_0 = event_1.clientX - drag_1.startX;
+			const dy_0 = event_1.clientY - drag_1.startY;
+			if (hasExceededDevToolsFabDragThreshold(dx_0, dy_0)) didDragRef.current = true;
+			if (didDragRef.current) event_1.preventDefault();
+			finishDrag(event_1.pointerId, true);
 		};
-		$[24] = setSavedPosition;
-		$[25] = t16;
-	} else t16 = $[25];
-	let t17;
-	let t18;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
 		t17 = (event_2) => {
-			clearActiveDrag(event_2.pointerId);
+			finishDrag(event_2.pointerId, false);
 		};
 		t18 = (event_3) => {
-			clearActiveDrag(event_3.pointerId);
+			finishDrag(event_3.pointerId, true);
 		};
-		$[26] = t17;
-		$[27] = t18;
+		$[25] = finishDrag;
+		$[26] = t16;
+		$[27] = t17;
+		$[28] = t18;
 	} else {
-		t17 = $[26];
-		t18 = $[27];
+		t16 = $[26];
+		t17 = $[27];
+		t18 = $[28];
 	}
 	let t19;
-	if ($[28] !== onOpen) {
-		t19 = () => {
-			if (didDragRef.current) {
+	if ($[29] !== onOpen) {
+		t19 = (event_4) => {
+			if (event_4.detail === 0 || !didDragRef.current) {
 				didDragRef.current = false;
+				onOpen();
 				return;
 			}
-			onOpen();
+			event_4.preventDefault();
+			event_4.stopPropagation();
+			didDragRef.current = false;
 		};
-		$[28] = onOpen;
-		$[29] = t19;
-	} else t19 = $[29];
+		$[29] = onOpen;
+		$[30] = t19;
+	} else t19 = $[30];
 	let t20;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
 		t20 = /* @__PURE__ */ jsx(CodeIcon, {
 			size: 20,
 			color: "primary-base"
 		});
-		$[30] = t20;
-	} else t20 = $[30];
+		$[31] = t20;
+	} else t20 = $[31];
 	let t21;
-	if ($[31] !== qaTestId || $[32] !== t12 || $[33] !== t13 || $[34] !== t16 || $[35] !== t19 || $[36] !== t9) {
+	if ($[32] !== qaTestId || $[33] !== t12 || $[34] !== t13 || $[35] !== t16 || $[36] !== t17 || $[37] !== t18 || $[38] !== t19 || $[39] !== t9) {
 		t21 = /* @__PURE__ */ jsx(TooltipTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx("button", {
@@ -267,31 +284,33 @@ function DevToolsFab(t0) {
 				children: t20
 			})
 		});
-		$[31] = qaTestId;
-		$[32] = t12;
-		$[33] = t13;
-		$[34] = t16;
-		$[35] = t19;
-		$[36] = t9;
-		$[37] = t21;
-	} else t21 = $[37];
+		$[32] = qaTestId;
+		$[33] = t12;
+		$[34] = t13;
+		$[35] = t16;
+		$[36] = t17;
+		$[37] = t18;
+		$[38] = t19;
+		$[39] = t9;
+		$[40] = t21;
+	} else t21 = $[40];
 	let t22;
-	if ($[38] !== _t) {
+	if ($[41] !== _t) {
 		t22 = _t({ id: "85Fz0S" });
-		$[38] = _t;
-		$[39] = t22;
-	} else t22 = $[39];
+		$[41] = _t;
+		$[42] = t22;
+	} else t22 = $[42];
 	let t23;
-	if ($[40] !== t22) {
+	if ($[43] !== t22) {
 		t23 = /* @__PURE__ */ jsx(TooltipContent, {
 			side: "left",
 			children: t22
 		});
-		$[40] = t22;
-		$[41] = t23;
-	} else t23 = $[41];
+		$[43] = t22;
+		$[44] = t23;
+	} else t23 = $[44];
 	let t24;
-	if ($[42] !== t21 || $[43] !== t23 || $[44] !== t8) {
+	if ($[45] !== t21 || $[46] !== t23 || $[47] !== t8) {
 		t24 = /* @__PURE__ */ jsx(TooltipProvider, {
 			delayDuration: 0,
 			children: /* @__PURE__ */ jsxs(Tooltip, {
@@ -299,11 +318,11 @@ function DevToolsFab(t0) {
 				children: [t21, t23]
 			})
 		});
-		$[42] = t21;
-		$[43] = t23;
-		$[44] = t8;
-		$[45] = t24;
-	} else t24 = $[45];
+		$[45] = t21;
+		$[46] = t23;
+		$[47] = t8;
+		$[48] = t24;
+	} else t24 = $[48];
 	return t24;
 }
 function DevTools(t0) {