@kubuild/editor 0.1.0 → 0.1.3

package/dist/index.js

@@ -1,7 +1,9 @@
 // src/editor.tsx
-import React19, { useEffect as useEffect10, useMemo as useMemo4 } from "react";
+import React19, { useEffect as useEffect10, useMemo as useMemo4, useState as useState17 } from "react";
 import { createDefaultComponentRegistry as createDefaultComponentRegistry2 } from "@kubuild/components";
-import { buildSampleVariablesFromCatalog } from "@kubuild/core";
+import {
+  buildSampleVariablesFromCatalog
+} from "@kubuild/core";
 
 // src/store.ts
 import { create } from "zustand";
@@ -25,6 +27,9 @@ import {
   saveDraftAsTemplate,
   cloneTemplateAsPage
 } from "@kubuild/core";
+import {
+  STARTER_BLOCKS
+} from "@kubuild/components";
 function formatCommandError(err) {
   if (err && typeof err === "object" && Array.isArray(err.issues)) {
     const issues = err.issues;
@@ -49,7 +54,11 @@ function buildDefaultChildren(specs, existingIds, registry) {
     const def = registry.get(spec.type);
     const nodeProps = deepClone(spec.props ?? def?.defaultProps ?? {});
     const nodeStyles = spec.styles ?? def?.defaultStyles;
-    const childNodes = buildDefaultChildren(spec.children ?? def?.defaultChildren, existingIds, registry);
+    const childNodes = buildDefaultChildren(
+      spec.children ?? def?.defaultChildren,
+      existingIds,
+      registry
+    );
     const node = {
       id,
       type: spec.type,
@@ -69,6 +78,7 @@ var useEditorStore = create((set, get) => ({
   document: historyManager.document,
   selectedNodeId: null,
   hoveredNodeId: null,
+  dragPayload: null,
   viewport: "desktop",
   isDirty: false,
   canUndo: false,
@@ -78,6 +88,7 @@ var useEditorStore = create((set, get) => ({
   variableCatalog: [],
   navigatorMode: "floating",
   tableSpreadsheetMode: "floating",
+  setDragPayload: (payload) => set({ dragPayload: payload }),
   setVariableCatalog: (catalog) => set({ variableCatalog: catalog }),
   setNavigatorMode: (mode) => set({ navigatorMode: mode }),
   toggleNavigator: () => set((state) => ({
@@ -94,6 +105,7 @@ var useEditorStore = create((set, get) => ({
       isDirty: false,
       selectedNodeId: null,
       hoveredNodeId: null,
+      dragPayload: null,
       clipboard: null,
       canUndo: false,
       canRedo: false
@@ -112,12 +124,15 @@ var useEditorStore = create((set, get) => ({
     });
     onChangeHandler?.(result.document);
   },
-  insertComponent: (type, registry, parentId) => {
+  insertComponent: (type, registry, parentId, index) => {
     const state = get();
     const targetParentId = parentId ?? state.selectedNodeId ?? state.document.document.id;
     const parentNode = findNodeById(state.document.document, targetParentId);
     if (!parentNode) {
-      return { success: false, error: `Insertion target "${targetParentId}" was not found in the document.` };
+      return {
+        success: false,
+        error: `Insertion target "${targetParentId}" was not found in the document.`
+      };
     }
     const definition = registry.get(type);
     if (!definition) {
@@ -134,7 +149,10 @@ var useEditorStore = create((set, get) => ({
         return { success: false, error: propResult.join(" ") };
       }
       if (propResult === false) {
-        return { success: false, error: `Default props for "${definition.label}" failed validation.` };
+        return {
+          success: false,
+          error: `Default props for "${definition.label}" failed validation.`
+        };
       }
     }
     const existingIds = collectNodeIdSet(state.document.document);
@@ -148,10 +166,49 @@ var useEditorStore = create((set, get) => ({
       ...definition.defaultStyles ? { styles: deepClone(definition.defaultStyles) } : {},
       ...children ? { children } : {}
     };
-    get().dispatch((doc) => insertNode(doc, { parentId: targetParentId, node }));
+    get().dispatch((doc) => insertNode(doc, { parentId: targetParentId, node, index }));
     get().selectNode(nodeId);
     return { success: true, nodeId };
   },
+  insertBlock: (blockOrId, parentId, index) => {
+    const state = get();
+    const targetParentId = parentId ?? state.selectedNodeId ?? state.document.document.id;
+    let blockDef;
+    if (typeof blockOrId === "string") {
+      blockDef = STARTER_BLOCKS.find((b) => b.id === blockOrId);
+    } else {
+      blockDef = blockOrId;
+    }
+    if (!blockDef) {
+      return { success: false, error: "Block definition not found." };
+    }
+    const existingIds = collectNodeIdSet(state.document.document);
+    let counter = 1;
+    const generateId = (prefix = "node") => {
+      let id = `${prefix}-${Date.now().toString(36)}-${counter++}`;
+      while (existingIds.has(id)) {
+        id = `${prefix}-${Date.now().toString(36)}-${counter++}`;
+      }
+      existingIds.add(id);
+      return id;
+    };
+    const nodeTree = blockDef.createNodeTree(generateId);
+    try {
+      get().dispatch((doc) => insertNode(doc, { parentId: targetParentId, node: nodeTree, index }));
+      get().selectNode(nodeTree.id);
+      return { success: true, nodeId: nodeTree.id };
+    } catch {
+      try {
+        get().dispatch(
+          (doc) => insertNode(doc, { parentId: state.document.document.id, node: nodeTree })
+        );
+        get().selectNode(nodeTree.id);
+        return { success: true, nodeId: nodeTree.id };
+      } catch (err) {
+        return { success: false, error: formatCommandError(err) };
+      }
+    }
+  },
   moveComponent: (nodeId, targetParentId, registry, index) => {
     const state = get();
     if (nodeId === state.document.document.id) {
@@ -163,10 +220,16 @@ var useEditorStore = create((set, get) => ({
     }
     const targetParent = findNodeById(state.document.document, targetParentId);
     if (!targetParent) {
-      return { success: false, error: `Move target "${targetParentId}" was not found in the document.` };
+      return {
+        success: false,
+        error: `Move target "${targetParentId}" was not found in the document.`
+      };
     }
     if (isDescendantOf(sourceLocation.node, targetParentId)) {
-      return { success: false, error: "Cannot move a node into itself or one of its own descendants." };
+      return {
+        success: false,
+        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) {
@@ -303,10 +366,16 @@ var useEditorStore = create((set, get) => ({
     }
     const targetParent = findNodeById(document2.document, targetParentId);
     if (!targetParent) {
-      return { success: false, error: `Paste target "${targetParentId}" was not found in the document.` };
+      return {
+        success: false,
+        error: `Paste target "${targetParentId}" was not found in the document.`
+      };
     }
     if (isDescendantOf(clipboard, targetParentId)) {
-      return { success: false, error: "Cannot paste a node into itself or one of its own descendants." };
+      return {
+        success: false,
+        error: "Cannot paste a node into itself or one of its own descendants."
+      };
     }
     const policy = registry.canInsertChild(targetParent.type, clipboard.type);
     if (!policy.valid) {
@@ -315,7 +384,9 @@ var useEditorStore = create((set, get) => ({
     const existingIds = collectNodeIdSet(document2.document);
     const { clonedNode } = cloneTreeWithNewIds(clipboard, void 0, existingIds);
     try {
-      get().dispatch((doc) => insertNode(doc, { parentId: targetParentId, node: clonedNode, index }));
+      get().dispatch(
+        (doc) => insertNode(doc, { parentId: targetParentId, node: clonedNode, index })
+      );
     } catch (err) {
       return { success: false, error: formatCommandError(err) };
     }
@@ -485,7 +556,19 @@ var EditorCanvas = ({
   onDiagnostic,
   config
 }) => {
-  const { document: storeDoc, selectedNodeId, hoveredNodeId, selectNode, hoverNode, updateNodeProps } = useEditorStore();
+  const {
+    document: storeDoc,
+    selectedNodeId,
+    hoveredNodeId,
+    dragPayload,
+    selectNode,
+    hoverNode,
+    updateNodeProps,
+    setDragPayload,
+    insertComponent,
+    insertBlock,
+    moveComponent
+  } = useEditorStore();
   const document2 = propDoc ?? storeDoc;
   const showFloatingBadges = config?.showFloatingBadges !== false;
   const containerRef = useRef(null);
@@ -562,7 +645,11 @@ var EditorCanvas = ({
       const direction = ARROW_DIRECTIONS[e.key];
       if (direction) {
         e.preventDefault();
-        const target = getNavigationTarget(state.document.document, state.selectedNodeId, direction);
+        const target = getNavigationTarget(
+          state.document.document,
+          state.selectedNodeId,
+          direction
+        );
         if (target) state.selectNode(target);
       }
     };
@@ -589,24 +676,71 @@ var EditorCanvas = ({
     e.stopPropagation();
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", nodeId);
+    e.dataTransfer.setData("application/kubuild-drag-type", "node");
+    e.dataTransfer.setData("application/kubuild-node-id", nodeId);
     setDraggingId(nodeId);
+    setDragPayload({ type: "node", nodeId });
     selectNode(nodeId);
   };
   const handleDragOver = (e) => {
-    if (!draggingId) return;
+    const activePayload = dragPayload ?? (draggingId ? { type: "node", nodeId: draggingId } : null);
+    if (!activePayload) return;
     const container = containerRef.current;
-    const hoveredEl = e.target.closest("[data-kubuild-node]");
-    if (!container || !hoveredEl) return;
-    const hoveredId = hoveredEl.getAttribute("data-kubuild-node");
-    const draggedNode = hoveredId ? findNodeById3(document2.document, draggingId) : null;
-    const hoveredNode = hoveredId ? findNodeById3(document2.document, hoveredId) : null;
-    if (!hoveredId || !draggedNode || !hoveredNode || isDescendantOf2(draggedNode, hoveredId)) {
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    const hoveredEl = e.target.closest(
+      "[data-kubuild-node]"
+    );
+    let incomingType = null;
+    if (activePayload.type === "node") {
+      const draggedNode = findNodeById3(document2.document, activePayload.nodeId);
+      incomingType = draggedNode?.type ?? null;
+    } else if (activePayload.type === "component") {
+      incomingType = activePayload.componentType;
+    } else if (activePayload.type === "block") {
+      incomingType = "section";
+    }
+    if (!incomingType) {
       setDropTarget(null);
       e.dataTransfer.dropEffect = "none";
       return;
     }
+    if (!hoveredEl) {
+      const rootNode = document2.document;
+      const policy2 = registry.canInsertChild(rootNode.type, incomingType);
+      if (!policy2.valid) {
+        setDropTarget(null);
+        e.dataTransfer.dropEffect = "none";
+        return;
+      }
+      e.preventDefault();
+      e.dataTransfer.dropEffect = activePayload.type === "node" ? "move" : "copy";
+      setDropTarget({
+        parentId: rootNode.id,
+        index: rootNode.children?.length ?? 0,
+        position: "inside",
+        rect: {
+          top: 0,
+          left: 0,
+          width: containerRect.width,
+          height: Math.max(containerRect.height, 200)
+        }
+      });
+      return;
+    }
+    const hoveredId = hoveredEl.getAttribute("data-kubuild-node");
+    if (!hoveredId) return;
+    if (activePayload.type === "node") {
+      const draggedNode = findNodeById3(document2.document, activePayload.nodeId);
+      if (!draggedNode || isDescendantOf2(draggedNode, hoveredId)) {
+        setDropTarget(null);
+        e.dataTransfer.dropEffect = "none";
+        return;
+      }
+    }
+    const hoveredNode = findNodeById3(document2.document, hoveredId);
+    if (!hoveredNode) return;
     const elRect = hoveredEl.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
     const ratio = elRect.height > 0 ? (e.clientY - elRect.top) / elRect.height : 0.5;
     const hoveredDef = registry.get(hoveredNode.type);
     const canGoInside = !!hoveredDef?.acceptsChildren;
@@ -627,18 +761,21 @@ var EditorCanvas = ({
         targetType: location.parent.type
       };
     } else {
-      setDropTarget(null);
-      e.dataTransfer.dropEffect = "none";
-      return;
+      candidate = {
+        parentId: document2.document.id,
+        index: document2.document.children?.length ?? 0,
+        position: "inside",
+        targetType: document2.document.type
+      };
     }
-    const policy = registry.canInsertChild(candidate.targetType, draggedNode.type);
+    const policy = registry.canInsertChild(candidate.targetType, incomingType);
     if (!policy.valid) {
       setDropTarget(null);
       e.dataTransfer.dropEffect = "none";
       return;
     }
     e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
+    e.dataTransfer.dropEffect = activePayload.type === "node" ? "move" : "copy";
     setDropTarget({
       parentId: candidate.parentId,
       index: candidate.index,
@@ -653,15 +790,29 @@ var EditorCanvas = ({
   };
   const handleDrop = (e) => {
     e.preventDefault();
-    if (draggingId && dropTarget) {
-      useEditorStore.getState().moveComponent(draggingId, dropTarget.parentId, registry, dropTarget.index);
+    const activePayload = dragPayload ?? (draggingId ? { type: "node", nodeId: draggingId } : null);
+    if (activePayload && dropTarget) {
+      if (activePayload.type === "node") {
+        moveComponent(activePayload.nodeId, dropTarget.parentId, registry, dropTarget.index);
+      } else if (activePayload.type === "component") {
+        insertComponent(
+          activePayload.componentType,
+          registry,
+          dropTarget.parentId,
+          dropTarget.index
+        );
+      } else if (activePayload.type === "block") {
+        insertBlock(activePayload.blockId, dropTarget.parentId, dropTarget.index);
+      }
     }
     setDraggingId(null);
     setDropTarget(null);
+    setDragPayload(null);
   };
   const handleDragEnd = () => {
     setDraggingId(null);
     setDropTarget(null);
+    setDragPayload(null);
   };
   return /* @__PURE__ */ jsxs2(
     "div",
@@ -1877,14 +2028,7 @@ var CodeViewerModal = ({
 };
 
 // src/toolbar.tsx
-import {
-  Copy as Copy2,
-  ClipboardPaste,
-  CopyPlus,
-  Trash2 as Trash22,
-  Undo2,
-  Redo2
-} from "lucide-react";
+import { Copy as Copy2, ClipboardPaste, CopyPlus, Trash2 as Trash22, Undo2, Redo2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var ToolbarIconButton = ({
   icon,
@@ -2028,21 +2172,32 @@ var EditorToolbar = ({
           type: "button",
           title: `Navigator / Element Tree (${navigatorMode !== "hidden" ? "Open" : "Hidden"})`,
           onClick: toggleNavigator,
-          className: `flex items-center gap-1 text-xs px-2.5 py-1 rounded border transition font-medium cursor-pointer ${navigatorMode !== "hidden" ? "border-blue-500 bg-blue-50 text-blue-700 shadow-xs" : "border-slate-200 bg-white hover:border-slate-300 text-slate-700"}`,
+          className: `hidden sm:flex items-center gap-1 text-xs px-2.5 py-1 rounded border transition font-medium cursor-pointer ${navigatorMode !== "hidden" ? "border-blue-500 bg-blue-50 text-blue-700 shadow-xs" : "border-slate-200 bg-white hover:border-slate-300 text-slate-700"}`,
           children: [
-            /* @__PURE__ */ jsxs5("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx6("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
-              /* @__PURE__ */ jsx6("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
-              /* @__PURE__ */ jsx6("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
-              /* @__PURE__ */ jsx6("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
-              /* @__PURE__ */ jsx6("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
-              /* @__PURE__ */ jsx6("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
-            ] }),
+            /* @__PURE__ */ jsxs5(
+              "svg",
+              {
+                width: "13",
+                height: "13",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsx6("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+                  /* @__PURE__ */ jsx6("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+                  /* @__PURE__ */ jsx6("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+                  /* @__PURE__ */ jsx6("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+                  /* @__PURE__ */ jsx6("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+                  /* @__PURE__ */ jsx6("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx6("span", { children: "Navigator" })
           ]
         }
       ),
-      showNavigatorToggle && (showClipboard || showHistory || showCodeViewer || showExportImport) && /* @__PURE__ */ jsx6("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
+      showNavigatorToggle && (showClipboard || showHistory || showCodeViewer || showExportImport) && /* @__PURE__ */ jsx6("div", { className: "hidden sm:block h-4 w-px bg-slate-200 mx-1" }),
       (showClipboard || showHistory) && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
         showClipboard && /* @__PURE__ */ jsxs5(Fragment2, { children: [
           /* @__PURE__ */ jsx6(
@@ -2117,21 +2272,21 @@ var EditorToolbar = ({
           )
         ] })
       ] }),
-      (showClipboard || showHistory) && (showCodeViewer || showExportImport) && /* @__PURE__ */ jsx6("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
+      (showClipboard || showHistory) && (showCodeViewer || showExportImport) && /* @__PURE__ */ jsx6("div", { className: "hidden sm:block h-4 w-px bg-slate-200 mx-1" }),
       showCodeViewer && /* @__PURE__ */ jsxs5(
         "button",
         {
           type: "button",
           title: "View Semantic HTML & CSS (< >)",
           onClick: () => setIsCodeViewerModalOpen(true),
-          className: "flex items-center gap-1.5 text-xs px-2.5 py-1 rounded border border-slate-200 bg-white hover:border-blue-500 hover:text-blue-600 font-medium text-slate-700 transition",
+          className: "flex items-center gap-1.5 text-xs px-2 sm:px-2.5 py-1 rounded border border-slate-200 bg-white hover:border-blue-500 hover:text-blue-600 font-medium text-slate-700 transition",
           children: [
             /* @__PURE__ */ jsx6("span", { className: "font-mono text-[11px] font-bold text-blue-600", children: "<>" }),
-            /* @__PURE__ */ jsx6("span", { children: "View Code" })
+            /* @__PURE__ */ jsx6("span", { className: "hidden sm:inline", children: "View Code" })
           ]
         }
       ),
-      showExportImport && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      showExportImport && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
         showCodeViewer && /* @__PURE__ */ jsx6("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
         /* @__PURE__ */ jsx6(
           "button",
@@ -2139,7 +2294,7 @@ var EditorToolbar = ({
             type: "button",
             title: "Import .stora Package",
             onClick: () => setIsImportModalOpen(true),
-            className: "text-xs px-2.5 py-1 rounded border border-slate-200 bg-white hover:border-blue-500 hover:text-blue-600 font-medium text-slate-700 transition",
+            className: "text-xs px-2 sm:px-2.5 py-1 rounded border border-slate-200 bg-white hover:border-blue-500 hover:text-blue-600 font-medium text-slate-700 transition",
             children: "Import"
           }
         ),
@@ -2150,8 +2305,8 @@ var EditorToolbar = ({
             title: "Export .stora Archive",
             disabled: isExporting,
             onClick: handleExportStora,
-            className: "text-xs px-2.5 py-1 rounded border border-blue-600 bg-blue-600 hover:bg-blue-500 text-white font-medium disabled:opacity-50 transition shadow-sm",
-            children: isExporting ? "Exporting..." : "Export .stora"
+            className: "text-xs px-2 sm:px-2.5 py-1 rounded border border-blue-600 bg-blue-600 hover:bg-blue-500 text-white font-medium disabled:opacity-50 transition shadow-xs",
+            children: isExporting ? "..." : "Export"
           }
         ),
         /* @__PURE__ */ jsx6(
@@ -2160,7 +2315,7 @@ var EditorToolbar = ({
             type: "button",
             title: "Download page.json",
             onClick: handleExportJson,
-            className: "text-xs px-2 py-1 rounded border border-slate-200 bg-white hover:border-slate-400 text-slate-600 transition",
+            className: "hidden md:inline-block text-xs px-2 py-1 rounded border border-slate-200 bg-white hover:border-slate-400 text-slate-600 transition",
             children: "JSON"
           }
         )
@@ -3001,15 +3156,18 @@ var TableSpreadsheetEditor = ({
     setIsImportModalOpen(false);
     setCsvInputText("");
   };
-  const [pos, setPos] = useState6({ x: 260, y: 120 });
+  const [pos, setPos] = useState6(() => ({
+    x: typeof window !== "undefined" ? Math.max(10, Math.min(window.innerWidth - 400, 20)) : 20,
+    y: 120
+  }));
   const [isDragging, setIsDragging] = useState6(false);
   const dragStartRef = useRef4({
     startX: 0,
     startY: 0,
-    posX: 260,
+    posX: 20,
     posY: 120
   });
-  const handleHeaderMouseDown = (e) => {
+  const handleHeaderPointerDown = (e) => {
     if (e.target.closest("button, input, select, textarea")) return;
     setIsDragging(true);
     dragStartRef.current = {
@@ -3021,22 +3179,26 @@ var TableSpreadsheetEditor = ({
   };
   useEffect2(() => {
     if (!isDragging) return;
-    const handleMouseMove = (e) => {
+    const handlePointerMove = (e) => {
       const dx = e.clientX - dragStartRef.current.startX;
       const dy = e.clientY - dragStartRef.current.startY;
+      const maxX = Math.max(8, window.innerWidth - 320);
+      const maxY = Math.max(8, window.innerHeight - 100);
       setPos({
-        x: Math.max(10, Math.min(window.innerWidth - 350, dragStartRef.current.posX + dx)),
-        y: Math.max(10, Math.min(window.innerHeight - 150, dragStartRef.current.posY + dy))
+        x: Math.max(8, Math.min(maxX, dragStartRef.current.posX + dx)),
+        y: Math.max(8, Math.min(maxY, dragStartRef.current.posY + dy))
       });
     };
-    const handleMouseUp = () => {
+    const handlePointerUp = () => {
       setIsDragging(false);
     };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
     return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
     };
   }, [isDragging]);
   if (!tableNode) return null;
@@ -3590,9 +3752,9 @@ var TableSpreadsheetEditor = ({
       /* @__PURE__ */ jsx10(
         "div",
         {
-          style: { left: `${pos.x}px`, top: `${pos.y}px` },
-          onMouseDown: handleHeaderMouseDown,
-          className: `fixed z-40 min-w-[380px] max-w-[620px] bg-white/95 backdrop-blur-md rounded-xl shadow-2xl border border-slate-300 flex flex-col max-h-[460px] overflow-hidden ${className}`,
+          style: { left: `${pos.x}px`, top: `${pos.y}px`, touchAction: "none" },
+          onPointerDown: handleHeaderPointerDown,
+          className: `fixed z-40 min-w-[320px] sm:min-w-[380px] max-w-[620px] bg-white/95 backdrop-blur-md rounded-xl shadow-2xl border border-slate-300 flex flex-col max-h-[460px] overflow-hidden cursor-grab active:cursor-grabbing touch-none ${className}`,
           children: content
         }
       )
@@ -6657,16 +6819,19 @@ var LayersPanel = ({ registry, className }) => {
   const [expandedIds, setExpandedIds] = useState13(() => /* @__PURE__ */ new Set([document2.document.id]));
   const [draggingId, setDraggingId] = useState13(null);
   const [dropCandidate, setDropCandidate] = useState13(null);
-  const [pos, setPos] = useState13({ x: 280, y: 70 });
+  const [pos, setPos] = useState13(() => ({
+    x: typeof window !== "undefined" ? Math.max(12, Math.min(window.innerWidth - 300, 24)) : 24,
+    y: 70
+  }));
   const [isDraggingWindow, setIsDraggingWindow] = useState13(false);
   const dragStartRef = useRef9({
     startX: 0,
     startY: 0,
-    posX: 280,
+    posX: 24,
     posY: 70
   });
-  const handleHeaderMouseDown = (e) => {
-    if (e.target.closest("button")) return;
+  const handleHeaderPointerDown = (e) => {
+    if (e.target.closest("button, input, select, textarea")) return;
     setIsDraggingWindow(true);
     dragStartRef.current = {
       startX: e.clientX,
@@ -6677,22 +6842,26 @@ var LayersPanel = ({ registry, className }) => {
   };
   useEffect9(() => {
     if (!isDraggingWindow) return;
-    const handleMouseMove = (e) => {
+    const handlePointerMove = (e) => {
       const dx = e.clientX - dragStartRef.current.startX;
       const dy = e.clientY - dragStartRef.current.startY;
+      const maxX = Math.max(8, window.innerWidth - 296);
+      const maxY = Math.max(8, window.innerHeight - 100);
       setPos({
-        x: Math.max(10, Math.min(window.innerWidth - 280, dragStartRef.current.posX + dx)),
-        y: Math.max(10, Math.min(window.innerHeight - 120, dragStartRef.current.posY + dy))
+        x: Math.max(8, Math.min(maxX, dragStartRef.current.posX + dx)),
+        y: Math.max(8, Math.min(maxY, dragStartRef.current.posY + dy))
       });
     };
-    const handleMouseUp = () => {
+    const handlePointerUp = () => {
       setIsDraggingWindow(false);
     };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
     return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
     };
   }, [isDraggingWindow]);
   useEffect9(() => {
@@ -6843,8 +7012,9 @@ var LayersPanel = ({ registry, className }) => {
   const header = /* @__PURE__ */ jsxs17(
     "div",
     {
-      onMouseDown: isFloating ? handleHeaderMouseDown : void 0,
-      className: `flex items-center justify-between px-3 py-2 border-b border-slate-200/90 select-none ${isFloating ? "cursor-grab active:cursor-grabbing bg-slate-50/90 rounded-t-xl" : "bg-slate-50"}`,
+      onPointerDown: isFloating ? handleHeaderPointerDown : void 0,
+      style: { touchAction: isFloating ? "none" : "auto" },
+      className: `flex items-center justify-between px-3 py-2 border-b border-slate-200/90 select-none ${isFloating ? "cursor-grab active:cursor-grabbing bg-slate-50/90 rounded-t-xl touch-none" : "bg-slate-50"}`,
       children: [
         /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1.5 font-semibold text-xs text-slate-700", children: [
           isFloating && /* @__PURE__ */ jsx18(GripVertical, { className: "w-3 h-3 text-slate-400 mr-0.5", "aria-hidden": "true" }),
@@ -6973,7 +7143,15 @@ import { Boxes, Blocks, Layers } from "lucide-react";
 // src/component-panel.tsx
 import { useState as useState14 } from "react";
 import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
-var CATEGORY_ORDER = ["layout", "typography", "media", "form", "interactive", "data", "custom"];
+var CATEGORY_ORDER = [
+  "layout",
+  "typography",
+  "media",
+  "form",
+  "interactive",
+  "data",
+  "custom"
+];
 var CATEGORY_LABELS = {
   layout: "Layout",
   typography: "Typography",
@@ -6985,6 +7163,7 @@ var CATEGORY_LABELS = {
 };
 var ComponentPanel = ({ registry, className }) => {
   const insertComponent = useEditorStore((s) => s.insertComponent);
+  const setDragPayload = useEditorStore((s) => s.setDragPayload);
   const [error, setError] = useState14(null);
   const groups = CATEGORY_ORDER.map((category) => ({
     category,
@@ -6994,6 +7173,16 @@ var ComponentPanel = ({ registry, className }) => {
     const result = insertComponent(definition.type, registry);
     setError(result.success ? null : result.error ?? `Could not insert "${definition.label}".`);
   };
+  const handleDragStart = (e, definition) => {
+    e.dataTransfer.effectAllowed = "copy";
+    e.dataTransfer.setData("text/plain", `component:${definition.type}`);
+    e.dataTransfer.setData("application/kubuild-drag-type", "component");
+    e.dataTransfer.setData("application/kubuild-component-type", definition.type);
+    setDragPayload({ type: "component", componentType: definition.type });
+  };
+  const handleDragEnd = () => {
+    setDragPayload(null);
+  };
   return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col gap-4 p-3 overflow-y-auto h-full min-h-0 ${className || ""}`, children: [
     error && /* @__PURE__ */ jsx20(
       "div",
@@ -7009,12 +7198,16 @@ var ComponentPanel = ({ registry, className }) => {
         "button",
         {
           type: "button",
+          draggable: true,
+          onDragStart: (e) => handleDragStart(e, definition),
+          onDragEnd: handleDragEnd,
           onClick: () => handleInsert(definition),
-          title: definition.description || definition.label,
-          className: "flex flex-col items-center justify-center p-2.5 min-h-[74px] rounded-lg border border-slate-200 bg-white hover:border-blue-400 hover:bg-blue-50/50 hover:shadow text-slate-700 transition group cursor-pointer text-center",
+          "data-testid": `component-item-${definition.type}`,
+          title: definition.description || `Click to insert or drag to canvas: ${definition.label}`,
+          className: "flex flex-col items-center justify-center p-2.5 min-h-[74px] rounded-lg border border-slate-200 bg-white hover:border-blue-400 hover:bg-blue-50/50 hover:shadow text-slate-700 transition group cursor-grab active:cursor-grabbing text-center select-none",
           children: [
-            /* @__PURE__ */ jsx20("span", { className: "mb-1.5 text-slate-500 group-hover:text-blue-600 transition-colors", children: /* @__PURE__ */ jsx20(ComponentIcon, { iconOrType: definition.icon ?? definition.type, size: 22 }) }),
-            /* @__PURE__ */ jsx20("span", { className: "text-[11px] font-medium text-slate-700 group-hover:text-blue-600 text-center leading-tight break-words w-full select-none", children: definition.label })
+            /* @__PURE__ */ jsx20("span", { className: "mb-1.5 text-slate-500 group-hover:text-blue-600 transition-colors pointer-events-none", children: /* @__PURE__ */ jsx20(ComponentIcon, { iconOrType: definition.icon ?? definition.type, size: 22 }) }),
+            /* @__PURE__ */ jsx20("span", { className: "text-[11px] font-medium text-slate-700 group-hover:text-blue-600 text-center leading-tight break-words w-full pointer-events-none", children: definition.label })
           ]
         },
         definition.type
@@ -7025,7 +7218,7 @@ var ComponentPanel = ({ registry, className }) => {
 
 // src/blocks-panel.tsx
 import { useState as useState15, useMemo as useMemo3 } from "react";
-import { STARTER_BLOCKS } from "@kubuild/components";
+import { STARTER_BLOCKS as STARTER_BLOCKS2 } from "@kubuild/components";
 import { insertNode as insertNode2, collectNodeIdSet as collectNodeIdSet2 } from "@kubuild/core";
 import { Image as ImageIcon } from "lucide-react";
 import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -7091,7 +7284,7 @@ var BlockThumbnail = ({ block }) => {
   }
 };
 var BlocksPanel = ({
-  blocks = STARTER_BLOCKS,
+  blocks = STARTER_BLOCKS2,
   className,
   onInsertBlock
 }) => {
@@ -7135,6 +7328,17 @@ var BlocksPanel = ({
       selectNode(nodeTree.id);
     }
   };
+  const setDragPayload = useEditorStore((s) => s.setDragPayload);
+  const handleDragStart = (e, block) => {
+    e.dataTransfer.effectAllowed = "copy";
+    e.dataTransfer.setData("text/plain", `block:${block.id}`);
+    e.dataTransfer.setData("application/kubuild-drag-type", "block");
+    e.dataTransfer.setData("application/kubuild-block-id", block.id);
+    setDragPayload({ type: "block", blockId: block.id });
+  };
+  const handleDragEnd = () => {
+    setDragPayload(null);
+  };
   return /* @__PURE__ */ jsxs20(
     "div",
     {
@@ -7165,13 +7369,17 @@ var BlocksPanel = ({
           "button",
           {
             type: "button",
+            draggable: true,
+            onDragStart: (e) => handleDragStart(e, block),
+            onDragEnd: handleDragEnd,
             "data-testid": "block-card",
             "data-block-id": block.id,
             onClick: () => handleInsert(block),
-            className: "flex flex-col justify-between p-2 rounded-lg border border-slate-200 bg-white hover:border-blue-400 hover:shadow-md hover:bg-blue-50/20 transition-all text-left group cursor-pointer",
+            title: block.description || `Click to insert or drag to canvas: ${block.name}`,
+            className: "flex flex-col justify-between p-2 rounded-lg border border-slate-200 bg-white hover:border-blue-400 hover:shadow-md hover:bg-blue-50/20 transition-all text-left group cursor-grab active:cursor-grabbing select-none",
             children: [
-              /* @__PURE__ */ jsx21("div", { className: "mb-2 w-full", children: /* @__PURE__ */ jsx21(BlockThumbnail, { block }) }),
-              /* @__PURE__ */ jsxs20("div", { className: "w-full", children: [
+              /* @__PURE__ */ jsx21("div", { className: "mb-2 w-full pointer-events-none", children: /* @__PURE__ */ jsx21(BlockThumbnail, { block }) }),
+              /* @__PURE__ */ jsxs20("div", { className: "w-full pointer-events-none", children: [
                 /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-between gap-1 mb-0.5", children: /* @__PURE__ */ jsx21("span", { className: "text-[11px] font-semibold text-slate-800 group-hover:text-blue-600 truncate", children: block.name }) }),
                 /* @__PURE__ */ jsx21("span", { className: "inline-block text-[9px] uppercase tracking-wider font-semibold text-slate-400 bg-slate-100 px-1 py-0.2 rounded", children: block.category })
               ] })
@@ -7321,6 +7529,18 @@ function resolveEditorConfig(config) {
 }
 
 // src/editor.tsx
+import {
+  Monitor,
+  Tablet,
+  Smartphone,
+  Plus,
+  Layers as Layers2,
+  Sliders,
+  Undo2 as Undo22,
+  Redo2 as Redo22,
+  X as X5,
+  Boxes as Boxes2
+} from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var KubuildEditor = ({
   initialDocument,
@@ -7342,9 +7562,16 @@ var KubuildEditor = ({
     selectedNodeId,
     navigatorMode,
     tableSpreadsheetMode,
-    setTableSpreadsheetMode
+    setTableSpreadsheetMode,
+    undo,
+    redo,
+    canUndo,
+    canRedo
   } = useEditorStore();
   const lastLoadedDocRef = React19.useRef(void 0);
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState17(false);
+  const [isMobileInspectorOpen, setIsMobileInspectorOpen] = useState17(false);
+  const [isMobileLayersOpen, setIsMobileLayersOpen] = useState17(false);
   const activeTable = useMemo4(
     () => findActiveTableNode(document2.document, selectedNodeId),
     [document2.document, selectedNodeId]
@@ -7373,65 +7600,245 @@ var KubuildEditor = ({
   }, [context, sampleVariables]);
   const viewportWidthMap = {
     desktop: "w-full max-w-6xl",
-    tablet: "w-[768px]",
-    mobile: "w-[375px]"
+    tablet: "w-full max-w-[768px] sm:w-[768px]",
+    mobile: "w-full max-w-[375px] sm:w-[375px]"
+  };
+  const viewportIcons = {
+    desktop: /* @__PURE__ */ jsx23(Monitor, { className: "w-3.5 h-3.5" }),
+    tablet: /* @__PURE__ */ jsx23(Tablet, { className: "w-3.5 h-3.5" }),
+    mobile: /* @__PURE__ */ jsx23(Smartphone, { className: "w-3.5 h-3.5" })
   };
   const resolvedConfig = useMemo4(() => resolveEditorConfig(config), [config]);
-  return /* @__PURE__ */ jsxs22("div", { className: `flex flex-col h-full bg-slate-100 text-slate-900 relative ${className || ""}`, children: [
-    navigatorMode === "floating" && /* @__PURE__ */ jsx23(LayersPanel, { registry }),
-    activeTable && tableSpreadsheetMode === "floating" && /* @__PURE__ */ jsx23(
-      TableSpreadsheetEditor,
-      {
-        registry,
-        tableNode: activeTable,
-        mode: "floating",
-        onToggleMode: () => setTableSpreadsheetMode("docked"),
-        onClose: () => setTableSpreadsheetMode("hidden")
-      }
-    ),
-    resolvedConfig.toolbar.enabled && /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-4 py-2 bg-white border-b border-slate-200", children: [
-      resolvedConfig.toolbar.showTitle ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx23("span", { className: "font-semibold text-slate-800 text-sm", children: "KUBUILD Editor" }),
-        /* @__PURE__ */ jsx23("span", { className: "text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded border", children: document2.metadata?.title || "Untitled" })
-      ] }) : /* @__PURE__ */ jsx23("div", {}),
-      /* @__PURE__ */ jsx23(EditorToolbar, { registry, config: resolvedConfig.toolbar }),
-      resolvedConfig.toolbar.showViewportSwitcher && /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-1 bg-slate-100 p-1 rounded-md text-xs", children: ["desktop", "tablet", "mobile"].map((vp) => /* @__PURE__ */ jsx23(
-        "button",
-        {
-          type: "button",
-          onClick: () => setViewport(vp),
-          className: `px-3 py-1 rounded capitalize font-medium transition ${viewport === vp ? "bg-white text-blue-600 shadow-sm" : "text-slate-600 hover:text-slate-900"}`,
-          children: vp
-        },
-        vp
-      )) }),
-      resolvedConfig.toolbar.showSelectionStatus && /* @__PURE__ */ jsx23("div", { className: "text-xs text-slate-500", children: selectedNodeId ? `Selected: #${selectedNodeId}` : "No element selected" })
-    ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex flex-1 overflow-hidden min-h-0", children: [
-      resolvedConfig.sidebar.enabled && /* @__PURE__ */ jsx23("div", { className: "w-80 shrink-0 bg-white border-r border-slate-200 overflow-hidden flex flex-col min-h-0 h-full", children: /* @__PURE__ */ jsx23(LeftSidebar, { registry, config: resolvedConfig.sidebar }) }),
-      navigatorMode === "docked" && /* @__PURE__ */ jsx23("div", { className: "w-60 shrink-0 bg-white border-r border-slate-200 overflow-hidden flex flex-col min-h-0 h-full", children: /* @__PURE__ */ jsx23(LayersPanel, { registry }) }),
-      /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden flex flex-col min-h-0 h-full", children: [
-        /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-auto p-8 flex justify-center items-start min-h-0", children: /* @__PURE__ */ jsx23(
-          "div",
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      className: `flex flex-col h-full bg-slate-100 text-slate-900 relative overflow-hidden ${className || ""}`,
+      children: [
+        navigatorMode === "floating" && /* @__PURE__ */ jsx23(LayersPanel, { registry }),
+        activeTable && tableSpreadsheetMode === "floating" && /* @__PURE__ */ jsx23(
+          TableSpreadsheetEditor,
           {
-            className: `${viewportWidthMap[viewport]} bg-white shadow-md rounded-lg overflow-hidden transition-all duration-200 min-h-[600px] border border-slate-200`,
-            children: /* @__PURE__ */ jsx23(
-              EditorCanvas,
+            registry,
+            tableNode: activeTable,
+            mode: "floating",
+            onToggleMode: () => setTableSpreadsheetMode("docked"),
+            onClose: () => setTableSpreadsheetMode("hidden")
+          }
+        ),
+        isMobileSidebarOpen && resolvedConfig.sidebar.enabled && /* @__PURE__ */ jsxs22("div", { className: "fixed inset-0 z-50 flex lg:hidden animate-in fade-in duration-200", children: [
+          /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: "fixed inset-0 bg-slate-950/50 backdrop-blur-xs transition-opacity",
+              onClick: () => setIsMobileSidebarOpen(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs22("div", { className: "relative w-80 max-w-[85vw] bg-white h-full shadow-2xl flex flex-col z-10 animate-in slide-in-from-left duration-200", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-3.5 py-2.5 border-b border-slate-200 bg-slate-50", children: [
+              /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx23(Boxes2, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ jsx23("span", { className: "font-bold text-xs text-slate-800", children: "Add Components & Blocks" })
+              ] }),
+              /* @__PURE__ */ jsx23(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsMobileSidebarOpen(false),
+                  className: "p-1 rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-200 transition",
+                  children: /* @__PURE__ */ jsx23(X5, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ jsx23(LeftSidebar, { registry, config: resolvedConfig.sidebar }) })
+          ] })
+        ] }),
+        isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ jsxs22("div", { className: "fixed inset-0 z-50 flex justify-end lg:hidden animate-in fade-in duration-200", children: [
+          /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: "fixed inset-0 bg-slate-950/50 backdrop-blur-xs transition-opacity",
+              onClick: () => setIsMobileInspectorOpen(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs22("div", { className: "relative w-84 max-w-[90vw] sm:max-w-md bg-white h-full shadow-2xl flex flex-col z-10 animate-in slide-in-from-right duration-200", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-3.5 py-2.5 border-b border-slate-200 bg-slate-50", children: [
+              /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx23(Sliders, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ jsx23("span", { className: "font-bold text-xs text-slate-800", children: selectedNodeId ? `Inspector (#${selectedNodeId})` : "Inspector & Properties" })
+              ] }),
+              /* @__PURE__ */ jsx23(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsMobileInspectorOpen(false),
+                  className: "p-1 rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-200 transition",
+                  children: /* @__PURE__ */ jsx23(X5, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ jsx23(InspectorPanel, { registry, config: resolvedConfig.inspector }) })
+          ] })
+        ] }),
+        isMobileLayersOpen && /* @__PURE__ */ jsxs22("div", { className: "fixed inset-0 z-50 flex lg:hidden animate-in fade-in duration-200", children: [
+          /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: "fixed inset-0 bg-slate-950/50 backdrop-blur-xs transition-opacity",
+              onClick: () => setIsMobileLayersOpen(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs22("div", { className: "relative w-72 max-w-[85vw] bg-white h-full shadow-2xl flex flex-col z-10 animate-in slide-in-from-left duration-200", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-3.5 py-2.5 border-b border-slate-200 bg-slate-50", children: [
+              /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx23(Layers2, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ jsx23("span", { className: "font-bold text-xs text-slate-800", children: "Element Tree / Layers" })
+              ] }),
+              /* @__PURE__ */ jsx23(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsMobileLayersOpen(false),
+                  className: "p-1 rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-200 transition",
+                  children: /* @__PURE__ */ jsx23(X5, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ jsx23(LayersPanel, { registry }) })
+          ] })
+        ] }),
+        resolvedConfig.toolbar.enabled && /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-3 py-1.5 sm:px-4 sm:py-2 bg-white border-b border-slate-200 gap-2 overflow-x-auto min-h-[44px]", children: [
+          resolvedConfig.toolbar.showTitle ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 shrink-0", children: [
+            /* @__PURE__ */ jsx23("span", { className: "font-bold text-slate-800 text-xs sm:text-sm tracking-tight", children: "KUBUILD Editor" }),
+            /* @__PURE__ */ jsx23("span", { className: "text-[11px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded border max-w-[120px] sm:max-w-[200px] truncate font-medium", children: document2.metadata?.title || "Untitled" })
+          ] }) : /* @__PURE__ */ jsx23("div", {}),
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 shrink-0", children: [
+            /* @__PURE__ */ jsx23(EditorToolbar, { registry, config: resolvedConfig.toolbar }),
+            resolvedConfig.toolbar.showViewportSwitcher && /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-0.5 bg-slate-100 p-0.5 sm:p-1 rounded-md text-xs border border-slate-200/80", children: ["desktop", "tablet", "mobile"].map((vp) => /* @__PURE__ */ jsxs22(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewport(vp),
+                title: `Switch to ${vp} preview`,
+                className: `px-2 py-1 sm:px-2.5 sm:py-1 rounded capitalize font-medium transition flex items-center gap-1 text-[11px] sm:text-xs ${viewport === vp ? "bg-white text-blue-600 shadow-xs font-semibold" : "text-slate-600 hover:text-slate-900"}`,
+                children: [
+                  viewportIcons[vp],
+                  /* @__PURE__ */ jsx23("span", { className: "hidden md:inline", children: vp })
+                ]
+              },
+              vp
+            )) })
+          ] }),
+          resolvedConfig.toolbar.showSelectionStatus && /* @__PURE__ */ jsx23("div", { className: "hidden xl:block text-xs text-slate-500 shrink-0 font-mono", children: selectedNodeId ? `Selected: #${selectedNodeId}` : "No element selected" })
+        ] }),
+        /* @__PURE__ */ jsxs22("div", { className: "flex flex-1 overflow-hidden min-h-0 relative", children: [
+          resolvedConfig.sidebar.enabled && /* @__PURE__ */ jsx23("div", { className: "hidden lg:flex w-80 shrink-0 bg-white border-r border-slate-200 overflow-hidden flex-col min-h-0 h-full", children: /* @__PURE__ */ jsx23(LeftSidebar, { registry, config: resolvedConfig.sidebar }) }),
+          navigatorMode === "docked" && /* @__PURE__ */ jsx23("div", { className: "hidden lg:flex w-60 shrink-0 bg-white border-r border-slate-200 overflow-hidden flex-col min-h-0 h-full", children: /* @__PURE__ */ jsx23(LayersPanel, { registry }) }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden flex flex-col min-h-0 h-full bg-slate-100/90 relative", children: [
+            /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-auto p-2 sm:p-4 md:p-8 flex justify-center items-start min-h-0", children: /* @__PURE__ */ jsx23(
+              "div",
+              {
+                className: `${viewportWidthMap[viewport]} bg-white shadow-md rounded-lg overflow-hidden transition-all duration-200 min-h-[500px] border border-slate-200`,
+                children: /* @__PURE__ */ jsx23(
+                  EditorCanvas,
+                  {
+                    registry,
+                    context: previewContext,
+                    viewport,
+                    onDiagnostic,
+                    config: resolvedConfig.canvas
+                  }
+                )
+              }
+            ) }),
+            selectedNodeId && !isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ jsx23("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__ */ jsxs22(
+              "button",
+              {
+                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",
+                children: [
+                  /* @__PURE__ */ jsx23(Sliders, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ jsxs22("span", { children: [
+                    "Edit Element (#",
+                    selectedNodeId,
+                    ")"
+                  ] })
+                ]
+              }
+            ) }),
+            resolvedConfig.canvas.showBreadcrumbs && /* @__PURE__ */ jsx23(HierarchyBreadcrumbs, { registry })
+          ] }),
+          resolvedConfig.inspector.enabled && /* @__PURE__ */ jsx23("div", { className: "hidden lg:flex w-72 shrink-0 bg-white border-l border-slate-200 overflow-hidden flex-col min-h-0 h-full", children: /* @__PURE__ */ jsx23(InspectorPanel, { registry, config: resolvedConfig.inspector }) })
+        ] }),
+        /* @__PURE__ */ jsxs22("div", { className: "flex lg:hidden items-center justify-around bg-white border-t border-slate-200 px-2 py-1.5 z-20 shrink-0 shadow-lg select-none min-h-[48px]", children: [
+          resolvedConfig.sidebar.enabled && /* @__PURE__ */ jsxs22(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsMobileSidebarOpen(true),
+              className: "flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded-md text-slate-600 hover:text-blue-600 hover:bg-slate-50 active:bg-slate-100 transition",
+              children: [
+                /* @__PURE__ */ jsx23(Plus, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ jsx23("span", { className: "text-[10px] font-medium", children: "Add" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs22(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsMobileLayersOpen(true),
+              className: "flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded-md text-slate-600 hover:text-blue-600 hover:bg-slate-50 active:bg-slate-100 transition",
+              children: [
+                /* @__PURE__ */ jsx23(Layers2, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx23("span", { className: "text-[10px] font-medium", children: "Layers" })
+              ]
+            }
+          ),
+          resolvedConfig.inspector.enabled && /* @__PURE__ */ jsxs22(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsMobileInspectorOpen(true),
+              className: `flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded-md transition relative ${selectedNodeId ? "text-blue-600 font-semibold" : "text-slate-600 hover:text-blue-600 hover:bg-slate-50"}`,
+              children: [
+                /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx23(Sliders, { className: "w-4 h-4" }),
+                  selectedNodeId && /* @__PURE__ */ jsx23("span", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-blue-600 ring-2 ring-white" })
+                ] }),
+                /* @__PURE__ */ jsx23("span", { className: "text-[10px]", children: selectedNodeId ? "Inspect *" : "Inspect" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx23("div", { className: "h-5 w-px bg-slate-200 mx-0.5" }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx23(
+              "button",
+              {
+                type: "button",
+                disabled: !canUndo,
+                onClick: undo,
+                title: "Undo",
+                className: "p-2 rounded text-slate-600 hover:text-blue-600 disabled:opacity-30 disabled:hover:text-slate-600 transition",
+                children: /* @__PURE__ */ jsx23(Undo22, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx23(
+              "button",
               {
-                registry,
-                context: previewContext,
-                viewport,
-                onDiagnostic,
-                config: resolvedConfig.canvas
+                type: "button",
+                disabled: !canRedo,
+                onClick: redo,
+                title: "Redo",
+                className: "p-2 rounded text-slate-600 hover:text-blue-600 disabled:opacity-30 disabled:hover:text-slate-600 transition",
+                children: /* @__PURE__ */ jsx23(Redo22, { className: "w-4 h-4" })
               }
             )
-          }
-        ) }),
-        resolvedConfig.canvas.showBreadcrumbs && /* @__PURE__ */ jsx23(HierarchyBreadcrumbs, { registry })
-      ] }),
-      resolvedConfig.inspector.enabled && /* @__PURE__ */ jsx23("div", { className: "w-72 shrink-0 bg-white border-l border-slate-200 overflow-hidden flex flex-col min-h-0 h-full", children: /* @__PURE__ */ jsx23(InspectorPanel, { registry, config: resolvedConfig.inspector }) })
-    ] })
-  ] });
+          ] })
+        ] })
+      ]
+    }
+  );
 };
 export {
   ANIMATION_TYPES,