@tecof/theme-editor 0.0.37 → 0.0.39

package/dist/index.js

@@ -507,7 +507,7 @@ var setRootProps = (draft, patch) => {
 
 // src/engine/store.ts
 var pushToHistory = (state3) => {
-  state3.history.past.push(JSON.parse(JSON.stringify(state3.document)));
+  state3.history.past.push(state3.document);
   state3.history.future = [];
 };
 var useEditorStore = zustand.create()(
@@ -568,13 +568,13 @@ var useEditorStore = zustand.create()(
     undo: () => set2((state3) => {
       if (state3.history.past.length === 0) return;
       const previous = state3.history.past.pop();
-      state3.history.future.push(JSON.parse(JSON.stringify(state3.document)));
+      state3.history.future.push(state3.document);
       state3.document = previous;
     }),
     redo: () => set2((state3) => {
       if (state3.history.future.length === 0) return;
       const next = state3.history.future.pop();
-      state3.history.past.push(JSON.parse(JSON.stringify(state3.document)));
+      state3.history.past.push(state3.document);
       state3.document = next;
     })
   }))
@@ -650,6 +650,44 @@ var NodeRenderer = ({ node, index: index2, zoneKey }) => {
     },
     [selectNode, node.props.id, node.type, readOnly]
   );
+  const handleDoubleClick = React__default.useCallback(
+    (e3) => {
+      if (readOnly) return;
+      const target = e3.target;
+      const validTags = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "a", "div"];
+      const tag = target.tagName.toLowerCase();
+      if (!validTags.includes(tag)) return;
+      const text2 = target.textContent?.trim() || "";
+      if (!text2) return;
+      let matchingPropName = null;
+      for (const [key, value] of Object.entries(node.props)) {
+        if (typeof value === "string" && value.trim() === text2) {
+          matchingPropName = key;
+          break;
+        }
+      }
+      if (!matchingPropName) return;
+      e3.stopPropagation();
+      target.contentEditable = "true";
+      target.focus();
+      const range = document.createRange();
+      range.selectNodeContents(target);
+      const sel = window.getSelection();
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+      const propName = matchingPropName;
+      const handleBlur = () => {
+        target.contentEditable = "false";
+        target.removeEventListener("blur", handleBlur);
+        const newText = target.textContent?.trim() || "";
+        useEditorStore.getState().updateProps(node.props.id, {
+          [propName]: newText
+        });
+      };
+      target.addEventListener("blur", handleBlur);
+    },
+    [node.props, node.props.id, readOnly]
+  );
   if (!componentConfig) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "12px", background: "#fee2e2", color: "#991b1b", fontSize: "12px", borderRadius: "4px" }, children: [
       "Bile\u015Fen bulunamad\u0131: ",
@@ -679,6 +717,7 @@ var NodeRenderer = ({ node, index: index2, zoneKey }) => {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
       style: {
         cursor: readOnly ? void 0 : "pointer"
       },
@@ -746,6 +785,10 @@ var Frame = ({ children, title = "Canvas Frame", ...props }) => {
       doc.head.appendChild(style);
     };
     copyStyles();
+    const observer = new MutationObserver(() => {
+      copyStyles();
+    });
+    observer.observe(document.head, { childList: true, subtree: true });
     if (doc.body) {
       doc.body.className = "tecof-canvas-body";
       const handleBodyClick = (e3) => {
@@ -758,9 +801,24 @@ var Frame = ({ children, title = "Canvas Frame", ...props }) => {
           }
         }
       };
+      const handleIframeKeyDown = (e3) => {
+        const event = new KeyboardEvent("keydown", {
+          key: e3.key,
+          code: e3.code,
+          ctrlKey: e3.ctrlKey,
+          metaKey: e3.metaKey,
+          shiftKey: e3.shiftKey,
+          altKey: e3.altKey,
+          bubbles: true
+        });
+        window.dispatchEvent(event);
+      };
       doc.body.addEventListener("click", handleBodyClick);
+      doc.addEventListener("keydown", handleIframeKeyDown);
       return () => {
+        observer.disconnect();
         doc.body.removeEventListener("click", handleBodyClick);
+        doc.removeEventListener("keydown", handleIframeKeyDown);
       };
     }
   }, [contentRef]);
@@ -1028,8 +1086,18 @@ var __iconNode14 = [
 ];
 var Globe = createLucideIcon("globe", __iconNode14);
 
