@tecof/theme-editor 0.0.35 → 0.0.39

package/dist/index.js

@@ -2,7 +2,6 @@
 
 var React__default = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var core = require('@puckeditor/core');
 var zustand = require('zustand');
 var immer = require('zustand/middleware/immer');
 var nanoid = require('nanoid');
@@ -337,872 +336,165 @@ function useTecof() {
   return ctx;
 }
 
-// node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
-var mergeClasses = (...classes) => classes.filter((className, index2, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
-}).join(" ").trim();
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
-var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
-var toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
-var toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+// src/engine/document.ts
+var EMPTY_DOCUMENT = {
+  root: { props: {} },
+  content: [],
+  zones: {}
 };
-
-// node_modules/lucide-react/dist/esm/defaultAttributes.js
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
+var parseDocument = (rawData) => {
+  if (!rawData) return { ...EMPTY_DOCUMENT };
+  return {
+    root: rawData.root || { props: {} },
+    content: rawData.content || [],
+    zones: rawData.zones || {}
+  };
+};
+var serializeDocument = (doc) => {
+  return {
+    root: doc.root,
+    content: doc.content,
+    zones: doc.zones
+  };
 };
 
-// node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
-var hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
+// src/engine/zones.ts
+var parseZoneKey = (zoneKey) => {
+  const parts = zoneKey.split(":");
+  return {
+    parentId: parts[0],
+    slotName: parts[1] || "default"
+  };
+};
+var findNodeById = (doc, id) => {
+  for (let i2 = 0; i2 < doc.content.length; i2++) {
+    if (doc.content[i2].props.id === id) {
+      return { node: doc.content[i2], path: { index: i2 } };
     }
   }
-  return false;
+  for (const [zoneKey, items] of Object.entries(doc.zones)) {
+    for (let i2 = 0; i2 < items.length; i2++) {
+      if (items[i2].props.id === id) {
+        return { node: items[i2], path: { zoneKey, index: i2 } };
+      }
+    }
+  }
+  return null;
 };
