맥 os 전략편집기 지표 드래그 문제해결

frontend/src/components/strategyEditor/PaletteChip.tsx

@@ -4,7 +4,6 @@ import {
   handlePalettePointerDown,
   handlePaletteTouchStart,
   endHtmlDragMouseTracking,
-  markPaletteHtmlDragEnd,
   needsPointerPaletteDrag,
   shouldSuppressPaletteClick,
   startHtmlDragMouseTracking,
@@ -52,8 +51,10 @@ export default function PaletteChip({
     longPeriod,
   });
 
+  const pointerMode = needsPointerPaletteDrag();
+
   const onDragStart = (e: React.DragEvent) => {
-    if (needsPointerPaletteDrag()) {
+    if (pointerMode) {
       e.preventDefault();
       return;
     }
@@ -67,14 +68,17 @@ export default function PaletteChip({
   };
 
   const onPointerDown = (e: React.PointerEvent) => {
+    if (!pointerMode) return;
     handlePalettePointerDown(e, buildPayload(), composite ? `${label} + ${label}` : label);
   };
 
   const onMouseDown = (e: React.MouseEvent) => {
+    if (!pointerMode) return;
     handlePaletteMouseDown(e, buildPayload(), composite ? `${label} + ${label}` : label);
   };
 
   const onTouchStart = (e: React.TouchEvent) => {
+    if (!pointerMode) return;
     handlePaletteTouchStart(e, buildPayload(), composite ? `${label} + ${label}` : label);
   };
 
@@ -102,11 +106,11 @@ export default function PaletteChip({
 
   return (
     <div
-      draggable={!needsPointerPaletteDrag()}
-      className={`se-palette-card ${color ? `se-palette-card--${color}` : 'se-palette-card--ind'}${composite ? ' se-palette-card--composite' : ''}${selected ? ' se-palette-card--selected' : ''}${needsPointerPaletteDrag() ? ' se-palette-card--pointer' : ''}`}
+      draggable={!pointerMode}
+      className={`se-palette-card ${color ? `se-palette-card--${color}` : 'se-palette-card--ind'}${composite ? ' se-palette-card--composite' : ''}${selected ? ' se-palette-card--selected' : ''}${pointerMode ? ' se-palette-card--pointer' : ''}`}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
-      onPointerDown={onPointerDown}
+      onPointerDownCapture={onPointerDown}
       onMouseDown={onMouseDown}
       onTouchStart={onTouchStart}
       onClick={handleClick}

frontend/src/components/strategyEditor/PaletteDragOverlay.tsx

@@ -51,11 +51,6 @@ export default function PaletteDragOverlay() {
     bindPaletteDragOverlayElement(el);
     const s = sessionRef.current;
     if (el && s) {
-      try {
-        el.setPointerCapture(s.pointerId);
-      } catch {
-        /* window backup in paletteDragSession */
-      }
       const label = labelRef.current;
       if (label) {
         label.style.left = `${s.x}px`;

frontend/src/components/strategyEditor/SidewaysFilterPaletteTab.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import type { DefType } from '../../utils/strategyEditorShared';
 import {
+  handlePaletteMouseDown,
   handlePalettePointerDown,
   handlePaletteTouchStart,
   endHtmlDragMouseTracking,
@@ -99,6 +100,7 @@ function SidewaysFilterChip({
 
   const onPointerDown = (e: React.PointerEvent) => {
     hideHint();
+    if (!needsPointerPaletteDrag()) return;
     const payload: PaletteDragPayload = {
       type: 'sidewaysFilter',
       value: item.id,
@@ -107,6 +109,16 @@ function SidewaysFilterChip({
     handlePalettePointerDown(e, payload, item.label);
   };
 
+  const onMouseDown = (e: React.MouseEvent) => {
+    hideHint();
+    const payload: PaletteDragPayload = {
+      type: 'sidewaysFilter',
+      value: item.id,
+      label: item.label,
+    };
+    handlePaletteMouseDown(e, payload, item.label);
+  };
+
   const onTouchStart = (e: React.TouchEvent) => {
     hideHint();
     const payload: PaletteDragPayload = {
@@ -136,7 +148,8 @@ function SidewaysFilterChip({
       className={`se-palette-card se-palette-card--range se-palette-card--range-${item.mode}${selected ? ' se-palette-card--selected' : ''}${needsPointerPaletteDrag() ? ' se-palette-card--pointer' : ''}`}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
-      onPointerDown={onPointerDown}
+      onPointerDownCapture={onPointerDown}
+      onMouseDown={onMouseDown}
       onTouchStart={onTouchStart}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -34,6 +34,7 @@ import {
   isPaletteHtmlDrag,
   isPaletteHtmlDragActive,
   getLastHtmlPaletteDragClientXY,
+  isPaletteDragSessionActive,
   markPaletteHtmlDragEnd,
   needsPointerPaletteDrag,
   readPaletteHtmlDragData,
@@ -898,6 +899,7 @@ function StrategyEditorCanvasInner({
 
   // 트리 구조 변경 → 전체 재배치 / 조건 편집 → 라벨만 갱신(위치 유지)
   useEffect(() => {
+    if (isPaletteDragSessionActive()) return;
     const { nodes: layoutNodes, edges: layoutEdges } = rebuildFlow();
     const mergedEdges = applyEdgeHandles(layoutEdges, positionsRef.current, edgeHandlesRef.current);
     pruneEdgeHandles(edgeHandlesRef.current, mergedEdges);
@@ -1319,7 +1321,7 @@ function StrategyEditorCanvasInner({
         return;
       }
       const xy = getLastHtmlPaletteDragClientXY();
-      if (xy) {
+      if (xy && (xy.x !== 0 || xy.y !== 0)) {
         const { flowPos, anchorId } = resolveDropFromClientRef.current(xy.x, xy.y);
         if (anchorId) {
           updatePreviewRef.current(anchorId, flowPos);
@@ -1342,7 +1344,7 @@ function StrategyEditorCanvasInner({
   }, []);
 
   useEffect(() => {
-    if (needsPointerPaletteDrag()) return;
+    if (needsPointerPaletteDrag()) return undefined;
     const onDocDragOver = (e: DragEvent) => {
       if (!isPaletteHtmlDragActive()) return;
       e.preventDefault();
@@ -1352,12 +1354,13 @@ function StrategyEditorCanvasInner({
         lastPreviewAnchorRef.current = anchorId;
       }
     };
-    document.addEventListener('dragover', onDocDragOver, { passive: false });
-    return () => document.removeEventListener('dragover', onDocDragOver);
+    document.addEventListener('dragover', onDocDragOver, { passive: false, capture: true });
+    return () => document.removeEventListener('dragover', onDocDragOver, { capture: true });
   }, []);
 
   useEffect(() => {
     const onDocDragEnd = () => {
+      if (!isPaletteHtmlDragActive()) return;
       lastPreviewAnchorRef.current = null;
       lastPreviewKeyRef.current = null;
       clearPreviewRef.current();

frontend/src/styles/strategyEditor.css

@@ -2050,6 +2050,18 @@ body.se-palette-drag-active {
   user-select: none;
 }
 
+body.se-palette-drag-armed .se-right-body,
+body.se-palette-drag-armed .se-palette-section--scroll {
+  overflow: hidden !important;
+  overscroll-behavior: none;
+  touch-action: none;
+}
+
+.se-palette-card .se-palette-period-input[readonly] {
+  pointer-events: none;
+  cursor: inherit;
+}
+
 .se-palette-drag-overlay {
   position: fixed;
   inset: 0;

frontend/src/utils/flowScreenProjection.ts

@@ -4,18 +4,27 @@ import {
   getLastHtmlPaletteDragClientXY,
   isPaletteHtmlDragActive,
 } from './paletteDragSession';
+import { getNodeDimensions } from './strategyFlowLayout';
 
 type FlowProjector = Pick<ReactFlowInstance, 'screenToFlowPosition' | 'getViewport'>;
 
 const DRAG_LAYER_SELECTOR = '.se-palette-drag-overlay, .se-palette-drag-ghost';
 
+function getFlowProjectionHost(containerEl: HTMLElement | null): HTMLElement | null {
+  if (!containerEl) return null;
+  return containerEl.querySelector('.react-flow__viewport') as HTMLElement | null
+    ?? containerEl.querySelector('.react-flow__renderer') as HTMLElement | null
+    ?? containerEl.querySelector('.react-flow') as HTMLElement | null
+    ?? containerEl;
+}
+
 function manualProject(
   clientX: number,
   clientY: number,
   rf: FlowProjector,
   containerEl: HTMLElement | null,
 ): { x: number; y: number } {
-  const host = (containerEl?.querySelector('.react-flow') as HTMLElement | null) ?? containerEl;
+  const host = getFlowProjectionHost(containerEl);
   if (!host) return { x: 0, y: 0 };
 
   const rect = host.getBoundingClientRect();
@@ -159,12 +168,73 @@ export interface PaletteDropResolution {
   anchorId: string | null;
 }
 
-/** WKWebView HTML5 drag — dragover client 좌표가 0,0 으로 오는 경우 보정 */
-export function resolvePaletteDragClientPoint(clientX: number, clientY: number): { x: number; y: number } {
-  if (clientX !== 0 || clientY !== 0) return { x: clientX, y: clientY };
-  if (!isPaletteHtmlDragActive()) return { x: clientX, y: clientY };
-  const last = getLastHtmlPaletteDragClientXY();
-  return last ?? { x: clientX, y: clientY };
+function projectFlowToScreen(
+  flowX: number,
+  flowY: number,
+  rf: FlowProjector | null,
+  containerEl: HTMLElement | null,
+): { x: number; y: number } {
+  const host = getFlowProjectionHost(containerEl);
+  if (!host || !rf) return { x: flowX, y: flowY };
+
+  const rect = host.getBoundingClientRect();
+  const { x: vx, y: vy, zoom } = rf.getViewport();
+  const z = zoom || 1;
+  return {
+    x: rect.left + vx + flowX * z,
+    y: rect.top + vy + flowY * z,
+  };
+}
+
+/** WKWebView HTML5 drag — dragover client 0,0 보정 (Web 전용) */
+export function resolvePaletteDragClientPoint(
+  clientX: number,
+  clientY: number,
+): { x: number; y: number } {
+  if (clientX !== 0 || clientY !== 0) {
+    return { x: clientX, y: clientY };
+  }
+  if (!isPaletteHtmlDragActive() && !getActivePaletteDrag()) {
+    return { x: clientX, y: clientY };
+  }
+  const fromHtml = getLastHtmlPaletteDragClientXY();
+  if (fromHtml && (fromHtml.x !== 0 || fromHtml.y !== 0)) return fromHtml;
+  return { x: clientX, y: clientY };
+}
+
+/** flow 노드 screen rect hit-test (DOM / elementsFromPoint 불필요 — WKWebView HTML5 drag 대응) */
+function findConnectTargetAtClientPoint(
+  clientX: number,
+  clientY: number,
+  rf: FlowProjector | null,
+  containerEl: HTMLElement | null,
+  nodes: { id: string; position: { x: number; y: number } }[],
+  isConnectTarget: (nodeId: string) => boolean,
+): string | null {
+  const pad = 12;
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const n = nodes[i];
+    if (!isConnectTarget(n.id)) continue;
+    const dim = getNodeDimensions(n.id);
+    const tl = projectFlowToScreen(n.position.x, n.position.y, rf, containerEl);
+    const br = projectFlowToScreen(
+      n.position.x + dim.w,
+      n.position.y + dim.h,
+      rf,
+      containerEl,
+    );
+    const left = Math.min(tl.x, br.x) - pad;
+    const right = Math.max(tl.x, br.x) + pad;
+    const top = Math.min(tl.y, br.y) - pad;
+    const bottom = Math.max(tl.y, br.y) + pad;
+    if (
+      clientX >= left && clientX <= right
+      && clientY >= top && clientY <= bottom
+    ) {
+      return n.id;
+    }
+  }
+  return null;
 }
 
 /** client 좌표 → flow 위치 + 연결 대상 노드 (DOM 우선, flow hit 보조) */
@@ -183,6 +253,32 @@ export function resolvePaletteDropClientPoint(
   const { x: px, y: py } = resolvePaletteDragClientPoint(clientX, clientY);
   const flowPos = projectScreenToFlowPosition(px, py, rf, containerEl);
 
+  // 1) DOM rect — pointer overlay 에서 가장 정확
+  for (const node of nodes) {
+    if (!isConnectTarget(node.id)) continue;
+    const escaped = typeof CSS !== 'undefined' && CSS.escape
+      ? CSS.escape(node.id)
+      : node.id.replace(/"/g, '\\"');
+    const el = document.querySelector(`.react-flow__node[data-id="${escaped}"]`)
+      ?? document.getElementById(`react-flow__node-${node.id}`);
+    if (!el) continue;
+    const rect = el.getBoundingClientRect();
+    const pad = 12;
+    if (
+      px >= rect.left - pad && px <= rect.right + pad
+      && py >= rect.top - pad && py <= rect.bottom + pad
+    ) {
+      return { flowPos, anchorId: node.id };
+    }
+  }
+
+  const flowRectId = findConnectTargetAtClientPoint(
+    px, py, rf, containerEl, nodes, isConnectTarget,
+  );
+  if (flowRectId) {
+    return { flowPos, anchorId: flowRectId };
+  }
+
   const domId = findFlowNodeIdAtClientPoint(px, py);
   if (domId && nodes.some(n => n.id === domId) && isConnectTarget(domId)) {
     return { flowPos, anchorId: domId };
@@ -195,23 +291,6 @@ export function resolvePaletteDropClientPoint(
     }
   }
 
-  for (const node of nodes) {
-    if (!isConnectTarget(node.id)) continue;
-    const escaped = typeof CSS !== 'undefined' && CSS.escape
-      ? CSS.escape(node.id)
-      : node.id.replace(/"/g, '\\"');
-    const el = document.querySelector(`.react-flow__node[data-id="${escaped}"]`)
-      ?? document.getElementById(`react-flow__node-${node.id}`);
-    if (!el) continue;
-    const rect = el.getBoundingClientRect();
-    if (
-      px >= rect.left && px <= rect.right
-      && py >= rect.top && py <= rect.bottom
-    ) {
-      return { flowPos, anchorId: node.id };
-    }
-  }
-
   const flowHit = findAtFlow(flowPos, nodes);
   if (flowHit && isConnectTarget(flowHit.id)) {
     return { flowPos, anchorId: flowHit.id };

frontend/src/utils/paletteDragSession.ts

@@ -1,13 +1,18 @@
 /**
- * Desktop(Tauri) 및 터치 — HTML5 DnD 대신 pointer/touch + overlay 드래그
- * (useDraggablePanel 과 동일: pointerdown 1회 bindWindowDrag 로 전체 제스처 처리)
+ * Desktop(Tauri) — document capture pointer 드래그 + overlay
+ * Web — HTML5 DnD
+ *
+ * Desktop: pointerdown 즉시 overlay + document capture move/end
+ *   → subscribePaletteDrag(move) → preview + drop (동일 좌표 파이프)
+ * Web: HTML5 drag + dragover 좌표 (브라우저 네이티브 지원)
  */
 import { elementsUnderDragPoint } from './flowScreenProjection';
 import {
+  bindDocumentPointerDrag,
   bindWindowDrag,
   isPrimaryPointerButton,
 } from './pointerDrag';
-import { isDesktop, isMacDesktop } from './platform';
+import { isDesktop } from './platform';
 
 export type PaletteDragPayload = Record<string, unknown> & {
   type: string;
@@ -40,20 +45,21 @@ type OverlayController = {
   bindElement: (el: HTMLElement | null) => void;
 };
 
-let suppressClickUntil = 0;
-const DRAG_THRESHOLD_PX = 6;
+/** 클릭과 드래그 구분 — 이보다 작으면 cancel (클릭 허용) */
+const CLICK_VS_DRAG_PX = 5;
 
+let suppressClickUntil = 0;
 let activePayload: PaletteDragPayload | null = null;
 let activePointerId: number | null = null;
 let overlayController: OverlayController | null = null;
 let overlayElement: HTMLElement | null = null;
-let gestureCaptureEl: HTMLElement | null = null;
 let listeners = new Set<PaletteDragListener>();
 let dropHandler: PaletteDropHandler | null = null;
 let moveRafId: number | null = null;
 let pendingMove: { x: number; y: number } | null = null;
 let unbindGesture: (() => void) | null = null;
 let lastDragClientXY: { x: number; y: number } | null = null;
+
 let htmlDragMouseTrackUnbind: (() => void) | null = null;
 let htmlPaletteDragActive = false;
 let lastHtmlDragClientXY: { x: number; y: number } | null = null;
@@ -66,58 +72,12 @@ type HtmlPaletteDropRouter = (
 ) => void;
 
 let htmlDropRouter: HtmlPaletteDropRouter | null = null;
+let htmlDropCommitted = false;
 
 export function setHtmlPaletteDropRouter(router: HtmlPaletteDropRouter | null): void {
   htmlDropRouter = router;
 }
 
-export function getActiveHtmlDragPayload(): PaletteDragPayload | null {
-  return activeHtmlDragPayload;
-}
-
-function installHtmlPaletteDragGlobals() {
-  if (typeof window === 'undefined') return;
-  const w = window as Window & { __gcPaletteHtmlDragGlobals?: boolean };
-  if (w.__gcPaletteHtmlDragGlobals) return;
-  w.__gcPaletteHtmlDragGlobals = true;
-
-  window.addEventListener('dragover', (e) => {
-    if (!htmlPaletteDragActive) return;
-    if (e.clientX !== 0 || e.clientY !== 0) {
-      lastHtmlDragClientXY = { x: e.clientX, y: e.clientY };
-    }
-    e.preventDefault();
-    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
-  }, { passive: false });
-
-  window.addEventListener('drag', (e) => {
-    if (!htmlPaletteDragActive) return;
-    if (e.clientX !== 0 || e.clientY !== 0) {
-      lastHtmlDragClientXY = { x: e.clientX, y: e.clientY };
-    }
-  });
-
-  window.addEventListener('dragend', () => {
-    stopHtmlDragMouseTracking();
-    htmlPaletteDragActive = false;
-    lastHtmlDragClientXY = null;
-    activeHtmlDragPayload = null;
-  });
-
-  document.addEventListener('drop', (e) => {
-    if (!htmlPaletteDragActive) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const payload = readPaletteHtmlDragDataFromEvent(e) ?? activeHtmlDragPayload;
-    if (!payload || !htmlDropRouter) return;
-    const x = e.clientX !== 0 || e.clientY !== 0 ? e.clientX : (lastHtmlDragClientXY?.x ?? 0);
-    const y = e.clientX !== 0 || e.clientY !== 0 ? e.clientY : (lastHtmlDragClientXY?.y ?? 0);
-    htmlDropRouter(x, y, payload);
-  }, true);
-}
-
-installHtmlPaletteDragGlobals();
-
 function hasCoarsePointer(): boolean {
   if (typeof window === 'undefined') return false;
   try {
@@ -127,12 +87,15 @@ function hasCoarsePointer(): boolean {
   }
 }
 
-/** HTML5 DnD 대신 pointer overlay (Windows Desktop 등). macOS WKWebView는 HTML5 + mousemove preview */
+/** Desktop(Tauri) + coarse touch — pointer overlay. Web browser — HTML5 */
 export function needsPointerPaletteDrag(): boolean {
-  if (isMacDesktop()) return false;
   return isDesktop() || hasCoarsePointer();
 }
 
+export function isPaletteDragSessionActive(): boolean {
+  return activePayload != null || htmlPaletteDragActive;
+}
+
 export function subscribePaletteDrag(listener: PaletteDragListener): () => void {
   listeners.add(listener);
   return () => listeners.delete(listener);
@@ -165,24 +128,8 @@ function emit(event: PaletteDragEvent) {
 }
 
 function dispatchEnd(xy: { x: number; y: number }, payload: PaletteDragPayload) {
-  const event: PaletteDragEvent = { phase: 'end', x: xy.x, y: xy.y, payload };
-  dropHandler?.(event);
-  emit(event);
-}
-
-function releasePointerCapture(pointerId: number | null) {
-  if (pointerId == null) return;
-  try {
-    gestureCaptureEl?.releasePointerCapture(pointerId);
-  } catch {
-    /* ignore */
-  }
-  gestureCaptureEl = null;
-  try {
-    overlayElement?.releasePointerCapture(pointerId);
-  } catch {
-    /* ignore */
-  }
+  dropHandler?.({ phase: 'end', x: xy.x, y: xy.y, payload });
+  emit({ phase: 'end', x: xy.x, y: xy.y, payload });
 }
 
 function unbindGestureListeners() {
@@ -190,10 +137,16 @@ function unbindGestureListeners() {
   unbindGesture = null;
 }
 
+function armPaletteDragScrollLock() {
+  document.body.classList.add('se-palette-drag-armed');
+}
+
+function releasePaletteDragScrollLock() {
+  document.body.classList.remove('se-palette-drag-armed');
+}
+
 function cleanupDrag() {
-  const pointerId = activePointerId;
   unbindGestureListeners();
-  releasePointerCapture(pointerId);
   activePayload = null;
   activePointerId = null;
   pendingMove = null;
@@ -203,13 +156,17 @@ function cleanupDrag() {
     moveRafId = null;
   }
   document.body.classList.remove('se-palette-drag-active');
+  releasePaletteDragScrollLock();
   overlayController?.unmount();
   overlayElement = null;
-  document.querySelectorAll('.se-palette-drag-ghost').forEach(el => el.remove());
 }
 
 function finishDrag(phase: 'end' | 'cancel', xy: { x: number; y: number }) {
-  if (!activePayload) return;
+  if (!activePayload) {
+    unbindGestureListeners();
+    releasePaletteDragScrollLock();
+    return;
+  }
   const payload = activePayload;
   const dropXY = lastDragClientXY ?? xy;
 
@@ -231,6 +188,7 @@ function mountDragOverlay(
   activePointerId = pointerId;
   lastDragClientXY = { x: xy.x, y: xy.y };
   document.body.classList.add('se-palette-drag-active');
+  armPaletteDragScrollLock();
   overlayController?.mount({ payload, pointerId, x: xy.x, y: xy.y });
   emit({ phase: 'start', x: xy.x, y: xy.y, payload });
   notifyPaletteDragMove(xy.x, xy.y);
@@ -260,95 +218,40 @@ export function notifyPaletteDragCancel(clientX: number, clientY: number) {
   finishDrag('cancel', { x: clientX, y: clientY });
 }
 
-export function completePaletteDragAt(clientX: number, clientY: number): boolean {
-  if (!activePayload) return false;
-  finishDrag('end', { x: clientX, y: clientY });
-  return true;
-}
-
 export function bindPaletteDragOverlayElement(el: HTMLElement | null) {
   overlayElement = el;
   overlayController?.bindElement(el);
-  if (el && activePointerId != null) {
-    try {
-      el.setPointerCapture(activePointerId);
-    } catch {
-      /* window gesture listener 가 move/end 처리 */
-    }
-  }
 }
 
+/**
+ * Desktop pointer 드래그 — pointerdown 즉시 overlay, document capture 로 move/end
+ * (스크롤 패널·setPointerCapture 충돌 없음 — drag + preview + drop 동일 좌표)
+ */
 function startPaletteDragGesture(
   startX: number,
   startY: number,
   pointerId: number,
   payload: PaletteDragPayload,
 ): void {
-  if (activePayload) {
-    cleanupDrag();
-  }
+  if (activePayload) cleanupDrag();
   unbindGestureListeners();
 
-  let dragging = false;
+  const origin = { x: startX, y: startY };
+  mountDragOverlay(payload, origin, pointerId);
 
-  unbindGesture = bindWindowDrag(
-    (xy) => {
-      if (!dragging) {
-        const dx = xy.x - startX;
-        const dy = xy.y - startY;
-        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
-        dragging = true;
-        mountDragOverlay(payload, xy, pointerId);
-        return;
-      }
-      notifyPaletteDragMove(xy.x, xy.y);
-    },
+  unbindGesture = bindDocumentPointerDrag(
+    pointerId,
+    (xy) => notifyPaletteDragMove(xy.x, xy.y),
     (xy) => {
       unbindGestureListeners();
-      if (dragging && activePayload) {
+      const dist = Math.hypot(xy.x - origin.x, xy.y - origin.y);
+      if (dist < CLICK_VS_DRAG_PX) {
+        finishDrag('cancel', xy);
+      } else {
         finishDrag('end', xy);
       }
     },
-    { preventTouchScroll: true },
   );
-
-  if (gestureCaptureEl) {
-    const el = gestureCaptureEl;
-    const pid = pointerId;
-    const onElMove = (ev: PointerEvent) => {
-      if (ev.pointerId !== pid) return;
-      const xy = { x: ev.clientX, y: ev.clientY };
-      if (!dragging) {
-        const dx = xy.x - startX;
-        const dy = xy.y - startY;
-        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
-        dragging = true;
-        mountDragOverlay(payload, xy, pointerId);
-        return;
-      }
-      notifyPaletteDragMove(xy.x, xy.y);
-    };
-    const onElEnd = (ev: PointerEvent) => {
-      if (ev.pointerId !== pid) return;
-      el.removeEventListener('pointermove', onElMove);
-      el.removeEventListener('pointerup', onElEnd);
-      el.removeEventListener('pointercancel', onElEnd);
-      unbindGestureListeners();
-      if (dragging && activePayload) {
-        finishDrag('end', { x: ev.clientX, y: ev.clientY });
-      }
-    };
-    el.addEventListener('pointermove', onElMove);
-    el.addEventListener('pointerup', onElEnd);
-    el.addEventListener('pointercancel', onElEnd);
-    const windowUnbind = unbindGesture;
-    unbindGesture = () => {
-      el.removeEventListener('pointermove', onElMove);
-      el.removeEventListener('pointerup', onElEnd);
-      el.removeEventListener('pointercancel', onElEnd);
-      windowUnbind?.();
-    };
-  }
 }
 
 export function handlePalettePointerDown(
@@ -358,23 +261,16 @@ export function handlePalettePointerDown(
 ): void {
   if (!needsPointerPaletteDrag()) return;
   if (!isPrimaryPointerButton(e)) return;
-  if ((e.target as HTMLElement).closest('input, textarea, select, button')) return;
+  const target = e.target as HTMLElement;
+  if (target.closest('button')) return;
+  const input = target.closest('input, textarea, select') as HTMLInputElement | null;
+  if (input && !input.readOnly && !input.disabled) return;
 
   e.preventDefault();
-  e.stopPropagation();
-
-  const sourceEl = e.currentTarget as HTMLElement;
-  try {
-    sourceEl.setPointerCapture(e.pointerId);
-    gestureCaptureEl = sourceEl;
-  } catch {
-    /* bindWindowDrag 가 move/end 처리 */
-  }
 
   startPaletteDragGesture(e.clientX, e.clientY, e.pointerId, payload);
 }
 
-/** macOS WebView 등 — pointer 대신 mouse 이벤트만 오는 경우 */
 export function handlePaletteMouseDown(
   e: React.MouseEvent,
   payload: PaletteDragPayload,
@@ -382,15 +278,16 @@ export function handlePaletteMouseDown(
 ): void {
   if (!needsPointerPaletteDrag()) return;
   if (e.button !== 0) return;
-  if ((e.target as HTMLElement).closest('input, textarea, select, button')) return;
+  const target = e.target as HTMLElement;
+  if (target.closest('button')) return;
+  const input = target.closest('input, textarea, select') as HTMLInputElement | null;
+  if (input && !input.readOnly && !input.disabled) return;
   if (typeof window !== 'undefined' && 'PointerEvent' in window) return;
 
   e.preventDefault();
-  e.stopPropagation();
   startPaletteDragGesture(e.clientX, e.clientY, 1, payload);
 }
 
-/** PointerEvent 미지원 — touchstart 전용 */
 export function handlePaletteTouchStart(
   e: React.TouchEvent,
   payload: PaletteDragPayload,
@@ -406,12 +303,77 @@ export function handlePaletteTouchStart(
   startPaletteDragGesture(touch.clientX, touch.clientY, touch.identifier, payload);
 }
 
+/* ── Web HTML5 ── */
+
+function installHtmlPaletteDragGlobals() {
+  if (typeof window === 'undefined') return;
+  const w = window as Window & { __gcPaletteHtmlDragGlobals?: boolean };
+  if (w.__gcPaletteHtmlDragGlobals) return;
+  w.__gcPaletteHtmlDragGlobals = true;
+
+  window.addEventListener('dragover', (e) => {
+    if (!htmlPaletteDragActive) return;
+    if (e.clientX !== 0 || e.clientY !== 0) {
+      lastHtmlDragClientXY = { x: e.clientX, y: e.clientY };
+      if (activeHtmlDragPayload) {
+        emit({
+          phase: 'move',
+          x: e.clientX,
+          y: e.clientY,
+          payload: activeHtmlDragPayload,
+        });
+      }
+    }
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+  }, { passive: false });
+
+  window.addEventListener('drag', (e) => {
+    if (!htmlPaletteDragActive || !activeHtmlDragPayload) return;
+    if (e.clientX !== 0 || e.clientY !== 0) {
+      lastHtmlDragClientXY = { x: e.clientX, y: e.clientY };
+      emit({
+        phase: 'move',
+        x: e.clientX,
+        y: e.clientY,
+        payload: activeHtmlDragPayload,
+      });
+    }
+  });
+
+  window.addEventListener('dragend', () => {
+    const payload = activeHtmlDragPayload;
+    const xy = lastHtmlDragClientXY;
+    if (htmlPaletteDragActive && !htmlDropCommitted && payload && xy && htmlDropRouter) {
+      htmlDropRouter(xy.x, xy.y, payload);
+    }
+    htmlDropCommitted = false;
+    stopHtmlDragMouseTracking();
+    htmlPaletteDragActive = false;
+    lastHtmlDragClientXY = null;
+    activeHtmlDragPayload = null;
+  });
+
+  document.addEventListener('drop', (e) => {
+    if (!htmlPaletteDragActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const payload = readPaletteHtmlDragDataFromEvent(e) ?? activeHtmlDragPayload;
+    if (!payload || !htmlDropRouter || htmlDropCommitted) return;
+    htmlDropCommitted = true;
+    const x = e.clientX !== 0 || e.clientY !== 0 ? e.clientX : (lastHtmlDragClientXY?.x ?? 0);
+    const y = e.clientX !== 0 || e.clientY !== 0 ? e.clientY : (lastHtmlDragClientXY?.y ?? 0);
+    htmlDropRouter(x, y, payload);
+  }, true);
+}
+
+installHtmlPaletteDragGlobals();
+
 function stopHtmlDragMouseTracking(): void {
   htmlDragMouseTrackUnbind?.();
   htmlDragMouseTrackUnbind = null;
 }
 
-/** HTML5 drag 중 mousemove 로 preview 좌표 추적 (macOS WKWebView — dragover 좌표/hit-test 불안정) */
 export function startHtmlDragMouseTracking(
   clientX: number,
   clientY: number,
@@ -427,9 +389,7 @@ export function startHtmlDragMouseTracking(
       lastHtmlDragClientXY = xy;
       emit({ phase: 'move', x: xy.x, y: xy.y, payload });
     },
-    () => {
-      /* native HTML5 drag 중 mouseup 은 dragend 전에 올 수 있음 — dragend 에서 정리 */
-    },
+    () => { /* dragend 에서 정리 */ },
     { preventTouchScroll: false },
   );
 }
@@ -441,6 +401,7 @@ export function endHtmlDragMouseTracking(): void {
 
 export function markPaletteHtmlDragStart(): void {
   htmlPaletteDragActive = true;
+  htmlDropCommitted = false;
   lastHtmlDragClientXY = null;
 }
 

frontend/src/utils/pointerDrag.ts

@@ -44,6 +44,39 @@ export interface BindWindowDragOptions {
   useCapture?: boolean;
 }
 
+/**
+ * document capture 단계 pointer 추적 (스크롤 패널 내부 드래그 — WKWebView 대응)
+ */
+export function bindDocumentPointerDrag(
+  pointerId: number,
+  onMove: (xy: ClientXY) => void,
+  onEnd: (xy: ClientXY) => void,
+): () => void {
+  const cap: AddEventListenerOptions = { capture: true, passive: false };
+
+  const move = (ev: Event) => {
+    if (!(ev instanceof PointerEvent) || ev.pointerId !== pointerId) return;
+    if (ev.cancelable) ev.preventDefault();
+    onMove({ x: ev.clientX, y: ev.clientY });
+  };
+
+  const end = (ev: Event) => {
+    if (!(ev instanceof PointerEvent) || ev.pointerId !== pointerId) return;
+    if (ev.cancelable) ev.preventDefault();
+    onEnd({ x: ev.clientX, y: ev.clientY });
+  };
+
+  document.addEventListener('pointermove', move, cap);
+  document.addEventListener('pointerup', end, cap);
+  document.addEventListener('pointercancel', end, cap);
+
+  return () => {
+    document.removeEventListener('pointermove', move, cap);
+    document.removeEventListener('pointerup', end, cap);
+    document.removeEventListener('pointercancel', end, cap);
+  };
+}
+
 /**
  * 드래그 시작 후 window 에 move/end 리스너 등록.
  * pointer + mouse + touch 모두 수신 (구형 브라우저·iOS 대응).