@industry-theme/file-city-panel 0.2.11 → 0.2.12

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

@@ -1 +1 @@
-{"version":3,"file":"CodeCityPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CodeCityPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAsBjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAYpD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAotCD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAEvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EA8BxC,CAAC"}
+{"version":3,"file":"CodeCityPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CodeCityPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAqBjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAYpD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAspCD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAEvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EA8BxC,CAAC"}

package/dist/panels.bundle.js

@@ -106,7 +106,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$5 = [
   [
     "path",
     {
@@ -115,14 +115,14 @@ const __iconNode$6 = [
     }
   ]
 ];
-const Activity = createLucideIcon("activity", __iconNode$6);
+const Activity = createLucideIcon("activity", __iconNode$5);
 /**
  * @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$5 = [
+const __iconNode$4 = [
   ["path", { d: "M10 12h4", key: "a56b0p" }],
   ["path", { d: "M10 8h4", key: "1sr2af" }],
   ["path", { d: "M14 21v-3a2 2 0 0 0-4 0v3", key: "1rgiei" }],
@@ -135,28 +135,20 @@ const __iconNode$5 = [
   ],
   ["path", { d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16", key: "16ra0t" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$5);
+const Building2 = createLucideIcon("building-2", __iconNode$4);
 /**
  * @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$4 = [
+const __iconNode$3 = [
   ["path", { d: "M3 3v16a2 2 0 0 0 2 2h16", key: "c24i48" }],
   ["path", { d: "M18 17V9", key: "2bz60n" }],
   ["path", { d: "M13 17V5", key: "1frdt8" }],
   ["path", { d: "M8 17v-3", key: "17ska0" }]
 ];
-const ChartColumn = createLucideIcon("chart-column", __iconNode$4);
-/**
- * @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$3 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$3);
+const ChartColumn = createLucideIcon("chart-column", __iconNode$3);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -14582,9 +14574,8 @@ const CodeCityPanelContent = ({
   const [loading, setLoading] = useState(false);
   const [containerSize, setContainerSize] = useState(null);
   const contentContainerRef = useRef(null);
-  const [colorMode, setColorMode] = useState("fileTypes");
-  const [showColorModeDropdown, setShowColorModeDropdown] = useState(false);
-  const colorModeDropdownRef = useRef(null);
+  const sliceSelectedColorMode = (_b = (_a = context.getSlice("fileCityColorModes")) == null ? void 0 : _a.data) == null ? void 0 : _b.selectedColorMode;
+  const colorMode = sliceSelectedColorMode || "fileTypes";
   const [hoveredPackagePath, setHoveredPackagePath] = useState(null);
   const [selectedPackagePath, setSelectedPackagePath] = useState(null);
   useEffect(() => {
@@ -14625,12 +14616,12 @@ const CodeCityPanelContent = ({
   const gitSlice = context.getSlice("git");
   const agentHighlightLayersSlice = context.getSlice("agentHighlightLayers");
   const colorModesSlice = context.getSlice("fileCityColorModes");
-  const qualityData = (_a = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _a.qualityData;
+  const qualityData = (_c = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _c.qualityData;
   const fileColorLayersRegistered = useRef(false);
   const gitLayersRegistered = useRef(false);
   const agentLayersRegistered = useRef(false);
   const lastHasGitOrAgentLayers = useRef(null);
-  const currentRepoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
+  const currentRepoPath = (_d = context.currentScope.repository) == null ? void 0 : _d.path;
   const lastRepoPath = useRef(currentRepoPath);
   useEffect(() => {
     if (lastRepoPath.current !== currentRepoPath) {
@@ -14640,20 +14631,8 @@ const CodeCityPanelContent = ({
       agentLayersRegistered.current = false;
       lastHasGitOrAgentLayers.current = null;
       lastRepoPath.current = currentRepoPath;
-      setColorMode("fileTypes");
     }
   }, [currentRepoPath]);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (colorModeDropdownRef.current && !colorModeDropdownRef.current.contains(event.target)) {
-        setShowColorModeDropdown(false);
-      }
-    };
-    if (showColorModeDropdown) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [showColorModeDropdown]);
   useEffect(() => {
     if (!events) return;
     const cleanupHover = events.on("package:hover", (event) => {
@@ -14669,30 +14648,6 @@ const CodeCityPanelContent = ({
       cleanupSelect == null ? void 0 : cleanupSelect();
     };
   }, [events]);
-  const sliceSelectedColorMode = (_c = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _c.selectedColorMode;
-  useEffect(() => {
-    if (sliceSelectedColorMode) {
-      setColorMode(sliceSelectedColorMode);
-    }
-  }, [sliceSelectedColorMode]);
-  const availableColorModes = useMemo(() => {
-    var _a2;
-    const hasGitData = (gitSlice == null ? void 0 : gitSlice.data) && (gitSlice.data.staged.length > 0 || gitSlice.data.unstaged.length > 0 || gitSlice.data.untracked.length > 0 || gitSlice.data.deleted.length > 0);
-    const enabledModes = (_a2 = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _a2.enabledModes;
-    return COLOR_MODES.filter((mode) => {
-      if (mode.id === "fileTypes") return true;
-      if (mode.id === "git") return hasGitData;
-      if (sliceSelectedColorMode === mode.id) return true;
-      return (enabledModes == null ? void 0 : enabledModes.includes(mode.id)) ?? false;
-    });
-  }, [gitSlice == null ? void 0 : gitSlice.data, (_d = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _d.enabledModes, qualityData, sliceSelectedColorMode]);
-  useEffect(() => {
-    const currentModeAvailable = availableColorModes.some((m) => m.id === colorMode);
-    const selectedModeAvailable = sliceSelectedColorMode && availableColorModes.some((m) => m.id === sliceSelectedColorMode);
-    if (!currentModeAvailable && !selectedModeAvailable) {
-      setColorMode("fileTypes");
-    }
-  }, [availableColorModes, colorMode, sliceSelectedColorMode]);
   const currentColorModeConfig = useMemo(() => {
     return COLOR_MODES.find((m) => m.id === colorMode) || COLOR_MODES[0];
   }, [colorMode]);
@@ -14907,30 +14862,39 @@ const CodeCityPanelContent = ({
     groupedByExt.forEach((group, ext) => {
       var _a2;
       if (group.primary) {
+        const highlightLayer = highlightLayers.find(
+          (l) => l.id === `ext-${ext}-primary` || l.id === `ext-${ext}-primary-package-focus`
+        );
+        const isEnabled = (highlightLayer == null ? void 0 : highlightLayer.enabled) ?? group.primary.enabled;
         fileTypes.push({
           id: ext,
           name: group.primary.name,
           fillColor: group.primary.color,
           borderColor: (_a2 = group.secondary) == null ? void 0 : _a2.color,
           count: group.primary.items.length,
-          enabled: group.primary.enabled
+          enabled: isEnabled
         });
       }
     });
     return fileTypes.sort((a, b) => b.count - a.count);
-  }, [baseLayers]);
+  }, [baseLayers, highlightLayers]);
   const legendGitStatus = useMemo(() => {
     const gitLayers = baseLayers.filter(
       (layer) => layer.id.startsWith("git-highlight-")
     );
-    return gitLayers.map((layer) => ({
-      id: layer.id,
-      name: layer.name,
-      color: layer.color,
-      count: layer.items.length,
-      enabled: layer.enabled
-    }));
-  }, [baseLayers]);
+    return gitLayers.map((layer) => {
+      const highlightLayer = highlightLayers.find(
+        (l) => l.id === layer.id || l.id === `${layer.id}-package-focus`
+      );
+      return {
+        id: layer.id,
+        name: layer.name,
+        color: layer.color,
+        count: layer.items.length,
+        enabled: (highlightLayer == null ? void 0 : highlightLayer.enabled) ?? layer.enabled
+      };
+    });
+  }, [baseLayers, highlightLayers]);
   const legendAgentLayers = useMemo(() => {
     const agentLayers = highlightLayers.filter(
       (layer) => layer.id.startsWith("event-highlight")
@@ -14961,33 +14925,54 @@ const CodeCityPanelContent = ({
     const relevantLayers = baseLayers.filter(
       (layer) => layer.id.startsWith(prefix)
     );
-    return relevantLayers.map((layer) => ({
-      id: layer.id,
-      name: layer.name,
-      color: layer.color,
-      count: layer.items.length,
-      enabled: layer.enabled
-    }));
-  }, [baseLayers, colorMode]);
+    return relevantLayers.map((layer) => {
+      const highlightLayer = highlightLayers.find(
+        (l) => l.id === layer.id || l.id === `${layer.id}-package-focus`
+      );
+      return {
+        id: layer.id,
+        name: layer.name,
+        color: layer.color,
+        count: layer.items.length,
+        enabled: (highlightLayer == null ? void 0 : highlightLayer.enabled) ?? layer.enabled
+      };
+    });
+  }, [baseLayers, highlightLayers, colorMode]);
   const toggleGitStatus = useCallback((id2) => {
-    setHighlightLayers(
-      (prev) => prev.map((layer) => {
-        if (layer.id === id2) {
-          return { ...layer, enabled: !layer.enabled };
+    setHighlightLayers((prev) => {
+      const gitLayers = prev.filter((l) => l.id.startsWith("git-highlight-"));
+      const clickedLayer = gitLayers.find((l) => l.id === id2);
+      const otherGitLayers = gitLayers.filter((l) => l.id !== id2);
+      const isAlreadyIsolated = (clickedLayer == null ? void 0 : clickedLayer.enabled) && otherGitLayers.every((l) => !l.enabled);
+      return prev.map((layer) => {
+        if (!layer.id.startsWith("git-highlight-")) {
+          return layer;
         }
-        return layer;
-      })
-    );
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layer.id === id2 };
+        }
+      });
+    });
   }, []);
   const toggleAgentLayer = useCallback((id2) => {
-    setHighlightLayers(
-      (prev) => prev.map((layer) => {
-        if (layer.id === id2) {
-          return { ...layer, enabled: !layer.enabled };
+    setHighlightLayers((prev) => {
+      const agentLayers = prev.filter((l) => l.id.startsWith("event-highlight"));
+      const clickedLayer = agentLayers.find((l) => l.id === id2);
+      const otherAgentLayers = agentLayers.filter((l) => l.id !== id2);
+      const isAlreadyIsolated = (clickedLayer == null ? void 0 : clickedLayer.enabled) && otherAgentLayers.every((l) => !l.enabled);
+      return prev.map((layer) => {
+        if (!layer.id.startsWith("event-highlight")) {
+          return layer;
         }
-        return layer;
-      })
-    );
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layer.id === id2 };
+        }
+      });
+    });
   }, []);
   const clearAgentLayers = useCallback(() => {
     setHighlightLayers(
@@ -14996,24 +14981,52 @@ const CodeCityPanelContent = ({
     agentLayersRegistered.current = false;
   }, []);
   const toggleQualityMetric = useCallback((id2) => {
-    setHighlightLayers(
-      (prev) => prev.map((layer) => {
-        if (layer.id === id2) {
-          return { ...layer, enabled: !layer.enabled };
+    setHighlightLayers((prev) => {
+      const qualityPrefixes = ["coverage-", "eslint-", "typescript-", "prettier-", "knip-", "alexandria-"];
+      const isQualityLayer = (layerId) => qualityPrefixes.some((p) => layerId.startsWith(p));
+      const qualityLayers2 = prev.filter((l) => isQualityLayer(l.id));
+      const clickedLayer = qualityLayers2.find((l) => l.id === id2);
+      const otherQualityLayers = qualityLayers2.filter((l) => l.id !== id2);
+      const isAlreadyIsolated = (clickedLayer == null ? void 0 : clickedLayer.enabled) && otherQualityLayers.every((l) => !l.enabled);
+      return prev.map((layer) => {
+        if (!isQualityLayer(layer.id)) {
+          return layer;
         }
-        return layer;
-      })
-    );
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layer.id === id2 };
+        }
+      });
+    });
   }, []);
   const toggleFileType = useCallback((ext) => {
     setHighlightLayers((prev) => {
-      const primaryLayer = prev.find((l) => l.id === `ext-${ext}-primary`);
-      const newEnabled = primaryLayer ? !primaryLayer.enabled : true;
+      const isFileTypeLayer = (id2) => id2.startsWith("ext-") && (id2.endsWith("-primary") || id2.endsWith("-secondary"));
+      const fileTypeLayers = prev.filter((l) => isFileTypeLayer(l.id));
+      const extStates = /* @__PURE__ */ new Map();
+      fileTypeLayers.forEach((l) => {
+        const match = l.id.match(/^ext-(\w+)-(primary|secondary)$/);
+        if (match && match[2] === "primary") {
+          extStates.set(match[1], l.enabled);
+        }
+      });
+      const clickedEnabled = extStates.get(ext) ?? false;
+      const otherExts = Array.from(extStates.keys()).filter((e) => e !== ext);
+      const othersAllDisabled = otherExts.every((e) => !extStates.get(e));
+      const isAlreadyIsolated = clickedEnabled && othersAllDisabled;
       return prev.map((layer) => {
-        if (layer.id === `ext-${ext}-primary` || layer.id === `ext-${ext}-secondary`) {
-          return { ...layer, enabled: newEnabled };
+        if (!isFileTypeLayer(layer.id)) {
+          return layer;
+        }
+        const match = layer.id.match(/^ext-(\w+)-(primary|secondary)$/);
+        if (!match) return layer;
+        const layerExt = match[1];
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layerExt === ext };
         }
-        return layer;
       });
     });
   }, []);
@@ -15185,117 +15198,18 @@ const CodeCityPanelContent = ({
                   }
                 )
               ] }) }),
-              availableColorModes.length > 1 && /* @__PURE__ */ jsxs(
-                "div",
+              colorMode !== "fileTypes" && /* @__PURE__ */ jsx(
+                "span",
                 {
-                  ref: colorModeDropdownRef,
-                  style: { position: "relative" },
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        onClick: () => setShowColorModeDropdown(!showColorModeDropdown),
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "6px",
-                          padding: "4px 10px",
-                          fontSize: theme2.fontSizes[0],
-                          fontFamily: theme2.fonts.body,
-                          color: theme2.colors.text,
-                          backgroundColor: theme2.colors.background,
-                          border: `1px solid ${theme2.colors.border}`,
-                          borderRadius: "4px",
-                          cursor: "pointer",
-                          transition: "all 0.15s ease",
-                          minWidth: "120px"
-                        },
-                        title: "Change color mode",
-                        children: [
-                          /* @__PURE__ */ jsx("span", { style: { flex: 1, textAlign: "left" }, children: currentColorModeConfig.name }),
-                          /* @__PURE__ */ jsx(
-                            ChevronDown,
-                            {
-                              size: 14,
-                              style: {
-                                transform: showColorModeDropdown ? "rotate(180deg)" : "rotate(0deg)",
-                                transition: "transform 0.15s ease"
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    showColorModeDropdown && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: "100%",
-                          left: 0,
-                          right: 0,
-                          marginTop: "4px",
-                          backgroundColor: theme2.colors.background,
-                          border: `1px solid ${theme2.colors.border}`,
-                          borderRadius: "4px",
-                          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-                          zIndex: 100,
-                          overflow: "hidden",
-                          minWidth: "160px"
-                        },
-                        children: availableColorModes.map((mode) => /* @__PURE__ */ jsxs(
-                          "button",
-                          {
-                            onClick: () => {
-                              setColorMode(mode.id);
-                              setShowColorModeDropdown(false);
-                            },
-                            style: {
-                              display: "flex",
-                              flexDirection: "column",
-                              alignItems: "flex-start",
-                              width: "100%",
-                              padding: "8px 12px",
-                              fontSize: theme2.fontSizes[0],
-                              fontFamily: theme2.fonts.body,
-                              color: mode.id === colorMode ? theme2.colors.primary : theme2.colors.text,
-                              backgroundColor: mode.id === colorMode ? theme2.colors.primary + "15" : "transparent",
-                              border: "none",
-                              cursor: "pointer",
-                              transition: "background-color 0.15s ease",
-                              textAlign: "left"
-                            },
-                            onMouseEnter: (e) => {
-                              if (mode.id !== colorMode) {
-                                e.currentTarget.style.backgroundColor = theme2.colors.backgroundLight;
-                              }
-                            },
-                            onMouseLeave: (e) => {
-                              if (mode.id !== colorMode) {
-                                e.currentTarget.style.backgroundColor = "transparent";
-                              }
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx("span", { style: { fontWeight: mode.id === colorMode ? 600 : 400 }, children: mode.name }),
-                              /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: theme2.fontSizes[0],
-                                    fontFamily: theme2.fonts.body,
-                                    color: theme2.colors.textSecondary,
-                                    marginTop: "2px"
-                                  },
-                                  children: mode.description
-                                }
-                              )
-                            ]
-                          },
-                          mode.id
-                        ))
-                      }
-                    )
-                  ]
+                  style: {
+                    padding: "4px 10px",
+                    fontSize: theme2.fontSizes[0],
+                    fontFamily: theme2.fonts.body,
+                    color: theme2.colors.primary,
+                    backgroundColor: theme2.colors.primary + "15",
+                    borderRadius: "4px"
+                  },
+                  children: currentColorModeConfig.name
                 }
               ),
               (legendFileTypes.length > 0 || legendGitStatus.length > 0 || legendQualityMetrics.length > 0) && /* @__PURE__ */ jsx(