npm - myrlin-workbook - Versions diffs - 0.9.31 → 0.9.32 - Mend

myrlin-workbook 0.9.31 → 0.9.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json +1 -1
package/src/web/public/app.js +136 -45
package/src/web/public/index.html +34 -0
package/src/web/public/manifest.webmanifest +14 -0
package/src/web/public/styles.css +26 -0
package/src/web/public/sw.js +3 -0
package/src/web/public/terminal.js +12 -9
package/src/web/public/vendor/drag-drop-touch.esm.min.js +1 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "myrlin-workbook",
-  "version": "0.9.31",
+  "version": "0.9.32",
   "description": "Browser-based project manager for Claude Code sessions - session discovery, multi-terminal, cost tracking, docs, and kanban board",
   "main": "src/index.js",
   "bin": {

package/src/web/public/app.js CHANGED Viewed

@@ -240,6 +240,7 @@ class CWMApp {
       logoutBtn: document.getElementById('logout-btn'),
       themeToggleBtn: document.getElementById('theme-toggle-btn'),
       themeDropdown: document.getElementById('theme-dropdown'),
+      vkbToggleBtn: document.getElementById('vkb-toggle-btn'),
       scaleDownBtn: document.getElementById('scale-down-btn'),
       scaleUpBtn: document.getElementById('scale-up-btn'),
@@ -559,6 +560,43 @@ class CWMApp {
       });
     }
+    // Virtual keyboard toggle. inputmode="none" is a no-op on devices without
+    // a soft keyboard, so we apply it unconditionally instead of trying to
+    // detect "is mobile" (which is unreliable across browsers).
+    this._vkbDisabled = localStorage.getItem('cwm_vkb_disabled') === '1';
+    this._applyVkbState();
+    if (this.els.vkbToggleBtn) {
+      this.els.vkbToggleBtn.addEventListener('click', () => {
+        this._vkbDisabled = !this._vkbDisabled;
+        localStorage.setItem('cwm_vkb_disabled', this._vkbDisabled ? '1' : '0');
+        this._applyVkbState();
+      });
+      // Watch for newly-created xterm helper textareas and apply state to them.
+      const obs = new MutationObserver((muts) => {
+        if (!this._vkbDisabled) return;
+        for (const m of muts) {
+          for (const n of m.addedNodes) {
+            if (n.nodeType !== 1) continue;
+            if (n.matches && n.matches('.xterm-helper-textarea')) {
+              n.setAttribute('inputmode', 'none');
+            } else if (n.querySelectorAll) {
+              n.querySelectorAll('.xterm-helper-textarea').forEach(t => t.setAttribute('inputmode', 'none'));
+            }
+          }
+        }
+      });
+      obs.observe(document.body, { childList: true, subtree: true });
+    }
+    // While any HTML5 drag is active, mark <body> so the mobile sidebar
+    // backdrop becomes pointer-events: none. Without this, on mobile the
+    // backdrop occludes terminal panes for elementFromPoint, so the
+    // DragDropTouch polyfill never fires dragover/drop on the pane behind it.
+    document.addEventListener('dragstart', () => document.body.classList.add('cwm-dragging'), true);
+    const clearDragging = () => document.body.classList.remove('cwm-dragging');
+    document.addEventListener('dragend', clearDragging, true);
+    document.addEventListener('drop', clearDragging, true);
     // Sidebar toggle (mobile)
     this.els.sidebarToggle.addEventListener('click', () => this.toggleSidebar());
@@ -3533,6 +3571,22 @@ class CWMApp {
     });
   }
