@kubuild/editor 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -543,19 +543,55 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
   setAiGenerationStatus: (status) => set({ aiGenerationStatus: status }),
   insertComponent: (type, registry, parentId, index) => {
     const state = get();
-    const targetParentId = parentId ?? state.selectedNodeId ?? state.document.document.id;
-    const parentNode = (0, import_core.findNodeById)(state.document.document, targetParentId);
+    let targetParentId = parentId ?? state.selectedNodeId ?? state.document.document.id;
+    let targetIndex = index;
+    let parentNode = (0, import_core.findNodeById)(state.document.document, targetParentId);
     if (!parentNode) {
-      return {
-        success: false,
-        error: `Insertion target "${targetParentId}" was not found in the document.`
-      };
+      targetParentId = state.document.document.id;
+      parentNode = state.document.document;
     }
     const definition = registry.get(type);
     if (!definition) {
       return { success: false, error: `Unknown component type "${type}".` };
     }
-    const policy = registry.canInsertChild(parentNode.type, type);
+    let policy = registry.canInsertChild(parentNode.type, type);
+    if (!policy.valid && !parentId) {
+      const loc = (0, import_core.findNodeLocation)(state.document.document, targetParentId);
+      if (loc && loc.parent) {
+        const parentPolicy = registry.canInsertChild(loc.parent.type, type);
+        if (parentPolicy.valid) {
+          targetParentId = loc.parent.id;
+          targetIndex = loc.index + 1;
+          parentNode = loc.parent;
+          policy = parentPolicy;
+        }
+      }
+      if (!policy.valid && parentNode.type === "page" && type !== "section") {
+        const sections = parentNode.children?.filter((c) => c.type === "section") ?? [];
+        const lastSection = sections[sections.length - 1];
+        if (lastSection) {
+          const sectionPolicy = registry.canInsertChild(lastSection.type, type);
+          if (sectionPolicy.valid) {
+            targetParentId = lastSection.id;
+            targetIndex = lastSection.children?.length ?? 0;
+            parentNode = lastSection;
+            policy = sectionPolicy;
+          } else {
+            const containers = lastSection.children?.filter((c) => c.type === "container") ?? [];
+            const lastContainer = containers[containers.length - 1];
+            if (lastContainer) {
+              const containerPolicy = registry.canInsertChild(lastContainer.type, type);
+              if (containerPolicy.valid) {
+                targetParentId = lastContainer.id;
+                targetIndex = lastContainer.children?.length ?? 0;
+                parentNode = lastContainer;
+                policy = containerPolicy;
+              }
+            }
+          }
+        }
+      }
+    }
     if (!policy.valid) {
       return { success: false, error: policy.errors.join(" ") };
     }
@@ -583,7 +619,7 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
       ...definition.defaultStyles ? { styles: (0, import_core.deepClone)(definition.defaultStyles) } : {},
       ...children ? { children } : {}
     };
-    get().dispatch((doc) => (0, import_core.insertNode)(doc, { parentId: targetParentId, node, index }));
+    get().dispatch((doc) => (0, import_core.insertNode)(doc, { parentId: targetParentId, node, index: targetIndex }));
     if (!state.activeArtboardId && OVERLAY_COMPONENT_TYPES.includes(type)) {
       const detached = get().detachNodeToArtboard(nodeId, { name: definition.label });
       if (detached.success && detached.triggerId && detached.stubNodeId) {
@@ -685,14 +721,36 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
         error: "Cannot move a node into itself or one of its own descendants."
       };
     }
-    const policy = registry.canInsertChild(targetParent.type, sourceLocation.node.type);
-    if (!policy.valid) {
-      return { success: false, error: policy.errors.join(" ") };
+    if (registry) {
+      const policy = registry.canInsertChild(targetParent.type, sourceLocation.node.type);
+      if (!policy.valid) {
+        return { success: false, error: policy.errors.join(" ") };
+      }
     }
     const adjustedIndex = sourceLocation.parent.id === targetParentId && typeof index === "number" && index > sourceLocation.index ? index - 1 : index;
     get().dispatch((doc) => (0, import_core.moveNode)(doc, { nodeId, targetParentId, index: adjustedIndex }));
     return { success: true };
   },
