@principal-ade/code-quality-panels 0.1.0

package/dist/panels.bundle.js

@@ -0,0 +1,955 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React2, { forwardRef, createElement, createContext, useState, useEffect, useContext } from "react";
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  [
+    "path",
+    {
+      d: "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",
+      key: "yt0hxn"
+    }
+  ]
+];
+const Hexagon = createLucideIcon("hexagon", __iconNode);
+var terminalTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fonts: {
+    body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1,
+  fontWeights: {
+    body: 400,
+    heading: 500,
+    bold: 600,
+    light: 300,
+    medium: 500,
+    semibold: 600
+  },
+  lineHeights: {
+    body: 1.6,
+    heading: 1.3,
+    tight: 1.4,
+    relaxed: 1.8
+  },
+  breakpoints: ["640px", "768px", "1024px", "1280px"],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    "none",
+    "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
+    "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
+    "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+  colors: {
+    text: "#e4e4e4",
+    background: "rgba(10, 10, 10, 0.85)",
+    primary: "#66b3ff",
+    secondary: "#80c4ff",
+    accent: "#66ff99",
+    highlight: "rgba(102, 179, 255, 0.15)",
+    muted: "rgba(26, 26, 26, 0.8)",
+    success: "#66ff99",
+    warning: "#ffcc66",
+    error: "#ff6666",
+    info: "#66b3ff",
+    border: "rgba(255, 255, 255, 0.1)",
+    backgroundSecondary: "rgba(15, 15, 15, 0.9)",
+    backgroundTertiary: "rgba(20, 20, 20, 0.9)",
+    backgroundLight: "rgba(255, 255, 255, 0.05)",
+    backgroundHover: "rgba(102, 179, 255, 0.08)",
+    surface: "rgba(15, 15, 15, 0.95)",
+    textSecondary: "rgba(255, 255, 255, 0.7)",
+    textTertiary: "rgba(255, 255, 255, 0.5)",
+    textMuted: "rgba(255, 255, 255, 0.4)",
+    highlightBg: "rgba(255, 235, 59, 0.25)",
+    highlightBorder: "rgba(255, 235, 59, 0.5)"
+  },
+  modes: {
+    light: {
+      text: "#1a1a1a",
+      background: "rgba(255, 255, 255, 0.9)",
+      primary: "#0066cc",
+      secondary: "#0052a3",
+      accent: "#00cc88",
+      highlight: "rgba(0, 102, 204, 0.08)",
+      muted: "rgba(245, 245, 245, 0.8)",
+      success: "#00cc88",
+      warning: "#ffaa00",
+      error: "#ff3333",
+      info: "#0066cc",
+      border: "rgba(0, 0, 0, 0.1)",
+      backgroundSecondary: "rgba(250, 250, 250, 0.9)",
+      backgroundTertiary: "rgba(245, 245, 245, 0.9)",
+      backgroundLight: "rgba(0, 0, 0, 0.02)",
+      backgroundHover: "rgba(0, 102, 204, 0.04)",
+      surface: "rgba(255, 255, 255, 0.95)",
+      textSecondary: "rgba(0, 0, 0, 0.6)",
+      textTertiary: "rgba(0, 0, 0, 0.4)",
+      textMuted: "rgba(0, 0, 0, 0.3)",
+      highlightBg: "rgba(255, 235, 59, 0.3)",
+      highlightBorder: "rgba(255, 235, 59, 0.6)"
+    }
+  },
+  buttons: {
+    primary: {
+      color: "white",
+      bg: "primary",
+      borderWidth: 0,
+      "&:hover": {
+        bg: "secondary"
+      }
+    },
+    secondary: {
+      color: "primary",
+      bg: "transparent",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "primary",
+      "&:hover": {
+        bg: "highlight"
+      }
+    },
+    ghost: {
+      color: "text",
+      bg: "transparent",
+      "&:hover": {
+        bg: "backgroundHover"
+      }
+    }
+  },
+  text: {
+    heading: {
+      fontFamily: "heading",
+      fontWeight: "heading",
+      lineHeight: "heading"
+    },
+    body: {
+      fontFamily: "body",
+      fontWeight: "body",
+      lineHeight: "body"
+    },
+    caption: {
+      fontSize: 1,
+      color: "textSecondary"
+    }
+  },
+  cards: {
+    primary: {
+      bg: "surface",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    },
+    secondary: {
+      bg: "backgroundSecondary",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    }
+  }
+};
+function getMode(theme2, mode) {
+  if (!mode || !theme2.modes || !theme2.modes[mode]) {
+    return theme2.colors;
+  }
+  return {
+    ...theme2.colors,
+    ...theme2.modes[mode]
+  };
+}
+var ThemeContext;
+var getThemeContext = () => {
+  if (typeof window !== "undefined") {
+    const globalWindow = window;
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = createContext(void 0);
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    if (!ThemeContext) {
+      ThemeContext = createContext(void 0);
+    }
+    return ThemeContext;
+  }
+};
+var ThemeContextSingleton = getThemeContext();
+var useTheme = () => {
+  const context = useContext(ThemeContextSingleton);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var ThemeProvider = ({
+  children,
+  theme: customTheme = theme,
+  initialMode
+}) => {
+  const [mode, setMode] = useState(initialMode);
+  const activeTheme = React2.useMemo(() => {
+    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+      return customTheme;
+    }
+    return {
+      ...customTheme,
+      colors: getMode(customTheme, mode)
+    };
+  }, [customTheme, mode]);
+  useEffect(() => {
+    if (!initialMode) {
+      const savedMode = localStorage.getItem("principlemd-theme-mode");
+      if (savedMode) {
+        setMode(savedMode);
+      }
+    }
+  }, [initialMode]);
+  useEffect(() => {
+    if (mode) {
+      localStorage.setItem("principlemd-theme-mode", mode);
+    } else {
+      localStorage.removeItem("principlemd-theme-mode");
+    }
+  }, [mode]);
+  const value = {
+    theme: activeTheme,
+    mode,
+    setMode
+  };
+  return /* @__PURE__ */ React2.createElement(ThemeContextSingleton.Provider, {
+    value
+  }, children);
+};
+var theme = terminalTheme;
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+function cn(...inputs) {
+  return clsx(inputs);
+}
+function getThemeColors(theme2) {
+  return {
+    gridColor: theme2.colors.border,
+    axisColor: theme2.colors.muted,
+    textColor: theme2.colors.text,
+    scoreColor: theme2.colors.text,
+    tierColors: {
+      none: { fill: theme2.colors.muted, stroke: theme2.colors.border, bg: theme2.colors.backgroundLight },
+      bronze: { fill: theme2.colors.warning, stroke: theme2.colors.warning, bg: theme2.colors.backgroundLight },
+      silver: { fill: theme2.colors.secondary, stroke: theme2.colors.secondary, bg: theme2.colors.backgroundLight },
+      gold: { fill: theme2.colors.accent, stroke: theme2.colors.accent, bg: theme2.colors.backgroundLight },
+      platinum: { fill: theme2.colors.primary, stroke: theme2.colors.primary, bg: theme2.colors.backgroundLight }
+    },
+    metricColors: {
+      types: theme2.colors.warning,
+      documentation: theme2.colors.info,
+      tests: theme2.colors.success,
+      deadCode: theme2.colors.error,
+      formatting: theme2.colors.accent,
+      linting: theme2.colors.primary
+    },
+    qualityIndicators: {
+      good: theme2.colors.success,
+      medium: theme2.colors.warning,
+      poor: theme2.colors.error
+    }
+  };
+}
+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 }
+];
+function calculateHexagonPoints(center, radius, metricConfig) {
+  return metricConfig.map(({ angle }) => {
+    const radian = angle * Math.PI / 180;
+    const x = center + radius * Math.cos(radian);
+    const y = center + radius * Math.sin(radian);
+    return `${x},${y}`;
+  }).join(" ");
+}
+function calculateMetricPoint(center, radius, angle, value) {
+  const actualRadius = radius * value / 100;
+  const radian = angle * Math.PI / 180;
+  return {
+    x: center + actualRadius * Math.cos(radian),
+    y: center + actualRadius * Math.sin(radian)
+  };
+}
+function QualityHexagon({
+  metrics,
+  tier,
+  theme: theme2,
+  showLabels = false,
+  showValues = false,
+  className
+}) {
+  const themeColors = getThemeColors(theme2);
+  const colors = themeColors.tierColors[tier] ?? themeColors.tierColors.none;
+  const metricConfig = getMetricConfig(themeColors);
+  const viewBoxSize = 300;
+  const center = viewBoxSize / 2;
+  const radius = viewBoxSize * 0.28;
+  const padding = viewBoxSize * 0.1;
+  const fontSize = viewBoxSize * 0.04;
+  const strokeWidth = viewBoxSize * 8e-3;
+  const dotSize = viewBoxSize * 0.015;
+  const hexagonPoints = calculateHexagonPoints(center, radius, metricConfig);
+  const dataPoints = metricConfig.map(({ key, angle }) => {
+    let value = metrics[key];
+    if (key === "deadCode") {
+      value = 100 - value;
+    }
+    return calculateMetricPoint(center, radius, angle, value);
+  }).map((p) => `${p.x},${p.y}`).join(" ");
+  const metricsForAverage = { ...metrics };
+  metricsForAverage.deadCode = 100 - metricsForAverage.deadCode;
+  const averageScore = Math.round(
+    Object.values(metricsForAverage).reduce((a, b) => a + b, 0) / 6
+  );
+  const hexagon = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+      className: cn("w-full h-full transition-all duration-300", className),
+      preserveAspectRatio: "xMidYMid meet",
+      children: [
+        /* @__PURE__ */ jsx("g", { className: "opacity-20", children: [20, 40, 60, 80, 100].map((percent) => /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: calculateHexagonPoints(center, radius * percent / 100, metricConfig),
+            fill: "none",
+            stroke: themeColors.gridColor,
+            strokeWidth: 0.5,
+            style: { opacity: 0.4 }
+          },
+          percent
+        )) }),
+        metricConfig.map(({ angle }) => {
+          const endPoint = calculateMetricPoint(center, radius, angle, 100);
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: center,
+              y1: center,
+              x2: endPoint.x,
+              y2: endPoint.y,
+              stroke: themeColors.axisColor,
+              strokeWidth: 0.5,
+              style: { opacity: 0.5 }
+            },
+            angle
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: hexagonPoints,
+            fill: "none",
+            stroke: colors.stroke,
+            strokeWidth,
+            style: { opacity: 0.3 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: dataPoints,
+            fill: colors.fill,
+            fillOpacity: 0.3,
+            stroke: colors.stroke,
+            strokeWidth,
+            style: { transition: "all 0.5s ease" }
+          }
+        ),
+        metricConfig.map(({ key, angle }) => {
+          let value = metrics[key];
+          if (key === "deadCode") {
+            value = 100 - value;
+          }
+          const point = calculateMetricPoint(center, radius, angle, 100);
+          const dataPoint = calculateMetricPoint(center, radius, angle, value);
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: dotSize,
+                fill: "white",
+                stroke: colors.stroke,
+                strokeWidth: 1.5
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: dataPoint.x,
+                cy: dataPoint.y,
+                r: dotSize * 0.7,
+                fill: colors.fill,
+                stroke: colors.stroke,
+                strokeWidth: 1,
+                style: { opacity: 0.9 }
+              }
+            )
+          ] }, key);
+        }),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: center,
+            y: center,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            fill: themeColors.scoreColor,
+            fontSize: fontSize * 1.5,
+            fontWeight: "600",
+            children: averageScore
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: center,
+            y: center + fontSize,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            fill: themeColors.textColor,
+            fontSize: fontSize * 0.8,
+            style: { opacity: 0.6 },
+            children: "avg"
+          }
+        ),
+        showLabels && /* @__PURE__ */ jsx(Fragment, { children: metricConfig.map(({ key, label, angle }) => {
+          const labelRadius = radius + padding * 1.2;
+          const point = calculateMetricPoint(center, labelRadius, angle, 100);
+          const value = metrics[key];
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: point.x,
+              y: point.y,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              fill: themeColors.textColor,
+              fontSize,
+              children: showValues ? `${value}%` : label
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+  return hexagon;
+}
+function QualityHexagonCompact({
+  metrics,
+  tier,
+  theme: theme2,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-20 h-20", className), children: /* @__PURE__ */ jsx(
+    QualityHexagon,
+    {
+      metrics,
+      tier,
+      theme: theme2,
+      showLabels: false,
+      showValues: false
+    }
+  ) });
+}
+function QualityHexagonDetailed({
+  metrics,
+  tier,
+  theme: theme2,
+  className,
+  packageName,
+  packageVersion,
+  onRefresh,
+  isRefreshing = false
+}) {
+  const themeColors = getThemeColors(theme2);
+  const colors = themeColors.tierColors[tier] ?? themeColors.tierColors.none;
+  const metricConfig = getMetricConfig(themeColors);
+  const hasHeader = packageName || onRefresh;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        padding: 16,
+        borderRadius: 8,
+        backgroundColor: colors.bg
+      },
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12
+        }, children: [
+          packageName ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+            packageName.startsWith("@") && packageName.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: {
+                fontSize: 12,
+                color: theme2.colors.textMuted
+              }, children: packageName.split("/")[0] }),
+              /* @__PURE__ */ jsx("span", { style: {
+                fontSize: 14,
+                fontWeight: 500,
+                color: colors.stroke
+              }, children: packageName.split("/")[1] })
+            ] }) : /* @__PURE__ */ jsx("span", { style: {
+              fontSize: 14,
+              fontWeight: 500,
+              color: colors.stroke
+            }, children: packageName }),
+            packageVersion && /* @__PURE__ */ jsxs("span", { style: {
+              fontSize: 12,
+              color: theme2.colors.textMuted
+            }, children: [
+              "v",
+              packageVersion
+            ] })
+          ] }) : /* @__PURE__ */ jsx("span", {}),
+          onRefresh && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onRefresh,
+              disabled: isRefreshing,
+              style: {
+                padding: 6,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: 4,
+                background: theme2.colors.surface,
+                color: theme2.colors.textMuted,
+                cursor: isRefreshing ? "not-allowed" : "pointer",
+                opacity: isRefreshing ? 0.6 : 1
+              },
+              title: "Refresh",
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  style: {
+                    animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+                    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+                    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
+                    /* @__PURE__ */ jsx("path", { d: "M16 16h5v5" })
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 24
+        }, children: [
+          /* @__PURE__ */ jsx("div", { style: { flex: "1 1 200px", maxWidth: 300, aspectRatio: "1 / 1" }, children: /* @__PURE__ */ jsx(
+            QualityHexagon,
+            {
+              metrics,
+              tier,
+              theme: theme2,
+              showLabels: true,
+              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 }) => {
+            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,
+                color: theme2.colors.textMuted
+              }, children: [
+                label,
+                key === "deadCode" ? " ↓" : ""
+              ] }),
+              /* @__PURE__ */ jsxs("span", { style: {
+                fontSize: 14,
+                fontWeight: 500,
+                color
+              }, children: [
+                displayValue,
+                "%"
+              ] })
+            ] }, key);
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+function calculateQualityTier(metrics) {
+  const metricsForAverage = { ...metrics };
+  metricsForAverage.deadCode = 100 - metricsForAverage.deadCode;
+  const average = Object.values(metricsForAverage).reduce((a, b) => a + b, 0) / 6;
+  if (average >= 90) return "platinum";
+  if (average >= 75) return "gold";
+  if (average >= 60) return "silver";
+  if (average >= 40) return "bronze";
+  return "none";
+}
+const mockPackages = [
+  {
+    name: "@principal-ade/code-quality-panels",
+    version: "0.1.0",
+    metrics: {
+      tests: 75,
+      deadCode: 15,
+      linting: 85,
+      formatting: 90,
+      types: 88,
+      documentation: 65
+    }
+  }
+];
+const QualityHexagonPanelContent = ({
+  context,
+  events
+}) => {
+  var _a;
+  const { theme: theme2 } = useTheme();
+  const [refreshingPackages, setRefreshingPackages] = React2.useState(/* @__PURE__ */ new Set());
+  const qualitySlice = context.getSlice("quality");
+  const hasQualitySlice = context.hasSlice("quality");
+  const isLoading = (qualitySlice == null ? void 0 : qualitySlice.loading) ?? false;
+  const packages = React2.useMemo(() => {
+    var _a2;
+    if ((_a2 = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a2.packages) {
+      return qualitySlice.data.packages;
+    }
+    if (hasQualitySlice) {
+      return [];
+    }
+    return mockPackages;
+  }, [(_a = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a.packages, hasQualitySlice]);
+  const handleRefreshPackage = async (packageName) => {
+    setRefreshingPackages((prev) => new Set(prev).add(packageName));
+    try {
+      if (context.hasSlice("quality")) {
+        await context.refresh("repository", "quality");
+      }
+    } finally {
+      setRefreshingPackages((prev) => {
+        const next = new Set(prev);
+        next.delete(packageName);
+        return next;
+      });
+    }
+  };
+  const handleRefreshAll = async () => {
+    const allNames = packages.map((p) => p.name);
+    setRefreshingPackages(new Set(allNames));
+    try {
+      if (context.hasSlice("quality")) {
+        await context.refresh("repository", "quality");
+      }
+    } finally {
+      setRefreshingPackages(/* @__PURE__ */ new Set());
+    }
+  };
+  React2.useEffect(() => {
+    const unsubscribers = [
+      events.on("principal-ade.quality-panel:refresh", async () => {
+        await handleRefreshAll();
+      })
+    ];
+    return () => unsubscribers.forEach((unsub) => unsub());
+  }, [events, context, packages]);
+  const tierColors = {
+    none: theme2.colors.muted,
+    bronze: theme2.colors.warning,
+    silver: theme2.colors.secondary,
+    gold: theme2.colors.accent,
+    platinum: theme2.colors.primary
+  };
+  const overallTier = packages.length > 0 ? calculateQualityTier(
+    packages.reduce((acc, pkg) => ({
+      tests: acc.tests + pkg.metrics.tests / packages.length,
+      deadCode: acc.deadCode + pkg.metrics.deadCode / packages.length,
+      linting: acc.linting + pkg.metrics.linting / packages.length,
+      formatting: acc.formatting + pkg.metrics.formatting / packages.length,
+      types: acc.types + pkg.metrics.types / packages.length,
+      documentation: acc.documentation + pkg.metrics.documentation / packages.length
+    }), { tests: 0, deadCode: 0, linting: 0, formatting: 0, types: 0, documentation: 0 })
+  ) : "none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: 20,
+        fontFamily: theme2.fonts.body,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text,
+        overflowY: "auto",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(Hexagon, { size: 24, color: tierColors[overallTier] }),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              style: {
+                margin: 0,
+                fontSize: 20,
+                fontWeight: 600,
+                color: theme2.colors.text
+              },
+              children: "Code Quality"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: "Platinum: 90%+ avg | Gold: 75%+ | Silver: 60%+ | Bronze: 40%+",
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 18,
+                height: 18,
+                borderRadius: "50%",
+                border: `1px solid ${theme2.colors.border}`,
+                fontSize: 12,
+                color: theme2.colors.textMuted,
+                cursor: "help"
+              },
+              children: "?"
+            }
+          ),
+          packages.length > 1 && /* @__PURE__ */ jsxs("span", { style: {
+            fontSize: 14,
+            color: theme2.colors.textMuted
+          }, children: [
+            packages.length,
+            " packages"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: isLoading ? /* @__PURE__ */ jsx("div", { style: {
+          padding: 40,
+          textAlign: "center",
+          color: theme2.colors.textMuted
+        }, children: "Loading quality metrics..." }) : packages.length === 0 ? /* @__PURE__ */ jsx("div", { style: {
+          padding: 40,
+          textAlign: "center",
+          color: theme2.colors.textMuted
+        }, children: "No packages found" }) : packages.map((pkg) => {
+          const tier = calculateQualityTier(pkg.metrics);
+          return /* @__PURE__ */ jsx(
+            QualityHexagonDetailed,
+            {
+              metrics: pkg.metrics,
+              tier,
+              theme: theme2,
+              packageName: pkg.name,
+              packageVersion: pkg.version,
+              onRefresh: () => handleRefreshPackage(pkg.name),
+              isRefreshing: refreshingPackages.has(pkg.name)
+            },
+            pkg.name
+          );
+        }) })
+      ]
+    }
+  );
+};
+const QualityHexagonPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(QualityHexagonPanelContent, { ...props }) });
+};
+const panels = [
+  {
+    metadata: {
+      id: "principal-ade.quality-hexagon-panel",
+      name: "Code Quality",
+      icon: "⬡",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Visualize code quality metrics using a hexagonal radar chart showing tests, types, linting, formatting, documentation, and dead code.",
+      slices: ["quality"],
+      tools: []
+    },
+    component: QualityHexagonPanel,
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Quality Hexagon Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+      if (context.hasSlice("quality") && !context.isSliceLoading("quality")) {
+        await context.refresh("repository", "quality");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Quality Hexagon Panel unmounting");
+    }
+  }
+];
+const onPackageLoad = async () => {
+  console.log("Panel package loaded - Code Quality Panels");
+};
+const onPackageUnload = async () => {
+  console.log("Panel package unloading - Code Quality Panels");
+};
+export {
+  QualityHexagon,
+  QualityHexagonCompact,
+  QualityHexagonDetailed,
+  QualityHexagonPanel,
+  calculateQualityTier,
+  onPackageLoad,
+  onPackageUnload,
+  panels
+};
+//# sourceMappingURL=panels.bundle.js.map