fix: fixed docs

Author: grantiguess

docs/archive/SEMANTIC_IMPROVEMENTS_SUMMARY.md

@@ -357,7 +357,7 @@ console.log(match.shouldMerge); // true
 ## Testing Checklist
 
 - [x] Orbit resolver imports work without errors
-- [ ] Property-path queries return results in <3 seconds
+- [ ] Property-path queries return results in \<3 seconds
 - [ ] Entity deduplication merges obvious duplicates
 - [ ] Radial layout has no node overlaps
 - [ ] Connection routing avoids node collisions

scripts/generate-docs.js

@@ -190,12 +190,12 @@ class DocumentationGenerator {
    */
   isReactComponent(content) {
     return content.includes('import React') ||
-           content.includes('from "react"') ||
-           content.includes('from \'react\'') ||
-           content.includes('jsx') ||
-           content.includes('return (') ||
-           content.includes('useState') ||
-           content.includes('useEffect');
+      content.includes('from "react"') ||
+      content.includes('from \'react\'') ||
+      content.includes('jsx') ||
+      content.includes('return (') ||
+      content.includes('useState') ||
+      content.includes('useEffect');
   }
 
   /**
@@ -315,6 +315,17 @@ class DocumentationGenerator {
       .trim();
   }
 
+  /**
+   * Sanitize text for MDX body to prevent parsing errors
+   */
+  sanitizeForMdx(text) {
+    if (!text) return '';
+    return text
+      .replace(/<([0-9])/g, '\\<$1') // Escape < when followed by a digit
+      .replace(/{/g, '\\{')         // Escape { to prevent MDX expression parsing
+      .replace(/}/g, '\\}');        // Escape }
+  }
+
   /**
    * Generate API reference documentation
    */
@@ -337,23 +348,23 @@ This documentation is automatically generated from the Redstring source code.
 
 <CardGroup cols={2}>
 ${this.extractedData.classes.map(cls => `  <Card title="${cls.name}" href="/api/${cls.name.toLowerCase()}">
-    ${cls.description || `${cls.name} class documentation`}
+    ${this.sanitizeForMdx(cls.description) || `${cls.name} class documentation`}
   </Card>`).join('\n')}
 </CardGroup>
 
 ## Services
 
 <CardGroup cols={2}>
 ${this.extractedData.services.map(service => `  <Card title="${service.name}" href="/api/${service.name.toLowerCase()}">
-    ${service.description || `${service.name} service documentation`}
+    ${this.sanitizeForMdx(service.description) || `${service.name} service documentation`}
   </Card>`).join('\n')}
 </CardGroup>
 
 ## Components
 
 <CardGroup cols={2}>
 ${this.extractedData.components.map(comp => `  <Card title="${comp.name}" href="/components/${comp.name.toLowerCase()}">
-    ${comp.description || `${comp.name} component documentation`}
+    ${this.sanitizeForMdx(comp.description) || `${comp.name} component documentation`}
   </Card>`).join('\n')}
 </CardGroup>
 
@@ -377,7 +388,7 @@ description: "React component: ${component.description || component.name}"
 
 # ${component.name}
 
-${component.description || `The ${component.name} component.`}
+${this.sanitizeForMdx(component.description) || `The ${component.name} component.`}
 
 ## Location
 \`${component.filePath}\`
@@ -419,7 +430,7 @@ description: "Service: ${service.description || service.name}"
 
 # ${service.name}
 
-${service.description || `The ${service.name} service.`}
+${this.sanitizeForMdx(service.description) || `The ${service.name} service.`}
 
 ## Location
 \`${service.filePath}\`
@@ -433,7 +444,7 @@ ${service.functions.length > 0 ? service.functions.map(func => `
 ${func.signature}
 \`\`\`
 
-${func.description || 'No description available.'}
+${this.sanitizeForMdx(func.description) || 'No description available.'}
 `).join('\n') : 'No functions detected.'}
 
 ---

src/NodeCanvas.jsx

