@kubuild/editor 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -88,12 +88,13 @@ module.exports = __toCommonJS(index_exports);
 
 // src/editor.tsx
 var import_react19 = __toESM(require("react"), 1);
-var import_components6 = require("@kubuild/components");
+var import_components7 = require("@kubuild/components");
 var import_core12 = require("@kubuild/core");
 
 // src/store.ts
 var import_zustand = require("zustand");
 var import_core = require("@kubuild/core");
+var import_components = require("@kubuild/components");
 function formatCommandError(err) {
   if (err && typeof err === "object" && Array.isArray(err.issues)) {
     const issues = err.issues;
@@ -118,7 +119,11 @@ function buildDefaultChildren(specs, existingIds, registry) {
     const def = registry.get(spec.type);
     const nodeProps = (0, import_core.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,
@@ -138,6 +143,7 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
   document: historyManager.document,
   selectedNodeId: null,
   hoveredNodeId: null,
+  dragPayload: null,
   viewport: "desktop",
   isDirty: false,
   canUndo: false,
@@ -147,6 +153,7 @@ var useEditorStore = (0, import_zustand.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) => ({
@@ -163,6 +170,7 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
       isDirty: false,
       selectedNodeId: null,
       hoveredNodeId: null,
+      dragPayload: null,
       clipboard: null,
       canUndo: false,
       canRedo: false
@@ -181,12 +189,15 @@ var useEditorStore = (0, import_zustand.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 = (0, import_core.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) {
@@ -203,7 +214,10 @@ var useEditorStore = (0, import_zustand.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 = (0, import_core.collectNodeIdSet)(state.document.document);
@@ -217,10 +231,49 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
       ...definition.defaultStyles ? { styles: (0, import_core.deepClone)(definition.defaultStyles) } : {},
       ...children ? { children } : {}
     };
-    get().dispatch((doc) => (0, import_core.insertNode)(doc, { parentId: targetParentId, node }));
+    get().dispatch((doc) => (0, import_core.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 = import_components.STARTER_BLOCKS.find((b) => b.id === blockOrId);
+    } else {
+      blockDef = blockOrId;
+    }
+    if (!blockDef) {
+      return { success: false, error: "Block definition not found." };
+    }
+    const existingIds = (0, import_core.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) => (0, import_core.insertNode)(doc, { parentId: targetParentId, node: nodeTree, index }));
+      get().selectNode(nodeTree.id);
+      return { success: true, nodeId: nodeTree.id };
+    } catch {
+      try {
+        get().dispatch(
+          (doc) => (0, import_core.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) {
@@ -232,10 +285,16 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
     }
     const targetParent = (0, import_core.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 ((0, import_core.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) {
@@ -372,10 +431,16 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
     }
     const targetParent = (0, import_core.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 ((0, import_core.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) {
@@ -384,7 +449,9 @@ var useEditorStore = (0, import_zustand.create)((set, get) => ({
     const existingIds = (0, import_core.collectNodeIdSet)(document2.document);
     const { clonedNode } = (0, import_core.cloneTreeWithNewIds)(clipboard, void 0, existingIds);
     try {
-      get().dispatch((doc) => (0, import_core.insertNode)(doc, { parentId: targetParentId, node: clonedNode, index }));
+      get().dispatch(
+        (doc) => (0, import_core.insertNode)(doc, { parentId: targetParentId, node: clonedNode, index })
+      );
     } catch (err) {
       return { success: false, error: formatCommandError(err) };
     }
@@ -549,7 +616,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 = (0, import_react.useRef)(null);
@@ -626,7 +705,11 @@ var EditorCanvas = ({
       const direction = ARROW_DIRECTIONS[e.key];
       if (direction) {
         e.preventDefault();
-        const target = (0, import_core3.getNavigationTarget)(state.document.document, state.selectedNodeId, direction);
+        const target = (0, import_core3.getNavigationTarget)(
+          state.document.document,
+          state.selectedNodeId,
+          direction
+        );
         if (target) state.selectNode(target);
       }
     };
@@ -653,24 +736,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 ? (0, import_core3.findNodeById)(document2.document, draggingId) : null;
-    const hoveredNode = hoveredId ? (0, import_core3.findNodeById)(document2.document, hoveredId) : null;
-    if (!hoveredId || !draggedNode || !hoveredNode || (0, import_core3.isDescendantOf)(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 = (0, import_core3.findNodeById)(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 = (0, import_core3.findNodeById)(document2.document, activePayload.nodeId);
+      if (!draggedNode || (0, import_core3.isDescendantOf)(draggedNode, hoveredId)) {
+        setDropTarget(null);
+        e.dataTransfer.dropEffect = "none";
+        return;
+      }
+    }
+    const hoveredNode = (0, import_core3.findNodeById)(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;
@@ -691,18 +821,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,
@@ -717,15 +850,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__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
@@ -2077,21 +2224,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__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
-            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "svg",
+              {
+                width: "13",
+                height: "13",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+                ]
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Navigator" })
           ]
         }
       ),
-      showNavigatorToggle && (showClipboard || showHistory || showCodeViewer || showExportImport) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
+      showNavigatorToggle && (showClipboard || showHistory || showCodeViewer || showExportImport) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hidden sm:block h-4 w-px bg-slate-200 mx-1" }),
       (showClipboard || showHistory) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
         showClipboard && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2166,21 +2324,21 @@ var EditorToolbar = ({
           )
         ] })
       ] }),
-      (showClipboard || showHistory) && (showCodeViewer || showExportImport) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
+      (showClipboard || showHistory) && (showCodeViewer || showExportImport) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hidden sm:block h-4 w-px bg-slate-200 mx-1" }),
       showCodeViewer && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "font-mono text-[11px] font-bold text-blue-600", children: "<>" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "View Code" })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hidden sm:inline", children: "View Code" })
           ]
         }
       ),
-      showExportImport && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      showExportImport && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
         showCodeViewer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
@@ -2188,7 +2346,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"
           }
         ),
@@ -2199,8 +2357,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__ */ (0, import_jsx_runtime6.jsx)(
@@ -2209,7 +2367,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"
           }
         )
@@ -2242,16 +2400,16 @@ var EditorToolbar = ({
 
 // src/inspector-panel.tsx
 var import_react13 = require("react");
-var import_components3 = require("@kubuild/components");
+var import_components4 = require("@kubuild/components");
 var import_core8 = require("@kubuild/core");
 var import_schema5 = require("@kubuild/schema");
 
 // src/variable-picker.tsx
 var import_schema2 = require("@kubuild/schema");
-var import_components = require("@kubuild/components");
+var import_components2 = require("@kubuild/components");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function getCompatibleCatalogEntries(field, catalog) {
-  const expectedType = (0, import_components.primitiveTypeForField)(field);
+  const expectedType = (0, import_components2.primitiveTypeForField)(field);
   if (!expectedType || !catalog) {
     return [];
   }
@@ -5456,7 +5614,7 @@ var StyleManagerAccordion = ({
 
 // src/traits-panel.tsx
 var import_react12 = require("react");
-var import_components2 = require("@kubuild/components");
+var import_components3 = require("@kubuild/components");
 var import_core7 = require("@kubuild/core");
 var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -5779,7 +5937,7 @@ var TraitsPanel = ({
     grouped.set(key, list);
   }
   const orderedGroups = [
-    ...import_components2.TRAIT_GROUP_ORDER.filter((g) => grouped.has(g)),
+    ...import_components3.TRAIT_GROUP_ORDER.filter((g) => grouped.has(g)),
     ...grouped.has(void 0) ? [void 0] : []
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `flex flex-col gap-4 ${className ?? "p-3"} text-sm text-slate-900`, children: orderedGroups.map((group) => {
@@ -5787,7 +5945,7 @@ var TraitsPanel = ({
     const traitNames = new Set(groupTraits.map((t) => t.name));
     const isLinkGroup = group === "link" && traitNames.has("href");
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2", children: group ? import_components2.TRAIT_GROUP_LABELS[group] : "Other" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2", children: group ? import_components3.TRAIT_GROUP_LABELS[group] : "Other" }),
       isLinkGroup ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         LinkTraitControl,
         {
@@ -6601,7 +6759,7 @@ var InspectorPanel = ({
             return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { className: "block text-xs font-medium text-slate-600 mb-1", children: field.label }),
               !bound && renderPropControl(field),
-              (0, import_components3.isBindableField)(field) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              (0, import_components4.isBindableField)(field) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 VariableBindingControl,
                 {
                   field,
@@ -6949,11 +7107,11 @@ var LayersPanel = ({ registry, className }) => {
 
 // src/breadcrumbs.tsx
 var import_react15 = __toESM(require("react"), 1);
-var import_components4 = require("@kubuild/components");
+var import_components5 = require("@kubuild/components");
 var import_core10 = require("@kubuild/core");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var HierarchyBreadcrumbs = ({
-  registry = (0, import_components4.createDefaultComponentRegistry)(),
+  registry = (0, import_components5.createDefaultComponentRegistry)(),
   document: propDoc,
   selectedNodeId: propSelectedNodeId,
   className
@@ -7019,7 +7177,15 @@ var import_lucide_react9 = require("lucide-react");
 // src/component-panel.tsx
 var import_react16 = require("react");
 var import_jsx_runtime20 = require("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",
@@ -7031,6 +7197,7 @@ var CATEGORY_LABELS = {
 };
 var ComponentPanel = ({ registry, className }) => {
   const insertComponent = useEditorStore((s) => s.insertComponent);
+  const setDragPayload = useEditorStore((s) => s.setDragPayload);
   const [error, setError] = (0, import_react16.useState)(null);
   const groups = CATEGORY_ORDER.map((category) => ({
     category,
@@ -7040,6 +7207,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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `flex flex-col gap-4 p-3 overflow-y-auto h-full min-h-0 ${className || ""}`, children: [
     error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
@@ -7055,12 +7232,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__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mb-1.5 text-slate-500 group-hover:text-blue-600 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ComponentIcon, { iconOrType: definition.icon ?? definition.type, size: 22 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mb-1.5 text-slate-500 group-hover:text-blue-600 transition-colors pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ComponentIcon, { iconOrType: definition.icon ?? definition.type, size: 22 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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
@@ -7071,7 +7252,7 @@ var ComponentPanel = ({ registry, className }) => {
 
 // src/blocks-panel.tsx
 var import_react17 = require("react");
-var import_components5 = require("@kubuild/components");
+var import_components6 = require("@kubuild/components");
 var import_core11 = require("@kubuild/core");
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -7137,7 +7318,7 @@ var BlockThumbnail = ({ block }) => {
   }
 };
 var BlocksPanel = ({
-  blocks = import_components5.STARTER_BLOCKS,
+  blocks = import_components6.STARTER_BLOCKS,
   className,
   onInsertBlock
 }) => {
@@ -7181,6 +7362,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__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
@@ -7211,13 +7403,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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mb-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BlockThumbnail, { block }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mb-2 w-full pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BlockThumbnail, { block }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "w-full pointer-events-none", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-between gap-1 mb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[11px] font-semibold text-slate-800 group-hover:text-blue-600 truncate", children: block.name }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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 })
               ] })
@@ -7367,10 +7563,11 @@ function resolveEditorConfig(config) {
 }
 
 // src/editor.tsx
+var import_lucide_react10 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var KubuildEditor = ({
   initialDocument,
-  registry = (0, import_components6.createDefaultComponentRegistry)(),
+  registry = (0, import_components7.createDefaultComponentRegistry)(),
   context,
   variableCatalog,
   onChange,
@@ -7388,9 +7585,16 @@ var KubuildEditor = ({
     selectedNodeId,
     navigatorMode,
     tableSpreadsheetMode,
-    setTableSpreadsheetMode
+    setTableSpreadsheetMode,
+    undo,
+    redo,
+    canUndo,
+    canRedo
   } = useEditorStore();
   const lastLoadedDocRef = import_react19.default.useRef(void 0);
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = (0, import_react19.useState)(false);
+  const [isMobileInspectorOpen, setIsMobileInspectorOpen] = (0, import_react19.useState)(false);
+  const [isMobileLayersOpen, setIsMobileLayersOpen] = (0, import_react19.useState)(false);
   const activeTable = (0, import_react19.useMemo)(
     () => findActiveTableNode(document2.document, selectedNodeId),
     [document2.document, selectedNodeId]
@@ -7419,65 +7623,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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Monitor, { className: "w-3.5 h-3.5" }),
+    tablet: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Tablet, { className: "w-3.5 h-3.5" }),
+    mobile: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Smartphone, { className: "w-3.5 h-3.5" })
   };
   const resolvedConfig = (0, import_react19.useMemo)(() => resolveEditorConfig(config), [config]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `flex flex-col h-full bg-slate-100 text-slate-900 relative ${className || ""}`, children: [
-    navigatorMode === "floating" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LayersPanel, { registry }),
-    activeTable && tableSpreadsheetMode === "floating" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      TableSpreadsheetEditor,
-      {
-        registry,
-        tableNode: activeTable,
-        mode: "floating",
-        onToggleMode: () => setTableSpreadsheetMode("docked"),
-        onClose: () => setTableSpreadsheetMode("hidden")
-      }
-    ),
-    resolvedConfig.toolbar.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between px-4 py-2 bg-white border-b border-slate-200", children: [
-      resolvedConfig.toolbar.showTitle ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-semibold text-slate-800 text-sm", children: "KUBUILD Editor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded border", children: document2.metadata?.title || "Untitled" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EditorToolbar, { registry, config: resolvedConfig.toolbar }),
-      resolvedConfig.toolbar.showViewportSwitcher && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center gap-1 bg-slate-100 p-1 rounded-md text-xs", children: ["desktop", "tablet", "mobile"].map((vp) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        "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__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-xs text-slate-500", children: selectedNodeId ? `Selected: #${selectedNodeId}` : "No element selected" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-1 overflow-hidden min-h-0", children: [
-      resolvedConfig.sidebar.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(LeftSidebar, { registry, config: resolvedConfig.sidebar }) }),
-      navigatorMode === "docked" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(LayersPanel, { registry }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden flex flex-col min-h-0 h-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-auto p-8 flex justify-center items-start min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: `flex flex-col h-full bg-slate-100 text-slate-900 relative overflow-hidden ${className || ""}`,
+      children: [
+        navigatorMode === "floating" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LayersPanel, { registry }),
+        activeTable && tableSpreadsheetMode === "floating" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          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__ */ (0, import_jsx_runtime23.jsx)(
-              EditorCanvas,
+            registry,
+            tableNode: activeTable,
+            mode: "floating",
+            onToggleMode: () => setTableSpreadsheetMode("docked"),
+            onClose: () => setTableSpreadsheetMode("hidden")
+          }
+        ),
+        isMobileSidebarOpen && resolvedConfig.sidebar.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fixed inset-0 z-50 flex lg:hidden animate-in fade-in duration-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: "fixed inset-0 bg-slate-950/50 backdrop-blur-xs transition-opacity",
+              onClick: () => setIsMobileSidebarOpen(false)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between px-3.5 py-2.5 border-b border-slate-200 bg-slate-50", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Boxes, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-bold text-xs text-slate-800", children: "Add Components & Blocks" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LeftSidebar, { registry, config: resolvedConfig.sidebar }) })
+          ] })
+        ] }),
+        isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fixed inset-0 z-50 flex justify-end lg:hidden animate-in fade-in duration-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: "fixed inset-0 bg-slate-950/50 backdrop-blur-xs transition-opacity",
+              onClick: () => setIsMobileInspectorOpen(false)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between px-3.5 py-2.5 border-b border-slate-200 bg-slate-50", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Sliders, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-bold text-xs text-slate-800", children: selectedNodeId ? `Inspector (#${selectedNodeId})` : "Inspector & Properties" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InspectorPanel, { registry, config: resolvedConfig.inspector }) })
+          ] })
+        ] }),
+        isMobileLayersOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fixed inset-0 z-50 flex lg:hidden animate-in fade-in duration-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: "fixed inset-0 bg-slate-950/50 backdrop-blur-xs transition-opacity",
+              onClick: () => setIsMobileLayersOpen(false)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between px-3.5 py-2.5 border-b border-slate-200 bg-slate-50", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Layers, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-bold text-xs text-slate-800", children: "Element Tree / Layers" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-hidden min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LayersPanel, { registry }) })
+          ] })
+        ] }),
+        resolvedConfig.toolbar.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-bold text-slate-800 text-xs sm:text-sm tracking-tight", children: "KUBUILD Editor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EditorToolbar, { registry, config: resolvedConfig.toolbar }),
+            resolvedConfig.toolbar.showViewportSwitcher && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsxs)(
+              "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__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hidden md:inline", children: vp })
+                ]
+              },
+              vp
+            )) })
+          ] }),
+          resolvedConfig.toolbar.showSelectionStatus && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hidden xl:block text-xs text-slate-500 shrink-0 font-mono", children: selectedNodeId ? `Selected: #${selectedNodeId}` : "No element selected" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-1 overflow-hidden min-h-0 relative", children: [
+          resolvedConfig.sidebar.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(LeftSidebar, { registry, config: resolvedConfig.sidebar }) }),
+          navigatorMode === "docked" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(LayersPanel, { registry }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden flex flex-col min-h-0 h-full bg-slate-100/90 relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-auto p-2 sm:p-4 md:p-8 flex justify-center items-start min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "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__ */ (0, import_jsx_runtime23.jsx)(
+                  EditorCanvas,
+                  {
+                    registry,
+                    context: previewContext,
+                    viewport,
+                    onDiagnostic,
+                    config: resolvedConfig.canvas
+                  }
+                )
+              }
+            ) }),
+            selectedNodeId && !isMobileInspectorOpen && resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "lg:hidden fixed bottom-14 left-1/2 -translate-x-1/2 z-30 animate-in fade-in slide-in-from-bottom-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Sliders, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
+                    "Edit Element (#",
+                    selectedNodeId,
+                    ")"
+                  ] })
+                ]
+              }
+            ) }),
+            resolvedConfig.canvas.showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HierarchyBreadcrumbs, { registry })
+          ] }),
+          resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(InspectorPanel, { registry, config: resolvedConfig.inspector }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime23.jsxs)(
+            "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Plus, { className: "w-4 h-4 text-blue-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] font-medium", children: "Add" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Layers, { className: "w-4 h-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] font-medium", children: "Layers" })
+              ]
+            }
+          ),
+          resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Sliders, { className: "w-4 h-4" }),
+                  selectedNodeId && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-blue-600 ring-2 ring-white" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px]", children: selectedNodeId ? "Inspect *" : "Inspect" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-5 w-px bg-slate-200 mx-0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Undo2, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Redo2, { className: "w-4 h-4" })
               }
             )
-          }
-        ) }),
-        resolvedConfig.canvas.showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HierarchyBreadcrumbs, { registry })
-      ] }),
-      resolvedConfig.inspector.enabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(InspectorPanel, { registry, config: resolvedConfig.inspector }) })
-    ] })
-  ] });
+          ] })
+        ] })
+      ]
+    }
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {