@hugobatist/smartcode 0.1.0

package/dist/static/selection.js

@@ -0,0 +1,353 @@
+/**
+ * SmartCode Selection -- node/edge selection, visual SVG indicators, keyboard shortcuts.
+ * Manages the selection lifecycle: select, deselect, re-apply after re-render.
+ *
+ * Dependencies:
+ *   - interaction-state.js (SmartCodeInteraction)
+ *   - diagram-dom.js (DiagramDOM)
+ *   - event-bus.js (SmartCodeEventBus)
+ *   - diagram-editor.js (MmdEditor)
+ *
+ * Usage:
+ *   SmartCodeSelection.init();
+ *   SmartCodeSelection.selectNode('A');
+ *   SmartCodeSelection.deselectAll();
+ *   SmartCodeSelection.getSelected(); // { id: 'A', type: 'node' } or null
+ */
+(function() {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    // ── Internal State ──
+    var selectedNodeId = null;
+    var selectedType = null; // 'node' | 'edge'
+    var overlayGroup = null; // SVGGElement for selection indicator
+
+    // ── Core Functions ──
+
+    /**
+     * Clear existing selection indicator from SVG.
+     */
+    function clearIndicator() {
+        if (overlayGroup && overlayGroup.parentNode) {
+            overlayGroup.parentNode.removeChild(overlayGroup);
+        }
+        overlayGroup = null;
+        // Remove any .selected-edge classes
+        var svg = DiagramDOM.getSVG();
+        if (svg) {
+            var selectedEdges = svg.querySelectorAll('.selected-edge');
+            for (var i = 0; i < selectedEdges.length; i++) {
+                selectedEdges[i].classList.remove('selected-edge');
+            }
+        }
+    }
+
+    /**
+     * Select a node by ID. Creates blue dashed border + 4 corner handles.
+     * @param {string} nodeId
+     */
+    /**
+     * Get the absolute position of an SVG element by walking its CTM.
+     * Returns { x, y, width, height } in SVG root coordinates.
+     */
+    function getAbsoluteBBox(el, svg) {
+        var bbox = el.getBBox();
+        // Use getCTM to transform local bbox to SVG root coordinates
+        var ctm = el.getCTM();
+        var svgCtm = svg.getCTM();
+        if (ctm && svgCtm) {
+            var transform = svgCtm.inverse().multiply(ctm);
+            return {
+                x: transform.a * bbox.x + transform.e,
+                y: transform.d * bbox.y + transform.f,
+                width: bbox.width * transform.a,
+                height: bbox.height * transform.d
+            };
+        }
+        return bbox;
+    }
+
+    function selectNode(nodeId) {
+        // Clear pending delete confirmation when selection changes
+        if (deleteConfirmTimer) {
+            clearTimeout(deleteConfirmTimer);
+            deleteConfirmTimer = null;
+            deleteConfirmNodeId = null;
+        }
+        clearIndicator();
+
+        var el = DiagramDOM.findNodeElement(nodeId);
+        if (!el) return;
+
+        var svg = DiagramDOM.getSVG();
+        if (!svg) return;
+
+        var bbox = getAbsoluteBBox(el, svg);
+
+        // Create selection indicator group
+        var g = document.createElementNS(SVG_NS, 'g');
+        g.setAttribute('class', 'selection-indicator');
+
+        // Blue dashed border rect
+        var rect = document.createElementNS(SVG_NS, 'rect');
+        rect.setAttribute('x', bbox.x - 4);
+        rect.setAttribute('y', bbox.y - 4);
+        rect.setAttribute('width', bbox.width + 8);
+        rect.setAttribute('height', bbox.height + 8);
+        rect.setAttribute('fill', 'none');
+        rect.setAttribute('stroke', '#3b82f6');
+        rect.setAttribute('stroke-width', '2');
+        rect.setAttribute('stroke-dasharray', '6,3');
+        rect.setAttribute('rx', '4');
+        g.appendChild(rect);
+
+        // Four corner handles (8x8 px)
+        var corners = [
+            [bbox.x - 8, bbox.y - 8],
+            [bbox.x + bbox.width, bbox.y - 8],
+            [bbox.x - 8, bbox.y + bbox.height],
+            [bbox.x + bbox.width, bbox.y + bbox.height],
+        ];
+        for (var i = 0; i < corners.length; i++) {
+            var handle = document.createElementNS(SVG_NS, 'rect');
+            handle.setAttribute('x', corners[i][0]);
+            handle.setAttribute('y', corners[i][1]);
+            handle.setAttribute('width', '8');
+            handle.setAttribute('height', '8');
+            handle.setAttribute('fill', '#3b82f6');
+            handle.setAttribute('rx', '2');
+            g.appendChild(handle);
+        }
+
+        svg.appendChild(g);
+        overlayGroup = g;
+
+        // Update state
+        selectedNodeId = nodeId;
+        selectedType = 'node';
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.select(nodeId, 'node');
+        }
+
+        // Emit event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('selection:changed', { id: nodeId, type: 'node' });
+        }
+
+        // Track click for heatmap frequency data
+        if (window.SmartCodeInteractionTracker) {
+            SmartCodeInteractionTracker.trackClick(nodeId);
+        }
+    }
+
+    /**
+     * Select an edge by ID. Adds .selected-edge CSS class (no handles).
+     * @param {string} edgeId
+     */
+    function selectEdge(edgeId) {
+        clearIndicator();
+
+        var el = DiagramDOM.findEdgeElement(edgeId);
+        if (!el) return;
+
+        el.classList.add('selected-edge');
+
+        // Update state
+        selectedNodeId = edgeId;
+        selectedType = 'edge';
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.select(edgeId, 'edge');
+        }
+
+        // Emit event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('selection:changed', { id: edgeId, type: 'edge' });
+        }
+    }
+
+    /**
+     * Deselect all. Removes indicators, clears state.
+     */
+    function deselectAll() {
+        // Clear pending delete confirmation
+        if (deleteConfirmTimer) {
+            clearTimeout(deleteConfirmTimer);
+            deleteConfirmTimer = null;
+            deleteConfirmNodeId = null;
+        }
+        clearIndicator();
+        selectedNodeId = null;
+        selectedType = null;
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.clearSelection();
+        }
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('selection:changed', null);
+        }
+    }
+
+    /**
+     * Re-apply selection after SVG re-render (called on diagram:rendered).
+     * If the selected element still exists, re-create the indicator.
+     * If it was removed, deselect and transition FSM to idle.
+     */
+    function reapplySelection() {
+        if (!selectedNodeId) return;
+
+        if (selectedType === 'node') {
+            var nodeEl = DiagramDOM.findNodeElement(selectedNodeId);
+            if (nodeEl) {
+                // Re-create indicator on new SVG
+                var savedId = selectedNodeId;
+                clearIndicator();
+                selectedNodeId = savedId;
+                selectedType = 'node';
+                selectNode(savedId);
+            } else {
+                deselectAll();
+                if (window.SmartCodeInteraction && SmartCodeInteraction.getState() === 'selected') {
+                    SmartCodeInteraction.forceState('idle');
+                }
+            }
+        } else if (selectedType === 'edge') {
+            var edgeEl = DiagramDOM.findEdgeElement(selectedNodeId);
+            if (edgeEl) {
+                var savedEdgeId = selectedNodeId;
+                clearIndicator();
+                selectedNodeId = savedEdgeId;
+                selectedType = 'edge';
+                selectEdge(savedEdgeId);
+            } else {
+                deselectAll();
+                if (window.SmartCodeInteraction && SmartCodeInteraction.getState() === 'selected') {
+                    SmartCodeInteraction.forceState('idle');
+                }
+            }
+        }
+    }
+
+    // ── Click Handler (delegated on #preview-container) ──
+
+    function handleClick(e) {
+        // Check FSM blocking states
+        if (window.SmartCodeInteraction && SmartCodeInteraction.isBlocking()) return;
+
+        // Don't handle in modes that have their own click handlers
+        var fsmState = window.SmartCodeInteraction ? SmartCodeInteraction.getState() : 'idle';
+        if (fsmState === 'flagging' || fsmState === 'add-node' || fsmState === 'add-edge') return;
+
+        // Skip UI controls and overlays
+        if (e.target.closest('.zoom-controls') ||
+            e.target.closest('.flag-popover') ||
+            e.target.closest('.editor-popover') ||
+            e.target.closest('.context-menu') ||
+            e.target.closest('.inline-edit-overlay')) return;
+
+        // Detect what was clicked
+        var nodeInfo = DiagramDOM.extractNodeId(e.target);
+
+        if (nodeInfo && nodeInfo.type === 'node') {
+            selectNode(nodeInfo.id);
+            if (window.SmartCodeInteraction) SmartCodeInteraction.transition('click_node', nodeInfo);
+        } else if (nodeInfo && nodeInfo.type === 'edge') {
+            selectEdge(nodeInfo.id);
+            if (window.SmartCodeInteraction) SmartCodeInteraction.transition('click_edge', nodeInfo);
+        } else if (nodeInfo && nodeInfo.type === 'subgraph') {
+            // Treat subgraph like a node for selection
+            selectNode(nodeInfo.id);
+            if (window.SmartCodeInteraction) SmartCodeInteraction.transition('click_node', nodeInfo);
+        } else {
+            // Empty space click
+            if (selectedNodeId) {
+                deselectAll();
+                if (window.SmartCodeInteraction) SmartCodeInteraction.transition('click_empty');
+            }
+        }
+    }
+
+    // ── Keyboard Handler (document-level) ──
+
+    var deleteConfirmTimer = null;
+    var deleteConfirmNodeId = null;
+
+    function handleKeydown(e) {
+        // Don't handle if focus is on text inputs
+        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT' ||
+            e.target.getAttribute('contenteditable')) return;
+
+        // Don't handle if inline edit is active
+        if (window.SmartCodeInlineEdit && SmartCodeInlineEdit.isActive()) return;
+
+        var fsmState = window.SmartCodeInteraction ? SmartCodeInteraction.getState() : 'idle';
+
+        if (fsmState === 'selected' && selectedNodeId) {
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                e.preventDefault();
+                // Require double-press within 2 seconds to confirm deletion
+                if (deleteConfirmNodeId === selectedNodeId && deleteConfirmTimer) {
+                    clearTimeout(deleteConfirmTimer);
+                    deleteConfirmTimer = null;
+                    deleteConfirmNodeId = null;
+                    if (selectedType === 'node' && window.MmdEditor) {
+                        var nodeToRemove = selectedNodeId;
+                        deselectAll();
+                        MmdEditor.doRemoveNode(nodeToRemove);
+                    }
+                    if (window.SmartCodeInteraction) SmartCodeInteraction.transition('delete_node');
+                } else {
+                    // First press: show confirmation toast
+                    deleteConfirmNodeId = selectedNodeId;
+                    if (deleteConfirmTimer) clearTimeout(deleteConfirmTimer);
+                    deleteConfirmTimer = setTimeout(function() {
+                        deleteConfirmTimer = null;
+                        deleteConfirmNodeId = null;
+                    }, 2000);
+                    if (window.toast) window.toast('Press Delete again to remove the node');
+                }
+            }
+            if (e.key === 'Escape') {
+                deleteConfirmTimer = null;
+                deleteConfirmNodeId = null;
+                deselectAll();
+                if (window.SmartCodeInteraction) SmartCodeInteraction.transition('escape');
+            }
+        }
+    }
+
+    // ── Init ──
+
+    function init() {
+        var container = document.getElementById('preview-container');
+        if (container) {
+            container.addEventListener('click', handleClick);
+        }
+
+        document.addEventListener('keydown', handleKeydown);
+
+        // Re-apply selection after SVG re-render
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.on('diagram:rendered', reapplySelection);
+        }
+    }
+
+    /**
+     * Returns the current selection.
+     * @returns {{ id: string, type: string }|null}
+     */
+    function getSelected() {
+        if (!selectedNodeId) return null;
+        return { id: selectedNodeId, type: selectedType };
+    }
+
+    // ── Public API ──
+    window.SmartCodeSelection = {
+        init: init,
+        selectNode: selectNode,
+        selectEdge: selectEdge,
+        deselectAll: deselectAll,
+        reapplySelection: reapplySelection,
+        getSelected: getSelected,
+    };
+})();

