@industry-theme/file-city-panel 0.5.68 → 0.5.70

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

@@ -1 +1 @@
-{"version":3,"file":"FileCityTrailExplorerPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/FileCityTrailExplorerPanel/FileCityTrailExplorerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,8BAA8B,CAAC;AAiBtC,OAAO,KAAK,EAEV,oCAAoC,EAErC,MAAM,wCAAwC,CAAC;AA8EhD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,oCAAoC,CAwFrC,CAAC"}
+{"version":3,"file":"FileCityTrailExplorerPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/FileCityTrailExplorerPanel/FileCityTrailExplorerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,8BAA8B,CAAC;AAiBtC,OAAO,KAAK,EAEV,oCAAoC,EAErC,MAAM,wCAAwC,CAAC;AA2BhD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,oCAAoC,CA+ErC,CAAC"}

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

@@ -23,6 +23,18 @@ export interface TrailFilePathProps {
         x: number;
         z: number;
     } | null;
+    /**
+     * Reveal markers progressively in order — dashed path draws out one
+     * step at a time and the active marker's filename floats above its
+     * dot. Loops with a brief pause at the end. Defaults to true.
+     */
+    animate?: boolean;
+    /** Milliseconds spent walking the dashed line between consecutive dots. */
+    stepMs?: number;
+    /** Time the reveal lingers on each dot before walking to the next. */
+    dwellMs?: number;
+    /** Extra hold on the final dot at the end of a loop before resetting. */
+    endHoldMs?: number;
 }
 /**
  * Sequential-path overlay: connects every marker's building in order

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;;;;OAIG;IACH,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC7C;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,gGAsKxB,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;;;;OAIG;IACH,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC5C;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,gGA0ZxB,CAAC"}

package/dist/panels.bundle.js

@@ -257806,11 +257806,40 @@ const TrailLeaderLine = React.forwardRef(function TrailLeaderLine2({ containerRe
     )
   ] });
 });
-const TrailFilePath = React.forwardRef(function TrailFilePath2({ containerRef, buildings, cityCenter }, ref) {
+const fileBasename = (path2) => {
+  const i = path2.lastIndexOf("/");
+  return i >= 0 ? path2.slice(i + 1) : path2;
+};
+const fileDirname = (path2) => {
+  const i = path2.lastIndexOf("/");
+  return i > 0 ? path2.slice(0, i) : "";
+};
+const TrailFilePath = React.forwardRef(function TrailFilePath2({
+  containerRef,
+  buildings,
+  cityCenter,
+  animate: animate2 = true,
+  stepMs = 1100,
+  dwellMs = 1400,
+  endHoldMs = 2200
+}, ref) {
   const { theme: theme2 } = useTheme();
   const color2 = theme2.colors.accent ?? "#22d3ee";
+  const fontFamily = theme2.fonts.body;
+  const calloutFontSize = String(theme2.fontSizes[1] ?? 14);
+  const calloutFontWeight = String(theme2.fontWeights.semibold ?? 600);
+  const calloutLineDy = String(Math.round((theme2.fontSizes[1] ?? 14) * 1.45));
+  const surfaceColor = theme2.colors.backgroundSecondary ?? "#0f1419";
+  const filenameColor = theme2.colors.text ?? "#f8fafc";
+  const dirColor = theme2.colors.textMuted ?? "#94a3b8";
   const groupRef = React.useRef(null);
+  const calloutTextRef = React.useRef(null);
+  const calloutBgRef = React.useRef(null);
+  const leadDotRef = React.useRef(null);
   const projectScratch = React.useRef(new THREE.Vector3());
+  const animStartTsRef = React.useRef(
+    typeof performance !== "undefined" ? performance.now() : 0
+  );
   const buildingsRef = React.useRef(buildings);
   const cityCenterRef = React.useRef(cityCenter);
   React.useEffect(() => {
@@ -257827,6 +257856,9 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({ containerRef, b
   React.useEffect(() => {
     if (buildings.length < 2) hideAll();
   }, [buildings, hideAll]);
+  React.useEffect(() => {
+    animStartTsRef.current = typeof performance !== "undefined" ? performance.now() : 0;
+  }, [animate2, buildings, dwellMs, stepMs, endHoldMs]);
   const onCameraFrame = React.useCallback(
     (camera, size) => {
       const targets = buildingsRef.current;
@@ -257857,31 +257889,75 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({ containerRef, b
         const y2 = canvasTop + (v.y * -0.5 + 0.5) * size.height;
         points.push({ x: x2, y: y2, visible });
       }
+      const N = points.length;
+      const slotMs = dwellMs + stepMs;
+      const period = N >= 2 ? (N - 1) * slotMs + dwellMs + endHoldMs : 0;
+      let revealedCount = animate2 ? 0 : N;
+      let leadingTip = null;
+      let traverseFrac = null;
+      let dwellElapsed = 0;
+      if (animate2 && period > 0) {
+        const elapsed = ((typeof performance !== "undefined" ? performance.now() : Date.now()) - animStartTsRef.current) % period;
+        const traversalsEnd = (N - 1) * slotMs;
+        if (elapsed >= traversalsEnd) {
+          revealedCount = N;
+          dwellElapsed = elapsed - traversalsEnd;
+        } else {
+          const slot = Math.floor(elapsed / slotMs);
+          const tInSlot = elapsed - slot * slotMs;
+          revealedCount = slot + 1;
+          if (tInSlot >= dwellMs) {
+            const t = tInSlot - dwellMs;
+            const frac2 = stepMs > 0 ? t / stepMs : 1;
+            traverseFrac = frac2;
+            const eased = frac2 * frac2 * (3 - 2 * frac2);
+            const a = points[slot];
+            const b = points[slot + 1];
+            leadingTip = {
+              x: a.x + (b.x - a.x) * eased,
+              y: a.y + (b.y - a.y) * eased,
+              visible: a.visible && b.visible
+            };
+          } else {
+            dwellElapsed = tInSlot;
+          }
+        }
+      }
+      const lastIndex = revealedCount - 1;
       let d = "";
-      for (let i = 0; i < points.length; i++) {
+      let started = false;
+      for (let i = 0; i <= lastIndex; i++) {
         const p2 = points[i];
         if (!p2.visible) {
-          d += "";
+          started = false;
           continue;
         }
-        if (i === 0 || !points[i - 1].visible) {
+        if (!started) {
           d += `M ${p2.x} ${p2.y} `;
+          started = true;
         } else {
           d += `L ${p2.x} ${p2.y} `;
         }
       }
-      while (g2.children.length < 1 + targets.length * 2) {
+      if (leadingTip && leadingTip.visible && started) {
+        d += `L ${leadingTip.x} ${leadingTip.y} `;
+      }
+      const needed = 1 + targets.length * 2;
+      if (g2.children.length === 0) {
         g2.appendChild(
           document.createElementNS("http://www.w3.org/2000/svg", "path")
         );
+      }
+      while (g2.children.length < needed) {
+        const isCircleSlot = g2.children.length % 2 === 1;
         g2.appendChild(
-          document.createElementNS("http://www.w3.org/2000/svg", "circle")
-        );
-        g2.appendChild(
-          document.createElementNS("http://www.w3.org/2000/svg", "text")
+          document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            isCircleSlot ? "circle" : "text"
+          )
         );
       }
-      while (g2.children.length > 1 + targets.length * 2) {
+      while (g2.children.length > needed) {
         g2.removeChild(g2.children[g2.children.length - 1]);
       }
       const pathEl = g2.children[0];
@@ -257895,33 +257971,132 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({ containerRef, b
         const dot = g2.children[1 + i * 2];
         const label = g2.children[1 + i * 2 + 1];
         const p2 = points[i];
-        if (!p2.visible) {
+        const revealed = !animate2 || i <= lastIndex;
+        const isCurrent = animate2 && i === lastIndex;
+        if (!p2.visible || !revealed) {
           dot.setAttribute("opacity", "0");
           label.setAttribute("opacity", "0");
           continue;
         }
         dot.setAttribute("cx", String(p2.x));
         dot.setAttribute("cy", String(p2.y));
-        dot.setAttribute("r", "6");
+        dot.setAttribute("r", isCurrent ? "8" : "6");
         dot.setAttribute("fill", color2);
-        dot.setAttribute("stroke", "#0f1419");
+        dot.setAttribute("stroke", surfaceColor);
         dot.setAttribute("stroke-width", "1.5");
         dot.setAttribute("opacity", "1");
-        label.setAttribute("x", String(p2.x));
-        label.setAttribute("y", String(p2.y - 10));
-        label.setAttribute("text-anchor", "middle");
-        label.setAttribute("fill", color2);
-        label.setAttribute("font-size", "11");
-        label.setAttribute("font-weight", "600");
-        label.setAttribute("opacity", "1");
-        label.textContent = String(i + 1);
+        if (animate2) {
+          label.setAttribute("opacity", "0");
+        } else {
+          label.setAttribute("x", String(p2.x));
+          label.setAttribute("y", String(p2.y - 10));
+          label.setAttribute("text-anchor", "middle");
+          label.setAttribute("fill", color2);
+          label.setAttribute("font-size", "11");
+          label.setAttribute("font-weight", "600");
+          label.setAttribute("opacity", "1");
+          label.textContent = String(i + 1);
+        }
+      }
+      const leadDot = leadDotRef.current;
+      if (leadDot) {
+        if (leadingTip && leadingTip.visible) {
+          leadDot.setAttribute("cx", String(leadingTip.x));
+          leadDot.setAttribute("cy", String(leadingTip.y));
+          leadDot.setAttribute("r", "4");
+          leadDot.setAttribute("fill", color2);
+          leadDot.setAttribute("opacity", "0.85");
+        } else {
+          leadDot.setAttribute("opacity", "0");
+        }
       }
+      const SVG_NS = "http://www.w3.org/2000/svg";
+      const paintCallout = (textEl, bgEl, point2, path2, opacity) => {
+        if (!textEl || !bgEl) return;
+        if (!point2 || !point2.visible || opacity <= 1e-3 || !path2) {
+          textEl.setAttribute("opacity", "0");
+          bgEl.setAttribute("opacity", "0");
+          return;
+        }
+        if (textEl.children.length < 2) {
+          while (textEl.firstChild) textEl.removeChild(textEl.firstChild);
+          textEl.appendChild(document.createElementNS(SVG_NS, "tspan"));
+          textEl.appendChild(document.createElementNS(SVG_NS, "tspan"));
+        }
+        const nameTspan = textEl.children[0];
+        const pathTspan = textEl.children[1];
+        const name2 = fileBasename(path2);
+        const dir = fileDirname(path2);
+        const nameLineY = point2.y - 44;
+        textEl.setAttribute("text-anchor", "middle");
+        textEl.setAttribute("font-family", fontFamily);
+        textEl.setAttribute("opacity", String(opacity));
+        nameTspan.textContent = name2;
+        nameTspan.setAttribute("x", String(point2.x));
+        nameTspan.setAttribute("y", String(nameLineY));
+        nameTspan.setAttribute("fill", filenameColor);
+        nameTspan.setAttribute("font-size", calloutFontSize);
+        nameTspan.setAttribute("font-weight", 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 bbox = textEl.getBBox();
+        const padX = 14;
+        const padY = 10;
+        bgEl.setAttribute("x", String(bbox.x - padX));
+        bgEl.setAttribute("y", String(bbox.y - padY));
+        bgEl.setAttribute("width", String(bbox.width + padX * 2));
+        bgEl.setAttribute("height", String(bbox.height + padY * 2));
+        bgEl.setAttribute("rx", "8");
+        bgEl.setAttribute("fill", surfaceColor);
+        bgEl.setAttribute("stroke", color2);
+        bgEl.setAttribute("stroke-width", "1.5");
+        bgEl.setAttribute("opacity", String(0.94 * opacity));
+      };
+      const fadeInMs = 350;
+      let calloutOpacity = 0;
+      if (animate2 && lastIndex >= 0 && lastIndex < targets.length) {
+        if (traverseFrac !== null) {
+          const eased = traverseFrac * traverseFrac * (3 - 2 * traverseFrac);
+          calloutOpacity = 1 - eased;
+        } else {
+          const t = Math.min(1, dwellElapsed / fadeInMs);
+          calloutOpacity = t * t * (3 - 2 * t);
+        }
+      } else if (!animate2 && lastIndex >= 0) {
+        calloutOpacity = 1;
+      }
+      paintCallout(
+        calloutTextRef.current,
+        calloutBgRef.current,
+        lastIndex >= 0 ? points[lastIndex] : null,
+        lastIndex >= 0 ? targets[lastIndex].path : null,
+        calloutOpacity
+      );
       g2.setAttribute("opacity", "1");
     },
-    [containerRef, hideAll, color2]
+    [
+      animate2,
+      containerRef,
+      hideAll,
+      color2,
+      stepMs,
+      dwellMs,
+      endHoldMs,
+      fontFamily,
+      calloutFontSize,
+      calloutFontWeight,
+      calloutLineDy,
+      surfaceColor,
+      filenameColor,
+      dirColor
+    ]
   );
   React.useImperativeHandle(ref, () => ({ onCameraFrame }), [onCameraFrame]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       width: "100%",
@@ -257935,7 +258110,12 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({ containerRef, b
         // overlays (z 1900) so the path only paints over the city.
         zIndex: 26
       },
-      children: /* @__PURE__ */ jsx("g", { ref: groupRef, opacity: 0 })
+      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" })
+      ]
     }
   );
 });
@@ -258686,43 +258866,6 @@ const pierreOptionsBase = {
 const pierreStyle = {
   display: "block"
 };
-function useRenderTracer(name2, watch) {
-  const renderCount = React.useRef(0);
-  renderCount.current += 1;
-  const prevWatch = React.useRef(
-    void 0
-  );
-  const changed = [];
-  if (watch && prevWatch.current) {
-    for (const k of Object.keys(watch)) {
-      if (watch[k] !== prevWatch.current[k]) changed.push(k);
-    }
-  }
-  prevWatch.current = watch;
-  console.log(
-    `[trail-trace] render ${name2} #${renderCount.current}` + (changed.length ? ` changed=[${changed.join(",")}]` : "")
-  );
-  React.useEffect(() => {
-    console.log(`[trail-trace] mount   ${name2}`);
-    return () => {
-      console.log(`[trail-trace] unmount ${name2}`);
-    };
-  }, [name2]);
-}
-let __fc3dInstanceCounter = 0;
-function FileCity3DLifecycleTracer({ tag }) {
-  const id2 = React.useRef(null);
-  if (id2.current === null) {
-    id2.current = ++__fc3dInstanceCounter;
-  }
-  React.useEffect(() => {
-    console.log(`[trail-trace] FC3D mount   id=${id2.current} site=${tag}`);
-    return () => {
-      console.log(`[trail-trace] FC3D unmount id=${id2.current} site=${tag}`);
-    };
-  }, [tag]);
-  return null;
-}
 const SEQUENCE_DRAWER_HEIGHT_PCT = 45;
 const SNIPPET_PANE_WIDTH_PX = 460;
 const PANEL_TRANSITION_MS = 280;
@@ -258733,14 +258876,6 @@ const FileCityTrailExplorerPanel = ({ context, actions }) => {
   const lineCounts = ((_a = context.lineCounts.data) == null ? void 0 : _a.lineCounts) ?? null;
   const trail2 = context.trail.data;
   const repository = context.repository;
-  useRenderTracer("FileCityTrailExplorerPanel", {
-    context,
-    actions,
-    tree,
-    lineCounts,
-    trail: trail2,
-    repository
-  });
   const cityData = React.useMemo(
     () => tree ? buildCityDataFromContext({ fileTree: tree, lineCounts }) : null,
     [tree, lineCounts]
@@ -258807,15 +258942,6 @@ const FileCityTrailSequenceLayout = ({
 }) => {
   var _a, _b;
   const { theme: theme2 } = useTheme();
-  useRenderTracer("FileCityTrailSequenceLayout", {
-    trail: trail2,
-    view,
-    markersForThisRepo,
-    selectedMarkerId,
-    cityData,
-    hasLineCounts,
-    readFile
-  });
   const [show3D, setShow3D] = React.useState(
     false
   );
@@ -259180,26 +259306,23 @@ const FileCityTrailSequenceLayout = ({
               overflow: "hidden"
             },
             children: [
-              cityData ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(FileCity3DLifecycleTracer, { tag: "sequence-layout" }),
-                /* @__PURE__ */ jsx(
-                  FileCity3D,
-                  {
-                    cityData,
-                    width: "100%",
-                    height: "100%",
-                    selectedPath: (selectedMarker == null ? void 0 : selectedMarker.sourcePath) ?? null,
-                    onBuildingClick: handleBuildingClick,
-                    onCameraFrame,
-                    showControls: false,
-                    backgroundColor: theme2.colors.background,
-                    textColor: theme2.colors.textMuted,
-                    isGrown: effectiveShow3D,
-                    highlightLayers: cityHighlightLayers,
-                    defaultBuildingColor: trailFilesActive ? theme2.colors.textTertiary : void 0
-                  }
-                )
-              ] }) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
+              cityData ? /* @__PURE__ */ jsx(
+                FileCity3D,
+                {
+                  cityData,
+                  width: "100%",
+                  height: "100%",
+                  selectedPath: (selectedMarker == null ? void 0 : selectedMarker.sourcePath) ?? null,
+                  onBuildingClick: handleBuildingClick,
+                  onCameraFrame,
+                  showControls: false,
+                  backgroundColor: theme2.colors.background,
+                  textColor: theme2.colors.textMuted,
+                  isGrown: effectiveShow3D,
+                  highlightLayers: cityHighlightLayers,
+                  defaultBuildingColor: trailFilesActive ? theme2.colors.textTertiary : void 0
+                }
+              ) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
               /* @__PURE__ */ jsx(
                 TrailFilePath,
                 {
@@ -260159,20 +260282,17 @@ const FileCityTrailExplorerEmptyState = ({
         color: theme2.colors.text
       },
       children: [
-        cityData ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(FileCity3DLifecycleTracer, { tag: "empty-state" }),
-          /* @__PURE__ */ jsx(
-            FileCity3D,
-            {
-              cityData,
-              width: "100%",
-              height: "100%",
-              showControls: false,
-              backgroundColor: theme2.colors.background,
-              textColor: theme2.colors.textMuted
-            }
-          )
-        ] }) : null,
+        cityData ? /* @__PURE__ */ jsx(
+          FileCity3D,
+          {
+            cityData,
+            width: "100%",
+            height: "100%",
+            showControls: false,
+            backgroundColor: theme2.colors.background,
+            textColor: theme2.colors.textMuted
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           "div",
           {