@archie/devtools 0.0.19 → 0.0.21

package/dist/client/client.js

@@ -4927,6 +4927,18 @@ function buildNodeSelector(nodeId) {
 var LARGE_NODE_NEST_BLOCK_MIN_WIDTH = 520;
 var LARGE_NODE_NEST_BLOCK_MIN_HEIGHT = 260;
 var LARGE_NODE_NEST_BLOCK_MIN_AREA = 18e4;
+function shouldShowGrabFeedback(target, scannedByNodeId) {
+  if (!(target instanceof Element)) return false;
+  if (target.closest("[data-design-mode-ui]")) return false;
+  if (!target.closest("#root")) return false;
+  const host = target.closest(`[${DND_NODE_ID_ATTR}]`);
+  if (!host) {
+    return true;
+  }
+  const nodeId = host.getAttribute(DND_NODE_ID_ATTR);
+  const scanned = nodeId ? scannedByNodeId.get(nodeId) : null;
+  return !scanned || scanned.draggable === false;
+}
 function isEligibleForDrag(sc) {
   if (sc.draggable === false) return false;
   const source = sc.eligibilitySource ?? "editor-meta";
@@ -8736,6 +8748,26 @@ function DesignModeOverlay() {
     for (const el of draggableElements) m.set(el.nodeId, el);
     refs.draggableNodeMapRef.current = m;
   }, [draggableElements]);
+  const [grabFeedback, setGrabFeedback] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
+    if (!enabled) return;
+    const onPointerDown = (e) => {
+      if (!shouldShowGrabFeedback(
+        e.target,
+        refs.nodeMapRef.current
+      )) {
+        return;
+      }
+      setGrabFeedback({ x: e.clientX, y: e.clientY, at: Date.now() });
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [enabled]);
+  (0, import_react17.useEffect)(() => {
+    if (!grabFeedback) return;
+    const t = setTimeout(() => setGrabFeedback(null), 1400);
+    return () => clearTimeout(t);
+  }, [grabFeedback]);
   const resolveNodeElement = (0, import_react17.useCallback)((nodeId) => {
     const known = refs.nodeMapRef.current.get(nodeId)?.element;
     if (known) return known;
@@ -8947,6 +8979,29 @@ function DesignModeOverlay() {
           },
           el.nodeId
         )),
+        grabFeedback ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            "data-design-mode-ui": "true",
+            style: {
+              position: "fixed",
+              left: grabFeedback.x,
+              top: grabFeedback.y - 34,
+              transform: "translateX(-50%)",
+              zIndex: 2147483646,
+              pointerEvents: "none",
+              background: "rgba(23, 23, 23, 0.92)",
+              color: "#fff",
+              font: "500 11px/1.4 system-ui, sans-serif",
+              padding: "4px 8px",
+              borderRadius: 6,
+              whiteSpace: "nowrap",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.25)"
+            },
+            children: "This element can't be moved"
+          },
+          grabFeedback.at
+        ) : null,
         insideRect && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {

package/dist/client/client.mjs

@@ -4892,6 +4892,18 @@ function buildNodeSelector(nodeId) {
 var LARGE_NODE_NEST_BLOCK_MIN_WIDTH = 520;
 var LARGE_NODE_NEST_BLOCK_MIN_HEIGHT = 260;
 var LARGE_NODE_NEST_BLOCK_MIN_AREA = 18e4;
+function shouldShowGrabFeedback(target, scannedByNodeId) {
+  if (!(target instanceof Element)) return false;
+  if (target.closest("[data-design-mode-ui]")) return false;
+  if (!target.closest("#root")) return false;
+  const host = target.closest(`[${DND_NODE_ID_ATTR}]`);
+  if (!host) {
+    return true;
+  }
+  const nodeId = host.getAttribute(DND_NODE_ID_ATTR);
+  const scanned = nodeId ? scannedByNodeId.get(nodeId) : null;
+  return !scanned || scanned.draggable === false;
+}
 function isEligibleForDrag(sc) {
   if (sc.draggable === false) return false;
   const source = sc.eligibilitySource ?? "editor-meta";
@@ -8701,6 +8713,26 @@ function DesignModeOverlay() {
     for (const el of draggableElements) m.set(el.nodeId, el);
     refs.draggableNodeMapRef.current = m;
   }, [draggableElements]);
+  const [grabFeedback, setGrabFeedback] = useState6(null);
+  useEffect12(() => {
+    if (!enabled) return;
+    const onPointerDown = (e) => {
+      if (!shouldShowGrabFeedback(
+        e.target,
+        refs.nodeMapRef.current
+      )) {
+        return;
+      }
+      setGrabFeedback({ x: e.clientX, y: e.clientY, at: Date.now() });
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [enabled]);
+  useEffect12(() => {
+    if (!grabFeedback) return;
+    const t = setTimeout(() => setGrabFeedback(null), 1400);
+    return () => clearTimeout(t);
+  }, [grabFeedback]);
   const resolveNodeElement = useCallback8((nodeId) => {
     const known = refs.nodeMapRef.current.get(nodeId)?.element;
     if (known) return known;
@@ -8912,6 +8944,29 @@ function DesignModeOverlay() {
           },
           el.nodeId
         )),
+        grabFeedback ? /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-design-mode-ui": "true",
+            style: {
+              position: "fixed",
+              left: grabFeedback.x,
+              top: grabFeedback.y - 34,
+              transform: "translateX(-50%)",
+              zIndex: 2147483646,
+              pointerEvents: "none",
+              background: "rgba(23, 23, 23, 0.92)",
+              color: "#fff",
+              font: "500 11px/1.4 system-ui, sans-serif",
+              padding: "4px 8px",
+              borderRadius: 6,
+              whiteSpace: "nowrap",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.25)"
+            },
+            children: "This element can't be moved"
+          },
+          grabFeedback.at
+        ) : null,
         insideRect && /* @__PURE__ */ jsx4(
           "div",
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",