@bagelink/vue 0.0.1216 → 0.0.1218

package/dist/components/Draggable/useDraggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/useDraggable.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAe,SAAQ,UAAU;IACjD,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,GAAG,CAAA;CACV;AAED,MAAM,WAAW,gBAAgB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,GAAG,CAAA;CACjB;AAED,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB;;;wCAmhBf,WAAW;EA0DtD"}
+{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/useDraggable.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAe,SAAQ,UAAU;IACjD,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,GAAG,CAAA;CACV;AAED,MAAM,WAAW,gBAAgB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,GAAG,CAAA;CACjB;AAED,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB;;;wCA8iBf,WAAW;EA2DtD"}

package/dist/index.cjs

@@ -5506,21 +5506,21 @@ function styleInject(css2, ref) {
     return;
   }
   var head = document.head || document.getElementsByTagName("head")[0];
-  var style2 = document.createElement("style");
-  style2.type = "text/css";
+  var style = document.createElement("style");
+  style.type = "text/css";
   if (insertAt === "top") {
     if (head.firstChild) {
-      head.insertBefore(style2, head.firstChild);
+      head.insertBefore(style, head.firstChild);
     } else {
-      head.appendChild(style2);
+      head.appendChild(style);
     }
   } else {
-    head.appendChild(style2);
+    head.appendChild(style);
   }
-  if (style2.styleSheet) {
-    style2.styleSheet.cssText = css2;
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css2;
   } else {
-    style2.appendChild(document.createTextNode(css2));
+    style.appendChild(document.createTextNode(css2));
   }
 }
 var css_248z$1 = "\n.chart {\n  position: relative;\n}\n";
