@industry-theme/repository-composition-panels 0.2.52 → 0.2.54

package/dist/panels.bundle.js

@@ -13264,6 +13264,10 @@ function resolveCanvasColor(color2) {
   if (typeof color2 === "number") {
     return CANVAS_COLOR_PRESETS[color2];
   }
+  const numericValue = parseInt(color2, 10);
+  if (!isNaN(numericValue) && numericValue >= 1 && numericValue <= 6) {
+    return CANVAS_COLOR_PRESETS[numericValue];
+  }
   return color2;
 }
 function sideToHandle(side) {
@@ -54528,8 +54532,8 @@ const COMMON_ICONS = [
   "GitMerge",
   "GitPullRequest"
 ];
-const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate, onSourceClick, resolveEventRef }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l;
+const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate, resolveEventRef }) => {
+  var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j;
   const { theme } = useTheme();
   const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.primary;
   const canEdit = Boolean(onUpdate);
@@ -54570,12 +54574,10 @@ const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDe
     "eventRef"
     // Handle separately in Event section
   ];
-  const otelInfo = (_d = node.data) == null ? void 0 : _d.otel;
-  const eventInfo = (_e2 = node.data) == null ? void 0 : _e2.event;
-  const eventRef = (_f = node.data) == null ? void 0 : _f.eventRef;
+  const eventInfo = (_d = node.data) == null ? void 0 : _d.event;
+  const eventRef = (_e2 = node.data) == null ? void 0 : _e2.eventRef;
   const resolvedEvent = eventRef && resolveEventRef ? resolveEventRef(eventRef) : void 0;
   const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key)) : [];
