@industry-theme/principal-view-panels 0.1.17 → 0.1.18

package/dist/panels.bundle.js

@@ -47074,7 +47074,7 @@ function requireCustomNode() {
   const react_1 = /* @__PURE__ */ requireUmd();
   const iconResolver_1 = requireIconResolver();
   const CustomNode$1 = ({ data, selected }) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2, _p;
     const nodeProps = data;
     const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false } = nodeProps;
     if (!typeDefinition) {
@@ -47107,7 +47107,7 @@ function requireCustomNode() {
     const animationClass = getAnimationClass();
     const isGroup = nodeData.canvasType === "group";
     const getShapeStyles = () => {
-      var _a2, _b2, _c2, _d2, _e3;
+      var _a2, _b2;
       const baseStyles = {
         padding: "12px 16px",
         backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : "white",
@@ -47115,6 +47115,9 @@ function requireCustomNode() {
         border: `2px solid ${hasViolations ? "#D0021B" : strokeColor}`,
         fontSize: "12px",
         fontWeight: 500,
+        // Use 100% width/height to fill the node container (for resizing support)
+        width: "100%",
+        height: "100%",
         minWidth: ((_a2 = typeDefinition.size) == null ? void 0 : _a2.width) || 80,
         minHeight: ((_b2 = typeDefinition.size) == null ? void 0 : _b2.height) || 40,
         display: "flex",
@@ -47123,16 +47126,15 @@ function requireCustomNode() {
         justifyContent: isGroup ? "flex-start" : "center",
         gap: "4px",
         boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
-        transition: "all 0.2s ease",
-        animationDuration: animationType ? `${animationDuration}ms` : void 0
+        transition: "box-shadow 0.2s ease",
+        animationDuration: animationType ? `${animationDuration}ms` : void 0,
+        boxSizing: "border-box"
       };
       switch (typeDefinition.shape) {
         case "circle":
           return {
             ...baseStyles,
             borderRadius: "50%",
-            width: ((_c2 = typeDefinition.size) == null ? void 0 : _c2.width) || 80,
-            height: ((_d2 = typeDefinition.size) == null ? void 0 : _d2.height) || 80,
             padding: "8px"
           };
         case "hexagon":
@@ -47150,12 +47152,11 @@ function requireCustomNode() {
             // Shadow handled by wrapper
           };
         case "diamond":
-          const diamondSize = ((_e3 = typeDefinition.size) == null ? void 0 : _e3.width) || 70;
           return {
             ...baseStyles,
             transform: "rotate(45deg)",
-            width: diamondSize,
-            height: diamondSize,
+            width: "100%",
+            height: "100%",
             padding: "8px"
           };
         case "rectangle":
@@ -47168,16 +47169,24 @@ function requireCustomNode() {
     };
     const isDiamond = typeDefinition.shape === "diamond";
     const isHexagon = typeDefinition.shape === "hexagon";
+    const isCircle = typeDefinition.shape === "circle";
+    const keepAspectRatio = isCircle || isDiamond;
+    const minWidth = ((_g = typeDefinition.size) == null ? void 0 : _g.width) || 80;
+    const minHeight = ((_h = typeDefinition.size) == null ? void 0 : _h.height) || (isCircle ? minWidth : 40);
     const hexagonClipPath = "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)";
     const hexagonBorderWidth = 2;
     const hexagonBorderStyle = isHexagon ? {
       position: "relative",
       clipPath: hexagonClipPath,
       backgroundColor: hasViolations ? "#D0021B" : strokeColor,
-      width: ((_g = typeDefinition.size) == null ? void 0 : _g.width) || 120,
-      height: ((_h = typeDefinition.size) == null ? void 0 : _h.height) || 120,
+      // Use 100% to fill container for resizing support
+      width: "100%",
+      height: "100%",
+      minWidth: ((_i = typeDefinition.size) == null ? void 0 : _i.width) || 120,
+      minHeight: ((_j = typeDefinition.size) == null ? void 0 : _j.height) || 120,
       boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
-      transition: "all 0.2s ease"
+      transition: "box-shadow 0.2s ease",
+      boxSizing: "border-box"
     } : {};
     const hexagonInnerStyle = isHexagon ? {
       position: "absolute",
@@ -47233,14 +47242,20 @@ function requireCustomNode() {
       }
       return offsetStyle;
     };
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle("right") }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [editable && (0, jsx_runtime_1.jsx)(react_1.NodeResizer, { color: strokeColor, isVisible: selected, minWidth, minHeight, keepAspectRatio, handleStyle: {
+      width: 8,
+      height: 8,
+      borderRadius: 2
+    }, lineStyle: {
+      borderWidth: 1
+    } }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle("right") }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_i = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _i.label) || ((_k = (_j = typeDefinition.states) == null ? void 0 : _j[state]) == null ? void 0 : _k.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_k = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _k.label) || ((_m = (_l = typeDefinition.states) == null ? void 0 : _l[state]) == null ? void 0 : _m.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
@@ -47260,7 +47275,7 @@ function requireCustomNode() {
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_l = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _l.label) || ((_n2 = (_m = typeDefinition.states) == null ? void 0 : _m[state]) == null ? void 0 : _n2.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_n2 = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _n2.label) || ((_p = (_o2 = typeDefinition.states) == null ? void 0 : _o2[state]) == null ? void 0 : _p.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
@@ -48170,6 +48185,182 @@ function requireNodeInfoPanel() {
   NodeInfoPanel.NodeInfoPanel = NodeInfoPanel$1;
   return NodeInfoPanel;
 }
+var SelectionSidebar = {};
+var hasRequiredSelectionSidebar;
+function requireSelectionSidebar() {
+  if (hasRequiredSelectionSidebar) return SelectionSidebar;
+  hasRequiredSelectionSidebar = 1;
+  Object.defineProperty(SelectionSidebar, "__esModule", { value: true });
+  SelectionSidebar.SelectionSidebar = void 0;
+  const jsx_runtime_1 = require$$0;
+  const react_1 = React2;
+  const industry_theme_1 = requireCjs();
+  const iconResolver_1 = requireIconResolver();
+  const SelectionSidebar$1 = ({ selectedNodeIds, nodes, nodeTypeDefinitions, onClose }) => {
+    const { theme } = (0, industry_theme_1.useTheme)();
+    const [expandedNodes, setExpandedNodes] = (0, react_1.useState)({});
+    const selectedNodes = nodes.filter((n) => selectedNodeIds.has(n.id));
+    const toggleExpanded = (nodeId) => {
+      setExpandedNodes((prev) => ({
+        ...prev,
+        [nodeId]: !prev[nodeId]
+      }));
+    };
+    const internalFields = [
+      "icon",
+      "name",
+      "description",
+      "sources",
+      "color",
+      "stroke",
+      "width",
+      "height",
+      "canvasType",
+      "text",
+      "file",
+      "url",
+      "shape",
+      "states",
+      "actions",
+      "nodeType"
+    ];
+    return (0, jsx_runtime_1.jsxs)("div", { style: {
+      position: "absolute",
+      top: "60px",
+      right: "20px",
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
+      borderRadius: "8px",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      padding: "16px",
+      minWidth: "280px",
+      maxWidth: "350px",
+      maxHeight: "calc(100vh - 120px)",
+      overflowY: "auto",
+      zIndex: 1e3,
+      border: `1px solid ${theme.colors.border}`
+    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "12px",
+      paddingBottom: "8px",
+      borderBottom: `2px solid ${theme.colors.primary}`
+    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { fontWeight: "bold", fontSize: "14px", color: theme.colors.primary }, children: [selectedNodes.length, " nodes selected"] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
+      border: "none",
+      background: "none",
+      cursor: "pointer",
+      fontSize: "18px",
+      color: theme.colors.textSecondary,
+      padding: "0",
+      width: "24px",
+      height: "24px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, children: "x" })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: selectedNodes.map((node) => {
+      var _a, _b, _c, _d, _e2, _f, _g;
+      const typeDefinition = nodeTypeDefinitions[node.type];
+      const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.secondary;
+      const icon = ((_b = node.data) == null ? void 0 : _b.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
+      const isExpanded = expandedNodes[node.id] || false;
+      const description = (_c = node.data) == null ? void 0 : _c.description;
+      const dataEntries = node.data ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key)) : [];
+      return (0, jsx_runtime_1.jsxs)("div", { style: {
+        backgroundColor: theme.colors.surface,
+        borderRadius: "6px",
+        border: `1px solid ${theme.colors.border}`,
+        overflow: "hidden"
+      }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleExpanded(node.id), style: {
+        width: "100%",
+        padding: "10px 12px",
+        backgroundColor: "transparent",
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "10px",
+        textAlign: "left"
+      }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        width: "28px",
+        height: "28px",
+        borderRadius: "6px",
+        backgroundColor: nodeColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        color: "white"
+      }, children: icon ? (0, iconResolver_1.resolveIcon)(icon, 16) : null }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        fontWeight: 600,
+        fontSize: "13px",
+        color: theme.colors.text,
+        marginBottom: description ? "2px" : 0
+      }, children: node.name || node.id }), description && (0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "11px",
+        color: theme.colors.textSecondary,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        display: "-webkit-box",
+        WebkitLineClamp: isExpanded ? "unset" : 2,
+        WebkitBoxOrient: "vertical"
+      }, children: description })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+        color: theme.colors.textSecondary,
+        fontSize: "10px",
+        transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+        transition: "transform 0.2s",
+        flexShrink: 0
+      }, children: "▼" })] }), isExpanded && (0, jsx_runtime_1.jsxs)("div", { style: {
+        padding: "0 12px 10px 12px",
+        borderTop: `1px solid ${theme.colors.border}`,
+        marginTop: "0"
+      }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginTop: "10px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "10px",
+        color: theme.colors.textSecondary,
+        marginBottom: "4px"
+      }, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "11px",
+        padding: "3px 8px",
+        backgroundColor: nodeColor,
+        color: "white",
+        borderRadius: "4px",
+        display: "inline-block"
+      }, children: node.type })] }), node.state && (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "10px",
+        color: theme.colors.textSecondary,
+        marginBottom: "4px"
+      }, children: "State" }), (0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "11px",
+        padding: "3px 8px",
+        backgroundColor: ((_e2 = (_d = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _d[node.state]) == null ? void 0 : _e2.color) || theme.colors.secondary,
+        color: "white",
+        borderRadius: "4px",
+        display: "inline-block"
+      }, children: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node.state]) == null ? void 0 : _g.label) || node.state })] }), dataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "10px",
+        color: theme.colors.textSecondary,
+        marginBottom: "6px",
+        fontWeight: "bold"
+      }, children: "Properties" }), dataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "6px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "10px",
+        color: theme.colors.textSecondary,
+        marginBottom: "2px"
+      }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: {
+        fontSize: "11px",
+        color: theme.colors.text,
+        wordBreak: "break-word"
+      }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+        fontSize: "10px",
+        color: theme.colors.textMuted,
+        marginTop: "8px",
+        paddingTop: "6px",
+        borderTop: `1px solid ${theme.colors.border}`
+      }, children: ["ID: ", node.id] })] })] }, node.id);
+    }) })] });
+  };
+  SelectionSidebar.SelectionSidebar = SelectionSidebar$1;
+  return SelectionSidebar;
+}
 var hasRequiredGraphRenderer;
 function requireGraphRenderer() {
   if (hasRequiredGraphRenderer) return GraphRenderer;
@@ -48187,6 +48378,7 @@ function requireGraphRenderer() {
     const graphConverter_1 = requireGraphConverter();
     const EdgeInfoPanel_1 = requireEdgeInfoPanel();
     const NodeInfoPanel_1 = requireNodeInfoPanel();
+    const SelectionSidebar_1 = requireSelectionSidebar();
     const nodeTypes = {
       custom: CustomNode_1.CustomNode
     };
@@ -48195,6 +48387,7 @@ function requireGraphRenderer() {
     };
     const createEmptyEditState = () => ({
       positionChanges: /* @__PURE__ */ new Map(),
+      dimensionChanges: /* @__PURE__ */ new Map(),
       nodeUpdates: /* @__PURE__ */ new Map(),
       deletedNodeIds: /* @__PURE__ */ new Set(),
       createdEdges: [],
@@ -48207,8 +48400,8 @@ function requireGraphRenderer() {
         nodeAnimations: {},
         edgeAnimations: {}
       });
-      const [selectedEdgeId, setSelectedEdgeId] = (0, react_1.useState)(null);
-      const [selectedNodeId, setSelectedNodeId] = (0, react_1.useState)(null);
+      const [selectedEdgeIds, setSelectedEdgeIds] = (0, react_1.useState)(/* @__PURE__ */ new Set());
+      const [selectedNodeIds, setSelectedNodeIds] = (0, react_1.useState)(/* @__PURE__ */ new Set());
       const [pendingConnection, setPendingConnection] = (0, react_1.useState)(null);
       const [localNodes, setLocalNodes] = (0, react_1.useState)(propNodes);
       const [localEdges, setLocalEdges] = (0, react_1.useState)(propEdges);
@@ -48230,7 +48423,7 @@ function requireGraphRenderer() {
       const nodes = localNodes;
       const edges = editable ? localEdges : propEdges;
       const checkHasChanges = (0, react_1.useCallback)((state) => {
-        return state.positionChanges.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.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
       }, []);
       const updateEditState = (0, react_1.useCallback)((updater) => {
         const newState = updater(editStateRef.current);
@@ -48238,16 +48431,50 @@ function requireGraphRenderer() {
         onEditStateChange == null ? void 0 : onEditStateChange(newState);
         onPendingChangesChange == null ? void 0 : onPendingChangesChange(checkHasChanges(newState));
       }, [editStateRef, onEditStateChange, onPendingChangesChange, checkHasChanges]);
-      const onEdgeClick = (0, react_1.useCallback)((_event, edge) => {
-        setSelectedEdgeId((prev) => prev === edge.id ? null : edge.id);
-        setSelectedNodeId(null);
-      }, []);
-      const onNodeClick = (0, react_1.useCallback)((_event, node) => {
-        setSelectedNodeId((prev) => prev === node.id ? null : node.id);
-        setSelectedEdgeId(null);
-      }, []);
+      const onEdgeClick = (0, react_1.useCallback)((event, edge) => {
+        if (event.shiftKey && editable) {
+          setSelectedEdgeIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(edge.id)) {
+              next.delete(edge.id);
+            } else {
+              next.add(edge.id);
+            }
+            return next;
+          });
+        } else {
+          setSelectedEdgeIds((prev) => {
+            if (prev.size === 1 && prev.has(edge.id)) {
+              return /* @__PURE__ */ new Set();
+            }
+            return /* @__PURE__ */ new Set([edge.id]);
+          });
+          setSelectedNodeIds(/* @__PURE__ */ new Set());
+        }
+      }, [editable]);
+      const onNodeClick = (0, react_1.useCallback)((event, node) => {
+        if (event.shiftKey && editable) {
+          setSelectedNodeIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(node.id)) {
+              next.delete(node.id);
+            } else {
+              next.add(node.id);
+            }
+            return next;
+          });
+        } else {
+          setSelectedNodeIds((prev) => {
+            if (prev.size === 1 && prev.has(node.id)) {
+              return /* @__PURE__ */ new Set();
+            }
+            return /* @__PURE__ */ new Set([node.id]);
+          });
+          setSelectedEdgeIds(/* @__PURE__ */ new Set());
+        }
+      }, [editable]);
       const onCloseEdgeInfoPanel = (0, react_1.useCallback)(() => {
-        setSelectedEdgeId(null);
+        setSelectedEdgeIds(/* @__PURE__ */ new Set());
       }, []);
       const handleUpdateEdgeSides = (0, react_1.useCallback)((edgeId, fromSide, toSide) => {
         setLocalEdges((currentEdges) => currentEdges.map((edge) => edge.id === edgeId ? {
@@ -48260,8 +48487,18 @@ function requireGraphRenderer() {
         } : edge));
       }, []);
       const onCloseNodeInfoPanel = (0, react_1.useCallback)(() => {
-        setSelectedNodeId(null);
+        setSelectedNodeIds(/* @__PURE__ */ new Set());
       }, []);
+      const onPaneClick = (0, react_1.useCallback)(() => {
+        setSelectedNodeIds(/* @__PURE__ */ new Set());
+        setSelectedEdgeIds(/* @__PURE__ */ new Set());
+      }, []);
+      const handleSelectionChange = (0, react_1.useCallback)(({ nodes: selectedNodes, edges: selectedEdges }) => {
+        if (editable) {
+          setSelectedNodeIds(new Set(selectedNodes.map((n) => n.id)));
+          setSelectedEdgeIds(new Set(selectedEdges.map((e) => e.id)));
+        }
+      }, [editable]);
       const handleNodeUpdate = (0, react_1.useCallback)((nodeId, updates) => {
         if (!editable)
           return;
@@ -48297,16 +48534,19 @@ function requireGraphRenderer() {
           newUpdates.delete(nodeId);
           const newPositions = new Map(prev.positionChanges);
           newPositions.delete(nodeId);
+          const newDimensions = new Map(prev.dimensionChanges);
+          newDimensions.delete(nodeId);
           const newCreatedEdges = prev.createdEdges.filter((e) => e.from !== nodeId && e.to !== nodeId);
           return {
             ...prev,
             deletedNodeIds: newDeletedNodes,
             nodeUpdates: newUpdates,
             positionChanges: newPositions,
+            dimensionChanges: newDimensions,
             createdEdges: newCreatedEdges
           };
         });
-        setSelectedNodeId(null);
+        setSelectedNodeIds(/* @__PURE__ */ new Set());
       }, [editable, updateEditState]);
       const handleEdgeDelete = (0, react_1.useCallback)((edgeId) => {
         if (!editable)
@@ -48334,7 +48574,7 @@ function requireGraphRenderer() {
           }
           return prev;
         });