+  _applyVkbState() {
+    const btn = this.els && this.els.vkbToggleBtn;
+    const active = !!this._vkbDisabled;
+    if (btn) {
+      btn.classList.toggle('active', active);
+      btn.setAttribute('aria-pressed', active ? 'true' : 'false');
+      btn.title = active
+        ? 'On-screen keyboard disabled (click to enable)'
+        : 'Disable on-screen keyboard (hardware keyboard only)';
+    }
+    document.querySelectorAll('.xterm-helper-textarea').forEach(t => {
+      if (active) t.setAttribute('inputmode', 'none');
+      else t.removeAttribute('inputmode');
+    });
+  }
   // Legacy alias for any remaining callers
   toggleTheme() {
     const current = document.documentElement.dataset.theme || 'mocha';
@@ -5037,7 +5091,7 @@ class CWMApp {
     panel._wsId = ws.id;
     panel.replaceChildren();
-    const container = document.createElement('div');
+    container = document.createElement('div');
     container.className = 'files-container';
     const sidebar = document.createElement('div');
@@ -5379,7 +5433,7 @@ class CWMApp {
       panel.textContent = '';
-      const container = document.createElement('div');
+      container = document.createElement('div');
       container.className = 'git-panel-container';
       const left = document.createElement('div');
@@ -7519,15 +7573,15 @@ class CWMApp {
     let startX = 0;
     let startWidth = 0;
-    const onMouseMove = (e) => {
+    const onMove = (clientX) => {
       if (!isResizing) return;
-      const dx = e.clientX - startX;
+      const dx = clientX - startX;
       const newWidth = Math.max(180, Math.min(600, startWidth + dx));
       sidebar.style.width = newWidth + 'px';
       sidebar.style.transition = 'none'; // disable transition during drag
     };
-    const onMouseUp = () => {
+    const onEnd = () => {
       if (!isResizing) return;
       isResizing = false;
       handle.classList.remove('active');
@@ -7547,24 +7601,32 @@ class CWMApp {
       });
       document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
+      document.removeEventListener('mouseup', onEnd);
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend', onEnd);
+      document.removeEventListener('touchcancel', onEnd);
     };
-    handle.addEventListener('mousedown', (e) => {
-      // Don't resize if sidebar is collapsed
-      if (sidebar.classList.contains('collapsed')) return;
+    const onMouseMove = (e) => onMove(e.clientX);
+    const onTouchMove = (e) => { e.preventDefault(); onMove(e.touches[0].clientX); };
-      e.preventDefault();
+    const startResize = (clientX) => {
+      if (sidebar.classList.contains('collapsed')) return;
       isResizing = true;
-      startX = e.clientX;
+      startX = clientX;
       startWidth = sidebar.getBoundingClientRect().width;
       handle.classList.add('active');
       document.body.style.cursor = 'col-resize';
       document.body.style.userSelect = 'none';
       document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-    });
+      document.addEventListener('mouseup', onEnd);
+      document.addEventListener('touchmove', onTouchMove, { passive: false });
+      document.addEventListener('touchend', onEnd);
+      document.addEventListener('touchcancel', onEnd);
+    };
+    handle.addEventListener('mousedown', (e) => { e.preventDefault(); startResize(e.clientX); });
+    handle.addEventListener('touchstart', (e) => { e.preventDefault(); startResize(e.touches[0].clientX); }, { passive: false });
   }
   initSidebarSectionResize() {
@@ -9938,9 +10000,11 @@ class CWMApp {
           pane.classList.remove('drag-over');
           console.log('[DnD] Drop on pane', slotIdx, 'types:', Array.from(e.dataTransfer.types));
-          // Terminal pane swap/reposition - drag a pane header onto another pane
+          // Terminal pane swap/reposition - drag a pane header onto another pane.
+          // Use truthy check: native DataTransfer.getData returns '' for missing
+          // keys, but the touch polyfill returns undefined — both must skip.
           const swapSource = e.dataTransfer.getData('cwm/terminal-swap');
-          if (swapSource !== '') {
+          if (swapSource) {
             const srcSlot = parseInt(swapSource, 10);
             if (srcSlot !== slotIdx) {
               this.swapTerminalPanes(srcSlot, slotIdx);
@@ -11418,9 +11482,12 @@ class CWMApp {
     grid.addEventListener('touchmove', (e) => {
       // Only intercept when terminal is the active view on mobile
       if (!document.body.classList.contains('terminal-active')) return;
-      // Allow the touch event for xterm's internal scroll handling,
-      // but stop it from propagating to the page/body scroll.
-      e.stopPropagation();
+      // Scope this to the xterm viewport only — otherwise we eat touchmoves on
+      // pane headers / resize handles and break things like the
+      // DragDropTouch polyfill (which listens on document in bubble phase).
+      // We don't stop propagation here anymore to allow index.html's hack
+      // preventing the polyfill from breaking xterm's native scroll on desktop touch.
+      // (The polyfill needs to be suppressed, index.html does it on document level).
     }, { passive: true });
   }
@@ -11429,7 +11496,8 @@ class CWMApp {
    * Only active on mobile. Scoped to terminal-grid to avoid sidebar conflicts.
    */
   initTerminalPaneSwipe() {
-    if (window.innerWidth > 768) return;
+    // Enable touch pane swipe on any touch-capable device, not just phones.
+    if (!('ontouchstart' in window) && navigator.maxTouchPoints === 0) return;
     const grid = this.els.terminalGrid;
     if (!grid) return;
@@ -11487,50 +11555,73 @@ class CWMApp {
   }
   _setupResizeDrag(handle, direction) {
-    handle.addEventListener('mousedown', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
+    const start = (clientX, clientY, isTouch) => {
       const grid = this.els.terminalGrid;
       const gridRect = grid.getBoundingClientRect();
-      // Create a full-screen overlay to capture mouse events during drag
-      const overlay = document.createElement('div');
-      overlay.style.cssText = `position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;cursor:${direction === 'col' ? 'col-resize' : 'row-resize'};`;
-      document.body.appendChild(overlay);
+      // Mouse drags use a full-screen overlay to keep the resize cursor and
+      // capture stray mouse events. Touch drags don't need it (no cursor;
+      // touch tracking persists outside the handle naturally).
+      let overlay = null;
+      if (!isTouch) {
+        overlay = document.createElement('div');
+        overlay.style.cssText = `position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;cursor:${direction === 'col' ? 'col-resize' : 'row-resize'};`;
+        document.body.appendChild(overlay);
+      }
       handle.classList.add('active');
-      const onMove = (e) => {
+      const move = (cx, cy) => {
         if (direction === 'col') {
-          const ratio = (e.clientX - gridRect.left) / gridRect.width;
+          const ratio = (cx - gridRect.left) / gridRect.width;
           const clamped = Math.max(0.15, Math.min(0.85, ratio));
           this._gridColSizes = [clamped, 1 - clamped];
         } else {
-          const ratio = (e.clientY - gridRect.top) / gridRect.height;
+          const ratio = (cy - gridRect.top) / gridRect.height;
           const clamped = Math.max(0.15, Math.min(0.85, ratio));
           this._gridRowSizes = [clamped, 1 - clamped];
         }
         this._applyGridSizes();
       };
-      const onUp = () => {
+      const onMouseMove = (e) => move(e.clientX, e.clientY);
+      const onTouchMove = (e) => {
+        e.preventDefault();
+        move(e.touches[0].clientX, e.touches[0].clientY);
+      };
+      // Capture phase, because the terminal-grid has a bubble-phase touchmove
+      // listener that calls stopPropagation() — would otherwise eat our event.
+      const touchOpts = { passive: false, capture: true };
+      const onEnd = () => {
         handle.classList.remove('active');
-        overlay.remove();
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-        // Refit all terminals after resize completes
-        // safeFit() handles both the fit and sending resize to the server
-        this.terminalPanes.forEach(tp => {
-          if (tp) tp.safeFit();
-        });
-        // Persist split ratios for this tab group
+        if (overlay) overlay.remove();
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onEnd);
+        document.removeEventListener('touchmove', onTouchMove, touchOpts);
+        document.removeEventListener('touchend', onEnd);
+        document.removeEventListener('touchcancel', onEnd);
+        this.terminalPanes.forEach(tp => { if (tp) tp.safeFit(); });
         this.saveTerminalLayout();
       };
-      document.addEventListener('mousemove', onMove);
-      document.addEventListener('mouseup', onUp);
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onEnd);
+      document.addEventListener('touchmove', onTouchMove, touchOpts);
+      document.addEventListener('touchend', onEnd);
+      document.addEventListener('touchcancel', onEnd);
+    };
+    handle.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      start(e.clientX, e.clientY, false);
     });
+    handle.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const t = e.touches[0];
+      start(t.clientX, t.clientY, true);
+    }, { passive: false });
   }
   /**
@@ -13232,7 +13323,7 @@ class CWMApp {
         e.preventDefault();
         hdr.classList.remove('tab-drag-over');
         const swapSource = e.dataTransfer.getData('cwm/terminal-swap');
-        if (swapSource !== '') {
+        if (swapSource) {
           const srcSlot = parseInt(swapSource, 10);
           const folderTabs = this._tabGroups.filter(g => g.folderId === folderId);
           if (folderTabs.length > 0 && folderTabs[0].id !== this._activeGroupId) {
@@ -13322,7 +13413,7 @@ class CWMApp {
         // Handle terminal pane drop - move terminal to this tab group
         const swapSource = e.dataTransfer.getData('cwm/terminal-swap');
-        if (swapSource !== '') {
+        if (swapSource) {
           const srcSlot = parseInt(swapSource, 10);
           const targetGroupId = tab.dataset.groupId;
           if (targetGroupId !== this._activeGroupId) {

package/src/web/public/index.html CHANGED Viewed

@@ -9,6 +9,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
   <link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png">
   <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+  <link rel="manifest" href="/manifest.webmanifest">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -182,6 +183,13 @@
             <button class="theme-option" data-theme="gruvbox-light"><span class="theme-swatch" style="background:#fbf1c7;border:1px solid #d5c4a1"></span>Gruvbox Light</button>
           </div>
         </div>
+        <button class="btn btn-ghost btn-icon btn-sm vkb-toggle-btn" id="vkb-toggle-btn" title="Disable on-screen keyboard (hardware keyboard only)" aria-pressed="false">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="1.5" y="4" width="13" height="8" rx="1.5"/>
+            <path d="M4 7h.01M6 7h.01M8 7h.01M10 7h.01M12 7h.01M5 9.5h6"/>
+            <line class="vkb-slash" x1="2.5" y1="13.5" x2="13.5" y2="2.5" stroke-width="1.6"/>
+          </svg>
+        </button>
         <button class="btn btn-ghost btn-icon btn-sm" id="pair-mobile-btn" title="Pair Mobile Device">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
             <rect x="4" y="1" width="8" height="14" rx="1.5"/>
@@ -1682,11 +1690,37 @@
   <script src="vendor/lucide.bundle.js"></script>
   <script src="vendor/material-icons.bundle.js"></script>
+  <!-- Block the DragDropTouch polyfill from observing touch events that
+       happen inside the xterm.js viewport. The polyfill always dispatches a
+       synthetic mousemove on every touchmove; xterm preventDefault's mousemove,
+       which makes the polyfill cancel the touchmove and kill native scrolling.
+       This script registers its document-bubble listeners *before* the polyfill
+       loads, so stopImmediatePropagation here suppresses the polyfill's
+       same-phase listener for the xterm case only. -->
+  <script>
+    (function () {
+      var inXterm = function (el) {
+        return el && el.closest && el.closest('.xterm-viewport, .xterm-screen');
+      };
+      var stop = function (e) { if (inXterm(e.target)) e.stopImmediatePropagation(); };
+      document.addEventListener('touchstart', stop, { passive: true });
+      document.addEventListener('touchmove', stop, { passive: true });
+      document.addEventListener('touchend', stop, { passive: true });
+      document.addEventListener('touchcancel', stop, { passive: true });
+    })();
+  </script>
+  <!-- Polyfills HTML5 drag-and-drop on touch devices (translates touch -> drag events) -->
+  <script type="module" src="vendor/drag-drop-touch.esm.min.js?autoload"></script>
   <script src="vendor/qrcode.min.js"></script>
   <script src="vendor/xterm/xterm.min.js"></script>
   <script src="vendor/xterm-addon-fit/xterm-addon-fit.min.js"></script>
   <script src="vendor/xterm-addon-web-links/xterm-addon-web-links.min.js"></script>
   <script src="terminal.js"></script>
   <script src="app.js"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(() => {}));
+    }
+  </script>
 </body>
 </html>

package/src/web/public/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "name": "myrlin's workbook",
+  "short_name": "Workbook",
+  "description": "Manage Claude Code sessions",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#1e1e2e",
+  "theme_color": "#1e1e2e",
+  "icons": [
+    { "src": "/logo.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/logo.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
+  ]
+}

package/src/web/public/styles.css CHANGED Viewed

@@ -1364,6 +1364,10 @@ textarea.input {
   color: var(--mauve) !important;
 }
+.vkb-toggle-btn .vkb-slash { display: none; }
+.vkb-toggle-btn.active { color: var(--mauve) !important; }
+.vkb-toggle-btn.active .vkb-slash { display: inline; }
 /* ─── Main Content ──────────────────────────────────────────── */
@@ -3228,6 +3232,12 @@ textarea.input {
   display: none;
 }
+/* During a drag, let elementFromPoint fall through to drop targets behind
+   the backdrop (otherwise the touch polyfill can't hit terminal panes). */
+body.cwm-dragging .sidebar-backdrop {
+  pointer-events: none;
+}
 /* ─── Workspace color picker in modal ───────────────────────── */
@@ -5142,6 +5152,9 @@ textarea.input {
 /* Terminal pane drag-to-reposition */
 .terminal-pane-header {
   cursor: grab;
+  /* Touch: let DragDropTouch polyfill do long-press-to-drag without the
+     browser claiming the gesture for scroll/zoom on the underlying terminal. */
+  touch-action: none;
 }
 .terminal-pane-empty .terminal-pane-header {
   cursor: default;
@@ -5260,6 +5273,13 @@ html.activity-indicators-disabled .terminal-pane-activity {
   z-index: 10;
   background: transparent;
   transition: background 0.15s ease;
+  touch-action: none;
+}
+/* Wider invisible hit area for touch — visual stays at the handle's own width. */
+.terminal-resize-handle::before {
+  content: "";
+  position: absolute;
+  inset: -8px 0;
 }
 .terminal-resize-col {
   top: 0;
@@ -5267,12 +5287,14 @@ html.activity-indicators-disabled .terminal-pane-activity {
   height: 100%;
   cursor: col-resize;
 }
+.terminal-resize-col::before { inset: 0 -8px; }
 .terminal-resize-row {
   left: 0;
   width: 100%;
   height: 6px;
   cursor: row-resize;
 }
+.terminal-resize-row::before { inset: -8px 0; }
 .terminal-resize-handle:hover {
   background: rgba(203, 166, 247, 0.4);
 }
@@ -5438,6 +5460,10 @@ html.activity-indicators-disabled .terminal-pane-activity {
   white-space: nowrap;
   transition: all var(--transition-fast);
   position: relative;
+  /* Touch: let DragDropTouch polyfill handle long-press-to-drag without the
+     browser claiming the gesture for the scrollable tab strip.
+  */
+  touch-action: none;
 }
 .terminal-group-tab:hover {

package/src/web/public/sw.js ADDED Viewed

@@ -0,0 +1,3 @@
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()));
+self.addEventListener('fetch', () => {});

package/src/web/public/terminal.js CHANGED Viewed

@@ -720,10 +720,9 @@ class TerminalPane {
    * Type mode: textarea is writable, keyboard appears for input
    */
   _isMobile() {
-    // Use width-based check matching the CSS media query, NOT touch detection.
-    // Touch-enabled desktops (Windows laptops) have 'ontouchstart' but should
-    // NOT get mobile treatment - they have keyboards and wide screens.
-    return window.innerWidth <= 768;
+    // Enable touch scroll/type modes for any device with touch capability,
+    // including tablets (not just narrow screens).
+    return ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
   }
   /**
@@ -874,6 +873,9 @@ class TerminalPane {
       }
       if (isScrolling) {
+        // Prevent default browser scroll (e.g. pull-to-refresh on Chrome mobile/tablet)
+        if (e.cancelable) e.preventDefault();
         // Scroll via xterm.js API so ydisp stays in sync (prevents snap-back on output)
         scrollByPixels(deltaY);
         // Track velocity for momentum (smoothed exponential average)
@@ -908,11 +910,12 @@ class TerminalPane {
     };
     // Use CAPTURE phase to intercept before xterm.js gets the events.
-    // Non-passive so we can prevent xterm from seeing the events in scroll mode.
-    container.addEventListener('touchstart', onTouchStart, { capture: true, passive: true });
-    container.addEventListener('touchmove', onTouchMove, { capture: true, passive: true });
-    container.addEventListener('touchend', onTouchEnd, { capture: true, passive: true });
-    container.addEventListener('touchcancel', onTouchEnd, { capture: true, passive: true });
+    // Non-passive so we can prevent xterm from seeing the events in scroll mode
+    // AND prevent browser pull-to-refresh (overscroll) on mobile/tablet.
+    container.addEventListener('touchstart', onTouchStart, { capture: true, passive: false });
+    container.addEventListener('touchmove', onTouchMove, { capture: true, passive: false });
+    container.addEventListener('touchend', onTouchEnd, { capture: true, passive: false });
+    container.addEventListener('touchcancel', onTouchEnd, { capture: true, passive: false });
     // Store cleanup function for dispose()
     this._touchScrollCleanup = () => {

package/src/web/public/vendor/drag-drop-touch.esm.min.js ADDED Viewed

@@ -0,0 +1 @@

+ function a(s,t=!1){let e=s.touches[0];return{x:t?e.pageX:e.clientX,y:t?e.pageY:e.clientY}}function _(s,t,e){for(let o=0;o<e.length;o++){let n=e[o];s[n]=t[n]}}function f(s,t,e){let o=["altKey","ctrlKey","metaKey","shiftKey"],n=["pageX","pageY","clientX","clientY","screenX","screenY","offsetX","offsetY"],i=new Event(s,{bubbles:!0,cancelable:!0}),h=t.touches[0];return i.button=0,i.which=i.buttons=1,_(i,t,o),_(i,h,n),E(i,e),i}function E(s,t){let e=t.getBoundingClientRect();s.offsetX===void 0&&(s.offsetX=s.clientX-e.x,s.offsetY=s.clientY-e.y),s.layerX===void 0&&(s.layerX=s.pageX-e.left,s.layerY=s.pageY-e.top)}function c(s,t){if(D(t),s instanceof HTMLCanvasElement){let e=t;e.width=s.width,e.height=s.height,e.getContext("2d").drawImage(s,0,0)}y(s,t),t.style.pointerEvents="none";for(let e=0;e<s.children.length;e++)c(s.children[e],t.children[e])}function y(s,t){let e=getComputedStyle(s);for(let o of e)o.includes("transition")||(t.style[o]=e[o]);Object.keys(t.dataset).forEach(o=>delete t.dataset[o])}function D(s){["id","class","style","draggable"].forEach(function(t){s.removeAttribute(t)})}var r=class{_dropEffect;_effectAllowed;_data;_dragDropTouch;constructor(t){this._dropEffect="move",this._effectAllowed="all",this._data={},this._dragDropTouch=t}get dropEffect(){return this._dropEffect}set dropEffect(t){this._dropEffect=t}get effectAllowed(){return this._effectAllowed}set effectAllowed(t){this._effectAllowed=t}get types(){return Object.keys(this._data)}clearData(t){t!==null?delete this._data[t.toLowerCase()]:this._data={}}getData(t){let e=t.toLowerCase(),o=this._data[e];return e==="text"&&o==null&&(o=this._data["text/plain"]),o}setData(t,e){this._data[t.toLowerCase()]=e}setDragImage(t,e,o){this._dragDropTouch.setDragImage(t,e,o)}};var{round:m}=Math,b={allowDragScroll:!0,contextMenuDelayMS:900,dragImageOpacity:.5,dragScrollPercentage:10,dragScrollSpeed:10,dragThresholdPixels:5,forceListen:!1,isPressHoldMode:!1,pressHoldDelayMS:400,pressHoldMargin:25,pressHoldThresholdPixels:0},d=class{_dragRoot;_dropRoot;_dragSource;_lastTouch;_lastTarget;_ptDown;_isDragEnabled;_isDropZone;_dataTransfer;_img;_imgCustom;_imgOffset;_pressHoldIntervalId;configuration;constructor(t=document,e=document,o){for(this.configuration={...b,...o||{}},this._dragRoot=t,this._dropRoot=e;!this._dropRoot.elementFromPoint&&this._dropRoot.parentNode;)this._dropRoot=this._dropRoot.parentNode;this._dragSource=null,this._lastTouch=null,this._lastTarget=null,this._ptDown=null,this._isDragEnabled=!1,this._isDropZone=!1,this._dataTransfer=new r(this),this._img=null,this._imgCustom=null,this._imgOffset={x:0,y:0},this.listen()}listen(){if(navigator.maxTouchPoints===0&&!this.configuration.forceListen)return;let t={passive:!1,capture:!1};this._dragRoot.addEventListener("touchstart",this._touchstart.bind(this),t),this._dragRoot.addEventListener("touchmove",this._touchmove.bind(this),t),this._dragRoot.addEventListener("touchend",this._touchend.bind(this)),this._dragRoot.addEventListener("touchcancel",this._touchend.bind(this))}setDragImage(t,e,o){this._imgCustom=t,this._imgOffset={x:e,y:o}}_touchstart(t){if(this._shouldHandle(t)){this._reset();let e=this._closestDraggable(t.target);e&&t.target&&!this._dispatchEvent(t,"mousemove",t.target)&&!this._dispatchEvent(t,"mousedown",t.target)&&(this._dragSource=e,this._ptDown=a(t),this._lastTouch=t,setTimeout(()=>{this._dragSource===e&&this._img===null&&this._dispatchEvent(t,"contextmenu",e)&&this._reset()},this.configuration.contextMenuDelayMS),this.configuration.isPressHoldMode?this._pressHoldIntervalId=setTimeout(()=>{this._isDragEnabled=!0,this._touchmove(t)},this.configuration.pressHoldDelayMS):t.isTrusted||t.target!==this._lastTarget&&(this._lastTarget=t.target))}}_touchmove(t){if(this._shouldCancelPressHoldMove(t)){this._reset();return}if(this._shouldHandleMove(t)||this._shouldHandlePressHoldMove(t)){let e=this._getTarget(t);if(this._dispatchEvent(t,"mousemove",e)){this._lastTouch=t,t.preventDefault();return}if(this._dragSource&&!this._img&&this._shouldStartDragging(t)){if(this._dispatchEvent(this._lastTouch,"dragstart",this._dragSource)){this._dragSource=null;return}this._createImage(t),this._dispatchEvent(t,"dragenter",e)}if(this._img&&this._dragSource&&(this._lastTouch=t,t.preventDefault(),this._dispatchEvent(t,"drag",this._dragSource),e!==this._lastTarget&&(this._lastTarget&&this._dispatchEvent(this._lastTouch,"dragleave",this._lastTarget),this._dispatchEvent(t,"dragenter",e),this._lastTarget=e),this._moveImage(t),this._isDropZone=this._dispatchEvent(t,"dragover",e),this.configuration.allowDragScroll)){let o=this._getHotRegionDelta(t);globalThis.scrollBy(o.x,o.y)}}}_touchend(t){if(!(this._lastTouch&&t.target&&this._lastTarget)){this._reset();return}if(this._shouldHandle(t)){if(this._dispatchEvent(this._lastTouch,"mouseup",t.target)){t.preventDefault();return}this._img||(this._dragSource=null,this._dispatchEvent(this._lastTouch,"click",t.target)),this._destroyImage(),this._dragSource&&(t.type.indexOf("cancel")<0&&this._isDropZone&&this._dispatchEvent(this._lastTouch,"drop",this._lastTarget),this._dispatchEvent(this._lastTouch,"dragend",this._dragSource),this._reset())}}_shouldHandle(t){return t&&!t.defaultPrevented&&t.touches&&t.touches.length<2}_shouldHandleMove(t){return!this.configuration.isPressHoldMode&&this._shouldHandle(t)}_shouldHandlePressHoldMove(t){return this.configuration.isPressHoldMode&&this._isDragEnabled&&t&&t.touches&&t.touches.length}_shouldCancelPressHoldMove(t){return this.configuration.isPressHoldMode&&!this._isDragEnabled&&this._getDelta(t)>this.configuration.pressHoldMargin}_shouldStartDragging(t){let e=this._getDelta(t);return this.configuration.isPressHoldMode?e>=this.configuration.pressHoldThresholdPixels:e>this.configuration.dragThresholdPixels}_reset(){this._destroyImage(),this._dragSource=null,this._lastTouch=null,this._lastTarget=null,this._ptDown=null,this._isDragEnabled=!1,this._isDropZone=!1,this._dataTransfer=new r(this),clearTimeout(this._pressHoldIntervalId)}_getDelta(t){if(!this._ptDown)return 0;let{x:e,y:o}=this._ptDown,n=a(t);return((n.x-e)**2+(n.y-o)**2)**.5}_getHotRegionDelta(t){let{clientX:e,clientY:o}=t.touches[0],{innerWidth:n,innerHeight:i}=globalThis,{dragScrollPercentage:h,dragScrollSpeed:l}=this.configuration,u=h/100,g=1-u,v=e<n*u?-l:e>n*g?+l:0,T=o<i*u?-l:o>i*g?+l:0;return{x:v,y:T}}_getTarget(t){let e=a(t),o=this._dropRoot.elementFromPoint(e.x,e.y);for(;o&&getComputedStyle(o).pointerEvents=="none";)o=o.parentElement;return o}_createImage(t){this._img&&this._destroyImage();let e=this._imgCustom||this._dragSource;if(this._img=e.cloneNode(!0),c(e,this._img),this._img.style.top=this._img.style.left="-9999px",!this._imgCustom){let o=e.getBoundingClientRect(),n=a(t);this._imgOffset={x:n.x-o.left,y:n.y-o.top},this._img.style.opacity=`${this.configuration.dragImageOpacity}`}this._moveImage(t),document.body.appendChild(this._img)}_destroyImage(){this._img&&this._img.parentElement&&this._img.parentElement.removeChild(this._img),this._img=null,this._imgCustom=null}_moveImage(t){requestAnimationFrame(()=>{if(this._img){let e=a(t,!0),o=this._img.style;o.position="absolute",o.pointerEvents="none",o.zIndex="999999",o.left=`${m(e.x-this._imgOffset.x)}px`,o.top=`${m(e.y-this._imgOffset.y)}px`}})}_dispatchEvent(t,e,o){if(!(t&&o))return!1;let n=f(e,t,o);return n.dataTransfer=this._dataTransfer,o.dispatchEvent(n),n.defaultPrevented}_closestDraggable(t){for(let e=t;e!==null;e=e.parentElement)if(e.draggable)return e;return null}};function p(s=document,t=document,e){new d(s,t,e)}import.meta.url.includes("?autoload")?p(document,document,{forceListen:!0}):globalThis.DragDropTouch={enable:function(s=document,t=document,e){p(s,t,e)}};export{p as enableDragDropTouch};