@@ -2158,19 +2158,17 @@ function NodeCanvas() {
 
   const mousePositionRef = useRef({ x: 0, y: 0 });
 
-  // Document-level mouse tracking during drag (captures events even over panels)
+  // Document-level mouse tracking (captures events even over panels or when propagation is stopped)
   useEffect(() => {
-    if (!draggingNodeInfo) return;
-
     const handleDocumentMouseMove = (e) => {
       mousePositionRef.current = { x: e.clientX, y: e.clientY };
     };
 
-    document.addEventListener('mousemove', handleDocumentMouseMove);
+    document.addEventListener('mousemove', handleDocumentMouseMove, { passive: true });
     return () => {
       document.removeEventListener('mousemove', handleDocumentMouseMove);
     };
-  }, [draggingNodeInfo]);
+  }, []);
 
   // --- Grid Snapping Helpers ---
   const snapToGrid = (mouseX, mouseY, nodeWidth, nodeHeight) => {
@@ -8090,6 +8088,27 @@ function NodeCanvas() {
         if (currentGraph) {
           const copied = copySelection(selectedInstanceIds, currentGraph, nodePrototypesMap, edgesMap);
           clipboardRef.current = copied;
+          console.log(`[NodeCanvas] Copied ${selectedInstanceIds.size} nodes to clipboard`);
+        }
+        return;
+      }
+
+      // Cut (Ctrl/Cmd+X)
+      if (cmdOrCtrl && e.key === 'x' && selectedInstanceIds.size > 0) {
+        e.preventDefault();
+        const currentGraph = graphsMap.get(activeGraphId);
+        if (currentGraph) {
+          // First copy
+          const copied = copySelection(selectedInstanceIds, currentGraph, nodePrototypesMap, edgesMap);
+          clipboardRef.current = copied;
+
+          // Then remove
+          storeActions.removeMultipleNodeInstances(activeGraphId, selectedInstanceIds);
+
+          // Clear selection
+          setSelectedInstanceIds(new Set());
+
+          console.log(`[NodeCanvas] Cut ${selectedInstanceIds.size} nodes to clipboard`);
         }
         return;
       }
@@ -8101,23 +8120,25 @@ function NodeCanvas() {
         if (currentGraph) {
           // Determine target position
           let targetPos;
-          const svgElement = document.querySelector('.node-canvas-svg');
+          const svgElement = document.querySelector('.canvas');
           const rect = svgElement?.getBoundingClientRect();
 
-          if (rect && !isTouchDeviceRef.current && mousePositionRef.current) {
+          if (rect && mousePositionRef.current) {
             // Desktop: use mouse position converted to canvas coords
             const clientX = mousePositionRef.current.x;
             const clientY = mousePositionRef.current.y;
             targetPos = {
               x: (clientX - rect.left - panOffset.x) / zoomLevel + canvasSize.offsetX,
               y: (clientY - rect.top - panOffset.y) / zoomLevel + canvasSize.offsetY
             };
+            console.log(`[NodeCanvas] Pasting at mouse position:`, targetPos, { clientX, clientY, rectLeft: rect.left, rectTop: rect.top, panX: panOffset.x, panY: panOffset.y, zoom: zoomLevel });
           } else {
             // Mobile fallback: offset from original center
             targetPos = {
               x: clipboardRef.current.originalCenter.x + 50,
               y: clipboardRef.current.originalCenter.y + 50
             };
+            console.log(`[NodeCanvas] Pasting at fallback position:`, targetPos);
           }
 
           const result = pasteClipboard(
@@ -8139,15 +8160,7 @@ function NodeCanvas() {
 
       if (isDeleteKey && nodesSelected) {
         e.preventDefault();
-        const idsToDelete = new Set(selectedInstanceIds); // Use local selection state
-
-        // Call removeNodeInstance action for each selected ID
-        idsToDelete.forEach(id => {
-          storeActions.removeNodeInstance(activeGraphId, id);
-        });
-
-        // Clear local selection state AFTER dispatching actions
-
+        storeActions.removeMultipleNodeInstances(activeGraphId, selectedInstanceIds);
         setSelectedInstanceIds(new Set());
       } else if (isDeleteKey && edgeSelected) {
         console.log('[NodeCanvas] Delete key pressed with edge selected:', {

src/store/graphStore.jsx

@@ -1455,6 +1455,50 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
       }));
     },
 
+    // Remove multiple instances and their connected edges in a single transaction
+    removeMultipleNodeInstances: (graphId, instanceIds) => {
+      if (!instanceIds || (instanceIds instanceof Set ? instanceIds.size === 0 : instanceIds.length === 0)) return;
+
+      const instanceIdSet = instanceIds instanceof Set ? instanceIds : new Set(instanceIds);
+
+      api.setChangeContext({
+        type: 'node_delete_batch',
+        target: 'instance',
+        graphId,
+        count: instanceIdSet.size
+      });
+
+      set(produce((draft) => {
+        const graph = draft.graphs.get(graphId);
+        if (!graph) return;
+
+        // Find all edges connected to any of the instances being removed
+        const edgesToDelete = [];
+        for (const [edgeId, edge] of draft.edges.entries()) {
+          if (instanceIdSet.has(edge.sourceId) || instanceIdSet.has(edge.destinationId)) {
+            edgesToDelete.push(edgeId);
+          }
+        }
+
+        // Delete the edges
+        edgesToDelete.forEach(edgeId => {
+          draft.edges.delete(edgeId);
+          if (graph.edgeIds) {
+            const index = graph.edgeIds.indexOf(edgeId);
+            if (index > -1) graph.edgeIds.splice(index, 1);
+          }
+        });
+
+        // Delete the instances
+        instanceIdSet.forEach(instanceId => {
+          graph.instances.delete(instanceId);
+          draft.pendingDeletions.delete(instanceId);
+        });
+
+        console.log(`[removeMultipleNodeInstances] Deleted ${instanceIdSet.size} instances and ${edgesToDelete.length} edges`);
+      }));
+    },
+
     // Immediately and permanently deletes a node instance (bypasses grace period)
     forceDeleteNodeInstance: (graphId, instanceId) => {
       const state = get();
@@ -2669,7 +2713,7 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
       draft.textSettings.fontSize = v;
       try {
         localStorage.setItem('redstring_text_font_size', String(v));
-      } catch (_) {}
+      } catch (_) { }
     })),
 
     setTextLineSpacing: (value) => set(produce((draft) => {
@@ -2681,7 +2725,7 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
       draft.textSettings.lineSpacing = v;
       try {
         localStorage.setItem('redstring_text_line_spacing', String(v));
-      } catch (_) {}
+      } catch (_) { }
     })),
 
     setLayoutScalePreset: (preset) => set(produce((draft) => {