-        setSelectedEdgeId(null);
+        setSelectedEdgeIds(/* @__PURE__ */ new Set());
       }, [editable, updateEditState, localEdges]);
       const handleConnect = (0, react_1.useCallback)((connection) => {
         if (!editable || !connection.source || !connection.target)
@@ -48464,6 +48704,11 @@ function requireGraphRenderer() {
       const handleReconnectEnd = (0, react_1.useCallback)(() => {
         edgeReconnectSuccessful.current = true;
       }, []);
+      const selectedEdgeId = (0, react_1.useMemo)(() => {
+        if (selectedEdgeIds.size === 0)
+          return null;
+        return selectedEdgeIds.values().next().value;
+      }, [selectedEdgeIds]);
       const selectedEdge = (0, react_1.useMemo)(() => {
         if (!selectedEdgeId)
           return null;
@@ -48474,6 +48719,11 @@ function requireGraphRenderer() {
           return null;
         return configuration.edgeTypes[selectedEdge.type];
       }, [selectedEdge, configuration.edgeTypes]);
+      const selectedNodeId = (0, react_1.useMemo)(() => {
+        if (selectedNodeIds.size === 0)
+          return null;
+        return selectedNodeIds.values().next().value;
+      }, [selectedNodeIds]);
       const selectedNode = (0, react_1.useMemo)(() => {
         if (!selectedNodeId)
           return null;
@@ -48618,6 +48868,21 @@ function requireGraphRenderer() {
           return;
         setXyflowLocalNodes((nds) => (0, react_2.applyNodeChanges)(changes, nds));
         const positionChanges = changes.filter((change) => change.type === "position" && "position" in change && change.position !== void 0 && "dragging" in change && change.dragging === false);
+        const dimensionChanges = changes.filter((change) => change.type === "dimensions" && "dimensions" in change && change.dimensions !== void 0 && "resizing" in change && change.resizing === false);
+        if (dimensionChanges.length > 0) {
+          updateEditState((prev) => {
+            const newDimensions = new Map(prev.dimensionChanges);
+            for (const change of dimensionChanges) {
+              if (change.dimensions) {
+                newDimensions.set(change.id, {
+                  width: Math.round(change.dimensions.width),
+                  height: Math.round(change.dimensions.height)
+                });
+              }
+            }
+            return { ...prev, dimensionChanges: newDimensions };
+          });
+        }
         if (positionChanges.length > 0) {
           updateEditState((prev) => {
             const newPositions = new Map(prev.positionChanges);
@@ -48697,11 +48962,11 @@ function requireGraphRenderer() {
         }, 100);
         return () => clearTimeout(timeoutId);
       }, [baseNodesKey, fitView]);
-      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, selectionOnDrag: editable, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
         var _a;
         const nodeData = node.data;
         return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
-      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0, onUpdateSides: editable ? handleUpdateEdgeSides : void 0 }), selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
+      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedNodeIds.size >= 2 && (0, jsx_runtime_1.jsx)(SelectionSidebar_1.SelectionSidebar, { selectedNodeIds, nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel }), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0, onUpdateSides: editable ? handleUpdateEdgeSides : void 0 }), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
         position: "absolute",
         top: "50%",
         left: "50%",
@@ -48874,6 +49139,10 @@ function requireGraphRenderer() {
               nodeId,
               position
             })),
+            dimensionChanges: Array.from(state.dimensionChanges.entries()).map(([nodeId, dimensions]) => ({
+              nodeId,
+              dimensions
+            })),
             nodeUpdates: Array.from(state.nodeUpdates.entries()).map(([nodeId, updates]) => ({
               nodeId,
               updates
@@ -48887,7 +49156,7 @@ function requireGraphRenderer() {
               targetHandle: e.targetHandle
             })),
             deletedEdges: state.deletedEdges.map((e) => ({ from: e.from, to: e.to, type: e.type })),
-            hasChanges: state.positionChanges.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.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0
           };
         },
         resetEditState: () => {
@@ -48895,7 +49164,7 @@ function requireGraphRenderer() {
         },
         hasUnsavedChanges: () => {
           const state = editStateRef.current;
-          return state.positionChanges.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.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
         }
       }), []);
       if (!canvasData) {