@industry-theme/file-city-panel 0.5.71 → 0.5.72

package/dist/panels/FileCityTrailExplorerPanel/overlays/TrailFilePath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrailFilePath.d.ts","sourceRoot":"","sources":["../../../../src/panels/FileCityTrailExplorerPanel/overlays/TrailFilePath.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC,qEAAqE;IACrE,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB;IACjC,kFAAkF;IAClF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD;;;;OAIG;IACH,SAAS,EAAE,SAAS,YAAY,EAAE,CAAC;IACnC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IACtD;;;;OAIG;IACH,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC5C;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,gGA4dxB,CAAC"}
+{"version":3,"file":"TrailFilePath.d.ts","sourceRoot":"","sources":["../../../../src/panels/FileCityTrailExplorerPanel/overlays/TrailFilePath.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC,qEAAqE;IACrE,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB;IACjC,kFAAkF;IAClF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD;;;;OAIG;IACH,SAAS,EAAE,SAAS,YAAY,EAAE,CAAC;IACnC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IACtD;;;;OAIG;IACH,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC5C;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmCD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,gGAksBxB,CAAC"}

package/dist/panels.bundle.js

@@ -257807,6 +257807,10 @@ const TrailLeaderLine = React.forwardRef(function TrailLeaderLine2({ containerRe
   ] });
 });
 const CALLOUT_FADE_IN_MS = 350;
