git-viewer 13.0.0 → 15.0.0

package/dist/entry.bundled.js

@@ -1607,6 +1607,45 @@ async function fetchDiff(sha, signal) {
   let res = await fetch(`/api/diff/${sha}`, { signal });
   return res.json();
 }
+async function fetchStatus(signal) {
+  let res = await fetch("/api/status", { signal });
+  return res.json();
+}
+async function stageFiles(paths) {
+  await fetch("/api/stage", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ paths })
+  });
+}
+async function unstageFiles(paths) {
+  await fetch("/api/unstage", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ paths })
+  });
+}
+async function commitChanges(message, amend) {
+  await fetch("/api/commit", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ message, amend })
+  });
+}
+async function fetchLastCommit(signal) {
+  let res = await fetch("/api/last-commit", { signal });
+  return res.json();
+}
+async function fetchWorkingDiff(path, signal) {
+  let params = new URLSearchParams({ path });
+  let res = await fetch(`/api/working-diff?${params}`, { signal });
+  return res.json();
+}
+async function fetchStagedDiff(path, signal) {
+  let params = new URLSearchParams({ path });
+  let res = await fetch(`/api/staged-diff?${params}`, { signal });
+  return res.json();
+}
 var AppStore = class extends TypedEventTarget {
   constructor() {
     super(...arguments);
@@ -1615,7 +1654,8 @@ var AppStore = class extends TypedEventTarget {
     __publicField(this, "search", "");
     __publicField(this, "selectedCommit", null);
     __publicField(this, "fullscreenDiff", false);
-    __publicField(this, "theme", "light");
+    __publicField(this, "view", "commits");
+    __publicField(this, "status", null);
   }
   setRefs(refs) {
     this.refs = refs;
@@ -1629,15 +1669,6 @@ var AppStore = class extends TypedEventTarget {
     this.search = search;
     this.dispatchEvent(new Event("filter"));
   }
-  setTheme(theme) {
-    this.theme = theme;
-    try {
-      localStorage.setItem(THEME_STORAGE_KEY, theme);
-    } catch {
-    }
-    applyTheme(theme);
-    this.dispatchEvent(new Event("theme"));
-  }
   selectCommit(commit) {
     this.selectedCommit = commit;
     this.dispatchEvent(new Event("selectedCommit"));
@@ -1648,9 +1679,16 @@ var AppStore = class extends TypedEventTarget {
       this.dispatchEvent(new Event("fullscreenDiff"));
     });
   }
+  setView(view) {
+    this.view = view;
+    this.dispatchEvent(new Event("view"));
+  }
+  setStatus(status) {
+    this.status = status;
+    this.dispatchEvent(new Event("status"));
+  }
 };
-var THEME_STORAGE_KEY = "git-viewer-theme";
-var lightPalette = {
+var colors = {
   bg: "#ffffff",
   bgLight: "#f6f8fa",
   bgLighter: "#eaeef2",
@@ -1660,30 +1698,9 @@ var lightPalette = {
   accent: "#0969da",
   accentDim: "#ddf4ff",
   green: "#1a7f37",
-  red: "#cf222e",
-  diffAddBg: "#dafbe1",
-  diffDelBg: "#ffebe9",
-  diffAddText: "#116329",
-  diffDelText: "#a40e26"
+  red: "#cf222e"
 };
-var darkPalette = {
-  bg: "#0b0f14",
-  bgLight: "#111821",
-  bgLighter: "#1a2431",
-  border: "#283241",
-  text: "#e6edf3",
-  textMuted: "#9aa7b4",
-  accent: "#7aa2ff",
-  accentDim: "#0b1b33",
-  green: "#3fb950",
-  red: "#ff7b72",
-  diffAddBg: "#132a1f",
-  diffDelBg: "#2a1619",
-  diffAddText: "#7ee787",
-  diffDelText: "#ffa198"
-};
-var colors = lightPalette;
-var graphColorsLight = [
+var graphColors = [
   "#0969da",
   // blue
   "#8250df",
@@ -1701,117 +1718,133 @@ var graphColorsLight = [
   "#0550ae"
   // dark blue
 ];
-var graphColorsDark = [
-  "#7aa2ff",
-  // blue
-  "#b488ff",
-  // purple
-  "#ff8bd3",
-  // pink
-  "#ff7b72",
-  // red
-  "#f5b85b",
-  // orange
-  "#f2cc8f",
-  // amber
-  "#3fb950",
-  // green
-  "#5cc8ff"
-  // cyan
-];
-var graphColors = graphColorsLight;
-function loadTheme() {
-  try {
-    let stored = localStorage.getItem(THEME_STORAGE_KEY);
-    if (stored === "light" || stored === "dark") return stored;
-  } catch {
-  }
-  let media = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
-  return media && media.matches ? "dark" : "light";
-}
-function applyTheme(theme) {
-  document.documentElement.dataset.theme = theme;
-  document.documentElement.style.colorScheme = theme;
-  document.body.style.backgroundColor = theme === "dark" ? darkPalette.bg : lightPalette.bg;
-}
 function App(handle) {
   let store = new AppStore();
   handle.context.set(store);
-  store.setTheme(loadTheme());
-  handle.on(store, {
-    theme: () => handle.update()
-  });
   handle.queueTask(async (signal) => {
     let refs = await fetchRefs(signal);
     store.setRefs(refs);
   });
+  return () => /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: {
+        display: "flex",
+        height: "100vh",
+        background: colors.bg,
+        color: colors.text,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Sidebar, {}),
+        /* @__PURE__ */ jsx(MainPanel, {})
+      ]
+    }
+  );
+}
+function Sidebar(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    refs: () => handle.update(),
+    status: () => handle.update(),
+    view: () => handle.update()
+  });
+  handle.queueTask(async (signal) => {
+    let status = await fetchStatus(signal);
+    store.setStatus(status);
+  });
   return () => {
-    colors = store.theme === "dark" ? darkPalette : lightPalette;
-    graphColors = store.theme === "dark" ? graphColorsDark : graphColorsLight;
+    let totalChanges = store.status ? store.status.staged.length + store.status.unstaged.length : 0;
+    let isStageView = store.view === "stage";
     return /* @__PURE__ */ jsx(
       "div",
       {
         css: {
+          borderRight: `1px solid ${colors.border}`,
           display: "flex",
-          height: "100vh",
-          background: colors.bg,
-          color: colors.text,
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          fontSize: "13px"
+          flexDirection: "column",
+          overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ jsx(Sidebar, {}),
-          /* @__PURE__ */ jsx(MainPanel, {})
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                padding: "12px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                color: colors.textMuted,
+                borderBottom: `1px solid ${colors.border}`
+              },
+              children: "Git Tree Viewer"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "8px 0" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  padding: "6px 12px",
+                  marginBottom: "8px",
+                  borderRadius: "3px",
+                  marginRight: "8px",
+                  marginLeft: "8px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  background: isStageView ? colors.accentDim : "transparent",
+                  color: isStageView ? colors.accent : colors.text,
+                  fontWeight: 600,
+                  userSelect: "none",
+                  "&:hover": {
+                    background: isStageView ? colors.accentDim : colors.bgLighter
+                  }
+                },
+                on: {
+                  click: () => {
+                    store.setFilter("");
+                    store.setView("stage");
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "stage" }),
+                  totalChanges > 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      css: {
+                        background: colors.accent,
+                        color: "#fff",
+                        fontSize: "10px",
+                        padding: "2px 6px",
+                        borderRadius: "10px",
+                        fontWeight: 600
+                      },
+                      children: totalChanges
+                    }
+                  )
+                ]
+              }
+            ),
+            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(),
+                  nodes,
+                  initialExpanded: false
+                },
+                remote
+              ))
+            ] })
+          ] })
         ]
       }
     );
   };
 }
-function Sidebar(handle) {
-  let store = handle.context.get(App);
-  handle.on(store, {
-    refs: () => handle.update()
-  });
-  return () => /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: {
-        borderRight: `1px solid ${colors.border}`,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            css: {
-              padding: "12px",
-              fontWeight: 600,
-              textTransform: "uppercase",
-              letterSpacing: "0.5px",
-              color: colors.textMuted,
-              borderBottom: `1px solid ${colors.border}`
-            },
-            children: "Git Tree Viewer"
-          }
-        ),
-        /* @__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(),
-              nodes,
-              initialExpanded: false
-            },
-            remote
-          ))
-        ] }) })
-      ]
-    }
-  );
-}
 function RefSection(handle) {
   let expanded = null;
   return ({
@@ -1831,7 +1864,7 @@ function RefSection(handle) {
             textTransform: "uppercase",
             letterSpacing: "0.5px",
             color: colors.textMuted,
-            cursor: "pointer",
+            userSelect: "none",
             "&:hover": { color: colors.text }
           },
           on: {
@@ -1867,10 +1900,10 @@ function RefNodeItem(handle) {
             css: {
               padding: `3px 12px`,
               paddingLeft: `${paddingLeft}px`,
-              cursor: "pointer",
               color: colors.textMuted,
               fontSize: "12px",
               whiteSpace: "nowrap",
+              userSelect: "none",
               "&:hover": { color: colors.text }
             },
             on: {
@@ -1897,18 +1930,23 @@ function RefNodeItem(handle) {
         css: {
           padding: `3px 12px`,
           paddingLeft: `${paddingLeft}px`,
-          cursor: "pointer",
           borderRadius: "3px",
           marginRight: "8px",
           background: isSelected ? colors.accentDim : "transparent",
           color: node.current ? colors.accent : colors.text,
           fontWeight: node.current ? 600 : 400,
           whiteSpace: "nowrap",
+          userSelect: "none",
           "&:hover": {
             background: isSelected ? colors.accentDim : colors.bgLighter
           }
         },
-        on: { click: () => store.setFilter(node.fullName) },
+        on: {
+          click: () => {
+            store.setFilter(node.fullName);
+            store.setView("commits");
+          }
+        },
         children: [
           node.current && /* @__PURE__ */ jsx("span", { css: { fontSize: "8px", marginRight: "4px" }, children: "\u25CF" }),
           node.name