-var LucideContext = React__default.createContext({});
-var useLucideContext = () => React__default.useContext(LucideContext);
-
-// node_modules/lucide-react/dist/esm/Icon.js
-var Icon = React__default.forwardRef(
-  ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
-    const {
-      size: contextSize = 24,
-      strokeWidth: contextStrokeWidth = 2,
-      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
-      color: contextColor = "currentColor",
-      className: contextClass = ""
-    } = useLucideContext() ?? {};
-    const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
-    return React__default.createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size ?? contextSize ?? defaultAttributes.width,
-        height: size ?? contextSize ?? defaultAttributes.height,
-        stroke: color ?? contextColor,
-        strokeWidth: calculatedStrokeWidth,
-        className: mergeClasses("lucide", contextClass, className),
-        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => React__default.createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
+var getDescendantZoneKeys = (zones, nodeId, acc = []) => {
+  const prefix = `${nodeId}:`;
+  for (const zoneKey of Object.keys(zones)) {
+    if (zoneKey.startsWith(prefix)) {
+      acc.push(zoneKey);
+      for (const child of zones[zoneKey]) {
+        getDescendantZoneKeys(zones, child.props.id, acc);
+      }
+    }
   }
-);
-
-// node_modules/lucide-react/dist/esm/createLucideIcon.js
-var createLucideIcon = (iconName, iconNode) => {
-  const Component2 = React__default.forwardRef(
-    ({ className, ...props }, ref) => React__default.createElement(Icon, {
-      ref,
-      iconNode,
-      className: mergeClasses(
-        `lucide-${toKebabCase(toPascalCase(iconName))}`,
-        `lucide-${iconName}`,
-        className
-      ),
-      ...props
-    })
-  );
-  Component2.displayName = toPascalCase(iconName);
-  return Component2;
+  return acc;
 };
-
-// node_modules/lucide-react/dist/esm/icons/arrow-down.js
-var __iconNode = [
-  ["path", { d: "M12 5v14", key: "s699le" }],
-  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
-];
-var ArrowDown = createLucideIcon("arrow-down", __iconNode);
-
-// node_modules/lucide-react/dist/esm/icons/arrow-up.js
-var __iconNode2 = [
-  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
-  ["path", { d: "M12 19V5", key: "x0mq9r" }]
-];
-var ArrowUp = createLucideIcon("arrow-up", __iconNode2);
-
-// node_modules/lucide-react/dist/esm/icons/check.js
-var __iconNode3 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-var Check = createLucideIcon("check", __iconNode3);
-
-// node_modules/lucide-react/dist/esm/icons/chevron-down.js
-var __iconNode4 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-var ChevronDown = createLucideIcon("chevron-down", __iconNode4);
-
-// node_modules/lucide-react/dist/esm/icons/chevron-right.js
-var __iconNode5 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-var ChevronRight = createLucideIcon("chevron-right", __iconNode5);
-
-// node_modules/lucide-react/dist/esm/icons/chevron-up.js
-var __iconNode6 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-var ChevronUp = createLucideIcon("chevron-up", __iconNode6);
-
-// node_modules/lucide-react/dist/esm/icons/code.js
-var __iconNode7 = [
-  ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
-  ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
-];
-var Code = createLucideIcon("code", __iconNode7);
-
-// node_modules/lucide-react/dist/esm/icons/copy.js
-var __iconNode8 = [
-  ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
-  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
-];
-var Copy = createLucideIcon("copy", __iconNode8);
-
-// node_modules/lucide-react/dist/esm/icons/database.js
-var __iconNode9 = [
-  ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
-  ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
-  ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
-];
-var Database = createLucideIcon("database", __iconNode9);
-
-// node_modules/lucide-react/dist/esm/icons/external-link.js
-var __iconNode10 = [
-  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
-  ["path", { d: "M10 14 21 3", key: "gplh6r" }],
-  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
-];
-var ExternalLink = createLucideIcon("external-link", __iconNode10);
-
-// node_modules/lucide-react/dist/esm/icons/file-text.js
-var __iconNode11 = [
-  [
-    "path",
-    {
-      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
-      key: "1oefj6"
+var getParentId = (doc, id) => {
+  const res2 = findNodeById(doc, id);
+  if (!res2 || !res2.path.zoneKey) return null;
+  return parseZoneKey(res2.path.zoneKey).parentId;
+};
+var getBreadcrumbs = (doc, id) => {
+  const crumbs = [];
+  let currentId = id;
+  while (currentId) {
+    const res2 = findNodeById(doc, currentId);
+    if (!res2) break;
+    crumbs.unshift({ id: currentId, type: res2.node.type });
+    currentId = res2.path.zoneKey ? parseZoneKey(res2.path.zoneKey).parentId : null;
+  }
+  return crumbs;
+};
+var generateId = () => nanoid.nanoid(8);
+var remapNodeIds = (node, sourceZones, idMap = /* @__PURE__ */ new Map()) => {
+  const oldId = node.props.id;
+  const newId = generateId();
+  idMap.set(oldId, newId);
+  const remappedNode = {
+    ...node,
+    props: {
+      ...node.props,
+      id: newId
     }
-  ],
-  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
-  ["path", { d: "M10 9H8", key: "b1mrlr" }],
-  ["path", { d: "M16 13H8", key: "t4e002" }],
-  ["path", { d: "M16 17H8", key: "z1uh3a" }]
-];
-var FileText = createLucideIcon("file-text", __iconNode11);
+  };
+  const newZones = {};
+  const prefix = `${oldId}:`;
+  for (const [zoneKey, zoneItems] of Object.entries(sourceZones)) {
+    if (zoneKey.startsWith(prefix)) {
+      const slotName = zoneKey.split(":")[1];
+      const newZoneKey = `${newId}:${slotName}`;
+      const newZoneItems = [];
+      for (const item2 of zoneItems) {
+        const { remappedNode: childNode, newZones: childZones } = remapNodeIds(item2, sourceZones, idMap);
+        newZoneItems.push(childNode);
+        Object.assign(newZones, childZones);
+      }
+      newZones[newZoneKey] = newZoneItems;
+    }
+  }
+  return { remappedNode, newZones };
+};
 
-// node_modules/lucide-react/dist/esm/icons/file.js
-var __iconNode12 = [
-  [
-    "path",
-    {
-      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
-      key: "1oefj6"
-    }
-  ],
-  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
-];
-var File2 = createLucideIcon("file", __iconNode12);
-
-// node_modules/lucide-react/dist/esm/icons/folder-open.js
-var __iconNode13 = [
-  [
-    "path",
-    {
-      d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
-      key: "usdka0"
-    }
-  ]
-];
-var FolderOpen = createLucideIcon("folder-open", __iconNode13);
-
-// node_modules/lucide-react/dist/esm/icons/globe.js
-var __iconNode14 = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
-  ["path", { d: "M2 12h20", key: "9i4pu4" }]
-];
-var Globe = createLucideIcon("globe", __iconNode14);
-
-// node_modules/lucide-react/dist/esm/icons/grip-vertical.js
-var __iconNode15 = [
-  ["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" }],
-  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
-  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
-  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
-];
-var GripVertical = createLucideIcon("grip-vertical", __iconNode15);
-
-// node_modules/lucide-react/dist/esm/icons/image-plus.js
-var __iconNode16 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/image.js
-var __iconNode17 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/languages.js
-var __iconNode18 = [
-  ["path", { d: "m5 8 6 6", key: "1wu5hv" }],
-  ["path", { d: "m4 14 6-6 2-3", key: "1k1g8d" }],
-  ["path", { d: "M2 5h12", key: "or177f" }],
-  ["path", { d: "M7 2h1", key: "1t2jsx" }],
-  ["path", { d: "m22 22-5-10-5 10", key: "don7ne" }],
-  ["path", { d: "M14 18h6", key: "1m8k6r" }]
-];
-var Languages = createLucideIcon("languages", __iconNode18);
-
-// node_modules/lucide-react/dist/esm/icons/link-2.js
-var __iconNode19 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/link.js
-var __iconNode20 = [
-  ["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);
-
-// 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);
-
-// node_modules/lucide-react/dist/esm/icons/pencil.js
-var __iconNode22 = [
-  [
-    "path",
-    {
-      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
-      key: "1a8usu"
-    }
-  ],
-  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
-];
-var Pencil = createLucideIcon("pencil", __iconNode22);
-
-// node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode23 = [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "M12 5v14", key: "s699le" }]
-];
-var Plus = createLucideIcon("plus", __iconNode23);
-
-// node_modules/lucide-react/dist/esm/icons/refresh-ccw.js
-var __iconNode24 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/refresh-cw.js
-var __iconNode25 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
-var __iconNode26 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode27 = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-];
-var Search = createLucideIcon("search", __iconNode27);
-
-// node_modules/lucide-react/dist/esm/icons/trash-2.js
-var __iconNode28 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/upload.js
-var __iconNode29 = [
-  ["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);
-
-// node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode30 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-var X = createLucideIcon("x", __iconNode30);
-var EMPTY_PAGE = { content: [], root: { props: {} }, zones: {} };
-var DrawerSearchContext = React__default.createContext(null);
-var ComponentDrawerItem = ({
-  name: name3,
-  apiClient,
-  children
-}) => {
-  const [imgSrc, setImgSrc] = React__default.useState(null);
-  const [loading, setLoading] = React__default.useState(false);
-  const [error2, setError] = React__default.useState(false);
-  const fetchedRef = React__default.useRef(false);
-  const handleMouseEnter = React__default.useCallback(async () => {
-    if (fetchedRef.current) return;
-    fetchedRef.current = true;
-    setLoading(true);
-    try {
-      const domain = typeof window !== "undefined" ? window.location.hostname : "";
-      const blobUrl = await apiClient.getComponentPreview(domain, name3);
-      if (blobUrl) {
-        setImgSrc(blobUrl);
-      } else {
-        setError(true);
-      }
-    } catch {
-      setError(true);
-    } finally {
-      setLoading(false);
+// src/engine/operations.ts
+var insertNode = (draft, node, targetZoneKey, index2) => {
+  if (!node.props.id) {
+    node.props.id = generateId();
+  }
+  let list3 = targetZoneKey ? draft.zones[targetZoneKey] : draft.content;
+  if (!list3) {
+    list3 = [];
+    if (targetZoneKey) {
+      draft.zones[targetZoneKey] = list3;
     }
-  }, [name3, apiClient]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-item-group group", onMouseEnter: handleMouseEnter, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-popover", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-popover-header", children: [
-        name3,
-        " \xD6nizleme"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-popover-body", children: [
-        (loading || !imgSrc && !error2) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-skeleton" }),
-        imgSrc && /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: imgSrc,
-            alt: `${name3} preview`,
-            className: "tecof-drawer-img"
-          }
-        ),
-        error2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-preview-error", children: "\xD6nizleme y\xFCklenemedi" })
-      ] })
-    ] })
-  ] });
+  }
+  const insertIndex = typeof index2 === "number" ? index2 : list3.length;
+  list3.splice(insertIndex, 0, node);
 };