+const TITLE_TYPEWRITER_CPS = 28;
+const TITLE_TYPEWRITER_HOLD_MS = 500;
+const TITLE_INTER_HOLD_MS = 220;
+const TITLE_CARET = "▍";
 const fileBasename = (path2) => {
   const i = path2.lastIndexOf("/");
   return i >= 0 ? path2.slice(i + 1) : path2;
@@ -257823,7 +257827,13 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
   animate: animate2 = true,
   currentStepIndex = null,
   stepMs = 1100,
-  dwellMs = 1400,
+  // Dwell budget covers: fade-in (350ms) + initial hold (500ms) +
+  // filename typewriter (~ name.length * 36ms at 28cps) + inter-hold
+  // (220ms) + title typewriter (~ title.length * 36ms) + a digest
+  // beat after typing finishes so the user can read the full
+  // callout before the dot walks on. 3500ms leaves ~1.5s of digest
+  // for typical 10-char filenames + 15-char titles.
+  dwellMs = 3500,
   endHoldMs = 2200
 }, ref) {
   const { theme: theme2 } = useTheme();
@@ -257845,6 +257855,8 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
   const animStartTsRef = React.useRef(
     typeof performance !== "undefined" ? performance.now() : 0
   );
+  const hoverFrozenElapsedRef = React.useRef(null);
+  const periodRef = React.useRef(0);
   const buildingsRef = React.useRef(buildings);
   const markerTitlesRef = React.useRef(markerTitles);
   const cityCenterRef = React.useRef(cityCenter);
@@ -257874,7 +257886,7 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
   }, [animate2, buildings, dwellMs, stepMs, endHoldMs]);
   const onCameraFrame = React.useCallback(
     (camera, size) => {
-      var _a;
+      var _a, _b;
       const targets = buildingsRef.current;
       const center = cityCenterRef.current;
       const container = containerRef.current;
@@ -257906,6 +257918,7 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
       const N = points.length;
       const slotMs = dwellMs + stepMs;
       const period = N >= 2 ? (N - 1) * slotMs + dwellMs + endHoldMs : 0;
+      periodRef.current = period;
       const rawFrozen = currentStepIndexRef.current;
       const frozenIndex = rawFrozen != null && rawFrozen >= 0 && rawFrozen < N ? rawFrozen : null;
       let revealedCount = animate2 ? 0 : N;
@@ -257916,7 +257929,7 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
         revealedCount = frozenIndex + 1;
         dwellElapsed = CALLOUT_FADE_IN_MS;
       } else if (animate2 && period > 0) {
-        const elapsed = ((typeof performance !== "undefined" ? performance.now() : Date.now()) - animStartTsRef.current) % period;
+        const elapsed = hoverFrozenElapsedRef.current !== null ? hoverFrozenElapsedRef.current : ((typeof performance !== "undefined" ? performance.now() : Date.now()) - animStartTsRef.current) % period;
         const traversalsEnd = (N - 1) * slotMs;
         if (elapsed >= traversalsEnd) {
           revealedCount = N;
@@ -258030,43 +258043,56 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
         }
       }
       const SVG_NS = "http://www.w3.org/2000/svg";
-      const paintCallout = (textEl, bgEl, point2, path2, title, opacity) => {
+      const paintCallout = (textEl, bgEl, point2, path2, title, opacity, nameRevealChars2, titleRevealChars2) => {
         if (!textEl || !bgEl) return;
         if (!point2 || !point2.visible || opacity <= 1e-3 || !path2) {
           textEl.setAttribute("opacity", "0");
           bgEl.setAttribute("opacity", "0");
+          bgEl.setAttribute("pointer-events", "none");
+          textEl.setAttribute("pointer-events", "none");
           return;
         }
+        const interactive = opacity >= 0.6;
+        bgEl.setAttribute(
+          "pointer-events",
+          interactive ? "auto" : "none"
+        );
+        textEl.setAttribute(
+          "pointer-events",
+          interactive ? "auto" : "none"
+        );
         while (textEl.children.length < 3) {
           textEl.appendChild(document.createElementNS(SVG_NS, "tspan"));
         }
         while (textEl.children.length > 3) {
           textEl.removeChild(textEl.lastChild);
         }
-        const titleTspan = textEl.children[0];
+        const pathTspan = textEl.children[0];
         const nameTspan = textEl.children[1];
-        const pathTspan = textEl.children[2];
+        const titleTspan = textEl.children[2];
         const name2 = fileBasename(path2);
         const dir = fileDirname(path2);
         const trimmedTitle = (title == null ? void 0 : title.trim()) ?? "";
-        const lineCount = (trimmedTitle ? 1 : 0) + 1 + (dir ? 1 : 0);
+        const displayTitle = trimmedTitle && titleRevealChars2 !== null ? titleRevealChars2 < 0 ? "" : titleRevealChars2 >= trimmedTitle.length ? trimmedTitle : trimmedTitle.slice(0, titleRevealChars2) + TITLE_CARET : trimmedTitle;
+        const displayName = nameRevealChars2 !== null ? nameRevealChars2 < 0 ? "" : nameRevealChars2 >= name2.length ? name2 : name2.slice(0, nameRevealChars2) + TITLE_CARET : name2;
+        const lineCount = (dir ? 1 : 0) + 1 + (trimmedTitle ? 1 : 0);
         const BOTTOM_LINE_OFFSET = 24;
         const topLineY = point2.y - BOTTOM_LINE_OFFSET - (lineCount - 1) * calloutLineDyPx;
         textEl.setAttribute("text-anchor", "middle");
         textEl.setAttribute("font-family", fontFamily);
         textEl.setAttribute("opacity", String(opacity));
-        titleTspan.textContent = trimmedTitle;
-        titleTspan.setAttribute("x", String(point2.x));
-        titleTspan.setAttribute("y", String(topLineY));
-        titleTspan.setAttribute("fill", filenameColor);
-        titleTspan.setAttribute("font-size", calloutFontSize);
-        titleTspan.setAttribute("font-weight", calloutFontWeight);
+        pathTspan.textContent = dir;
+        pathTspan.setAttribute("text-anchor", "middle");
+        pathTspan.setAttribute("x", String(point2.x));
+        pathTspan.setAttribute("y", String(topLineY));
+        pathTspan.removeAttribute("dy");
+        pathTspan.setAttribute("fill", color2);
+        pathTspan.setAttribute("font-size", calloutFontSize);
+        pathTspan.setAttribute("font-weight", calloutFontWeight);
         nameTspan.textContent = name2;
-        nameTspan.setAttribute("x", String(point2.x));
-        nameTspan.setAttribute(
-          "dy",
-          trimmedTitle ? calloutLineDy : "0"
-        );
+        nameTspan.setAttribute("text-anchor", "start");
+        nameTspan.removeAttribute("y");
+        nameTspan.setAttribute("dy", dir ? calloutLineDy : "0");
         nameTspan.setAttribute(
           "fill",
           trimmedTitle ? dirColor : filenameColor
@@ -258076,12 +258102,20 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
           "font-weight",
           trimmedTitle ? calloutBodyFontWeight : calloutFontWeight
         );
-        pathTspan.textContent = dir;
-        pathTspan.setAttribute("x", String(point2.x));
-        pathTspan.setAttribute("dy", dir ? calloutLineDy : "0");
-        pathTspan.setAttribute("fill", dirColor);
-        pathTspan.setAttribute("font-size", calloutFontSize);
-        pathTspan.setAttribute("font-weight", calloutFontWeight);
+        const nameWidth = typeof nameTspan.getComputedTextLength === "function" ? nameTspan.getComputedTextLength() : 0;
+        nameTspan.setAttribute("x", String(point2.x - nameWidth / 2));
+        titleTspan.textContent = trimmedTitle;
+        titleTspan.setAttribute("text-anchor", "start");
+        titleTspan.removeAttribute("y");
+        titleTspan.setAttribute(
+          "dy",
+          trimmedTitle ? calloutLineDy : "0"
+        );
+        titleTspan.setAttribute("fill", filenameColor);
+        titleTspan.setAttribute("font-size", calloutFontSize);
+        titleTspan.setAttribute("font-weight", calloutFontWeight);
+        const titleWidth = typeof titleTspan.getComputedTextLength === "function" ? titleTspan.getComputedTextLength() : 0;
+        titleTspan.setAttribute("x", String(point2.x - titleWidth / 2));
         const bbox = textEl.getBBox();
         const padX = 14;
         const padY = 10;
@@ -258094,6 +258128,12 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
         bgEl.setAttribute("stroke", color2);
         bgEl.setAttribute("stroke-width", "1.5");
         bgEl.setAttribute("opacity", String(0.94 * opacity));
+        if (displayName !== name2) {
+          nameTspan.textContent = displayName;
+        }
+        if (displayTitle !== trimmedTitle) {
+          titleTspan.textContent = displayTitle;
+        }
       };
       let calloutOpacity = 0;
       if (frozenIndex != null && lastIndex >= 0) {
@@ -258109,13 +258149,49 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
       } else if (!animate2 && lastIndex >= 0) {
         calloutOpacity = 1;
       }
+      const activePath = lastIndex >= 0 ? targets[lastIndex].path : null;
+      const activeName = activePath ? fileBasename(activePath) : "";
+      const activeTitle = lastIndex >= 0 ? (((_a = markerTitlesRef.current) == null ? void 0 : _a[lastIndex]) ?? "").trim() : "";
+      let nameRevealChars = null;
+      let titleRevealChars = null;
+      if (animate2 && frozenIndex == null && traverseFrac === null && lastIndex >= 0) {
+        const charsPerMs = TITLE_TYPEWRITER_CPS / 1e3;
+        const nameStart = CALLOUT_FADE_IN_MS + TITLE_TYPEWRITER_HOLD_MS;
+        const nameDuration = activeName.length > 0 ? activeName.length / charsPerMs : 0;
+        const nameDone = nameStart + nameDuration;
+        const titleStart = nameDone + TITLE_INTER_HOLD_MS;
+        if (activeName.length > 0) {
+          if (dwellElapsed < nameStart) {
+            nameRevealChars = 0;
+          } else if (dwellElapsed < nameDone) {
+            const typed = Math.floor(
+              (dwellElapsed - nameStart) * charsPerMs
+            );
+            nameRevealChars = typed >= activeName.length ? null : Math.max(0, typed);
+          } else {
+            nameRevealChars = null;
+          }
+        }
+        if (activeTitle.length > 0) {
+          if (dwellElapsed < titleStart) {
+            titleRevealChars = -1;
+          } else {
+            const typed = Math.floor(
+              (dwellElapsed - titleStart) * charsPerMs
+            );
+            titleRevealChars = typed >= activeTitle.length ? null : Math.max(0, typed);
+          }
+        }
+      }
       paintCallout(
         calloutTextRef.current,
         calloutBgRef.current,
         lastIndex >= 0 ? points[lastIndex] : null,
-        lastIndex >= 0 ? targets[lastIndex].path : null,
-        lastIndex >= 0 ? ((_a = markerTitlesRef.current) == null ? void 0 : _a[lastIndex]) ?? null : null,
-        calloutOpacity
+        activePath,
+        lastIndex >= 0 ? ((_b = markerTitlesRef.current) == null ? void 0 : _b[lastIndex]) ?? null : null,
+        calloutOpacity,
+        nameRevealChars,
+        titleRevealChars
       );
       g2.setAttribute("opacity", "1");
     },
@@ -258139,6 +258215,19 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
     ]
   );
   React.useImperativeHandle(ref, () => ({ onCameraFrame }), [onCameraFrame]);
+  const handleCalloutEnter = React.useCallback(() => {
+    if (hoverFrozenElapsedRef.current !== null) return;
+    const period = periodRef.current;
+    if (period <= 0) return;
+    const now2 = typeof performance !== "undefined" ? performance.now() : Date.now();
+    hoverFrozenElapsedRef.current = (now2 - animStartTsRef.current) % period;
+  }, []);
+  const handleCalloutLeave = React.useCallback(() => {
+    if (hoverFrozenElapsedRef.current === null) return;
+    const now2 = typeof performance !== "undefined" ? performance.now() : Date.now();
+    animStartTsRef.current = now2 - hoverFrozenElapsedRef.current;
+    hoverFrozenElapsedRef.current = null;
+  }, []);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -258156,8 +258245,26 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
       children: [
         /* @__PURE__ */ jsx("g", { ref: groupRef, opacity: 0 }),
         /* @__PURE__ */ jsx("circle", { ref: leadDotRef, opacity: 0, pointerEvents: "none" }),
-        /* @__PURE__ */ jsx("rect", { ref: calloutBgRef, opacity: 0, pointerEvents: "none" }),
-        /* @__PURE__ */ jsx("text", { ref: calloutTextRef, opacity: 0, pointerEvents: "none" })
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            ref: calloutBgRef,
+            opacity: 0,
+            pointerEvents: "auto",
+            onMouseEnter: handleCalloutEnter,
+            onMouseLeave: handleCalloutLeave
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            ref: calloutTextRef,
+            opacity: 0,
+            pointerEvents: "auto",
+            onMouseEnter: handleCalloutEnter,
+            onMouseLeave: handleCalloutLeave
+          }
+        )
       ]
     }
   );
@@ -258993,20 +259100,24 @@ const FileCityTrailSequenceLayout = ({
     if (!selectedMarkerId) return null;
     return trail2.markers.find((m) => m.id === selectedMarkerId) ?? null;
   }, [trail2.markers, selectedMarkerId]);
-  const markerBySourcePathForThisRepo = React.useMemo(() => {
+  const markerByBuildingPath = React.useMemo(() => {
     const map2 = /* @__PURE__ */ new Map();
+    if (!cityData) return map2;
     for (const m of markersForThisRepo) {
-      if (m.sourcePath) map2.set(m.sourcePath, m);
+      const cityPath = markerCityPath(m, trail2);
+      if (!cityPath) continue;
+      const b = cityData.buildings.find((cb) => cb.path === cityPath) ?? cityData.buildings.find((cb) => cb.path.endsWith(`/${cityPath}`));
+      if (b) map2.set(b.path, m);
     }
     return map2;
-  }, [markersForThisRepo]);
+  }, [markersForThisRepo, cityData, trail2]);
   const handleBuildingClick = React.useCallback(
     (building) => {
-      const marker = markerBySourcePathForThisRepo.get(building.path);
+      const marker = markerByBuildingPath.get(building.path);
       if (!marker) return;
       onSelectMarker(selectedMarkerId === marker.id ? null : marker.id);
     },
-    [markerBySourcePathForThisRepo, selectedMarkerId, onSelectMarker]
+    [markerByBuildingPath, selectedMarkerId, onSelectMarker]
   );
   const stepperIndex = React.useMemo(() => {
     if (!selectedMarkerId) return -1;
@@ -259042,37 +259153,39 @@ const FileCityTrailSequenceLayout = ({
     const firstMarkerByPath = /* @__PURE__ */ new Map();
     const order2 = [];
     for (const m of markersForThisRepo) {
-      if (!m.sourcePath) continue;
-      const existing = counts.get(m.sourcePath) ?? 0;
-      counts.set(m.sourcePath, existing + 1);
-      if (!firstMarkerByPath.has(m.sourcePath)) {
-        firstMarkerByPath.set(m.sourcePath, m.id);
-        order2.push(m.sourcePath);
-      }
-    }
-    return order2.map((sourcePath) => ({
-      sourcePath,
-      markerCount: counts.get(sourcePath) ?? 0,
-      isActive: (selectedMarker == null ? void 0 : selectedMarker.sourcePath) === sourcePath,
+      const cityPath = markerCityPath(m, trail2);
+      if (!cityPath) continue;
+      const existing = counts.get(cityPath) ?? 0;
+      counts.set(cityPath, existing + 1);
+      if (!firstMarkerByPath.has(cityPath)) {
+        firstMarkerByPath.set(cityPath, m.id);
+        order2.push(cityPath);
+      }
+    }
+    const selectedCityPath = selectedMarker ? markerCityPath(selectedMarker, trail2) : null;
+    return order2.map((cityPath) => ({
+      sourcePath: cityPath,
+      markerCount: counts.get(cityPath) ?? 0,
+      isActive: selectedCityPath === cityPath,
       onClick: () => {
-        const markerId = firstMarkerByPath.get(sourcePath);
+        const markerId = firstMarkerByPath.get(cityPath);
         if (markerId) onSelectMarker(markerId);
       },
       onHoverChange: setHoveredFilePath
     }));
-  }, [markersForThisRepo, selectedMarker, onSelectMarker]);
+  }, [markersForThisRepo, selectedMarker, onSelectMarker, trail2]);
   const trailFilesHighlightLayers = React.useMemo(() => {
     if (!cityData) return null;
-    const sourcePaths = markersForThisRepo.map((m) => m.sourcePath).filter((p2) => typeof p2 === "string" && p2.length > 0);
-    if (sourcePaths.length === 0) return null;
+    const cityPaths = markersForThisRepo.map((m) => markerCityPath(m, trail2)).filter((p2) => typeof p2 === "string" && p2.length > 0);
+    if (cityPaths.length === 0) return null;
     const buildingByPath = new Map(cityData.buildings.map((b) => [b.path, b]));
     const byColor = /* @__PURE__ */ new Map();
     const seen = /* @__PURE__ */ new Set();
-    for (const sourcePath of sourcePaths) {
-      if (seen.has(sourcePath)) continue;
-      const building = buildingByPath.get(sourcePath) ?? cityData.buildings.find((b) => b.path.endsWith(`/${sourcePath}`));
+    for (const cityPath of cityPaths) {
+      if (seen.has(cityPath)) continue;
+      const building = buildingByPath.get(cityPath) ?? cityData.buildings.find((b) => b.path.endsWith(`/${cityPath}`));
       if (!building) continue;
-      seen.add(sourcePath);
+      seen.add(cityPath);
       const color2 = building.color ?? getFileColor(building.path);
       if (!color2) continue;
       const list2 = byColor.get(color2) ?? [];
@@ -259094,7 +259207,7 @@ const FileCityTrailSequenceLayout = ({
         renderStrategy: "fill"
       }))
     }));
-  }, [markersForThisRepo, cityData]);
+  }, [markersForThisRepo, cityData, trail2]);
   const trailFilesActive = trailFilesHighlightLayers !== null && trailFilesHighlightLayers.length > 0;
   const hoveredFileHighlightLayer = React.useMemo(() => {
     if (!hoveredFilePath || !cityData) return null;
@@ -259119,12 +259232,49 @@ const FileCityTrailSequenceLayout = ({
       ]
     };
   }, [hoveredFilePath, cityData, theme2.colors.accent]);
