@shumoku/renderer 0.2.0 → 0.2.3

package/dist/html/runtime.js

@@ -1,227 +1,11 @@
 /**
- * Interactive Runtime - Hover tooltip with touch support and pan/zoom
+ * Interactive Runtime - Mobile-first pan/zoom with tap tooltips and spotlight effect
+ * Google Maps style touch: 1 finger = page scroll (in HTML) / pan (here), 2 fingers = pinch zoom
  */
-let tooltip = null;
-let overlay = null;
-let currentHighlight = null;
-let isTouchDevice = false;
-function getTooltip() {
-    if (!tooltip) {
-        tooltip = document.createElement('div');
-        tooltip.style.cssText = `
-      position: fixed;
-      z-index: 10000;
-      padding: 6px 10px;
-      background: #1e293b;
-      color: #fff;
-      font-size: 12px;
-      border-radius: 4px;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.15s;
-      font-family: system-ui, sans-serif;
-      max-width: 300px;
-      white-space: pre-line;
-    `;
-        document.body.appendChild(tooltip);
-    }
-    return tooltip;
-}
-function showTooltip(text, x, y) {
-    const t = getTooltip();
-    t.textContent = text;
-    // Position tooltip, keeping it within viewport
-    const pad = 12;
-    let left = x + pad;
-    let top = y + pad;
-    // Adjust if tooltip would go off-screen
-    requestAnimationFrame(() => {
-        const rect = t.getBoundingClientRect();
-        if (left + rect.width > window.innerWidth - pad) {
-            left = x - rect.width - pad;
-        }
-        if (top + rect.height > window.innerHeight - pad) {
-            top = y - rect.height - pad;
-        }
-        t.style.left = `${Math.max(pad, left)}px`;
-        t.style.top = `${Math.max(pad, top)}px`;
-    });
-    t.style.left = `${left}px`;
-    t.style.top = `${top}px`;
-    t.style.opacity = '1';
-}
-function hideTooltip() {
-    if (tooltip) {
-        tooltip.style.opacity = '0';
-    }
-}
-function getOverlay() {
-    if (!overlay) {
-        overlay = document.createElement('div');
-        overlay.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.15s ease;
-      z-index: 9998;
-    `;
-        document.body.appendChild(overlay);
-    }
-    return overlay;
-}
-let highlightContainer = null;
-let currentMiniSvg = null;
-function getHighlightContainer() {
-    if (!highlightContainer) {
-        highlightContainer = document.createElement('div');
-        highlightContainer.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      z-index: 9999;
-    `;
-        document.body.appendChild(highlightContainer);
-    }
-    return highlightContainer;
-}
-function updateHighlightPosition() {
-    if (!currentHighlight || !currentMiniSvg)
-        return;
-    // Check if element is still in DOM (React may have replaced it)
-    if (!document.contains(currentHighlight)) {
-        // Element was removed, clear highlight
-        highlightElement(null);
-        return;
-    }
-    const svg = currentHighlight.closest('svg');
-    if (!svg)
-        return;
-    // Use getBoundingClientRect for screen position
-    const rect = svg.getBoundingClientRect();
-    // Update viewBox to match current zoom level
-    const viewBox = svg.getAttribute('viewBox');
-    if (viewBox) {
-        currentMiniSvg.setAttribute('viewBox', viewBox);
-    }
-    currentMiniSvg.style.left = `${rect.left}px`;
-    currentMiniSvg.style.top = `${rect.top}px`;
-    currentMiniSvg.style.width = `${rect.width}px`;
-    currentMiniSvg.style.height = `${rect.height}px`;
-}
-function highlightElement(el) {
-    // Skip if already highlighting the same element
-    if (el === currentHighlight) {
-        return;
-    }
-    // Remove previous highlight
-    if (currentHighlight) {
-        currentHighlight.classList.remove('shumoku-highlight');
-    }
-    // Clear previous mini SVG
-    const container = getHighlightContainer();
-    container.innerHTML = '';
-    currentMiniSvg = null;
-    currentHighlight = el;
-    const ov = getOverlay();
-    if (el) {
-        el.classList.add('shumoku-highlight');
-        const svg = el.closest('svg');
-        if (svg) {
-            const viewBox = svg.getAttribute('viewBox');
-            if (viewBox) {
-                // Clone the highlighted element
-                const clone = el.cloneNode(true);
-                clone.classList.remove('shumoku-highlight');
-                // Create mini SVG with same viewBox
-                const miniSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                miniSvg.setAttribute('viewBox', viewBox);
-                miniSvg.style.cssText = `
-          position: absolute;
-          overflow: visible;
-          filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #fff) drop-shadow(0 0 12px rgba(100, 150, 255, 0.8));
-        `;
-                // Copy defs (for gradients, patterns, etc.)
-                const defs = svg.querySelector('defs');
-                if (defs) {
-                    miniSvg.appendChild(defs.cloneNode(true));
-                }
-                miniSvg.appendChild(clone);
-                container.appendChild(miniSvg);
-                currentMiniSvg = miniSvg;
-                // Update position
-                updateHighlightPosition();
-            }
-        }
-        ov.style.opacity = '1';
-    }
-    else {
-        ov.style.opacity = '0';
-    }
-}
-function injectHighlightStyles() {
-    // No styles needed for current approach
-}
-function getTooltipInfo(el) {
-    // Port tooltip (ports are now separate layer)
-    const port = el.closest('.port[data-port]');
-    if (port) {
-        const portId = port.getAttribute('data-port') || '';
-        const deviceId = port.getAttribute('data-port-device') || '';
-        return { text: `${deviceId}:${portId}`, element: port };
-    }
-    // Link tooltip
-    const linkGroup = el.closest('.link-group[data-link-id]');
-    if (linkGroup) {
-        const from = linkGroup.getAttribute('data-link-from') || '';
-        const to = linkGroup.getAttribute('data-link-to') || '';
-        const bw = linkGroup.getAttribute('data-link-bandwidth');
-        const vlan = linkGroup.getAttribute('data-link-vlan');
-        let text = `${from} ↔ ${to}`;
-        if (bw)
-            text += `\n${bw}`;
-        if (vlan)
-            text += `\nVLAN: ${vlan}`;
-        return { text, element: linkGroup };
-    }
-    // Device tooltip (single label only)
-    const node = el.closest('.node[data-id]');
-    if (node) {
-        const json = node.getAttribute('data-device-json');
-        let text;
-        if (json) {
-            try {
-                const data = JSON.parse(json);
-                text = data.label || data.id;
-            }
-            catch {
-                text = node.getAttribute('data-id') || '';
-            }
-        }
-        else {
-            text = node.getAttribute('data-id') || '';
-        }
-        return { text, element: node };
-    }
-    return null;
-}
-function parseViewBox(svg) {
-    const vb = svg.getAttribute('viewBox');
-    if (!vb)
-        return null;
-    const parts = vb.split(/\s+|,/).map(Number);
-    if (parts.length !== 4 || parts.some(Number.isNaN))
-        return null;
-    return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] };
-}
-function setViewBox(svg, vb) {
-    svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.width} ${vb.height}`);
-}
+import { destroySpotlight, getCurrentHighlight, highlightElement, updateHighlightPosition, } from './spotlight.js';
+import { destroyTooltip, getTooltipInfo, hideTooltip, showTooltip } from './tooltip.js';
+import { cloneViewBox, parseViewBox, setViewBox } from './viewbox.js';
+const ZOOM_FACTOR = 1.2;
 export function initInteractive(options) {
     const target = typeof options.target === 'string' ? document.querySelector(options.target) : options.target;
     if (!target)
@@ -229,26 +13,23 @@ export function initInteractive(options) {
     const svg = target.closest('svg') || target.querySelector('svg') || target;
     if (!(svg instanceof SVGSVGElement))
         throw new Error('SVG element not found');
-    // Inject highlight styles
-    injectHighlightStyles();
-    // Pan/Zoom settings
     const panZoomEnabled = options.panZoom?.enabled ?? true;
     const minScale = options.panZoom?.minScale ?? 0.1;
     const maxScale = options.panZoom?.maxScale ?? 10;
-    const ZOOM_FACTOR = 1.2;
-    // Store original viewBox for reset and scale calculation
-    let originalViewBox = null;
-    const initViewBox = () => {
-        originalViewBox = parseViewBox(svg);
-        if (!originalViewBox) {
-            // Fallback: use SVG bounding box
-            const bbox = svg.getBBox();
-            originalViewBox = { x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height };
-            setViewBox(svg, originalViewBox);
-        }
+    let originalViewBox = parseViewBox(svg);
+    if (!originalViewBox) {
+        const bbox = svg.getBBox();
+        originalViewBox = { x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height };
+        setViewBox(svg, originalViewBox, updateHighlightPosition);
+    }
+    let tooltipActive = false;
+    const mouseDrag = {
+        active: false,
+        startX: 0,
+        startY: 0,
+        startViewBox: null,
     };
-    initViewBox();
-    // Calculate current scale
+    let pinchState = null;
     const getScale = () => {
         if (!originalViewBox)
             return 1;
@@ -257,252 +38,211 @@ export function initInteractive(options) {
             return 1;
         return originalViewBox.width / current.width;
     };
-    // Track if we're currently showing a touch tooltip
-    let touchTooltipActive = false;
-    // Pan state
-    let isPanning = false;
-    let panStartX = 0;
-    let panStartY = 0;
-    let panStartViewBox = null;
-    // Pinch state
-    let initialPinchDistance = 0;
-    let pinchStartViewBox = null;
-    let pinchCenter = null;
-    // Mouse move handler (desktop hover)
-    const handleMouseMove = (e) => {
-        if (isPanning)
-            return;
-        if (isTouchDevice)
-            return; // Skip on touch devices
-        const me = e;
-        const info = getTooltipInfo(me.target);
-        if (info) {
-            showTooltip(info.text, me.clientX, me.clientY);
-            highlightElement(info.element);
+    const resetView = () => {
+        if (originalViewBox) {
+            setViewBox(svg, originalViewBox, updateHighlightPosition);
         }
-        else {
-            hideTooltip();
-            highlightElement(null);
+    };
+    // ============================================
+    // Touch Events (Mobile: 2-finger for pan/zoom)
+    // ============================================
+    const getTouchDistance = (touches) => {
+        if (touches.length < 2)
+            return 0;
+        const dx = touches[1].clientX - touches[0].clientX;
+        const dy = touches[1].clientY - touches[0].clientY;
+        return Math.hypot(dx, dy);
+    };
+    const getTouchCenter = (touches) => ({
+        x: (touches[0].clientX + touches[1].clientX) / 2,
+        y: (touches[0].clientY + touches[1].clientY) / 2,
+    });
+    const handleTouchStart = (e) => {
+        if (e.touches.length >= 2 && panZoomEnabled) {
+            e.preventDefault();
+            const dist = getTouchDistance(e.touches);
+            const center = getTouchCenter(e.touches);
+            const vb = parseViewBox(svg);
+            if (vb) {
+                const rect = svg.getBoundingClientRect();
+                pinchState = {
+                    initialDist: dist,
+                    startViewBox: cloneViewBox(vb),
+                    centerX: vb.x + vb.width * ((center.x - rect.left) / rect.width),
+                    centerY: vb.y + vb.height * ((center.y - rect.top) / rect.height),
+                };
+            }
+            if (tooltipActive) {
+                hideTooltip();
+                highlightElement(null);
+                tooltipActive = false;
+            }
         }
     };
-    // Mouse leave handler
-    const handleMouseLeave = () => {
-        if (isTouchDevice)
-            return;
-        if (isPanning)
-            return;
-        hideTooltip();
-        highlightElement(null);
+    const handleTouchMove = (e) => {
+        if (e.touches.length >= 2 && pinchState && panZoomEnabled) {
+            e.preventDefault();
+            const dist = getTouchDistance(e.touches);
+            const center = getTouchCenter(e.touches);
+            if (dist === 0 || pinchState.initialDist === 0)
+                return;
+            const scale = dist / pinchState.initialDist;
+            const newWidth = pinchState.startViewBox.width / scale;
+            const newHeight = pinchState.startViewBox.height / scale;
+            if (!originalViewBox)
+                return;
+            const newScale = originalViewBox.width / newWidth;
+            if (newScale < minScale || newScale > maxScale)
+                return;
+            const rect = svg.getBoundingClientRect();
+            const mx = (center.x - rect.left) / rect.width;
+            const my = (center.y - rect.top) / rect.height;
+            setViewBox(svg, {
+                x: pinchState.centerX - newWidth * mx,
+                y: pinchState.centerY - newHeight * my,
+                width: newWidth,
+                height: newHeight,
+            }, updateHighlightPosition);
+        }
     };
-    // Mouse down - start pan
+    const handleTouchEnd = (e) => {
+        if (e.touches.length < 2) {
+            pinchState = null;
+        }
+    };
+    // ============================================
+    // Mouse Events (Desktop)
+    // ============================================
     const handleMouseDown = (e) => {
-        if (!panZoomEnabled)
+        if (e.button !== 0 || !panZoomEnabled)
             return;
-        const me = e;
-        if (me.button !== 0)
-            return; // Left button only
-        // Don't start pan if clicking on interactive element
-        const info = getTooltipInfo(me.target);
-        if (info)
+        const vb = parseViewBox(svg);
+        if (!vb)
             return;
-        isPanning = true;
-        panStartX = me.clientX;
-        panStartY = me.clientY;
-        panStartViewBox = parseViewBox(svg);
+        mouseDrag.active = true;
+        mouseDrag.startX = e.clientX;
+        mouseDrag.startY = e.clientY;
+        mouseDrag.startViewBox = cloneViewBox(vb);
         svg.style.cursor = 'grabbing';
-        e.preventDefault();
+        if (tooltipActive) {
+            hideTooltip();
+            highlightElement(null);
+            tooltipActive = false;
+        }
     };
-    // Mouse move - pan
-    const handlePan = (e) => {
-        if (!isPanning || !panStartViewBox)
-            return;
-        const me = e;
-        const rect = svg.getBoundingClientRect();
-        const dx = me.clientX - panStartX;
-        const dy = me.clientY - panStartY;
-        // Convert screen delta to viewBox delta
-        const scaleX = panStartViewBox.width / rect.width;
-        const scaleY = panStartViewBox.height / rect.height;
-        setViewBox(svg, {
-            x: panStartViewBox.x - dx * scaleX,
-            y: panStartViewBox.y - dy * scaleY,
-            width: panStartViewBox.width,
-            height: panStartViewBox.height,
-        });
+    const handleMouseMove = (e) => {
+        if (mouseDrag.active && mouseDrag.startViewBox && panZoomEnabled) {
+            const dx = e.clientX - mouseDrag.startX;
+            const dy = e.clientY - mouseDrag.startY;
+            const rect = svg.getBoundingClientRect();
+            const scaleX = mouseDrag.startViewBox.width / rect.width;
+            const scaleY = mouseDrag.startViewBox.height / rect.height;
+            setViewBox(svg, {
+                x: mouseDrag.startViewBox.x - dx * scaleX,
+                y: mouseDrag.startViewBox.y - dy * scaleY,
+                width: mouseDrag.startViewBox.width,
+                height: mouseDrag.startViewBox.height,
+            }, updateHighlightPosition);
+        }
+        else if (!mouseDrag.active) {
+            // Hover: show tooltip and highlight
+            const info = getTooltipInfo(e.target);
+            if (info) {
+                showTooltip(info.text, e.clientX, e.clientY);
+                highlightElement(info.element);
+            }
+            else {
+                hideTooltip();
+                highlightElement(null);
+            }
+        }
     };
-    // Mouse up - end pan
     const handleMouseUp = () => {
-        if (isPanning) {
-            isPanning = false;
-            panStartViewBox = null;
-            svg.style.cursor = '';
+        mouseDrag.active = false;
+        mouseDrag.startViewBox = null;
+        svg.style.cursor = '';
+    };
+    const handleMouseLeave = () => {
+        if (!mouseDrag.active && !tooltipActive) {
+            hideTooltip();
+            highlightElement(null);
         }
     };
-    // Wheel zoom
     const handleWheel = (e) => {
         if (!panZoomEnabled)
             return;
-        const we = e;
-        we.preventDefault();
+        e.preventDefault();
         const vb = parseViewBox(svg);
         if (!vb || !originalViewBox)
             return;
         const rect = svg.getBoundingClientRect();
-        const mouseXRatio = (we.clientX - rect.left) / rect.width;
-        const mouseYRatio = (we.clientY - rect.top) / rect.height;
-        const mouseX = vb.x + vb.width * mouseXRatio;
-        const mouseY = vb.y + vb.height * mouseYRatio;
-        const zoomFactor = we.deltaY > 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
+        const mouseX = vb.x + vb.width * ((e.clientX - rect.left) / rect.width);
+        const mouseY = vb.y + vb.height * ((e.clientY - rect.top) / rect.height);
+        const zoomFactor = e.deltaY > 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
         const newWidth = vb.width * zoomFactor;
         const newHeight = vb.height * zoomFactor;
-        // Check scale limits
         const newScale = originalViewBox.width / newWidth;
         if (newScale < minScale || newScale > maxScale)
             return;
+        const xRatio = (e.clientX - rect.left) / rect.width;
+        const yRatio = (e.clientY - rect.top) / rect.height;
         setViewBox(svg, {
-            x: mouseX - newWidth * mouseXRatio,
-            y: mouseY - newHeight * mouseYRatio,
+            x: mouseX - newWidth * xRatio,
+            y: mouseY - newHeight * yRatio,
             width: newWidth,
             height: newHeight,
-        });
+        }, updateHighlightPosition);
     };
-    // Touch start handler
-    const handleTouchStart = (e) => {
-        isTouchDevice = true;
-        const te = e;
-        if (te.touches.length === 1 && panZoomEnabled) {
-            // Single touch - check if on interactive element first
-            const touch = te.touches[0];
-            const targetEl = document.elementFromPoint(touch.clientX, touch.clientY);
-            const info = targetEl ? getTooltipInfo(targetEl) : null;
-            if (!info) {
-                // Start pan
-                isPanning = true;
-                panStartX = touch.clientX;
-                panStartY = touch.clientY;
-                panStartViewBox = parseViewBox(svg);
-            }
+    // ============================================
+    // Tap for tooltip (touch devices)
+    // ============================================
+    let tapStart = null;
+    const handleTouchStartForTap = (e) => {
+        if (e.touches.length === 1) {
+            tapStart = {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+                time: Date.now(),
+            };
         }
-        else if (te.touches.length === 2 && panZoomEnabled) {
-            // Two touches - start pinch
-            isPanning = false;
-            const t1 = te.touches[0];
-            const t2 = te.touches[1];
-            initialPinchDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-            pinchStartViewBox = parseViewBox(svg);
-            // Calculate pinch center in viewBox coordinates
-            const rect = svg.getBoundingClientRect();
-            const centerX = (t1.clientX + t2.clientX) / 2;
-            const centerY = (t1.clientY + t2.clientY) / 2;
-            const vb = pinchStartViewBox;
-            if (vb) {
-                const xRatio = (centerX - rect.left) / rect.width;
-                const yRatio = (centerY - rect.top) / rect.height;
-                pinchCenter = {
-                    x: vb.x + vb.width * xRatio,
-                    y: vb.y + vb.height * yRatio,
-                };
-            }
-        }
-    };
-    // Touch move handler
-    const handleTouchMove = (e) => {
-        const te = e;
-        if (te.touches.length === 1 && isPanning && panStartViewBox) {
-            // Pan
-            const touch = te.touches[0];
-            const rect = svg.getBoundingClientRect();
-            const dx = touch.clientX - panStartX;
-            const dy = touch.clientY - panStartY;
-            const scaleX = panStartViewBox.width / rect.width;
-            const scaleY = panStartViewBox.height / rect.height;
-            setViewBox(svg, {
-                x: panStartViewBox.x - dx * scaleX,
-                y: panStartViewBox.y - dy * scaleY,
-                width: panStartViewBox.width,
-                height: panStartViewBox.height,
-            });
-            te.preventDefault();
-        }
-        else if (te.touches.length === 2 && pinchStartViewBox && pinchCenter && originalViewBox) {
-            // Pinch zoom
-            const t1 = te.touches[0];
-            const t2 = te.touches[1];
-            const distance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-            const scale = distance / initialPinchDistance;
-            const newWidth = pinchStartViewBox.width / scale;
-            const newHeight = pinchStartViewBox.height / scale;
-            // Check scale limits
-            const newScale = originalViewBox.width / newWidth;
-            if (newScale < minScale || newScale > maxScale)
-                return;
-            // Zoom towards pinch center
-            const rect = svg.getBoundingClientRect();
-            const centerX = (t1.clientX + t2.clientX) / 2;
-            const centerY = (t1.clientY + t2.clientY) / 2;
-            const xRatio = (centerX - rect.left) / rect.width;
-            const yRatio = (centerY - rect.top) / rect.height;
-            setViewBox(svg, {
-                x: pinchCenter.x - newWidth * xRatio,
-                y: pinchCenter.y - newHeight * yRatio,
-                width: newWidth,
-                height: newHeight,
-            });
-            te.preventDefault();
-        }
-    };
-    // Touch end handler
-    const handleTouchEnd = (e) => {
-        const te = e;
-        if (te.touches.length === 0) {
-            isPanning = false;
-            panStartViewBox = null;
-            pinchStartViewBox = null;
-            pinchCenter = null;
-        }
-        else if (te.touches.length === 1) {
-            // Switched from pinch to pan
-            pinchStartViewBox = null;
-            pinchCenter = null;
-            isPanning = true;
-            const touch = te.touches[0];
-            panStartX = touch.clientX;
-            panStartY = touch.clientY;
-            panStartViewBox = parseViewBox(svg);
+        else {
+            tapStart = null;
         }
     };
-    // Touch/click handler for mobile tooltip
-    const handleTap = (e) => {
-        if (!isTouchDevice)
+    const handleTouchEndForTap = (e) => {
+        if (!tapStart || e.touches.length > 0) {
+            tapStart = null;
             return;
-        if (isPanning)
-            return;
-        const me = e;
-        const targetEl = e.target;
-        const info = getTooltipInfo(targetEl);
-        if (info) {
-            // Show tooltip at tap position
-            showTooltip(info.text, me.clientX, me.clientY);
-            highlightElement(info.element);
-            touchTooltipActive = true;
-            e.preventDefault();
         }
-        else if (touchTooltipActive) {
-            // Tap on empty area - hide tooltip
-            hideTooltip();
-            highlightElement(null);
-            touchTooltipActive = false;
+        const touch = e.changedTouches[0];
+        const dx = touch.clientX - tapStart.x;
+        const dy = touch.clientY - tapStart.y;
+        const dt = Date.now() - tapStart.time;
+        if (Math.hypot(dx, dy) < 10 && dt < 300) {
+            const targetEl = document.elementFromPoint(touch.clientX, touch.clientY);
+            if (targetEl) {
+                const info = getTooltipInfo(targetEl);
+                if (info) {
+                    showTooltip(info.text, touch.clientX, touch.clientY);
+                    highlightElement(info.element);
+                    tooltipActive = true;
+                }
+                else if (tooltipActive) {
+                    hideTooltip();
+                    highlightElement(null);
+                    tooltipActive = false;
+                }
+            }
         }
+        tapStart = null;
     };
-    // Position update handler for scroll/resize events
-    const handlePositionUpdate = () => {
-        updateHighlightPosition();
-    };
-    // Track viewBox changes for pan/zoom
+    // ============================================
+    // Track viewBox changes for smooth highlight during pan/zoom
+    // ============================================
     let rafId = null;
     let lastViewBox = '';
     const trackViewBox = () => {
-        if (currentHighlight) {
+        if (getCurrentHighlight()) {
             const viewBox = svg.getAttribute('viewBox') || '';
             if (viewBox !== lastViewBox) {
                 lastViewBox = viewBox;
@@ -511,61 +251,47 @@ export function initInteractive(options) {
         }
         rafId = requestAnimationFrame(trackViewBox);
     };
-    rafId = requestAnimationFrame(trackViewBox);
-    // Reset view
-    const resetView = () => {
-        if (originalViewBox) {
-            setViewBox(svg, originalViewBox);
-        }
+    const handlePositionUpdate = () => {
+        updateHighlightPosition();
     };
-    // Set touch-action to prevent browser gestures
-    if (panZoomEnabled) {
-        svg.style.touchAction = 'none';
-    }
-    // Add event listeners
-    svg.addEventListener('mousemove', handleMouseMove);
-    svg.addEventListener('mouseleave', handleMouseLeave);
-    svg.addEventListener('mousedown', handleMouseDown);
-    svg.addEventListener('click', handleTap);
-    svg.addEventListener('wheel', handleWheel, { passive: false });
-    svg.addEventListener('touchstart', handleTouchStart, { passive: true });
+    // Start tracking
+    rafId = requestAnimationFrame(trackViewBox);
+    // ============================================
+    // Setup Event Listeners
+    // ============================================
+    svg.addEventListener('touchstart', handleTouchStart, { passive: false });
     svg.addEventListener('touchmove', handleTouchMove, { passive: false });
     svg.addEventListener('touchend', handleTouchEnd);
-    // Global mouse events for pan
-    document.addEventListener('mousemove', handlePan);
+    svg.addEventListener('touchcancel', handleTouchEnd);
+    svg.addEventListener('touchstart', handleTouchStartForTap, { passive: true });
+    svg.addEventListener('touchend', handleTouchEndForTap);
+    svg.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
+    svg.addEventListener('mouseleave', handleMouseLeave);
+    svg.addEventListener('wheel', handleWheel, { passive: false });
     // Listen for scroll/resize to update highlight position
     window.addEventListener('scroll', handlePositionUpdate, true);
     window.addEventListener('resize', handlePositionUpdate);
     return {
         destroy: () => {
-            svg.removeEventListener('mousemove', handleMouseMove);
-            svg.removeEventListener('mouseleave', handleMouseLeave);
-            svg.removeEventListener('mousedown', handleMouseDown);
-            svg.removeEventListener('click', handleTap);
-            svg.removeEventListener('wheel', handleWheel);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
             svg.removeEventListener('touchstart', handleTouchStart);
             svg.removeEventListener('touchmove', handleTouchMove);
             svg.removeEventListener('touchend', handleTouchEnd);
-            document.removeEventListener('mousemove', handlePan);
+            svg.removeEventListener('touchcancel', handleTouchEnd);
+            svg.removeEventListener('touchstart', handleTouchStartForTap);
+            svg.removeEventListener('touchend', handleTouchEndForTap);
+            svg.removeEventListener('mousedown', handleMouseDown);
+            document.removeEventListener('mousemove', handleMouseMove);
             document.removeEventListener('mouseup', handleMouseUp);
+            svg.removeEventListener('mouseleave', handleMouseLeave);
+            svg.removeEventListener('wheel', handleWheel);
             window.removeEventListener('scroll', handlePositionUpdate, true);
             window.removeEventListener('resize', handlePositionUpdate);
-            if (rafId !== null)
-                cancelAnimationFrame(rafId);
-            highlightElement(null);
-            if (tooltip) {
-                tooltip.remove();
-                tooltip = null;
-            }
-            if (overlay) {
-                overlay.remove();
-                overlay = null;
-            }
-            if (highlightContainer) {
-                highlightContainer.remove();
-                highlightContainer = null;
-            }
+            destroyTooltip();
+            destroySpotlight();
         },
         showDeviceModal: () => { },
         hideModal: () => { },
@@ -573,7 +299,7 @@ export function initInteractive(options) {
         hideTooltip: () => {
             hideTooltip();
             highlightElement(null);
-            touchTooltipActive = false;
+            tooltipActive = false;
         },
         resetView,
         getScale,