-var CustomDrawer = ({ children }) => {
-  const context = React__default.useContext(DrawerSearchContext);
-  if (!context) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-list-layout", children });
-  const { searchQuery, setSearchQuery } = context;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-wrapper-layout", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-search-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-drawer-search-box", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Search, { size: 14, color: "#71717a" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          placeholder: "Blok ara...",
-          value: searchQuery,
-          onChange: (e3) => setSearchQuery(e3.target.value),
-          className: "tecof-drawer-search-input"
-        }
-      ),
-      searchQuery && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setSearchQuery(""),
-          className: "tecof-drawer-clear-btn",
-          title: "Temizle",
-          children: /* @__PURE__ */ jsxRuntime.jsx(X, { size: 14 })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-list-layout", children })
-  ] });
+var removeNode = (draft, id) => {
+  const result = findNodeById(draft, id);
+  if (!result) return;
+  const { path } = result;
+  const list3 = path.zoneKey ? draft.zones[path.zoneKey] : draft.content;
+  if (list3) {
+    list3.splice(path.index, 1);
+  }
+  const descendantZoneKeys = getDescendantZoneKeys(draft.zones, id);
+  for (const zoneKey of descendantZoneKeys) {
+    delete draft.zones[zoneKey];
+  }
 };
-var CustomDrawerItem = ({ children, name: name3 }) => {
-  const context = React__default.useContext(DrawerSearchContext);
-  const { apiClient } = useTecof();
-  if (!context) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ComponentDrawerItem, { name: name3, apiClient, children });
+var moveNode = (draft, id, targetZoneKey, targetIndex) => {
+  const result = findNodeById(draft, id);
+  if (!result) return;
+  const { node, path: sourcePath } = result;
+  const sourceList = sourcePath.zoneKey ? draft.zones[sourcePath.zoneKey] : draft.content;
+  let targetList = targetZoneKey ? draft.zones[targetZoneKey] : draft.content;
+  if (!targetList && targetZoneKey) {
+    targetList = [];
+    draft.zones[targetZoneKey] = targetList;
   }
-  const { searchQuery, config: config3 } = context;
-  const componentConfig = config3.components?.[name3];
-  const label = componentConfig?.label || name3;
-  if (searchQuery.trim()) {
-    const query = searchQuery.toLowerCase();
-    const matchesName = name3.toLowerCase().includes(query);
-    const matchesLabel = label.toLowerCase().includes(query);
-    if (!matchesName && !matchesLabel) {
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
+  if (!sourceList || !targetList) return;
+  sourceList.splice(sourcePath.index, 1);
+  let finalIndex = targetIndex ?? targetList.length;
+  if (sourcePath.zoneKey === targetZoneKey && sourcePath.index < finalIndex) {
+    finalIndex -= 1;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ComponentDrawerItem, { name: name3, apiClient, children });
+  targetList.splice(finalIndex, 0, node);
 };
-var AutoFieldsOnSelect = () => {
-  const { selectedItem, dispatch } = core.usePuck();
-  const prevSelectedRef = React__default.useRef(null);
-  React__default.useEffect(() => {
-    const currentId = selectedItem?.props?.id || null;
-    if (currentId && currentId !== prevSelectedRef.current) {
-      dispatch({
-        type: "setUi",
-        ui: { plugin: { current: "fields" } }
-      });
-    }
-    prevSelectedRef.current = currentId;
-  }, [selectedItem, dispatch]);
-  return null;
-};
-var CustomActionBar = ({ children, label }) => {
-  const { appState, dispatch, getSelectorForId, selectedItem } = core.usePuck();
-  const canMoveUp = React__default.useMemo(() => {
-    if (!selectedItem || !selectedItem.props?.id) return false;
-    const selector = getSelectorForId(selectedItem.props.id);
-    if (!selector) return false;
-    return selector.index > 0;
-  }, [selectedItem, getSelectorForId]);
-  const canMoveDown = React__default.useMemo(() => {
-    if (!selectedItem || !selectedItem.props?.id) return false;
-    const selector = getSelectorForId(selectedItem.props.id);
-    if (!selector) return false;
-    const { index: index2, zone } = selector;
-    const items = zone ? appState.data.zones?.[zone] || [] : appState.data.content || [];
-    return index2 < items.length - 1;
-  }, [selectedItem, getSelectorForId, appState.data]);
-  const handleMove = React__default.useCallback((direction) => {
-    if (!selectedItem || !selectedItem.props?.id) return;
-    const selector = getSelectorForId(selectedItem.props.id);
-    if (!selector) return;
-    const { index: index2, zone } = selector;
-    let items = zone ? [...appState.data.zones?.[zone] || []] : [...appState.data.content || []];
-    const targetIndex = direction === "up" ? index2 - 1 : index2 + 1;
-    if (targetIndex < 0 || targetIndex >= items.length) return;
-    const temp = items[index2];
-    items[index2] = items[targetIndex];
-    items[targetIndex] = temp;
-    if (zone) {
-      dispatch({
-        type: "setData",
-        data: {
-          ...appState.data,
-          zones: {
-            ...appState.data.zones,
-            [zone]: items
-          }
-        }
-      });
-      dispatch({
-        type: "setUi",
-        ui: {
-          itemSelector: {
-            index: targetIndex,
-            zone
-          }
-        }
-      });
-    } else {
-      dispatch({
-        type: "setData",
-        data: {
-          ...appState.data,
-          content: items
-        }
-      });
-      dispatch({
-        type: "setUi",
-        ui: {
-          itemSelector: {
-            index: targetIndex
-          }
-        }
-      });
-    }
-  }, [selectedItem, getSelectorForId, appState.data, dispatch]);
-  return /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar, { label, children: /* @__PURE__ */ jsxRuntime.jsxs(core.ActionBar.Group, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar.Action, { onClick: () => handleMove("up"), disabled: !canMoveUp, label: "Yukar\u0131 Ta\u015F\u0131", children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUp, { size: 14 }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar.Action, { onClick: () => handleMove("down"), disabled: !canMoveDown, label: "A\u015Fa\u011F\u0131 Ta\u015F\u0131", children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown, { size: 14 }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(core.ActionBar.Separator, {}),
-    children
-  ] }) });
-};
-var TecofEditor = ({
-  pageId,
-  config: config3,
-  accessToken,
-  onSave,
-  onChange,
-  overrides,
-  plugins: extraPlugins,
-  className
-}) => {
-  const { apiClient, secretKey } = useTecof();
-  const [initialData, setInitialData] = React__default.useState(null);
-  const [loading, setLoading] = React__default.useState(true);
-  const [saving, setSaving] = React__default.useState(false);
-  const [saveStatus, setSaveStatus] = React__default.useState("idle");
-  const [searchQuery, setSearchQuery] = React__default.useState("");
-  const draftDataRef = React__default.useRef(null);
-  const isEmbedded = typeof window !== "undefined" && window.parent !== window;
-  React__default.useEffect(() => {
-    let cancelled = false;
-    const load = async () => {
-      setLoading(true);
-      const res2 = await apiClient.getPage(pageId);
-      if (cancelled) return;
-      const data3 = res2.success && res2.data?.draftData ? res2.data.draftData : EMPTY_PAGE;
-      setInitialData(data3);
-      draftDataRef.current = data3;
-      setLoading(false);
-    };
-    load();
-    return () => {
-      cancelled = true;
-    };
-  }, [pageId, apiClient]);
-  const handleSaveDraft = React__default.useCallback(
-    async (data3) => {
-      const currentData = data3 || draftDataRef.current;
-      if (!currentData) return;
-      const draftData = currentData;
-      setSaving(true);
-      setSaveStatus("idle");
-      const res2 = await apiClient.savePage(pageId, draftData, void 0, accessToken);
-      if (res2.success) {
-        setSaveStatus("success");
-        setTimeout(() => setSaveStatus("idle"), 3e3);
-        onSave?.(draftData);
-        if (isEmbedded) window.parent.postMessage({ type: "puck:saved" }, "*");
-      } else {
-        setSaveStatus("error");
-        if (isEmbedded) window.parent.postMessage({ type: "puck:saveError", message: res2.message }, "*");
-      }
-      setSaving(false);
-    },
-    [pageId, apiClient, isEmbedded, onSave, accessToken]
-  );
-  const handleChange = React__default.useCallback(
-    (data3) => {
-      draftDataRef.current = data3;
-      const draftData = data3;
-      onChange?.(draftData);
-      if (isEmbedded) window.parent.postMessage({ type: "puck:changed" }, "*");
-    },
-    [onChange, isEmbedded]
-  );
-  const handlePuckPublish = React__default.useCallback(
-    (data3) => {
-      handleSaveDraft(data3);
-    },
-    [handleSaveDraft]
-  );
-  React__default.useEffect(() => {
-    if (!isEmbedded) return;
-    const onMessage = (e3) => {
-      switch (e3.data?.type) {
-        case "puck:save": {
-          handleSaveDraft();
-          break;
-        }
-        case "puck:undo":
-          document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", code: "KeyZ", ctrlKey: true, bubbles: true }));
-          break;
-        case "puck:redo":
-          document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", code: "KeyZ", ctrlKey: true, shiftKey: true, bubbles: true }));
-          break;
-        case "puck:viewport": {
-          const frame = document.querySelector('[data-testid="puck-frame"]');
-          if (frame) {
-            const w = e3.data.width || "100%";
-            frame.style.maxWidth = w;
-            frame.style.margin = w === "100%" ? "0" : "0 auto";
-            frame.style.transition = "max-width 0.3s ease";
-          }
-          break;
-        }
-      }
-    };
-    window.addEventListener("message", onMessage);
-    return () => window.removeEventListener("message", onMessage);
-  }, [isEmbedded, handleSaveDraft]);
-  React__default.useEffect(() => {
-    if (!isEmbedded) return;
-    const handleClick = (e3) => {
-      const target = e3.target;
-      const puckComponent = target.closest("[data-puck-component]");
-      if (puckComponent) {
-        const componentType = puckComponent.getAttribute("data-puck-component");
-        const draggableId = puckComponent.closest("[data-rfd-draggable-id]")?.getAttribute("data-rfd-draggable-id");
-        window.parent.postMessage({
-          type: "puck:itemSelected",
-          item: {
-            type: componentType,
-            id: draggableId || null
-          }
-        }, "*");
-      }
-    };
-    const handleDeselect = (e3) => {
-      const target = e3.target;
-      if (!target.closest("[data-puck-component]")) {
-        window.parent.postMessage({ type: "puck:itemDeselected" }, "*");
-      }
-    };
-    document.addEventListener("click", handleClick, true);
-    document.addEventListener("click", handleDeselect, false);
-    return () => {
-      document.removeEventListener("click", handleClick, true);
-      document.removeEventListener("click", handleDeselect, false);
-    };
-  }, [isEmbedded]);
-  const searchContextValue = React__default.useMemo(() => ({
-    searchQuery,
-    setSearchQuery,
-    config: config3
-  }), [searchQuery, config3]);
-  const plugins = React__default.useMemo(() => [
-    { ...core.blocksPlugin(), label: "Bloklar" },
-    { ...core.outlinePlugin(), label: "Anahat" },
-    { ...core.fieldsPlugin({ desktopSideBar: "right" }), label: "Alanlar" },
-    ...extraPlugins || []
-  ], [extraPlugins]);
-  const mergedOverrides = React__default.useMemo(() => {
-    return {
-      header: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-      drawer: CustomDrawer,
-      drawerItem: CustomDrawerItem,
-      actionBar: ({ children, label }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(CustomActionBar, { label, children });
-      },
-      puck: ({ children }) => {
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AutoFieldsOnSelect, {}),
-          children
-        ] });
-      },
-      ...overrides || {}
-    };
-  }, [overrides]);
-  if (loading || !initialData) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `tecof-editor-loading ${className || ""}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-editor-loading-inner", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-editor-spinner" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tecof-editor-loading-text", children: "Loading editor..." })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerSearchContext.Provider, { value: searchContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `tecof-editor-wrapper ${className || ""}`.trim(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      core.Puck,
-      {
-        plugins,
-        config: config3,
-        data: initialData,
-        onPublish: handlePuckPublish,
-        onChange: handleChange,
-        overrides: mergedOverrides,
-        metadata: { editMode: true }
-      }
-    ),
-    saving && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-editor-save-indicator", children: saveStatus === "error" ? "Save failed" : "Saving..." })
-  ] }) });
-};
-
-// src/engine/document.ts
-var EMPTY_DOCUMENT = {
-  root: { props: {} },
-  content: [],
-  zones: {}
-};
-var parseDocument = (rawData) => {
-  if (!rawData) return { ...EMPTY_DOCUMENT };
-  return {
-    root: rawData.root || { props: {} },
-    content: rawData.content || [],
-    zones: rawData.zones || {}
-  };
-};
-var serializeDocument = (doc) => {
-  return {
-    root: doc.root,
-    content: doc.content,
-    zones: doc.zones
-  };
-};
-
-// src/engine/zones.ts
-var parseZoneKey = (zoneKey) => {
-  const parts = zoneKey.split(":");
-  return {
-    parentId: parts[0],
-    slotName: parts[1] || "default"
-  };
-};
-var findNodeById = (doc, id) => {
-  for (let i2 = 0; i2 < doc.content.length; i2++) {
-    if (doc.content[i2].props.id === id) {
-      return { node: doc.content[i2], path: { index: i2 } };
-    }
-  }
-  for (const [zoneKey, items] of Object.entries(doc.zones)) {
-    for (let i2 = 0; i2 < items.length; i2++) {
-      if (items[i2].props.id === id) {
-        return { node: items[i2], path: { zoneKey, index: i2 } };
-      }
-    }
-  }
-  return null;
-};
-var getDescendantZoneKeys = (zones, nodeId, acc = []) => {
-  const prefix = `${nodeId}:`;
-  for (const zoneKey of Object.keys(zones)) {
-    if (zoneKey.startsWith(prefix)) {
-      acc.push(zoneKey);
-      for (const child of zones[zoneKey]) {
-        getDescendantZoneKeys(zones, child.props.id, acc);
-      }
-    }
-  }
-  return acc;
-};
-var getParentId = (doc, id) => {
-  const res2 = findNodeById(doc, id);
-  if (!res2 || !res2.path.zoneKey) return null;
-  return parseZoneKey(res2.path.zoneKey).parentId;
-};
-var getBreadcrumbs = (doc, id) => {
-  const crumbs = [];
-  let currentId = id;
-  while (currentId) {
-    const res2 = findNodeById(doc, currentId);
-    if (!res2) break;
-    crumbs.unshift({ id: currentId, type: res2.node.type });
-    currentId = res2.path.zoneKey ? parseZoneKey(res2.path.zoneKey).parentId : null;
-  }
-  return crumbs;
-};
-var generateId = () => nanoid.nanoid(8);
-var remapNodeIds = (node, sourceZones, idMap = /* @__PURE__ */ new Map()) => {
-  const oldId = node.props.id;
-  const newId = generateId();
-  idMap.set(oldId, newId);
-  const remappedNode = {
-    ...node,
-    props: {
-      ...node.props,
-      id: newId
-    }
-  };
-  const newZones = {};
-  const prefix = `${oldId}:`;
-  for (const [zoneKey, zoneItems] of Object.entries(sourceZones)) {
-    if (zoneKey.startsWith(prefix)) {
-      const slotName = zoneKey.split(":")[1];
-      const newZoneKey = `${newId}:${slotName}`;
-      const newZoneItems = [];
-      for (const item2 of zoneItems) {
-        const { remappedNode: childNode, newZones: childZones } = remapNodeIds(item2, sourceZones, idMap);
-        newZoneItems.push(childNode);
-        Object.assign(newZones, childZones);
-      }
-      newZones[newZoneKey] = newZoneItems;
-    }
-  }
-  return { remappedNode, newZones };
-};
-
-// src/engine/operations.ts
-var insertNode = (draft, node, targetZoneKey, index2) => {
-  if (!node.props.id) {
-    node.props.id = generateId();
-  }
-  let list3 = targetZoneKey ? draft.zones[targetZoneKey] : draft.content;
-  if (!list3) {
-    list3 = [];
-    if (targetZoneKey) {
-      draft.zones[targetZoneKey] = list3;
-    }
-  }
-  const insertIndex = typeof index2 === "number" ? index2 : list3.length;
-  list3.splice(insertIndex, 0, node);
-};
-var removeNode = (draft, id) => {
-  const result = findNodeById(draft, id);
-  if (!result) return;
-  const { path } = result;
-  const list3 = path.zoneKey ? draft.zones[path.zoneKey] : draft.content;
-  if (list3) {
-    list3.splice(path.index, 1);
-  }
-  const descendantZoneKeys = getDescendantZoneKeys(draft.zones, id);
-  for (const zoneKey of descendantZoneKeys) {
-    delete draft.zones[zoneKey];
-  }
-};
-var moveNode = (draft, id, targetZoneKey, targetIndex) => {
-  const result = findNodeById(draft, id);
-  if (!result) return;
-  const { node, path: sourcePath } = result;
-  const sourceList = sourcePath.zoneKey ? draft.zones[sourcePath.zoneKey] : draft.content;
-  let targetList = targetZoneKey ? draft.zones[targetZoneKey] : draft.content;
-  if (!targetList && targetZoneKey) {
-    targetList = [];
-    draft.zones[targetZoneKey] = targetList;
-  }
-  if (!sourceList || !targetList) return;
-  sourceList.splice(sourcePath.index, 1);
-  let finalIndex = targetIndex ?? targetList.length;
-  if (sourcePath.zoneKey === targetZoneKey && sourcePath.index < finalIndex) {
-    finalIndex -= 1;
-  }
-  targetList.splice(finalIndex, 0, node);
-};
-var duplicateNode = (draft, id) => {
-  const result = findNodeById(draft, id);
-  if (!result) return;
-  const { node, path } = result;
-  const { remappedNode, newZones } = remapNodeIds(node, draft.zones);
-  const targetList = path.zoneKey ? draft.zones[path.zoneKey] : draft.content;
-  if (targetList) {
-    targetList.splice(path.index + 1, 0, remappedNode);
-  }
-  Object.assign(draft.zones, newZones);
+var duplicateNode = (draft, id) => {
+  const result = findNodeById(draft, id);
+  if (!result) return;
+  const { node, path } = result;
+  const { remappedNode, newZones } = remapNodeIds(node, draft.zones);
+  const targetList = path.zoneKey ? draft.zones[path.zoneKey] : draft.content;
+  if (targetList) {
+    targetList.splice(path.index + 1, 0, remappedNode);
+  }
+  Object.assign(draft.zones, newZones);
 };
 var updateProps = (draft, id, patch) => {
   const result = findNodeById(draft, id);
@@ -1215,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()(
@@ -1276,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;
     })
   }))
@@ -1358,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: ",
@@ -1387,6 +717,7 @@ var NodeRenderer = ({ node, index: index2, zoneKey }) => {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
       style: {
         cursor: readOnly ? void 0 : "pointer"
       },
@@ -1454,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) => {
@@ -1466,71 +801,520 @@ 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]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "iframe",
+  }, [contentRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      title,
+      ref: setContentRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "none",
+        background: "#ffffff",
+        ...props.style
+      },
+      ...props,
+      children: mountNode && ReactDOM.createPortal(children, mountNode)
+    }
+  );
+};
+var Canvas = () => {
+  const content = useEditorStore((state3) => state3.document.content);
+  const viewport = useEditorStore((state3) => state3.viewport);
+  const getWidth2 = () => {
+    switch (viewport) {
+      case "tablet":
+        return "768px";
+      case "mobile":
+        return "375px";
+      case "desktop":
+      default:
+        return "100%";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-container", style: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#f4f4f5",
+    padding: "24px",
+    overflow: "auto",
+    height: "100%",
+    boxSizing: "border-box"
+  }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "tecof-canvas-viewport-wrapper",
+      style: {
+        width: getWidth2(),
+        height: "100%",
+        maxWidth: "100%",
+        transition: "width 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05)",
+        borderRadius: viewport === "desktop" ? "0" : "12px",
+        overflow: "hidden",
+        backgroundColor: "#ffffff"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Frame, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-root", style: { minHeight: "100%" }, children: content.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(NodeRenderer, { node: item2, index: index2 }, item2.props.id)) }) })
+    }
+  ) });
+};
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
+var mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
+}).join(" ").trim();
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
+var toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
+var toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+
+// node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
+var hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+var LucideContext = React__default.createContext({});
+var useLucideContext = () => React__default.useContext(LucideContext);
+
+// node_modules/lucide-react/dist/esm/Icon.js
+var Icon = React__default.forwardRef(
+  ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
+    const {
+      size: contextSize = 24,
+      strokeWidth: contextStrokeWidth = 2,
+      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
+      color: contextColor = "currentColor",
+      className: contextClass = ""
+    } = useLucideContext() ?? {};
+    const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
+    return React__default.createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes,
+        width: size ?? contextSize ?? defaultAttributes.width,
+        height: size ?? contextSize ?? defaultAttributes.height,
+        stroke: color ?? contextColor,
+        strokeWidth: calculatedStrokeWidth,
+        className: mergeClasses("lucide", contextClass, className),
+        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => React__default.createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+// node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component2 = React__default.forwardRef(
+    ({ className, ...props }, ref) => React__default.createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component2.displayName = toPascalCase(iconName);
+  return Component2;
+};
+
+// node_modules/lucide-react/dist/esm/icons/arrow-down.js
+var __iconNode = [
+  ["path", { d: "M12 5v14", key: "s699le" }],
+  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
+];
+var ArrowDown = createLucideIcon("arrow-down", __iconNode);
+
+// node_modules/lucide-react/dist/esm/icons/arrow-up.js
+var __iconNode2 = [
+  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
+  ["path", { d: "M12 19V5", key: "x0mq9r" }]
+];
+var ArrowUp = createLucideIcon("arrow-up", __iconNode2);
+
+// node_modules/lucide-react/dist/esm/icons/check.js
+var __iconNode3 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+var Check = createLucideIcon("check", __iconNode3);
+
+// node_modules/lucide-react/dist/esm/icons/chevron-down.js
+var __iconNode4 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode4);
+
+// node_modules/lucide-react/dist/esm/icons/chevron-right.js
+var __iconNode5 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+var ChevronRight = createLucideIcon("chevron-right", __iconNode5);
+
+// node_modules/lucide-react/dist/esm/icons/chevron-up.js
+var __iconNode6 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+var ChevronUp = createLucideIcon("chevron-up", __iconNode6);
+
+// node_modules/lucide-react/dist/esm/icons/code.js
+var __iconNode7 = [
+  ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
+  ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
+];
+var Code = createLucideIcon("code", __iconNode7);
+
+// node_modules/lucide-react/dist/esm/icons/copy.js
+var __iconNode8 = [
+  ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
+  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
+];
+var Copy = createLucideIcon("copy", __iconNode8);
+
+// node_modules/lucide-react/dist/esm/icons/database.js
+var __iconNode9 = [
+  ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
+  ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
+  ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
+];
+var Database = createLucideIcon("database", __iconNode9);
+
+// node_modules/lucide-react/dist/esm/icons/external-link.js
+var __iconNode10 = [
+  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
+  ["path", { d: "M10 14 21 3", key: "gplh6r" }],
+  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
+];
+var ExternalLink = createLucideIcon("external-link", __iconNode10);
+
+// node_modules/lucide-react/dist/esm/icons/file-text.js
+var __iconNode11 = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+];
+var FileText = createLucideIcon("file-text", __iconNode11);
+
+// node_modules/lucide-react/dist/esm/icons/file.js
+var __iconNode12 = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
+];
+var File2 = createLucideIcon("file", __iconNode12);
+
+// node_modules/lucide-react/dist/esm/icons/folder-open.js
+var __iconNode13 = [
+  [
+    "path",
+    {
+      d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
+      key: "usdka0"
+    }
+  ]
+];
+var FolderOpen = createLucideIcon("folder-open", __iconNode13);
+
+// node_modules/lucide-react/dist/esm/icons/globe.js
+var __iconNode14 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
+  ["path", { d: "M2 12h20", key: "9i4pu4" }]
+];
+var Globe = createLucideIcon("globe", __iconNode14);
+
+// 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" }],
+  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
+  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
+  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
+];
+var GripVertical = createLucideIcon("grip-vertical", __iconNode16);
+
+// node_modules/lucide-react/dist/esm/icons/image-plus.js
+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", __iconNode17);
+
+// node_modules/lucide-react/dist/esm/icons/image.js
+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", __iconNode18);
+
+// node_modules/lucide-react/dist/esm/icons/languages.js
+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" }],
+  ["path", { d: "M7 2h1", key: "1t2jsx" }],
+  ["path", { d: "m22 22-5-10-5 10", key: "don7ne" }],
+  ["path", { d: "M14 18h6", key: "1m8k6r" }]
+];
+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",
     {
-      title,
-      ref: setContentRef,
-      style: {
-        width: "100%",
-        height: "100%",
-        border: "none",
-        background: "#ffffff",
-        ...props.style
-      },
-      ...props,
-      children: mountNode && ReactDOM.createPortal(children, mountNode)
+      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"
     }
-  );
-};
-var Canvas = () => {
-  const content = useEditorStore((state3) => state3.document.content);
-  const viewport = useEditorStore((state3) => state3.viewport);
-  const getWidth2 = () => {
-    switch (viewport) {
-      case "tablet":
-        return "768px";
-      case "mobile":
-        return "375px";
-      case "desktop":
-      default:
-        return "100%";
+  ],
+  [
+    "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"
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-container", style: {
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "#f4f4f5",
-    padding: "24px",
-    overflow: "auto",
-    height: "100%",
-    boxSizing: "border-box"
-  }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  ]
+];
+var Layers = createLucideIcon("layers", __iconNode20);
+
+// node_modules/lucide-react/dist/esm/icons/link-2.js
+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", __iconNode21);
+
+// node_modules/lucide-react/dist/esm/icons/link.js
+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", __iconNode22);
+
+// node_modules/lucide-react/dist/esm/icons/loader-circle.js
+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 __iconNode26 = [
+  [
+    "path",
     {
-      className: "tecof-canvas-viewport-wrapper",
-      style: {
-        width: getWidth2(),
-        height: "100%",
-        maxWidth: "100%",
-        transition: "width 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-        boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05)",
-        borderRadius: viewport === "desktop" ? "0" : "12px",
-        overflow: "hidden",
-        backgroundColor: "#ffffff"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Frame, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-canvas-root", style: { minHeight: "100%" }, children: content.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(NodeRenderer, { node: item2, index: index2 }, item2.props.id)) }) })
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
     }
-  ) });
-};
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+];
+var Pencil = createLucideIcon("pencil", __iconNode26);
+
+// node_modules/lucide-react/dist/esm/icons/plus.js
+var __iconNode27 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+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 __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", __iconNode29);
+
+// node_modules/lucide-react/dist/esm/icons/refresh-cw.js
+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", __iconNode30);
+
+// node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
+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", __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 __iconNode33 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+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 __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", __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 __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", __iconNode38);
+
+// node_modules/lucide-react/dist/esm/icons/x.js
+var __iconNode39 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+var X = createLucideIcon("x", __iconNode39);
 var useOverlayCoords = (id, iframeEl, containerEl, documentState) => {
   const [coords, setCoords] = React__default.useState(null);
   React__default.useEffect(() => {
@@ -1907,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) {
@@ -2070,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: "',
@@ -2269,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,
@@ -2382,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,
@@ -2416,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,
@@ -2450,16 +3029,46 @@ var TecofStudio = ({
     }, children: saveStatus === "error" ? "Kaydedilemedi" : "Kaydediliyor..." })
   ] }) });
 };
+
+// src/components/TecofEditor.tsx
+var TecofEditor = TecofStudio;
+var RenderContext = React__default.createContext(null);
+var ParentNodeContext2 = React__default.createContext(null);
+var RenderDropZone = ({ zone, className, style }) => {
+  const parentId = React__default.useContext(ParentNodeContext2);
+  const zoneKey = parentId ? `${parentId}:${zone}` : zone;
+  const context = React__default.useContext(RenderContext);
+  if (!context) return null;
+  const items = context.zones[zoneKey] || [];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: items.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { node: item2, index: index2 }, item2.props.id || index2)) });
+};
+var RenderNode = ({ node, index: index2 }) => {
+  const context = React__default.useContext(RenderContext);
+  if (!context) return null;
+  const componentConfig = context.config.components[node.type];
+  if (!componentConfig) return null;
+  const componentProps = {
+    ...node.props,
+    puck: {
+      renderDropZone: RenderDropZone,
+      isEditing: false,
+      metadata: {
+        cmsData: context.cmsData || null,
+        ...componentConfig.metadata || {}
+      }
+    },
+    editMode: false
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ParentNodeContext2.Provider, { value: node.props.id || null, children: componentConfig.render(componentProps) });
+};
 var TecofRender = ({ data: data3, config: config3, className, cmsData }) => {
   if (!data3) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    core.Render,
-    {
-      config: config3,
-      data: data3,
-      metadata: { cmsData: cmsData || null }
-    }
-  ) });
+  const contextValue = {
+    zones: data3.zones || {},
+    config: config3,
+    cmsData: cmsData || null
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(RenderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: data3.content.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { node: item2, index: index2 }, item2.props.id || index2)) }) });
 };
 var IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif", "svg", "avif", "bmp", "tiff", "heic"];
 var VIDEO_EXTENSIONS = ["mp4", "webm", "ogg", "avi", "mov", "quicktime"];
@@ -26987,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: