devglide 0.1.1

package/src/apps/workflow/public/editor/drag-manager.js

@@ -0,0 +1,326 @@
+// ── Workflow Editor — Drag & Drop Manager ──────────────────────────────
+// Handles palette drops, node moves, and port-to-port edge creation
+// using the Pointer Events API with setPointerCapture.
+
+import { store } from '../state/store.js';
+import { WorkflowModel } from '../models/workflow-model.js';
+import { NODE_TYPES, resolveOutputPorts } from '../models/node-types.js';
+
+const GRID_SIZE = 20;
+
+let _canvas = null;       // Canvas module reference
+let _nodeContainer = null; // World element (nodes)
+let _svgLayer = null;      // SVG world group (edges)
+let _snapEnabled = true;
+
+// Active drag state
+let _drag = null; // { type: 'node'|'palette'|'edge', ... }
+
+// ── Snap helper ─────────────────────────────────────────────────────────
+
+function snap(x, y) {
+  if (!_snapEnabled) return { x, y };
+  return {
+    x: Math.round(x / GRID_SIZE) * GRID_SIZE,
+    y: Math.round(y / GRID_SIZE) * GRID_SIZE,
+  };
+}
+
+// ── Palette drag ────────────────────────────────────────────────────────
+
+function startPaletteDrag(e, nodeType) {
+  const typeDef = NODE_TYPES[nodeType];
+  if (!typeDef) return;
+
+  // Create ghost element
+  const ghost = document.createElement('div');
+  ghost.className = 'wfb-drag-ghost';
+  ghost.textContent = `${typeDef.icon} ${typeDef.label}`;
+  ghost.style.cssText = `
+    position: fixed;
+    left: ${e.clientX - 60}px;
+    top: ${e.clientY - 20}px;
+    width: 120px;
+    padding: var(--df-space-2) var(--df-space-3);
+    background: var(--df-color-bg-surface);
+    border: 1px solid ${typeDef.color};
+    border-left: 4px solid ${typeDef.color};
+    font-family: var(--df-font-mono);
+    font-size: var(--df-font-size-xs);
+    color: var(--df-color-text-primary);
+    opacity: 0.85;
+    pointer-events: none;
+    z-index: 9999;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+  document.body.appendChild(ghost);
+
+  _drag = { type: 'palette', nodeType, ghost, pointerId: e.pointerId };
+}
+
+function movePaletteDrag(e) {
+  if (_drag?.ghost) {
+    _drag.ghost.style.left = `${e.clientX - 60}px`;
+    _drag.ghost.style.top = `${e.clientY - 20}px`;
+  }
+}
+
+function endPaletteDrag(e) {
+  if (!_drag || _drag.type !== 'palette') return;
+
+  // Remove ghost
+  _drag.ghost.remove();
+
+  // Check if dropped over canvas
+  if (_canvas) {
+    const root = _canvas.getRootElement?.();
+    if (root) {
+      const rect = root.getBoundingClientRect();
+      if (e.clientX >= rect.left && e.clientX <= rect.right &&
+          e.clientY >= rect.top && e.clientY <= rect.bottom) {
+        const worldPos = _canvas.screenToWorld(e.clientX, e.clientY);
+        const snapped = snap(worldPos.x, worldPos.y);
+        const typeDef = NODE_TYPES[_drag.nodeType];
+        WorkflowModel.addNode(_drag.nodeType, typeDef?.label ?? _drag.nodeType, snapped);
+      }
+    }
+  }
+
+  _drag = null;
+}
+
+// ── Node move ───────────────────────────────────────────────────────────
+
+function startNodeMove(e, nodeId, nodeEl) {
+  const wf = store.get('workflow');
+  const node = wf?.nodes.find(n => n.id === nodeId);
+  if (!node) return;
+
+  const zoom = store.get('zoom');
+  const selectedIds = store.get('selectedNodeIds');
+
+  // If this node is not selected, select only it (unless shift is held)
+  if (!selectedIds.has(nodeId) && !e.shiftKey) {
+    store.set('selectedNodeIds', new Set([nodeId]));
+  } else if (!selectedIds.has(nodeId) && e.shiftKey) {
+    selectedIds.add(nodeId);
+    store.set('selectedNodeIds', new Set(selectedIds));
+  }
+
+  // Capture start positions of all selected nodes
+  const movingIds = store.get('selectedNodeIds');
+  const startPositions = new Map();
+  for (const id of movingIds) {
+    const n = wf.nodes.find(nd => nd.id === id);
+    if (n) startPositions.set(id, { x: n.position.x, y: n.position.y });
+  }
+
+  _drag = {
+    type: 'node',
+    nodeId,
+    startX: e.clientX,
+    startY: e.clientY,
+    startPositions,
+    zoom,
+    pointerId: e.pointerId,
+    moved: false,
+  };
+
+  nodeEl.style.cursor = 'grabbing';
+  nodeEl.setPointerCapture(e.pointerId);
+}
+
+function moveNodeMove(e) {
+  if (!_drag || _drag.type !== 'node') return;
+  _drag.moved = true;
+
+  const dx = (e.clientX - _drag.startX) / _drag.zoom;
+  const dy = (e.clientY - _drag.startY) / _drag.zoom;
+
+  for (const [id, startPos] of _drag.startPositions) {
+    const snapped = snap(startPos.x + dx, startPos.y + dy);
+    WorkflowModel.moveNode(id, snapped.x, snapped.y);
+  }
+}
+
+function endNodeMove(e) {
+  if (!_drag || _drag.type !== 'node') return;
+  const nodeEl = _nodeContainer?.querySelector(`[data-node-id="${_drag.nodeId}"]`);
+  if (nodeEl) {
+    nodeEl.style.cursor = 'grab';
+    nodeEl.releasePointerCapture(_drag.pointerId);
+  }
+  _drag = null;
+}
+
+// ── Edge creation ───────────────────────────────────────────────────────
+
+function startEdgeDrag(e, nodeId, portId, portType) {
+  if (portType !== 'out') return; // Only drag from output ports
+
+  const wf = store.get('workflow');
+  const node = wf?.nodes.find(n => n.id === nodeId);
+  if (!node) return;
+
+  // Import EdgeRenderer dynamically to avoid circular deps
+  import('./edge-renderer.js').then(({ EdgeRenderer }) => {
+    const tempPath = EdgeRenderer.createTempEdge();
+    _svgLayer?.appendChild(tempPath);
+
+    const outPorts = resolveOutputPorts(node);
+    let portIdx = outPorts.findIndex(p => p.id === portId);
+    if (portIdx === -1) portIdx = 0;
+
+    const NODE_HEIGHT = 80;
+    const spacing = outPorts.length <= 1
+      ? NODE_HEIGHT / 2
+      : NODE_HEIGHT / (outPorts.length + 1);
+    const startX = node.position.x + 220; // NODE_WIDTH
+    const startY = outPorts.length <= 1
+      ? node.position.y + NODE_HEIGHT / 2
+      : node.position.y + spacing * (portIdx + 1);
+
+    _drag = {
+      type: 'edge',
+      sourceNodeId: nodeId,
+      sourcePort: portId,
+      tempPath,
+      startX,
+      startY,
+      pointerId: e.pointerId,
+      EdgeRenderer,
+    };
+
+    EdgeRenderer.updateTempEdge(tempPath, startX, startY, startX, startY);
+  });
+}
+
+function moveEdgeDrag(e) {
+  if (!_drag || _drag.type !== 'edge') return;
+  const worldPos = _canvas?.screenToWorld(e.clientX, e.clientY);
+  if (worldPos && _drag.EdgeRenderer) {
+    _drag.EdgeRenderer.updateTempEdge(_drag.tempPath, _drag.startX, _drag.startY, worldPos.x, worldPos.y);
+  }
+}
+
+function endEdgeDrag(e) {
+  if (!_drag || _drag.type !== 'edge') return;
+
+  // Remove temp edge
+  if (_drag.EdgeRenderer) {
+    _drag.EdgeRenderer.removeTempEdge(_drag.tempPath);
+  }
+
+  // Check if we released over an input port
+  const targetEl = document.elementFromPoint(e.clientX, e.clientY);
+  if (targetEl?.classList?.contains('wfb-port-in') ||
+      (targetEl?.dataset?.portType === 'in')) {
+    const targetNodeId = targetEl.dataset.nodeId;
+    if (targetNodeId && targetNodeId !== _drag.sourceNodeId) {
+      WorkflowModel.addEdge(_drag.sourceNodeId, targetNodeId, _drag.sourcePort);
+    }
+  }
+
+  _drag = null;
+}
+
+// ── Unified event handlers ──────────────────────────────────────────────
+
+function onPointerDown(e) {
+  // Check if clicking a port
+  const portEl = e.target.closest?.('.wfb-port');
+  if (portEl) {
+    e.preventDefault();
+    e.stopPropagation();
+    startEdgeDrag(e, portEl.dataset.nodeId, portEl.dataset.portId, portEl.dataset.portType);
+    return;
+  }
+
+  // Check if clicking a node body (not port)
+  const nodeEl = e.target.closest?.('.wfb-node');
+  if (nodeEl && e.button === 0) {
+    e.preventDefault();
+    startNodeMove(e, nodeEl.dataset.nodeId, nodeEl);
+    return;
+  }
+}
+
+function onPointerMove(e) {
+  if (!_drag) return;
+  switch (_drag.type) {
+    case 'palette': movePaletteDrag(e); break;
+    case 'node': moveNodeMove(e); break;
+    case 'edge': moveEdgeDrag(e); break;
+  }
+}
+
+function onPointerUp(e) {
+  if (!_drag) return;
+  switch (_drag.type) {
+    case 'palette': endPaletteDrag(e); break;
+    case 'node': endNodeMove(e); break;
+    case 'edge': endEdgeDrag(e); break;
+  }
+}
+
+// ── Public API ──────────────────────────────────────────────────────────
+
+export const DragManager = {
+  /**
+   * Initialize drag handling.
+   * @param {object} canvas - Canvas module
+   * @param {HTMLElement} nodeContainer - World element
+   * @param {SVGGElement} svgLayer - SVG world group
+   */
+  init(canvas, nodeContainer, svgLayer) {
+    _canvas = canvas;
+    _nodeContainer = nodeContainer;
+    _svgLayer = svgLayer;
+
+    // Node/port interactions on the world element
+    _nodeContainer.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
+  },
+
+  /**
+   * Remove all event listeners.
+   */
+  destroy() {
+    if (_nodeContainer) {
+      _nodeContainer.removeEventListener('pointerdown', onPointerDown);
+    }
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+    document.removeEventListener('pointercancel', onPointerUp);
+
+    if (_drag?.type === 'palette' && _drag.ghost) {
+      _drag.ghost.remove();
+    }
+    _drag = null;
+    _canvas = null;
+    _nodeContainer = null;
+    _svgLayer = null;
+  },
+
+  /**
+   * Toggle snap-to-grid.
+   * @param {boolean} enabled
+   */
+  setSnapToGrid(enabled) {
+    _snapEnabled = enabled;
+  },
+
+  /**
+   * Begin a palette drag from an external element (e.g., node palette).
+   * Call this from a pointerdown handler on a palette item.
+   * @param {PointerEvent} e
+   * @param {string} nodeType
+   */
+  startPaletteDrag(e, nodeType) {
+    startPaletteDrag(e, nodeType);
+  },
+};

package/src/apps/workflow/public/editor/edge-renderer.js

@@ -0,0 +1,235 @@
+// ── Workflow Editor — SVG Bezier Edge Rendering ────────────────────────
+// Creates and updates SVG cubic bezier paths between node ports.
+
+import { store } from '../state/store.js';
+import { resolveOutputPorts } from '../models/node-types.js';
+
+const NODE_WIDTH = 220;
+const NODE_HEIGHT_ESTIMATE = 80;
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Get output port position for a source node.
+ * For single-output nodes, port is at the right-center.
+ * For multi-output nodes, ports are spaced vertically.
+ */
+function getSourcePoint(node, sourcePort, _typeDef) {
+  const x = node.position.x + NODE_WIDTH;
+  const outPorts = resolveOutputPorts(node);
+  if (outPorts.length <= 1) {
+    return { x, y: node.position.y + NODE_HEIGHT_ESTIMATE / 2 };
+  }
+  // Multi-output: find port index
+  let idx = outPorts.findIndex(p => p.id === sourcePort);
+  if (idx === -1) idx = 0;
+  const spacing = NODE_HEIGHT_ESTIMATE / (outPorts.length + 1);
+  return { x, y: node.position.y + spacing * (idx + 1) };
+}
+
+/**
+ * Get input port position for a target node.
+ * Input port is at the left-center.
+ */
+function getTargetPoint(node, targetPort, typeDef) {
+  const x = node.position.x;
+  const inCount = typeDef?.ports?.in ?? 1;
+  if (inCount <= 1) {
+    return { x, y: node.position.y + NODE_HEIGHT_ESTIMATE / 2 };
+  }
+  let idx = 0; // Default to first port
+  if (targetPort) {
+    const match = targetPort.match(/in-(\d+)/);
+    if (match) idx = parseInt(match[1], 10);
+  }
+  const spacing = NODE_HEIGHT_ESTIMATE / (inCount + 1);
+  return { x, y: node.position.y + spacing * (idx + 1) };
+}
+
+/**
+ * Compute the cubic bezier 'd' attribute for a path.
+ */
+function computePathD(x1, y1, x2, y2) {
+  const dx = Math.max(50, Math.abs(x2 - x1) * 0.4);
+  return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
+}
+
+// ── Public API ──────────────────────────────────────────────────────────
+
+export const EdgeRenderer = {
+  /**
+   * Create an SVG path element for a workflow edge.
+   * @param {object} edge - { id, source, target, sourcePort, condition }
+   * @param {object} sourceNode
+   * @param {object} targetNode
+   * @param {object} [sourceTypeDef] - NODE_TYPES entry for source
+   * @param {object} [targetTypeDef] - NODE_TYPES entry for target
+   * @returns {SVGGElement} An SVG group containing the path and optional label
+   */
+  createEdgePath(edge, sourceNode, targetNode, sourceTypeDef, targetTypeDef) {
+    const group = document.createElementNS(SVG_NS, 'g');
+    group.setAttribute('class', 'wfb-edge');
+    group.dataset.edgeId = edge.id;
+
+    // Hit area (wider, invisible path for easier selection)
+    const hitPath = document.createElementNS(SVG_NS, 'path');
+    hitPath.setAttribute('class', 'wfb-edge-hit');
+    hitPath.setAttribute('fill', 'none');
+    hitPath.setAttribute('stroke', 'transparent');
+    hitPath.setAttribute('stroke-width', '12');
+    hitPath.style.cursor = 'pointer';
+    hitPath.style.pointerEvents = 'stroke';
+
+    // Visible path
+    const path = document.createElementNS(SVG_NS, 'path');
+    path.setAttribute('class', 'wfb-edge-path');
+    path.setAttribute('fill', 'none');
+    path.setAttribute('stroke', 'var(--df-color-border-default)');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('marker-end', 'url(#wfb-arrowhead)');
+    path.style.transition = `stroke var(--df-duration-fast) ease`;
+    path.style.pointerEvents = 'none';
+
+    // Compute positions
+    const src = getSourcePoint(sourceNode, edge.sourcePort, sourceTypeDef);
+    const tgt = getTargetPoint(targetNode, null, targetTypeDef);
+    const d = computePathD(src.x, src.y, tgt.x, tgt.y);
+    path.setAttribute('d', d);
+    hitPath.setAttribute('d', d);
+
+    group.appendChild(hitPath);
+    group.appendChild(path);
+
+    // Label
+    if (edge.condition) {
+      const midX = (src.x + tgt.x) / 2;
+      const midY = (src.y + tgt.y) / 2 - 8;
+      const text = document.createElementNS(SVG_NS, 'text');
+      text.setAttribute('class', 'wfb-edge-label');
+      text.setAttribute('x', String(midX));
+      text.setAttribute('y', String(midY));
+      text.setAttribute('text-anchor', 'middle');
+      text.setAttribute('fill', 'var(--df-color-text-muted)');
+      text.setAttribute('font-size', '11');
+      text.setAttribute('font-family', 'var(--df-font-mono)');
+      text.style.pointerEvents = 'none';
+      text.textContent = edge.condition;
+      group.appendChild(text);
+    }
+
+    return group;
+  },
+
+  /**
+   * Update the path 'd' attribute for an existing edge group.
+   * @param {SVGGElement} groupEl
+   * @param {object} sourceNode
+   * @param {object} targetNode
+   * @param {object} [sourceTypeDef]
+   * @param {object} [targetTypeDef]
+   * @param {string} [sourcePort]
+   */
+  updateEdgePath(groupEl, sourceNode, targetNode, sourceTypeDef, targetTypeDef, sourcePort) {
+    const src = getSourcePoint(sourceNode, sourcePort, sourceTypeDef);
+    const tgt = getTargetPoint(targetNode, null, targetTypeDef);
+    const d = computePathD(src.x, src.y, tgt.x, tgt.y);
+
+    const hitPath = groupEl.querySelector('.wfb-edge-hit');
+    const path = groupEl.querySelector('.wfb-edge-path');
+    if (hitPath) hitPath.setAttribute('d', d);
+    if (path) path.setAttribute('d', d);
+
+    // Update label position
+    const label = groupEl.querySelector('.wfb-edge-label');
+    if (label) {
+      label.setAttribute('x', String((src.x + tgt.x) / 2));
+      label.setAttribute('y', String((src.y + tgt.y) / 2 - 8));
+    }
+  },
+
+  /**
+   * Create a temporary edge path for edge creation drag.
+   * @returns {SVGPathElement}
+   */
+  createTempEdge() {
+    const path = document.createElementNS(SVG_NS, 'path');
+    path.setAttribute('class', 'wfb-temp-edge');
+    path.setAttribute('fill', 'none');
+    path.setAttribute('stroke', 'var(--df-color-accent-default)');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('stroke-dasharray', '6 3');
+    path.setAttribute('marker-end', 'url(#wfb-arrowhead-selected)');
+    path.style.pointerEvents = 'none';
+    path.style.opacity = '0.7';
+    return path;
+  },
+
+  /**
+   * Update the temporary edge path during drag.
+   * @param {SVGPathElement} pathEl
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   */
+  updateTempEdge(pathEl, x1, y1, x2, y2) {
+    pathEl.setAttribute('d', computePathD(x1, y1, x2, y2));
+  },
+
+  /**
+   * Remove a temporary edge path from the SVG layer.
+   * @param {SVGPathElement} pathEl
+   */
+  removeTempEdge(pathEl) {
+    pathEl?.remove();
+  },
+
+  /**
+   * Set execution status highlight on an edge.
+   * @param {SVGGElement} groupEl
+   * @param {'running'|'passed'|'failed'|null} status
+   */
+  setEdgeStatus(groupEl, status) {
+    const path = groupEl?.querySelector('.wfb-edge-path');
+    if (!path) return;
+
+    switch (status) {
+      case 'running':
+        path.setAttribute('stroke', 'var(--df-color-state-recording)');
+        path.setAttribute('stroke-width', '3');
+        path.setAttribute('marker-end', 'url(#wfb-arrowhead-selected)');
+        break;
+      case 'passed':
+        path.setAttribute('stroke', 'var(--df-color-state-success)');
+        path.setAttribute('stroke-width', '2');
+        break;
+      case 'failed':
+        path.setAttribute('stroke', 'var(--df-color-state-error)');
+        path.setAttribute('stroke-width', '2');
+        break;
+      default:
+        path.setAttribute('stroke', 'var(--df-color-border-default)');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('marker-end', 'url(#wfb-arrowhead)');
+        break;
+    }
+  },
+
+  /**
+   * Mark an edge as selected or deselected.
+   * @param {SVGGElement} groupEl
+   * @param {boolean} selected
+   */
+  setSelected(groupEl, selected) {
+    const path = groupEl?.querySelector('.wfb-edge-path');
+    if (!path) return;
+    if (selected) {
+      path.setAttribute('stroke', 'var(--df-color-accent-default)');
+      path.setAttribute('stroke-width', '3');
+      path.setAttribute('marker-end', 'url(#wfb-arrowhead-selected)');
+    } else {
+      path.setAttribute('stroke', 'var(--df-color-border-default)');
+      path.setAttribute('stroke-width', '2');
+      path.setAttribute('marker-end', 'url(#wfb-arrowhead)');
+    }
+  },
+};

package/src/apps/workflow/public/editor/history-manager.js

@@ -0,0 +1,147 @@
+// ── Workflow Editor — Undo/Redo History Manager ───────────────────────
+// Command stack storing JSON snapshots, capped at 50 entries.
+
+import { store } from '../state/store.js';
+
+const MAX_HISTORY = 50;
+
+let _stack = [];     // Array of JSON strings (workflow snapshots)
+let _index = -1;     // Current position in the stack
+let _unsub = null;   // Store subscription teardown
+let _skipNext = false; // Prevent re-push during undo/redo restore
+
+// ── Public API ──────────────────────────────────────────────────────────
+
+export const HistoryManager = {
+  /**
+   * Initialize history tracking by subscribing to workflow changes.
+   */
+  init() {
+    _stack = [];
+    _index = -1;
+    _skipNext = false;
+
+    _unsub = store.on('workflow', (wf) => {
+      if (_skipNext) {
+        _skipNext = false;
+        return;
+      }
+      if (!wf) return;
+      this.push(wf);
+    });
+
+    // Keyboard shortcuts
+    this._onKeyDown = (e) => {
+      // Ctrl/Cmd+Z — undo
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        if (isInputFocused()) return;
+        e.preventDefault();
+        this.undo();
+        return;
+      }
+      // Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y — redo
+      if (((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') ||
+          ((e.ctrlKey || e.metaKey) && e.key === 'y')) {
+        if (isInputFocused()) return;
+        e.preventDefault();
+        this.redo();
+        return;
+      }
+    };
+    document.addEventListener('keydown', this._onKeyDown);
+  },
+
+  /**
+   * Unsubscribe from the store.
+   */
+  destroy() {
+    if (_unsub) {
+      _unsub();
+      _unsub = null;
+    }
+    if (this._onKeyDown) {
+      document.removeEventListener('keydown', this._onKeyDown);
+      this._onKeyDown = null;
+    }
+    _stack = [];
+    _index = -1;
+  },
+
+  /**
+   * Push a workflow snapshot onto the history stack.
+   * Truncates any redo entries ahead of the current index.
+   * @param {object} state - Workflow object to snapshot
+   */
+  push(state) {
+    const json = JSON.stringify(state);
+
+    // Avoid duplicates (same as current top)
+    if (_index >= 0 && _stack[_index] === json) return;
+
+    // Truncate redo entries
+    _stack = _stack.slice(0, _index + 1);
+    _stack.push(json);
+
+    // Cap at MAX_HISTORY
+    if (_stack.length > MAX_HISTORY) {
+      _stack.shift();
+    }
+    _index = _stack.length - 1;
+  },
+
+  /**
+   * Restore the previous state.
+   */
+  undo() {
+    if (!this.canUndo()) return;
+    _index--;
+    _skipNext = true;
+    const snapshot = JSON.parse(_stack[_index]);
+    store.set('workflow', snapshot);
+    store.set('isDirty', true);
+  },
+
+  /**
+   * Restore the next state (after an undo).
+   */
+  redo() {
+    if (!this.canRedo()) return;
+    _index++;
+    _skipNext = true;
+    const snapshot = JSON.parse(_stack[_index]);
+    store.set('workflow', snapshot);
+    store.set('isDirty', true);
+  },
+
+  /**
+   * @returns {boolean}
+   */
+  canUndo() {
+    return _index > 0;
+  },
+
+  /**
+   * @returns {boolean}
+   */
+  canRedo() {
+    return _index < _stack.length - 1;
+  },
+
+  /**
+   * Clear all history.
+   */
+  clear() {
+    _stack = [];
+    _index = -1;
+  },
+};
+
+/**
+ * Check if an input/textarea/contenteditable is focused.
+ */
+function isInputFocused() {
+  const el = document.activeElement;
+  if (!el) return false;
+  const tag = el.tagName.toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select' || el.isContentEditable;
+}