@industry-theme/repository-composition-panels 0.6.8 → 0.6.10

package/dist/{index-iJqxW9Dv.js → index-C70rwAR9.js}

@@ -9409,135 +9409,152 @@ function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
 var withSelector = { exports: {} };
-var withSelector_production_min = {};
+var withSelector_production = {};
 var shim = { exports: {} };
-var useSyncExternalStoreShim_production_min = {};
+var useSyncExternalStoreShim_production = {};
 /**
  * @license React
- * use-sync-external-store-shim.production.min.js
+ * use-sync-external-store-shim.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredUseSyncExternalStoreShim_production_min;
-function requireUseSyncExternalStoreShim_production_min() {
-  if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
-  hasRequiredUseSyncExternalStoreShim_production_min = 1;
-  var e2 = React2__default;
-  function h2(a2, b2) {
-    return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
-  }
-  var k2 = "function" === typeof Object.is ? Object.is : h2, l2 = e2.useState, m2 = e2.useEffect, n2 = e2.useLayoutEffect, p2 = e2.useDebugValue;
-  function q2(a2, b2) {
-    var d2 = b2(), f2 = l2({ inst: { value: d2, getSnapshot: b2 } }), c2 = f2[0].inst, g2 = f2[1];
-    n2(function() {
-      c2.value = d2;
-      c2.getSnapshot = b2;
-      r2(c2) && g2({ inst: c2 });
-    }, [a2, d2, b2]);
-    m2(function() {
-      r2(c2) && g2({ inst: c2 });
-      return a2(function() {
-        r2(c2) && g2({ inst: c2 });
-      });
-    }, [a2]);
-    p2(d2);
-    return d2;
+var hasRequiredUseSyncExternalStoreShim_production;
+function requireUseSyncExternalStoreShim_production() {
+  if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+  hasRequiredUseSyncExternalStoreShim_production = 1;
+  var React = React2__default;
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
+  function useSyncExternalStore$2(subscribe, getSnapshot) {
+    var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+    useLayoutEffect2(
+      function() {
+        inst.value = value;
+        inst.getSnapshot = getSnapshot;
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+      },
+      [subscribe, value, getSnapshot]
+    );
+    useEffect2(
+      function() {
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        return subscribe(function() {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        });
+      },
+      [subscribe]
+    );
+    useDebugValue2(value);
+    return value;
   }
-  function r2(a2) {
-    var b2 = a2.getSnapshot;
-    a2 = a2.value;
+  function checkIfSnapshotChanged(inst) {
+    var latestGetSnapshot = inst.getSnapshot;
+    inst = inst.value;
     try {
-      var d2 = b2();
-      return !k2(a2, d2);
-    } catch (f2) {
+      var nextValue = latestGetSnapshot();
+      return !objectIs(inst, nextValue);
+    } catch (error) {
       return true;
     }
   }
-  function t2(a2, b2) {
-    return b2();
+  function useSyncExternalStore$1(subscribe, getSnapshot) {
+    return getSnapshot();
   }
-  var u2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t2 : q2;
-  useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e2.useSyncExternalStore ? e2.useSyncExternalStore : u2;
-  return useSyncExternalStoreShim_production_min;
+  var shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+  useSyncExternalStoreShim_production.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim2;
+  return useSyncExternalStoreShim_production;
 }
 var hasRequiredShim;
 function requireShim() {
   if (hasRequiredShim) return shim.exports;
   hasRequiredShim = 1;
   {
-    shim.exports = requireUseSyncExternalStoreShim_production_min();
+    shim.exports = requireUseSyncExternalStoreShim_production();
   }
   return shim.exports;
 }
 /**
  * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
+ * use-sync-external-store-shim/with-selector.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredWithSelector_production_min;
-function requireWithSelector_production_min() {
-  if (hasRequiredWithSelector_production_min) return withSelector_production_min;
-  hasRequiredWithSelector_production_min = 1;
-  var h2 = React2__default, n2 = requireShim();
-  function p2(a2, b2) {
-    return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
-  }
-  var q2 = "function" === typeof Object.is ? Object.is : p2, r2 = n2.useSyncExternalStore, t2 = h2.useRef, u2 = h2.useEffect, v2 = h2.useMemo, w2 = h2.useDebugValue;
-  withSelector_production_min.useSyncExternalStoreWithSelector = function(a2, b2, e2, l2, g2) {
-    var c2 = t2(null);
-    if (null === c2.current) {
-      var f2 = { hasValue: false, value: null };
-      c2.current = f2;
-    } else f2 = c2.current;
-    c2 = v2(function() {
-      function a3(a4) {
-        if (!c3) {
-          c3 = true;
-          d3 = a4;
-          a4 = l2(a4);
-          if (void 0 !== g2 && f2.hasValue) {
-            var b3 = f2.value;
-            if (g2(b3, a4)) return k2 = b3;
+var hasRequiredWithSelector_production;
+function requireWithSelector_production() {
+  if (hasRequiredWithSelector_production) return withSelector_production;
+  hasRequiredWithSelector_production = 1;
+  var React = React2__default, shim2 = requireShim();
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue2 = React.useDebugValue;
+  withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
+    var instRef = useRef2(null);
+    if (null === instRef.current) {
+      var inst = { hasValue: false, value: null };
+      instRef.current = inst;
+    } else inst = instRef.current;
+    instRef = useMemo2(
+      function() {
+        function memoizedSelector(nextSnapshot) {
+          if (!hasMemo) {
+            hasMemo = true;
+            memoizedSnapshot = nextSnapshot;
+            nextSnapshot = selector2(nextSnapshot);
+            if (void 0 !== isEqual && inst.hasValue) {
+              var currentSelection = inst.value;
+              if (isEqual(currentSelection, nextSnapshot))
+                return memoizedSelection = currentSelection;
+            }
+            return memoizedSelection = nextSnapshot;
           }
-          return k2 = a4;
-        }
-        b3 = k2;
-        if (q2(d3, a4)) return b3;
-        var e3 = l2(a4);
-        if (void 0 !== g2 && g2(b3, e3)) return b3;
-        d3 = a4;
-        return k2 = e3;
-      }
-      var c3 = false, d3, k2, m2 = void 0 === e2 ? null : e2;
-      return [function() {
-        return a3(b2());
-      }, null === m2 ? void 0 : function() {
-        return a3(m2());
-      }];
-    }, [b2, e2, l2, g2]);
-    var d2 = r2(a2, c2[0], c2[1]);
-    u2(function() {
-      f2.hasValue = true;
-      f2.value = d2;
-    }, [d2]);
-    w2(d2);
-    return d2;
-  };
-  return withSelector_production_min;
+          currentSelection = memoizedSelection;
+          if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
+          var nextSelection = selector2(nextSnapshot);
+          if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
+            return memoizedSnapshot = nextSnapshot, currentSelection;
+          memoizedSnapshot = nextSnapshot;
+          return memoizedSelection = nextSelection;
+        }
+        var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+        return [
+          function() {
+            return memoizedSelector(getSnapshot());
+          },
+          null === maybeGetServerSnapshot ? void 0 : function() {
+            return memoizedSelector(maybeGetServerSnapshot());
+          }
+        ];
+      },
+      [getSnapshot, getServerSnapshot, selector2, isEqual]
+    );
+    var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+    useEffect2(
+      function() {
+        inst.hasValue = true;
+        inst.value = value;
+      },
+      [value]
+    );
+    useDebugValue2(value);
+    return value;
+  };
+  return withSelector_production;
 }
 var hasRequiredWithSelector;
 function requireWithSelector() {
   if (hasRequiredWithSelector) return withSelector.exports;
   hasRequiredWithSelector = 1;
   {
-    withSelector.exports = requireWithSelector_production_min();
+    withSelector.exports = requireWithSelector_production();
   }
   return withSelector.exports;
 }
@@ -9603,8 +9620,7 @@ function shallow$1(objA, objB) {
     return false;
   }
   if (objA instanceof Map && objB instanceof Map) {
-    if (objA.size !== objB.size)
-      return false;
+    if (objA.size !== objB.size) return false;
     for (const [key, value] of objA) {
       if (!Object.is(value, objB.get(key))) {
         return false;
@@ -9613,8 +9629,7 @@ function shallow$1(objA, objB) {
     return true;
   }
   if (objA instanceof Set && objB instanceof Set) {
-    if (objA.size !== objB.size)
-      return false;
+    if (objA.size !== objB.size) return false;
     for (const value of objA) {
       if (!objB.has(value)) {
         return false;
@@ -9626,8 +9641,8 @@ function shallow$1(objA, objB) {
   if (keysA.length !== Object.keys(objB).length) {
     return false;
   }
-  for (let i2 = 0; i2 < keysA.length; i2++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i2]) || !Object.is(objA[keysA[i2]], objB[keysA[i2]])) {
+  for (const keyA of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
       return false;
     }
   }
@@ -13435,8 +13450,6 @@ class CanvasConverter {
         data.states = pv.states;
       if (pv.sources)
         data.sources = pv.sources;
-      if (pv.status)
-        data.status = pv.status;
       if (pv.dataSchema)
         data.dataSchema = pv.dataSchema;
       if (pv.event)
@@ -13544,8 +13557,6 @@ class CanvasConverter {
           nodeData.stroke = pv.stroke;
         if (pv == null ? void 0 : pv.states)
           nodeData.states = pv.states;
-        if (pv == null ? void 0 : pv.status)
-          nodeData.status = pv.status;
         if (pv == null ? void 0 : pv.otel)
           nodeData.otel = pv.otel;
         if (pv == null ? void 0 : pv.resourceMatch)
@@ -97710,20 +97721,36 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     tooltipsEnabled = true,
     shiftKeyPressed = false,
     isHighlighted = false,
-    isActive = true,
+    isActive = true
     // Default to active if not specified
-    isHidden = false
-    // Default to not hidden
   } = nodeProps;
-  const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
   const showTooltip = isHovered && !dragging && shiftKeyPressed;
   const otelInfo = nodeData == null ? void 0 : nodeData.otel;
   const description = nodeData == null ? void 0 : nodeData.description;
   const sources2 = nodeData == null ? void 0 : nodeData.sources;
-  const renderSourcesBadge = () => {
-    const sources3 = nodeData == null ? void 0 : nodeData.sources;
-    if (!sources3 || sources3.length === 0)
+  const getOtelBadgeColor = (kind) => {
+    switch (kind) {
+      case "type":
+        return "#4A90E2";
+      // Blue
+      case "service":
+        return "#7ED321";
+      // Green
+      case "instance":
+        return "#9B59B6";
+      // Purple
+      case "event":
+        return "#F59E0B";
+      // Amber
+      default:
+        return "#888";
+    }
+  };
+  const renderOtelBadge = () => {
+    if (!(otelInfo == null ? void 0 : otelInfo.kind))
       return null;
+    const badgeColor = getOtelBadgeColor(otelInfo.kind);
+    const label = otelInfo.kind.charAt(0).toUpperCase();
     return jsx("div", { style: {
       position: "absolute",
       top: -6,
@@ -97731,7 +97758,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       width: 18,
       height: 18,
       borderRadius: "50%",
-      backgroundColor: "#10b981",
+      backgroundColor: badgeColor,
       color: "white",
       fontSize: theme2.fontSizes[0],
       fontWeight: theme2.fontWeights.bold,
@@ -97741,29 +97768,13 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       justifyContent: "center",
       boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
       zIndex: 10,
-      opacity: nodeOpacity
-    }, title: `Sources: ${sources3.join(", ")}`, children: "S" });
+      opacity: isActive ? 1 : 0.1
+    }, title: `${otelInfo.kind}${otelInfo.category ? ` (${otelInfo.category})` : ""}`, children: label });
   };
-  const renderStatusBadge = () => {
-    const status2 = nodeData == null ? void 0 : nodeData.status;
-    if (!status2)
+  const renderSourcesBadge = () => {
+    const sources3 = nodeData == null ? void 0 : nodeData.sources;
+    if (!sources3 || sources3.length === 0)
       return null;
-    const statusColors = {
-      draft: "#6b7280",
-      approved: "#3b82f6",
-      implemented: "#10b981"
-      // Green
-    };
-    const statusLabels = {
-      draft: "D",
-      approved: "A",
-      implemented: "I"
-    };
-    const statusTitles = {
-      draft: "Draft - Design phase",
-      approved: "Approved - Ready for implementation",
-      implemented: "Implemented - Code exists"
-    };
     return jsx("div", { style: {
       position: "absolute",
       top: -6,
@@ -97771,7 +97782,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       width: 18,
       height: 18,
       borderRadius: "50%",
-      backgroundColor: statusColors[status2],
+      backgroundColor: "#10b981",
       color: "white",
       fontSize: theme2.fontSizes[0],
       fontWeight: theme2.fontWeights.bold,
@@ -97781,8 +97792,8 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       justifyContent: "center",
       boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
       zIndex: 10,
-      opacity: nodeOpacity
-    }, title: statusTitles[status2], children: statusLabels[status2] });
+      opacity: isActive ? 1 : 0.1
+    }, title: `Sources: ${sources3.join(", ")}`, children: "S" });
   };
   if (!typeDefinition) {
     return jsx("div", { style: { padding: "10px", border: "2px solid red", borderRadius: "4px" }, children: jsx("div", { style: { fontSize: "12px", color: "red" }, children: "Error: Missing node type definition" }) });
@@ -97793,9 +97804,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const stateColor = state && (((_a = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _a.color) || ((_c = (_b = typeDefinition.states) == null ? void 0 : _b[state]) == null ? void 0 : _c.color));
   const fillColor = stateColor || baseColor;
   const nodeDataStroke = nodeData.stroke;
-  const baseStrokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
-  const status = nodeData == null ? void 0 : nodeData.status;
-  const strokeColor = baseStrokeColor;
+  const strokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
   const color2 = fillColor;
   const displayName = nodeProps.name;
   const eventData = nodeData == null ? void 0 : nodeData.event;
@@ -97825,12 +97834,11 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const animationClass = getAnimationClass();
   const isGroup = nodeData.canvasType === "group";
   const getShapeStyles = () => {
-    const borderStyle = status === "draft" ? "dotted" : status === "approved" ? "dashed" : "solid";
     const baseStyles = {
       padding: "12px 16px",
       backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : hexToLightColor(fillColor),
       color: "#000",
-      border: `2px ${borderStyle} ${hasViolations ? "#D0021B" : strokeColor}`,
+      border: `2px solid ${hasViolations ? "#D0021B" : strokeColor}`,
       fontSize: theme2.fontSizes[0],
       fontWeight: theme2.fontWeights.medium,
       fontFamily: theme2.fonts.body,
@@ -97846,7 +97854,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       justifyContent: isGroup ? "flex-start" : "center",
       gap: "4px",
       boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
-      opacity: nodeOpacity,
+      opacity: isActive ? 1 : 0.1,
       transition: "box-shadow 0.2s ease, opacity 0.3s ease",
       animationDuration: animationType ? `${animationDuration}ms` : void 0,
       boxSizing: "border-box"
@@ -97911,7 +97919,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     minWidth: 20,
     minHeight: 20,
     boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-    opacity: nodeOpacity,
+    opacity: isActive ? 1 : 0.1,
     transition: "opacity 0.3s ease",
     boxSizing: "border-box"
   } : {};
@@ -97945,7 +97953,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     minWidth: 20,
     minHeight: 20,
     boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-    opacity: nodeOpacity,
+    opacity: isActive ? 1 : 0.1,
     transition: "opacity 0.3s ease",
     boxSizing: "border-box"
   } : {};
@@ -98003,7 +98011,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     height: "100%",
     boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
     transition: "box-shadow 0.2s ease"
-  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), renderSourcesBadge(), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
+  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: hexagonBorderStyle, className: animationClass, children: jsxs("div", { style: hexagonInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -98022,7 +98030,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     height: "100%",
     boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected2 ? `0 0 0 2px ${strokeColor}` : "none",
     transition: "box-shadow 0.2s ease"
-  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), renderSourcesBadge(), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
+  }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: diamondBorderStyle, className: animationClass, children: jsxs("div", { style: diamondInnerStyle, children: [icon && jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: resolveIcon(icon, 20) }), renderNameWithEvent(), state && jsx("div", { style: {
     fontSize: theme2.fontSizes[0],
     fontFamily: theme2.fonts.body,
     backgroundColor: color2,
@@ -98035,7 +98043,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     fontFamily: theme2.fonts.body,
     color: "#D0021B",
     fontWeight: theme2.fontWeights.bold
-  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources: sources2, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderStatusBadge(), renderSourcesBadge(), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
+  }, children: "⚠️" })] }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: otelInfo, sources: sources2, visible: showTooltip, nodeRef })] }) : jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderSourcesBadge(), renderOtelBadge(), jsx("div", { style: getShapeStyles(), className: animationClass, children: jsxs("div", { style: {
     ...isGroup ? { width: "100%" } : {}
   }, children: [isGroup ? jsxs("div", { style: {
     display: "flex",
@@ -98856,6 +98864,179 @@ const NodeInfoPanel = ({ node: node2, typeDefinition, availableNodeTypes, onClos
     fontWeight: theme2.fontWeights.bold
   }, children: "Delete Node" })] });
 };
+const SelectionSidebar = ({ selectedNodeIds, nodes, nodeTypeDefinitions, onClose }) => {
+  const { theme: theme2 } = useTheme();
+  const [expandedNodes, setExpandedNodes] = useState({});
+  const selectedNodes = nodes.filter((n2) => selectedNodeIds.has(n2.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 jsxs("div", { style: {
+    position: "absolute",
+    top: "60px",
+    right: "20px",
+    backgroundColor: theme2.colors.background,
+    color: theme2.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 ${theme2.colors.border}`
+  }, children: [jsxs("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "12px",
+    paddingBottom: "8px",
+    borderBottom: `2px solid ${theme2.colors.primary}`
+  }, children: [jsxs("div", { style: { fontWeight: theme2.fontWeights.bold, fontSize: theme2.fontSizes[1], fontFamily: theme2.fonts.body, color: theme2.colors.primary }, children: [selectedNodes.length, " nodes selected"] }), jsx("button", { onClick: onClose, style: {
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    fontSize: theme2.fontSizes[3],
+    fontFamily: theme2.fonts.body,
+    color: theme2.colors.textSecondary,
+    padding: "0",
+    width: "24px",
+    height: "24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, children: "x" })] }), jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: selectedNodes.map((node2) => {
+    var _a, _b, _c, _d, _e2, _f, _g;
+    const typeDefinition = nodeTypeDefinitions[node2.type];
+    const nodeColor = ((_a = node2.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme2.colors.secondary;
+    const icon = ((_b = node2.data) == null ? void 0 : _b.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
+    const isExpanded = expandedNodes[node2.id] || false;
+    const description = (_c = node2.data) == null ? void 0 : _c.description;
+    const dataEntries = node2.data ? Object.entries(node2.data).filter(([key]) => !internalFields.includes(key)) : [];
+    return jsxs("div", { style: {
+      backgroundColor: theme2.colors.surface,
+      borderRadius: "6px",
+      border: `1px solid ${theme2.colors.border}`,
+      overflow: "hidden"
+    }, children: [jsxs("button", { onClick: () => toggleExpanded(node2.id), style: {
+      width: "100%",
+      padding: "10px 12px",
+      backgroundColor: "transparent",
+      border: "none",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "10px",
+      textAlign: "left"
+    }, children: [jsx("div", { style: {
+      width: "28px",
+      height: "28px",
+      borderRadius: "6px",
+      backgroundColor: nodeColor,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      color: "white"
+    }, children: icon ? resolveIcon(icon, 16) : null }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsx("div", { style: {
+      fontWeight: theme2.fontWeights.semibold,
+      fontSize: theme2.fontSizes[1],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.text,
+      marginBottom: description ? "2px" : 0
+    }, children: node2.name || node2.id }), description && jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.textSecondary,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      WebkitLineClamp: isExpanded ? "unset" : 2,
+      WebkitBoxOrient: "vertical"
+    }, children: description })] }), jsx("div", { style: {
+      color: theme2.colors.textSecondary,
+      fontSize: "10px",
+      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform 0.2s",
+      flexShrink: 0
+    }, children: "▼" })] }), isExpanded && jsxs("div", { style: {
+      padding: "0 12px 10px 12px",
+      borderTop: `1px solid ${theme2.colors.border}`,
+      marginTop: "0"
+    }, children: [jsxs("div", { style: { marginTop: "10px" }, children: [jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.textSecondary,
+      marginBottom: "4px"
+    }, children: "Type" }), jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      padding: "3px 8px",
+      backgroundColor: nodeColor,
+      color: "white",
+      borderRadius: "4px",
+      display: "inline-block"
+    }, children: node2.type })] }), node2.state && jsxs("div", { style: { marginTop: "8px" }, children: [jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.textSecondary,
+      marginBottom: "4px"
+    }, children: "State" }), jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      padding: "3px 8px",
+      backgroundColor: ((_e2 = (_d = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _d[node2.state]) == null ? void 0 : _e2.color) || theme2.colors.secondary,
+      color: "white",
+      borderRadius: "4px",
+      display: "inline-block"
+    }, children: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node2.state]) == null ? void 0 : _g.label) || node2.state })] }), dataEntries.length > 0 && jsxs("div", { style: { marginTop: "8px" }, children: [jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.textSecondary,
+      marginBottom: "6px",
+      fontWeight: "bold"
+    }, children: "Properties" }), dataEntries.map(([key, value]) => jsxs("div", { style: { marginBottom: "6px" }, children: [jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.textSecondary,
+      marginBottom: "2px"
+    }, children: key }), jsx("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.text,
+      wordBreak: "break-word"
+    }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), jsxs("div", { style: {
+      fontSize: theme2.fontSizes[0],
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.textMuted,
+      marginTop: "8px",
+      paddingTop: "6px",
+      borderTop: `1px solid ${theme2.colors.border}`
+    }, children: ["ID: ", node2.id] })] })] }, node2.id);
+  }) })] });
+};
 const nodeTypes = {
   custom: CustomNode
 };
@@ -98870,28 +99051,6 @@ const createEmptyEditState = () => ({
   createdEdges: [],
   deletedEdges: []
 });
-const AlignmentGuidesOverlay = ({ guides, color: color2 }) => {
-  const { x: viewportX, y: viewportY, zoom: zoom2 } = useViewport();
-  if (guides.length === 0)
-    return null;
-  return jsx("svg", { style: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    pointerEvents: "none",
-    zIndex: 10
-  }, children: guides.map((guide, index2) => {
-    if (guide.type === "vertical") {
-      const screenX = guide.position * zoom2 + viewportX;
-      return jsx("line", { x1: screenX, y1: 0, x2: screenX, y2: "100%", stroke: color2, strokeWidth: 1.5, strokeDasharray: "4,4", opacity: 0.8 }, `${guide.type}-${guide.position}-${index2}`);
-    } else {
-      const screenY = guide.position * zoom2 + viewportY;
-      return jsx("line", { x1: 0, y1: screenY, x2: "100%", y2: screenY, stroke: color2, strokeWidth: 1.5, strokeDasharray: "4,4", opacity: 0.8 }, `${guide.type}-${guide.position}-${index2}`);
-    }
-  }) });
-};
 const CenterIndicator = ({ color: color2 }) => {
   const { x: x2, y: y2 } = useViewport();
   const size = 20;
@@ -98908,12 +99067,11 @@ 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, onNodeClick: onNodeClickProp, showNodeDetailPanel, resolveEventRef }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "dots", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, showNodeDetailPanel, resolveEventRef }) => {
   const { fitView: fitView2 } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
   const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
-  const hidingNodeRef = useRef(false);
   useEffect(() => {
     const handleKeyDown = (e2) => {
       if (e2.key === "Shift") {
@@ -98936,12 +99094,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     nodeAnimations: {},
     edgeAnimations: {}
   });
-  const [alignmentGuides, setAlignmentGuides] = useState([]);
   const [selectedEdgeIds, setSelectedEdgeIds] = useState(/* @__PURE__ */ new Set());
   const [selectedNodeIds, setSelectedNodeIds] = useState(/* @__PURE__ */ new Set());
   const [showNodePanel, setShowNodePanel] = useState(false);
   const [showEdgePanel, setShowEdgePanel] = useState(false);
-  const [hiddenNodeIds, setHiddenNodeIds] = useState(/* @__PURE__ */ new Set());
   const [pendingConnection, setPendingConnection] = useState(null);
   useEffect(() => {
     if (highlightedNodeId) {
@@ -98981,45 +99137,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     onEditStateChange == null ? void 0 : onEditStateChange(newState);
     onPendingChangesChange == null ? void 0 : onPendingChangesChange(hasChanges);
   }, [editStateRef, onEditStateChange, onPendingChangesChange, checkHasChanges]);
-  const detectAlignmentGuides = useCallback((draggingNodeId, nodes2) => {
-    const threshold = 5;
-    const guides = [];
-    const draggingNode = nodes2.find((n2) => n2.id === draggingNodeId);
-    if (!draggingNode)
-      return guides;
-    const dragLeft = draggingNode.position.x;
-    const dragRight = draggingNode.position.x + (draggingNode.width ?? 0);
-    const dragCenterX = draggingNode.position.x + (draggingNode.width ?? 0) / 2;
-    const dragTop = draggingNode.position.y;
-    const dragBottom = draggingNode.position.y + (draggingNode.height ?? 0);
-    const dragCenterY = draggingNode.position.y + (draggingNode.height ?? 0) / 2;
-    for (const node2 of nodes2) {
-      if (node2.id === draggingNodeId)
-        continue;
-      const nodeLeft = node2.position.x;
-      const nodeRight = node2.position.x + (node2.width ?? 0);
-      const nodeCenterX = node2.position.x + (node2.width ?? 0) / 2;
-      const nodeTop = node2.position.y;
-      const nodeBottom = node2.position.y + (node2.height ?? 0);
-      const nodeCenterY = node2.position.y + (node2.height ?? 0) / 2;
-      if (Math.abs(dragLeft - nodeLeft) < threshold) {
-        guides.push({ type: "vertical", position: nodeLeft, label: "Left" });
-      } else if (Math.abs(dragCenterX - nodeCenterX) < threshold) {
-        guides.push({ type: "vertical", position: nodeCenterX, label: "Center" });
-      } else if (Math.abs(dragRight - nodeRight) < threshold) {
-        guides.push({ type: "vertical", position: nodeRight, label: "Right" });
-      }
-      if (Math.abs(dragTop - nodeTop) < threshold) {
-        guides.push({ type: "horizontal", position: nodeTop, label: "Top" });
-      } else if (Math.abs(dragCenterY - nodeCenterY) < threshold) {
-        guides.push({ type: "horizontal", position: nodeCenterY, label: "Middle" });
-      } else if (Math.abs(dragBottom - nodeBottom) < threshold) {
-        guides.push({ type: "horizontal", position: nodeBottom, label: "Bottom" });
-      }
-    }
-    const uniqueGuides = guides.filter((guide, index2, self2) => index2 === self2.findIndex((g2) => g2.type === guide.type && g2.position === guide.position));
-    return uniqueGuides;
-  }, []);
   const onEdgeClick = useCallback((event, edge) => {
     if (event.shiftKey && editable) {
       setSelectedEdgeIds((prev) => {
@@ -99046,27 +99163,14 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }
   }, [editable, selectedEdgeIds]);
   const onNodeClick = useCallback((event, node2) => {
-    if (event.metaKey || event.ctrlKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      hidingNodeRef.current = true;
-      setHiddenNodeIds((prev) => {
-        const next2 = new Set(prev);
-        if (next2.has(node2.id)) {
-          next2.delete(node2.id);
-        } else {
-          next2.add(node2.id);
-        }
-        return next2;
-      });
-      setTimeout(() => {
-        hidingNodeRef.current = false;
-      }, 0);
-      return;
+    const shouldShowPanel = showNodeDetailPanel !== false && (showNodeDetailPanel === true || !onNodeClickProp);
+    if (onNodeClickProp) {
+      onNodeClickProp(node2.id, event);
+      if (showNodeDetailPanel !== true) {
+        return;
+      }
     }
-    if (event.shiftKey) {
-      event.preventDefault();
-      event.stopPropagation();
+    if (event.shiftKey && editable) {
       setSelectedNodeIds((prev) => {
         const next2 = new Set(prev);
         if (next2.has(node2.id)) {
@@ -99074,48 +99178,26 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         } else {
           next2.add(node2.id);
         }
-        if (editable) {
-          setXyflowLocalNodes((nodes2) => nodes2.map((n2) => ({
-            ...n2,
-            selected: n2.id === node2.id ? !prev.has(node2.id) : next2.has(n2.id)
-          })));
-        }
         return next2;
       });
-      return;
-    }
-    const shouldShowPanel = showNodeDetailPanel !== false && (showNodeDetailPanel === true || !onNodeClickProp);
-    if (onNodeClickProp) {
-      onNodeClickProp(node2.id, event);
-      if (showNodeDetailPanel !== true) {
-        return;
-      }
-    }
-    const shouldDeselect = selectedNodeIds.size === 1 && selectedNodeIds.has(node2.id);
-    if (shouldDeselect) {
-      setSelectedNodeIds(/* @__PURE__ */ new Set());
-      setShowNodePanel(false);
-      if (editable) {
-        setXyflowLocalNodes((nodes2) => nodes2.map((n2) => ({
-          ...n2,
-          selected: false
-        })));
-      }
-    } else {
-      setSelectedNodeIds(/* @__PURE__ */ new Set([node2.id]));
       if (shouldShowPanel) {
         setShowNodePanel(true);
       }
-      if (editable) {
-        setXyflowLocalNodes((nodes2) => nodes2.map((n2) => ({
-          ...n2,
-          selected: n2.id === node2.id
-        })));
+    } else {
+      const shouldDeselect = selectedNodeIds.size === 1 && selectedNodeIds.has(node2.id);
+      if (shouldDeselect) {
+        setSelectedNodeIds(/* @__PURE__ */ new Set());
+        setShowNodePanel(false);
+      } else {
+        setSelectedNodeIds(/* @__PURE__ */ new Set([node2.id]));
+        if (shouldShowPanel) {
+          setShowNodePanel(true);
+        }
       }
+      setSelectedEdgeIds(/* @__PURE__ */ new Set());
+      setShowEdgePanel(false);
     }
-    setSelectedEdgeIds(/* @__PURE__ */ new Set());
-    setShowEdgePanel(false);
-  }, [selectedNodeIds, onNodeClickProp, showNodeDetailPanel, editable]);
+  }, [editable, selectedNodeIds, onNodeClickProp, showNodeDetailPanel]);
   const onCloseEdgeInfoPanel = useCallback(() => {
     setSelectedEdgeIds(/* @__PURE__ */ new Set());
     setShowEdgePanel(false);
@@ -99141,9 +99223,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     setShowEdgePanel(false);
   }, []);
   const handleSelectionChange = useCallback(({ nodes: selectedNodes, edges: selectedEdges }) => {
-    if (hidingNodeRef.current) {
-      return;
-    }
     setSelectedNodeIds(new Set(selectedNodes.map((n2) => n2.id)));
     setSelectedEdgeIds(new Set(selectedEdges.map((e2) => e2.id)));
     if (editable) {
@@ -99522,7 +99601,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
           shiftKeyPressed,
           isHighlighted: highlightedNodeId === node2.id,
           isActive: !activeNodeIds || activeNodeIds.length === 0 || activeNodeIds.includes(node2.id),
-          isHidden: hiddenNodeIds.has(node2.id),
           ...animation ? {
             animationType: animation.type,
             animationDuration: animation.duration
@@ -99530,7 +99608,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
       };
     });
-  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds]);
+  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds]);
   const baseNodesKey = useMemo(() => {
     return nodes.map((n2) => n2.id).sort().join(",");
   }, [nodes]);
@@ -99558,15 +99636,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     prevEditableRef.current = editable;
   }, [editable, xyflowNodesBase, updateNodeInternals2]);
   const xyflowNodes = editable ? xyflowLocalNodes : xyflowNodesBase;
