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

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, _q, _r, _s, _t2, _u;
     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,13 +47152,18 @@ 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,
-            padding: "8px"
+            border: "none",
+            // Border handled by wrapper
+            clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+            width: "100%",
+            height: "100%",
+            minWidth: "unset",
+            minHeight: "unset",
+            padding: "8px 16px",
+            boxShadow: "none"
+            // Shadow handled by wrapper
           };
         case "rectangle":
         default:
@@ -47168,16 +47175,24 @@ function requireCustomNode() {
     };
     const isDiamond = typeDefinition.shape === "diamond";
     const isHexagon = typeDefinition.shape === "hexagon";
+    const isCircle = typeDefinition.shape === "circle";
+    const keepAspectRatio = isCircle;
+    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",
@@ -47196,6 +47211,37 @@ function requireCustomNode() {
       fontWeight: 500,
       gap: "4px"
     } : {};
+    const diamondClipPath = "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)";
+    const diamondBorderWidth = 2;
+    const diamondBorderStyle = isDiamond ? {
+      position: "relative",
+      clipPath: diamondClipPath,
+      backgroundColor: hasViolations ? "#D0021B" : strokeColor,
+      width: "100%",
+      height: "100%",
+      minWidth: ((_k = typeDefinition.size) == null ? void 0 : _k.width) || 80,
+      minHeight: ((_l = typeDefinition.size) == null ? void 0 : _l.height) || 80,
+      boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
+      transition: "box-shadow 0.2s ease",
+      boxSizing: "border-box"
+    } : {};
+    const diamondInnerStyle = isDiamond ? {
+      position: "absolute",
+      top: diamondBorderWidth,
+      left: diamondBorderWidth,
+      right: diamondBorderWidth,
+      bottom: diamondBorderWidth,
+      clipPath: diamondClipPath,
+      backgroundColor: "white",
+      color: "#000",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "12px",
+      fontWeight: 500,
+      gap: "4px"
+    } : {};
     const baseHandleStyle = editable ? {
       background: color,
       width: 12,
@@ -47207,45 +47253,44 @@ function requireCustomNode() {
       width: 8,
       height: 8
     };
-    const diamondOffset = isDiamond ? "21%" : "0";
-    const getHandleStyle = (position) => {
+    const getHandleStyle = (_position) => {
       if (!isDiamond && !isHexagon)
         return baseHandleStyle;
       const offsetStyle = { ...baseHandleStyle };
-      if (isDiamond) {
-        switch (position) {
-          case "top":
-            offsetStyle.top = `-${diamondOffset}`;
-            break;
-          case "bottom":
-            offsetStyle.bottom = `-${diamondOffset}`;
-            break;
-          case "left":
-            offsetStyle.left = `-${diamondOffset}`;
-            break;
-          case "right":
-            offsetStyle.right = `-${diamondOffset}`;
-            break;
-        }
-      }
-      if (isHexagon) {
+      if (isHexagon || isDiamond) {
         offsetStyle.zIndex = 10;
       }
       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() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle() }), 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: ((_m = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _m.label) || ((_o2 = (_n2 = typeDefinition.states) == null ? void 0 : _n2[state]) == null ? void 0 : _o2.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: "#D0021B",
+      fontWeight: "bold"
+    }, children: "⚠️" })] }) }) : isDiamond ? (0, jsx_runtime_1.jsx)("div", { style: diamondBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: diamondInnerStyle, 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: ((_p = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _p.label) || ((_r = (_q = typeDefinition.states) == null ? void 0 : _q[state]) == null ? void 0 : _r.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
     }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-      ...isDiamond ? { transform: "rotate(-45deg)" } : {},
       ...isGroup ? { width: "100%" } : {}
     }, children: [isGroup ? (0, jsx_runtime_1.jsxs)("div", { style: {
       display: "flex",
@@ -47260,11 +47305,11 @@ 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: ((_s = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _s.label) || ((_u = (_t2 = typeDefinition.states) == null ? void 0 : _t2[state]) == null ? void 0 : _u.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Top, id: "top-out", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Bottom, id: "bottom-out", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Left, id: "left-out", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Right, id: "right-out", style: getHandleStyle("right") }), (0, jsx_runtime_1.jsx)("style", { children: `
+    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Top, id: "top-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Bottom, id: "bottom-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Left, id: "left-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Right, id: "right-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)("style", { children: `
         /* Processing pulse - continuous breathing effect */
         .node-pulse {
           animation: node-pulse ease-in-out infinite;
@@ -47334,22 +47379,6 @@ function requireCustomNode() {
           }
         }
 
-        /* Special handling for diamond shape with shake */
-        .node-shake[style*="rotate(45deg)"] {
-          animation: node-shake-diamond ease-in-out;
-        }
-
-        @keyframes node-shake-diamond {
-          0%, 100% {
-            transform: rotate(45deg) translateX(0);
-          }
-          10%, 30%, 50%, 70%, 90% {
-            transform: rotate(45deg) translateX(-4px);
-          }
-          20%, 40%, 60%, 80% {
-            transform: rotate(45deg) translateX(4px);
-          }
-        }
       ` })] });
   };
   CustomNode.CustomNode = CustomNode$1;
@@ -48170,6 +48199,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 +48392,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 +48401,7 @@ function requireGraphRenderer() {
     };
     const createEmptyEditState = () => ({
       positionChanges: /* @__PURE__ */ new Map(),
+      dimensionChanges: /* @__PURE__ */ new Map(),
       nodeUpdates: /* @__PURE__ */ new Map(),
       deletedNodeIds: /* @__PURE__ */ new Set(),
       createdEdges: [],
@@ -48207,8 +48414,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 +48437,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 +48445,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 +48501,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 +48548,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 +48588,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 +48718,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 +48733,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 +48882,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 +48976,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: true, selectionOnDrag: false, selectionKeyCode: editable ? "Shift" : 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 +49153,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 +49170,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 +49178,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) {
@@ -54300,7 +54583,7 @@ function handleToCanvasSide(handle) {
   return void 0;
 }
 function applyChangesToCanvas(canvas, changes) {
-  var _a, _b;
+  var _a, _b, _c;
   const updatedCanvas = JSON.parse(JSON.stringify(canvas));
   for (const { nodeId, position } of changes.positionChanges) {
     const node = (_a = updatedCanvas.nodes) == null ? void 0 : _a.find((n) => n.id === nodeId);
@@ -54309,8 +54592,15 @@ function applyChangesToCanvas(canvas, changes) {
       node.y = Math.round(position.y);
     }
   }
-  for (const { nodeId, updates } of changes.nodeUpdates) {
+  for (const { nodeId, dimensions } of changes.dimensionChanges) {
     const node = (_b = updatedCanvas.nodes) == null ? void 0 : _b.find((n) => n.id === nodeId);
+    if (node) {
+      node.width = dimensions.width;
+      node.height = dimensions.height;
+    }
+  }
+  for (const { nodeId, updates } of changes.nodeUpdates) {
+    const node = (_c = updatedCanvas.nodes) == null ? void 0 : _c.find((n) => n.id === nodeId);
     if (node) {
       if (updates.type && updates.type !== nodeId) {
         node.id = updates.type;