-// node_modules/lucide-react/dist/esm/icons/grip-vertical.js
+// node_modules/lucide-react/dist/esm/icons/grid-3x3.js
 var __iconNode15 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M3 9h18", key: "1pudct" }],
+  ["path", { d: "M3 15h18", key: "5xshup" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "M15 3v18", key: "14nvp0" }]
+];
+var Grid3x3 = createLucideIcon("grid-3x3", __iconNode15);
+
+// node_modules/lucide-react/dist/esm/icons/grip-vertical.js
+var __iconNode16 = [
   ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
   ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
   ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
@@ -1037,28 +1105,28 @@ var __iconNode15 = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-var GripVertical = createLucideIcon("grip-vertical", __iconNode15);
+var GripVertical = createLucideIcon("grip-vertical", __iconNode16);
 
 // node_modules/lucide-react/dist/esm/icons/image-plus.js
-var __iconNode16 = [
+var __iconNode17 = [
   ["path", { d: "M16 5h6", key: "1vod17" }],
   ["path", { d: "M19 2v6", key: "4bpg5p" }],
   ["path", { d: "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5", key: "1ue2ih" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }]
 ];
-var ImagePlus = createLucideIcon("image-plus", __iconNode16);
+var ImagePlus = createLucideIcon("image-plus", __iconNode17);
 
 // node_modules/lucide-react/dist/esm/icons/image.js
-var __iconNode17 = [
+var __iconNode18 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-var Image2 = createLucideIcon("image", __iconNode17);
+var Image2 = createLucideIcon("image", __iconNode18);
 
 // node_modules/lucide-react/dist/esm/icons/languages.js
-var __iconNode18 = [
+var __iconNode19 = [
   ["path", { d: "m5 8 6 6", key: "1wu5hv" }],
   ["path", { d: "m4 14 6-6 2-3", key: "1k1g8d" }],
   ["path", { d: "M2 5h12", key: "or177f" }],
@@ -1066,29 +1134,71 @@ var __iconNode18 = [
   ["path", { d: "m22 22-5-10-5 10", key: "don7ne" }],
   ["path", { d: "M14 18h6", key: "1m8k6r" }]
 ];
-var Languages = createLucideIcon("languages", __iconNode18);
+var Languages = createLucideIcon("languages", __iconNode19);
+
+// node_modules/lucide-react/dist/esm/icons/layers.js
+var __iconNode20 = [
+  [
+    "path",
+    {
+      d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+      key: "zw3jo"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+      key: "kqbvx6"
+    }
+  ]
+];
+var Layers = createLucideIcon("layers", __iconNode20);
 
 // node_modules/lucide-react/dist/esm/icons/link-2.js
-var __iconNode19 = [
+var __iconNode21 = [
   ["path", { d: "M9 17H7A5 5 0 0 1 7 7h2", key: "8i5ue5" }],
   ["path", { d: "M15 7h2a5 5 0 1 1 0 10h-2", key: "1b9ql8" }],
   ["line", { x1: "8", x2: "16", y1: "12", y2: "12", key: "1jonct" }]
 ];
-var Link2 = createLucideIcon("link-2", __iconNode19);
+var Link2 = createLucideIcon("link-2", __iconNode21);
 
 // node_modules/lucide-react/dist/esm/icons/link.js
-var __iconNode20 = [
+var __iconNode22 = [
   ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
   ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
 ];
-var Link = createLucideIcon("link", __iconNode20);
+var Link = createLucideIcon("link", __iconNode22);
 
 // node_modules/lucide-react/dist/esm/icons/loader-circle.js
-var __iconNode21 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-var LoaderCircle = createLucideIcon("loader-circle", __iconNode21);
+var __iconNode23 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+var LoaderCircle = createLucideIcon("loader-circle", __iconNode23);
+
+// node_modules/lucide-react/dist/esm/icons/monitor.js
+var __iconNode24 = [
+  ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
+  ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
+  ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
+];
+var Monitor = createLucideIcon("monitor", __iconNode24);
+
+// node_modules/lucide-react/dist/esm/icons/panels-top-left.js
+var __iconNode25 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M3 9h18", key: "1pudct" }],
+  ["path", { d: "M9 21V9", key: "1oto5p" }]
+];
+var PanelsTopLeft = createLucideIcon("panels-top-left", __iconNode25);
 
 // node_modules/lucide-react/dist/esm/icons/pencil.js
-var __iconNode22 = [
+var __iconNode26 = [
   [
     "path",
     {
@@ -1098,71 +1208,113 @@ var __iconNode22 = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-var Pencil = createLucideIcon("pencil", __iconNode22);
+var Pencil = createLucideIcon("pencil", __iconNode26);
 
 // node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode23 = [
+var __iconNode27 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode23);
+var Plus = createLucideIcon("plus", __iconNode27);
+
+// node_modules/lucide-react/dist/esm/icons/redo-2.js
+var __iconNode28 = [
+  ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
+  ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
+];
+var Redo2 = createLucideIcon("redo-2", __iconNode28);
 
 // node_modules/lucide-react/dist/esm/icons/refresh-ccw.js
-var __iconNode24 = [
+var __iconNode29 = [
   ["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
   ["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }],
   ["path", { d: "M16 16h5v5", key: "ccwih5" }]
 ];
-var RefreshCcw = createLucideIcon("refresh-ccw", __iconNode24);
+var RefreshCcw = createLucideIcon("refresh-ccw", __iconNode29);
 
 // node_modules/lucide-react/dist/esm/icons/refresh-cw.js
-var __iconNode25 = [
+var __iconNode30 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-var RefreshCw = createLucideIcon("refresh-cw", __iconNode25);
+var RefreshCw = createLucideIcon("refresh-cw", __iconNode30);
 
 // node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
-var __iconNode26 = [
+var __iconNode31 = [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
 ];
-var RotateCcw = createLucideIcon("rotate-ccw", __iconNode26);
+var RotateCcw = createLucideIcon("rotate-ccw", __iconNode31);
+
+// node_modules/lucide-react/dist/esm/icons/save.js
+var __iconNode32 = [
+  [
+    "path",
+    {
+      d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
+      key: "1c8476"
+    }
+  ],
+  ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
+  ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
+];
+var Save = createLucideIcon("save", __iconNode32);
 
 // node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode27 = [
+var __iconNode33 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-var Search = createLucideIcon("search", __iconNode27);
+var Search = createLucideIcon("search", __iconNode33);
+
+// node_modules/lucide-react/dist/esm/icons/smartphone.js
+var __iconNode34 = [
+  ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }]
+];
+var Smartphone = createLucideIcon("smartphone", __iconNode34);
+
+// node_modules/lucide-react/dist/esm/icons/tablet.js
+var __iconNode35 = [
+  ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2", key: "76otgf" }],
+  ["line", { x1: "12", x2: "12.01", y1: "18", y2: "18", key: "1dp563" }]
+];
+var Tablet = createLucideIcon("tablet", __iconNode35);
 
 // node_modules/lucide-react/dist/esm/icons/trash-2.js
-var __iconNode28 = [
+var __iconNode36 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-var Trash2 = createLucideIcon("trash-2", __iconNode28);
+var Trash2 = createLucideIcon("trash-2", __iconNode36);
+
+// node_modules/lucide-react/dist/esm/icons/undo-2.js
+var __iconNode37 = [
+  ["path", { d: "M9 14 4 9l5-5", key: "102s5s" }],
+  ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11", key: "f3b9sd" }]
+];
+var Undo2 = createLucideIcon("undo-2", __iconNode37);
 
 // node_modules/lucide-react/dist/esm/icons/upload.js
-var __iconNode29 = [
+var __iconNode38 = [
   ["path", { d: "M12 3v12", key: "1x0j5s" }],
   ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
 ];
-var Upload = createLucideIcon("upload", __iconNode29);
+var Upload = createLucideIcon("upload", __iconNode38);
 
 // node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode30 = [
+var __iconNode39 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode30);
+var X = createLucideIcon("x", __iconNode39);
 var useOverlayCoords = (id, iframeEl, containerEl, documentState) => {
   const [coords, setCoords] = React__default.useState(null);
   React__default.useEffect(() => {
@@ -1539,6 +1691,7 @@ var FieldRenderer = ({
   onChange,
   readOnly = false
 }) => {
+  const [expandedIndices, setExpandedIndices] = React__default.useState({});
   const label = definition.label || name3;
   const type = definition.type;
   if (definition.render) {
@@ -1702,6 +1855,215 @@ var FieldRenderer = ({
         },
         opt.value
       )) }) });
+    case "array": {
+      const items = Array.isArray(value) ? value : [];
+      const arrayFields = definition.arrayFields || {};
+      const getItemLabel = (item2, idx) => {
+        if (!item2) return `\xD6\u011Fe ${idx + 1}`;
+        for (const val of Object.values(item2)) {
+          if (typeof val === "string" && val.trim().length > 0) {
+            return val;
+          }
+          if (Array.isArray(val)) {
+            const trVal = val.find((v2) => typeof v2 === "object" && v2 !== null && "value" in v2);
+            if (trVal && typeof trVal.value === "string" && trVal.value.trim().length > 0) {
+              return trVal.value;
+            }
+          }
+        }
+        return `\xD6\u011Fe ${idx + 1}`;
+      };
+      const toggleExpand = (idx) => {
+        setExpandedIndices((prev) => ({ ...prev, [idx]: !prev[idx] }));
+      };
+      const handleAdd = () => {
+        const newItem = {};
+        Object.entries(arrayFields).forEach(([subName, subDef]) => {
+          newItem[subName] = subDef.defaultValue !== void 0 ? subDef.defaultValue : null;
+        });
+        onChange([...items, newItem]);
+        setExpandedIndices((prev) => ({ ...prev, [items.length]: true }));
+      };
+      const handleRemove = (idx) => {
+        const copy = [...items];
+        copy.splice(idx, 1);
+        onChange(copy);
+        const newExpanded = { ...expandedIndices };
+        delete newExpanded[idx];
+        setExpandedIndices(newExpanded);
+      };
+      const handleMove = (idx, direction) => {
+        if (direction === "up" && idx === 0) return;
+        if (direction === "down" && idx === items.length - 1) return;
+        const copy = [...items];
+        const targetIdx = direction === "up" ? idx - 1 : idx + 1;
+        const temp = copy[idx];
+        copy[idx] = copy[targetIdx];
+        copy[targetIdx] = temp;
+        onChange(copy);
+        const newExpanded = { ...expandedIndices };
+        const tempExpanded = newExpanded[idx];
+        newExpanded[idx] = newExpanded[targetIdx];
+        newExpanded[targetIdx] = tempExpanded;
+        setExpandedIndices(newExpanded);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, readOnly, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px", width: "100%" }, children: [
+        items.map((item2, idx) => {
+          const isExpanded = !!expandedIndices[idx];
+          const itemLabel = getItemLabel(item2, idx);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                border: "1px solid #e4e4e7",
+                borderRadius: "8px",
+                overflow: "hidden",
+                background: "#f8fafc",
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    onClick: () => toggleExpand(idx),
+                    style: {
+                      padding: "8px 12px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      cursor: "pointer",
+                      background: "#ffffff",
+                      userSelect: "none"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                        isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14, color: "#71717a" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 14, color: "#71717a" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", fontWeight: 500, color: "#3f3f46" }, children: itemLabel })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, onClick: (e3) => e3.stopPropagation(), children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => handleMove(idx, "up"),
+                            disabled: idx === 0,
+                            style: {
+                              background: "transparent",
+                              border: "none",
+                              cursor: idx === 0 ? "not-allowed" : "pointer",
+                              padding: "2px",
+                              color: idx === 0 ? "#e4e4e7" : "#71717a"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUp, { size: 12 })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => handleMove(idx, "down"),
+                            disabled: idx === items.length - 1,
+                            style: {
+                              background: "transparent",
+                              border: "none",
+                              cursor: idx === items.length - 1 ? "not-allowed" : "pointer",
+                              padding: "2px",
+                              color: idx === items.length - 1 ? "#e4e4e7" : "#71717a"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown, { size: 12 })
+                          }
+                        ),
+                        !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => handleRemove(idx),
+                            style: {
+                              background: "transparent",
+                              border: "none",
+                              cursor: "pointer",
+                              padding: "2px",
+                              color: "#ef4444",
+                              marginLeft: "4px"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 12 })
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      padding: "12px",
+                      borderTop: "1px solid #e4e4e7",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "12px",
+                      background: "#ffffff"
+                    },
+                    children: Object.entries(arrayFields).map(([subFieldName, subFieldDef]) => /* @__PURE__ */ jsxRuntime.jsx(
+                      FieldRenderer,
+                      {
+                        name: subFieldName,
+                        definition: subFieldDef,
+                        value: item2[subFieldName],
+                        onChange: (newSubVal) => {
+                          const updatedItems = [...items];
+                          updatedItems[idx] = {
+                            ...updatedItems[idx],
+                            [subFieldName]: newSubVal
+                          };
+                          onChange(updatedItems);
+                        },
+                        readOnly
+                      },
+                      subFieldName
+                    ))
+                  }
+                )
+              ]
+            },
+            idx
+          );
+        }),
+        !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleAdd,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "6px",
+              width: "100%",
+              padding: "10px",
+              borderRadius: "8px",
+              border: "1px dashed #cbd5e1",
+              background: "#ffffff",
+              color: "#64748b",
+              fontSize: "13px",
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "all 0.2s"
+            },
+            className: "tecof-add-array-item-btn",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Plus, { size: 14 }),
+              "\xD6\u011Fe Ekle"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `
+              .tecof-add-array-item-btn:hover {
+                border-color: #3b82f6 !important;
+                color: #2563eb !important;
+                background-color: #eff6ff !important;
+              }
+            ` } })
+      ] }) });
+    }
     default:
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px", fontSize: "11px", color: "#71717a", background: "#fafafa", borderRadius: "4px" }, children: [
         'Desteklenmeyen alan t\xFCr\xFC: "',