+  const districtTintLayers = React.useMemo(() => {
+    if (!cityData) return null;
+    const repos = trail2.repos ?? [];
+    if (repos.length <= 1) return null;
+    const palette = ["#3b82f6", "#a855f7", "#f97316", "#10b981", "#eab308"];
+    const layers = [];
+    repos.forEach((repo, i) => {
+      const prefix = `${repo.name}/`;
+      const paths = [];
+      for (const b of cityData.buildings) {
+        if (b.path === repo.name || b.path.startsWith(prefix)) {
+          paths.push(b.path);
+        } else if (b.path.includes(`/${prefix}`)) {
+          paths.push(b.path);
+        }
+      }
+      if (paths.length === 0) return;
+      layers.push({
+        // The layer-system id is internal — using the PURL here is fine
+        // (and uniquely scopes by canonical identity even if two repos
+        // happened to share a `name`).
+        id: `district-${repo.id}`,
+        name: `District: ${repo.name}`,
+        enabled: true,
+        color: palette[i % palette.length],
+        opacity: 0.18,
+        priority: 10,
+        items: paths.map((path2) => ({
+          path: path2,
+          type: "file",
+          renderStrategy: "fill"
+        }))
+      });
+    });
+    return layers.length > 0 ? layers : null;
+  }, [cityData, trail2.repos]);
   const cityHighlightLayers = React.useMemo(() => {
     const layers = [];
+    if (districtTintLayers) layers.push(...districtTintLayers);
     if (trailFilesHighlightLayers) layers.push(...trailFilesHighlightLayers);
     if (hoveredFileHighlightLayer) layers.push(hoveredFileHighlightLayer);
     return layers.length > 0 ? layers : void 0;
-  }, [trailFilesHighlightLayers, hoveredFileHighlightLayer]);
+  }, [districtTintLayers, trailFilesHighlightLayers, hoveredFileHighlightLayer]);
   const containerRef = React.useRef(null);
   const snippetPaneRef = React.useRef(null);
   const leaderLineRef = React.useRef(null);
