fix guide line in safari

src/pages/editor/components/canvas/GuidesLayer.tsx

@@ -9,6 +9,7 @@ type GuidesLayerProps = {
   selectedGuideId: string | null;
   draftGuide: { orientation: Guide["orientation"]; position: number } | null;
   onGuideSelect: (id: string) => void;
+  onGuideDragStart: (id: string, orientation: Guide["orientation"]) => void;
   onGuideDragEnd: (id: string, position: number, shouldRemove: boolean) => void;
 };
 
@@ -20,8 +21,23 @@ const GuidesLayer = ({
   selectedGuideId,
   draftGuide,
   onGuideSelect,
+  onGuideDragStart,
   onGuideDragEnd,
 }: GuidesLayerProps) => {
+  const finalizeGuideDrag = (
+    guideId: string,
+    orientation: Guide["orientation"],
+    x: number,
+    y: number,
+  ) => {
+    const nextPosition = orientation === "vertical" ? x : y;
+    const shouldRemove =
+      orientation === "vertical"
+        ? nextPosition < 0 || nextPosition > stageWidth
+        : nextPosition < 0 || nextPosition > stageHeight;
+    onGuideDragEnd(guideId, nextPosition, shouldRemove);
+  };
+
   return (
     <Layer>
       {guides.map((guide) => {
@@ -46,13 +62,21 @@ const GuidesLayer = ({
               isVertical ? { x: pos.x, y: 0 } : { x: 0, y: pos.y }
             }
             onMouseDown={() => onGuideSelect(guide.id)}
+            onDragStart={() => onGuideDragStart(guide.id, guide.orientation)}
+            onDragMove={(e) => {
+              const nativeEvent = e.evt as MouseEvent | PointerEvent | TouchEvent;
+              // Safari can miss dragend/mouseup; if no pressed pointer exists, end drag immediately.
+              if ("buttons" in nativeEvent && nativeEvent.buttons === 0) {
+                const node = e.target;
+                if (node.isDragging()) {
+                  node.stopDrag();
+                }
+                finalizeGuideDrag(guide.id, guide.orientation, node.x(), node.y());
+              }
+            }}
             onDragEnd={(e) => {
               const node = e.target;
-              const nextPosition = isVertical ? node.x() : node.y();
-              const shouldRemove = isVertical
-                ? nextPosition < 0 || nextPosition > stageWidth
-                : nextPosition < 0 || nextPosition > stageHeight;
-              onGuideDragEnd(guide.id, nextPosition, shouldRemove);
+              finalizeGuideDrag(guide.id, guide.orientation, node.x(), node.y());
             }}
           />
         );