-  const handleNodeDrag = useCallback((_event, node2) => {
-    if (!editable)
-      return;
-    const guides = detectAlignmentGuides(node2.id, xyflowNodes);
-    setAlignmentGuides(guides);
-  }, [editable, xyflowNodes, detectAlignmentGuides]);
-  const handleNodeDragStop = useCallback(() => {
-    setAlignmentGuides([]);
-  }, []);
   const handleNodesChange = useCallback((changes) => {
     if (!editable)
       return;
@@ -99606,19 +99675,11 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   }, [editable, updateEditState]);
   const xyflowEdgesBase = useMemo(() => {
     const converted = convertToXYFlowEdges(edges, configuration, violations);
-    const filtered = converted.filter((edge) => {
-      const sourceHidden = hiddenNodeIds.has(edge.source);
-      const targetHidden = hiddenNodeIds.has(edge.target);
-      if (sourceHidden || targetHidden) {
-        return false;
-      }
-      if (activeNodeIds && activeNodeIds.length > 0) {
-        const sourceActive = activeNodeIds.includes(edge.source);
-        const targetActive = activeNodeIds.includes(edge.target);
-        return sourceActive && targetActive;
-      }
-      return true;
-    });
+    const filtered = activeNodeIds && activeNodeIds.length > 0 ? converted.filter((edge) => {
+      const sourceActive = activeNodeIds.includes(edge.source);
+      const targetActive = activeNodeIds.includes(edge.target);
+      return sourceActive && targetActive;
+    }) : converted;
     const mappedEdges = filtered.map((edge) => {
       const animation = animationState.edgeAnimations[edge.id];
       const isSelected = selectedEdgeIds.has(edge.id);
@@ -99647,7 +99708,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         return -1;
       return 0;
     });
-  }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed, activeNodeIds, hiddenNodeIds]);
+  }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed, activeNodeIds]);
   const [xyflowLocalEdges, setXyflowLocalEdges] = useState(xyflowEdgesBase);
   const prevBaseEdgesKeyRef2 = useRef(baseEdgesKey);
   useEffect(() => {
@@ -99674,11 +99735,11 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, 100);
     return () => clearTimeout(timeoutId);
   }, [baseNodesKey, baseEdgesKey, fitView2, fitViewDuration]);
