@industry-theme/principal-view-panels 0.12.117 → 0.12.118

package/dist/panels/CanvasEditorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAqD,gBAAgB,EAAgF,MAAM,mCAAmC,CAAC;AAE3M,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAuDrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IAEH;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuzE9D,CAAC"}
+{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAqD,gBAAgB,EAAgF,MAAM,mCAAmC,CAAC;AAE3M,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAwDrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IAEH;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAixE9D,CAAC"}

package/dist/panels.bundle.js

@@ -87212,10 +87212,13 @@ const CustomNode = (props) => {
       return jsx(OtelBoundaryNode, { ...props });
   }
   const { theme: theme2 } = useTheme();
-  const { onNodeResizeEnd, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
+  const { onNodeResizeEnd, onNodeTextChange, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
   const nodeId = useNodeId();
   const [isHovered, setIsHovered] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingText, setEditingText] = useState("");
   const nodeRef = useRef(null);
+  const textareaRef = useRef(null);
   const nodeProps = data;
   const {
     typeDefinition,
@@ -87463,7 +87466,7 @@ const CustomNode = (props) => {
   const status = nodeData == null ? void 0 : nodeData.status;
   const strokeColor = baseStrokeColor;
   const color2 = fillColor;
-  const displayName = nodeProps.name;
+  const displayName = nodeProps.pendingText ?? nodeProps.name;
   const eventData = nodeData == null ? void 0 : nodeData.event;
   const otelData = nodeData == null ? void 0 : nodeData.otel;
   const boundaryData = nodeData == null ? void 0 : nodeData.boundary;
@@ -87516,6 +87519,42 @@ const CustomNode = (props) => {
   };
   const animationClass = getAnimationClass();
   const isGroup = nodeData.canvasType === "group";
+  const isTextNode = nodeData.canvasType === "text";
+  const isInlineEditable = (isGroup || isTextNode) && editable;
+  const lastClickTimeRef = useRef(0);
+  const handleNodeDoubleClick = useCallback((event) => {
+    if (!isInlineEditable || !nodeId || !onNodeTextChange)
+      return;
+    event.stopPropagation();
+    event.preventDefault();
+    setEditingText(displayName || "");
+    setIsEditing(true);
+    setTimeout(() => {
+      var _a3, _b3;
+      (_a3 = textareaRef.current) == null ? void 0 : _a3.focus();
+      (_b3 = textareaRef.current) == null ? void 0 : _b3.select();
+    }, 0);
+  }, [isInlineEditable, nodeId, onNodeTextChange, displayName]);
+  const handleNodeClick2 = useCallback((event) => {
+    const now2 = Date.now();
+    const timeSinceLastClick = now2 - lastClickTimeRef.current;
+    if (timeSinceLastClick < 300) {
+      handleNodeDoubleClick(event);
+    }
+    lastClickTimeRef.current = now2;
+  }, [handleNodeDoubleClick]);
+  const handleSaveText = useCallback(() => {
+    if (!nodeId || !onNodeTextChange)
+      return;
+    if (editingText !== displayName) {
+      onNodeTextChange(nodeId, editingText);
+    }
+    setIsEditing(false);
+  }, [nodeId, onNodeTextChange, editingText, displayName]);
+  const handleCancelEdit = useCallback(() => {
+    setIsEditing(false);
+    setEditingText("");
+  }, []);
   const getShapeStyles = () => {
     const borderStyle = status === "draft" ? "dotted" : status === "approved" ? "dashed" : "solid";
     const baseStyles = {
@@ -87728,7 +87767,7 @@ const CustomNode = (props) => {
     fontFamily: theme2.fonts.body,
     color: "#D0021B",
     fontWeight: theme2.fontWeights.bold
-  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, references, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
+  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, references, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseDown: handleMouseDown, onClick: handleNodeClick2, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), isBoundaryNode ? renderBoundaryBadge() : jsxs(Fragment, { children: [renderSourcesBadge(), renderReferencesBadge()] }), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
     ...isGroup ? { width: "100%" } : {}
   }, children: [isGroup ? jsxs("div", { style: {
     display: "flex",
@@ -87749,7 +87788,40 @@ const CustomNode = (props) => {
     fontFamily: theme2.fonts.body,
     color: "#D0021B",
     fontWeight: theme2.fontWeights.bold
-  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, references, visible: showTooltip, nodeRef })] }), jsx(Handle, { type: "source", position: Position.Top, id: "top-out", style: getHandleStyle() }), jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom-out", style: getHandleStyle() }), jsx(Handle, { type: "source", position: Position.Left, id: "left-out", style: getHandleStyle() }), jsx(Handle, { type: "source", position: Position.Right, id: "right-out", style: getHandleStyle() }), jsx("style", { children: `
+  }, children: "⚠️" })] }) }), isEditing && isInlineEditable && jsx("div", { style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1e3,
+    display: "flex",
+    flexDirection: "column",
+    padding: theme2.space[1],
+    boxSizing: "border-box"
+  }, onClick: (e) => e.stopPropagation(), children: jsx("textarea", { ref: textareaRef, value: editingText, onChange: (e) => setEditingText(e.target.value), placeholder: "Enter text...", style: {
+    flex: 1,
+    width: "100%",
+    padding: theme2.space[2],
+    fontSize: theme2.fontSizes[1],
+    fontFamily: theme2.fonts.body,
+    color: theme2.colors.text,
+    backgroundColor: theme2.colors.background,
+    border: `3px solid ${theme2.colors.primary}`,
+    borderRadius: theme2.radii[1],
+    outline: "none",
+    resize: "none",
+    boxSizing: "border-box",
+    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.3)"
+  }, onKeyDown: (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSaveText();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancelEdit();
+    }
+  }, onBlur: handleSaveText }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources, references, visible: showTooltip, nodeRef })] }), jsx(Handle, { type: "source", position: Position.Top, id: "top-out", style: getHandleStyle() }), jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom-out", style: getHandleStyle() }), jsx(Handle, { type: "source", position: Position.Left, id: "left-out", style: getHandleStyle() }), jsx(Handle, { type: "source", position: Position.Right, id: "right-out", style: getHandleStyle() }), jsx("style", { children: `
         /* Processing pulse - continuous breathing effect */
         .node-pulse {
           animation: node-pulse ease-in-out infinite;
@@ -180518,6 +180590,7 @@ const edgeTypes = { custom: CustomEdge };
 const createEmptyEditState = () => ({
   positionChanges: /* @__PURE__ */ new Map(),
   dimensionChanges: /* @__PURE__ */ new Map(),
+  textChanges: /* @__PURE__ */ new Map(),
   nodeUpdates: /* @__PURE__ */ new Map(),
   deletedNodeIds: /* @__PURE__ */ new Set(),
   createdEdges: [],
@@ -180561,11 +180634,12 @@ const CenterIndicator = ({ color: color2 }) => {
     zIndex: 5
   }, children: [jsx("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("circle", { cx: screenX, cy: screenY, r: 3, fill: color2, opacity: 0.7 })] });
 };
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels = true }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, resetTextChangesVersionRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels = true }) => {
   const { fitView: fitView2, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
   const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
+  const [textChangesVersion, setTextChangesVersion] = useState(0);
   const hidingNodeRef = useRef(false);
   useEffect(() => {
     const handleKeyDown = (e) => {
@@ -180644,12 +180718,12 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     propNodesRef.current = propNodes;
     setLocalNodes(propNodes);
   }, [propNodes, draggableNodeIds]);
-  const nodes = localNodes;
+  const nodes = editable ? localNodes.filter((node2) => !editStateRef.current.deletedNodeIds.has(node2.id)) : localNodes;
   const edges = editable ? localEdges : propEdges;
   const xyflowNodesRef = useRef([]);
   const dragStartPositionsRef = useRef(/* @__PURE__ */ new Map());
   const checkHasChanges = useCallback((state) => {
-    return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
+    return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.textChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
   }, []);
   const updateEditState = useCallback((updater) => {
     const newState = updater(editStateRef.current);
@@ -180677,6 +180751,50 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       return { ...prev, dimensionChanges: newDimensions };
     });
   }, [editable, updateEditState, pushHistory]);
+  const handleNodeTextChange = useCallback((nodeId, text2) => {
+    if (!editable)
+      return;
+    const beforeText = editStateRef.current.textChanges.get(nodeId) ?? "";
+    pushHistory([
+      {
+        type: "text",
+        nodeId,
+        before: beforeText,
+        after: text2
+      }
+    ]);
+    updateEditState((prev) => {
+      const newTextChanges = new Map(prev.textChanges);
+      newTextChanges.set(nodeId, text2);
+      return { ...prev, textChanges: newTextChanges };
+    });
+    setTextChangesVersion((v2) => v2 + 1);
+  }, [editable, updateEditState, pushHistory]);
+  const handleDeleteSelectedNodes = useCallback(() => {
+    if (!editable || selectedNodeIds.size === 0)
+      return;
+    const nodesToDelete = Array.from(selectedNodeIds);
+    const historyEntries = [];
+    for (const nodeId of nodesToDelete) {
+      const node2 = localNodes.find((n) => n.id === nodeId);
+      if (!node2)
+        continue;
+      historyEntries.push({
+        type: "nodeDelete",
+        nodeId,
+        nodeData: node2
+      });
+    }
+    if (historyEntries.length > 0) {
+      pushHistory(historyEntries);
+      updateEditState((prev) => {
+        const newDeletedNodeIds = new Set(prev.deletedNodeIds);
+        nodesToDelete.forEach((id2) => newDeletedNodeIds.add(id2));
+        return { ...prev, deletedNodeIds: newDeletedNodeIds };
+      });
+      setSelectedNodeIds(/* @__PURE__ */ new Set());
+    }
+  }, [editable, selectedNodeIds, localNodes, pushHistory, updateEditState]);
   const handleToggleNodeHidden = useCallback((nodeId) => {
     hidingNodeRef.current = true;
     setHiddenNodeIds((prev) => {
@@ -180725,9 +180843,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   }, [localEdges, localNodes]);
   const graphEditContextValue = useMemo(() => ({
     onNodeResizeEnd: handleNodeResizeEnd,
+    onNodeTextChange: handleNodeTextChange,
     onToggleNodeHidden: handleToggleNodeHidden,
     onHideUnconnectedNodes: handleHideUnconnectedNodes
-  }), [handleNodeResizeEnd, handleToggleNodeHidden, handleHideUnconnectedNodes]);
+  }), [handleNodeResizeEnd, handleNodeTextChange, handleToggleNodeHidden, handleHideUnconnectedNodes]);
   const detectAlignmentGuides = useCallback((draggingNodeId, nodes2) => {
     const threshold = 5;
     const guides = [];
@@ -181167,6 +181286,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       var _a2, _b2;
       const animation = animationState.nodeAnimations[node2.id];
       const pendingPosition = editStateRef.current.positionChanges.get(node2.id);
+      const pendingText = editStateRef.current.textChanges.get(node2.id);
       const isDraggable = editable || (draggableNodeIds == null ? void 0 : draggableNodeIds.has(node2.id));
       const hasDraggableNodeIds = draggableNodeIds && draggableNodeIds.size > 0;
       const dataWidth = typeof ((_a2 = node2.data) == null ? void 0 : _a2.width) === "number" ? node2.data.width : void 0;
@@ -181184,6 +181304,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         data: {
           ...node2.data,
           editable,
+          pendingText,
           tooltipsEnabled: showTooltips,
           shiftKeyPressed,
           isHighlighted: highlightedNodeId === node2.id,
@@ -181196,7 +181317,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
       };
     });
-  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds]);
+  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds, textChangesVersion]);
   const baseNodesKey = useMemo(() => {
     return nodes.map((n) => n.id).sort().join(",");
   }, [nodes]);
