@kubuild/editor 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -3208,15 +3208,18 @@ var TableSpreadsheetEditor = ({
     setIsImportModalOpen(false);
     setCsvInputText("");
   };
-  const [pos, setPos] = (0, import_react7.useState)({ x: 260, y: 120 });
+  const [pos, setPos] = (0, import_react7.useState)(() => ({
+    x: typeof window !== "undefined" ? Math.max(10, Math.min(window.innerWidth - 400, 20)) : 20,
+    y: 120
+  }));
   const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
   const dragStartRef = (0, import_react7.useRef)({
     startX: 0,
     startY: 0,
-    posX: 260,
+    posX: 20,
     posY: 120
   });
-  const handleHeaderMouseDown = (e) => {
+  const handleHeaderPointerDown = (e) => {
     if (e.target.closest("button, input, select, textarea")) return;
     setIsDragging(true);
     dragStartRef.current = {
@@ -3228,22 +3231,26 @@ var TableSpreadsheetEditor = ({
   };
   (0, import_react7.useEffect)(() => {
     if (!isDragging) return;
-    const handleMouseMove = (e) => {
+    const handlePointerMove = (e) => {
       const dx = e.clientX - dragStartRef.current.startX;
       const dy = e.clientY - dragStartRef.current.startY;
+      const maxX = Math.max(8, window.innerWidth - 320);
+      const maxY = Math.max(8, window.innerHeight - 100);
       setPos({
-        x: Math.max(10, Math.min(window.innerWidth - 350, dragStartRef.current.posX + dx)),
-        y: Math.max(10, Math.min(window.innerHeight - 150, dragStartRef.current.posY + dy))
+        x: Math.max(8, Math.min(maxX, dragStartRef.current.posX + dx)),
+        y: Math.max(8, Math.min(maxY, dragStartRef.current.posY + dy))
       });
     };
-    const handleMouseUp = () => {
+    const handlePointerUp = () => {
       setIsDragging(false);
     };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
     return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
     };
   }, [isDragging]);
   if (!tableNode) return null;
@@ -3797,9 +3804,9 @@ var TableSpreadsheetEditor = ({
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
-          style: { left: `${pos.x}px`, top: `${pos.y}px` },
-          onMouseDown: handleHeaderMouseDown,
-          className: `fixed z-40 min-w-[380px] max-w-[620px] bg-white/95 backdrop-blur-md rounded-xl shadow-2xl border border-slate-300 flex flex-col max-h-[460px] overflow-hidden ${className}`,
+          style: { left: `${pos.x}px`, top: `${pos.y}px`, touchAction: "none" },
+          onPointerDown: handleHeaderPointerDown,
+          className: `fixed z-40 min-w-[320px] sm:min-w-[380px] max-w-[620px] bg-white/95 backdrop-blur-md rounded-xl shadow-2xl border border-slate-300 flex flex-col max-h-[460px] overflow-hidden cursor-grab active:cursor-grabbing touch-none ${className}`,
           children: content
         }
       )
@@ -6861,16 +6868,19 @@ var LayersPanel = ({ registry, className }) => {
   const [expandedIds, setExpandedIds] = (0, import_react14.useState)(() => /* @__PURE__ */ new Set([document2.document.id]));
   const [draggingId, setDraggingId] = (0, import_react14.useState)(null);
   const [dropCandidate, setDropCandidate] = (0, import_react14.useState)(null);
-  const [pos, setPos] = (0, import_react14.useState)({ x: 280, y: 70 });
+  const [pos, setPos] = (0, import_react14.useState)(() => ({
+    x: typeof window !== "undefined" ? Math.max(12, Math.min(window.innerWidth - 300, 24)) : 24,
+    y: 70
+  }));
   const [isDraggingWindow, setIsDraggingWindow] = (0, import_react14.useState)(false);
   const dragStartRef = (0, import_react14.useRef)({
     startX: 0,
     startY: 0,
-    posX: 280,
+    posX: 24,
     posY: 70
   });
-  const handleHeaderMouseDown = (e) => {
-    if (e.target.closest("button")) return;
+  const handleHeaderPointerDown = (e) => {
+    if (e.target.closest("button, input, select, textarea")) return;
     setIsDraggingWindow(true);
     dragStartRef.current = {
       startX: e.clientX,
@@ -6881,22 +6891,26 @@ var LayersPanel = ({ registry, className }) => {
   };
   (0, import_react14.useEffect)(() => {
     if (!isDraggingWindow) return;
-    const handleMouseMove = (e) => {
+    const handlePointerMove = (e) => {
       const dx = e.clientX - dragStartRef.current.startX;
       const dy = e.clientY - dragStartRef.current.startY;
+      const maxX = Math.max(8, window.innerWidth - 296);
+      const maxY = Math.max(8, window.innerHeight - 100);
       setPos({
-        x: Math.max(10, Math.min(window.innerWidth - 280, dragStartRef.current.posX + dx)),
-        y: Math.max(10, Math.min(window.innerHeight - 120, dragStartRef.current.posY + dy))
+        x: Math.max(8, Math.min(maxX, dragStartRef.current.posX + dx)),
+        y: Math.max(8, Math.min(maxY, dragStartRef.current.posY + dy))
       });
     };
-    const handleMouseUp = () => {
+    const handlePointerUp = () => {
       setIsDraggingWindow(false);
     };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
     return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
     };
   }, [isDraggingWindow]);
   (0, import_react14.useEffect)(() => {
@@ -7047,8 +7061,9 @@ var LayersPanel = ({ registry, className }) => {
   const header = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      onMouseDown: isFloating ? handleHeaderMouseDown : void 0,
-      className: `flex items-center justify-between px-3 py-2 border-b border-slate-200/90 select-none ${isFloating ? "cursor-grab active:cursor-grabbing bg-slate-50/90 rounded-t-xl" : "bg-slate-50"}`,
+      onPointerDown: isFloating ? handleHeaderPointerDown : void 0,
+      style: { touchAction: isFloating ? "none" : "auto" },
+      className: `flex items-center justify-between px-3 py-2 border-b border-slate-200/90 select-none ${isFloating ? "cursor-grab active:cursor-grabbing bg-slate-50/90 rounded-t-xl touch-none" : "bg-slate-50"}`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1.5 font-semibold text-xs text-slate-700", children: [
           isFloating && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.GripVertical, { className: "w-3 h-3 text-slate-400 mr-0.5", "aria-hidden": "true" }),