package/dist/static/session-player.css

@@ -0,0 +1,137 @@
+/* Session Player -- timeline scrubber bar and diff highlight styles */
+
+.session-player {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--surface-1);
+    border-top: 1px solid var(--border-default);
+    z-index: 50;
+}
+.session-player.hidden {
+    display: none;
+}
+
+.sp-btn {
+    background: var(--surface-2);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-default);
+    border-radius: 4px;
+    padding: 4px 10px;
+    font-size: 12px;
+    cursor: pointer;
+    font-family: 'Inter', sans-serif;
+}
+.sp-btn:hover {
+    background: var(--surface-3);
+    color: var(--text-primary);
+}
+
+.sp-scrubber {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 6px;
+    background: var(--border-default);
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
+}
+.sp-scrubber::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: var(--accent);
+    border-radius: 50%;
+    cursor: pointer;
+}
+.sp-scrubber::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: var(--accent);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+}
+
+.sp-time {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    color: var(--text-secondary);
+    min-width: 60px;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.sp-speed {
+    background: var(--surface-2);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-default);
+    border-radius: 4px;
+    padding: 3px 6px;
+    font-size: 11px;
+    cursor: pointer;
+}
+
+/* Diff highlighting */
+.diff-added rect, .diff-added polygon, .diff-added circle,
+.diff-added ellipse, .diff-added path {
+    stroke: var(--diff-added) !important;
+    stroke-width: 3px !important;
+}
+.diff-removed-ghost {
+    opacity: 0.3;
+    fill: var(--diff-removed);
+    stroke: var(--diff-removed);
+    stroke-dasharray: 6,3;
+}
+.diff-modified rect, .diff-modified polygon, .diff-modified circle,
+.diff-modified ellipse, .diff-modified path {
+    stroke: var(--diff-modified) !important;
+    stroke-width: 3px !important;
+}
+
+/* Session dropdown */
+.session-dropdown {
+    position: absolute;
+    top: 36px;
+    right: 0;
+    width: 260px;
+    max-height: 300px;
+    overflow-y: auto;
+    background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    border-radius: 6px;
+    z-index: 100;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+.session-dropdown.hidden {
+    display: none;
+}
+.session-list-item {
+    padding: 8px 12px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-bottom: 1px solid var(--border-default);
+}
+.session-list-item:hover {
+    background: var(--surface-2);
+    color: var(--text-primary);
+}
+.session-list-item:last-child {
+    border-bottom: none;
+}
+
+/* Responsive stacking */
+@media (max-width: 600px) {
+    .session-player {
+        flex-wrap: wrap;
+    }
+    .sp-scrubber {
+        order: 10;
+        flex-basis: 100%;
+    }
+}