@tecof/theme-editor 0.0.34 → 0.0.37

package/dist/index.js

@@ -2,7 +2,10 @@
 
 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');
+var ReactDOM = require('react-dom');
 var react = require('@tiptap/react');
 var Document = require('@tiptap/extension-document');
 var Paragraph = require('@tiptap/extension-paragraph');
@@ -21,7 +24,6 @@ var Link3 = require('@tiptap/extension-link');
 var Code2 = require('@tiptap/extension-code');
 var CodeBlock = require('@tiptap/extension-code-block');
 var Image3 = require('@tiptap/extension-image');
-var ReactDOM = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -44,6 +46,7 @@ function _interopNamespace(e) {
 }
 
 var React__default__namespace = /*#__PURE__*/_interopNamespace(React__default);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var Document__default = /*#__PURE__*/_interopDefault(Document);
 var Paragraph__default = /*#__PURE__*/_interopDefault(Paragraph);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
@@ -60,7 +63,6 @@ var Link3__default = /*#__PURE__*/_interopDefault(Link3);
 var Code2__default = /*#__PURE__*/_interopDefault(Code2);
 var CodeBlock__default = /*#__PURE__*/_interopDefault(CodeBlock);
 var Image3__default = /*#__PURE__*/_interopDefault(Image3);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
 // src/components/TecofProvider.tsx
 
@@ -334,6 +336,494 @@ function useTecof() {
   return ctx;
 }
 
