@industry-theme/repository-composition-panels 0.2.53 → 0.2.55

package/dist/panels/PackageCompositionPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PanelComponentProps } from '../types';
+import type { PanelComponentProps, PanelEventEmitter } from '../types';
 import type { PackageLayer, ConfigFile, PackageCommand } from '../types/composition';
 export interface PackageCompositionPanelProps {
     /** Detected packages in the repository */
@@ -18,6 +18,8 @@ export interface PackageCompositionPanelProps {
     onPackageHover?: (pkg: PackageLayer | null) => void;
     /** Callback when a package is selected (null when deselected) */
     onPackageSelect?: (pkg: PackageLayer | null) => void;
+    /** Event emitter for panel communication */
+    events?: PanelEventEmitter;
 }
 /**
  * PackageCompositionPanelContent - Internal component that renders the package composition UI

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

@@ -1 +1 @@
-{"version":3,"file":"PackageCompositionPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PackageCompositionPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAmBjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA8VrF,MAAM,WAAW,4BAA4B;IAC3C,0CAA0C;IAC1C,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,gDAAgD;IAChD,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAilBD;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAuNjF,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAiClD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyCjE,CAAC"}
+{"version":3,"file":"PackageCompositionPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PackageCompositionPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAmBjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA8VrF,MAAM,WAAW,4BAA4B;IAC3C,0CAA0C;IAC1C,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,gDAAgD;IAChD,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAilBD;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA8PjF,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAiClD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0CjE,CAAC"}

package/dist/panels/dependency-graph/DependencyGraphPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DependencyGraphPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/dependency-graph/DependencyGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAa9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgBD;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8V3E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAuB/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAa9D,CAAC"}
+{"version":3,"file":"DependencyGraphPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/dependency-graph/DependencyGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAa9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgBD;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoW3E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAwB/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAa9D,CAAC"}

package/dist/panels/dependency-graph/dependencyToCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dependencyToCanvas.d.ts","sourceRoot":"","sources":["../../../src/panels/dependency-graph/dependencyToCanvas.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,mCAAmC,CAAC;AACrF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,4CAA4C;IAC5C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,YAAY,EAAE,EACxB,OAAO,GAAE,uBAA4B,GACpC,cAAc,CAsHhB"}
+{"version":3,"file":"dependencyToCanvas.d.ts","sourceRoot":"","sources":["../../../src/panels/dependency-graph/dependencyToCanvas.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAA4B,MAAM,mCAAmC,CAAC;AAClG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAgB5D,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,4CAA4C;IAC5C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,YAAY,EAAE,EACxB,OAAO,GAAE,uBAA4B,GACpC,cAAc,CAwHhB"}

package/dist/panels.bundle.js

@@ -3387,7 +3387,8 @@ const PackageCompositionPanelContent = ({
   onConfigClick,
   onPackageClick,
   onPackageHover,
-  onPackageSelect
+  onPackageSelect,
+  events
 }) => {
   const { theme } = useTheme();
   const [selectedPackageId, setSelectedPackageId] = useState(null);
@@ -3491,10 +3492,50 @@ const PackageCompositionPanelContent = ({
                       },
                       children: [
                         /* @__PURE__ */ jsx(FileCode$1, { size: 16, color: theme.colors.primary }),
-                        /* @__PURE__ */ jsxs("span", { style: { fontSize: theme.fontSizes[1], fontFamily: theme.fonts.body, color: theme.colors.textSecondary }, children: [
+                        /* @__PURE__ */ jsxs("span", { style: { fontSize: theme.fontSizes[1], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, flex: 1 }, children: [
                           packages.length,
                           " packages"
-                        ] })
+                        ] }),
+                        packages.length > 1 && /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: () => {
+                              events == null ? void 0 : events.emit({
+                                type: "dependency-graph:open",
+                                source: "PackageCompositionPanel",
+                                timestamp: Date.now(),
+                                payload: { packages }
+                              });
+                            },
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "4px",
+                              padding: "4px 8px",
+                              backgroundColor: theme.colors.backgroundTertiary,
+                              border: `1px solid ${theme.colors.border}`,
+                              borderRadius: "4px",
+                              color: theme.colors.text,
+                              fontSize: theme.fontSizes[0],
+                              fontFamily: theme.fonts.body,
+                              cursor: "pointer",
+                              transition: "all 0.15s ease"
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.borderColor = theme.colors.primary;
+                              e.currentTarget.style.backgroundColor = theme.colors.primary + "15";
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.borderColor = theme.colors.border;
+                              e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
+                            },
+                            title: "Open dependency graph in new tab",
+                            children: [
+                              /* @__PURE__ */ jsx(GitBranch$1, { size: 12 }),
+                              "View Graph"
+                            ]
+                          }
+                        )
                       ]
                     }
                   ),
@@ -3672,7 +3713,8 @@ const PackageCompositionPanel = ({ context, events }) => {
       packages,
       isLoading,
       onPackageHover: handlePackageHover,
-      onPackageSelect: handlePackageSelect
+      onPackageSelect: handlePackageSelect,
+      events
     }
   );
 };