@@ -5694,8 +5694,8 @@ var script$9 = vue.defineComponent({
     }
     function computeDotStyle(active) {
       const dotStyle = props2.dotStyle;
-      const style2 = getStyle.value();
-      return Object.assign({ r: active ? 5 : 3, stroke: style2.stroke, strokeWidth: style2.strokeWidth, fill: "white" }, dotStyle);
+      const style = getStyle.value();
+      return Object.assign({ r: active ? 5 : 3, stroke: style.stroke, strokeWidth: style.strokeWidth, fill: "white" }, dotStyle);
     }
     const getStyle = vue.computed(() => {
       if (is$1(Function, props2.lineStyle)) {
@@ -5898,11 +5898,11 @@ var script$7 = vue.defineComponent({
     const getStyle = vue.computed(() => {
       return () => Object.assign({ colors: ["#4daf4a", "#377eb8", "#ff7f00", "#984ea3", "#e41a1c"], innerRadius: 2, cornerRadius: 0, padAngle: 0.01 }, props2.pieStyle);
     });
-    const style2 = getStyle.value();
+    const style = getStyle.value();
     const arcs = vue.ref([]);
     const colors = ordinal(getStyle.value().colors);
     const arcGen = () => {
-      return arc().outerRadius(size2.value).innerRadius(style2.innerRadius).cornerRadius(style2.cornerRadius).padAngle(style2.padAngle);
+      return arc().outerRadius(size2.value).innerRadius(style.innerRadius).cornerRadius(style.cornerRadius).padAngle(style.padAngle);
     };
     const transform = vue.ref(`translate(${size2.value + chart.canvas.x}, ${size2.value + chart.canvas.y})`);
     let pieSort;
@@ -6185,7 +6185,7 @@ var script$4 = vue.defineComponent({
     const isRight = vue.computed(() => {
       return position.value.x >= canvas.value.width / 4 * 3;
     });
-    const style2 = vue.computed(() => {
+    const style = vue.computed(() => {
       if (direction.value === "vertical") {
         return {
           top: position.value.y - 0.5 + "px",
@@ -6241,7 +6241,7 @@ var script$4 = vue.defineComponent({
       direction.value = chart.config.direction;
       canvas.value = chart.canvas;
     });
-    return { el, show, canvas, direction, style: style2, styleContent, position, items, isRight };
+    return { el, show, canvas, direction, style, styleContent, position, items, isRight };
   }
 });
 const _hoisted_1$3$1 = { key: 0 };
@@ -6981,16 +6981,16 @@ var script$1 = vue.defineComponent({
     }
     const toKebabCase = (data3) => mapKeys(kebabize, data3);
     const getStyle = (r2) => {
-      const style2 = {
+      const style = {
         stroke: r2.color,
         strokeWidth: 5,
         fill: r2.color,
         fillOpacity: 0.9
       };
       if (props2.rcStyle && typeof props2.rcStyle === "function") {
-        return Object.assign(Object.assign({}, style2), props2.rcStyle(r2));
+        return Object.assign(Object.assign({}, style), props2.rcStyle(r2));
       }
-      return style2;
+      return style;
     };
     function onMouseOver(i2) {
       selected.value = i2;
@@ -8394,6 +8394,22 @@ function useDraggable(options = {}) {
   const ghostElement = vue.ref(null);
   const dropIndicator = vue.ref(null);
   const dropTarget = vue.ref(null);
+  const isBrowser = typeof window !== "undefined";
+  if (isBrowser) {
+    const existingStyle = document.getElementById("draggable-style");
+    if (!existingStyle) {
+      const style = document.createElement("style");
+      style.id = "draggable-style";
+      style.textContent = `
+				.draggable-ghost {
+					opacity: 0.5;
+					box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+					transition: transform 0.1s;
+				}
+			`;
+      document.head.appendChild(style);
+    }
+  }
   const defaultOptions2 = {
     animation: 150,
     mode: "line",
@@ -8414,6 +8430,7 @@ function useDraggable(options = {}) {
   const UPDATE_THRESHOLD = 150;
   const POSITION_CACHE = /* @__PURE__ */ new Map();
   function createGhost(el) {
+    if (!isBrowser) return null;
     const ghost = el.cloneNode(true);
     const rect = el.getBoundingClientRect();
     ghost.style.position = "fixed";
@@ -8432,6 +8449,7 @@ function useDraggable(options = {}) {
     return ghost;
   }
   function createDropIndicator(el) {
+    if (!isBrowser) return null;
     const line2 = document.createElement("div");
     line2.classList.add(defaultOptions2.dropIndicatorClass);
     line2.style.position = "fixed";
@@ -8527,6 +8545,7 @@ function useDraggable(options = {}) {
     return dropIndex;
   }
   function cleanup() {
+    if (!isBrowser) return;
     document.removeEventListener("mousemove", onDragMove);
     document.removeEventListener("mouseup", onDragEnd);
     document.removeEventListener("keydown", onKeyDown);
@@ -8563,9 +8582,11 @@ function useDraggable(options = {}) {
     }
     isDragging.value = false;
     dropTarget.value = null;
-    document.body.style.userSelect = "";
-    document.body.style.webkitUserSelect = "";
-    document.body.style.cursor = "";
+    if (isBrowser) {
+      document.body.style.userSelect = "";
+      document.body.style.webkitUserSelect = "";
+      document.body.style.cursor = "";
+    }
     if (scrollRAF) {
       cancelAnimationFrame(scrollRAF);
       scrollRAF = null;
@@ -8581,7 +8602,7 @@ function useDraggable(options = {}) {
   }
   function onDragStart(e) {
     var _a2;
-    if (defaultOptions2.disabled) return;
+    if (!isBrowser || defaultOptions2.disabled) return;
     if (e.button !== 0) return;
     if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
     const dragEl2 = findDraggableParent(e.target);
@@ -8609,13 +8630,15 @@ function useDraggable(options = {}) {
     dragEl2.classList.add(defaultOptions2.dragClass);
     shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragEl2) : handleLineMode(dragEl2);
     (_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
-    document.body.style.userSelect = "none";
-    document.body.style.webkitUserSelect = "none";
-    document.body.style.cursor = "grabbing";
-    window.addEventListener("blur", cleanup);
-    document.addEventListener("mousemove", onDragMove);
-    document.addEventListener("mouseup", onDragEnd);
-    document.addEventListener("keydown", onKeyDown);
+    if (isBrowser) {
+      document.body.style.userSelect = "none";
+      document.body.style.webkitUserSelect = "none";
+      document.body.style.cursor = "grabbing";
+      window.addEventListener("blur", cleanup);
+      document.addEventListener("mousemove", onDragMove);
+      document.addEventListener("mouseup", onDragEnd);
+      document.addEventListener("keydown", onKeyDown);
+    }
   }
   function findScrollParent(element) {
     let parent = element.parentElement;
@@ -8728,7 +8751,7 @@ function useDraggable(options = {}) {
   }
   function onTouchStart(e) {
     var _a2;
-    if (defaultOptions2.disabled || !e.target) return;
+    if (!isBrowser || defaultOptions2.disabled || !e.target) return;
     const touch = e.touches[0];
     if (!touch) return;
     const target = e.target;
@@ -8755,13 +8778,15 @@ function useDraggable(options = {}) {
     dragElement.value.classList.add(defaultOptions2.dragClass);
     shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragElement.value) : handleLineMode(dragElement.value);
     (_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
-    document.body.style.userSelect = "none";
-    document.body.style.webkitUserSelect = "none";
-    document.body.style.cursor = "grabbing";
-    window.addEventListener("blur", cleanup);
-    document.addEventListener("touchmove", onTouchMove, { passive: false });
-    document.addEventListener("touchend", onTouchEnd);
-    document.addEventListener("touchcancel", onTouchEnd);
+    if (isBrowser) {
+      document.body.style.userSelect = "none";
+      document.body.style.webkitUserSelect = "none";
+      document.body.style.cursor = "grabbing";
+      window.addEventListener("blur", cleanup);
+      document.addEventListener("touchmove", onTouchMove, { passive: false });
+      document.addEventListener("touchend", onTouchEnd);
+      document.addEventListener("touchcancel", onTouchEnd);
+    }
   }
   function onTouchMove(e) {
     e.preventDefault();
@@ -8789,6 +8814,7 @@ function useDraggable(options = {}) {
     document.removeEventListener("touchcancel", onTouchEnd);
   }
   function initDraggableContainer(container) {
+    if (!isBrowser) return;
     cleanupFn == null ? void 0 : cleanupFn();
     isDragging.value = false;
     dragElement.value = null;
@@ -8836,16 +8862,6 @@ function useDraggable(options = {}) {
     initDraggableContainer
   };
 }
-const style = document.createElement("style");
-style.textContent = `
-  .draggable-ghost {
-    opacity: 0.5;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    transition: transform 0.1s;
-
-  }
-`;
-document.head.appendChild(style);
 const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "Draggable",
   props: {
@@ -22592,7 +22608,7 @@ function createCommandExecutor(state2, commands) {
     }
   };
 }
-function isStyleActive(style2, doc) {
+function isStyleActive(style, doc) {
   const selection = doc.getSelection();
   if (!selection || !selection.rangeCount) return false;
   const range2 = selection.getRangeAt(0);
@@ -22609,7 +22625,7 @@ function isStyleActive(style2, doc) {
     italic: ["em", "i"],
     underline: ["u"]
   };
-  return checkParent(parent, styleTags[style2] ?? [style2]);
+  return checkParent(parent, styleTags[style] ?? [style]);
 }
 function analyzeSelection(doc, range2) {
   const container = range2.commonAncestorContainer;
@@ -23163,9 +23179,9 @@ function useEditor() {
       "ol",
       "li"
     ];
-    styleTypes.forEach((style2) => {
-      if (state2.doc && isStyleActive(style2, state2.doc)) {
-        styles.add(style2);
+    styleTypes.forEach((style) => {
+      if (state2.doc && isStyleActive(style, state2.doc)) {
+        styles.add(style);
       }
     });
     state2.selectedStyles = styles;
@@ -23526,9 +23542,9 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
       doc.designMode = "on";
       doc.body.contentEditable = "true";
       doc.body.dir = hasRTL.value ? "rtl" : "ltr";
-      const style2 = doc.createElement("style");
-      style2.textContent = (await Promise.resolve().then(() => require("./editor-B3mMCQSg.cjs"))).default;
-      doc.head.appendChild(style2);
+      const style = doc.createElement("style");
+      style.textContent = (await Promise.resolve().then(() => require("./editor-B3mMCQSg.cjs"))).default;
+      doc.head.appendChild(style);
       editor.init(doc);
       useEditorKeyboard(doc, commands.execute);
       if (!doc.body.firstElementChild) {
@@ -24908,8 +24924,8 @@ function toggleClass(el, name, state2) {
   }
 }
 function css(el, prop3, val) {
-  var style2 = el && el.style;
-  if (style2) {
+  var style = el && el.style;
+  if (style) {
     if (val === void 0) {
       if (document.defaultView && document.defaultView.getComputedStyle) {
         val = document.defaultView.getComputedStyle(el, "");
@@ -24918,10 +24934,10 @@ function css(el, prop3, val) {
       }
       return prop3 === void 0 ? val : val[prop3];
     } else {
-      if (!(prop3 in style2) && prop3.indexOf("webkit") === -1) {
+      if (!(prop3 in style) && prop3.indexOf("webkit") === -1) {
         prop3 = "-webkit-" + prop3;
       }
-      style2[prop3] = val + (typeof val === "string" ? "" : "px");
+      style[prop3] = val + (typeof val === "string" ? "" : "px");
     }
   }
 }

package/dist/index.mjs

@@ -5504,21 +5504,21 @@ function styleInject(css2, ref2) {
     return;
   }
   var head = document.head || document.getElementsByTagName("head")[0];
-  var style2 = document.createElement("style");
-  style2.type = "text/css";
+  var style = document.createElement("style");
+  style.type = "text/css";
   if (insertAt === "top") {
     if (head.firstChild) {
-      head.insertBefore(style2, head.firstChild);
+      head.insertBefore(style, head.firstChild);
     } else {
-      head.appendChild(style2);
+      head.appendChild(style);
     }
   } else {
-    head.appendChild(style2);
+    head.appendChild(style);
   }
-  if (style2.styleSheet) {
-    style2.styleSheet.cssText = css2;
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css2;
   } else {
-    style2.appendChild(document.createTextNode(css2));
+    style.appendChild(document.createTextNode(css2));
   }
 }
 var css_248z$1 = "\n.chart {\n  position: relative;\n}\n";
@@ -5692,8 +5692,8 @@ var script$9 = defineComponent({
     }
     function computeDotStyle(active) {
       const dotStyle = props2.dotStyle;
-      const style2 = getStyle.value();
-      return Object.assign({ r: active ? 5 : 3, stroke: style2.stroke, strokeWidth: style2.strokeWidth, fill: "white" }, dotStyle);
+      const style = getStyle.value();
+      return Object.assign({ r: active ? 5 : 3, stroke: style.stroke, strokeWidth: style.strokeWidth, fill: "white" }, dotStyle);
     }
     const getStyle = computed(() => {
       if (is$1(Function, props2.lineStyle)) {
@@ -5896,11 +5896,11 @@ var script$7 = defineComponent({
     const getStyle = computed(() => {
       return () => Object.assign({ colors: ["#4daf4a", "#377eb8", "#ff7f00", "#984ea3", "#e41a1c"], innerRadius: 2, cornerRadius: 0, padAngle: 0.01 }, props2.pieStyle);
     });
-    const style2 = getStyle.value();
+    const style = getStyle.value();
     const arcs = ref([]);
     const colors = ordinal(getStyle.value().colors);
     const arcGen = () => {
-      return arc().outerRadius(size2.value).innerRadius(style2.innerRadius).cornerRadius(style2.cornerRadius).padAngle(style2.padAngle);
+      return arc().outerRadius(size2.value).innerRadius(style.innerRadius).cornerRadius(style.cornerRadius).padAngle(style.padAngle);
     };
     const transform = ref(`translate(${size2.value + chart.canvas.x}, ${size2.value + chart.canvas.y})`);
     let pieSort;
@@ -6183,7 +6183,7 @@ var script$4 = defineComponent({
     const isRight = computed(() => {
       return position.value.x >= canvas.value.width / 4 * 3;
     });
-    const style2 = computed(() => {
+    const style = computed(() => {
       if (direction.value === "vertical") {
         return {
           top: position.value.y - 0.5 + "px",
@@ -6239,7 +6239,7 @@ var script$4 = defineComponent({
       direction.value = chart.config.direction;
       canvas.value = chart.canvas;
     });
-    return { el, show, canvas, direction, style: style2, styleContent, position, items, isRight };
+    return { el, show, canvas, direction, style, styleContent, position, items, isRight };
   }
 });
 const _hoisted_1$3$1 = { key: 0 };
@@ -6979,16 +6979,16 @@ var script$1 = defineComponent({
     }
     const toKebabCase = (data3) => mapKeys(kebabize, data3);
     const getStyle = (r2) => {
-      const style2 = {
+      const style = {
         stroke: r2.color,
         strokeWidth: 5,
         fill: r2.color,
         fillOpacity: 0.9
       };
       if (props2.rcStyle && typeof props2.rcStyle === "function") {
-        return Object.assign(Object.assign({}, style2), props2.rcStyle(r2));
+        return Object.assign(Object.assign({}, style), props2.rcStyle(r2));
       }
-      return style2;
+      return style;
     };
     function onMouseOver(i2) {
       selected.value = i2;
@@ -8392,6 +8392,22 @@ function useDraggable(options = {}) {
   const ghostElement = ref(null);
   const dropIndicator = ref(null);
   const dropTarget = ref(null);
+  const isBrowser = typeof window !== "undefined";
+  if (isBrowser) {
+    const existingStyle = document.getElementById("draggable-style");
+    if (!existingStyle) {
+      const style = document.createElement("style");
+      style.id = "draggable-style";
+      style.textContent = `
+				.draggable-ghost {
+					opacity: 0.5;
+					box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+					transition: transform 0.1s;
+				}
+			`;
+      document.head.appendChild(style);
+    }
+  }
   const defaultOptions2 = {
     animation: 150,
     mode: "line",
@@ -8412,6 +8428,7 @@ function useDraggable(options = {}) {
   const UPDATE_THRESHOLD = 150;
   const POSITION_CACHE = /* @__PURE__ */ new Map();
   function createGhost(el) {
+    if (!isBrowser) return null;
     const ghost = el.cloneNode(true);
     const rect = el.getBoundingClientRect();
     ghost.style.position = "fixed";
@@ -8430,6 +8447,7 @@ function useDraggable(options = {}) {
     return ghost;
   }
   function createDropIndicator(el) {
+    if (!isBrowser) return null;
     const line2 = document.createElement("div");
     line2.classList.add(defaultOptions2.dropIndicatorClass);
     line2.style.position = "fixed";
@@ -8525,6 +8543,7 @@ function useDraggable(options = {}) {
     return dropIndex;
   }
   function cleanup() {
+    if (!isBrowser) return;
     document.removeEventListener("mousemove", onDragMove);
     document.removeEventListener("mouseup", onDragEnd);
     document.removeEventListener("keydown", onKeyDown);
@@ -8561,9 +8580,11 @@ function useDraggable(options = {}) {
     }
     isDragging.value = false;
     dropTarget.value = null;
-    document.body.style.userSelect = "";
-    document.body.style.webkitUserSelect = "";
-    document.body.style.cursor = "";
+    if (isBrowser) {
+      document.body.style.userSelect = "";
+      document.body.style.webkitUserSelect = "";
+      document.body.style.cursor = "";
+    }
     if (scrollRAF) {
       cancelAnimationFrame(scrollRAF);
       scrollRAF = null;
@@ -8579,7 +8600,7 @@ function useDraggable(options = {}) {
   }
   function onDragStart(e) {
     var _a2;
-    if (defaultOptions2.disabled) return;
+    if (!isBrowser || defaultOptions2.disabled) return;
     if (e.button !== 0) return;
     if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
     const dragEl2 = findDraggableParent(e.target);
@@ -8607,13 +8628,15 @@ function useDraggable(options = {}) {
     dragEl2.classList.add(defaultOptions2.dragClass);
     shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragEl2) : handleLineMode(dragEl2);
     (_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
-    document.body.style.userSelect = "none";
-    document.body.style.webkitUserSelect = "none";
-    document.body.style.cursor = "grabbing";
-    window.addEventListener("blur", cleanup);
-    document.addEventListener("mousemove", onDragMove);
-    document.addEventListener("mouseup", onDragEnd);
-    document.addEventListener("keydown", onKeyDown);
+    if (isBrowser) {
+      document.body.style.userSelect = "none";
+      document.body.style.webkitUserSelect = "none";
+      document.body.style.cursor = "grabbing";
+      window.addEventListener("blur", cleanup);
+      document.addEventListener("mousemove", onDragMove);
+      document.addEventListener("mouseup", onDragEnd);
+      document.addEventListener("keydown", onKeyDown);
+    }
   }
   function findScrollParent(element) {
     let parent = element.parentElement;
@@ -8726,7 +8749,7 @@ function useDraggable(options = {}) {
   }
   function onTouchStart(e) {
     var _a2;
-    if (defaultOptions2.disabled || !e.target) return;
+    if (!isBrowser || defaultOptions2.disabled || !e.target) return;
     const touch = e.touches[0];
     if (!touch) return;
     const target = e.target;
@@ -8753,13 +8776,15 @@ function useDraggable(options = {}) {
     dragElement.value.classList.add(defaultOptions2.dragClass);
     shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragElement.value) : handleLineMode(dragElement.value);
     (_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
-    document.body.style.userSelect = "none";
-    document.body.style.webkitUserSelect = "none";
-    document.body.style.cursor = "grabbing";
-    window.addEventListener("blur", cleanup);
-    document.addEventListener("touchmove", onTouchMove, { passive: false });
-    document.addEventListener("touchend", onTouchEnd);
-    document.addEventListener("touchcancel", onTouchEnd);
+    if (isBrowser) {
+      document.body.style.userSelect = "none";
+      document.body.style.webkitUserSelect = "none";
+      document.body.style.cursor = "grabbing";
+      window.addEventListener("blur", cleanup);
+      document.addEventListener("touchmove", onTouchMove, { passive: false });
+      document.addEventListener("touchend", onTouchEnd);
+      document.addEventListener("touchcancel", onTouchEnd);
+    }
   }
   function onTouchMove(e) {
     e.preventDefault();
@@ -8787,6 +8812,7 @@ function useDraggable(options = {}) {
     document.removeEventListener("touchcancel", onTouchEnd);
   }
   function initDraggableContainer(container) {
+    if (!isBrowser) return;
     cleanupFn == null ? void 0 : cleanupFn();
     isDragging.value = false;
     dragElement.value = null;
@@ -8834,16 +8860,6 @@ function useDraggable(options = {}) {
     initDraggableContainer
   };
 }
-const style = document.createElement("style");
-style.textContent = `
-  .draggable-ghost {
-    opacity: 0.5;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    transition: transform 0.1s;
-
-  }
-`;
-document.head.appendChild(style);
 const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Draggable",
   props: {
@@ -22590,7 +22606,7 @@ function createCommandExecutor(state2, commands) {
     }
   };
 }
-function isStyleActive(style2, doc) {
+function isStyleActive(style, doc) {
   const selection = doc.getSelection();
   if (!selection || !selection.rangeCount) return false;
   const range2 = selection.getRangeAt(0);
@@ -22607,7 +22623,7 @@ function isStyleActive(style2, doc) {
     italic: ["em", "i"],
     underline: ["u"]
   };
-  return checkParent(parent, styleTags[style2] ?? [style2]);
+  return checkParent(parent, styleTags[style] ?? [style]);
 }
 function analyzeSelection(doc, range2) {
   const container = range2.commonAncestorContainer;
@@ -23161,9 +23177,9 @@ function useEditor() {
       "ol",
       "li"
     ];
-    styleTypes.forEach((style2) => {
-      if (state2.doc && isStyleActive(style2, state2.doc)) {
-        styles.add(style2);
+    styleTypes.forEach((style) => {
+      if (state2.doc && isStyleActive(style, state2.doc)) {
+        styles.add(style);
       }
     });
     state2.selectedStyles = styles;
@@ -23524,9 +23540,9 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       doc.designMode = "on";
       doc.body.contentEditable = "true";
       doc.body.dir = hasRTL.value ? "rtl" : "ltr";
-      const style2 = doc.createElement("style");
-      style2.textContent = (await import("./editor-BKPRpAjr.js")).default;
-      doc.head.appendChild(style2);
+      const style = doc.createElement("style");
+      style.textContent = (await import("./editor-BKPRpAjr.js")).default;
+      doc.head.appendChild(style);
       editor.init(doc);
       useEditorKeyboard(doc, commands.execute);
       if (!doc.body.firstElementChild) {
@@ -24906,8 +24922,8 @@ function toggleClass(el, name, state2) {
   }
 }
 function css(el, prop3, val) {
-  var style2 = el && el.style;
-  if (style2) {
+  var style = el && el.style;
+  if (style) {
     if (val === void 0) {
       if (document.defaultView && document.defaultView.getComputedStyle) {
         val = document.defaultView.getComputedStyle(el, "");
@@ -24916,10 +24932,10 @@ function css(el, prop3, val) {
       }
       return prop3 === void 0 ? val : val[prop3];
     } else {
-      if (!(prop3 in style2) && prop3.indexOf("webkit") === -1) {
+      if (!(prop3 in style) && prop3.indexOf("webkit") === -1) {
         prop3 = "-webkit-" + prop3;
       }
-      style2[prop3] = val + (typeof val === "string" ? "" : "px");
+      style[prop3] = val + (typeof val === "string" ? "" : "px");
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1216",
+  "version": "0.0.1218",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Draggable/useDraggable.ts

@@ -35,6 +35,26 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const dropIndicator = ref<HTMLElement | null>(null)
 	const dropTarget = ref<DraggableElement | null>(null)
 
+	// Only run in browser environment
+	const isBrowser = typeof window !== 'undefined'
+
+	// Move style injection into setup
+	if (isBrowser) {
+		const existingStyle = document.getElementById('draggable-style')
+		if (!existingStyle) {
+			const style = document.createElement('style')
+			style.id = 'draggable-style'
+			style.textContent = `
+				.draggable-ghost {
+					opacity: 0.5;
+					box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+					transition: transform 0.1s;
+				}
+			`
+			document.head.appendChild(style)
+		}
+	}
+
 	const defaultOptions: DraggableOptions = {
 		animation: 150,
 		mode: 'line',
@@ -59,6 +79,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const POSITION_CACHE = new Map<number, { top: number, bottom: number }>()
 
 	function createGhost(el: DraggableElement) {
+		if (!isBrowser) return null
 		const ghost = el.cloneNode(true) as HTMLElement
 		const rect = el.getBoundingClientRect()
 		ghost.style.position = 'fixed'
@@ -78,6 +99,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function createDropIndicator(el: DraggableElement) {
+		if (!isBrowser) return null
 		const line = document.createElement('div')
 		line.classList.add(defaultOptions.dropIndicatorClass!)
 		line.style.position = 'fixed'
@@ -212,6 +234,8 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function cleanup() {
+		if (!isBrowser) return
+
 		document.removeEventListener('mousemove', onDragMove)
 		document.removeEventListener('mouseup', onDragEnd)
 		document.removeEventListener('keydown', onKeyDown)
@@ -252,9 +276,12 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 		isDragging.value = false
 		dropTarget.value = null
-		document.body.style.userSelect = ''
-		document.body.style.webkitUserSelect = ''
-		document.body.style.cursor = ''
+
+		if (isBrowser) {
+			document.body.style.userSelect = ''
+			document.body.style.webkitUserSelect = ''
+			document.body.style.cursor = ''
+		}
 
 		if (scrollRAF) {
 			cancelAnimationFrame(scrollRAF)
@@ -273,7 +300,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onDragStart(e: MouseEvent) {
-		if (defaultOptions.disabled) return
+		if (!isBrowser || defaultOptions.disabled) return
 		if (e.button !== 0) return // Only left mouse button
 		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return
 
@@ -318,16 +345,16 @@ export function useDraggable(options: DraggableOptions = {}) {
 		defaultOptions.onStart?.(e)
 
 		// Prevent text selection during drag
-		document.body.style.userSelect = 'none'
-		document.body.style.webkitUserSelect = 'none'
-
-		// Add grabbing cursor to body during drag
-		document.body.style.cursor = 'grabbing'
-
-		window.addEventListener('blur', cleanup)
-		document.addEventListener('mousemove', onDragMove)
-		document.addEventListener('mouseup', onDragEnd)
-		document.addEventListener('keydown', onKeyDown)
+		if (isBrowser) {
+			document.body.style.userSelect = 'none'
+			document.body.style.webkitUserSelect = 'none'
+			document.body.style.cursor = 'grabbing'
+
+			window.addEventListener('blur', cleanup)
+			document.addEventListener('mousemove', onDragMove)
+			document.addEventListener('mouseup', onDragEnd)
+			document.addEventListener('keydown', onKeyDown)
+		}
 	}
 
 	function findScrollParent(element: Element): Element {
@@ -472,7 +499,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onTouchStart(e: TouchEvent) {
-		if (defaultOptions.disabled || !e.target) return
+		if (!isBrowser || defaultOptions.disabled || !e.target) return
 
 		const touch = e.touches[0]
 		if (!touch) return
@@ -515,17 +542,17 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 		defaultOptions.onStart?.(e as unknown as MouseEvent)
 
-		// Prevent text selection during drag
-		document.body.style.userSelect = 'none'
-		document.body.style.webkitUserSelect = 'none'
+		if (isBrowser) {
+			// Prevent text selection during drag
+			document.body.style.userSelect = 'none'
+			document.body.style.webkitUserSelect = 'none'
+			document.body.style.cursor = 'grabbing'
 
-		// Add grabbing cursor to body during drag
-		document.body.style.cursor = 'grabbing'
-
-		window.addEventListener('blur', cleanup)
-		document.addEventListener('touchmove', onTouchMove, { passive: false })
-		document.addEventListener('touchend', onTouchEnd)
-		document.addEventListener('touchcancel', onTouchEnd)
+			window.addEventListener('blur', cleanup)
+			document.addEventListener('touchmove', onTouchMove, { passive: false })
+			document.addEventListener('touchend', onTouchEnd)
+			document.addEventListener('touchcancel', onTouchEnd)
+		}
 	}
 
 	function onTouchMove(e: TouchEvent) {
@@ -560,6 +587,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function initDraggableContainer(container: HTMLElement) {
+		if (!isBrowser) return
 		cleanupFn?.()
 
 		// Reset state
@@ -618,15 +646,3 @@ export function useDraggable(options: DraggableOptions = {}) {
 		initDraggableContainer
 	}
 }
-
-// Simplified default styles
-const style = document.createElement('style')
-style.textContent = `
-  .draggable-ghost {
-    opacity: 0.5;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    transition: transform 0.1s;
-
-  }
-`
-document.head.appendChild(style)