+// 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 updateProps = (draft, id, patch) => {
+  const result = findNodeById(draft, id);
+  if (!result) return;
+  Object.assign(result.node.props, patch);
+};
+var setRootProps = (draft, patch) => {
+  Object.assign(draft.root.props, patch);
+};
+
+// src/engine/store.ts
+var pushToHistory = (state3) => {
+  state3.history.past.push(JSON.parse(JSON.stringify(state3.document)));
+  state3.history.future = [];
+};
+var useEditorStore = zustand.create()(
+  immer.immer((set2) => ({
+    // Initial State
+    document: { ...EMPTY_DOCUMENT },
+    history: {
+      past: [],
+      future: []
+    },
+    selection: {
+      selectedId: null,
+      hoveredId: null
+    },
+    viewport: "desktop",
+    // Actions
+    setDocument: (doc) => set2((state3) => {
+      state3.document = doc;
+      state3.history = { past: [], future: [] };
+      state3.selection = { selectedId: null, hoveredId: null };
+    }),
+    selectNode: (id) => set2((state3) => {
+      state3.selection.selectedId = id;
+    }),
+    hoverNode: (id) => set2((state3) => {
+      state3.selection.hoveredId = id;
+    }),
+    setViewport: (viewport) => set2((state3) => {
+      state3.viewport = viewport;
+    }),
+    insertNode: (node, targetZoneKey, index2) => set2((state3) => {
+      pushToHistory(state3);
+      insertNode(state3.document, node, targetZoneKey, index2);
+    }),
+    removeNode: (id) => set2((state3) => {
+      pushToHistory(state3);
+      removeNode(state3.document, id);
+      if (state3.selection.selectedId === id) {
+        state3.selection.selectedId = null;
+      }
+    }),
+    moveNode: (id, targetZoneKey, index2) => set2((state3) => {
+      pushToHistory(state3);
+      moveNode(state3.document, id, targetZoneKey, index2);
+    }),
+    duplicateNode: (id) => set2((state3) => {
+      pushToHistory(state3);
+      duplicateNode(state3.document, id);
+    }),
+    updateProps: (id, patch) => set2((state3) => {
+      pushToHistory(state3);
+      updateProps(state3.document, id, patch);
+    }),
+    setRootProps: (patch) => set2((state3) => {
+      pushToHistory(state3);
+      setRootProps(state3.document, patch);
+    }),
+    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.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.document = next;
+    })
+  }))
+);
+var StudioContext = React__default.createContext(null);
+var useStudio = () => {
+  const ctx = React__default.useContext(StudioContext);
+  if (!ctx) {
+    throw new Error("useStudio must be used within a StudioProvider");
+  }
+  return ctx;
+};
+var ParentNodeContext = React__default.createContext(null);
+var DropZone = ({ zone, className, style }) => {
+  const parentId = React__default.useContext(ParentNodeContext);
+  const zoneKey = parentId ? `${parentId}:${zone}` : zone;
+  const items = useEditorStore((state3) => state3.document.zones[zoneKey] || []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `tecof-dropzone ${className || ""}`,
+      style: { minHeight: items.length === 0 ? "40px" : void 0, ...style },
+      "data-tecof-zone": zoneKey,
+      children: items.map((item2, index2) => /* @__PURE__ */ jsxRuntime.jsx(NodeRenderer, { node: item2, index: index2, zoneKey }, item2.props.id))
+    }
+  );
+};
+var renderDropZone = ({ zone, className, style }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropZone, { zone, className, style });
+};
+var NodeRenderer = ({ node, index: index2, zoneKey }) => {
+  const { config: config3, metadata, readOnly } = useStudio();
+  const componentConfig = config3.components[node.type];
+  const selectNode = useEditorStore((state3) => state3.selectNode);
+  const hoverNode = useEditorStore((state3) => state3.hoverNode);
+  const hoveredId = useEditorStore((state3) => state3.selection.hoveredId);
+  const handleMouseEnter = React__default.useCallback(
+    (e3) => {
+      if (readOnly) return;
+      e3.stopPropagation();
+      hoverNode(node.props.id);
+    },
+    [hoverNode, node.props.id, readOnly]
+  );
+  const handleMouseLeave = React__default.useCallback(
+    (e3) => {
+      if (readOnly) return;
+      e3.stopPropagation();
+      if (hoveredId === node.props.id) {
+        hoverNode(null);
+      }
+    },
+    [hoverNode, node.props.id, hoveredId, readOnly]
+  );
+  const handleClick = React__default.useCallback(
+    (e3) => {
+      if (readOnly) return;
+      e3.stopPropagation();
+      selectNode(node.props.id);
+      const isEmbedded = typeof window !== "undefined" && window.parent !== window;
+      if (isEmbedded) {
+        window.parent.postMessage(
+          {
+            type: "puck:itemSelected",
+            item: {
+              type: node.type,
+              id: node.props.id
+            }
+          },
+          "*"
+        );
+      }
+    },
+    [selectNode, node.props.id, node.type, readOnly]
+  );
+  if (!componentConfig) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "12px", background: "#fee2e2", color: "#991b1b", fontSize: "12px", borderRadius: "4px" }, children: [
+      "Bile\u015Fen bulunamad\u0131: ",
+      node.type
+    ] });
+  }
+  const componentProps = {
+    ...node.props,
+    puck: {
+      renderDropZone,
+      isEditing: !readOnly,
+      metadata: {
+        ...metadata || {},
+        ...componentConfig.metadata || {}
+      }
+    },
+    editMode: !readOnly
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ParentNodeContext.Provider, { value: node.props.id, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "tecof-node-wrapper",
+      "data-tecof-id": node.props.id,
+      "data-tecof-type": node.type,
+      "data-tecof-index": index2,
+      "data-tecof-zone": zoneKey || "root",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      style: {
+        cursor: readOnly ? void 0 : "pointer"
+      },
+      children: componentConfig.render(componentProps)
+    }
+  ) });
+};
+var Frame = ({ children, title = "Canvas Frame", ...props }) => {
+  const [contentRef, setContentRef] = React__default.useState(null);
+  const mountNode = contentRef?.contentWindow?.document?.body;
+  React__default.useEffect(() => {
+    if (!contentRef) return;
+    const doc = contentRef.contentDocument;
+    if (!doc) return;
+    const copyStyles = () => {
+      doc.head.innerHTML = "";
+      Array.from(document.styleSheets).forEach((styleSheet) => {
+        try {
+          if (styleSheet.href) {
+            const link = doc.createElement("link");
+            link.rel = "stylesheet";
+            link.href = styleSheet.href;
+            doc.head.appendChild(link);
+          } else {
+            const cssRules = Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("\n");
+            const style2 = doc.createElement("style");
+            style2.textContent = cssRules;
+            doc.head.appendChild(style2);
+          }
+        } catch (e3) {
+        }
+      });
+      const style = doc.createElement("style");
+      style.textContent = `
+        html, body {
+          margin: 0;
+          padding: 0;
+          background-color: transparent;
+          min-height: 100vh;
+        }
+        body {
+          padding: 32px 16px;
+          box-sizing: border-box;
+        }
+        .tecof-node-wrapper {
+          position: relative;
+          transition: outline 0.15s ease-in-out;
+        }
+        /* Custom scrollbars for iframe */
+        ::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.15);
+          border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.25);
+        }
+      `;
+      doc.head.appendChild(style);
+    };
+    copyStyles();
+    if (doc.body) {
+      doc.body.className = "tecof-canvas-body";
+      const handleBodyClick = (e3) => {
+        const target = e3.target;
+        if (!target.closest(".tecof-node-wrapper")) {
+          useEditorStore.getState().selectNode(null);
+          const isEmbedded = typeof window !== "undefined" && window.parent !== window;
+          if (isEmbedded) {
+            window.parent.postMessage({ type: "puck:itemDeselected" }, "*");
+          }
+        }
+      };
+      doc.body.addEventListener("click", handleBodyClick);
+      return () => {
+        doc.body.removeEventListener("click", handleBodyClick);
+      };
+    }
+  }, [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;
@@ -455,38 +945,42 @@ var ChevronDown = createLucideIcon("chevron-down", __iconNode4);
 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 __iconNode6 = [
+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", __iconNode6);
+var Code = createLucideIcon("code", __iconNode7);
 
 // node_modules/lucide-react/dist/esm/icons/copy.js
-var __iconNode7 = [
+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", __iconNode7);
+var Copy = createLucideIcon("copy", __iconNode8);
 
 // node_modules/lucide-react/dist/esm/icons/database.js
-var __iconNode8 = [
+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", __iconNode8);
+var Database = createLucideIcon("database", __iconNode9);
 
 // node_modules/lucide-react/dist/esm/icons/external-link.js
-var __iconNode9 = [
+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", __iconNode9);
+var ExternalLink = createLucideIcon("external-link", __iconNode10);
 
 // node_modules/lucide-react/dist/esm/icons/file-text.js
-var __iconNode10 = [
+var __iconNode11 = [
   [
     "path",
     {
@@ -499,10 +993,10 @@ var __iconNode10 = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-var FileText = createLucideIcon("file-text", __iconNode10);
+var FileText = createLucideIcon("file-text", __iconNode11);
 
 // node_modules/lucide-react/dist/esm/icons/file.js
-var __iconNode11 = [
+var __iconNode12 = [
   [
     "path",
     {
@@ -512,10 +1006,10 @@ var __iconNode11 = [
   ],
   ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
 ];
-var File2 = createLucideIcon("file", __iconNode11);
+var File2 = createLucideIcon("file", __iconNode12);
 
 // node_modules/lucide-react/dist/esm/icons/folder-open.js
-var __iconNode12 = [
+var __iconNode13 = [
   [
     "path",
     {
@@ -524,18 +1018,18 @@ var __iconNode12 = [
     }
   ]
 ];
-var FolderOpen = createLucideIcon("folder-open", __iconNode12);
+var FolderOpen = createLucideIcon("folder-open", __iconNode13);
 
 // node_modules/lucide-react/dist/esm/icons/globe.js
-var __iconNode13 = [
+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", __iconNode13);
+var Globe = createLucideIcon("globe", __iconNode14);
 
 // node_modules/lucide-react/dist/esm/icons/grip-vertical.js
-var __iconNode14 = [
+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" }],
@@ -543,28 +1037,28 @@ var __iconNode14 = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-var GripVertical = createLucideIcon("grip-vertical", __iconNode14);
+var GripVertical = createLucideIcon("grip-vertical", __iconNode15);
 
 // node_modules/lucide-react/dist/esm/icons/image-plus.js
-var __iconNode15 = [
+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", __iconNode15);
+var ImagePlus = createLucideIcon("image-plus", __iconNode16);
 
 // node_modules/lucide-react/dist/esm/icons/image.js
-var __iconNode16 = [
+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", __iconNode16);
+var Image2 = createLucideIcon("image", __iconNode17);
 
 // node_modules/lucide-react/dist/esm/icons/languages.js
-var __iconNode17 = [
+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" }],
@@ -572,29 +1066,29 @@ var __iconNode17 = [
   ["path", { d: "m22 22-5-10-5 10", key: "don7ne" }],
   ["path", { d: "M14 18h6", key: "1m8k6r" }]
 ];
-var Languages = createLucideIcon("languages", __iconNode17);
+var Languages = createLucideIcon("languages", __iconNode18);
 
 // node_modules/lucide-react/dist/esm/icons/link-2.js
-var __iconNode18 = [
+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", __iconNode18);
+var Link2 = createLucideIcon("link-2", __iconNode19);
 
 // node_modules/lucide-react/dist/esm/icons/link.js
-var __iconNode19 = [
+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", __iconNode19);
+var Link = createLucideIcon("link", __iconNode20);
 
 // node_modules/lucide-react/dist/esm/icons/loader-circle.js
-var __iconNode20 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-var LoaderCircle = createLucideIcon("loader-circle", __iconNode20);
+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 __iconNode21 = [
+var __iconNode22 = [
   [
     "path",
     {
@@ -604,429 +1098,1030 @@ var __iconNode21 = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-var Pencil = createLucideIcon("pencil", __iconNode21);
+var Pencil = createLucideIcon("pencil", __iconNode22);
 
 // node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode22 = [
+var __iconNode23 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode22);
+var Plus = createLucideIcon("plus", __iconNode23);
 
 // node_modules/lucide-react/dist/esm/icons/refresh-ccw.js
-var __iconNode23 = [
+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", __iconNode23);
+var RefreshCcw = createLucideIcon("refresh-ccw", __iconNode24);
 
 // node_modules/lucide-react/dist/esm/icons/refresh-cw.js
-var __iconNode24 = [
+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", __iconNode24);
+var RefreshCw = createLucideIcon("refresh-cw", __iconNode25);
 
 // node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
-var __iconNode25 = [
+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", __iconNode25);
+var RotateCcw = createLucideIcon("rotate-ccw", __iconNode26);
 
 // node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode26 = [
+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", __iconNode26);
+var Search = createLucideIcon("search", __iconNode27);
 
 // node_modules/lucide-react/dist/esm/icons/trash-2.js
-var __iconNode27 = [
+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", __iconNode27);
+var Trash2 = createLucideIcon("trash-2", __iconNode28);
 
 // node_modules/lucide-react/dist/esm/icons/upload.js
-var __iconNode28 = [
+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", __iconNode28);
+var Upload = createLucideIcon("upload", __iconNode29);
 
 // node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode29 = [
+var __iconNode30 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode29);
-var EMPTY_PAGE = { content: [], root: { props: {} }, zones: {} };
-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);
+var X = createLucideIcon("x", __iconNode30);
+var useOverlayCoords = (id, iframeEl, containerEl, documentState) => {
+  const [coords, setCoords] = React__default.useState(null);
+  React__default.useEffect(() => {
+    if (!id || !iframeEl || !containerEl) {
+      setCoords(null);
+      return;
     }
-  }, [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",
+    let resizeObserver = null;
+    let targetResizeObserver = null;
+    const updateCoords = () => {
+      const doc = iframeEl.contentDocument;
+      if (!doc) return;
+      const element = doc.querySelector(`[data-tecof-id="${id}"]`);
+      if (!element) {
+        setCoords(null);
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      const iframeRect = iframeEl.getBoundingClientRect();
+      const containerRect = containerEl.getBoundingClientRect();
+      setCoords({
+        top: rect.top + iframeRect.top - containerRect.top,
+        left: rect.left + iframeRect.left - containerRect.left,
+        width: rect.width,
+        height: rect.height
+      });
+      if (!targetResizeObserver) {
+        targetResizeObserver = new ResizeObserver(() => {
+          updateCoords();
+        });
+        targetResizeObserver.observe(element);
+      }
+    };
+    updateCoords();
+    const iframeWin = iframeEl.contentWindow;
+    resizeObserver = new ResizeObserver(() => {
+      updateCoords();
+    });
+    resizeObserver.observe(iframeEl);
+    iframeWin?.addEventListener("scroll", updateCoords);
+    window.addEventListener("resize", updateCoords);
+    return () => {
+      if (resizeObserver) resizeObserver.disconnect();
+      if (targetResizeObserver) targetResizeObserver.disconnect();
+      iframeWin?.removeEventListener("scroll", updateCoords);
+      window.removeEventListener("resize", updateCoords);
+    };
+  }, [id, iframeEl, containerEl, documentState]);
+  return coords;
+};
+var SelectionOverlay = () => {
+  const documentState = useEditorStore((state3) => state3.document);
+  const selectedId = useEditorStore((state3) => state3.selection.selectedId);
+  const hoveredId = useEditorStore((state3) => state3.selection.hoveredId);
+  const selectNode = useEditorStore((state3) => state3.selectNode);
+  const removeNode2 = useEditorStore((state3) => state3.removeNode);
+  const duplicateNode2 = useEditorStore((state3) => state3.duplicateNode);
+  const moveNode2 = useEditorStore((state3) => state3.moveNode);
+  const [iframeEl, setIframeEl] = React__default.useState(null);
+  const containerRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    const iframe = document.querySelector(".tecof-canvas-viewport-wrapper iframe");
+    setIframeEl(iframe);
+  }, [documentState]);
+  const selectedCoords = useOverlayCoords(selectedId, iframeEl, containerRef.current, documentState);
+  const hoveredCoords = useOverlayCoords(
+    hoveredId !== selectedId ? hoveredId : null,
+    iframeEl,
+    containerRef.current,
+    documentState
+  );
+  const nodeDetails = selectedId ? findNodeById(documentState, selectedId) : null;
+  const parentId = selectedId ? getParentId(documentState, selectedId) : null;
+  const canMoveUp = nodeDetails ? nodeDetails.path.index > 0 : false;
+  const canMoveDown = nodeDetails ? (() => {
+    const { zoneKey, index: index2 } = nodeDetails.path;
+    const items = zoneKey ? documentState.zones[zoneKey] || [] : documentState.content;
+    return index2 < items.length - 1;
+  })() : false;
+  const handleMove = (direction) => {
+    if (!selectedId || !nodeDetails) return;
+    const { zoneKey, index: index2 } = nodeDetails.path;
+    const newIndex = direction === "up" ? index2 - 1 : index2 + 1;
+    moveNode2(selectedId, zoneKey, newIndex);
+  };
+  const breadcrumbs = selectedId ? getBreadcrumbs(documentState, selectedId) : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "tecof-selection-overlay-container",
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        zIndex: 1e3
+      },
+      children: [
+        hoveredCoords && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            src: imgSrc,
-            alt: `${name3} preview`,
-            className: "tecof-drawer-img"
+            className: "tecof-hover-outline",
+            style: {
+              position: "absolute",
+              top: hoveredCoords.top,
+              left: hoveredCoords.left,
+              width: hoveredCoords.width,
+              height: hoveredCoords.height,
+              border: "1.5px dashed #3b82f6",
+              borderRadius: "4px",
+              boxSizing: "border-box",
+              pointerEvents: "none",
+              transition: "all 0.1s ease-out"
+            }
           }
         ),
-        error2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-drawer-preview-error", children: "\xD6nizleme y\xFCklenemedi" })
-      ] })
-    ] })
-  ] });
-};
-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" } }
-      });
+        selectedCoords && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "tecof-selected-outline",
+            style: {
+              position: "absolute",
+              top: selectedCoords.top,
+              left: selectedCoords.left,
+              width: selectedCoords.width,
+              height: selectedCoords.height,
+              border: "2px solid #3b82f6",
+              borderRadius: "4px",
+              boxSizing: "border-box",
+              pointerEvents: "none",
+              transition: "all 0.1s ease-out"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "tecof-floating-toolbar",
+                  style: {
+                    position: "absolute",
+                    top: "-36px",
+                    right: "-2px",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    background: "#3b82f6",
+                    borderRadius: "6px",
+                    padding: "4px",
+                    pointerEvents: "auto",
+                    boxShadow: "0 4px 6px -1px rgba(59, 130, 246, 0.2)"
+                  },
+                  children: [
+                    parentId && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => selectNode(parentId),
+                        title: "\xDCst \xD6\u011Feyi Se\xE7",
+                        style: {
+                          background: "transparent",
+                          border: "none",
+                          color: "#ffffff",
+                          cursor: "pointer",
+                          padding: "4px",
+                          borderRadius: "4px",
+                          display: "flex"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUp, { size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => handleMove("up"),
+                        disabled: !canMoveUp,
+                        title: "Yukar\u0131 Ta\u015F\u0131",
+                        style: {
+                          background: "transparent",
+                          border: "none",
+                          color: "#ffffff",
+                          opacity: canMoveUp ? 1 : 0.5,
+                          cursor: canMoveUp ? "pointer" : "not-allowed",
+                          padding: "4px",
+                          borderRadius: "4px",
+                          display: "flex"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUp, { size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => handleMove("down"),
+                        disabled: !canMoveDown,
+                        title: "A\u015Fa\u011F\u0131 Ta\u015F\u0131",
+                        style: {
+                          background: "transparent",
+                          border: "none",
+                          color: "#ffffff",
+                          opacity: canMoveDown ? 1 : 0.5,
+                          cursor: canMoveDown ? "pointer" : "not-allowed",
+                          padding: "4px",
+                          borderRadius: "4px",
+                          display: "flex"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown, { size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "1px", height: "14px", background: "rgba(255,255,255,0.3)", margin: "0 2px" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => duplicateNode2(selectedId),
+                        title: "Kopyala",
+                        style: {
+                          background: "transparent",
+                          border: "none",
+                          color: "#ffffff",
+                          cursor: "pointer",
+                          padding: "4px",
+                          borderRadius: "4px",
+                          display: "flex"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Copy, { size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => removeNode2(selectedId),
+                        title: "Sil",
+                        style: {
+                          background: "transparent",
+                          border: "none",
+                          color: "#ffffff",
+                          cursor: "pointer",
+                          padding: "4px",
+                          borderRadius: "4px",
+                          display: "flex"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 14 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              nodeDetails && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "tecof-outline-label",
+                  style: {
+                    position: "absolute",
+                    top: "-26px",
+                    left: "-2px",
+                    background: "#3b82f6",
+                    color: "#ffffff",
+                    fontSize: "11px",
+                    fontWeight: 600,
+                    padding: "2px 8px",
+                    borderRadius: "4px 4px 0 0",
+                    userSelect: "none"
+                  },
+                  children: nodeDetails.node.type
+                }
+              ),
+              breadcrumbs.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "tecof-selected-breadcrumbs",
+                  style: {
+                    position: "absolute",
+                    bottom: "-28px",
+                    left: "-2px",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    background: "#18181b",
+                    color: "#a1a1aa",
+                    fontSize: "10px",
+                    padding: "4px 8px",
+                    borderRadius: "0 0 6px 6px",
+                    pointerEvents: "auto",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.05)"
+                  },
+                  children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__default__namespace.default.Fragment, { children: [
+                    idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#52525b" }, children: ">" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        onClick: () => selectNode(crumb.id),
+                        style: {
+                          cursor: "pointer",
+                          color: crumb.id === selectedId ? "#ffffff" : void 0,
+                          fontWeight: crumb.id === selectedId ? 600 : void 0
+                        },
+                        onMouseEnter: () => useEditorStore.getState().hoverNode(crumb.id),
+                        onMouseLeave: () => useEditorStore.getState().hoverNode(null),
+                        children: crumb.type
+                      }
+                    )
+                  ] }, crumb.id))
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
-    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
+var FieldLabel = ({
+  label,
+  icon,
+  readOnly,
+  children,
+  el = "label"
+}) => {
+  const Component2 = el;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component2,
+    {
+      className: "tecof-field-label-container",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+        marginBottom: "16px",
+        width: "100%",
+        boxSizing: "border-box",
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "tecof-field-label-header",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              fontSize: "12px",
+              fontWeight: 600,
+              color: "#27272a"
+              // zinc-800
+            },
+            children: [
+              icon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex" }, children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+              readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "10px",
+                    color: "#a1a1aa",
+                    fontWeight: 400,
+                    marginLeft: "auto"
+                  },
+                  children: "Salt Okunur"
+                }
+              )
+            ]
           }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-field-label-content", style: { width: "100%" }, children })
+      ]
+    }
+  );
+};
+var FieldRenderer = ({
+  name: name3,
+  definition,
+  value,
+  onChange,
+  readOnly = false
+}) => {
+  const label = definition.label || name3;
+  const type = definition.type;
+  if (definition.render) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-custom-field-wrapper", style: { width: "100%" }, children: definition.render({
+      field: definition,
+      name: name3,
+      id: `field-${name3}`,
+      value,
+      onChange,
+      readOnly
+    }) });
+  }
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: `field-${name3}`,
+          type: "text",
+          value: value || "",
+          disabled: readOnly,
+          onChange: (e3) => onChange(e3.target.value),
+          style: {
+            width: "100%",
+            padding: "10px 12px",
+            borderRadius: "8px",
+            border: "1px solid #e4e4e7",
+            fontSize: "13px",
+            color: "#18181b",
+            backgroundColor: readOnly ? "#f4f4f5" : "#ffffff",
+            outline: "none",
+            boxSizing: "border-box",
+            transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+          },
+          className: "tecof-input-text"
         }
-      });
-    } else {
-      dispatch({
-        type: "setData",
-        data: {
-          ...appState.data,
-          content: items
+      ) });
+    case "textarea":
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          id: `field-${name3}`,
+          rows: 4,
+          value: value || "",
+          disabled: readOnly,
+          onChange: (e3) => onChange(e3.target.value),
+          style: {
+            width: "100%",
+            padding: "10px 12px",
+            borderRadius: "8px",
+            border: "1px solid #e4e4e7",
+            fontSize: "13px",
+            color: "#18181b",
+            backgroundColor: readOnly ? "#f4f4f5" : "#ffffff",
+            outline: "none",
+            resize: "vertical",
+            boxSizing: "border-box",
+            transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+          },
+          className: "tecof-input-textarea"
         }
-      });
-      dispatch({
-        type: "setUi",
-        ui: {
-          itemSelector: {
-            index: targetIndex
+      ) });
+    case "select":
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, readOnly, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            id: `field-${name3}`,
+            value: value || "",
+            disabled: readOnly,
+            onChange: (e3) => onChange(e3.target.value),
+            style: {
+              width: "100%",
+              padding: "10px 32px 10px 12px",
+              borderRadius: "8px",
+              border: "1px solid #e4e4e7",
+              fontSize: "13px",
+              color: "#18181b",
+              backgroundColor: readOnly ? "#f4f4f5" : "#ffffff",
+              outline: "none",
+              appearance: "none",
+              boxSizing: "border-box",
+              cursor: readOnly ? "not-allowed" : "pointer"
+            },
+            className: "tecof-input-select",
+            children: (definition.options || []).map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label || opt.value }, opt.value))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              right: "12px",
+              transform: "translateY(-50%)",
+              pointerEvents: "none",
+              display: "flex",
+              alignItems: "center",
+              color: "#71717a"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 4.5L6 8L9.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
           }
+        )
+      ] }) });
+    case "number":
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: `field-${name3}`,
+          type: "number",
+          value: value !== void 0 ? value : "",
+          disabled: readOnly,
+          onChange: (e3) => {
+            const val = e3.target.value;
+            onChange(val === "" ? void 0 : Number(val));
+          },
+          style: {
+            width: "100%",
+            padding: "10px 12px",
+            borderRadius: "8px",
+            border: "1px solid #e4e4e7",
+            fontSize: "13px",
+            color: "#18181b",
+            backgroundColor: readOnly ? "#f4f4f5" : "#ffffff",
+            outline: "none",
+            boxSizing: "border-box"
+          },
+          className: "tecof-input-number"
         }
-      });
+      ) });
+    case "radio":
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: (definition.options || []).map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            fontSize: "13px",
+            color: "#27272a",
+            cursor: readOnly ? "not-allowed" : "pointer"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "radio",
+                name: name3,
+                value: opt.value,
+                checked: value === opt.value,
+                disabled: readOnly,
+                onChange: () => onChange(opt.value),
+                style: {
+                  cursor: readOnly ? "not-allowed" : "pointer"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: opt.label || opt.value })
+          ]
+        },
+        opt.value
+      )) }) });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px", fontSize: "11px", color: "#71717a", background: "#fafafa", borderRadius: "4px" }, children: [
+        'Desteklenmeyen alan t\xFCr\xFC: "',
+        type,
+        '" (',
+        name3,
+        ")"
+      ] });
+  }
+};
+var Inspector = () => {
+  const documentState = useEditorStore((state3) => state3.document);
+  const selectedId = useEditorStore((state3) => state3.selection.selectedId);
+  const updateProps2 = useEditorStore((state3) => state3.updateProps);
+  const setRootProps2 = useEditorStore((state3) => state3.setRootProps);
+  const selectNode = useEditorStore((state3) => state3.selectNode);
+  const { config: config3, readOnly } = useStudio();
+  if (selectedId) {
+    const nodeDetails = findNodeById(documentState, selectedId);
+    if (!nodeDetails) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px", color: "#71717a", fontSize: "13px", textAlign: "center" }, children: "Bile\u015Fen y\xFCkleniyor veya bulunamad\u0131." });
+    }
+    const { node } = nodeDetails;
+    const componentConfig = config3.components[node.type];
+    const fields = componentConfig?.fields || {};
+    const label = componentConfig?.label || node.type;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "tecof-inspector",
+        style: {
+          width: "320px",
+          height: "100%",
+          borderLeft: "1px solid #e4e4e7",
+          background: "#ffffff",
+          display: "flex",
+          flexDirection: "column",
+          boxSizing: "border-box"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                padding: "16px 20px",
+                borderBottom: "1px solid #f4f4f5",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "14px", fontWeight: 700, color: "#18181b" }, children: label }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: "#a1a1aa", fontFamily: "monospace" }, children: selectedId })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => selectNode(null),
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: "#71717a",
+                      cursor: "pointer",
+                      fontSize: "11px",
+                      fontWeight: 500,
+                      padding: "4px 8px",
+                      borderRadius: "4px",
+                      hover: { background: "#f4f4f5" }
+                    },
+                    children: "Se\xE7imi Kald\u0131r"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "tecof-inspector-fields",
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: "20px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px"
+              },
+              children: Object.keys(fields).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#a1a1aa", fontSize: "12px", textAlign: "center", marginTop: "16px" }, children: "Bu bile\u015Fenin d\xFCzenlenebilir alan\u0131 bulunmuyor." }) : Object.entries(fields).map(([fieldName, fieldDef]) => /* @__PURE__ */ jsxRuntime.jsx(
+                FieldRenderer,
+                {
+                  name: fieldName,
+                  definition: fieldDef,
+                  value: node.props[fieldName],
+                  onChange: (newVal) => updateProps2(selectedId, { [fieldName]: newVal }),
+                  readOnly
+                },
+                fieldName
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+  const rootFields = config3.root?.fields || {};
+  const hasRootFields = Object.keys(rootFields).length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "tecof-inspector",
+      style: {
+        width: "320px",
+        height: "100%",
+        borderLeft: "1px solid #e4e4e7",
+        background: "#ffffff",
+        display: "flex",
+        flexDirection: "column",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              borderBottom: "1px solid #f4f4f5"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "14px", fontWeight: 700, color: "#18181b" }, children: "Sayfa Ayarlar\u0131" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: "#a1a1aa" }, children: "Genel sayfa konfig\xFCrasyonu" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "tecof-inspector-fields",
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "20px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px"
+            },
+            children: hasRootFields ? Object.entries(rootFields).map(([fieldName, fieldDef]) => /* @__PURE__ */ jsxRuntime.jsx(
+              FieldRenderer,
+              {
+                name: fieldName,
+                definition: fieldDef,
+                value: documentState.root.props[fieldName],
+                onChange: (newVal) => setRootProps2({ [fieldName]: newVal }),
+                readOnly
+              },
+              fieldName
+            )) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "100%",
+                  color: "#a1a1aa",
+                  fontSize: "12px",
+                  textAlign: "center",
+                  padding: "20px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "svg",
+                    {
+                      width: "24",
+                      height: "24",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      style: { marginBottom: "8px", opacity: 0.6 },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3v18" })
+                      ]
+                    }
+                  ),
+                  "Bile\u015Fen se\xE7ilmedi. D\xFCzenlemek istedi\u011Finiz bir bile\u015Fene t\u0131klay\u0131n."
+                ]
+              }
+            )
+          }
+        )
+      ]
     }