@@ -1917,44 +1955,63 @@ function RefNodeItem(handle) {
     );
   };
 }
-function MainPanel() {
-  return () => /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx(CommitList, {}),
-        /* @__PURE__ */ jsx(DiffPanel, {})
-      ]
+function MainPanel(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    view: () => handle.update()
+  });
+  return () => {
+    if (store.view === "stage") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          css: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(StagePanel, {})
+        }
+      );
     }
-  );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx(CommitList, {}),
+          /* @__PURE__ */ jsx(DiffPanel, {})
+        ]
+      }
+    );
+  };
 }
 function CommitList(handle) {
   let store = handle.context.get(App);
   let commits = [];
   let loading = true;
-  async function loadCommits(signal) {
-    loading = true;
-    handle.update();
+  async function doLoadCommits(signal) {
     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();
   }
+  function loadCommits() {
+    loading = true;
+    handle.update(doLoadCommits);
+  }
   handle.on(store, {
-    refs(_, signal) {
-      loadCommits(signal);
-    },
-    filter(_, signal) {
-      loadCommits(signal);
-    }
+    refs: loadCommits,
+    filter: loadCommits
   });
+  handle.queueTask(doLoadCommits);
   return () => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1988,7 +2045,6 @@ function CommitList(handle) {
                 }
               ),
               /* @__PURE__ */ jsx("div", { css: { flex: 1 } }),
-              /* @__PURE__ */ jsx(ThemeToggle, {}),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -2065,68 +2121,6 @@ function CommitList(handle) {
     }
   );
 }
-function ThemeToggle(handle) {
-  let store = handle.context.get(App);
-  handle.on(store, {
-    theme: () => handle.update()
-  });
-  return () => {
-    let isDark = store.theme === "dark";
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        "aria-label": "Toggle theme",
-        title: isDark ? "Switch to light mode" : "Switch to dark mode",
-        css: {
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "6px",
-          padding: "4px 10px",
-          border: `1px solid ${colors.border}`,
-          borderRadius: "999px",
-          background: colors.bg,
-          color: colors.text,
-          fontSize: "12px",
-          cursor: "pointer",
-          "&:hover": {
-            borderColor: colors.accent,
-            background: colors.bgLighter
-          }
-        },
-        on: { click: () => store.setTheme(isDark ? "light" : "dark") },
-        children: [
-          isDark ? /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "14",
-              height: "14",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              "stroke-width": "2",
-              children: /* @__PURE__ */ jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" })
-            }
-          ) : /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "14",
-              height: "14",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              "stroke-width": "2",
-              children: [
-                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
-                /* @__PURE__ */ jsx("path", { d: "M12 2v2m0 16v2m10-10h-2M4 12H2m15.5-7.5-1.5 1.5M8 16l-1.5 1.5M16 16l1.5 1.5M8 8 6.5 6.5" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { children: isDark ? "Dark" : "Light" })
-        ]
-      }
-    );
-  };
-}
 function FilterButton(handle) {
   let store = handle.context.get(App);
   handle.on(store, {
@@ -2144,7 +2138,7 @@ function FilterButton(handle) {
           background: isActive ? colors.accentDim : "transparent",
           color: isActive ? colors.accent : colors.text,
           fontSize: "12px",
-          cursor: "pointer",
+          userSelect: "none",
           "&:hover": { borderColor: colors.accent }
         },
         on: { click: () => store.setFilter(filter) },
@@ -2171,8 +2165,8 @@ function CommitRow(handle) {
       "tr",
       {
         css: {
-          cursor: "pointer",
-          background: isSelected ? colors.accentDim : "transparent"
+          background: isSelected ? colors.accentDim : "transparent",
+          userSelect: "none"
         },
         on: { click: () => store.selectCommit(commit) },
         children: [
@@ -2407,7 +2401,6 @@ function DiffPanel(handle) {
                       background: colors.bg,
                       color: colors.text,
                       fontSize: "12px",
-                      cursor: "pointer",
                       whiteSpace: "nowrap",
                       "&:hover": {
                         background: colors.bgLighter,
@@ -2491,7 +2484,6 @@ function DiffPanel(handle) {
               "section",
               {
                 connect: (node) => diffContentRef = node,
-                class: store.theme === "dark" ? "d2h-dark-color-scheme" : "",
                 css: {
                   "& .d2h-wrapper": { background: "transparent" },
                   "& .d2h-file-header": {
@@ -2503,30 +2495,16 @@ function DiffPanel(handle) {
                     zIndex: 1
                   },
                   "& .d2h-file-name": { color: colors.text },
-                  "& .d2h-code-line": {
-                    padding: "0 8px",
-                    background: colors.bg
-                  },
+                  "& .d2h-code-line": { padding: "0 8px" },
                   "& .d2h-code-line-ctn": { color: colors.text },
-                  "& .d2h-ins": { background: colors.diffAddBg },
-                  "& .d2h-del": { background: colors.diffDelBg },
-                  "& .d2h-ins .d2h-code-line-ctn": {
-                    color: colors.diffAddText
-                  },
-                  "& .d2h-del .d2h-code-line-ctn": {
-                    color: colors.diffDelText
-                  },
+                  "& .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,
-                    background: colors.bgLight,
                     borderRight: `1px solid ${colors.border}`
                   },
-                  "& .d2h-code-line-prefix": { color: colors.textMuted },
-                  "& .d2h-emptyplaceholder": { background: colors.bgLight },
-                  "& .d2h-info": {
-                    background: colors.bgLight,
-                    color: colors.textMuted
-                  },
                   "& .d2h-file-diff": {
                     borderBottom: `1px solid ${colors.border}`
                   },
@@ -2560,7 +2538,7 @@ function FileListItem() {
       {
         css: {
           padding: "6px 12px",
-          cursor: "pointer",
+          userSelect: "none",
           "&:hover": {
             background: colors.bgLighter
           }
@@ -2686,4 +2664,561 @@ function FileListItem() {
     );
   };
 }
+function StagePanel(handle) {
+  let store = handle.context.get(App);
+  let selectedFile = null;
+  let diffHtml = null;
+  let commitMessage = "";
+  let savedMessage = "";
+  let amend = false;
+  let lastCommit = null;
+  let loading = false;
+  async function loadStatus(signal) {
+    let status = await fetchStatus(signal);
+    store.setStatus(status);
+  }
+  async function loadDiff(path, type, signal) {
+    try {
+      let result = type === "unstaged" ? await fetchWorkingDiff(path, signal) : await fetchStagedDiff(path, signal);
+      if (signal.aborted) return;
+      diffHtml = result.diffHtml;
+    } catch {
+      if (signal.aborted) return;
+      diffHtml = "";
+    }
+    handle.update();
+  }
+  async function handleStage(paths) {
+    loading = true;
+    handle.update();
+    await stageFiles(paths);
+    let status = await fetchStatus();
+    store.setStatus(status);
+    if (selectedFile && selectedFile.type === "unstaged" && paths.includes(selectedFile.path)) {
+      selectedFile = { path: selectedFile.path, type: "staged" };
+    }
+    loading = false;
+    handle.update();
+  }
+  async function handleUnstage(paths) {
+    loading = true;
+    handle.update();
+    await unstageFiles(paths);
+    let status = await fetchStatus();
+    store.setStatus(status);
+    if (selectedFile && selectedFile.type === "staged" && paths.includes(selectedFile.path)) {
+      selectedFile = { path: selectedFile.path, type: "unstaged" };
+    }
+    loading = false;
+    handle.update();
+  }
+  async function handleCommit() {
+    if (!commitMessage.trim()) return;
+    loading = true;
+    handle.update();
+    await commitChanges(commitMessage, amend);
+    commitMessage = "";
+    amend = false;
+    lastCommit = null;
+    let status = await fetchStatus();
+    store.setStatus(status);
+    selectedFile = null;
+    diffHtml = null;
+    loading = false;
+    handle.update();
+  }
+  async function toggleAmend(checked) {
+    amend = checked;
+    if (checked) {
+      savedMessage = commitMessage;
+      lastCommit = await fetchLastCommit();
+      commitMessage = lastCommit.subject + (lastCommit.body ? "\n\n" + lastCommit.body : "");
+    } else {
+      commitMessage = savedMessage;
+      lastCommit = null;
+    }
+    handle.update();
+  }
+  handle.on(store, {
+    status: () => handle.update()
+  });
+  handle.queueTask(loadStatus);
+  async function selectFile(path, type, signal) {
+    if (selectedFile?.path === path && selectedFile?.type === type) {
+      return;
+    }
+    selectedFile = { path, type };
+    handle.update();
+    await loadDiff(path, type, signal);
+  }
+  return () => {
+    let staged = store.status?.staged ?? [];
+    let unstaged = store.status?.unstaged ?? [];
+    let displayStaged = staged;
+    if (amend && lastCommit) {
+      let stagedPaths = new Set(staged.map((f) => f.path));
+      let amendFiles = lastCommit.files.filter((f) => !stagedPaths.has(f.path));
+      displayStaged = [...staged, ...amendFiles];
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                flex: "1 1 60%",
+                display: "flex",
+                flexDirection: "column",
+                borderBottom: `1px solid ${colors.border}`,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      padding: "8px 12px",
+                      borderBottom: `1px solid ${colors.border}`,
+                      background: colors.bgLight,
+                      fontSize: "12px",
+                      fontWeight: 600
+                    },
+                    children: selectedFile ? `${selectedFile.type === "unstaged" ? "Unstaged" : "Staged"} changes for ${selectedFile.path}` : "Select a file to view changes"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", background: colors.bg }, children: diffHtml ? /* @__PURE__ */ jsx(
+                  "section",
+                  {
+                    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" }
+                    },
+                    innerHTML: diffHtml
+                  }
+                ) : selectedFile ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      padding: "20px",
+                      textAlign: "center",
+                      color: colors.textMuted
+                    },
+                    children: "Loading diff..."
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      padding: "20px",
+                      textAlign: "center",
+                      color: colors.textMuted
+                    },
+                    children: "Select a file to view its diff"
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                flex: "0 0 300px",
+                display: "flex",
+                gap: "1px",
+                background: colors.border,
+                minHeight: "200px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      background: colors.bg,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            padding: "8px 12px",
+                            borderBottom: `1px solid ${colors.border}`,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px",
+                            color: colors.textMuted,
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsx("span", { children: [
+                            "Unstaged (",
+                            unstaged.length,
+                            ")"
+                          ] })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: [
+                        unstaged.map((file) => /* @__PURE__ */ jsx(
+                          StatusFileItem,
+                          {
+                            file,
+                            isSelected: selectedFile?.path === file.path && selectedFile?.type === "unstaged",
+                            onSelect: (signal) => selectFile(file.path, "unstaged", signal),
+                            onDoubleClick: () => handleStage([file.path])
+                          },
+                          file.path
+                        )),
+                        unstaged.length === 0 && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            css: {
+                              padding: "12px",
+                              color: colors.textMuted,
+                              fontSize: "12px",
+                              textAlign: "center"
+                            },
+                            children: "No unstaged changes"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      background: colors.bg,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            padding: "8px 12px",
+                            borderBottom: `1px solid ${colors.border}`,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px",
+                            color: colors.textMuted
+                          },
+                          children: "Commit Message"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            flex: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            padding: "12px"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "textarea",
+                              {
+                                css: {
+                                  flex: 1,
+                                  resize: "none",
+                                  border: `1px solid ${colors.border}`,
+                                  borderRadius: "4px",
+                                  padding: "8px",
+                                  fontSize: "13px",
+                                  fontFamily: "sf-mono, monospace",
+                                  background: colors.bg,
+                                  color: colors.text,
+                                  "&:focus": {
+                                    outline: "none",
+                                    borderColor: colors.accent
+                                  },
+                                  "&::placeholder": {
+                                    color: colors.textMuted
+                                  }
+                                },
+                                placeholder: "Enter commit message...",
+                                value: commitMessage,
+                                on: {
+                                  input: (e) => {
+                                    commitMessage = e.currentTarget.value;
+                                    handle.update();
+                                  },
+                                  keydown: (e) => {
+                                    if (e.metaKey && e.key === "Enter") {
+                                      e.preventDefault();
+                                      handleCommit();
+                                    }
+                                  }
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                css: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "space-between",
+                                  marginTop: "12px",
+                                  gap: "12px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    "label",
+                                    {
+                                      css: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "6px",
+                                        fontSize: "12px"
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          "input",
+                                          {
+                                            type: "checkbox",
+                                            checked: amend,
+                                            on: {
+                                              change: (e) => toggleAmend(e.currentTarget.checked)
+                                            }
+                                          }
+                                        ),
+                                        "Amend"
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    "button",
+                                    {
+                                      css: {
+                                        padding: "6px 16px",
+                                        border: "none",
+                                        borderRadius: "4px",
+                                        background: displayStaged.length > 0 && commitMessage.trim() ? colors.accent : colors.bgLighter,
+                                        color: displayStaged.length > 0 && commitMessage.trim() ? "#fff" : colors.textMuted,
+                                        fontSize: "12px",
+                                        fontWeight: 600,
+                                        cursor: displayStaged.length > 0 && commitMessage.trim() ? "pointer" : "not-allowed",
+                                        "&:hover": {
+                                          background: displayStaged.length > 0 && commitMessage.trim() ? "#0860ca" : colors.bgLighter
+                                        }
+                                      },
+                                      disabled: displayStaged.length === 0 || !commitMessage.trim() || loading,
+                                      on: { click: handleCommit },
+                                      children: loading ? "..." : "Commit"
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    css: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      background: colors.bg,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          css: {
+                            padding: "8px 12px",
+                            borderBottom: `1px solid ${colors.border}`,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px",
+                            color: colors.textMuted
+                          },
+                          children: [
+                            "Staged (",
+                            displayStaged.length,
+                            ")"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: [
+                        displayStaged.map((file) => /* @__PURE__ */ jsx(
+                          StatusFileItem,
+                          {
+                            file,
+                            isSelected: selectedFile?.path === file.path && selectedFile?.type === "staged",
+                            onSelect: (signal) => selectFile(file.path, "staged", signal),
+                            onDoubleClick: () => handleUnstage([file.path])
+                          },
+                          file.path
+                        )),
+                        displayStaged.length === 0 && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            css: {
+                              padding: "12px",
+                              color: colors.textMuted,
+                              fontSize: "12px",
+                              textAlign: "center"
+                            },
+                            children: "No staged changes"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  };
+}
+function StatusFileItem() {
+  return ({
+    file,
+    isSelected,
+    onSelect,
+    onDoubleClick
+  }) => {
+    let displayName = file.path.split("/").pop() ?? file.path;
+    let statusLabel = {
+      M: "MOD",
+      A: "ADD",
+      D: "DEL",
+      R: "REN",
+      "?": "NEW"
+    }[file.status] ?? file.status;
+    let statusColor = {
+      M: colors.accent,
+      A: colors.green,
+      D: colors.red,
+      R: colors.accent,
+      "?": colors.green
+    }[file.status] ?? colors.textMuted;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          padding: "6px 12px",
+          background: isSelected ? colors.accentDim : "transparent",
+          userSelect: "none",
+          "&:hover": {
+            background: isSelected ? colors.accentDim : colors.bgLighter
+          }
+        },
+        on: {
+          click: (_, signal) => onSelect(signal),
+          dblclick: onDoubleClick
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      fontSize: "9px",
+                      fontWeight: 600,
+                      padding: "2px 4px",
+                      borderRadius: "3px",
+                      background: statusColor,
+                      color: "#fff"
+                    },
+                    children: statusLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      flex: 1,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      fontSize: "12px"
+                    },
+                    title: file.path,
+                    children: displayName
+                  }
+                )
+              ]
+            }
+          ),
+          file.path !== displayName && /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                fontSize: "10px",
+                color: colors.textMuted,
+                marginTop: "2px",
+                marginLeft: "32px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: file.path
+            }
+          )
+        ]
+      }
+    );
+  };
+}
 createRoot(document.body).render(/* @__PURE__ */ jsx(App, {}));