@@ -55922,6 +55964,19 @@ const GraphRenderer = forwardRef((props, ref) => {
   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";
+const ROOT_COLOR = "#f97316";
+const LANGUAGE_COLORS = {
+  package: "#06b6d4",
+  // cyan - generic/JS
+  node: "#06b6d4",
+  // cyan - Node.js/TypeScript
+  python: "#fbbf24",
+  // yellow - Python
+  cargo: "#ef4444",
+  // red - Rust
+  go: "#22c55e"
+  // green - Go
+};
 function dependencyTreeToCanvas(packages, options = {}) {
   const {
     includeDevDependencies = true,
@@ -55933,6 +55988,7 @@ function dependencyTreeToCanvas(packages, options = {}) {
   const nodes = packages.map((pkg) => {
     const isRoot = pkg.packageData.isMonorepoRoot;
     const shape = isRoot ? "hexagon" : "rectangle";
+    const color2 = isRoot ? ROOT_COLOR : LANGUAGE_COLORS[pkg.type] || "#06b6d4";
     return {
       id: pkg.id,
       x: 0,
@@ -55942,8 +55998,7 @@ function dependencyTreeToCanvas(packages, options = {}) {
       height: nodeHeight,
       type: "text",
       text: pkg.packageData.name,
-      color: isRoot ? "2" : void 0,
-      // Use color preset 2 (orange) for root
+      color: color2,
       pv: {
         nodeType: isRoot ? "monorepo-root" : "package",
         shape,
@@ -59486,7 +59541,7 @@ const DependencyGraphPanelContent = ({
       nodeSpacingY: layoutConfig.nodeSpacingY
     };
     return applySugiyamaLayout(rawCanvas, layoutOptions);
-  }, [packages, layoutConfig, layoutVersion]);
+  }, [packages, layoutConfig]);
   const handleReapplyLayout = useCallback(() => {
     setLayoutVersion((v) => v + 1);
   }, []);
@@ -59513,7 +59568,8 @@ const DependencyGraphPanelContent = ({
           alignItems: "center",
           justifyContent: "center",
           gap: "12px",
-          color: theme.colors.textSecondary
+          color: theme.colors.textSecondary,
+          fontFamily: theme.fonts.body
         },
         children: [
           /* @__PURE__ */ jsx(LoaderCircle$1, { size: 32, style: { animation: "spin 1s linear infinite" } }),
@@ -59535,6 +59591,7 @@ const DependencyGraphPanelContent = ({
           justifyContent: "center",
           gap: "12px",
           color: theme.colors.textSecondary,
+          fontFamily: theme.fonts.body,
           padding: "24px",
           textAlign: "center"
         },
@@ -59558,6 +59615,7 @@ const DependencyGraphPanelContent = ({
           justifyContent: "center",
           gap: "12px",
           color: theme.colors.textSecondary,
+          fontFamily: theme.fonts.body,
           padding: "24px",
           textAlign: "center"
         },
@@ -59581,6 +59639,7 @@ const DependencyGraphPanelContent = ({
           justifyContent: "center",
           gap: "12px",
           color: theme.colors.textSecondary,
+          fontFamily: theme.fonts.body,
           padding: "24px",
           textAlign: "center"
         },
@@ -59607,8 +59666,8 @@ const DependencyGraphPanelContent = ({
         children: [
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
             /* @__PURE__ */ jsx(GitBranch$1, { size: 16, color: theme.colors.primary }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[2], fontWeight: 500 }, children: "Dependency Graph" }),
-            /* @__PURE__ */ jsxs("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes[2], fontWeight: 500, color: theme.colors.text, fontFamily: theme.fonts.body }, children: "Dependency Graph" }),
+            /* @__PURE__ */ jsxs("span", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary, fontFamily: theme.fonts.body }, children: [
               "(",
               packages.length,
               " packages, ",
@@ -59676,7 +59735,7 @@ const DependencyGraphPanelContent = ({
         },
         children: [
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
-            /* @__PURE__ */ jsx("label", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary }, children: "Direction" }),
+            /* @__PURE__ */ jsx("label", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary, fontFamily: theme.fonts.body }, children: "Direction" }),
             /* @__PURE__ */ jsx(
               "select",
               {
@@ -59688,14 +59747,15 @@ const DependencyGraphPanelContent = ({
                   border: `1px solid ${theme.colors.border}`,
                   borderRadius: "4px",
                   color: theme.colors.text,
-                  fontSize: theme.fontSizes[1]
+                  fontSize: theme.fontSizes[1],
+                  fontFamily: theme.fonts.body
                 },
                 children: Object.entries(directionLabels).map(([value, label]) => /* @__PURE__ */ jsx("option", { value, children: label }, value))
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
-            /* @__PURE__ */ jsxs("label", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary }, children: [
+            /* @__PURE__ */ jsxs("label", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary, fontFamily: theme.fonts.body }, children: [
               "H-Spacing: ",
               layoutConfig.nodeSpacingX,
               "px"
@@ -59714,7 +59774,7 @@ const DependencyGraphPanelContent = ({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
-            /* @__PURE__ */ jsxs("label", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary }, children: [
+            /* @__PURE__ */ jsxs("label", { style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary, fontFamily: theme.fonts.body }, children: [
               "V-Spacing: ",
               layoutConfig.nodeSpacingY,
               "px"
@@ -59746,7 +59806,7 @@ const DependencyGraphPanelContent = ({
               "label",
               {
                 htmlFor: "include-dev-deps",
-                style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary, cursor: "pointer" },
+                style: { fontSize: theme.fontSizes[1], color: theme.colors.textSecondary, fontFamily: theme.fonts.body, cursor: "pointer" },
                 children: "Include devDependencies"
               }
             )
@@ -59773,7 +59833,8 @@ const DependencyGraphPanelContent = ({
           borderTop: `1px solid ${theme.colors.border}`,
           backgroundColor: theme.colors.backgroundSecondary,
           fontSize: theme.fontSizes[1],
-          color: theme.colors.textSecondary
+          color: theme.colors.textSecondary,
+          fontFamily: theme.fonts.body
         },
         children: [
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
@@ -59817,6 +59878,7 @@ const DependencyGraphPanelPreview = () => {
         padding: "12px",
         fontSize: "12px",
         color: theme.colors.text,
+        fontFamily: theme.fonts.body,
         display: "flex",
         flexDirection: "column",
         gap: "6px"