@principal-ade/code-quality-panels 0.1.15 → 0.1.16

package/dist/panels.bundle.js

@@ -348,11 +348,11 @@ function getThemeColors(theme) {
     textColor: theme.colors.text,
     scoreColor: theme.colors.text,
     tierColors: {
-      none: { fill: theme.colors.muted, stroke: theme.colors.border, bg: theme.colors.backgroundLight },
-      bronze: { fill: theme.colors.warning, stroke: theme.colors.warning, bg: theme.colors.backgroundLight },
-      silver: { fill: theme.colors.secondary, stroke: theme.colors.secondary, bg: theme.colors.backgroundLight },
-      gold: { fill: theme.colors.accent, stroke: theme.colors.accent, bg: theme.colors.backgroundLight },
-      platinum: { fill: theme.colors.primary, stroke: theme.colors.primary, bg: theme.colors.backgroundLight }
+      none: { fill: "#808080", stroke: "#808080", bg: theme.colors.backgroundLight },
+      bronze: { fill: "#CD7F32", stroke: "#CD7F32", bg: theme.colors.backgroundLight },
+      silver: { fill: "#C0C0C0", stroke: "#C0C0C0", bg: theme.colors.backgroundLight },
+      gold: { fill: "#FFD700", stroke: "#FFD700", bg: theme.colors.backgroundLight },
+      platinum: { fill: "#E5E4E2", stroke: "#E5E4E2", bg: theme.colors.backgroundLight }
     },
     metricColors: {
       types: theme.colors.warning,
@@ -369,13 +369,19 @@ function getThemeColors(theme) {
     }
   };
 }