+  moveComponentUp: (nodeId, registry) => {
+    const state = get();
+    const loc = (0, import_core.findNodeLocation)(state.document.document, nodeId);
+    if (!loc || !loc.parent || loc.index <= 0) {
+      return { success: false, error: "Cannot move up: already at the top." };
+    }
+    return get().moveComponent(nodeId, loc.parent.id, registry, loc.index - 1);
+  },
+  moveComponentDown: (nodeId, registry) => {
+    const state = get();
+    const loc = (0, import_core.findNodeLocation)(state.document.document, nodeId);
+    if (!loc || !loc.parent) {
+      return { success: false, error: "Node parent not found." };
+    }
+    const siblingCount = loc.parent.children?.length ?? 1;
+    if (loc.index >= siblingCount - 1) {
+      return { success: false, error: "Cannot move down: already at the bottom." };
+    }
+    return get().moveComponent(nodeId, loc.parent.id, registry, loc.index + 2);
+  },
   duplicateComponent: (nodeId, _registry) => {
     const state = get();
     if (nodeId === state.document.document.id) {
@@ -4637,6 +4695,8 @@ var FloatingActionBadges = ({
     selectNode,
     duplicateComponent,
     deleteComponent,
+    moveComponentUp,
+    moveComponentDown,
     detachNodeToArtboard,
     activateArtboard,
     activeArtboardId
@@ -4694,6 +4754,30 @@ var FloatingActionBadges = ({
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.Move, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
           }
         ),
+        !isRoot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-testid": "floating-badge-move-up",
+            title: "Move Up",
+            "aria-label": "Move Up",
+            onClick: () => moveComponentUp(node.id, registry),
+            className: "px-1.5 py-1 hover:bg-blue-500 active:bg-blue-700 transition flex items-center justify-center border-l border-blue-500/40 text-[11px]",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronUp, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
+          }
+        ),
+        !isRoot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-testid": "floating-badge-move-down",
+            title: "Move Down",
+            "aria-label": "Move Down",
+            onClick: () => moveComponentDown(node.id, registry),
+            className: "px-1.5 py-1 hover:bg-blue-500 active:bg-blue-700 transition flex items-center justify-center border-l border-blue-500/40 text-[11px]",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
+          }
+        ),
         !isRoot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