-  return jsxs(Fragment, { children: [jsxs(index$3, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: false, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, selectionOnDrag: true, selectionKeyCode: null, multiSelectionKeyCode: null, children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
+  return jsxs(Fragment, { children: [jsxs(index$3, { 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, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: true, selectionOnDrag: false, selectionKeyCode: editable ? "Shift" : null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
     var _a;
     const nodeData = node2.data;
     return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme2.colors.secondary;
-  }, nodeBorderRadius: 2, pannable: true, zoomable: true }), showCenterIndicator && jsx(CenterIndicator, { color: theme2.colors.textMuted }), editable && alignmentGuides.length > 0 && jsx(AlignmentGuidesOverlay, { guides: alignmentGuides, color: theme2.colors.primary })] }, `${baseNodesKey}-${baseEdgesKey}`), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && jsx(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 && showNodePanel && showNodeDetailPanel !== false && jsx(NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0, resolveEventRef }), pendingConnection && jsxs("div", { style: {
+  }, nodeBorderRadius: 2, pannable: true, zoomable: true }), showCenterIndicator && jsx(CenterIndicator, { color: theme2.colors.textMuted })] }, `${baseNodesKey}-${baseEdgesKey}`), selectedNodeIds.size >= 2 && showNodePanel && showNodeDetailPanel !== false && jsx(SelectionSidebar, { selectedNodeIds, nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel }), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && jsx(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 && showNodePanel && showNodeDetailPanel !== false && jsx(NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0, resolveEventRef }), pendingConnection && jsxs("div", { style: {
     position: "absolute",
     top: "50%",
     left: "50%",
@@ -104205,7 +104266,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-BMFz0tFK.js");
+    await import("./browserAll-BhoSaVBq.js");
   }
 };
 const webworkerExt = {
@@ -104216,7 +104277,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-DQUlWM-8.js");
+    await import("./webworkerAll-NDSOaiUq.js");
   }
 };
 class ObservablePoint {
@@ -116459,19 +116520,19 @@ async function autoDetectRenderer(options) {
   for (let i2 = 0; i2 < preferredOrder.length; i2++) {
     const rendererType = preferredOrder[i2];
     if (rendererType === "webgpu" && await isWebGPUSupported()) {
-      const { WebGPURenderer } = await import("./WebGPURenderer-DT7-x1xm.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-Dc4lZALf.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-CxCLwJCl.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-Du5sLRYZ.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-Bjw_lWbh.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-Dj5DlQFk.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -130859,8 +130920,6 @@ class IsometricInteractionManager {
       event.stopPropagation();
       const worldPos = this.viewport ? this.viewport.toWorld(event.global.x, event.global.y) : this.worldContainer.toLocal(event.global);
       const worldStartPos = this.viewport ? this.viewport.toWorld(this.dragState.dragStartPos.x, this.dragState.dragStartPos.y) : this.worldContainer.toLocal(this.dragState.dragStartPos);
-      this.worldContainer.x || 0;
-      this.worldContainer.y || 0;
       const deltaX = worldPos.x - worldStartPos.x;
       const deltaY = worldPos.y - worldStartPos.y;
       const tileWidth = this.config.tileWidth ?? 64;
@@ -131594,7 +131653,7 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
     const size = node2.size ?? getNodeSize(nodeType);
     return { ...node2, size };
   });
-  const layoutNodes2 = nodeWithSizes.map((node2) => {
+  const layoutNodes = nodeWithSizes.map((node2) => {
     var _a2;
     return {
       id: node2.id,
@@ -131626,7 +131685,7 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
     });
     const nodesByRegion = /* @__PURE__ */ new Map();
     const unassignedNodes = [];
-    for (const layoutNode of layoutNodes2) {
+    for (const layoutNode of layoutNodes) {
       const genericNode = nodeWithSizes.find((n2) => n2.id === layoutNode.id);
       const assignedRegionId = genericNode == null ? void 0 : genericNode.regionId;
       if (assignedRegionId && layoutRegions.some((r2) => r2.regionId === assignedRegionId)) {
@@ -131747,7 +131806,7 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
       }
     }
   } else {
-    const autoLayoutRegions = layoutSpritesMultiRegion(layoutNodes2, REGION_SIZE_TILES, { spacing: 0.5 });
+    const autoLayoutRegions = layoutSpritesMultiRegion(layoutNodes, REGION_SIZE_TILES, { spacing: 0.5 });
     layoutRegions = autoLayoutRegions.map((region, index2) => ({
       regionId: region.regionId,
       name: region.name || `Region ${index2 + 1}`,
@@ -131898,7 +131957,6 @@ function nodesToOverworldMapCollection(nodes, options = {}) {
 const OverworldMapPanelContent = ({
   nodes,
   includeDevDependencies = true,
-  includePeerDependencies = false,
   regionLayout,
   width,
   height,
@@ -131916,7 +131974,6 @@ const OverworldMapPanelContent = ({
   const appRef = useRef(null);
   const viewportRef = useRef(null);
   const worldContainerRef = useRef(null);
-  useRef(1);
   const interactionRef = useRef(null);
   const pathManagerRef = useRef(null);
   const rendererRef = useRef(null);
@@ -132092,7 +132149,7 @@ const OverworldMapPanelContent = ({
           }
         },
         {
-          onDragStart: (nodeId) => {
+          onDragStart: (_nodeId) => {
           },
           onDragMove: (nodeId, gridX, gridY) => {
             pathManager.updateNodePosition(nodeId, gridX, gridY);
@@ -132680,10 +132737,7 @@ const CollectionMapPanelContent = ({
   repositories,
   dependencies = {},
   regionLayout,
-  width,
-  height,
   isLoading = false,
-  onProjectMoved,
   onProjectAdded,
   regionCallbacks
 }) => {
@@ -132811,6 +132865,12 @@ This indicates a sprite was rendered without valid backing data.`
       {
         dataType: "repository-project",
         onDrop: handleProjectDrop
+      },
+      {
+        dataType: "application/x-unplaced-node",
+        onDrop: async (data, event) => {
+          await handleDrawerDrop(event);
+        }
       }
     ],
     showVisualFeedback: true
@@ -133014,12 +133074,6 @@ This indicates a sprite was rendered without valid backing data.`
         transition: "border-color 0.2s ease"
       },
       ...dropZoneProps,
-      onDragOver: (e2) => {
-        if (e2.dataTransfer.types.includes("application/x-unplaced-node")) {
-          e2.preventDefault();
-        }
-      },
-      onDrop: handleDrawerDrop,
       children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -133173,13 +133227,12 @@ This indicates a sprite was rendered without valid backing data.`
   );
 };
 const CollectionMapPanel = ({ context: context2, actions }) => {
-  var _a, _b, _c, _d;
   const { selectedCollectionView } = context2;
-  const selectedCollection = (_a = selectedCollectionView == null ? void 0 : selectedCollectionView.data) == null ? void 0 : _a.collection;
-  const memberships = ((_b = selectedCollectionView == null ? void 0 : selectedCollectionView.data) == null ? void 0 : _b.memberships) || [];
-  const repositories = ((_c = selectedCollectionView == null ? void 0 : selectedCollectionView.data) == null ? void 0 : _c.repositories) || [];
-  const dependencies = ((_d = selectedCollectionView == null ? void 0 : selectedCollectionView.data) == null ? void 0 : _d.dependencies) || {};
-  const isLoading = (selectedCollectionView == null ? void 0 : selectedCollectionView.loading) ?? false;
+  const selectedCollection = selectedCollectionView.data.collection;
+  const memberships = selectedCollectionView.data.memberships;
+  const repositories = selectedCollectionView.data.repositories;
+  const dependencies = selectedCollectionView.data.dependencies || {};
+  const isLoading = selectedCollectionView.loading;
   const handleProjectAdded = useCallback((repositoryPath, repositoryMetadata) => {
     console.log("[handleProjectAdded] Called with:", { repositoryPath, repositoryMetadata, selectedCollection: selectedCollection == null ? void 0 : selectedCollection.id });
     if (!selectedCollection) {
@@ -134268,4 +134321,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-iJqxW9Dv.js.map
+//# sourceMappingURL=index-C70rwAR9.js.map