-  }, [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 = ({
+var TecofStudio = ({
   pageId,
   config: config3,
   accessToken,
   onSave,
   onChange,
-  overrides,
-  plugins: extraPlugins,
   className
 }) => {
-  const { apiClient, secretKey } = useTecof();
-  const [initialData, setInitialData] = React__default.useState(null);
+  const { apiClient } = useTecof();
   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 setDocument = useEditorStore((state3) => state3.setDocument);
+  const documentState = useEditorStore((state3) => state3.document);
+  const undo = useEditorStore((state3) => state3.undo);
+  const redo = useEditorStore((state3) => state3.redo);
+  const setViewport = useEditorStore((state3) => state3.setViewport);
+  const documentStateRef = React__default.useRef(documentState);
+  documentStateRef.current = documentState;
   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);
+      try {
+        const res2 = await apiClient.getPage(pageId);
+        if (cancelled) return;
+        const rawData = res2.success && res2.data?.draftData ? res2.data.draftData : null;
+        const parsedDoc = parseDocument(rawData);
+        setDocument(parsedDoc);
+      } catch (err) {
+        console.error("Failed to load page:", err);
+      } finally {
+        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);
+  }, [pageId, apiClient, setDocument]);
+  const isFirstRender = React__default.useRef(true);
+  React__default.useEffect(() => {
+    if (loading) return;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    const serialized = serializeDocument(documentState);
+    onChange?.(serialized);
+    if (isEmbedded) {
+      window.parent.postMessage({ type: "puck:changed" }, "*");
+    }
+  }, [documentState, loading, onChange, isEmbedded]);
+  const handleSaveDraft = React__default.useCallback(async () => {
+    const currentDoc = documentStateRef.current;
+    const serialized = serializeDocument(currentDoc);
+    setSaving(true);
+    setSaveStatus("idle");
+    try {
+      const res2 = await apiClient.savePage(pageId, serialized, void 0, accessToken);
       if (res2.success) {
         setSaveStatus("success");
         setTimeout(() => setSaveStatus("idle"), 3e3);
-        onSave?.(draftData);
-        if (isEmbedded) window.parent.postMessage({ type: "puck:saved" }, "*");
+        onSave?.(serialized);
+        if (isEmbedded) {
+          window.parent.postMessage({ type: "puck:saved" }, "*");
+        }
       } else {
         setSaveStatus("error");
-        if (isEmbedded) window.parent.postMessage({ type: "puck:saveError", message: res2.message }, "*");
+        if (isEmbedded) {
+          window.parent.postMessage({ type: "puck:saveError", message: res2.message }, "*");
+        }
       }
+    } catch (err) {
+      setSaveStatus("error");
+      if (isEmbedded) {
+        window.parent.postMessage({ type: "puck:saveError", message: err.message }, "*");
+      }
+    } finally {
       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]
-  );
+    }
+  }, [pageId, apiClient, accessToken, onSave, isEmbedded]);
   React__default.useEffect(() => {
     if (!isEmbedded) return;
     const onMessage = (e3) => {
       switch (e3.data?.type) {
-        case "puck:save": {
+        case "puck:save":
           handleSaveDraft();
           break;
-        }
         case "puck:undo":
-          document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", code: "KeyZ", ctrlKey: true, bubbles: true }));
+          undo();
           break;
         case "puck:redo":
-          document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", code: "KeyZ", ctrlKey: true, shiftKey: true, bubbles: true }));
+          redo();
           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";
+        case "puck:viewport":
+          if (e3.data.width) {
+            const width = e3.data.width;
+            if (width === "375px" || width === 375) {
+              setViewport("mobile");
+            } else if (width === "768px" || width === 768) {
+              setViewport("tablet");
+            } else {
+              setViewport("desktop");
+            }
           }
           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]);
-  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..." })
+  }, [isEmbedded, handleSaveDraft, undo, redo, setViewport]);
+  const studioContextValue = React__default.useMemo(() => ({
+    config: config3,
+    readOnly: false,
+    apiClient
+  }), [config3, apiClient]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `tecof-editor-loading ${className || ""}`.trim(), style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100vh",
+      background: "#f4f4f5"
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-editor-spinner", style: {
+        width: "40px",
+        height: "40px",
+        border: "3px solid #e4e4e7",
+        borderTopColor: "#3b82f6",
+        borderRadius: "50%",
+        animation: "spin 1s linear infinite",
+        margin: "0 auto 16px"
+      } }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#71717a", fontSize: "14px", margin: 0 }, children: "St\xFCdyo y\xFCkleniyor..." })
     ] }) });
   }