+function getValueColor$1(value, key) {
+  const effectiveValue = key === "deadCode" ? 100 - value : value;
+  if (effectiveValue >= 80) return "#2E7D32";
+  if (effectiveValue >= 60) return "#E6A700";
+  return "#C62828";
+}
 const getMetricConfig = (themeColors) => [
-  { key: "types", label: "Types", color: themeColors.metricColors.types, angle: -120 },
-  { key: "documentation", label: "Docs", color: themeColors.metricColors.documentation, angle: -60 },
-  { key: "tests", label: "Tests", color: themeColors.metricColors.tests, angle: 0 },
-  { key: "deadCode", label: "Dead Code", color: themeColors.metricColors.deadCode, angle: 60 },
-  { key: "formatting", label: "Format", color: themeColors.metricColors.formatting, angle: 120 },
-  { key: "linting", label: "Linting", color: themeColors.metricColors.linting, angle: 180 }
+  { key: "formatting", label: "Format", color: themeColors.metricColors.formatting, angle: -120 },
+  { key: "linting", label: "Linting", color: themeColors.metricColors.linting, angle: -60 },
+  { key: "types", label: "Types", color: themeColors.metricColors.types, angle: 0 },
+  { key: "tests", label: "Tests", color: themeColors.metricColors.tests, angle: 60 },
+  { key: "deadCode", label: "Dead Code", color: themeColors.metricColors.deadCode, angle: 120 },
+  { key: "documentation", label: "Docs", color: themeColors.metricColors.documentation, angle: 180 }
 ];
 function calculateHexagonPoints(center, radius, metricConfig) {
   return metricConfig.map(({ angle }) => {
@@ -731,9 +737,8 @@ function QualityHexagonDetailed({
               showValues: false
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { style: { flex: "1 1 200px", minWidth: 200, display: "flex", flexDirection: "column", gap: 8, padding: "8px 24px" }, children: metricConfig.map(({ key, label, color }) => {
+          /* @__PURE__ */ jsx("div", { style: { flex: "1 1 200px", minWidth: 200, display: "flex", flexDirection: "column", gap: 8, padding: "8px 24px" }, children: metricConfig.map(({ key, label }) => {
             const value = metrics[key];
-            const displayValue = value;
             return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [
               /* @__PURE__ */ jsxs("span", { style: {
                 fontSize: 14,
@@ -745,9 +750,9 @@ function QualityHexagonDetailed({
               /* @__PURE__ */ jsxs("span", { style: {
                 fontSize: 14,
                 fontWeight: 500,
-                color
+                color: getValueColor$1(value, key)
               }, children: [
-                displayValue,
+                value,
                 "%"
               ] })
             ] }, key);
@@ -905,7 +910,7 @@ function QualityHexagonExpandable({
               padding: "8px 24px",
               borderTop: `1px solid ${theme.colors.border}`,
               marginTop: 8
-            }, children: metricConfig.map(({ key, label, color }) => {
+            }, children: metricConfig.map(({ key, label }) => {
               const value = metrics[key];
               return /* @__PURE__ */ jsxs(
                 "div",
@@ -944,7 +949,7 @@ function QualityHexagonExpandable({
                     /* @__PURE__ */ jsxs("span", { style: {
                       fontSize: 14,
                       fontWeight: 500,
-                      color
+                      color: getValueColor$1(value, key)
                     }, children: [
                       value,
                       "%"
@@ -1064,10 +1069,10 @@ const CommandLine = ({ command, theme, label }) => {
 };
 const MetricsPreview = ({ theme }) => {
   const metrics = [
-    { key: "tests", label: "Tests", description: "Test coverage & pass rate", Icon: FlaskConical },
+    { key: "formatting", label: "Formatting", description: "Prettier code style", Icon: Sparkles },
     { key: "linting", label: "Linting", description: "ESLint code quality", Icon: FileSearch },
     { key: "types", label: "Types", description: "TypeScript type safety", Icon: Braces },
-    { key: "formatting", label: "Formatting", description: "Prettier code style", Icon: Sparkles },
+    { key: "tests", label: "Tests", description: "Test coverage & pass rate", Icon: FlaskConical },
     { key: "deadCode", label: "Dead Code", description: "Unused exports & deps", Icon: Trash2 },
     { key: "documentation", label: "Docs", description: "Code documentation", Icon: BookOpen }
   ];
@@ -1483,11 +1488,11 @@ const QualityHexagonPanelContent = ({
     return () => unsubscribers.forEach((unsub) => unsub());
   }, [events, context, packages]);
   const tierColors = {
-    none: theme.colors.muted,
-    bronze: theme.colors.warning,
-    silver: theme.colors.secondary,
-    gold: theme.colors.accent,
-    platinum: theme.colors.primary
+    none: "#808080",
+    bronze: "#CD7F32",
+    silver: "#C0C0C0",
+    gold: "#FFD700",
+    platinum: "#E5E4E2"
   };
   const overallTier = packages.length > 0 ? calculateQualityTier(
     packages.reduce((acc, pkg) => ({
@@ -1631,12 +1636,12 @@ const QualityHexagonPanelContent = ({
 };
 const QualityHexagonPanel = QualityHexagonPanelContent;
 const METRIC_OPTIONS = [
+  { key: "formatting", label: "Format" },
+  { key: "linting", label: "Linting" },
   { key: "types", label: "Types" },
-  { key: "documentation", label: "Docs" },
   { key: "tests", label: "Tests" },
   { key: "deadCode", label: "Dead Code" },
-  { key: "formatting", label: "Format" },
-  { key: "linting", label: "Linting" }
+  { key: "documentation", label: "Docs" }
 ];
 function flattenRepositories(repositories) {
   const items = [];
@@ -1677,11 +1682,11 @@ function formatLabel(item, showRepositoryName, isSameAsRepo) {
   }
   return `${item.repositoryName} / ${item.packageName}`;
 }
-function getValueColor(value, key, theme) {
+function getValueColor(value, key) {
   const effectiveValue = key === "deadCode" ? 100 - value : value;
-  if (effectiveValue >= 80) return theme.colors.success;
-  if (effectiveValue >= 60) return theme.colors.warning;
-  return theme.colors.error;
+  if (effectiveValue >= 80) return "#2E7D32";
+  if (effectiveValue >= 60) return "#E6A700";
+  return "#C62828";
 }
 function RepositoryQualityGridItem({
   item,
@@ -1696,11 +1701,11 @@ function RepositoryQualityGridItem({
   const isSameAsRepo = item.packageName === item.repositoryName;
   const label = formatLabel(item, showRepositoryName, isSameAsRepo);
   const tierColors = {
-    none: theme.colors.muted,
-    bronze: theme.colors.warning,
-    silver: theme.colors.secondary,
-    gold: theme.colors.accent,
-    platinum: theme.colors.primary
+    none: "#808080",
+    bronze: "#CD7F32",
+    silver: "#C0C0C0",
+    gold: "#FFD700",
+    platinum: "#E5E4E2"
   };
   const displayInfo = React2.useMemo(() => {
     if (selectedMetric) {
@@ -1710,7 +1715,7 @@ function RepositoryQualityGridItem({
         return {
           label: option.label,
           value,
-          valueColor: getValueColor(value, selectedMetric, theme)
+          valueColor: getValueColor(value, selectedMetric)
         };
       }
     }
@@ -1718,11 +1723,11 @@ function RepositoryQualityGridItem({
       return {
         label: hoveredVertex.label,
         value: hoveredVertex.value,
-        valueColor: getValueColor(hoveredVertex.value, hoveredVertex.key, theme)
+        valueColor: getValueColor(hoveredVertex.value, hoveredVertex.key)
       };
     }
     return null;
-  }, [selectedMetric, hoveredVertex, item.metrics, theme]);
+  }, [selectedMetric, hoveredVertex, item.metrics]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1877,11 +1882,11 @@ function RepositoryQualityGrid({
     });
   }, [items, selectedMetric]);
   const tierColors = {
-    none: theme.colors.muted,
-    bronze: theme.colors.warning,
-    silver: theme.colors.secondary,
-    gold: theme.colors.accent,
-    platinum: theme.colors.primary
+    none: "#808080",
+    bronze: "#CD7F32",
+    silver: "#C0C0C0",
+    gold: "#FFD700",
+    platinum: "#E5E4E2"
   };
   const tierLabels = {
     none: "No Data",