@@ -181238,6 +181359,21 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       data: { ...n.data, isHidden: hiddenNodeIds.has(n.id) }
     })));
   }, [editable, hiddenNodeIds]);
+  const prevTextChangesVersionRef = useRef(textChangesVersion);
+  useEffect(() => {
+    if (!editable)
+      return;
+    if (prevTextChangesVersionRef.current === textChangesVersion)
+      return;
+    prevTextChangesVersionRef.current = textChangesVersion;
+    setXyflowLocalNodes((nodes2) => nodes2.map((n) => {
+      const pendingText = editStateRef.current.textChanges.get(n.id);
+      return {
+        ...n,
+        data: { ...n.data, pendingText }
+      };
+    }));
+  }, [editable, textChangesVersion]);
   const prevEditableRef = useRef(editable);
   useEffect(() => {
     if (editable && !prevEditableRef.current) {
@@ -181302,6 +181438,21 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             return { ...prev, dimensionChanges: newDimensions };
           });
           break;
+        case "text":
+          updateEditState((prev) => {
+            const newTextChanges = new Map(prev.textChanges);
+            newTextChanges.set(entry.nodeId, entry.before);
+            return { ...prev, textChanges: newTextChanges };
+          });
+          setTextChangesVersion((v2) => v2 + 1);
+          break;
+        case "nodeDelete":
+          updateEditState((prev) => {
+            const newDeletedNodeIds = new Set(prev.deletedNodeIds);
+            newDeletedNodeIds.delete(entry.nodeId);
+            return { ...prev, deletedNodeIds: newDeletedNodeIds };
+          });
+          break;
         case "edgeCreate":
           setLocalEdges((edges2) => edges2.filter((e) => e.id !== entry.edge.id));
           updateEditState((prev) => ({
@@ -181341,6 +181492,21 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             return { ...prev, dimensionChanges: newDimensions };
           });
           break;
+        case "text":
+          updateEditState((prev) => {
+            const newTextChanges = new Map(prev.textChanges);
+            newTextChanges.set(entry.nodeId, entry.after);
+            return { ...prev, textChanges: newTextChanges };
+          });
+          setTextChangesVersion((v2) => v2 + 1);
+          break;
+        case "nodeDelete":
+          updateEditState((prev) => {
+            const newDeletedNodeIds = new Set(prev.deletedNodeIds);
+            newDeletedNodeIds.add(entry.nodeId);
+            return { ...prev, deletedNodeIds: newDeletedNodeIds };
+          });
+          break;
         case "edgeCreate":
           setLocalEdges((edges2) => [...edges2, entry.edge]);
           updateEditState((prev) => ({
@@ -181392,10 +181558,18 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         e.preventDefault();
         applyRedo();
       }
+      if (e.key === "Delete" || e.key === "Backspace") {
+        const activeElement = document.activeElement;
+        const isEditingText = (activeElement == null ? void 0 : activeElement.tagName) === "INPUT" || (activeElement == null ? void 0 : activeElement.tagName) === "TEXTAREA";
+        if (!isEditingText) {
+          e.preventDefault();
+          handleDeleteSelectedNodes();
+        }
+      }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [editable, applyUndo, applyRedo]);
+  }, [editable, applyUndo, applyRedo, handleDeleteSelectedNodes]);
   useEffect(() => {
     undoRedoFunctionsRef.current = {
       applyUndo,
@@ -181596,6 +181770,11 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       onPendingChangesChange == null ? void 0 : onPendingChangesChange(false);
     };
   }, [xyflowNodesBase, xyflowEdgesWithElk, onPendingChangesChange]);
+  useEffect(() => {
+    resetTextChangesVersionRef.current = () => {
+      setTextChangesVersion(0);
+    };
+  }, []);
   const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesWithElk;
   const handleEdgesChange = useCallback((changes) => {
     if (!editable)
@@ -181839,6 +182018,7 @@ const GraphRenderer = forwardRef((props, ref) => {
   }, [canvas, containerWidth, containerHeight]);
   const editStateRef = useRef(createEmptyEditState());
   const resetVisualStateRef = useRef(null);
+  const resetTextChangesVersionRef = useRef(null);
   const { canUndo: canUndoState, canRedo: canRedoState, undo: undoFromStack, redo: redoFromStack, pushHistory, clearHistory } = useUndoRedo();
   const undoRedoFunctionsRef = useRef(null);
   useImperativeHandle(ref, () => ({
@@ -181853,6 +182033,10 @@ const GraphRenderer = forwardRef((props, ref) => {
           nodeId,
           dimensions
         })),
+        textChanges: Array.from(state.textChanges.entries()).map(([nodeId, text2]) => ({
+          nodeId,
+          text: text2
+        })),
         nodeUpdates: Array.from(state.nodeUpdates.entries()).map(([nodeId, updates]) => ({
           nodeId,
           updates
@@ -181866,18 +182050,19 @@ const GraphRenderer = forwardRef((props, ref) => {
           targetHandle: e.targetHandle
         })),
         deletedEdges: state.deletedEdges.map((e) => ({ from: e.from, to: e.to, type: e.type })),
-        hasChanges: state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0
+        hasChanges: state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.textChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0
       };
     },
     resetEditState: () => {
-      var _a2;
+      var _a2, _b2;
       editStateRef.current = createEmptyEditState();
-      (_a2 = resetVisualStateRef.current) == null ? void 0 : _a2.call(resetVisualStateRef);
+      (_a2 = resetTextChangesVersionRef.current) == null ? void 0 : _a2.call(resetTextChangesVersionRef);
+      (_b2 = resetVisualStateRef.current) == null ? void 0 : _b2.call(resetVisualStateRef);
       clearHistory();
     },
     hasUnsavedChanges: () => {
       const state = editStateRef.current;
-      return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
+      return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.textChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
     },
     canUndo: () => canUndoState,
     canRedo: () => canRedoState,
@@ -181907,7 +182092,7 @@ const GraphRenderer = forwardRef((props, ref) => {
   if (isWaitingForViewport) {
     return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" } });
   }
-  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels }) }) }) });
+  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, resetTextChangesVersionRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
 function extractNamespace(name2, strategy) {
@@ -190981,7 +191166,8 @@ const CanvasEditorPanel = ({
     colorPickerPosition: null,
     // Text editor state
     editingNodeId: null,
-    editingNodeText: ""
+    editingNodeText: "",
+    editingNodeScreenPosition: null
   });
   const observerRef = useRef(null);
   const containerRefCallback = useCallback((node2) => {
@@ -191421,17 +191607,30 @@ const CanvasEditorPanel = ({
     } else if (node2.type === "group" && "label" in node2) {
       currentText = node2.label || "";
     }
+    const nodeElement = document.querySelector(`[data-id="${nodeId}"]`);
+    let screenPosition = null;
+    if (nodeElement) {
+      const rect = nodeElement.getBoundingClientRect();
+      screenPosition = {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      };
+    }
     setState((prev) => ({
       ...prev,
       editingNodeId: nodeId,
-      editingNodeText: currentText
+      editingNodeText: currentText,
+      editingNodeScreenPosition: screenPosition
     }));
   }, [state.canvas, state.isEditMode]);
   const closeTextEditor = useCallback(() => {
     setState((prev) => ({
       ...prev,
       editingNodeId: null,
-      editingNodeText: ""
+      editingNodeText: "",
+      editingNodeScreenPosition: null
     }));
   }, []);
   const saveTextEditorChanges = useCallback(() => {
@@ -191462,7 +191661,8 @@ const CanvasEditorPanel = ({
       libraryVersion: prev.libraryVersion + 1,
       hasUnsavedChanges: true,
       editingNodeId: null,
-      editingNodeText: ""
+      editingNodeText: "",
+      editingNodeScreenPosition: null
     }));
   }, [state.canvas, state.editingNodeId, state.editingNodeText]);
   const handleTextEditorChange = useCallback((newText) => {
@@ -192648,135 +192848,77 @@ const CanvasEditorPanel = ({
                 }
               )
             ] }),