@@ -259141,10 +259291,11 @@ const FileCityTrailSequenceLayout = ({
   const [snippetPaneWidth, setSnippetPaneWidth] = React.useState(null);
   const [containerSize, setContainerSize] = React.useState(null);
   const selectedBuilding = React.useMemo(() => {
-    if (!cityData || !(selectedMarker == null ? void 0 : selectedMarker.sourcePath)) return null;
-    const path2 = selectedMarker.sourcePath;
+    if (!cityData || !selectedMarker) return null;
+    const path2 = markerCityPath(selectedMarker, trail2);
+    if (!path2) return null;
     return cityData.buildings.find((b) => b.path === path2) ?? cityData.buildings.find((b) => b.path.endsWith(`/${path2}`)) ?? null;
-  }, [cityData, selectedMarker]);
+  }, [cityData, selectedMarker, trail2]);
   const cityCenter = React.useMemo(() => {
     if (!cityData) return null;
     return {
@@ -259168,10 +259319,9 @@ const FileCityTrailSequenceLayout = ({
     const titles = [];
     const markerIds = [];
     for (const m of markersForThisRepo) {
-      if (!m.sourcePath) continue;
-      const b = buildingByPath.get(m.sourcePath) ?? cityData.buildings.find(
-        (cb) => cb.path.endsWith(`/${m.sourcePath}`)
-      );
+      const cityPath = markerCityPath(m, trail2);
+      if (!cityPath) continue;
+      const b = buildingByPath.get(cityPath) ?? cityData.buildings.find((cb) => cb.path.endsWith(`/${cityPath}`));
       if (b) {
         buildings.push(b);
         titles.push(((_a2 = m.label) == null ? void 0 : _a2.trim()) || null);
@@ -259183,7 +259333,7 @@ const FileCityTrailSequenceLayout = ({
       trailPathTitles: titles,
       trailPathMarkerIds: markerIds
     };
-  }, [cityData, markersForThisRepo]);
+  }, [cityData, markersForThisRepo, trail2]);
   const trailPathCurrentStepIndex = React.useMemo(() => {
     if (!selectedMarkerId) return null;
     const idx = trailPathMarkerIds.indexOf(selectedMarkerId);
@@ -259382,7 +259532,7 @@ const FileCityTrailSequenceLayout = ({
                   cityData,
                   width: "100%",
                   height: "100%",
-                  selectedPath: (selectedMarker == null ? void 0 : selectedMarker.sourcePath) ?? null,
+                  selectedPath: selectedMarker ? markerCityPath(selectedMarker, trail2) : null,
                   onBuildingClick: handleBuildingClick,
                   onCameraFrame,
                   showControls: false,
@@ -260485,6 +260635,15 @@ function filterMarkersForRepo(trail2, repository) {
   }
   return trail2.markers.filter((m) => m.repo === repository.id);
 }
+function markerCityPath(marker, trail2) {
+  if (!marker.sourcePath) return null;
+  const repos = trail2.repos ?? [];
+  if (repos.length <= 1) return marker.sourcePath;
+  if (!marker.repo) return null;
+  const repo = repos.find((r2) => r2.id === marker.repo);
+  if (!repo) return null;
+  return `${repo.name}/${marker.sourcePath}`;
+}
 const focusBuildingTool = {
   name: "focus_building",
   description: "Focuses the camera on a specific file (building) in the file city visualization",