@@ -5244,6 +5328,7 @@ var ResizeHandles = ({
               borderRadius: "1px",
               boxShadow: "0 1px 2px rgba(0, 0, 0, 0.15)",
               pointerEvents: "auto",
+              touchAction: "none",
               cursor,
               zIndex: 51,
               boxSizing: "border-box",
@@ -6234,6 +6319,7 @@ function useCanvasPanZoom({
   const isSpacePressedRef = (0, import_react11.useRef)(isSpacePressed);
   isSpacePressedRef.current = isSpacePressed;
   const dragStartRef = (0, import_react11.useRef)(null);
+  const activePointerIdRef = (0, import_react11.useRef)(null);
   (0, import_react11.useEffect)(() => {
     if (!enabled) return;
     const onKeyDown = (e) => {
@@ -6293,16 +6379,94 @@ function useCanvasPanZoom({
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => container.removeEventListener("wheel", onWheel);
   }, [containerRef, enabled]);
+  const rafPanRef = (0, import_react11.useRef)(null);
+  const pendingPanRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+    let touchStartDistance = 0;
+    let touchStartZoom = 1;
+    let touchStartPan = { x: 0, y: 0 };
+    let touchStartMid = { x: 0, y: 0 };
+    let isPinching = false;
+    const onTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        activePointerIdRef.current = null;
+        dragStartRef.current = null;
+        pendingPanRef.current = null;
+        if (rafPanRef.current !== null) {
+          cancelAnimationFrame(rafPanRef.current);
+          rafPanRef.current = null;
+        }
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        touchStartDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+        touchStartZoom = zoomRef.current;
+        touchStartPan = { ...panRef.current };
+        touchStartMid = {
+          x: (t1.clientX + t2.clientX) / 2,
+          y: (t1.clientY + t2.clientY) / 2
+        };
+        isPinching = true;
+        setIsPanning(true);
+      }
+    };
+    const onTouchMove = (e) => {
+      if (e.touches.length === 2 && isPinching && touchStartDistance > 0) {
+        e.preventDefault();
+        const t1 = e.touches[0];
+        const t2 = e.touches[1];
+        const currentDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+        const scale = currentDistance / touchStartDistance;
+        const nextZoom = clampZoom(touchStartZoom * scale);
+        const currentMidX = (t1.clientX + t2.clientX) / 2;
+        const currentMidY = (t1.clientY + t2.clientY) / 2;
+        const rect = container.getBoundingClientRect();
+        const midContainerX = touchStartMid.x - rect.left;
+        const midContainerY = touchStartMid.y - rect.top;
+        const newPanX = midContainerX - (midContainerX - touchStartPan.x) * (nextZoom / touchStartZoom) + (currentMidX - touchStartMid.x);
+        const newPanY = midContainerY - (midContainerY - touchStartPan.y) * (nextZoom / touchStartZoom) + (currentMidY - touchStartMid.y);
+        if (rafPanRef.current === null) {
+          rafPanRef.current = requestAnimationFrame(() => {
+            setZoom(nextZoom);
+            setPan({ x: Math.round(newPanX), y: Math.round(newPanY) });
+            rafPanRef.current = null;
+          });
+        }
+      }
+    };
+    const onTouchEnd = (e) => {
+      if (isPinching && e.touches.length < 2) {
+        isPinching = false;
+        touchStartDistance = 0;
+        setIsPanning(false);
+      }
+    };
+    container.addEventListener("touchstart", onTouchStart, { passive: false });
+    container.addEventListener("touchmove", onTouchMove, { passive: false });
+    container.addEventListener("touchend", onTouchEnd, { passive: false });
+    container.addEventListener("touchcancel", onTouchEnd, { passive: false });
+    return () => {
+      container.removeEventListener("touchstart", onTouchStart);
+      container.removeEventListener("touchmove", onTouchMove);
+      container.removeEventListener("touchend", onTouchEnd);
+      container.removeEventListener("touchcancel", onTouchEnd);
+    };
+  }, [containerRef, enabled]);
   const handlePointerDown = (0, import_react11.useCallback)(
-    (e) => {
+    (e, forcePan = false) => {
       if (!enabled) return;
+      const isTouch = e.pointerType === "touch" || e.pointerType === "pen";
+      if (isTouch && e.isPrimary === false) return;
       const isMiddleClick = e.button === 1;
       const isSpacePan = isSpacePressedRef.current && e.button === 0;
-      const isHandMode = toolModeRef.current === "hand" && e.button === 0;
-      if (isMiddleClick || isSpacePan || isHandMode) {
+      const isHandMode = toolModeRef.current === "hand" && (e.button === 0 || isTouch);
+      if (forcePan || isMiddleClick || isSpacePan || isHandMode) {
         e.preventDefault();
         e.stopPropagation();
         setIsPanning(true);
+        activePointerIdRef.current = e.pointerId;
         dragStartRef.current = {
           startX: e.clientX,
           startY: e.clientY,
@@ -6316,14 +6480,33 @@ function useCanvasPanZoom({
   const handlePointerMove = (0, import_react11.useCallback)((e) => {
     const drag = dragStartRef.current;
     if (!drag) return;
+    if (activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current) return;
     const deltaX = e.clientX - drag.startX;
     const deltaY = e.clientY - drag.startY;
-    setPan({
+    pendingPanRef.current = {
       x: Math.round(drag.initialPanX + deltaX),
       y: Math.round(drag.initialPanY + deltaY)
-    });
+    };
+    if (rafPanRef.current === null) {
+      rafPanRef.current = requestAnimationFrame(() => {
+        if (pendingPanRef.current) {
+          setPan(pendingPanRef.current);
+        }
+        rafPanRef.current = null;
+      });
+    }
   }, []);
-  const handlePointerUp = (0, import_react11.useCallback)(() => {
+  const handlePointerUp = (0, import_react11.useCallback)((e) => {
+    if (activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current) return;
+    if (rafPanRef.current !== null) {
+      cancelAnimationFrame(rafPanRef.current);
+      rafPanRef.current = null;
+    }
+    if (pendingPanRef.current) {
+      setPan(pendingPanRef.current);
+      pendingPanRef.current = null;
+    }
+    activePointerIdRef.current = null;
     if (dragStartRef.current) {
       dragStartRef.current = null;
       setIsPanning(false);
@@ -6336,6 +6519,10 @@ function useCanvasPanZoom({
       return () => {
         window.removeEventListener("pointermove", handlePointerMove);
         window.removeEventListener("pointerup", handlePointerUp);
+        if (rafPanRef.current !== null) {
+          cancelAnimationFrame(rafPanRef.current);
+          rafPanRef.current = null;
+        }
       };
     }
   }, [isPanning, handlePointerMove, handlePointerUp]);
@@ -6631,6 +6818,7 @@ var MultiDevicePreview = ({
                               context,
                               viewport: device.id,
                               mode: previewMode ? "runtime" : "editor",
+                              selectedNodeId,
                               onNodeClick: (id) => {
                                 selectNode(id);
                                 setViewport(device.id);
@@ -7323,7 +7511,7 @@ var ViewportResizer = ({
         showPresets && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
-            className: "flex items-center justify-between gap-2 w-full px-1 py-1 mb-2 select-none text-xs",
+            className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1 w-full px-1 py-1 mb-2 select-none text-xs",
             onPointerDown: onHeaderPointerDown,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2 min-w-0 cursor-grab active:cursor-grabbing", children: [
@@ -7523,42 +7711,34 @@ var EditorCanvas = ({
   activeArtboardId: propActiveArtboardId,
   className
 }) => {
-  const {
-    document: storeDoc,
-    selectedNodeId,
-    selectedNodeIds,
-    hoveredNodeId,
-    dragPayload,
-    selectNode,
-    selectMultipleNodes,
-    toggleNodeSelection,
-    wrapSelectedIntoFrame,
-    ungroupSelectedFrame,
-    hoverNode,
-    updateNodeProps,
-    setDragPayload,
-    insertComponent,
-    insertBlock,
-    moveComponent,
-    deleteComponent,
-    duplicateComponent,
-    copyNode,
-    pasteNode,
-    undo,
-    redo,
-    previewMode,
-    multiDeviceMode,
-    toggleMultiDeviceMode,
-    addActionLog,
-    setLiveFormState,
-    aiGenerationStatus: storeAiGenerationStatus,
-    componentArtboards: storeComponentArtboards,
-    activeArtboardId: storeActiveArtboardId,
-    activateArtboard,
-    removeComponentArtboard,
-    setComponentArtboardPosition,
-    setComponentArtboardWidth
-  } = useEditorStore();
+  const storeDoc = useEditorStore((s) => s.document);
+  const selectedNodeId = useEditorStore((s) => s.selectedNodeId);
+  const selectedNodeIds = useEditorStore((s) => s.selectedNodeIds);
+  const hoveredNodeId = useEditorStore((s) => s.hoveredNodeId);
+  const dragPayload = useEditorStore((s) => s.dragPayload);
+  const selectNode = useEditorStore((s) => s.selectNode);
+  const selectMultipleNodes = useEditorStore((s) => s.selectMultipleNodes);
+  const toggleNodeSelection = useEditorStore((s) => s.toggleNodeSelection);
+  const hoverNode = useEditorStore((s) => s.hoverNode);
+  const updateNodeProps = useEditorStore((s) => s.updateNodeProps);
+  const setDragPayload = useEditorStore((s) => s.setDragPayload);
+  const insertComponent = useEditorStore((s) => s.insertComponent);
+  const insertBlock = useEditorStore((s) => s.insertBlock);
+  const moveComponent = useEditorStore((s) => s.moveComponent);
+  const deleteComponent = useEditorStore((s) => s.deleteComponent);
+  const duplicateComponent = useEditorStore((s) => s.duplicateComponent);
+  const previewMode = useEditorStore((s) => s.previewMode);
+  const multiDeviceMode = useEditorStore((s) => s.multiDeviceMode);
+  const toggleMultiDeviceMode = useEditorStore((s) => s.toggleMultiDeviceMode);
+  const addActionLog = useEditorStore((s) => s.addActionLog);
+  const setLiveFormState = useEditorStore((s) => s.setLiveFormState);
+  const storeAiGenerationStatus = useEditorStore((s) => s.aiGenerationStatus);
+  const storeComponentArtboards = useEditorStore((s) => s.componentArtboards);
+  const storeActiveArtboardId = useEditorStore((s) => s.activeArtboardId);
+  const activateArtboard = useEditorStore((s) => s.activateArtboard);
+  const removeComponentArtboard = useEditorStore((s) => s.removeComponentArtboard);
+  const setComponentArtboardPosition = useEditorStore((s) => s.setComponentArtboardPosition);
+  const setComponentArtboardWidth = useEditorStore((s) => s.setComponentArtboardWidth);
   const document2 = propDoc ?? storeDoc;
   const aiGenerationStatus = propAiGenerationStatus ?? storeAiGenerationStatus;
   const componentArtboards = propComponentArtboards ?? storeComponentArtboards;
@@ -7819,6 +7999,14 @@ var EditorCanvas = ({
   const [draggingArtboardId, setDraggingArtboardId] = (0, import_react16.useState)(null);
   const [dragPosition, setDragPosition] = (0, import_react16.useState)(null);
   const marqueeDragRef = (0, import_react16.useRef)(null);
+  const isTouchDevice = (0, import_react16.useMemo)(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia && window.matchMedia("(pointer: coarse)").matches || "ontouchstart" in window;
+  }, []);
+  const isSmallScreen = (0, import_react16.useMemo)(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < 768;
+  }, []);
   const {
     pan,
     setPan,
@@ -7913,14 +8101,23 @@ var EditorCanvas = ({
       setSelectedRects(multi);
     };
     recompute();
+    let rafId = null;
+    const throttledRecompute = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        recompute();
+        rafId = null;
+      });
+    };
     const container = containerRef.current;
-    window.addEventListener("resize", recompute);
-    window.addEventListener("scroll", recompute, true);
-    container?.addEventListener("input", recompute);
+    window.addEventListener("resize", throttledRecompute);
+    window.addEventListener("scroll", throttledRecompute, { passive: true, capture: true });
+    container?.addEventListener("input", throttledRecompute);
     return () => {
-      window.removeEventListener("resize", recompute);
-      window.removeEventListener("scroll", recompute, true);
-      container?.removeEventListener("input", recompute);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", throttledRecompute);
+      window.removeEventListener("scroll", throttledRecompute, true);
+      container?.removeEventListener("input", throttledRecompute);
     };
   }, [activeDoc, selectedNodeId, selectedNodeIds, hoveredNodeId, viewport, zoom, pan, fluidWidth, effectiveActivePageId]);
   (0, import_react16.useEffect)(() => {
@@ -8015,6 +8212,7 @@ var EditorCanvas = ({
     };
   }, [registry]);
   const candidateRects = (0, import_react16.useMemo)(() => {
+    if (isTouchDevice && isSmallScreen) return [];
     const layer = layerRef.current;
     if (!layer || !selectedNodeId) return [];
     const elements = layer.querySelectorAll("[data-kubuild-node]");
@@ -8034,12 +8232,16 @@ var EditorCanvas = ({
       }
     });
     return results;
-  }, [document2, selectedNodeId, zoom]);
+  }, [document2, selectedNodeId, zoom, isTouchDevice, isSmallScreen]);
   const handleMouseOver = (e) => {
+    if (isTouchDevice) return;
     const el = e.target.closest("[data-kubuild-node]");
     if (el) hoverNode(el.getAttribute("data-kubuild-node"));
   };
-  const handleMouseLeave = () => hoverNode(null);
+  const handleMouseLeave = () => {
+    if (isTouchDevice) return;
+    hoverNode(null);
+  };
   const handleCanvasPointerDown = (e) => {
     if (e.button === 1 || isSpacePressed || toolMode === "hand") {
       handlePanPointerDown(e);
@@ -8051,7 +8253,14 @@ var EditorCanvas = ({
     const isRootOrEmpty = !clickedNode || clickedNode.getAttribute("data-kubuild-node") === document2.document.id;
     const isDirectCanvasBg = target === containerRef.current || target === layerRef.current || target.getAttribute("data-testid") === "canvas-viewport-container" || target.getAttribute("data-testid") === "canvas-transform-layer";
     if (isDirectCanvasBg && !e.shiftKey) {
-      handlePanPointerDown(e);
+      handlePanPointerDown(e, true);
+      return;
+    }
+    if (e.pointerType === "touch" || e.pointerType === "pen") {
+      if (isRootOrEmpty) {
+        selectNode(null);
+        handlePanPointerDown(e, true);
+      }
       return;
     }
     if (isRootOrEmpty) {
@@ -8400,9 +8609,12 @@ var EditorCanvas = ({
         overflow: "hidden",
         cursor: cursorStyle,
         backgroundColor: "#f1f5f9",
-        backgroundImage: `radial-gradient(circle, #cbd5e1 ${Math.max(0.75, Math.min(2.5, 1.2 * zoom))}px, transparent ${Math.max(0.75, Math.min(2.5, 1.2 * zoom))}px)`,
-        backgroundSize: `${24 * zoom}px ${24 * zoom}px`,
-        backgroundPosition: `${pan.x}px ${pan.y}px`
+        // App owns single-finger pan and two-finger pinch-zoom on this container itself,
+        // so native browser pan/zoom must stay fully off to avoid the two fighting.
+        touchAction: "none",
+        backgroundImage: isSmallScreen && isTouchDevice ? void 0 : `radial-gradient(circle, #cbd5e1 ${Math.max(0.75, Math.min(2.5, 1.2 * zoom))}px, transparent ${Math.max(0.75, Math.min(2.5, 1.2 * zoom))}px)`,
+        backgroundSize: isSmallScreen && isTouchDevice ? void 0 : `${24 * zoom}px ${24 * zoom}px`,
+        backgroundPosition: isSmallScreen && isTouchDevice ? void 0 : `${pan.x}px ${pan.y}px`
       },
       onPointerDown: handleCanvasPointerDown,
       onPointerMove: handleCanvasPointerMove,
@@ -8481,6 +8693,7 @@ var EditorCanvas = ({
                                   context: contextForArtboard(pageItem),
                                   viewport: pageViewport,
                                   mode: previewMode ? "runtime" : "editor",
+                                  selectedNodeId,
                                   onNodeClick: (id, e) => {
                                     if (!previewMode) {
                                       if (e?.shiftKey) {
@@ -8616,7 +8829,7 @@ var EditorCanvas = ({
                                   containerRef: activeArtboardRef
                                 }
                               ),
-                              !previewMode && !isMultiSelecting && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                              !previewMode && !isMultiSelecting && !(isTouchDevice && isSmallScreen) && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                                 ResizeHandles,
                                 {
                                   selectedNodeId,
@@ -8626,7 +8839,7 @@ var EditorCanvas = ({
                                   onGuidesChange: setActiveGuides
                                 }
                               ),
-                              !previewMode && !isMultiSelecting && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                              !previewMode && !isMultiSelecting && !(isTouchDevice && isSmallScreen) && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                                 SpacingSliders,
                                 {
                                   selectedNodeId,
@@ -18063,7 +18276,12 @@ var CATEGORY_LABELS = {
   data: "Data",
   custom: "Custom"
 };
-var ComponentPanel = ({ registry, config, className }) => {
+var ComponentPanel = ({
+  registry,
+  config,
+  className,
+  onItemInserted
+}) => {
   const insertComponent = useEditorStore((s) => s.insertComponent);
   const setDragPayload = useEditorStore((s) => s.setDragPayload);
   const [error, setError] = (0, import_react36.useState)(null);
@@ -18095,7 +18313,12 @@ var ComponentPanel = ({ registry, config, className }) => {
   }).filter((group) => group.items.length > 0);
   const handleInsert = (definition) => {
     const result = insertComponent(definition.type, registry);
-    setError(result.success ? null : result.error ?? `Could not insert "${definition.label}".`);
+    if (result.success) {
+      setError(null);
+      onItemInserted?.();
+    } else {
+      setError(result.error ?? `Could not insert "${definition.label}".`);
+    }
   };
   const handleDragStart = (e, definition) => {
     e.dataTransfer.effectAllowed = "copy";
@@ -18261,7 +18484,8 @@ var BlockThumbnail = ({ block }) => {
 var BlocksPanel = ({
   blocks = import_components8.STARTER_BLOCKS,
   className,
-  onInsertBlock
+  onInsertBlock,
+  onItemInserted
 }) => {
   const { document: document2, selectedNodeId, dispatch, selectNode } = useEditorStore();
   const [selectedCategory, setSelectedCategory] = (0, import_react37.useState)("all");
@@ -18281,6 +18505,7 @@ var BlocksPanel = ({
   const handleInsert = (block) => {
     if (onInsertBlock) {
       onInsertBlock(block);
+      onItemInserted?.();
       return;
     }
     const existingIds = (0, import_core15.collectNodeIdSet)(document2.document);
@@ -18298,9 +18523,11 @@ var BlocksPanel = ({
     try {
       dispatch((doc) => (0, import_core15.insertNode)(doc, { parentId: targetParentId, node: nodeTree }));
       selectNode(nodeTree.id);
+      onItemInserted?.();
     } catch {
       dispatch((doc) => (0, import_core15.insertNode)(doc, { parentId: document2.document.id, node: nodeTree }));
       selectNode(nodeTree.id);
+      onItemInserted?.();
     }
   };
   const setDragPayload = useEditorStore((s) => s.setDragPayload);
@@ -18374,7 +18601,8 @@ var LeftSidebar = ({
   defaultTab: propDefaultTab,
   availableTabs: propAvailableTabs,
   config,
-  className
+  className,
+  onItemInserted
 }) => {
   const tabsList = config?.availableTabs ?? propAvailableTabs ?? ["components", "blocks", "layers"];
   const initialTabCandidate = config?.defaultTab ?? propDefaultTab ?? "components";
@@ -18449,8 +18677,8 @@ var LeftSidebar = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex-1 overflow-hidden min-h-0", children: [
-      activeTab === "components" && tabsList.includes("components") && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "tabpanel", id: "tabpanel-components", "aria-labelledby": "tab-components", className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ComponentPanel, { registry, config }) }),
-      activeTab === "blocks" && tabsList.includes("blocks") && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "tabpanel", id: "tabpanel-blocks", "aria-labelledby": "tab-blocks", className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(BlocksPanel, { registry }) }),
+      activeTab === "components" && tabsList.includes("components") && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "tabpanel", id: "tabpanel-components", "aria-labelledby": "tab-components", className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ComponentPanel, { registry, config, onItemInserted }) }),
+      activeTab === "blocks" && tabsList.includes("blocks") && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "tabpanel", id: "tabpanel-blocks", "aria-labelledby": "tab-blocks", className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(BlocksPanel, { registry, onItemInserted }) }),
       activeTab === "layers" && tabsList.includes("layers") && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "tabpanel", id: "tabpanel-layers", "aria-labelledby": "tab-layers", className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LayersPanel, { registry }) })
     ] })
   ] });
@@ -18799,6 +19027,7 @@ var KubuildEditor = ({
   initialDocument,
   pages,
   activePageId,
+  selectedNodeId: propSelectedNodeId,
   onActivePageChange,
   onPagesChange,
   registry = (0, import_components9.createDefaultComponentRegistry)(),
@@ -18810,27 +19039,29 @@ var KubuildEditor = ({
   ai,
   className
 }) => {
-  const {
-    document: document2,
-    setDocument,
-    setOnChangeHandler,
-    setVariableCatalog,
-    viewport,
-    setViewport,
-    selectedNodeId,
-    tableSpreadsheetMode,
-    setTableSpreadsheetMode,
-    aiChatMode,
-    setAiChatMode,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    previewMode,
-    multiDeviceMode,
-    toggleMultiDeviceMode,
-    actionDebuggerOpen
-  } = useEditorStore();
+  const document2 = useEditorStore((state) => state.document);
+  const setDocument = useEditorStore((state) => state.setDocument);
+  const setOnChangeHandler = useEditorStore((state) => state.setOnChangeHandler);
+  const setVariableCatalog = useEditorStore((state) => state.setVariableCatalog);
+  const viewport = useEditorStore((state) => state.viewport);
+  const setViewport = useEditorStore((state) => state.setViewport);
+  const storeSelectedNodeId = useEditorStore((state) => state.selectedNodeId);
+  const selectedNodeId = propSelectedNodeId !== void 0 ? propSelectedNodeId : storeSelectedNodeId;
+  const tableSpreadsheetMode = useEditorStore((state) => state.tableSpreadsheetMode);
+  const setTableSpreadsheetMode = useEditorStore((state) => state.setTableSpreadsheetMode);
+  const aiChatMode = useEditorStore((state) => state.aiChatMode);
+  const setAiChatMode = useEditorStore((state) => state.setAiChatMode);
+  const undo = useEditorStore((state) => state.undo);
+  const redo = useEditorStore((state) => state.redo);
+  const canUndo = useEditorStore((state) => state.canUndo);
+  const canRedo = useEditorStore((state) => state.canRedo);
+  const previewMode = useEditorStore((state) => state.previewMode);
+  const multiDeviceMode = useEditorStore((state) => state.multiDeviceMode);
+  const toggleMultiDeviceMode = useEditorStore((state) => state.toggleMultiDeviceMode);
+  const actionDebuggerOpen = useEditorStore((state) => state.actionDebuggerOpen);
+  const moveComponentUp = useEditorStore((state) => state.moveComponentUp);
+  const moveComponentDown = useEditorStore((state) => state.moveComponentDown);
+  const deleteComponent = useEditorStore((state) => state.deleteComponent);
   const lastLoadedDocRef = import_react40.default.useRef(void 0);
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = (0, import_react40.useState)(false);
   const [isMobileInspectorOpen, setIsMobileInspectorOpen] = (0, import_react40.useState)(false);
@@ -19007,7 +19238,14 @@ var KubuildEditor = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LeftSidebar, { registry, config: resolvedConfig.sidebar }) })
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              LeftSidebar,
+              {
+                registry,
+                config: resolvedConfig.sidebar,
+                onItemInserted: () => setIsMobileSidebarOpen(false)
+              }
+            ) })
           ] })
         ] }),
         isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "fixed inset-0 z-50 flex justify-end lg:hidden animate-in fade-in duration-200", children: [
@@ -19150,22 +19388,61 @@ var KubuildEditor = ({
                 className: "flex-1 min-h-0"
               }
             ),
-            selectedNodeId && !isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "lg:hidden fixed bottom-14 left-1/2 -translate-x-1/2 z-30 animate-in fade-in slide-in-from-bottom-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-              "button",
+            selectedNodeId && !isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+              "div",
               {
-                type: "button",
-                onClick: () => setIsMobileInspectorOpen(true),
-                className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold px-4 py-2 rounded-full shadow-xl border border-blue-400/40 active:scale-95 transition",
+                "data-testid": "mobile-selected-node-actions",
+                className: "lg:hidden fixed bottom-14 left-1/2 -translate-x-1/2 z-30 animate-in fade-in slide-in-from-bottom-2 flex items-center bg-slate-900/90 text-white rounded-full shadow-2xl backdrop-blur-md border border-slate-700/60 p-1 gap-1",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react22.Sliders, { className: "w-3.5 h-3.5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
-                    "Edit Element (#",
-                    selectedNodeId,
-                    ")"
-                  ] })
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => moveComponentUp(selectedNodeId, registry),
+                      title: "Move Up",
+                      "aria-label": "Move Up",
+                      className: "p-1.5 rounded-full hover:bg-slate-800 active:bg-slate-700 text-slate-200 hover:text-white transition cursor-pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react22.ArrowUp, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => moveComponentDown(selectedNodeId, registry),
+                      title: "Move Down",
+                      "aria-label": "Move Down",
+                      className: "p-1.5 rounded-full hover:bg-slate-800 active:bg-slate-700 text-slate-200 hover:text-white transition cursor-pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react22.ArrowDown, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-px h-3.5 bg-slate-700 mx-0.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setIsMobileInspectorOpen(true),
+                      className: "flex items-center gap-1.5 bg-blue-600 hover:bg-blue-500 text-white text-[11px] font-semibold px-2.5 py-1 rounded-full shadow-md active:scale-95 transition cursor-pointer",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react22.Sliders, { className: "w-3 h-3" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: `Edit (#${selectedNodeId})` })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => deleteComponent(selectedNodeId),
+                      title: "Delete",
+                      "aria-label": "Delete",
+                      className: "p-1.5 rounded-full hover:bg-red-900/40 text-red-400 hover:text-red-300 transition active:scale-95 cursor-pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react22.Trash2, { className: "w-3.5 h-3.5" })
+                    }
+                  )
                 ]
               }
-            ) }),
+            ),
             resolvedConfig.canvas.showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(HierarchyBreadcrumbs, { registry }),
             previewMode && actionDebuggerOpen && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "fixed bottom-4 right-4 z-50 animate-in fade-in slide-in-from-bottom-3 duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionDebuggerPanel, {}) })
           ] }),