-            state.editingNodeId && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "fixed",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  backgroundColor: "rgba(0, 0, 0, 0.5)",
-                  zIndex: 90,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                onClick: closeTextEditor,
-                children: /* @__PURE__ */ jsxs(
+            state.editingNodeId && state.editingNodeScreenPosition && (() => {
+              const pos = state.editingNodeScreenPosition;
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "fixed",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      zIndex: 90
+                    },
+                    onClick: () => {
+                      saveTextEditorChanges();
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
                   "div",
                   {
                     style: {
-                      backgroundColor: theme2.colors.background,
-                      border: `2px solid ${theme2.colors.primary}`,
-                      borderRadius: theme2.radii[2],
-                      padding: theme2.space[4],
-                      boxShadow: "0 8px 24px rgba(0, 0, 0, 0.3)",
-                      minWidth: 400,
-                      maxWidth: 600,
-                      width: "90%"
+                      position: "fixed",
+                      left: `${pos.x}px`,
+                      top: `${pos.y}px`,
+                      width: `${pos.width}px`,
+                      height: `${pos.height}px`,
+                      zIndex: 100,
+                      pointerEvents: "auto"
                     },
                     onClick: (e) => e.stopPropagation(),
-                    children: [
-                      /* @__PURE__ */ jsx("div", { style: {
-                        marginBottom: theme2.space[3],
-                        fontSize: theme2.fontSizes[2],
-                        fontWeight: theme2.fontWeights.semibold,
-                        color: theme2.colors.text
-                      }, children: (() => {
-                        var _a3, _b3;
-                        const node2 = (_b3 = (_a3 = state.canvas) == null ? void 0 : _a3.nodes) == null ? void 0 : _b3.find((n) => n.id === state.editingNodeId);
-                        if ((node2 == null ? void 0 : node2.type) === "group") return "Edit Group Label";
-                        return "Edit Text Node";
-                      })() }),
-                      /* @__PURE__ */ jsx(
-                        "textarea",
-                        {
-                          autoFocus: true,
-                          value: state.editingNodeText,
-                          onChange: (e) => handleTextEditorChange(e.target.value),
-                          placeholder: "Enter text...",
-                          style: {
-                            width: "100%",
-                            minHeight: 150,
-                            padding: theme2.space[2],
-                            fontSize: theme2.fontSizes[1],
-                            fontFamily: theme2.fonts.body,
-                            color: theme2.colors.text,
-                            backgroundColor: theme2.colors.backgroundSecondary,
-                            border: `1px solid ${theme2.colors.border}`,
-                            borderRadius: theme2.radii[1],
-                            outline: "none",
-                            resize: "vertical",
-                            boxSizing: "border-box"
-                          },
-                          onKeyDown: (e) => {
-                            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                              e.preventDefault();
-                              saveTextEditorChanges();
-                            }
-                            if (e.key === "Escape") {
-                              e.preventDefault();
-                              closeTextEditor();
-                            }
+                    children: /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        autoFocus: true,
+                        value: state.editingNodeText,
+                        onChange: (e) => handleTextEditorChange(e.target.value),
+                        placeholder: "Enter text...",
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          padding: theme2.space[2],
+                          fontSize: theme2.fontSizes[1],
+                          fontFamily: theme2.fonts.body,
+                          color: theme2.colors.text,
+                          backgroundColor: theme2.colors.background,
+                          border: `3px solid ${theme2.colors.primary}`,
+                          borderRadius: theme2.radii[1],
+                          outline: "none",
+                          resize: "none",
+                          boxSizing: "border-box",
+                          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.3)"
+                        },
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            saveTextEditorChanges();
                           }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { style: {
-                        marginTop: theme2.space[3],
-                        display: "flex",
-                        gap: theme2.space[2],
-                        justifyContent: "space-between",
-                        alignItems: "center"
-                      }, children: [
-                        /* @__PURE__ */ jsx("div", { style: {
-                          fontSize: theme2.fontSizes[0],
-                          color: theme2.colors.textMuted,
-                          fontStyle: "italic"
-                        }, children: "⌘+Enter to save • Esc to cancel" }),
-                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: theme2.space[2] }, children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: closeTextEditor,
-                              style: {
-                                padding: `${theme2.space[2]} ${theme2.space[3]}`,
-                                fontSize: theme2.fontSizes[1],
-                                fontFamily: theme2.fonts.body,
-                                color: theme2.colors.text,
-                                backgroundColor: theme2.colors.backgroundSecondary,
-                                border: `1px solid ${theme2.colors.border}`,
-                                borderRadius: theme2.radii[1],
-                                cursor: "pointer"
-                              },
-                              children: "Cancel"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: saveTextEditorChanges,
-                              style: {
-                                padding: `${theme2.space[2]} ${theme2.space[3]}`,
-                                fontSize: theme2.fontSizes[1],
-                                fontFamily: theme2.fonts.body,
-                                color: "white",
-                                backgroundColor: theme2.colors.primary,
-                                border: "none",
-                                borderRadius: theme2.radii[1],
-                                cursor: "pointer"
-                              },
-                              children: "Save"
-                            }
-                          )
-                        ] })
-                      ] })
-                    ]
+                          if (e.key === "Escape") {
+                            e.preventDefault();
+                            closeTextEditor();
+                          }
+                        },
+                        onBlur: saveTextEditorChanges
+                      }
+                    )
                   }
                 )
-              }
-            ) }),
+              ] });
+            })(),
             copiedNodesCount !== null && /* @__PURE__ */ jsxs("div", { style: {
               position: "absolute",
               bottom: 16,