dnd-block-tree 1.2.0 → 1.3.0

package/dist/index.d.mts

@@ -793,13 +793,15 @@ interface BlockTreeDevToolsProps<T extends BaseBlock = BaseBlock> {
     buttonStyle?: React.CSSProperties;
     /** Custom inline styles for the card panel */
     panelStyle?: React.CSSProperties;
+    /** Force mount in production (default: false). DevTools renders nothing in production unless this is true. */
+    forceMount?: boolean;
 }
 declare function useDevToolsCallbacks<T extends BaseBlock = BaseBlock>(): {
     callbacks: DevToolsCallbacks<T>;
     events: DevToolsEventEntry[];
     clearEvents: () => void;
 };
-declare function BlockTreeDevTools<T extends BaseBlock = BaseBlock>({ blocks, containerTypes, events, onClearEvents, getLabel, initialOpen, position, buttonStyle, panelStyle, }: BlockTreeDevToolsProps<T>): react_jsx_runtime.JSX.Element;
+declare function BlockTreeDevTools<T extends BaseBlock = BaseBlock>({ blocks, containerTypes, events, onClearEvents, getLabel, initialOpen, position, buttonStyle, panelStyle, forceMount, }: BlockTreeDevToolsProps<T>): react_jsx_runtime.JSX.Element | null;
 
 /**
  * A nested/tree representation of a block.

package/dist/index.d.ts

@@ -793,13 +793,15 @@ interface BlockTreeDevToolsProps<T extends BaseBlock = BaseBlock> {
     buttonStyle?: React.CSSProperties;
     /** Custom inline styles for the card panel */
     panelStyle?: React.CSSProperties;
+    /** Force mount in production (default: false). DevTools renders nothing in production unless this is true. */
+    forceMount?: boolean;
 }
 declare function useDevToolsCallbacks<T extends BaseBlock = BaseBlock>(): {
     callbacks: DevToolsCallbacks<T>;
     events: DevToolsEventEntry[];
     clearEvents: () => void;
 };
-declare function BlockTreeDevTools<T extends BaseBlock = BaseBlock>({ blocks, containerTypes, events, onClearEvents, getLabel, initialOpen, position, buttonStyle, panelStyle, }: BlockTreeDevToolsProps<T>): react_jsx_runtime.JSX.Element;
+declare function BlockTreeDevTools<T extends BaseBlock = BaseBlock>({ blocks, containerTypes, events, onClearEvents, getLabel, initialOpen, position, buttonStyle, panelStyle, forceMount, }: BlockTreeDevToolsProps<T>): react_jsx_runtime.JSX.Element | null;
 
 /**
  * A nested/tree representation of a block.

package/dist/index.js

@@ -2061,33 +2061,78 @@ var DEFAULT_HEIGHT = 420;
 var DIFF_EXTRA_WIDTH = 300;
 var MIN_WIDTH = 280;
 var MIN_HEIGHT = 200;
-function getAnchorCSS(position) {
-  switch (position) {
-    case "bottom-right":
-      return { bottom: 16, right: 16 };
+var BTN_SIZE = 40;
+var BTN_MARGIN = 16;
+var STORAGE_KEY = "dnd-devtools-position";
+var BTN_DRAG_THRESHOLD = 5;
+function cornerToXY(corner) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  switch (corner) {
     case "top-left":
-      return { top: 16, left: 16 };
+      return { x: BTN_MARGIN, y: BTN_MARGIN };
     case "top-right":
-      return { top: 16, right: 16 };
+      return { x: vw - BTN_MARGIN - BTN_SIZE, y: BTN_MARGIN };
+    case "bottom-right":
+      return { x: vw - BTN_MARGIN - BTN_SIZE, y: vh - BTN_MARGIN - BTN_SIZE };
     case "bottom-left":
     default:
-      return { bottom: 16, left: 16 };
+      return { x: BTN_MARGIN, y: vh - BTN_MARGIN - BTN_SIZE };
+  }
+}
+function xyToCorner(x, y) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  const isLeft = x + BTN_SIZE / 2 < vw / 2;
+  const isTop = y + BTN_SIZE / 2 < vh / 2;
+  if (isTop && isLeft) return "top-left";
+  if (isTop) return "top-right";
+  if (isLeft) return "bottom-left";
+  return "bottom-right";
+}
+function loadStoredPosition() {
+  if (typeof window === "undefined") return null;
+  try {
+    const v = localStorage.getItem(STORAGE_KEY);
+    if (v === "bottom-left" || v === "bottom-right" || v === "top-left" || v === "top-right") return v;
+  } catch {
+  }
+  return null;
+}
+function savePosition(corner) {
+  try {
+    localStorage.setItem(STORAGE_KEY, corner);
+  } catch {
   }
 }
-function computeCardOrigin(position, width, height) {
+function computeCardOrigin(corner, width, height) {
   const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
   const vh = typeof window !== "undefined" ? window.innerHeight : 768;
-  switch (position) {
+  let x;
+  let y;
+  switch (corner) {
     case "bottom-right":
-      return { x: Math.max(0, vw - 16 - width), y: Math.max(0, vh - 16 - height - 48) };
+      x = vw - BTN_MARGIN - width;
+      y = vh - BTN_MARGIN - height - BTN_SIZE - 8;
+      break;
     case "top-left":
-      return { x: 16, y: 16 + 48 };
+      x = BTN_MARGIN;
+      y = BTN_MARGIN + BTN_SIZE + 8;
+      break;
     case "top-right":
-      return { x: Math.max(0, vw - 16 - width), y: 16 + 48 };
+      x = vw - BTN_MARGIN - width;
+      y = BTN_MARGIN + BTN_SIZE + 8;
+      break;
     case "bottom-left":
     default:
-      return { x: 16, y: Math.max(0, vh - 16 - height - 48) };
+      x = BTN_MARGIN;
+      y = vh - BTN_MARGIN - height - BTN_SIZE - 8;
+      break;
   }
+  return {
+    x: Math.max(0, Math.min(x, vw - width)),
+    y: Math.max(0, Math.min(y, vh - height))
+  };
 }
 function BlockTreeDevTools({
   blocks,
@@ -2098,13 +2143,89 @@ function BlockTreeDevTools({
   initialOpen = false,
   position = "bottom-left",
   buttonStyle,
-  panelStyle
+  panelStyle,
+  forceMount = false
 }) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production" && !forceMount) {
+    return null;
+  }
   const [isOpen, setIsOpen] = react.useState(initialOpen);
   const [showDiff, setShowDiff] = react.useState(false);
   const [cardPos, setCardPos] = react.useState(null);
   const [cardSize, setCardSize] = react.useState({ w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT });
   const [showTooltip, setShowTooltip] = react.useState(false);
+  const [activeCorner, setActiveCorner] = react.useState(() => loadStoredPosition() ?? position);
+  const [btnPos, setBtnPos] = react.useState(() => cornerToXY(loadStoredPosition() ?? position));
+  const [btnDragging, setBtnDragging] = react.useState(false);
+  const [btnTransition, setBtnTransition] = react.useState(false);
+  const btnDragRef = react.useRef({
+    active: false,
+    startX: 0,
+    startY: 0,
+    origX: 0,
+    origY: 0,
+    moved: false
+  });
+  react.useEffect(() => {
+    if (!btnDragging) {
+      setBtnPos(cornerToXY(activeCorner));
+    }
+  }, [activeCorner, btnDragging]);
+  react.useEffect(() => {
+    const onResize = () => {
+      if (!btnDragRef.current.active) {
+        setBtnPos(cornerToXY(activeCorner));
+      }
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [activeCorner]);
+  const handleBtnPointerDown = react.useCallback((e) => {
+    btnDragRef.current = {
+      active: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      origX: btnPos.x,
+      origY: btnPos.y,
+      moved: false
+    };
+    e.target.setPointerCapture(e.pointerId);
+  }, [btnPos]);
+  const handleBtnPointerMove = react.useCallback((e) => {
+    const r = btnDragRef.current;
+    if (!r.active) return;
+    const dx = e.clientX - r.startX;
+    const dy = e.clientY - r.startY;
+    if (!r.moved && Math.abs(dx) < BTN_DRAG_THRESHOLD && Math.abs(dy) < BTN_DRAG_THRESHOLD) return;
+    r.moved = true;
+    setBtnDragging(true);
+    const newX = r.origX + dx;
+    const newY = r.origY + dy;
+    const maxX = window.innerWidth - BTN_SIZE;
+    const maxY = window.innerHeight - BTN_SIZE;
+    setBtnPos({
+      x: Math.max(0, Math.min(newX, maxX)),
+      y: Math.max(0, Math.min(newY, maxY))
+    });
+  }, []);
+  const handleBtnPointerUp = react.useCallback(() => {
+    const wasMoved = btnDragRef.current.moved;
+    btnDragRef.current.active = false;
+    if (wasMoved) {
+      const newCorner = xyToCorner(btnPos.x, btnPos.y);
+      setActiveCorner(newCorner);
+      savePosition(newCorner);
+      setBtnTransition(true);
+      setBtnPos(cornerToXY(newCorner));
+      setTimeout(() => {
+        setBtnTransition(false);
+        setBtnDragging(false);
+      }, 300);
+    } else {
+      setBtnDragging(false);
+      setIsOpen((prev) => !prev);
+    }
+  }, [btnPos]);
   const dragRef = react.useRef({
     dragging: false,
     startX: 0,
@@ -2133,18 +2254,28 @@ function BlockTreeDevTools({
       const targetW = showDiff ? DEFAULT_WIDTH + DIFF_EXTRA_WIDTH : DEFAULT_WIDTH;
       const wasDefault = Math.abs(prev.w - DEFAULT_WIDTH) < 20;
       const wasExpanded = Math.abs(prev.w - (DEFAULT_WIDTH + DIFF_EXTRA_WIDTH)) < 20;
+      let newW = prev.w;
       if (showDiff && (wasDefault || prev.w < targetW)) {
-        return { ...prev, w: targetW };
+        newW = targetW;
+      } else if (!showDiff && wasExpanded) {
+        newW = DEFAULT_WIDTH;
       }
-      if (!showDiff && wasExpanded) {
-        return { ...prev, w: DEFAULT_WIDTH };
+      if (newW !== prev.w) {
+        setCardPos((cp) => {
+          if (!cp) return cp;
+          const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+          const maxX = Math.max(0, vw - newW);
+          if (cp.x > maxX) return { ...cp, x: maxX };
+          return cp;
+        });
+        return { ...prev, w: newW };
       }
       return prev;
     });
   }, [showDiff]);
   const getDefaultCardPos = react.useCallback(() => {
-    return computeCardOrigin(position, cardSize.w, cardSize.h);
-  }, [position, cardSize.w, cardSize.h]);
+    return computeCardOrigin(activeCorner, cardSize.w, cardSize.h);
+  }, [activeCorner, cardSize.w, cardSize.h]);
   react.useEffect(() => {
     if (isOpen && !cardPos) {
       setCardPos(getDefaultCardPos());
@@ -2253,23 +2384,27 @@ function BlockTreeDevTools({
     const d = new Date(ts);
     return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}`;
   };
-  const anchor = getAnchorCSS(position);
+  const isBottom = activeCorner.startsWith("bottom");
+  const isLeft = activeCorner.endsWith("left");
   const triggerBtnStyle = {
     position: "fixed",
-    ...anchor,
+    left: btnPos.x,
+    top: btnPos.y,
     zIndex: 99998,
-    width: 40,
-    height: 40,
+    width: BTN_SIZE,
+    height: BTN_SIZE,
     borderRadius: "50%",
     border: "none",
     background: isOpen ? "rgba(59, 130, 246, 0.9)" : "rgba(30, 30, 30, 0.85)",
     color: "#fff",
-    cursor: "pointer",
+    cursor: btnDragging ? "grabbing" : "pointer",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
-    transition: "background 0.15s, transform 0.15s",
+    transition: btnTransition ? "left 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s" : "background 0.15s",
+    touchAction: "none",
+    userSelect: "none",
     ...buttonStyle
   };
   const tooltipStyle = {
@@ -2283,9 +2418,8 @@ function BlockTreeDevTools({
     color: "#ccc",
     boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
     pointerEvents: "none",
-    // Position based on anchor corner
-    ...anchor.bottom !== void 0 ? { bottom: "100%", marginBottom: 8 } : { top: "100%", marginTop: 8 },
-    ...anchor.left !== void 0 ? { left: 0 } : { right: 0 }
+    ...isBottom ? { bottom: "100%", marginBottom: 8 } : { top: "100%", marginTop: 8 },
+    ...isLeft ? { left: 0 } : { right: 0 }
   };
   const cardStyle = {
     position: "fixed",
@@ -2476,11 +2610,13 @@ function BlockTreeDevTools({
     return { color: "rgba(200,200,200,0.5)" };
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", ...anchor, zIndex: 99998 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", left: btnPos.x, top: btnPos.y, zIndex: 99998 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          onClick: toggle,
+          onPointerDown: handleBtnPointerDown,
+          onPointerMove: handleBtnPointerMove,
+          onPointerUp: handleBtnPointerUp,
           onMouseEnter: () => setShowTooltip(true),
           onMouseLeave: () => setShowTooltip(false),
           style: triggerBtnStyle,
@@ -2488,7 +2624,7 @@ function BlockTreeDevTools({
           children: /* @__PURE__ */ jsxRuntime.jsx(DevToolsLogo, { size: 20 })
         }
       ),
-      showTooltip && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { style: tooltipStyle, children: "dnd-block-tree DevTools" })
+      showTooltip && !isOpen && !btnDragging && /* @__PURE__ */ jsxRuntime.jsx("div", { style: tooltipStyle, children: "dnd-block-tree DevTools" })
     ] }),
     isOpen && cardPos && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",