@industry-theme/file-city-panel 0.5.61 → 0.5.62

package/dist/panels.bundle.js

@@ -257801,7 +257801,8 @@ const TrailMarkdownOverlay = ({
   markdown: markdown2,
   slideIdPrefix,
   bottomOffset,
-  containerRef: externalContainerRef
+  containerRef: externalContainerRef,
+  nav
 }) => {
   const { theme: theme2 } = useTheme();
   const body = markdown2.trim();
@@ -257948,6 +257949,7 @@ const TrailMarkdownOverlay = ({
             enableKeyboardScrolling: false
           }
         ) }) }),
+        nav ? /* @__PURE__ */ jsx(TrailMarkdownOverlayFooter, { nav }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -257983,6 +257985,104 @@ const TrailMarkdownOverlay = ({
     }
   );
 };
+const TrailMarkdownOverlayFooter = ({
+  nav
+}) => {
+  const { theme: theme2 } = useTheme();
+  const idle = nav.position < 0;
+  const canPrev = !idle && nav.position > 0;
+  const canNext = !idle && nav.position < nav.total - 1;
+  const stepButtonStyle = (enabled) => ({
+    background: "transparent",
+    border: `1px solid ${theme2.colors.muted}`,
+    borderRadius: theme2.radii[2],
+    color: enabled ? theme2.colors.text : theme2.colors.textTertiary,
+    cursor: enabled ? "pointer" : "not-allowed",
+    padding: "4px 10px",
+    fontFamily: theme2.fonts.body,
+    fontSize: theme2.fontSizes[0],
+    lineHeight: 1.2,
+    opacity: enabled ? 1 : 0.5
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        padding: "8px 14px",
+        borderTop: `1px solid ${theme2.colors.border}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: idle ? "center" : "space-between",
+        gap: 8,
+        flexShrink: 0
+      },
+      children: idle ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: nav.onStart,
+          disabled: nav.total === 0,
+          title: nav.total === 0 ? "No markers in this repo" : "Jump to the first marker",
+          style: {
+            background: theme2.colors.accent,
+            color: theme2.colors.background,
+            border: "none",
+            borderRadius: theme2.radii[3],
+            padding: "6px 14px",
+            fontFamily: theme2.fonts.body,
+            fontSize: theme2.fontSizes[0],
+            fontWeight: theme2.fontWeights.semibold,
+            cursor: nav.total === 0 ? "not-allowed" : "pointer",
+            opacity: nav.total === 0 ? 0.5 : 1,
+            lineHeight: 1.2
+          },
+          children: "Start trail"
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: nav.onPrev,
+            disabled: !canPrev,
+            "aria-label": "Previous marker",
+            title: "Previous marker",
+            style: stepButtonStyle(canPrev),
+            children: "◀ Prev"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              fontVariantNumeric: "tabular-nums"
+            },
+            children: [
+              nav.position + 1,
+              " / ",
+              nav.total
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: nav.onNext,
+            disabled: !canNext,
+            "aria-label": "Next marker",
+            title: "Next marker",
+            style: stepButtonStyle(canNext),
+            children: "Next ▶"
+          }
+        )
+      ] })
+    }
+  );
+};
 const TrailSnippetView = ({
   filePath,
   fileName,
@@ -258258,7 +258358,7 @@ const pierreStyle = {
 const SEQUENCE_DRAWER_HEIGHT_PCT = 38;
 const SNIPPET_PANE_WIDTH_PX = 460;
 const HEADER_HEIGHT_PX = 48;
-const SNIPPET_PANE_BG = "#0b0f14";
+const THREE_D_TOGGLE_DISABLED = true;
 const FileCityTrailExplorerPanel = ({ context, actions }) => {
   var _a;
   const tree = context.fileTree.data;
@@ -258314,6 +258414,7 @@ const FileCityTrailExplorerPanel = ({ context, actions }) => {
       selectedMarkerId,
       onSelectMarker: setSelectedMarkerId,
       cityData,
+      hasLineCounts: lineCounts != null && Object.keys(lineCounts).length > 0,
       readFile: actions.readFile
     }
   );
@@ -258325,9 +258426,18 @@ const FileCityTrailSequenceLayout = ({
   selectedMarkerId,
   onSelectMarker,
   cityData,
+  hasLineCounts,
   readFile
 }) => {
   var _a, _b;
+  const { theme: theme2 } = useTheme();
+  const [show3D, setShow3D] = React.useState(
+    false
+  );
+  React.useEffect(() => {
+    return;
+  }, [hasLineCounts]);
+  const effectiveShow3D = false;
   const selectedMarker = React.useMemo(() => {
     if (!selectedMarkerId) return null;
     return trail2.markers.find((m) => m.id === selectedMarkerId) ?? null;
@@ -258347,10 +258457,72 @@ const FileCityTrailSequenceLayout = ({
     },
     [markerBySourcePathForThisRepo, selectedMarkerId, onSelectMarker]
   );
+  const stepperIndex = React.useMemo(() => {
+    if (!selectedMarkerId) return -1;
+    return markersForThisRepo.findIndex((m) => m.id === selectedMarkerId);
+  }, [markersForThisRepo, selectedMarkerId]);
+  const handleStartTrail = React.useCallback(() => {
+    const first = markersForThisRepo[0];
+    if (first) onSelectMarker(first.id);
+  }, [markersForThisRepo, onSelectMarker]);
+  const handleStepPrev = React.useCallback(() => {
+    if (stepperIndex <= 0) return;
+    const target = markersForThisRepo[stepperIndex - 1];
+    if (target) onSelectMarker(target.id);
+  }, [markersForThisRepo, stepperIndex, onSelectMarker]);
+  const handleStepNext = React.useCallback(() => {
+    if (stepperIndex < 0 || stepperIndex >= markersForThisRepo.length - 1) return;
+    const target = markersForThisRepo[stepperIndex + 1];
+    if (target) onSelectMarker(target.id);
+  }, [markersForThisRepo, stepperIndex, onSelectMarker]);
+  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 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}`));
+      if (!building) continue;
+      seen.add(sourcePath);
+      const color2 = building.color ?? getFileColor(building.path);
+      if (!color2) continue;
+      const list2 = byColor.get(color2) ?? [];
+      list2.push(building.path);
+      byColor.set(color2, list2);
+    }
+    if (byColor.size === 0) return null;
+    let i = 0;
+    return Array.from(byColor.entries()).map(([color2, paths]) => ({
+      id: `trail-files-${i++}`,
+      name: "Trail files",
+      enabled: true,
+      color: color2,
+      opacity: 1,
+      priority: 50,
+      items: paths.map((path2) => ({
+        path: path2,
+        type: "file",
+        renderStrategy: "fill"
+      }))
+    }));
+  }, [markersForThisRepo, cityData]);
+  const trailFilesActive = trailFilesHighlightLayers !== null && trailFilesHighlightLayers.length > 0;
   const containerRef = React.useRef(null);
   const snippetPaneRef = React.useRef(null);
   const leaderLineRef = React.useRef(null);
   const [markdownOverlayWidth, setMarkdownOverlayWidth] = React.useState(null);
+  const [snippetPaneEl, setSnippetPaneEl] = React.useState(null);
+  const snippetPaneCallbackRef = React.useCallback(
+    (node2) => {
+      snippetPaneRef.current = node2;
+      setSnippetPaneEl(node2);
+    },
+    []
+  );
+  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;
@@ -258395,6 +258567,17 @@ const FileCityTrailSequenceLayout = ({
     observer.observe(markdownOverlayEl);
     return () => observer.disconnect();
   }, [markdownOverlayEl]);
+  React.useEffect(() => {
+    if (!snippetPaneEl) {
+      setSnippetPaneWidth(null);
+      return;
+    }
+    const update = () => setSnippetPaneWidth(snippetPaneEl.getBoundingClientRect().width);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(snippetPaneEl);
+    return () => observer.disconnect();
+  }, [snippetPaneEl]);
   const overlayMarkdown = ((_a = selectedMarker == null ? void 0 : selectedMarker.description) == null ? void 0 : _a.trim()) ? {
     eyebrow: "Marker",
     title: selectedMarker.label ?? selectedMarker.id,
@@ -258415,12 +258598,10 @@ const FileCityTrailSequenceLayout = ({
     const apply = () => {
       if (cancelled) return;
       if (hasOverlayMarkdown && markdownOverlayWidth == null) return;
+      if (showSnippetPane && snippetPaneWidth == null) return;
       const FLOAT_INSET2 = 16;
       const leftInset = hasOverlayMarkdown ? FLOAT_INSET2 + (markdownOverlayWidth ?? 0) : 0;
-      const snippetW = Math.min(
-        SNIPPET_PANE_WIDTH_PX,
-        containerSize.width / 2
-      );
+      const snippetW = snippetPaneWidth ?? SNIPPET_PANE_WIDTH_PX;
       const rightInset = showSnippetPane ? snippetW + FLOAT_INSET2 : 0;
       const topInset = FLOAT_INSET2;
       const bottomInset = SEQUENCE_DRAWER_HEIGHT_PCT / 100 * containerSize.height;
@@ -258466,6 +258647,7 @@ const FileCityTrailSequenceLayout = ({
     cityData,
     containerSize,
     showSnippetPane,
+    snippetPaneWidth,
     hasOverlayMarkdown,
     markdownOverlayWidth
   ]);
@@ -258478,11 +258660,20 @@ const FileCityTrailSequenceLayout = ({
         height: "100%",
         display: "flex",
         flexDirection: "column",
-        backgroundColor: "#0b0f14",
-        color: "#e5e7eb"
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text
       },
       children: [
-        /* @__PURE__ */ jsx(TrailHeader, { trail: trail2, markerCount: markersForThisRepo.length }),
+        /* @__PURE__ */ jsx(
+          TrailHeader,
+          {
+            trail: trail2,
+            markerCount: markersForThisRepo.length,
+            show3D: effectiveShow3D,
+            onToggle3D: () => setShow3D((v) => !v),
+            hideToggle: THREE_D_TOGGLE_DISABLED
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -258504,7 +258695,11 @@ const FileCityTrailSequenceLayout = ({
                   onBuildingClick: handleBuildingClick,
                   onCameraFrame,
                   showControls: false,
-                  backgroundColor: "#0b0f14"
+                  backgroundColor: theme2.colors.background,
+                  textColor: theme2.colors.textMuted,
+                  isGrown: effectiveShow3D,
+                  highlightLayers: trailFilesHighlightLayers ?? void 0,
+                  defaultBuildingColor: trailFilesActive ? theme2.colors.textTertiary : void 0
                 }
               ) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
               /* @__PURE__ */ jsx(
@@ -258525,7 +258720,14 @@ const FileCityTrailSequenceLayout = ({
                   markdown: overlayMarkdown.markdown,
                   slideIdPrefix: overlayMarkdown.slideIdPrefix,
                   bottomOffset: `${SEQUENCE_DRAWER_HEIGHT_PCT}%`,
-                  containerRef: setMarkdownOverlayEl
+                  containerRef: setMarkdownOverlayEl,
+                  nav: markersForThisRepo.length > 0 ? {
+                    position: stepperIndex,
+                    total: markersForThisRepo.length,
+                    onStart: handleStartTrail,
+                    onPrev: handleStepPrev,
+                    onNext: handleStepNext
+                  } : void 0
                 }
               ) : null,
               /* @__PURE__ */ jsx(
@@ -258540,7 +258742,7 @@ const FileCityTrailSequenceLayout = ({
               (selectedMarker == null ? void 0 : selectedMarker.snippet) ? /* @__PURE__ */ jsx(
                 SnippetSidePane,
                 {
-                  ref: snippetPaneRef,
+                  ref: snippetPaneCallbackRef,
                   marker: selectedMarker,
                   snippet: selectedMarker.snippet,
                   readFile,
@@ -258560,6 +258762,7 @@ const SequenceDrawer = ({
   selectedMarkerId,
   onSelectMarker
 }) => {
+  const { theme: theme2 } = useTheme();
   const inputs = React.useMemo(
     () => buildSequenceViewInputs(trail2, view),
     [trail2, view]
@@ -258580,8 +258783,8 @@ const SequenceDrawer = ({
         right: 0,
         bottom: 0,
         height: `${SEQUENCE_DRAWER_HEIGHT_PCT}%`,
-        backgroundColor: "rgba(11, 15, 20, 0.92)",
-        borderTop: "1px solid #1f2937",
+        backgroundColor: withAlpha(theme2.colors.background, 92),
+        borderTop: `1px solid ${theme2.colors.border}`,
         zIndex: 10
       },
       children: /* @__PURE__ */ jsx(
@@ -258603,8 +258806,19 @@ const SequenceDrawer = ({
   );
 };
 const SnippetSidePane = React.forwardRef(function SnippetSidePane2({ marker, snippet: snippet2, readFile, onClose }, ref) {
+  const { theme: theme2 } = useTheme();
   if (!marker.sourcePath) {
-    return /* @__PURE__ */ jsx(SidePaneFrame, { ref, marker, onClose, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 11, opacity: 0.6, padding: 8 }, children: "Marker has no sourcePath; snippet cannot be rendered." }) });
+    return /* @__PURE__ */ jsx(SidePaneFrame, { ref, marker, onClose, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textSecondary,
+          padding: 8
+        },
+        children: "Marker has no sourcePath; snippet cannot be rendered."
+      }
+    ) });
   }
   const fileName = marker.sourcePath.split("/").pop() ?? marker.sourcePath;
   return /* @__PURE__ */ jsx(SidePaneFrame, { ref, marker, onClose, children: snippet2.kind === "slice" ? /* @__PURE__ */ jsx(
@@ -258617,7 +258831,7 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({ marker, sni
       focusLine: snippet2.focusLine,
       contextLines: snippet2.contextLines,
       readFile,
-      background: SNIPPET_PANE_BG
+      background: theme2.colors.background
     }
   ) : /* @__PURE__ */ jsx(
     TrailDiffSnippetView,
@@ -258632,33 +258846,130 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({ marker, sni
       focusLine: snippet2.focusLine,
       contextLines: snippet2.contextLines,
       diffStyle: snippet2.diffStyle,
-      background: SNIPPET_PANE_BG
+      background: theme2.colors.background
     }
   ) });
 });
+const SNIPPET_PANE_MIN_WIDTH_PX = 320;
+const SNIPPET_PANE_RESIZE_HANDLE_WIDTH = 6;
 const SidePaneFrame = React.forwardRef(
   function SidePaneFrame2({ marker, onClose, children: children2 }, ref) {
+    const { theme: theme2 } = useTheme();
+    const [widthPx, setWidthPx] = React.useState(null);
+    const [isResizing, setIsResizing] = React.useState(false);
+    const innerRef = React.useRef(null);
+    const setInnerRef = React.useCallback(
+      (node2) => {
+        innerRef.current = node2;
+        if (typeof ref === "function") {
+          ref(node2);
+        } else if (ref) {
+          ref.current = node2;
+        }
+      },
+      [ref]
+    );
+    const dragStateRef = React.useRef(null);
+    const handleResizePointerDown = React.useCallback(
+      (e) => {
+        if (e.button !== 0) return;
+        const el = innerRef.current;
+        if (!el) return;
+        e.preventDefault();
+        dragStateRef.current = {
+          startX: e.clientX,
+          startWidth: el.getBoundingClientRect().width
+        };
+        setIsResizing(true);
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      []
+    );
+    const handleResizePointerMove = React.useCallback(
+      (e) => {
+        var _a;
+        const drag2 = dragStateRef.current;
+        if (!drag2) return;
+        const parent = (_a = innerRef.current) == null ? void 0 : _a.parentElement;
+        const parentWidth = (parent == null ? void 0 : parent.clientWidth) ?? window.innerWidth;
+        const maxWidth = Math.max(
+          SNIPPET_PANE_MIN_WIDTH_PX,
+          parentWidth - 32
+        );
+        const dx = e.clientX - drag2.startX;
+        const next2 = Math.min(
+          maxWidth,
+          Math.max(SNIPPET_PANE_MIN_WIDTH_PX, drag2.startWidth - dx)
+        );
+        setWidthPx(next2);
+      },
+      []
+    );
+    const handleResizePointerUp = React.useCallback(
+      (e) => {
+        if (!dragStateRef.current) return;
+        dragStateRef.current = null;
+        setIsResizing(false);
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+          e.currentTarget.releasePointerCapture(e.pointerId);
+        }
+      },
+      []
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
+        ref: setInnerRef,
         style: {
           position: "absolute",
           top: 16,
           right: 16,
           bottom: `calc(${SEQUENCE_DRAWER_HEIGHT_PCT}% + 16px)`,
-          width: SNIPPET_PANE_WIDTH_PX,
-          maxWidth: "50%",
-          backgroundColor: SNIPPET_PANE_BG,
-          border: "1px solid #1f2937",
-          borderRadius: 12,
-          boxShadow: "-2px 0 12px rgba(0,0,0,0.35)",
+          width: widthPx ?? SNIPPET_PANE_WIDTH_PX,
+          minWidth: SNIPPET_PANE_MIN_WIDTH_PX,
+          backgroundColor: theme2.colors.background,
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: theme2.radii[5],
+          boxShadow: theme2.shadows[3],
           display: "flex",
           flexDirection: "column",
           overflow: "hidden",
-          zIndex: 1900
+          zIndex: 1900,
+          userSelect: isResizing ? "none" : void 0
         },
         children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": "Resize snippet panel",
+              onPointerDown: handleResizePointerDown,
+              onPointerMove: handleResizePointerMove,
+              onPointerUp: handleResizePointerUp,
+              onPointerCancel: handleResizePointerUp,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                width: SNIPPET_PANE_RESIZE_HANDLE_WIDTH,
+                cursor: "ew-resize",
+                backgroundColor: isResizing ? theme2.colors.accent : "transparent",
+                transition: isResizing ? void 0 : "background-color 120ms ease",
+                touchAction: "none",
+                zIndex: 1
+              },
+              onMouseEnter: (e) => {
+                if (isResizing) return;
+                e.currentTarget.style.backgroundColor = theme2.colors.border;
+              },
+              onMouseLeave: (e) => {
+                if (isResizing) return;
+                e.currentTarget.style.backgroundColor = "transparent";
+              }
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -258668,19 +258979,30 @@ const SidePaneFrame = React.forwardRef(
                 justifyContent: "space-between",
                 gap: 8,
                 padding: "10px 14px",
-                borderBottom: "1px solid #1f2937",
+                borderBottom: `1px solid ${theme2.colors.border}`,
                 flexShrink: 0
               },
               children: [
                 /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-                  /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600 }, children: marker.label ?? marker.id }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        fontFamily: theme2.fonts.heading,
+                        fontSize: theme2.fontSizes[0],
+                        fontWeight: theme2.fontWeights.semibold,
+                        color: theme2.colors.text
+                      },
+                      children: marker.label ?? marker.id
+                    }
+                  ),
                   marker.sourcePath ? /* @__PURE__ */ jsx(
                     "div",
                     {
                       style: {
-                        fontSize: 11,
-                        opacity: 0.6,
-                        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+                        fontSize: theme2.fontSizes[0],
+                        color: theme2.colors.textSecondary,
+                        fontFamily: theme2.fonts.monospace,
                         marginTop: 2,
                         wordBreak: "break-all"
                       },
@@ -258694,12 +259016,13 @@ const SidePaneFrame = React.forwardRef(
                     onClick: onClose,
                     style: {
                       background: "transparent",
-                      color: "#e5e7eb",
-                      border: "1px solid #374151",
-                      borderRadius: 4,
+                      color: theme2.colors.text,
+                      border: `1px solid ${theme2.colors.muted}`,
+                      borderRadius: theme2.radii[2],
                       padding: "2px 8px",
                       cursor: "pointer",
-                      fontSize: 11,
+                      fontSize: theme2.fontSizes[0],
+                      fontFamily: theme2.fonts.body,
                       flexShrink: 0
                     },
                     children: "Close"
@@ -258714,28 +259037,94 @@ const SidePaneFrame = React.forwardRef(
     );
   }
 );
-const TrailHeader = ({ trail: trail2, markerCount }) => {
+const TrailHeader = ({
+  trail: trail2,
+  markerCount,
+  show3D,
+  onToggle3D,
+  hideToggle = false
+}) => {
+  const { theme: theme2 } = useTheme();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
         height: HEADER_HEIGHT_PX,
         padding: "8px 16px",
-        borderBottom: "1px solid #1f2937",
+        borderBottom: `1px solid ${theme2.colors.border}`,
         display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        gap: 2,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
         flexShrink: 0
       },
       children: [
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: trail2.title }),
-        /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, opacity: 0.6 }, children: [
-          markerCount,
-          " marker",
-          markerCount === 1 ? "" : "s",
-          " in this repo"
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: 2,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme2.fonts.heading,
+                    fontSize: theme2.fontSizes[1],
+                    fontWeight: theme2.fontWeights.semibold,
+                    color: theme2.colors.text
+                  },
+                  children: trail2.title
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary
+                  },
+                  children: [
+                    markerCount,
+                    " marker",
+                    markerCount === 1 ? "" : "s",
+                    " in this repo"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        hideToggle ? null : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle3D,
+            "aria-pressed": show3D,
+            title: show3D ? "Switch to flat (2D) view" : "Switch to 3D view",
+            style: {
+              flexShrink: 0,
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[0],
+              fontWeight: theme2.fontWeights.medium,
+              color: show3D ? theme2.colors.background : theme2.colors.text,
+              background: show3D ? theme2.colors.accent : "transparent",
+              border: `1px solid ${show3D ? theme2.colors.accent : theme2.colors.muted}`,
+              borderRadius: theme2.radii[3],
+              padding: "4px 10px",
+              cursor: "pointer",
+              lineHeight: 1.2
+            },
+            children: "3D"
+          }
+        )
       ]
     }
   );
@@ -258744,6 +259133,7 @@ const FileCityTrailExplorerEmptyState = ({
   message,
   cityData
 }) => {
+  const { theme: theme2 } = useTheme();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -258751,8 +259141,8 @@ const FileCityTrailExplorerEmptyState = ({
         position: "relative",
         width: "100%",
         height: "100%",
-        backgroundColor: "#0b0f14",
-        color: "#e5e7eb"
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text
       },
       children: [
         cityData ? /* @__PURE__ */ jsx(
@@ -258762,7 +259152,8 @@ const FileCityTrailExplorerEmptyState = ({
             width: "100%",
             height: "100%",
             showControls: false,
-            backgroundColor: "#0b0f14"
+            backgroundColor: theme2.colors.background,
+            textColor: theme2.colors.textMuted
           }
         ) : null,
         /* @__PURE__ */ jsx(
@@ -258775,9 +259166,10 @@ const FileCityTrailExplorerEmptyState = ({
               alignItems: "center",
               justifyContent: "center",
               padding: 16,
-              backgroundColor: cityData ? "rgba(11, 15, 20, 0.6)" : void 0,
-              opacity: 0.85,
-              fontSize: 13
+              backgroundColor: cityData ? withAlpha(theme2.colors.background, 60) : void 0,
+              color: theme2.colors.textSecondary,
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[1]
             },
             children: message
           }
@@ -258786,21 +259178,25 @@ const FileCityTrailExplorerEmptyState = ({
     }
   );
 };
-const CityLoadingPlaceholder = () => /* @__PURE__ */ jsx(
-  "div",
-  {
-    style: {
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      opacity: 0.5,
-      fontSize: 12
-    },
-    children: "Building the city…"
-  }
-);
+const CityLoadingPlaceholder = () => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: theme2.colors.textMuted,
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[0]
+      },
+      children: "Building the city…"
+    }
+  );
+};
 function filterMarkersForRepo(trail2, repository) {
   const repos = trail2.repos ?? [];
   if (repos.length <= 1 || !repository) {