-  const sources = ((_g = node.data) == null ? void 0 : _g.sources) || [];
   const handleTypeChange = (newType) => {
     if (onUpdate && newType !== node.type) {
       onUpdate(node.id, { type: newType });
@@ -54650,28 +54652,7 @@ const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDe
     e.currentTarget.style.backgroundColor = theme.colors.muted;
   }, onMouseLeave: (e) => {
     e.currentTarget.style.backgroundColor = "transparent";
-  }, children: "×" })] })] }), jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "24px" }, children: [jsxs("div", { children: [((_h = node.data) == null ? void 0 : _h.description) && jsxs("div", { style: { marginBottom: "12px" }, children: [jsx("div", { style: { fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), jsx("div", { style: { fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }, children: String(node.data.description) })] }), otelInfo && jsxs("div", { style: { marginBottom: "12px" }, children: [jsx("div", { style: { fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: "4px" }, children: "OpenTelemetry" }), jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", alignItems: "center" }, children: [otelInfo.kind && jsx("span", { style: {
-    fontSize: theme.fontSizes[0],
-    fontWeight: theme.fontWeights.semibold,
-    fontFamily: theme.fonts.body,
-    padding: "3px 8px",
-    borderRadius: "4px",
-    textTransform: "uppercase",
-    color: "white",
-    backgroundColor: otelInfo.kind === "type" ? "#4A90E2" : otelInfo.kind === "service" ? "#7ED321" : otelInfo.kind === "instance" ? "#9B59B6" : "#888"
-  }, children: otelInfo.kind }), otelInfo.category && jsx("span", { style: {
-    fontSize: theme.fontSizes[0],
-    fontFamily: theme.fonts.body,
-    color: theme.colors.textSecondary
-  }, children: otelInfo.category }), otelInfo.isNew && jsx("span", { style: {
-    fontSize: theme.fontSizes[0],
-    fontWeight: theme.fontWeights.semibold,
-    fontFamily: theme.fonts.body,
-    padding: "2px 6px",
-    borderRadius: "3px",
-    backgroundColor: "#F5A623",
-    color: "white"
-  }, children: "NEW" })] })] }), (eventInfo || eventRef || resolvedEvent) && jsx("div", { style: { marginBottom: "12px", marginTop: "-4px" }, children: (() => {
+  }, children: "×" })] })] }), jsxs("div", { children: [((_f = node.data) == null ? void 0 : _f.description) && jsxs("div", { style: { marginBottom: "12px" }, children: [jsx("div", { style: { fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), jsx("div", { style: { fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }, children: String(node.data.description) })] }), (eventInfo || eventRef || resolvedEvent) && jsx("div", { style: { marginBottom: "12px", marginTop: "-4px" }, children: (() => {
     const displayEvent = resolvedEvent || eventInfo;
     if (displayEvent) {
       return jsxs("div", { children: [jsx("div", { style: {
@@ -54723,47 +54704,7 @@ const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDe
       }, children: eventRef });
     }
     return null;
-  })() })] }), jsx("div", { children: sources.length > 0 && jsxs("div", { style: { marginBottom: "12px" }, children: [jsx("div", { style: { fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Sources" }), jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: sources.map((source, index2) => onSourceClick ? jsx("button", { onClick: () => {
-    console.log("Source clicked:", source, "from node:", node.id);
-    onSourceClick(node.id, source);
-  }, style: {
-    fontSize: theme.fontSizes[0],
-    fontFamily: "monospace",
-    padding: "6px 10px",
-    backgroundColor: theme.colors.muted,
-    borderRadius: "4px",
-    color: theme.colors.primary,
-    border: `1px solid ${theme.colors.border}`,
-    cursor: "pointer",
-    transition: "all 0.15s",
-    textAlign: "left",
-    width: "100%",
-    textDecoration: "underline",
-    textDecorationStyle: "dotted",
-    textDecorationColor: theme.colors.primary
-  }, onMouseEnter: (e) => {
-    e.currentTarget.style.backgroundColor = theme.colors.primary;
-    e.currentTarget.style.color = theme.colors.background;
-    e.currentTarget.style.borderColor = theme.colors.primary;
-    e.currentTarget.style.textDecoration = "underline";
-    e.currentTarget.style.textDecorationColor = theme.colors.background;
-  }, onMouseLeave: (e) => {
-    e.currentTarget.style.backgroundColor = theme.colors.muted;
-    e.currentTarget.style.color = theme.colors.primary;
-    e.currentTarget.style.borderColor = theme.colors.border;
-    e.currentTarget.style.textDecoration = "underline";
-    e.currentTarget.style.textDecorationStyle = "dotted";
-    e.currentTarget.style.textDecorationColor = theme.colors.primary;
-  }, children: source }, index2) : jsx("span", { style: {
-    fontSize: theme.fontSizes[0],
-    fontFamily: "monospace",
-    padding: "6px 10px",
-    backgroundColor: theme.colors.muted,
-    borderRadius: "4px",
-    color: theme.colors.textSecondary,
-    display: "block",
-    border: `1px solid ${theme.colors.border}`
-  }, children: source }, index2)) })] }) })] }), canEdit && jsxs("button", { onClick: () => setShowDetails(!showDetails), style: {
+  })() })] }), canEdit && jsxs("button", { onClick: () => setShowDetails(!showDetails), style: {
     width: "100%",
     padding: "8px",
     backgroundColor: theme.colors.surface,
@@ -54845,11 +54786,11 @@ const NodeInfoPanel = ({ node, typeDefinition, availableNodeTypes, onClose, onDe
     fontSize: theme.fontSizes[0],
     fontFamily: theme.fonts.body,
     padding: "4px 8px",
-    backgroundColor: ((_j = (_i = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _i[node.state]) == null ? void 0 : _j.color) || theme.colors.secondary,
+    backgroundColor: ((_h = (_g = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _g[node.state]) == null ? void 0 : _h.color) || theme.colors.secondary,
     color: theme.colors.background,
     borderRadius: "4px",
     display: "inline-block"
-  }, children: ((_l = (_k = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _k[node.state]) == null ? void 0 : _l.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && jsxs("div", { style: { marginBottom: "12px" }, children: [jsx("div", { style: {
+  }, children: ((_j = (_i = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _i[node.state]) == null ? void 0 : _j.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && jsxs("div", { style: { marginBottom: "12px" }, children: [jsx("div", { style: {
     fontSize: theme.fontSizes[0],
     fontFamily: theme.fonts.body,
     color: theme.colors.textSecondary,
@@ -55097,7 +55038,7 @@ 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 = "dots", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onSourceClick, 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 } = useTheme();
@@ -55768,7 +55709,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     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 }), showCenterIndicator && jsx(CenterIndicator, { color: theme.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, onSourceClick, resolveEventRef }), pendingConnection && jsxs("div", { style: {
+  }, nodeBorderRadius: 2, pannable: true, zoomable: true }), showCenterIndicator && jsx(CenterIndicator, { color: theme.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%",
@@ -55977,8 +55918,8 @@ const GraphRenderer = forwardRef((props, ref) => {
     }, children: jsx("p", { children: "No canvas data provided." }) });
   }
   const { configuration, nodes, edges } = canvasData;
-  const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onSourceClick, onNodeClick, showNodeDetailPanel, resolveEventRef } = props;
-  return jsx("div", { className, style: { width, height, position: "relative" }, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onSourceClick, onNodeClick, showNodeDetailPanel, resolveEventRef }) }) });
+  const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, showNodeDetailPanel, resolveEventRef } = props;
+  return jsx("div", { className, style: { width, height, position: "relative" }, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onNodeClick, showNodeDetailPanel, resolveEventRef }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
 function dependencyTreeToCanvas(packages, options = {}) {