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

myrlin-workbook 0.9.30 → 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 +307 -51
package/src/web/public/index.html +52 -0
package/src/web/public/manifest.webmanifest +14 -0
package/src/web/public/styles.css +54 -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.30",
+  "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

@@ -142,6 +142,7 @@ class CWMApp {
     // ─── Terminal panes ──────────────────────────────────────────
     this.terminalPanes = new Array(CWMApp.MAX_PANES).fill(null);
     this._activeTerminalSlot = null;
+    this._paneRefreshTimers = {};
     // Cache of TerminalPane instances per group to avoid reconnection on tab switch.
     // Key: groupId, Value: { panes: [TerminalPane|null x MAX_PANES], domFragments: [DocumentFragment|null x MAX_PANES] }
     this._groupPaneCache = {};
@@ -239,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'),
@@ -558,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());
@@ -3532,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';
@@ -5017,8 +5072,8 @@ class CWMApp {
    * Builds a two-pane layout: file tree sidebar on left, editor pane on right.
    * Skips re-initialization if already rendered for the same workspace.
    */
-  async renderTasksFilesPanel() {
-    const panel = document.getElementById('tasks-files-panel');
+  async renderTasksFilesPanel(container = null) {
+    const panel = container || document.getElementById('tasks-files-panel');
     if (!panel) return;
     const ws = this.state.activeWorkspace;
@@ -5036,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');
@@ -5353,8 +5408,8 @@ class CWMApp {
    * and commit log; right pane shows diff for the selected file.
    * Includes 10-second auto-refresh when the tab is active.
    */
-  async renderTasksGitPanel() {
-    const panel = document.getElementById('tasks-git-panel');
+  async renderTasksGitPanel(container = null) {
+    const panel = container || document.getElementById('tasks-git-panel');
     if (!panel) return;
     const ws = this.state.activeWorkspace;
@@ -5378,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');
@@ -5706,7 +5761,7 @@ class CWMApp {
   }
   /** Fetch tasks and render in the active layout */
-  async renderTasksView() {
+  async renderTasksView(container = null) {
     // Initialize layout from localStorage (default: board)
     if (!this._tasksLayout) {
       this._tasksLayout = localStorage.getItem('cwm_tasksLayout') || 'board';
@@ -7518,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');
@@ -7546,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() {
@@ -9937,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);
@@ -10150,7 +10215,7 @@ class CWMApp {
         // Right-click context menu on terminal pane
         pane.addEventListener('contextmenu', (e) => {
           const tp = this.terminalPanes[slotIdx];
-          if (!tp) return; // empty pane - let default menu show
+          if (!tp) { e.preventDefault(); e.stopPropagation(); this._showEmptyPaneContextMenu(slotIdx, e.clientX, e.clientY); return; }
           e.preventDefault();
           e.stopPropagation();
           this.showTerminalContextMenu(slotIdx, e.clientX, e.clientY);
@@ -10305,6 +10370,128 @@ class CWMApp {
     this._refreshPanePin(slotIdx);
   }
+  /**
+   * Replace the terminal in a pane with a structured view (tasks, doc, etc.).
+   * The terminal is hidden but not disposed; restoreTerminalInPane() brings it back.
+   * @param {number} slotIdx - The pane slot index
+   * @param {string} viewType - One of: 'tasks-git', 'tasks-td', 'tasks-worktree', 'tasks-files', 'doc'
+   * @param {Object} [viewData={}] - Optional view-specific data (e.g. { docId } for doc views)
+   */
+  async openViewInPane(slotIdx, viewType, viewData = {}) {
+    const paneEl = document.getElementById(`term-pane-${slotIdx}`);
+    if (!paneEl) return;
+    const termContainer = document.getElementById(`term-container-${slotIdx}`);
+    const viewContainer = document.getElementById(`pane-view-${slotIdx}`);
+    if (!termContainer || !viewContainer) return;
+    termContainer.hidden = true;
+    viewContainer.hidden = false;
+    viewContainer.replaceChildren();
+    const labels = {
+      'tasks-git': 'Git',
+      'tasks-td': 'Tasks',
+      'tasks-worktree': 'Worktree',
+      'tasks-files': 'Files',
+      'doc': 'Doc'
+    };
+    const badge = paneEl.querySelector('.pane-view-badge');
+    const backBtn = paneEl.querySelector('.pane-view-back');
+    if (badge) { badge.textContent = labels[viewType] || viewType; badge.hidden = false; }
+    if (backBtn) backBtn.hidden = false;
+    paneEl.dataset.viewType = viewType;
+    paneEl.dataset.viewData = JSON.stringify(viewData);
+    await this._renderPaneView(slotIdx, viewType, viewData, viewContainer);
+    this.saveTerminalLayout();
+  }
+  /**
+   * Restore a pane from a structured view back to its terminal.
+   * Clears the view container, stops any refresh timers, and refits the terminal.
+   * @param {number} slotIdx - The pane slot index
+   */
+  restoreTerminalInPane(slotIdx) {
+    const paneEl = document.getElementById(`term-pane-${slotIdx}`);
+    if (!paneEl) return;
+    const termContainer = document.getElementById(`term-container-${slotIdx}`);
+    const viewContainer = document.getElementById(`pane-view-${slotIdx}`);
+    if (viewContainer) { viewContainer.hidden = true; viewContainer.replaceChildren(); }
+    if (termContainer) termContainer.hidden = false;
+    const badge = paneEl.querySelector('.pane-view-badge');
+    const backBtn = paneEl.querySelector('.pane-view-back');
+    if (badge) badge.hidden = true;
+    if (backBtn) backBtn.hidden = true;
+    delete paneEl.dataset.viewType;
+    delete paneEl.dataset.viewData;
+    if (this._paneRefreshTimers[slotIdx]) {
+      clearInterval(this._paneRefreshTimers[slotIdx]);
+      delete this._paneRefreshTimers[slotIdx];
+    }
+    const tp = this.terminalPanes[slotIdx];
+    if (tp && tp.safeFit) tp.safeFit();
+    this.saveTerminalLayout();
+  }
+  /**
+   * Render the appropriate view into the pane view container.
+   * Clears any existing refresh timer for this slot before rendering.
+   * Git panels auto-refresh every 10 seconds.
+   * @param {number} slotIdx - The pane slot index (used for refresh timer key)
+   * @param {string} viewType - The view type identifier
+   * @param {Object} viewData - View-specific data
+   * @param {HTMLElement} container - The container element to render into
+   */
+  async _renderPaneView(slotIdx, viewType, viewData, container) {
+    if (this._paneRefreshTimers[slotIdx]) {
+      clearInterval(this._paneRefreshTimers[slotIdx]);
+      delete this._paneRefreshTimers[slotIdx];
+    }
+    switch (viewType) {
+      case 'tasks-git':
+        await this.renderTasksGitPanel(container);
+        this._paneRefreshTimers[slotIdx] = setInterval(() => this.renderTasksGitPanel(container), 10000);
+        break;
+      case 'tasks-td':
+        await this.renderTasksTdPanel(container);
+        break;
+      case 'tasks-worktree':
+        await this.renderTasksView(container);
+        break;
+      case 'tasks-files':
+        await this.renderTasksFilesPanel(container);
+        break;
+      case 'doc':
+        await this._renderDocInPane(container, viewData);
+        break;
+    }
+  }
+  /**
+   * Render a workspace docs textarea into the given pane container.
+   * Saves content on blur via the workspace docs API.
+   * @param {HTMLElement} container - The container element to render into
+   * @param {Object} viewData - Optional view data (currently unused for doc type)
+   */
+  async _renderDocInPane(container, viewData) {
+    const ws = this.state.activeWorkspace;
+    if (!ws) return;
+    const docs = await this.api('GET', `/api/workspaces/${ws.id}/docs`);
+    const textarea = document.createElement('textarea');
+    textarea.style.cssText = 'width:100%;height:100%;resize:none;background:var(--base);color:var(--text);border:none;padding:12px;font-family:var(--mono);flex:1;min-height:0;';
+    textarea.value = docs.raw || '';
+    textarea.addEventListener('blur', async () => {
+      await this.api('POST', `/api/workspaces/${ws.id}/docs`, { content: textarea.value });
+    });
+    container.appendChild(textarea);
+  }
   /**
    * Update the activity indicator on a terminal pane header.
    * Called when 'terminal-activity' events fire from TerminalPane.
@@ -10368,6 +10555,22 @@ class CWMApp {
     });
   }
+  /**
+   * Context menu shown when right-clicking an empty (no terminal) pane slot.
+   * Offers quick access to all pane view types.
+   */
+  _showEmptyPaneContextMenu(slotIdx, x, y) {
+    const items = [
+      { label: 'Worktree Tasks', action: () => this.openViewInPane(slotIdx, 'tasks-worktree') },
+      { label: 'td Issues', action: () => this.openViewInPane(slotIdx, 'tasks-td') },
+      { label: 'Git Status', action: () => this.openViewInPane(slotIdx, 'tasks-git') },
+      { label: 'Files', action: () => this.openViewInPane(slotIdx, 'tasks-files') },
+      { type: 'sep' },
+      { label: 'Workspace Doc', action: () => this.openViewInPane(slotIdx, 'doc') },
+    ];
+    this._renderContextItems('Open View', items, x, y);
+  }
   showTerminalContextMenu(slotIdx, x, y) {
     const tp = this.terminalPanes[slotIdx];
     if (!tp) return;
@@ -10550,10 +10753,28 @@ class CWMApp {
       },
     });
+    // ── Switch to view ────────────────────────────────────────
+    items.push({ type: 'sep' });
+    items.push({
+      label: 'Switch to view',
+      submenu: [
+        { label: 'Worktree Tasks', action: () => this.openViewInPane(slotIdx, 'tasks-worktree') },
+        { label: 'td Issues', action: () => this.openViewInPane(slotIdx, 'tasks-td') },
+        { label: 'Git Status', action: () => this.openViewInPane(slotIdx, 'tasks-git') },
+        { label: 'Files', action: () => this.openViewInPane(slotIdx, 'tasks-files') },
+        { label: 'Workspace Doc', action: () => this.openViewInPane(slotIdx, 'doc') },
+      ],
+    });
     this._renderContextItems(tp.sessionName || 'Terminal', items, x, y);
   }
   closeTerminalPane(slotIdx) {
+    if (this._paneRefreshTimers[slotIdx]) {
+      clearInterval(this._paneRefreshTimers[slotIdx]);
+      delete this._paneRefreshTimers[slotIdx];
+    }
     const tp = this.terminalPanes[slotIdx];
     const sessionName = tp ? tp.sessionName : '';
@@ -11261,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 });
   }
@@ -11272,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;
@@ -11330,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 });
   }
   /**
@@ -12934,6 +13182,9 @@ class CWMApp {
       group.panes.forEach(p => {
         if (p.sessionId && !this.terminalPanes[p.slot]) {
           this.openTerminalInPane(p.slot, p.sessionId, p.sessionName || 'Terminal', p.spawnOpts || {});
+          if (p.viewType) {
+            setTimeout(() => this.openViewInPane(p.slot, p.viewType, p.viewData || {}), 100);
+          }
         }
       });
     }
@@ -13072,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) {
@@ -13162,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) {
@@ -13396,11 +13647,16 @@ class CWMApp {
       const tp = this.terminalPanes[i];
       // Save live TerminalPanes for layout restore.
       if (tp && tp.sessionId) {
+        const paneEl = document.getElementById('term-pane-' + i);
+        const viewType = paneEl?.dataset?.viewType || null;
+        const viewData = viewType ? JSON.parse(paneEl?.dataset?.viewData || '{}') : {};
         group.panes.push({
           slot: i,
           sessionId: tp.sessionId,
           sessionName: tp.sessionName,
           spawnOpts: tp.spawnOpts || {},
+          viewType,
+          viewData,
         });
       }
     }

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"/>
@@ -562,8 +570,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-0"></div>
+            <div class="pane-view-container" id="pane-view-0" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -609,8 +620,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-1"></div>
+            <div class="pane-view-container" id="pane-view-1" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -656,8 +670,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-2"></div>
+            <div class="pane-view-container" id="pane-view-2" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -703,8 +720,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-3"></div>
+            <div class="pane-view-container" id="pane-view-3" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -750,8 +770,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-4"></div>
+            <div class="pane-view-container" id="pane-view-4" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -797,8 +820,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-5"></div>
+            <div class="pane-view-container" id="pane-view-5" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -1664,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 ───────────────────────── */
@@ -5111,9 +5121,40 @@ textarea.input {
   background: rgba(203, 166, 247, 0.05);
 }
+/* ─── Pane View Container, Badge, Back Button ──────────── */
+.pane-view-container {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  background: var(--base);
+}
+.pane-view-badge {
+  font-size: 11px;
+  padding: 2px 6px;
+  background: var(--surface1);
+  color: var(--subtext0);
+  border-radius: 4px;
+  font-weight: 600;
+  margin-right: 4px;
+}
+.pane-view-back {
+  opacity: 0.6;
+}
+.pane-view-back:hover {
+  opacity: 1;
+}
 /* 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;
@@ -5232,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;
@@ -5239,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);
 }
@@ -5410,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};