system-canvas-standalone 0.2.37 → 0.2.39

package/dist/system-canvas.js

@@ -22382,6 +22382,7 @@ var SystemCanvas = (() => {
   // ../react/dist/components/CollaboratorsOverlay.js
   var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
   var import_react31 = __toESM(require_react(), 1);
+  var CLIP_GUARD_MARGIN = 100;
   var STYLE_ID = "system-canvas-collab-keyframes";
   function ensureKeyframes() {
     if (typeof document === "undefined")
@@ -22402,7 +22403,7 @@ var SystemCanvas = (() => {
 `;
     document.head.appendChild(style);
   }
-  function CollaboratorsOverlay({ collaborators, viewport, nodeMap, flashNodeIds }) {
+  function CollaboratorsOverlay({ collaborators, viewport, nodeMap, flashNodeIds, containerWidth = Infinity, containerHeight = Infinity }) {
     const keyframesInjected = (0, import_react31.useRef)(false);
     if (!keyframesInjected.current) {
       ensureKeyframes();
@@ -22460,27 +22461,54 @@ var SystemCanvas = (() => {
       if (!collab.cursor)
         return null;
       const screen = canvasToScreen(collab.cursor.x, collab.cursor.y, viewport);
+      if (screen.x < -CLIP_GUARD_MARGIN || screen.x > containerWidth + CLIP_GUARD_MARGIN || screen.y < -CLIP_GUARD_MARGIN || screen.y > containerHeight + CLIP_GUARD_MARGIN) {
+        return null;
+      }
       return (0, import_jsx_runtime32.jsxs)("div", { style: {
         position: "absolute",
         left: screen.x,
         top: screen.y,
         transform: "translate(0, 0)",
         userSelect: "none"
-      }, children: [(0, import_jsx_runtime32.jsx)("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime32.jsx)("path", { d: "M1 1L1 15L5 11L8 18L10 17L7 10L13 10L1 1Z", fill: collab.color, stroke: "#fff", strokeWidth: "1.5", strokeLinejoin: "round" }) }), (0, import_jsx_runtime32.jsx)("div", { style: {
+      }, children: [(0, import_jsx_runtime32.jsx)("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime32.jsx)("path", { d: "M1 1L1 15L5 11L8 18L10 17L7 10L13 10L1 1Z", fill: collab.color, stroke: "#fff", strokeWidth: "1.5", strokeLinejoin: "round" }) }), (0, import_jsx_runtime32.jsxs)("div", { style: {
         position: "absolute",
         top: 18,
         left: 8,
-        fontSize: 11,
-        lineHeight: "16px",
-        padding: "1px 6px",
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        background: collab.color,
         borderRadius: 8,
+        padding: "1px 4px 1px 2px",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+        whiteSpace: "nowrap",
+        fontFamily: "sans-serif"
+      }, children: [(0, import_jsx_runtime32.jsx)("div", { style: {
+        width: 16,
+        height: 16,
+        borderRadius: "50%",
+        overflow: "hidden",
+        flexShrink: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: collab.image ? "transparent" : collab.color
+      }, children: collab.image ? (0, import_jsx_runtime32.jsx)("img", { src: collab.image, width: 16, height: 16, style: { objectFit: "cover", borderRadius: "50%" } }) : (0, import_jsx_runtime32.jsx)("div", { style: {
+        width: 16,
+        height: 16,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         background: collab.color,
         color: "#fff",
-        whiteSpace: "nowrap",
-        fontFamily: "sans-serif",
-        fontWeight: 500,
-        boxShadow: "0 1px 3px rgba(0,0,0,0.3)"
-      }, children: collab.name })] }, `cursor-${collab.id}`);
+        fontSize: 9,
+        fontWeight: 700
+      }, children: collab.name ? collab.name[0].toUpperCase() : "?" }) }), (0, import_jsx_runtime32.jsx)("span", { style: {
+        fontSize: 11,
+        lineHeight: "16px",
+        color: "#fff",
+        fontWeight: 500
+      }, children: collab.name })] })] }, `cursor-${collab.id}`);
     }), Array.from(flashNodeIds.keys()).map((nodeId) => {
       const node = nodeMap.get(nodeId);
       if (!node)
@@ -22888,7 +22916,8 @@ var SystemCanvas = (() => {
       navigateToRoot: () => {
         navigateToBreadcrumbRef.current(0);
       },
-      getViewport: () => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }
+      getViewport: () => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 },
+      getSvgElement: () => viewportHandleRef.current?.getSvgElement() ?? null
     }), [forwardedRef]);
     const [editingId, setEditingId] = (0, import_react33.useState)(null);
     const [selectedEdgeId, setSelectedEdgeId] = (0, import_react33.useState)(null);
@@ -23612,7 +23641,7 @@ var SystemCanvas = (() => {
       fontFamily: theme.node.fontFamily,
       fontSize: 12,
       backdropFilter: "blur(8px)"
-    }, children: "Loading..." }), (0, import_jsx_runtime34.jsx)(Viewport, { ref: viewportHandleRef, nodes, edges, nodeMap, theme, edgeStyle, columns: currentCanvas.columns, rows: currentCanvas.rows, canvases, minZoom: effectiveMinZoom, maxZoom: effectiveMaxZoom, defaultViewport, panMode, autoFit, canvasRef: currentCanvasRef, handoffTransform: pendingHandoff, onHandoffApplied: handleHandoffApplied, handoffFadeMs: zoomNavConfig.fadeDuration, onViewportChange: handleViewportChange, onNodeClick: handleNodeClick, onNodeDoubleClick: handleNodeDoubleClick, onNodeNavigate: handleNodeNavigate, onEdgeClick: handleEdgeClick, onEdgeDoubleClick: handleEdgeDoubleClick, onCanvasClick: editable ? handleCanvasClick : void 0, onCanvasContextMenu: handleCanvasContextMenu, onNodeContextMenu: handleNodeContextMenu, onEdgeContextMenu: handleEdgeContextMenu, onNodePointerDown: editable ? onNodePointerDown : void 0, selectedIds: editable ? selectedIds : void 0, marqueeRect: editable ? marqueeRect : null, marqueeActiveRef: editable ? marqueeActiveRef : void 0, editingId: editable ? editingId : null, selectedEdgeId: editable ? selectedEdgeId : null, editingEdgeId: editable ? editingEdgeId : null, dragOverrides, dropTargetId, resizeOverrides, onResizeHandlePointerDown: editable ? onResizeHandlePointerDown : void 0, onEditorCommit: handleEditorCommit, onEditorCancel: handleEditorCancel, onEdgeEditorCommit: handleEdgeEditorCommit, onEdgeEditorCancel: handleEdgeEditorCancel, onEdgeWaypointUpdate: editable ? handleEdgeWaypointUpdate : void 0, pendingEdge: editable ? pendingEdge : null, onConnectionHandlePointerDown: editable ? onConnectionHandlePointerDown : void 0, edgeCreateEnabled: editable, alignmentGuides: editable ? alignmentGuides : void 0, dimmedNodeIds: dimmedIds, highlightedNodeIds: matchingIds, activeMatchNodeId: activeMatchId, viewportState: collaboratorViewport }), collaborators.length > 0 || flashNodeIds.size > 0 ? (0, import_jsx_runtime34.jsx)(CollaboratorsOverlay, { collaborators, viewport: collaboratorViewport, nodeMap, flashNodeIds }) : null, showLaneHeaders && (0, import_jsx_runtime34.jsx)(LaneHeaders, { columns: currentCanvas.columns, rows: currentCanvas.rows, theme, getViewport: getViewportState, width: containerSize.width, height: containerSize.height, pinned: laneHeaders === "pinned" }), editable && showNodeToolbar && selectedIds.size === 1 && selectedResolvedNode && !editingId && (0, import_jsx_runtime34.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
+    }, children: "Loading..." }), (0, import_jsx_runtime34.jsx)(Viewport, { ref: viewportHandleRef, nodes, edges, nodeMap, theme, edgeStyle, columns: currentCanvas.columns, rows: currentCanvas.rows, canvases, minZoom: effectiveMinZoom, maxZoom: effectiveMaxZoom, defaultViewport, panMode, autoFit, canvasRef: currentCanvasRef, handoffTransform: pendingHandoff, onHandoffApplied: handleHandoffApplied, handoffFadeMs: zoomNavConfig.fadeDuration, onViewportChange: handleViewportChange, onNodeClick: handleNodeClick, onNodeDoubleClick: handleNodeDoubleClick, onNodeNavigate: handleNodeNavigate, onEdgeClick: handleEdgeClick, onEdgeDoubleClick: handleEdgeDoubleClick, onCanvasClick: editable ? handleCanvasClick : void 0, onCanvasContextMenu: handleCanvasContextMenu, onNodeContextMenu: handleNodeContextMenu, onEdgeContextMenu: handleEdgeContextMenu, onNodePointerDown: editable ? onNodePointerDown : void 0, selectedIds: editable ? selectedIds : void 0, marqueeRect: editable ? marqueeRect : null, marqueeActiveRef: editable ? marqueeActiveRef : void 0, editingId: editable ? editingId : null, selectedEdgeId: editable ? selectedEdgeId : null, editingEdgeId: editable ? editingEdgeId : null, dragOverrides, dropTargetId, resizeOverrides, onResizeHandlePointerDown: editable ? onResizeHandlePointerDown : void 0, onEditorCommit: handleEditorCommit, onEditorCancel: handleEditorCancel, onEdgeEditorCommit: handleEdgeEditorCommit, onEdgeEditorCancel: handleEdgeEditorCancel, onEdgeWaypointUpdate: editable ? handleEdgeWaypointUpdate : void 0, pendingEdge: editable ? pendingEdge : null, onConnectionHandlePointerDown: editable ? onConnectionHandlePointerDown : void 0, edgeCreateEnabled: editable, alignmentGuides: editable ? alignmentGuides : void 0, dimmedNodeIds: dimmedIds, highlightedNodeIds: matchingIds, activeMatchNodeId: activeMatchId, viewportState: collaboratorViewport }), collaborators.length > 0 || flashNodeIds.size > 0 ? (0, import_jsx_runtime34.jsx)(CollaboratorsOverlay, { collaborators, viewport: collaboratorViewport, nodeMap, flashNodeIds, containerWidth: containerSize.width, containerHeight: containerSize.height }) : null, showLaneHeaders && (0, import_jsx_runtime34.jsx)(LaneHeaders, { columns: currentCanvas.columns, rows: currentCanvas.rows, theme, getViewport: getViewportState, width: containerSize.width, height: containerSize.height, pinned: laneHeaders === "pinned" }), editable && showNodeToolbar && selectedIds.size === 1 && selectedResolvedNode && !editingId && (0, import_jsx_runtime34.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
       wrappedOnNodeUpdate(selectedResolvedNode.id, update, currentCanvasRef);
     }, onDelete: () => {
       wrappedOnNodeDelete(selectedResolvedNode.id, currentCanvasRef);