-  const plugins = [
-    { ...core.blocksPlugin(), label: "Bloklar" },
-    { ...core.outlinePlugin(), label: "Anahat" },
-    { ...core.fieldsPlugin({ desktopSideBar: "right" }), label: "Alanlar" },
-    ...extraPlugins || []
-  ];
-  const mergedOverrides = {
-    header: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-    drawer: ({ children }) => {
-      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 })
-      ] });
-    },
-    drawerItem: ({ children, name: name3 }) => {
-      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, {});
-        }
+  return /* @__PURE__ */ jsxRuntime.jsx(StudioContext.Provider, { value: studioContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `tecof-studio-root ${className || ""}`.trim(), style: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100vh",
+    width: "100vw",
+    overflow: "hidden",
+    position: "relative",
+    background: "#f4f4f5"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-workspace-container", style: {
+      display: "flex",
+      flex: 1,
+      height: "100%",
+      width: "100%",
+      overflow: "hidden"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-studio-workspace", style: {
+        display: "flex",
+        flex: 1,
+        height: "100%",
+        position: "relative",
+        overflow: "hidden"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Canvas, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectionOverlay, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Inspector, {})
+    ] }),
+    saving && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-editor-save-indicator", style: {
+      position: "absolute",
+      bottom: "24px",
+      right: "24px",
+      background: saveStatus === "error" ? "#ef4444" : "#18181b",
+      color: "#ffffff",
+      padding: "8px 16px",
+      borderRadius: "24px",
+      fontSize: "12px",
+      fontWeight: 500,
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+      zIndex: 9999
+    }, 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 || {}
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(ComponentDrawerItem, { name: name3, apiClient, children });
-    },
-    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 || {}
+    editMode: false
   };
-  return /* @__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..." })
-  ] });
+  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"];
@@ -1729,7 +2824,7 @@ var createLanguageField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       LanguageField,
       {
         field,
@@ -5659,7 +6754,7 @@ var createEditorField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
       {
         field,
@@ -6248,7 +7343,7 @@ var createView = (
     },
     write: write2 = () => {
     },
-    create: create4 = () => {
+    create: create5 = () => {
     },
     destroy: destroy3 = () => {
     },
@@ -6452,7 +7547,7 @@ var createView = (
       }
     });
     const internalAPI = createObject(internalAPIDefinition);
-    create4({
+    create5({
       root: internalAPI,
       props
     });
@@ -9182,7 +10277,7 @@ var percentageArc = (x, y, radius, from, to) => {
     arcSweep
   );
 };
-var create = ({ root: root3, props }) => {
+var create2 = ({ root: root3, props }) => {
   props.spin = false;
   props.progress = 0;
   props.opacity = 0;
@@ -9222,7 +10317,7 @@ var progressIndicator = createView({
   name: "progress-indicator",
   ignoreRectUpdate: true,
   ignoreRect: true,
-  create,
+  create: create2,
   write,
   mixins: {
     apis: ["progress", "spin", "align"],
@@ -14062,7 +15157,7 @@ var createImageWrapperView = (_2) => {
     root3.ref.overlayShadow.opacity = 0.25;
     root3.ref.overlaySuccess.opacity = 1;
   };
-  const create4 = ({ root: root3 }) => {
+  const create5 = ({ root: root3 }) => {
     root3.ref.images = [];
     root3.ref.imageData = null;
     root3.ref.imageViewBin = [];
@@ -14087,7 +15182,7 @@ var createImageWrapperView = (_2) => {
   };
   return _2.utils.createView({
     name: "image-preview-wrapper",
-    create: create4,
+    create: create5,
     styles: ["height"],
     apis: ["height"],
     destroy: ({ root: root3 }) => {
@@ -15897,7 +16992,7 @@ var plugin7 = ({ addFilter: addFilter2, utils }) => {
           }).catch(reject);
         });
         const variantPromises = variants.map(
-          (create4) => create4(transform, file2, item2.getMetadata())
+          (create5) => create5(transform, file2, item2.getMetadata())
         );
         Promise.all(variantPromises).then((files) => {
           resolve(
@@ -19237,7 +20332,7 @@ var createTexture = function(e3, t2, r2, n, i2) {
   }
   return o2;
 };
-var create2 = function() {
+var create3 = function() {
   var e3 = new Float32Array(16);
   return e3[0] = 1, e3[5] = 1, e3[10] = 1, e3[15] = 1, e3;
 };
@@ -19265,7 +20360,7 @@ var rotateZ = function(e3, t2) {
   var r2 = Math.sin(t2), n = Math.cos(t2), i2 = e3[0], o2 = e3[1], a2 = e3[2], c2 = e3[3], l3 = e3[4], u = e3[5], s2 = e3[6], d = e3[7];
   e3[0] = i2 * n + l3 * r2, e3[1] = o2 * n + u * r2, e3[2] = a2 * n + s2 * r2, e3[3] = c2 * n + d * r2, e3[4] = l3 * n - i2 * r2, e3[5] = u * n - o2 * r2, e3[6] = s2 * n - a2 * r2, e3[7] = d * n - c2 * r2;
 };
-var mat4 = { create: create2, perspective, translate, scale, rotateX, rotateY, rotateZ };
+var mat4 = { create: create3, perspective, translate, scale, rotateX, rotateY, rotateZ };
 var degToRad = function(e3) {
   return e3 * Math.PI / 180;
 };
@@ -23622,7 +24717,7 @@ var createUploadField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       UploadField,
       {
         field,
@@ -23860,7 +24955,7 @@ var validators = {
   handler: validateHandler,
   initial: validateInitial
 };
-function create3(initial) {
+function create4(initial) {
   var handler = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   validators.initial(initial);
   validators.handler(handler);
@@ -23898,7 +24993,7 @@ function didStateUpdate(state3, handler, changes) {
   return changes;
 }
 var index = {
-  create: create3
+  create: create4
 };
 var state_local_default = index;
 
@@ -24317,7 +25412,7 @@ var createCodeEditorField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       CodeEditorField,
       {
         field,
@@ -24564,7 +25659,7 @@ var createLinkField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       LinkField,
       {
         field,
@@ -24765,7 +25860,7 @@ var createColorField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       ColorField,
       {
         field,
@@ -25067,7 +26162,7 @@ var createRepeaterField = (options) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       RepeaterField,
       {
         field,
@@ -25368,7 +26463,7 @@ var createCmsCollectionField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       CmsCollectionField,
       {
         field,
@@ -25545,6 +26640,7 @@ lucide-react/dist/esm/icons/arrow-up.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/chevron-right.js:
+lucide-react/dist/esm/icons/chevron-up.js:
 lucide-react/dist/esm/icons/code.js:
 lucide-react/dist/esm/icons/copy.js:
 lucide-react/dist/esm/icons/database.js:
@@ -25665,6 +26761,7 @@ exports.TecofEditor = TecofEditor;
 exports.TecofPicture = TecofPicture;
 exports.TecofProvider = TecofProvider;
 exports.TecofRender = TecofRender;
+exports.TecofStudio = TecofStudio;
 exports.UnderConstruction = UnderConstruction;
 exports.UploadField = UploadField;
 exports.createCmsCollectionField = createCmsCollectionField;