@nookuio/iframe 1.0.1-beta.0 → 1.0.1

package/dist/iframe.mjs

@@ -1,163 +1,179 @@
-import { EDITOR_SOURCE_NAME as b, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
-import { createClient as C } from "@nookuio/rpc";
-import { stringify as v, parse as L } from "telejson";
-import { createDragDropContext as x } from "./drag-drop/index.mjs";
-function p(u, d) {
-  return `[data-node-id="${d}"][data-node-path="${u}"]`;
+import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as g } from "./constants.mjs";
+import { createClient as b } from "@nookuio/rpc";
+import { stringify as h, parse as w } from "telejson";
+function u(l, t) {
+  return `[data-node-id="${t}"][data-node-path="${l}"]`;
 }
-function h(u, d) {
-  const m = document.querySelectorAll(u);
-  if (!m?.length) return;
-  const r = Array.from(m).map((f) => {
-    const l = f.getBoundingClientRect(), g = {
-      width: l.width,
-      height: l.height,
-      top: l.top,
-      left: l.left
+function y(l, t) {
+  const n = document.querySelectorAll(l);
+  if (!n?.length) return;
+  const o = Array.from(n).map((r) => {
+    const s = r.getBoundingClientRect(), d = {
+      width: s.width,
+      height: s.height,
+      top: s.top,
+      left: s.left
     };
-    if (!d) return g;
-    const c = window.getComputedStyle(f) ?? {};
+    if (!t) return d;
+    const i = window.getComputedStyle(r) ?? {};
     return {
-      ...g,
+      ...d,
       padding: {
-        top: c.paddingTop,
-        right: c.paddingRight,
-        bottom: c.paddingBottom,
-        left: c.paddingLeft
+        top: i.paddingTop,
+        right: i.paddingRight,
+        bottom: i.paddingBottom,
+        left: i.paddingLeft
       }
     };
   });
-  if (r?.length)
-    return r.length === 1 ? r[0] : r;
+  if (o?.length)
+    return o.length === 1 ? o[0] : o;
 }
-export function createVueIframeClient(u, d) {
-  const m = x(), r = C(
-    {
-      ...u,
-      ...m,
-      async editText({ path: e, id: t }) {
-        if (!e || t === void 0) return;
-        const i = p(e, t), n = document.querySelector(i);
-        if (!n) return;
-        n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
-        const o = (a) => {
-          const E = a.target;
-          if (!E) return;
-          const y = E.innerText;
-          n.removeAttribute("contenteditable"), r.emit("text-update", { path: e, id: t, content: y }), n.removeEventListener("blur", o), n.removeEventListener("keydown", s), n.blur();
-        }, s = (a) => {
-          a.key === "Enter" && (a.stopPropagation(), a.preventDefault(), o(a));
-        };
-        n.addEventListener("keydown", s), n.addEventListener("blur", o), n.focus();
-      },
-      async getHoveredElement({ path: e, id: t, x: i, y: n }) {
-        if (e)
-          if (i !== void 0 && n !== void 0) {
-            let o = document.elementFromPoint(i, n);
-            if (!o) return;
-            let s = o.getAttribute("data-node-path");
-            if (s !== e) {
-              if (!o.parentElement) return;
-              for (; o.parentElement && s !== e; )
-                o = o.parentElement, s = o.getAttribute("data-node-path");
-            }
-            const a = o.getAttribute("data-node-id");
-            if (!a) return;
-            const E = p(e, a), y = h(E, !1);
-            return y ? {
-              id: a,
-              path: e,
-              data: y
-            } : void 0;
-          } else {
-            const o = p(e, t), s = h(o, !1);
-            return s ? {
-              id: t,
-              path: e,
-              data: s
-            } : void 0;
+function C(l) {
+  return {
+    async editText({ path: t, id: n }) {
+      if (!t || n === void 0) return;
+      const o = u(t, n), r = document.querySelector(o);
+      if (!r) return;
+      r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
+      const s = (i) => {
+        const c = i.target;
+        if (!c) return;
+        const e = c.innerText;
+        r.removeAttribute("contenteditable"), l?.onTextUpdate?.({ path: t, id: n, content: e }), r.removeEventListener("blur", s), r.removeEventListener("keydown", d), r.blur();
+      }, d = (i) => {
+        i.key === "Enter" && (i.stopPropagation(), i.preventDefault(), s(i));
+      };
+      r.addEventListener("keydown", d), r.addEventListener("blur", s), r.focus();
+    },
+    async getHoveredElement({ path: t, id: n, x: o, y: r }) {
+      if (t)
+        if (o !== void 0 && r !== void 0) {
+          let s = document.elementFromPoint(o, r);
+          if (!s) return;
+          let d = s.getAttribute("data-node-path");
+          if (d !== t) {
+            if (!s.parentElement) return;
+            for (; s.parentElement && d !== t; )
+              s = s.parentElement, d = s.getAttribute("data-node-path");
           }
-      },
-      async getPageHeight() {
-        return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
-      },
-      async getSelectedElement({ path: e, id: t }) {
-        const i = p(e, t), n = h(i, !0);
-        if (n)
-          return {
-            path: e,
-            id: t,
-            data: n
-          };
-      },
-      setTheme(e) {
-        const t = document.querySelector("body");
-        e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), t && (t.classList.remove("light"), t.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), t && (t.classList.remove("dark"), t.classList.add("light")));
-      }
-      // updateElementClass({ className, id, path }) {
-      //   const selector = getSelector(path, id);
-      //   const elements = document.querySelectorAll(selector);
-      //   if (!elements?.length) return;
-      //   elements.forEach((elm) => (elm.className = className));
-      // },
-      // updateElementAttribute({ attribute, value, id, path }) {
-      //   const selector = getSelector(path, id);
-      //   const elements = document.querySelectorAll(selector);
-      //   if (!elements?.length) return;
-      //   elements.forEach((elm) => elm.setAttribute(attribute, value));
-      // },
-      // duplicateElement({ id, path }) {
-      //   const selector = getSelector(path, id);
-      //   const elements = document.querySelectorAll(selector);
-      //   if (!elements?.length) return;
-      //   elements.forEach((elm) => {
-      //     const clone = elm.cloneNode(true) as HTMLElement;
-      //     clone.setAttribute('data-node-id', String(Number(clone.getAttribute('data-node-id')!) + 1));
-      //     elm.parentElement?.insertBefore(clone, elm.nextSibling);
-      //   });
-      // }
+          const i = s.getAttribute("data-node-id");
+          if (!i) return;
+          const c = u(t, i), e = y(c, !1);
+          return e ? {
+            id: i,
+            path: t,
+            data: e
+          } : void 0;
+        } else {
+          const s = u(t, n), d = y(s, !1);
+          return d ? {
+            id: n,
+            path: t,
+            data: d
+          } : void 0;
+        }
+    },
+    async getPageHeight() {
+      return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
+    },
+    async getSelectedElement({ path: t, id: n }) {
+      const o = u(t, n), r = y(o, !0);
+      if (r)
+        return {
+          path: t,
+          id: n,
+          data: r
+        };
+    },
+    setTheme(t) {
+      const n = document.querySelector("body");
+      t === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), n && (n.classList.remove("light"), n.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), n && (n.classList.remove("dark"), n.classList.add("light")));
+    },
+    async updateCode(t, n) {
+      typeof n > "u" ? document.body.innerHTML = "" : document.body.innerHTML = n, l?.onResize?.(await this.getPageHeight());
+    }
+    // updateElementClass({ className, id, path }) {
+    //   const selector = getSelector(path, id);
+    //   const elements = document.querySelectorAll(selector);
+    //   if (!elements?.length) return;
+    //   elements.forEach((elm) => (elm.className = className));
+    // },
+    // updateElementAttribute({ attribute, value, id, path }) {
+    //   const selector = getSelector(path, id);
+    //   const elements = document.querySelectorAll(selector);
+    //   if (!elements?.length) return;
+    //   elements.forEach((elm) => elm.setAttribute(attribute, value));
+    // },
+    // duplicateElement({ id, path }) {
+    //   const selector = getSelector(path, id);
+    //   const elements = document.querySelectorAll(selector);
+    //   if (!elements?.length) return;
+    //   elements.forEach((elm) => {
+    //     const clone = elm.cloneNode(true) as HTMLElement;
+    //     clone.setAttribute('data-node-id', String(Number(clone.getAttribute('data-node-id')!) + 1));
+    //     elm.parentElement?.insertBefore(clone, elm.nextSibling);
+    //   });
+    // }
+  };
+}
+export function createVueIframeClient(l, t) {
+  const n = /* @__PURE__ */ new Map();
+  window.addEventListener("message", async (e) => {
+    if (typeof e.data != "object" || e.data.source !== f || e.data.type === "event" || !e.data.response) return;
+    const a = n.get(e.data.response.id);
+    a && (n.delete(e.data.response.id), a(e.data.response));
+  });
+  const o = b(
+    {
+      ...l,
+      ...C({
+        onResize: (...e) => o?.emit("resize", ...e),
+        onTextUpdate: (...e) => o?.emit("text-update", ...e)
+      })
     },
     {
       handle(e) {
-        window.addEventListener("message", async (t) => {
-          if (typeof t.data != "object" || t.data.source !== b || t.data.type === "event" || !t.data.request) return;
-          const i = await e(t.data.request);
-          window.parent.postMessage({ source: w, response: i }, "*");
+        window.addEventListener("message", async (a) => {
+          if (typeof a.data != "object" || a.data.source !== f || a.data.type === "event" || !a.data.request) return;
+          const m = await e(a.data.request);
+          window.parent.postMessage({ source: g, response: m }, "*");
         });
       },
       invoke(e) {
-        return new Promise((t, i) => {
-          const n = setTimeout(() => {
-            window.removeEventListener("message", o), i(new Error("Request timed out"));
-          }, 5e3);
-          function o(s) {
-            typeof s.data == "object" && (s.data.source !== b || !s.data.response || s.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(s.data.response)));
-          }
-          window.parent.postMessage({ source: w, request: e }, "*"), window.addEventListener("message", o);
+        return new Promise((a, m) => {
+          const E = setTimeout(() => m(new Error("Request timed out")), 5e3);
+          n.set(e.id, (p) => {
+            clearTimeout(E), a(p);
+          }), window.parent.postMessage({ source: g, request: e }, "*");
         });
       },
       emit(e) {
-        window.parent.postMessage({ source: w, type: "event", request: e }, "*");
+        window.parent.postMessage({ source: g, type: "event", request: e }, "*");
       },
       handleEvent(e) {
-        window.addEventListener("message", (t) => {
-          typeof t.data == "object" && (t.data.source !== b || t.data.type !== "event" || !t.data.request || e(t.data.request));
+        window.addEventListener("message", (a) => {
+          typeof a.data == "object" && (a.data.source !== f || a.data.type !== "event" || !a.data.request || e(a.data.request));
         });
       },
-      deserialize: (e) => L(e),
-      serialize: (e) => v(e, { maxDepth: 1 / 0 })
+      destroy() {
+        n.clear();
+      },
+      deserialize: (e) => w(e),
+      serialize: (e) => h(e, { maxDepth: 1 / 0 }),
+      timeout: 5e3
     }
-  ), f = d?.disableDefaultConsole ? void 0 : console.log.bind(console), l = d?.disableDefaultConsole ? void 0 : console.warn.bind(console), g = d?.disableDefaultConsole ? void 0 : console.error.bind(console), c = d?.disableDefaultConsole ? void 0 : console.info.bind(console);
+  ), r = t?.disableDefaultConsole ? void 0 : console.log.bind(console), s = t?.disableDefaultConsole ? void 0 : console.warn.bind(console), d = t?.disableDefaultConsole ? void 0 : console.error.bind(console), i = t?.disableDefaultConsole ? void 0 : console.info.bind(console);
   return console.log = (...e) => {
-    r.emit("console", "log", e), f?.(...e);
+    o.emit("console", "log", e), r?.(...e);
   }, console.warn = (...e) => {
-    l?.(...e);
+    s?.(...e);
   }, console.error = (...e) => {
-    r.emit("console", "error", e), g?.(...e);
+    o.emit("console", "error", e), d?.(...e);
   }, console.info = (...e) => {
-    r.emit("console", "info", e), c?.(...e);
-  }, window.addEventListener("resize", async () => r.emit("resize", await r.$context.getPageHeight())), new MutationObserver(
-    async () => r.emit("resize", await r.$context.getPageHeight())
+    o.emit("console", "info", e), i?.(...e);
+  }, window.addEventListener("resize", async () => o.emit("resize", await o.$context.getPageHeight())), new MutationObserver(
+    async () => o.emit("resize", await o.$context.getPageHeight())
   ).observe(document.body, {
     childList: !0,
     // observe direct children additions/removals
@@ -167,5 +183,5 @@ export function createVueIframeClient(u, d) {
     // observe attribute changes (like style, class)
     characterData: !0
     // observe text changes
-  }), r.emit("ready"), r;
+  }), o.emit("ready"), o;
 }

package/dist/types.d.ts

@@ -1,5 +1,4 @@
 import type { RpcEvents } from '@nookuio/rpc';
-import type { DragDropContext } from './drag-drop';
 export interface EventRequest {
     eventName: string;
     args: any[];
@@ -17,7 +16,7 @@ export interface ContextResponse {
     key: string;
     result: any;
 }
-export interface CoreIframeContext extends DragDropContext {
+export interface CoreIframeContext {
     setTheme: (theme: 'dark' | 'light') => void;
     getHoveredElement: (options: {
         path: string;
@@ -42,6 +41,8 @@ export interface CoreIframeContext extends DragDropContext {
         path: string;
         id: string;
     }) => void;
+    /** Update the innerHTML of the page */
+    updateCode: (path: string, code: string) => void;
 }
 export interface CoreIframeEvents extends RpcEvents {
     ready: () => void;
@@ -53,27 +54,16 @@ export interface CoreIframeEvents extends RpcEvents {
         content: string;
     }) => void;
 }
-export interface VueIframeContext extends CoreIframeContext {
+export interface VueIframeContext extends Omit<CoreIframeContext, 'updateCode'> {
     navigateTo: (to: string) => void;
-    getValue: (options: {
-        code: string;
-        path?: string;
-        onTemplateContext?: boolean;
-        context?: Record<string, any>;
-    }) => any;
     getInstanceData: (path: string /** filepath path of the component */) => Record<string, any>;
-    runCode: (options: {
-        path?: string;
-        code: string;
-        onTemplateContext?: boolean;
-        context?: Record<string, any>;
-    }) => any;
     /**
+     *
      * For virtual SFC preview
      *
-     * Works only on VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH
+     * Works only on `VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH`
      */
-    updateVirtualSfcCode: (path: string, code: string) => void;
+    updateCode: (path: string, code: string) => void;
 }
 export interface VueIframeEvents extends CoreIframeEvents {
     'route-change': (to: string) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nookuio/iframe",
   "description": "",
-  "version": "1.0.1-beta.0",
+  "version": "1.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "telejson": "7.2.0",
-    "@nookuio/rpc": "1.0.1"
+    "@nookuio/rpc": "1.0.2"
   },
   "devDependencies": {},
   "keywords": [],

package/dist/drag-drop/dragEnd.d.ts

@@ -1,2 +0,0 @@
-import type { DragState } from './types';
-export declare function dragEnded(dragState: DragState, canceled: boolean): Promise<void>;

package/dist/drag-drop/dragEnd.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dragEnded = dragEnded;
-var _helpers = require("./helpers");
-var _ = require("./");
-var _highlight = require("./highlight");
-async function dragEnded(e, o) {
-  e.destroying = !0;
-  const t = e.insertAreas?.[e.selectedInsertAreaIndex ?? -1],
-    n = (e.mode === "insert" && !o ? t?.parent : e.initialContainer)?.querySelectorAll(`[data-node-id][data-node-path=${e.elementPath}]`) ?? [];
-  e.element.style.setProperty("view-transition-name", "dropped-item-self"), n.forEach((r, i) => {
-    r instanceof HTMLElement && (0, _helpers.isElementInViewport)(r) && r.style.setProperty("view-transition-name", "dropped-item-sibling-" + i);
-  }), e.repeatedNodes.filter(_helpers.isElementInViewport).forEach((r, i) => {
-    r.style.setProperty("view-transition-name", "dropped-item-repeated-" + i);
-  }), await (0, _helpers.tryStartViewTransition)(() => {
-    o ? (e.copy?.remove(), e.initialContainer.insertBefore(e.element, e.initialNextSibling)) : e.mode === "insert" && t?.parent.insertBefore(e.element, t.parent.childNodes[t.index]), e.element.classList.remove(_.DRAG_REORDER_CLASSNAME), e.element.classList.remove(_.DRAG_MOVE_CLASSNAME), e.element.style.removeProperty("translate"), e.repeatedNodes.toReversed().forEach(r => {
-      e.element.insertAdjacentElement("afterend", r), r.classList.remove("drag-repeat-node"), r.style.removeProperty("rotate"), r.style.removeProperty("--drag-repeat-node-width"), r.style.removeProperty("--drag-repeat-node-height"), r.style.removeProperty("--drag-repeat-node-translate"), r.style.removeProperty("--drag-repeat-node-rotate"), r.style.removeProperty("--drag-repeat-node-opacity");
-    }), (0, _highlight.removeDropHighlight)();
-  }).finished.then(() => {
-    e.element.style.removeProperty("view-transition-name"), n.forEach(r => {
-      r instanceof HTMLElement && r.style.removeProperty("view-transition-name");
-    });
-  });
-}

package/dist/drag-drop/dragEnd.mjs

@@ -1,23 +0,0 @@
-import { isElementInViewport as s, tryStartViewTransition as l } from "./helpers.mjs";
-import { DRAG_MOVE_CLASSNAME as m, DRAG_REORDER_CLASSNAME as p } from ".//index.mjs";
-import { removeDropHighlight as a } from "./highlight.mjs";
-export async function dragEnded(e, o) {
-  e.destroying = !0;
-  const t = e.insertAreas?.[e.selectedInsertAreaIndex ?? -1], n = (e.mode === "insert" && !o ? t?.parent : e.initialContainer)?.querySelectorAll(`[data-node-id][data-node-path=${e.elementPath}]`) ?? [];
-  e.element.style.setProperty("view-transition-name", "dropped-item-self"), n.forEach((r, i) => {
-    r instanceof HTMLElement && s(r) && r.style.setProperty("view-transition-name", "dropped-item-sibling-" + i);
-  }), e.repeatedNodes.filter(s).forEach((r, i) => {
-    r.style.setProperty("view-transition-name", "dropped-item-repeated-" + i);
-  }), await l(() => {
-    o ? (e.copy?.remove(), e.initialContainer.insertBefore(e.element, e.initialNextSibling)) : e.mode === "insert" && t?.parent.insertBefore(
-      e.element,
-      t.parent.childNodes[t.index]
-    ), e.element.classList.remove(p), e.element.classList.remove(m), e.element.style.removeProperty("translate"), e.repeatedNodes.toReversed().forEach((r) => {
-      e.element.insertAdjacentElement("afterend", r), r.classList.remove("drag-repeat-node"), r.style.removeProperty("rotate"), r.style.removeProperty("--drag-repeat-node-width"), r.style.removeProperty("--drag-repeat-node-height"), r.style.removeProperty("--drag-repeat-node-translate"), r.style.removeProperty("--drag-repeat-node-rotate"), r.style.removeProperty("--drag-repeat-node-opacity");
-    }), a();
-  }).finished.then(() => {
-    e.element.style.removeProperty("view-transition-name"), n.forEach((r) => {
-      r instanceof HTMLElement && r.style.removeProperty("view-transition-name");
-    });
-  });
-}

package/dist/drag-drop/dragMove.d.ts

@@ -1,2 +0,0 @@
-import type { DragState } from './types';
-export declare function dragMove(dragState: DragState | null, exclude: HTMLElement[]): void;

package/dist/drag-drop/dragMove.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dragMove = dragMove;
-var _ = require("./");
-var _highlight = require("./highlight");
-var _helpers = require("./helpers");
-function dragMove(e, m) {
-  if (!e) return;
-  if (e.mode === "reorder") {
-    e.mode = "insert", e.element.style.setProperty("display", "none"), e.insertAreas ??= (0, _helpers.getInsertAreas)(e.elementPath).filter(s => m.every(i => !i?.contains(s.parent) && i !== s.parent) && s.parent !== document.body), e.element.style.removeProperty("display");
-    const t = e.element.style.getPropertyValue("translate");
-    e.element.style.setProperty("translate", "0");
-    const n = e.element.getBoundingClientRect();
-    document.body.appendChild(e.element), e.element.classList.add(_.DRAG_MOVE_CLASSNAME), e.element.classList.remove(_.DRAG_REORDER_CLASSNAME), e.element.style.setProperty("--drag-mode--move-left", `${n.left}px`), e.element.style.setProperty("--drag-mode--move-top", `${n.top}px`), e.element.style.setProperty("--drag-mode--move-width", `${e.initialRect.width}px`), e.element.style.setProperty("translate", t);
-  }
-  e.repeatedNodes.forEach((t, n) => {
-    t.style.setProperty("--drag-repeat-node-opacity", n < 3 ? "0.2" : "0");
-  });
-  const o = e.insertAreas?.map(t => t.layout === "block" ? {
-      x1: t.center.x - t.size / 2,
-      y1: t.center.y,
-      x2: t.center.x + t.size / 2,
-      y2: t.center.y
-    } : {
-      x1: t.center.x,
-      y1: t.center.y - t.size / 2,
-      x2: t.center.x,
-      y2: t.center.y + t.size / 2
-    }),
-    {
-      nearestLine: l,
-      projectionPoint: p
-    } = (0, _helpers.findNearestLine)(o ?? [], e.lastCursorPosition);
-  if (!l || !e.insertAreas || !o) return;
-  const r = e.insertAreas.at(o.indexOf(l));
-  r ? (e.selectedInsertAreaIndex = e.insertAreas?.indexOf(r), (0, _highlight.setExternalDropHighlight)({
-    layout: r.layout,
-    center: r.center,
-    length: r.size,
-    color: e.elementType === "component" ? "D946EF" : "2563EB",
-    projectionPoint: p
-  })) : (0, _highlight.removeDropHighlight)();
-}

package/dist/drag-drop/dragMove.mjs

@@ -1,40 +0,0 @@
-import { DRAG_REORDER_CLASSNAME as y, DRAG_MOVE_CLASSNAME as c } from ".//index.mjs";
-import { removeDropHighlight as f, setExternalDropHighlight as A } from "./highlight.mjs";
-import { getInsertAreas as u, findNearestLine as x } from "./helpers.mjs";
-export function dragMove(e, m) {
-  if (!e)
-    return;
-  if (e.mode === "reorder") {
-    e.mode = "insert", e.element.style.setProperty("display", "none"), e.insertAreas ??= u(e.elementPath).filter(
-      (s) => m.every((i) => !i?.contains(s.parent) && i !== s.parent) && s.parent !== document.body
-    ), e.element.style.removeProperty("display");
-    const t = e.element.style.getPropertyValue("translate");
-    e.element.style.setProperty("translate", "0");
-    const n = e.element.getBoundingClientRect();
-    document.body.appendChild(e.element), e.element.classList.add(c), e.element.classList.remove(y), e.element.style.setProperty("--drag-mode--move-left", `${n.left}px`), e.element.style.setProperty("--drag-mode--move-top", `${n.top}px`), e.element.style.setProperty("--drag-mode--move-width", `${e.initialRect.width}px`), e.element.style.setProperty("translate", t);
-  }
-  e.repeatedNodes.forEach((t, n) => {
-    t.style.setProperty("--drag-repeat-node-opacity", n < 3 ? "0.2" : "0");
-  });
-  const o = e.insertAreas?.map((t) => t.layout === "block" ? {
-    x1: t.center.x - t.size / 2,
-    y1: t.center.y,
-    x2: t.center.x + t.size / 2,
-    y2: t.center.y
-  } : {
-    x1: t.center.x,
-    y1: t.center.y - t.size / 2,
-    x2: t.center.x,
-    y2: t.center.y + t.size / 2
-  }), { nearestLine: l, projectionPoint: p } = x(o ?? [], e.lastCursorPosition);
-  if (!l || !e.insertAreas || !o)
-    return;
-  const r = e.insertAreas.at(o.indexOf(l));
-  r ? (e.selectedInsertAreaIndex = e.insertAreas?.indexOf(r), A({
-    layout: r.layout,
-    center: r.center,
-    length: r.size,
-    color: e.elementType === "component" ? "D946EF" : "2563EB",
-    projectionPoint: p
-  })) : f();
-}

package/dist/drag-drop/dragReorder.d.ts

@@ -1,3 +0,0 @@
-import type { DragState } from './types';
-export declare const DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
-export declare function dragReorder(dragState: DragState | null): void;

package/dist/drag-drop/dragReorder.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DRAG_REORDER_CLASSNAME = void 0;
-exports.dragReorder = dragReorder;
-var _helpers = require("./helpers");
-var _ = require("./");
-var _highlight = require("./highlight");
-const DRAG_REORDER_CLASSNAME = exports.DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
-const c = 100;
-function dragReorder(e) {
-  if (!e || e.isTransitioning) return;
-  if (e.mode === "insert") {
-    e.mode = "reorder";
-    const o = e.element.getBoundingClientRect();
-    e.element.classList.add(DRAG_REORDER_CLASSNAME), e.element.classList.remove(_.DRAG_MOVE_CLASSNAME), e.initialContainer.insertBefore(e.element, e.initialNextSibling), e.repeatedNodes.forEach((r, l) => {
-      r.style.setProperty("--drag-repeat-node-opacity", l < 3 ? "1" : "0");
-    });
-    const s = e.element.getBoundingClientRect();
-    e.offset.x += s.left - o.left, e.offset.y += s.top - o.top, (0, _highlight.setDropHighlight)(e.element, e.initialContainer, e.elementType === "component" ? "D946EF" : "2563EB");
-  }
-  const f = T(e);
-  if (f && e.element.nextElementSibling !== f.nextSibling) {
-    e.isTransitioning = !0;
-    const o = Array.from(e.initialContainer.childNodes);
-    o.filter(t => t instanceof HTMLElement).filter(_helpers.isElementInViewport).forEach((t, i) => {
-      t.style.setProperty("view-transition-name", "item-" + i);
-    }), e.element.style.setProperty("view-transition-name", "__drag-item");
-    const s = e.element.offsetLeft,
-      r = e.element.offsetTop;
-    (0, _helpers.tryStartViewTransition)(() => {
-      e && (e.initialContainer.insertBefore(e.element, f.nextSibling), e.offset.x += e.element.offsetLeft - s, e.offset.y += e.element.offsetTop - r, e?.element.style.setProperty("translate", `${e.lastCursorPosition.x - e.offset.x}px ${e.lastCursorPosition.y - e.offset.y}px`), (0, _highlight.setDropHighlight)(e.element, e.initialContainer, e.elementType === "component" ? "D946EF" : "2563EB"));
-    }).finished.then(() => {
-      o.forEach(t => {
-        t instanceof HTMLElement && t.style.removeProperty("view-transition-name");
-      }), e && (e.isTransitioning = !1);
-    }).catch(() => {});
-  }
-}
-function T(e) {
-  const {
-      left: f,
-      top: o,
-      width: s,
-      height: r
-    } = e.element.getBoundingClientRect(),
-    l = f + s / 2,
-    t = o + r / 2;
-  return e.reorderPermutations.reduce((i, n) => {
-    if (Math.abs(n.rect.left + n.rect.width / 2 - l) < n.rect.width / 2 + c && Math.abs(n.rect.top + n.rect.height / 2 - t) < n.rect.height / 2 + c) {
-      if (!i) return n;
-      const p = Math.hypot(i.rect.left + i.rect.width / 2 - l, i.rect.top + i.rect.height / 2 - t),
-        h = Math.hypot(n.rect.left + n.rect.width / 2 - l, n.rect.top + n.rect.height / 2 - t);
-      return p < h ? i : n;
-    }
-    return i;
-  }, null);
-}