@@ -1901,6 +2263,528 @@ var Inspector = () => {
     }
   );
 };
+var TopBar = ({ onSave, saving, saveStatus }) => {
+  const viewport = useEditorStore((state3) => state3.viewport);
+  const setViewport = useEditorStore((state3) => state3.setViewport);
+  const pastCount = useEditorStore((state3) => state3.history.past.length);
+  const futureCount = useEditorStore((state3) => state3.history.future.length);
+  const undo = useEditorStore((state3) => state3.undo);
+  const redo = useEditorStore((state3) => state3.redo);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-topbar", style: {
+    height: "56px",
+    borderBottom: "1px solid #e4e4e7",
+    background: "#ffffff",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0 20px",
+    boxSizing: "border-box",
+    zIndex: 100
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-topbar-title", style: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#18181b",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sayfa D\xFCzenleyici" }),
+      saveStatus === "success" && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
+        fontSize: "11px",
+        color: "#10b981",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        fontWeight: 500
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 12 }),
+        " Kaydedildi"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-topbar-viewports", style: {
+      display: "flex",
+      alignItems: "center",
+      background: "#f4f4f5",
+      padding: "3px",
+      borderRadius: "8px",
+      gap: "2px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setViewport("desktop"),
+          style: {
+            background: viewport === "desktop" ? "#ffffff" : "transparent",
+            border: "none",
+            outline: "none",
+            cursor: "pointer",
+            padding: "6px 12px",
+            borderRadius: "6px",
+            color: viewport === "desktop" ? "#18181b" : "#71717a",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: viewport === "desktop" ? "0 1px 3px 0 rgba(0, 0, 0, 0.1)" : "none",
+            transition: "all 0.2s"
+          },
+          title: "Masa\xFCst\xFC",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Monitor, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setViewport("tablet"),
+          style: {
+            background: viewport === "tablet" ? "#ffffff" : "transparent",
+            border: "none",
+            outline: "none",
+            cursor: "pointer",
+            padding: "6px 12px",
+            borderRadius: "6px",
+            color: viewport === "tablet" ? "#18181b" : "#71717a",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: viewport === "tablet" ? "0 1px 3px 0 rgba(0, 0, 0, 0.1)" : "none",
+            transition: "all 0.2s"
+          },
+          title: "Tablet",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Tablet, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setViewport("mobile"),
+          style: {
+            background: viewport === "mobile" ? "#ffffff" : "transparent",
+            border: "none",
+            outline: "none",
+            cursor: "pointer",
+            padding: "6px 12px",
+            borderRadius: "6px",
+            color: viewport === "mobile" ? "#18181b" : "#71717a",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: viewport === "mobile" ? "0 1px 3px 0 rgba(0, 0, 0, 0.1)" : "none",
+            transition: "all 0.2s"
+          },
+          title: "Mobil",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Smartphone, { size: 16 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-topbar-actions", style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "12px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: undo,
+            disabled: pastCount === 0,
+            style: {
+              background: "transparent",
+              border: "none",
+              cursor: pastCount === 0 ? "not-allowed" : "pointer",
+              padding: "8px",
+              borderRadius: "6px",
+              color: pastCount === 0 ? "#d4d4d8" : "#71717a",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "background 0.2s"
+            },
+            title: "Geri Al",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Undo2, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: redo,
+            disabled: futureCount === 0,
+            style: {
+              background: "transparent",
+              border: "none",
+              cursor: futureCount === 0 ? "not-allowed" : "pointer",
+              padding: "8px",
+              borderRadius: "6px",
+              color: futureCount === 0 ? "#d4d4d8" : "#71717a",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "background 0.2s"
+            },
+            title: "Yinele",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Redo2, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "1px", height: "20px", background: "#e4e4e7" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: onSave,
+          disabled: saving,
+          style: {
+            background: "#2563eb",
+            color: "#ffffff",
+            border: "none",
+            cursor: saving ? "wait" : "pointer",
+            padding: "8px 16px",
+            borderRadius: "8px",
+            fontSize: "13px",
+            fontWeight: 500,
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            transition: "background 0.2s",
+            opacity: saving ? 0.7 : 1
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Save, { size: 14 }),
+            saving ? "Kaydediliyor..." : "Taslak Kaydet"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var TreeNode = ({ node, depth }) => {
+  const { config: config3 } = useStudio();
+  const documentState = useEditorStore((state3) => state3.document);
+  const selectedId = useEditorStore((state3) => state3.selection.selectedId);
+  const selectNode = useEditorStore((state3) => state3.selectNode);
+  const hoverNode = useEditorStore((state3) => state3.hoverNode);
+  const removeNode2 = useEditorStore((state3) => state3.removeNode);
+  const [expanded, setExpanded] = React__default.useState(true);
+  const isSelected = selectedId === node.props.id;
+  const componentConfig = config3.components[node.type];
+  const label = componentConfig?.label || node.type;
+  const childZoneKeys = Object.keys(documentState.zones).filter(
+    (key) => key.startsWith(`${node.props.id}:`)
+  );
+  const hasChildren = childZoneKeys.some(
+    (key) => (documentState.zones[key] || []).length > 0
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-layers-tree-node", style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onMouseEnter: () => hoverNode(node.props.id),
+        onMouseLeave: () => hoverNode(null),
+        onClick: () => selectNode(node.props.id),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "6px 8px",
+          paddingLeft: `${depth * 12 + 8}px`,
+          background: isSelected ? "#eff6ff" : "transparent",
+          color: isSelected ? "#1d4ed8" : "#3f3f46",
+          cursor: "pointer",
+          borderRadius: "6px",
+          fontSize: "13px",
+          fontWeight: isSelected ? 500 : 400,
+          transition: "all 0.15s"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+            hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e3) => {
+                  e3.stopPropagation();
+                  setExpanded(!expanded);
+                },
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  color: "#a1a1aa"
+                },
+                children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 14 })
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "14px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(PanelsTopLeft, { size: 14, style: { color: isSelected ? "#3b82f6" : "#71717a" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: "120px"
+            }, children: label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e3) => {
+                e3.stopPropagation();
+                removeNode2(node.props.id);
+              },
+              className: "tecof-layers-delete-btn",
+              style: {
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                padding: "2px",
+                color: "#a1a1aa",
+                display: "flex",
+                alignItems: "center",
+                opacity: 0,
+                transition: "opacity 0.2s"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 12 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .tecof-layers-tree-node:hover .tecof-layers-delete-btn {
+          opacity: 1 !important;
+        }
+        .tecof-layers-delete-btn:hover {
+          color: #ef4444 !important;
+        }
+      ` } }),
+    expanded && childZoneKeys.map((zoneKey) => {
+      const zoneItems = documentState.zones[zoneKey] || [];
+      const zoneName = zoneKey.split(":").pop() || "";
+      if (zoneItems.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          fontSize: "10px",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          color: "#a1a1aa",
+          padding: "4px 8px",
+          paddingLeft: `${(depth + 1) * 12 + 14}px`,
+          fontWeight: 600
+        }, children: zoneName }),
+        zoneItems.map((childNode) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node: childNode, depth: depth + 1 }, childNode.props.id))
+      ] }, zoneKey);
+    })
+  ] });
+};
+var LayersTree = () => {
+  const documentState = useEditorStore((state3) => state3.document);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-studio-layers-tree", style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    overflowY: "auto",
+    height: "100%"
+  }, children: documentState.content.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    textAlign: "center",
+    color: "#a1a1aa",
+    fontSize: "13px",
+    padding: "24px 12px"
+  }, children: "S\xFCr\xFCklenmi\u015F katman yok" }) : documentState.content.map((node) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node, depth: 0 }, node.props.id)) });
+};
+var LeftPanel = () => {
+  const { config: config3 } = useStudio();
+  const insertNode2 = useEditorStore((state3) => state3.insertNode);
+  useEditorStore((state3) => state3.selection.selectedId);
+  useEditorStore((state3) => state3.document);
+  const [activeTab, setActiveTab] = React__default.useState("blocks");
+  const [searchQuery, setSearchQuery] = React__default.useState("");
+  const categories = config3.categories || {};
+  const components = config3.components || {};
+  const groupedComponents = {};
+  if (Object.keys(categories).length > 0) {
+    Object.entries(categories).forEach(([key, value]) => {
+      groupedComponents[value.title || key] = value.components;
+    });
+  } else {
+    Object.entries(components).forEach(([name3, compConfig]) => {
+      const cat = compConfig.category || "Genel";
+      if (!groupedComponents[cat]) {
+        groupedComponents[cat] = [];
+      }
+      groupedComponents[cat].push(name3);
+    });
+  }
+  const handleAddBlock = (type) => {
+    const compConfig = components[type] || {};
+    const defaultProps = compConfig.defaultProps || {};
+    const newNode = {
+      type,
+      props: {
+        id: generateId(),
+        ...JSON.parse(JSON.stringify(defaultProps))
+      }
+    };
+    insertNode2(newNode);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-left-panel", style: {
+    width: "280px",
+    borderRight: "1px solid #e4e4e7",
+    background: "#ffffff",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    boxSizing: "border-box"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      borderBottom: "1px solid #e4e4e7",
+      padding: "8px 12px",
+      gap: "4px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => setActiveTab("blocks"),
+          style: {
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "6px",
+            border: "none",
+            outline: "none",
+            padding: "8px",
+            borderRadius: "6px",
+            fontSize: "12px",
+            fontWeight: 600,
+            cursor: "pointer",
+            background: activeTab === "blocks" ? "#f4f4f5" : "transparent",
+            color: activeTab === "blocks" ? "#18181b" : "#71717a",
+            transition: "all 0.2s"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Grid3x3, { size: 14 }),
+            "Blok Ekle"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => setActiveTab("layers"),
+          style: {
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "6px",
+            border: "none",
+            outline: "none",
+            padding: "8px",
+            borderRadius: "6px",
+            fontSize: "12px",
+            fontWeight: 600,
+            cursor: "pointer",
+            background: activeTab === "layers" ? "#f4f4f5" : "transparent",
+            color: activeTab === "layers" ? "#18181b" : "#71717a",
+            transition: "all 0.2s"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Layers, { size: 14 }),
+            "Katmanlar"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", padding: "12px" }, children: activeTab === "blocks" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        background: "#f4f4f5",
+        padding: "6px 10px",
+        borderRadius: "8px",
+        gap: "8px"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Search, { size: 14, color: "#a1a1aa" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Bile\u015Fen ara...",
+            value: searchQuery,
+            onChange: (e3) => setSearchQuery(e3.target.value),
+            style: {
+              border: "none",
+              outline: "none",
+              background: "transparent",
+              fontSize: "12px",
+              color: "#18181b",
+              width: "100%"
+            }
+          }
+        )
+      ] }),
+      Object.entries(groupedComponents).map(([catTitle, blockTypes]) => {
+        const filteredTypes = blockTypes.filter((type) => {
+          const label = components[type]?.label || type;
+          return label.toLowerCase().includes(searchQuery.toLowerCase());
+        });
+        if (filteredTypes.length === 0) return null;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            fontSize: "11px",
+            fontWeight: 700,
+            color: "#71717a",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }, children: catTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            display: "grid",
+            gridTemplateColumns: "1fr",
+            gap: "6px"
+          }, children: filteredTypes.map((type) => {
+            const compConfig = components[type] || {};
+            const label = compConfig.label || type;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => handleAddBlock(type),
+                style: {
+                  background: "#ffffff",
+                  border: "1px solid #e4e4e7",
+                  padding: "10px 12px",
+                  borderRadius: "8px",
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  color: "#3f3f46",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  textAlign: "left",
+                  transition: "all 0.2s",
+                  boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.02)"
+                },
+                className: "tecof-studio-block-btn",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Plus, { size: 14, style: { color: "#a1a1aa" } })
+                ]
+              },
+              type
+            );
+          }) })
+        ] }, catTitle);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `
+              .tecof-studio-block-btn:hover {
+                border-color: #3b82f6 !important;
+                color: #2563eb !important;
+                background-color: #eff6ff !important;
+              }
+            ` } })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(LayersTree, {}) })
+  ] });
+};
 var TecofStudio = ({
   pageId,
   config: config3,
@@ -2014,6 +2898,67 @@ var TecofStudio = ({
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [isEmbedded, handleSaveDraft, undo, redo, setViewport]);
+  React__default.useEffect(() => {
+    const handleKeyDown = (e3) => {
+      const isInput2 = () => {
+        const activeEl = document.activeElement;
+        if (activeEl) {
+          const tag = activeEl.tagName.toLowerCase();
+          if (tag === "input" || tag === "textarea" || activeEl.hasAttribute("contenteditable")) {
+            return true;
+          }
+        }
+        const iframe = document.querySelector(".tecof-canvas-viewport-wrapper iframe");
+        const iframeDoc = iframe?.contentDocument;
+        const iframeActiveEl = iframeDoc?.activeElement;
+        if (iframeActiveEl) {
+          const tag = iframeActiveEl.tagName.toLowerCase();
+          if (tag === "input" || tag === "textarea" || iframeActiveEl.hasAttribute("contenteditable")) {
+            return true;
+          }
+        }
+        return false;
+      };
+      const selectedId = useEditorStore.getState().selection.selectedId;
+      const isCmdOrCtrl = e3.metaKey || e3.ctrlKey;
+      if (e3.key === "Escape") {
+        useEditorStore.getState().selectNode(null);
+        if (isEmbedded) {
+          window.parent.postMessage({ type: "puck:itemDeselected" }, "*");
+        }
+        return;
+      }
+      if (isCmdOrCtrl && e3.key.toLowerCase() === "z") {
+        e3.preventDefault();
+        if (e3.shiftKey) {
+          redo();
+        } else {
+          undo();
+        }
+        return;
+      }
+      if (isCmdOrCtrl && e3.key.toLowerCase() === "y") {
+        e3.preventDefault();
+        redo();
+        return;
+      }
+      if (isInput2()) return;
+      if ((e3.key === "Delete" || e3.key === "Backspace") && selectedId) {
+        e3.preventDefault();
+        useEditorStore.getState().removeNode(selectedId);
+        return;
+      }
+      if (isCmdOrCtrl && e3.key.toLowerCase() === "d" && selectedId) {
+        e3.preventDefault();
+        useEditorStore.getState().duplicateNode(selectedId);
+        return;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [undo, redo, isEmbedded]);
   const studioContextValue = React__default.useMemo(() => ({
     config: config3,
     readOnly: false,
@@ -2048,13 +2993,15 @@ var TecofStudio = ({
     position: "relative",
     background: "#f4f4f5"
   }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TopBar, { onSave: handleSaveDraft, saving, saveStatus }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-workspace-container", style: {
       display: "flex",
       flex: 1,
-      height: "100%",
+      height: "calc(100% - 56px)",
       width: "100%",
       overflow: "hidden"
     }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LeftPanel, {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-workspace", style: {
         display: "flex",
         flex: 1,
@@ -26649,20 +27596,29 @@ lucide-react/dist/esm/icons/file-text.js:
 lucide-react/dist/esm/icons/file.js:
 lucide-react/dist/esm/icons/folder-open.js:
 lucide-react/dist/esm/icons/globe.js:
+lucide-react/dist/esm/icons/grid-3x3.js:
 lucide-react/dist/esm/icons/grip-vertical.js:
 lucide-react/dist/esm/icons/image-plus.js:
 lucide-react/dist/esm/icons/image.js:
 lucide-react/dist/esm/icons/languages.js:
+lucide-react/dist/esm/icons/layers.js:
 lucide-react/dist/esm/icons/link-2.js:
 lucide-react/dist/esm/icons/link.js:
 lucide-react/dist/esm/icons/loader-circle.js:
+lucide-react/dist/esm/icons/monitor.js:
+lucide-react/dist/esm/icons/panels-top-left.js:
 lucide-react/dist/esm/icons/pencil.js:
 lucide-react/dist/esm/icons/plus.js:
+lucide-react/dist/esm/icons/redo-2.js:
 lucide-react/dist/esm/icons/refresh-ccw.js:
 lucide-react/dist/esm/icons/refresh-cw.js:
 lucide-react/dist/esm/icons/rotate-ccw.js:
+lucide-react/dist/esm/icons/save.js:
 lucide-react/dist/esm/icons/search.js:
+lucide-react/dist/esm/icons/smartphone.js:
+lucide-react/dist/esm/icons/tablet.js:
 lucide-react/dist/esm/icons/trash-2.js:
+lucide-react/dist/esm/icons/undo-2.js:
 lucide-react/dist/esm/icons/upload.js:
 lucide-react/dist/esm/icons/x.js:
 lucide-react/dist/esm/lucide-react.js: