git-viewer 8.0.0 → 10.0.0

package/dist/entry.bundled.js

@@ -86,6 +86,8 @@ function createContainer(target, options) {
     }
   };
 }
+var TypedEventTarget = class extends EventTarget {
+};
 var interactions = /* @__PURE__ */ new Map();
 var initializedTargets = /* @__PURE__ */ new WeakMap();
 function defaultOnError(error) {
@@ -1589,62 +1591,54 @@ function jsx(type, props, key) {
 }
 
 // entry.tsx
-var state = {
-  refs: null,
-  commits: [],
-  maxLane: 0,
-  selectedCommit: null,
-  diff: null,
-  filter: "all",
-  search: "",
-  loading: true
-};
-var updateApp;
-async function fetchRefs() {
-  let res = await fetch("/api/refs");
+async function fetchRefs(signal) {
+  let res = await fetch("/api/refs", { signal });
   return res.json();
 }
-async function fetchCommits(ref, search) {
+async function fetchCommits(ref, search, signal) {
   let params = new URLSearchParams();
   if (ref) params.set("ref", ref);
   if (search) params.set("search", search);
-  let res = await fetch(`/api/commits?${params}`);
+  let res = await fetch(`/api/commits?${params}`, { signal });
   let data = await res.json();
   return { commits: data.commits, maxLane: data.maxLane };
 }
-async function fetchDiff(sha) {
-  let res = await fetch(`/api/diff/${sha}`);
+async function fetchDiff(sha, signal) {
+  let res = await fetch(`/api/diff/${sha}`, { signal });
   return res.json();
 }
-async function setFilter(filter) {
-  state.filter = filter;
-  state.loading = true;
-  updateApp();
-  let ref = filter === "all" ? "all" : filter === "local" ? state.refs?.currentBranch : filter;
-  let result = await fetchCommits(ref, state.search);
-  state.commits = result.commits;
-  state.maxLane = result.maxLane;
-  state.loading = false;
-  updateApp();
-}
-async function setSearch(search) {
-  state.search = search;
-  state.loading = true;
-  updateApp();
-  let ref = state.filter === "all" ? "all" : state.filter === "local" ? state.refs?.currentBranch : state.filter;
-  let result = await fetchCommits(ref, search);
-  state.commits = result.commits;
-  state.maxLane = result.maxLane;
-  state.loading = false;
-  updateApp();
-}
-async function selectCommit(commit) {
-  state.selectedCommit = commit;
-  state.diff = null;
-  updateApp();
-  state.diff = await fetchDiff(commit.sha);
-  updateApp();
-}
+var AppStore = class extends TypedEventTarget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "refs", null);
+    __publicField(this, "filter", "all");
+    __publicField(this, "search", "");
+    __publicField(this, "selectedCommit", null);
+    __publicField(this, "fullscreenDiff", false);
+  }
+  setRefs(refs) {
+    this.refs = refs;
+    this.dispatchEvent(new Event("refs"));
+  }
+  setFilter(filter) {
+    this.filter = filter;
+    this.dispatchEvent(new Event("filter"));
+  }
+  setSearch(search) {
+    this.search = search;
+    this.dispatchEvent(new Event("filter"));
+  }
+  selectCommit(commit) {
+    this.selectedCommit = commit;
+    this.dispatchEvent(new Event("selectedCommit"));
+  }
+  toggleFullscreenDiff(open) {
+    document.startViewTransition(() => {
+      this.fullscreenDiff = open;
+      this.dispatchEvent(new Event("fullscreenDiff"));
+    });
+  }
+};
 var colors = {
   bg: "#ffffff",
   bgLight: "#f6f8fa",
@@ -1676,17 +1670,11 @@ var graphColors = [
   // dark blue
 ];
 function App(handle) {
-  updateApp = () => handle.update();
-  handle.queueTask(async () => {
-    let [refs, commitsResult] = await Promise.all([
-      fetchRefs(),
-      fetchCommits("all")
-    ]);
-    state.refs = refs;
-    state.commits = commitsResult.commits;
-    state.maxLane = commitsResult.maxLane;
-    state.loading = false;
-    handle.update();
+  let store = new AppStore();
+  handle.context.set(store);
+  handle.queueTask(async (signal) => {
+    let refs = await fetchRefs(signal);
+    store.setRefs(refs);
   });
   return () => /* @__PURE__ */ jsx(
     "div",
@@ -1706,14 +1694,15 @@ function App(handle) {
     }
   );
 }
-function Sidebar() {
+function Sidebar(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    refs: () => handle.update()
+  });
   return () => /* @__PURE__ */ jsx(
     "div",
     {
       css: {
-        minWidth: "180px",
-        maxWidth: "300px",
-        width: "fit-content",
         borderRight: `1px solid ${colors.border}`,
         display: "flex",
         flexDirection: "column",
@@ -1725,7 +1714,6 @@ function Sidebar() {
           {
             css: {
               padding: "12px",
-              borderBottom: `1px solid ${colors.border}`,
               fontWeight: 600,
               fontSize: "11px",
               textTransform: "uppercase",
@@ -1735,9 +1723,9 @@ function Sidebar() {
             children: "Git Tree Viewer"
           }
         ),
-        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "8px 0" }, children: state.refs && /* @__PURE__ */ jsx(Fragment, { children: [
-          /* @__PURE__ */ jsx(RefSection, { title: "LOCAL", nodes: state.refs.local }),
-          Object.entries(state.refs.remotes).map(([remote, nodes]) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "8px 0" }, children: store.refs && /* @__PURE__ */ jsx(Fragment, { children: [
+          /* @__PURE__ */ jsx(RefSection, { title: "LOCAL", nodes: store.refs.local }),
+          Object.entries(store.refs.remotes).map(([remote, nodes]) => /* @__PURE__ */ jsx(
             RefSection,
             {
               title: remote.toUpperCase(),
@@ -1783,7 +1771,11 @@ function RefSection(handle) {
   ] });
 }
 function RefNodeItem(handle) {
+  let store = handle.context.get(App);
   let expanded = true;
+  handle.on(store, {
+    filter: () => handle.update()
+  });
   return ({ node, depth }) => {
     let paddingLeft = 12 + depth * 12;
     if (node.type === "folder") {
@@ -1817,7 +1809,7 @@ function RefNodeItem(handle) {
         expanded && node.children.map((child) => /* @__PURE__ */ jsx(RefNodeItem, { node: child, depth: depth + 1 }, child.name))
       ] });
     }
-    let isSelected = state.filter === node.fullName;
+    let isSelected = store.filter === node.fullName;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -1835,9 +1827,9 @@ function RefNodeItem(handle) {
             background: isSelected ? colors.accentDim : colors.bgLighter
           }
         },
-        on: { click: () => setFilter(node.fullName) },
+        on: { click: () => store.setFilter(node.fullName) },
         children: [
-          node.current && "\u25CF ",
+          node.current && /* @__PURE__ */ jsx("span", { css: { fontSize: "8px", marginRight: "4px" }, children: "\u25CF" }),
           node.name
         ]
       }
@@ -1861,12 +1853,27 @@ function MainPanel() {
     }
   );
 }
-function CommitList() {
-  let searchTimeout = null;
-  function handleSearch(value) {
-    if (searchTimeout) clearTimeout(searchTimeout);
-    searchTimeout = setTimeout(() => setSearch(value), 300);
+function CommitList(handle) {
+  let store = handle.context.get(App);
+  let commits = [];
+  let loading = true;
+  async function loadCommits(signal) {
+    loading = true;
+    handle.update();
+    let ref = store.filter === "all" ? "all" : store.filter === "local" ? store.refs?.currentBranch : store.filter;
+    let result = await fetchCommits(ref, store.search, signal);
+    commits = result.commits;
+    loading = false;
+    handle.update();
   }
+  handle.on(store, {
+    refs(_, signal) {
+      loadCommits(signal);
+    },
+    filter(_, signal) {
+      loadCommits(signal);
+    }
+  });
   return () => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1892,11 +1899,11 @@ function CommitList() {
             children: [
               /* @__PURE__ */ jsx(FilterButton, { label: "All", filter: "all" }),
               /* @__PURE__ */ jsx(FilterButton, { label: "Local", filter: "local" }),
-              state.refs && /* @__PURE__ */ jsx(
+              store.refs && /* @__PURE__ */ jsx(
                 FilterButton,
                 {
-                  label: state.refs.currentBranch,
-                  filter: state.refs.currentBranch
+                  label: store.refs.currentBranch,
+                  filter: store.refs.currentBranch
                 }
               ),
               /* @__PURE__ */ jsx("div", { css: { flex: 1 } }),
@@ -1917,14 +1924,14 @@ function CommitList() {
                     "&::placeholder": { color: colors.textMuted }
                   },
                   on: {
-                    input: (e) => handleSearch(e.target.value)
+                    input: (e) => store.setSearch(e.currentTarget.value)
                   }
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: state.loading ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: loading && commits.length === 0 ? /* @__PURE__ */ jsx(
           "div",
           {
             css: {
@@ -1968,7 +1975,7 @@ function CommitList() {
                 /* @__PURE__ */ jsx("th", { css: { width: "150px" }, children: "Date" }),
                 /* @__PURE__ */ jsx("th", { css: { width: "80px" }, children: "SHA" })
               ] }) }),
-              /* @__PURE__ */ jsx("tbody", { children: state.commits.map((commit) => /* @__PURE__ */ jsx(CommitRow, { commit }, commit.sha)) })
+              /* @__PURE__ */ jsx("tbody", { children: commits.map((commit) => /* @__PURE__ */ jsx(CommitRow, { commit }, commit.sha)) })
             ]
           }
         ) })
@@ -1976,9 +1983,13 @@ function CommitList() {
     }
   );
 }
-function FilterButton() {
+function FilterButton(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    filter: () => handle.update()
+  });
   return ({ label, filter }) => {
-    let isActive = state.filter === filter;
+    let isActive = store.filter === filter;
     return /* @__PURE__ */ jsx(
       "button",
       {
@@ -1992,15 +2003,19 @@ function FilterButton() {
           cursor: "pointer",
           "&:hover": { borderColor: colors.accent }
         },
-        on: { click: () => setFilter(filter) },
+        on: { click: () => store.setFilter(filter) },
         children: label
       }
     );
   };
 }
-function CommitRow() {
+function CommitRow(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    selectedCommit: () => handle.update()
+  });
   return ({ commit }) => {
-    let isSelected = state.selectedCommit?.sha === commit.sha;
+    let isSelected = store.selectedCommit?.sha === commit.sha;
     let { graph } = commit;
     let maxUsedLane = graph.lane;
     for (let line of graph.lines) {
@@ -2015,7 +2030,7 @@ function CommitRow() {
           cursor: "pointer",
           background: isSelected ? colors.accentDim : "transparent"
         },
-        on: { click: () => selectCommit(commit) },
+        on: { click: () => store.selectCommit(commit) },
         children: [
           /* @__PURE__ */ jsx("td", { css: { display: "flex", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx(
@@ -2124,9 +2139,40 @@ function CommitRow() {
     );
   };
 }
-function DiffPanel() {
+function DiffPanel(handle) {
+  let store = handle.context.get(App);
+  let diff = null;
+  let diffContentRef;
+  handle.on(store, {
+    async selectedCommit(_, signal) {
+      if (!store.selectedCommit) {
+        diff = null;
+        handle.update();
+        return;
+      }
+      diff = null;
+      handle.update();
+      diff = await fetchDiff(store.selectedCommit.sha, signal);
+      handle.update();
+    },
+    fullscreenDiff() {
+      handle.update();
+    }
+  });
+  function scrollToFile(path) {
+    if (!diffContentRef || !path) return;
+    let fileHeaders = diffContentRef.querySelectorAll(".d2h-file-header");
+    for (let header of fileHeaders) {
+      let nameEl = header.querySelector(".d2h-file-name");
+      if (nameEl?.textContent?.includes(path)) {
+        header.scrollIntoView({ block: "start" });
+        break;
+      }
+    }
+  }
   return () => {
-    if (!state.selectedCommit) {
+    let isFullscreen = store.fullscreenDiff;
+    if (!store.selectedCommit) {
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -2149,76 +2195,333 @@ function DiffPanel() {
           flex: 1,
           display: "flex",
           flexDirection: "column",
-          background: colors.bgLight
+          background: colors.bgLight,
+          viewTransitionName: "diff-panel",
+          ...isFullscreen ? {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 100
+          } : {}
         },
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              css: { padding: "12px", borderBottom: `1px solid ${colors.border}` },
+              css: {
+                padding: "12px",
+                borderBottom: `1px solid ${colors.border}`,
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                gap: "12px",
+                background: colors.bgLight
+              },
               children: [
-                /* @__PURE__ */ jsx("div", { css: { fontWeight: 600, marginBottom: "4px" }, children: state.selectedCommit.subject }),
-                /* @__PURE__ */ jsx("div", { css: { fontSize: "12px", color: colors.textMuted }, children: [
-                  /* @__PURE__ */ jsx("span", { children: state.selectedCommit.author }),
-                  /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
-                  /* @__PURE__ */ jsx("span", { children: state.selectedCommit.date }),
-                  /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
-                  /* @__PURE__ */ jsx("code", { css: { color: colors.accent }, children: state.selectedCommit.shortSha })
+                /* @__PURE__ */ jsx("div", { css: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("div", { css: { fontWeight: 600, marginBottom: "4px" }, children: store.selectedCommit.subject }),
+                  /* @__PURE__ */ jsx("div", { css: { fontSize: "12px", color: colors.textMuted }, children: [
+                    /* @__PURE__ */ jsx("span", { children: store.selectedCommit.author }),
+                    /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
+                    /* @__PURE__ */ jsx("span", { children: store.selectedCommit.date }),
+                    /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
+                    /* @__PURE__ */ jsx("code", { css: { color: colors.accent }, children: store.selectedCommit.shortSha }),
+                    diff && /* @__PURE__ */ jsx(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
+                      /* @__PURE__ */ jsx("span", { children: [
+                        diff.files.length,
+                        " file",
+                        diff.files.length !== 1 ? "s" : ""
+                      ] })
+                    ] })
+                  ] }),
+                  store.selectedCommit.body && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: {
+                        marginTop: "8px",
+                        whiteSpace: "pre-wrap",
+                        fontSize: "12px",
+                        lineHeight: "1.4"
+                      },
+                      children: store.selectedCommit.body
+                    }
+                  )
                 ] }),
-                state.selectedCommit.body ? /* @__PURE__ */ jsx(
-                  "div",
+                diff && /* @__PURE__ */ jsx(
+                  "button",
                   {
                     css: {
-                      marginTop: "8px",
-                      whiteSpace: "pre-wrap",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      padding: "6px 12px",
+                      border: `1px solid ${colors.border}`,
+                      borderRadius: "4px",
+                      background: colors.bg,
+                      color: colors.text,
                       fontSize: "12px",
-                      lineHeight: "1.4"
+                      cursor: "pointer",
+                      whiteSpace: "nowrap",
+                      "&:hover": {
+                        background: colors.bgLighter,
+                        borderColor: colors.accent
+                      }
                     },
-                    children: state.selectedCommit.body
+                    on: { click: () => store.toggleFullscreenDiff(!isFullscreen) },
+                    children: isFullscreen ? /* @__PURE__ */ jsx(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          children: /* @__PURE__ */ jsx("path", { d: "M4 14h6v6m10-10h-6V4m0 6 7-7M3 21l7-7" })
+                        }
+                      ),
+                      "Collapse"
+                    ] }) : /* @__PURE__ */ jsx(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          children: /* @__PURE__ */ jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
+                        }
+                      ),
+                      "Expand"
+                    ] })
                   }
-                ) : null
+                )
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: state.diff ? /* @__PURE__ */ jsx(
-            "section",
-            {
-              css: {
-                "& .d2h-wrapper": { background: "transparent" },
-                "& .d2h-file-header": {
-                  background: colors.bgLighter,
-                  borderBottom: `1px solid ${colors.border}`,
-                  padding: "8px 12px"
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+            diff && diff.files.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  borderRight: `1px solid ${colors.border}`,
+                  display: "flex",
+                  flexDirection: "column",
+                  background: colors.bg,
+                  overflow: "hidden"
                 },
-                "& .d2h-file-name": { color: colors.text },
-                "& .d2h-code-line": { padding: "0 8px" },
-                "& .d2h-code-line-ctn": { color: colors.text },
-                "& .d2h-ins": { background: "#dafbe1" },
-                "& .d2h-del": { background: "#ffebe9" },
-                "& .d2h-ins .d2h-code-line-ctn": { color: colors.green },
-                "& .d2h-del .d2h-code-line-ctn": { color: colors.red },
-                "& .d2h-code-linenumber": {
-                  color: colors.textMuted,
-                  borderRight: `1px solid ${colors.border}`
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: {
+                        padding: "8px 12px",
+                        fontSize: "11px",
+                        fontWeight: 600,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                        color: colors.textMuted,
+                        borderBottom: `1px solid ${colors.border}`
+                      },
+                      children: "Changed Files"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "4px 0" }, children: diff.files.map((file) => /* @__PURE__ */ jsx(
+                    FileListItem,
+                    {
+                      file,
+                      onSelect: () => scrollToFile(file.path)
+                    },
+                    file.path
+                  )) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: diff ? /* @__PURE__ */ jsx(
+              "section",
+              {
+                connect: (node) => diffContentRef = node,
+                css: {
+                  "& .d2h-wrapper": { background: "transparent" },
+                  "& .d2h-file-header": {
+                    background: colors.bgLighter,
+                    borderBottom: `1px solid ${colors.border}`,
+                    padding: "8px 12px",
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1
+                  },
+                  "& .d2h-file-name": { color: colors.text },
+                  "& .d2h-code-line": { padding: "0 8px" },
+                  "& .d2h-code-line-ctn": { color: colors.text },
+                  "& .d2h-ins": { background: "#dafbe1" },
+                  "& .d2h-del": { background: "#ffebe9" },
+                  "& .d2h-ins .d2h-code-line-ctn": { color: colors.green },
+                  "& .d2h-del .d2h-code-line-ctn": { color: colors.red },
+                  "& .d2h-code-linenumber": {
+                    color: colors.textMuted,
+                    borderRight: `1px solid ${colors.border}`
+                  },
+                  "& .d2h-file-diff": {
+                    borderBottom: `1px solid ${colors.border}`
+                  },
+                  "& .d2h-diff-tbody": { position: "relative" }
                 },
-                "& .d2h-file-diff": {
-                  borderBottom: `1px solid ${colors.border}`
+                innerHTML: diff.diffHtml
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  padding: "20px",
+                  textAlign: "center",
+                  color: colors.textMuted
                 },
-                "& .d2h-diff-tbody": { position: "relative" }
+                children: "Loading diff..."
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  };
+}
+function FileListItem() {
+  return ({ file, onSelect }) => {
+    let displayName = file.path.split("/").pop() ?? file.path;
+    let fullPath = file.path;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          padding: "6px 12px",
+          cursor: "pointer",
+          "&:hover": {
+            background: colors.bgLighter
+          }
+        },
+        on: { click: onSelect },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
               },
-              innerHTML: state.diff.diffHtml
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "2px",
+                      fontSize: "10px",
+                      fontWeight: 500,
+                      minWidth: "50px"
+                    },
+                    children: [
+                      file.additions > 0 && /* @__PURE__ */ jsx("span", { css: { color: colors.green }, children: [
+                        "+",
+                        file.additions
+                      ] }),
+                      file.deletions > 0 && /* @__PURE__ */ jsx("span", { css: { color: colors.red }, children: [
+                        "-",
+                        file.deletions
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      flex: 1,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      fontSize: "12px"
+                    },
+                    title: fullPath,
+                    children: [
+                      file.isNew && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          css: {
+                            display: "inline-block",
+                            padding: "1px 4px",
+                            marginRight: "6px",
+                            borderRadius: "3px",
+                            background: colors.green,
+                            color: "#fff",
+                            fontSize: "9px",
+                            fontWeight: 600
+                          },
+                          children: "NEW"
+                        }
+                      ),
+                      file.isDeleted && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          css: {
+                            display: "inline-block",
+                            padding: "1px 4px",
+                            marginRight: "6px",
+                            borderRadius: "3px",
+                            background: colors.red,
+                            color: "#fff",
+                            fontSize: "9px",
+                            fontWeight: 600
+                          },
+                          children: "DEL"
+                        }
+                      ),
+                      file.isRenamed && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          css: {
+                            display: "inline-block",
+                            padding: "1px 4px",
+                            marginRight: "6px",
+                            borderRadius: "3px",
+                            background: colors.accent,
+                            color: "#fff",
+                            fontSize: "9px",
+                            fontWeight: 600
+                          },
+                          children: "REN"
+                        }
+                      ),
+                      displayName
+                    ]
+                  }
+                )
+              ]
             }
-          ) : /* @__PURE__ */ jsx(
+          ),
+          fullPath !== displayName && /* @__PURE__ */ jsx(
             "div",
             {
               css: {
-                padding: "20px",
-                textAlign: "center",
-                color: colors.textMuted
+                fontSize: "10px",
+                color: colors.textMuted,
+                marginTop: "2px",
+                marginLeft: "58px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
               },
-              children: "Loading diff..."
+              children: fullPath
             }
-          ) })
+          )
         ]
       }
     );

package/dist/index.html

@@ -13,6 +13,38 @@
         height: 100%;
         overflow: hidden;
       }
+      
+      /* View Transition Styles */
+      @view-transition {
+        navigation: auto;
+      }
+      
+      /* Diff panel morphs between positions */
+      ::view-transition-old(diff-panel),
+      ::view-transition-new(diff-panel) {
+        animation-duration: 0.35s;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      /* Make the old and new states crossfade while morphing */
+      ::view-transition-old(diff-panel) {
+        animation: none;
+      }
+      
+      ::view-transition-new(diff-panel) {
+        animation: none;
+      }
+      
+      /* The group handles the position/size morphing automatically */
+      ::view-transition-group(diff-panel) {
+        animation-duration: 0.35s;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      /* Image pair handles crossfade */
+      ::view-transition-image-pair(diff-panel) {
+        isolation: auto;
+      }
     </style>
   </head>
   <body>

package/dist/server.js

@@ -8854,11 +8854,11 @@ async function getRefs() {
   }
   let remotes = {};
   for (let [remote, branches] of Object.entries(remotesByOrigin)) {
-    remotes[remote] = buildTree(branches);
+    remotes[remote] = buildTree(branches, void 0, `${remote}/`);
   }
   return { local, remotes, currentBranch };
 }
-function buildTree(branches, currentBranch) {
+function buildTree(branches, currentBranch, prefix = "") {
   let root = [];
   let sorted = [...branches].sort((a, b) => {
     let aHasSlash = a.includes("/");
@@ -8868,7 +8868,7 @@ function buildTree(branches, currentBranch) {
   });
   for (let branch of sorted) {
     let parts = branch.split("/");
-    insertIntoTree(root, parts, branch, currentBranch);
+    insertIntoTree(root, parts, prefix + branch, currentBranch);
   }
   return root;
 }
@@ -9039,7 +9039,17 @@ async function getDiff(sha) {
   let [record] = metaOutput.split("\0");
   let [fullSha, shortSha, subject, body, author, date, parents] = record.split("");
   let diffOutput = await git(`show --format="" ${sha}`);
-  let diffHtml = (0, import_diff2html.html)((0, import_diff2html.parse)(diffOutput), {
+  let parsedDiff = (0, import_diff2html.parse)(diffOutput);
+  let files = parsedDiff.map((file) => ({
+    path: file.newName || file.oldName || "",
+    oldPath: file.isRename ? file.oldName : void 0,
+    additions: file.addedLines,
+    deletions: file.deletedLines,
+    isNew: file.isNew || false,
+    isDeleted: file.isDeleted || false,
+    isRenamed: file.isRename || false
+  }));
+  let diffHtml = (0, import_diff2html.html)(parsedDiff, {
     drawFileList: false,
     outputFormat: "line-by-line",
     matching: "lines"
@@ -9052,7 +9062,8 @@ async function getDiff(sha) {
     author,
     date: formatDate(date),
     parents: parents ? parents.split(" ").filter(Boolean) : [],
-    diffHtml
+    diffHtml,
+    files
   };
 }
 var packageDir = import.meta.dirname;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-viewer",
-  "version": "8.0.0",
+  "version": "10.0.0",
   "description": "Visual git log viewer with branch graph and diff display",
   "repository": {
     "type": "git",