@kubuild/editor 0.3.0 → 0.3.1

package/dist/index.js

@@ -384,19 +384,55 @@ var useEditorStore = 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 = findNodeById(state.document.document, targetParentId);
+    let targetParentId = parentId ?? state.selectedNodeId ?? state.document.document.id;
+    let targetIndex = index;
+    let parentNode = 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 = 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(" ") };
     }
@@ -424,7 +460,7 @@ var useEditorStore = create((set, get) => ({
       ...definition.defaultStyles ? { styles: deepClone(definition.defaultStyles) } : {},
       ...children ? { children } : {}
     };
-    get().dispatch((doc) => insertNode(doc, { parentId: targetParentId, node, index }));
+    get().dispatch((doc) => 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) {
@@ -526,14 +562,36 @@ var useEditorStore = 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) => moveNode(doc, { nodeId, targetParentId, index: adjustedIndex }));
     return { success: true };
   },
+  moveComponentUp: (nodeId, registry) => {
+    const state = get();
+    const loc = 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 = 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) {
@@ -4523,7 +4581,7 @@ import {
 // src/components/canvas/floating-badges.tsx
 import { ARTBOARD_REFERENCE_NODE_TYPE } from "@kubuild/schema";
 import { findNodeById as findNodeById4, getParentNodeId as getParentNodeId2 } from "@kubuild/core";
-import { ArrowUp, Move, Copy as Copy2, Trash2 as Trash24, ExternalLink } from "lucide-react";
+import { ArrowUp, ChevronUp as ChevronUp3, ChevronDown as ChevronDown3, Move, Copy as Copy2, Trash2 as Trash24, ExternalLink } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var FloatingActionBadges = ({
   selectedNodeId,
@@ -4536,6 +4594,8 @@ var FloatingActionBadges = ({
     selectNode,
     duplicateComponent,
     deleteComponent,
+    moveComponentUp,
+    moveComponentDown,
     detachNodeToArtboard,
     activateArtboard,
     activeArtboardId
@@ -4593,6 +4653,30 @@ var FloatingActionBadges = ({
             children: /* @__PURE__ */ jsx7(Move, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
           }
         ),
+        !isRoot && /* @__PURE__ */ jsx7(
+          "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__ */ jsx7(ChevronUp3, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
+          }
+        ),
+        !isRoot && /* @__PURE__ */ jsx7(
+          "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__ */ jsx7(ChevronDown3, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
+          }
+        ),
         !isRoot && /* @__PURE__ */ jsx7(
           "button",
           {
@@ -5143,6 +5227,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",
@@ -6133,6 +6218,7 @@ function useCanvasPanZoom({
   const isSpacePressedRef = useRef5(isSpacePressed);
   isSpacePressedRef.current = isSpacePressed;
   const dragStartRef = useRef5(null);
+  const activePointerIdRef = useRef5(null);
   useEffect7(() => {
     if (!enabled) return;
     const onKeyDown = (e) => {
@@ -6192,16 +6278,94 @@ function useCanvasPanZoom({
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => container.removeEventListener("wheel", onWheel);
   }, [containerRef, enabled]);
+  const rafPanRef = useRef5(null);
+  const pendingPanRef = useRef5(null);
+  useEffect7(() => {
+    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 = useCallback5(
-    (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,
@@ -6215,14 +6379,33 @@ function useCanvasPanZoom({
   const handlePointerMove = useCallback5((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 = useCallback5(() => {
+  const handlePointerUp = useCallback5((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);
@@ -6235,6 +6418,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]);
@@ -6539,6 +6726,7 @@ var MultiDevicePreview = ({
                               context,
                               viewport: device.id,
                               mode: previewMode ? "runtime" : "editor",
+                              selectedNodeId,
                               onNodeClick: (id) => {
                                 selectNode(id);
                                 setViewport(device.id);
@@ -7231,7 +7419,7 @@ var ViewportResizer = ({
         showPresets && /* @__PURE__ */ jsxs15(
           "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__ */ jsxs15("div", { className: "flex items-center gap-2 min-w-0 cursor-grab active:cursor-grabbing", children: [
@@ -7431,42 +7619,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;
@@ -7727,6 +7907,14 @@ var EditorCanvas = ({
   const [draggingArtboardId, setDraggingArtboardId] = useState12(null);
   const [dragPosition, setDragPosition] = useState12(null);
   const marqueeDragRef = useRef7(null);
+  const isTouchDevice = useMemo7(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia && window.matchMedia("(pointer: coarse)").matches || "ontouchstart" in window;
+  }, []);
+  const isSmallScreen = useMemo7(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < 768;
+  }, []);
   const {
     pan,
     setPan,
@@ -7821,14 +8009,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]);
   useEffect10(() => {
@@ -7923,6 +8120,7 @@ var EditorCanvas = ({
     };
   }, [registry]);
   const candidateRects = useMemo7(() => {
+    if (isTouchDevice && isSmallScreen) return [];
     const layer = layerRef.current;
     if (!layer || !selectedNodeId) return [];
     const elements = layer.querySelectorAll("[data-kubuild-node]");
@@ -7942,12 +8140,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);
@@ -7959,7 +8161,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) {
@@ -8308,9 +8517,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,
@@ -8389,6 +8601,7 @@ var EditorCanvas = ({
                                   context: contextForArtboard(pageItem),
                                   viewport: pageViewport,
                                   mode: previewMode ? "runtime" : "editor",
+                                  selectedNodeId,
                                   onNodeClick: (id, e) => {
                                     if (!previewMode) {
                                       if (e?.shiftKey) {
@@ -8524,7 +8737,7 @@ var EditorCanvas = ({
                                   containerRef: activeArtboardRef
                                 }
                               ),
-                              !previewMode && !isMultiSelecting && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ jsx18(
+                              !previewMode && !isMultiSelecting && !(isTouchDevice && isSmallScreen) && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ jsx18(
                                 ResizeHandles,
                                 {
                                   selectedNodeId,
@@ -8534,7 +8747,7 @@ var EditorCanvas = ({
                                   onGuidesChange: setActiveGuides
                                 }
                               ),
-                              !previewMode && !isMultiSelecting && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ jsx18(
+                              !previewMode && !isMultiSelecting && !(isTouchDevice && isSmallScreen) && selectedRect && selectedNodeId && selectedNodeId !== activeDoc.document.id && /* @__PURE__ */ jsx18(
                                 SpacingSliders,
                                 {
                                   selectedNodeId,
@@ -17830,7 +18043,7 @@ var InspectorPanel = ({
 // src/components/panels/layers-panel.tsx
 import { useEffect as useEffect22, useState as useState30 } from "react";
 import { findNodeById as findNodeById10, findNodeLocation as findNodeLocation4, isDescendantOf as isDescendantOf3, getAncestorChain as getAncestorChain2 } from "@kubuild/core";
-import { ChevronDown as ChevronDown3, ChevronRight as ChevronRight2 } from "lucide-react";
+import { ChevronDown as ChevronDown4, ChevronRight as ChevronRight2 } from "lucide-react";
 import { jsx as jsx41, jsxs as jsxs38 } from "react/jsx-runtime";
 var LayersPanel = ({ registry, className }) => {
   const { document: document2, selectedNodeId, hoveredNodeId, selectNode, hoverNode, moveComponent } = useEditorStore();
@@ -17962,7 +18175,7 @@ var LayersPanel = ({ registry, className }) => {
                 },
                 "aria-label": isExpanded ? "Collapse" : "Expand",
                 className: "w-4 shrink-0 text-slate-400 hover:text-slate-700 flex items-center justify-center",
-                children: isExpanded ? /* @__PURE__ */ jsx41(ChevronDown3, { className: "w-3 h-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx41(ChevronRight2, { className: "w-3 h-3", "aria-hidden": "true" })
+                children: isExpanded ? /* @__PURE__ */ jsx41(ChevronDown4, { className: "w-3 h-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx41(ChevronRight2, { className: "w-3 h-3", "aria-hidden": "true" })
               }
             ) : /* @__PURE__ */ jsx41("span", { className: "w-4 shrink-0" }),
             /* @__PURE__ */ jsx41("span", { className: "shrink-0 text-slate-400", children: /* @__PURE__ */ jsx41(ComponentIcon, { iconOrType: registry.get(node.type)?.icon ?? node.type, size: 13 }) }),
@@ -18012,7 +18225,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] = useState31(null);
@@ -18044,7 +18262,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";
@@ -18210,7 +18433,8 @@ var BlockThumbnail = ({ block }) => {
 var BlocksPanel = ({
   blocks = STARTER_BLOCKS3,
   className,
-  onInsertBlock
+  onInsertBlock,
+  onItemInserted
 }) => {
   const { document: document2, selectedNodeId, dispatch, selectNode } = useEditorStore();
   const [selectedCategory, setSelectedCategory] = useState32("all");
@@ -18230,6 +18454,7 @@ var BlocksPanel = ({
   const handleInsert = (block) => {
     if (onInsertBlock) {
       onInsertBlock(block);
+      onItemInserted?.();
       return;
     }
     const existingIds = collectNodeIdSet3(document2.document);
@@ -18247,9 +18472,11 @@ var BlocksPanel = ({
     try {
       dispatch((doc) => insertNode3(doc, { parentId: targetParentId, node: nodeTree }));
       selectNode(nodeTree.id);
+      onItemInserted?.();
     } catch {
       dispatch((doc) => insertNode3(doc, { parentId: document2.document.id, node: nodeTree }));
       selectNode(nodeTree.id);
+      onItemInserted?.();
     }
   };
   const setDragPayload = useEditorStore((s) => s.setDragPayload);
@@ -18323,7 +18550,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";
@@ -18398,8 +18626,8 @@ var LeftSidebar = ({
       }
     ),
     /* @__PURE__ */ jsxs41("div", { className: "flex-1 overflow-hidden min-h-0", children: [
-      activeTab === "components" && tabsList.includes("components") && /* @__PURE__ */ jsx44("div", { role: "tabpanel", id: "tabpanel-components", "aria-labelledby": "tab-components", className: "h-full", children: /* @__PURE__ */ jsx44(ComponentPanel, { registry, config }) }),
-      activeTab === "blocks" && tabsList.includes("blocks") && /* @__PURE__ */ jsx44("div", { role: "tabpanel", id: "tabpanel-blocks", "aria-labelledby": "tab-blocks", className: "h-full", children: /* @__PURE__ */ jsx44(BlocksPanel, { registry }) }),
+      activeTab === "components" && tabsList.includes("components") && /* @__PURE__ */ jsx44("div", { role: "tabpanel", id: "tabpanel-components", "aria-labelledby": "tab-components", className: "h-full", children: /* @__PURE__ */ jsx44(ComponentPanel, { registry, config, onItemInserted }) }),
+      activeTab === "blocks" && tabsList.includes("blocks") && /* @__PURE__ */ jsx44("div", { role: "tabpanel", id: "tabpanel-blocks", "aria-labelledby": "tab-blocks", className: "h-full", children: /* @__PURE__ */ jsx44(BlocksPanel, { registry, onItemInserted }) }),
       activeTab === "layers" && tabsList.includes("layers") && /* @__PURE__ */ jsx44("div", { role: "tabpanel", id: "tabpanel-layers", "aria-labelledby": "tab-layers", className: "h-full", children: /* @__PURE__ */ jsx44(LayersPanel, { registry }) })
     ] })
   ] });
@@ -18417,7 +18645,7 @@ import {
   Copy as Copy5,
   Check as Check7,
   ChevronRight as ChevronRight3,
-  ChevronDown as ChevronDown4,
+  ChevronDown as ChevronDown5,
   RotateCcw as RotateCcw5,
   Sliders as Sliders3,
   Maximize2 as Maximize24,
@@ -18728,7 +18956,7 @@ var ActionDebuggerPanel = ({
                           ] }),
                           /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-1.5 shrink-0", children: [
                             /* @__PURE__ */ jsx45("span", { className: "text-[10px] font-mono text-slate-500", children: log.timestamp.slice(11, 19) }),
-                            isExpanded ? /* @__PURE__ */ jsx45(ChevronDown4, { className: "w-3 h-3 text-slate-400" }) : /* @__PURE__ */ jsx45(ChevronRight3, { className: "w-3 h-3 text-slate-400" })
+                            isExpanded ? /* @__PURE__ */ jsx45(ChevronDown5, { className: "w-3 h-3 text-slate-400" }) : /* @__PURE__ */ jsx45(ChevronRight3, { className: "w-3 h-3 text-slate-400" })
                           ] })
                         ]
                       }
@@ -18771,13 +18999,17 @@ import {
   Undo2 as Undo22,
   Redo2 as Redo22,
   X as X9,
-  Boxes as Boxes2
+  Boxes as Boxes2,
+  ArrowUp as ArrowUp2,
+  ArrowDown,
+  Trash2 as Trash212
 } from "lucide-react";
 import { jsx as jsx46, jsxs as jsxs43 } from "react/jsx-runtime";
 var KubuildEditor = ({
   initialDocument,
   pages,
   activePageId,
+  selectedNodeId: propSelectedNodeId,
   onActivePageChange,
   onPagesChange,
   registry = createDefaultComponentRegistry3(),
@@ -18789,27 +19021,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 = React39.useRef(void 0);
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState35(false);
   const [isMobileInspectorOpen, setIsMobileInspectorOpen] = useState35(false);
@@ -18986,7 +19220,14 @@ var KubuildEditor = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx46("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ jsx46(LeftSidebar, { registry, config: resolvedConfig.sidebar }) })
+            /* @__PURE__ */ jsx46("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ jsx46(
+              LeftSidebar,
+              {
+                registry,
+                config: resolvedConfig.sidebar,
+                onItemInserted: () => setIsMobileSidebarOpen(false)
+              }
+            ) })
           ] })
         ] }),
         isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ jsxs43("div", { className: "fixed inset-0 z-50 flex justify-end lg:hidden animate-in fade-in duration-200", children: [
@@ -19129,22 +19370,61 @@ var KubuildEditor = ({
                 className: "flex-1 min-h-0"
               }
             ),
-            selectedNodeId && !isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ jsx46("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__ */ jsxs43(
-              "button",
+            selectedNodeId && !isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ jsxs43(
+              "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__ */ jsx46(Sliders4, { className: "w-3.5 h-3.5" }),
-                  /* @__PURE__ */ jsxs43("span", { children: [
-                    "Edit Element (#",
-                    selectedNodeId,
-                    ")"
-                  ] })
+                  /* @__PURE__ */ jsx46(
+                    "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__ */ jsx46(ArrowUp2, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx46(
+                    "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__ */ jsx46(ArrowDown, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx46("div", { className: "w-px h-3.5 bg-slate-700 mx-0.5" }),
+                  /* @__PURE__ */ jsxs43(
+                    "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__ */ jsx46(Sliders4, { className: "w-3 h-3" }),
+                        /* @__PURE__ */ jsx46("span", { children: `Edit (#${selectedNodeId})` })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx46(
+                    "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__ */ jsx46(Trash212, { className: "w-3.5 h-3.5" })
+                    }
+                  )
                 ]
               }
-            ) }),
+            ),
             resolvedConfig.canvas.showBreadcrumbs && /* @__PURE__ */ jsx46(HierarchyBreadcrumbs, { registry }),
             previewMode && actionDebuggerOpen && /* @__PURE__ */ jsx46("div", { className: "fixed bottom-4 right-4 z-50 animate-in fade-in slide-in-from-bottom-3 duration-200", children: /* @__PURE__ */ jsx46(ActionDebuggerPanel, {}) })
           ] }),