diffstalker 0.1.6 → 0.1.7

package/dist/components/Header.js

@@ -1 +1,107 @@
-import{jsx as n,Fragment as W,jsxs as i}from"react/jsx-runtime";import{Box as d,Text as e}from"ink";import{abbreviateHomePath as p}from"../config.js";export function getHeaderHeight(t,l,s,c,g=null,o=!1){if(!t)return 1;const y=p(t),a=g==="Not a git repository";let r=0;l&&(r=l.current.length,l.tracking&&(r+=3+l.tracking.length),l.ahead>0&&(r+=3+String(l.ahead).length),l.behind>0&&(r+=3+String(l.behind).length));let h=y.length;if(o&&(h+=2),a&&(h+=24),g&&!a&&(h+=g.length+3),s?.enabled&&s.sourceFile){const u=` (follow: ${p(s.sourceFile)})`,f=c-h-r-4;if(u.length>f){const C=c-h-2;if(u.length<=C)return 2}}return 1}function j({branch:t}){return i(d,{children:[n(e,{color:"green",bold:!0,children:t.current}),t.tracking&&i(W,{children:[n(e,{dimColor:!0,children:" \u2192 "}),n(e,{color:"blue",children:t.tracking})]}),(t.ahead>0||t.behind>0)&&i(e,{children:[t.ahead>0&&i(e,{color:"green",children:[" \u2191",t.ahead]}),t.behind>0&&i(e,{color:"red",children:[" \u2193",t.behind]})]})]})}export function Header({repoPath:t,branch:l,isLoading:s,error:c,debug:g,watcherState:o,width:y=80}){if(!t)return i(d,{flexDirection:"column",children:[i(d,{children:[n(e,{dimColor:!0,children:"Waiting for target path..."}),n(e,{dimColor:!0,children:" (write path to ~/.cache/diffstalker/target)"})]}),g&&o&&o.enabled&&o.sourceFile&&i(d,{children:[i(e,{dimColor:!0,children:["[debug] source: ",p(o.sourceFile)]}),o.rawContent&&i(e,{dimColor:!0,children:[' | raw: "',o.rawContent,'"']})]})]});const a=p(t),r=c==="Not a git repository",h=x=>x?x.toLocaleTimeString():"";let m=0;l&&(m=l.current.length,l.tracking&&(m+=3+l.tracking.length),l.ahead>0&&(m+=3+String(l.ahead).length),l.behind>0&&(m+=3+String(l.behind).length));let u=a.length;s&&(u+=2),r&&(u+=24),c&&!r&&(u+=c.length+3);let f=null,C=!1;if(o?.enabled&&o.sourceFile){const F=` (follow: ${p(o.sourceFile)})`,k=y-u-m-4;if(F.length<=k)f=F;else{const v=y-u-2;F.length<=v&&(f=F,C=!0)}}return i(d,{flexDirection:"column",width:y,children:[C?i(W,{children:[n(d,{justifyContent:"space-between",children:i(d,{children:[n(e,{bold:!0,color:"cyan",children:a}),s&&n(e,{color:"yellow",children:" \u27F3"}),r&&n(e,{color:"yellow",children:" (not a git repository)"}),c&&!r&&i(e,{color:"red",children:[" (",c,")"]}),f&&n(e,{dimColor:!0,children:f})]})}),n(d,{justifyContent:"flex-end",children:l&&n(j,{branch:l})})]}):i(d,{justifyContent:"space-between",children:[i(d,{children:[n(e,{bold:!0,color:"cyan",children:a}),s&&n(e,{color:"yellow",children:" \u27F3"}),r&&n(e,{color:"yellow",children:" (not a git repository)"}),c&&!r&&i(e,{color:"red",children:[" (",c,")"]}),f&&n(e,{dimColor:!0,children:f})]}),l&&n(j,{branch:l})]}),g&&o&&o.enabled&&o.sourceFile&&i(d,{children:[i(e,{dimColor:!0,children:["[debug] source: ",p(o.sourceFile)]}),i(e,{dimColor:!0,children:[' | raw: "',o.rawContent,'"']}),o.lastUpdate&&i(e,{dimColor:!0,children:[" | updated: ",h(o.lastUpdate)]})]})]})}
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { abbreviateHomePath } from '../config.js';
+/**
+ * Calculate the header height based on whether content needs to wrap.
+ * Returns 1 for single line, 2 if branch wraps to second line.
+ */
+export function getHeaderHeight(repoPath, branch, watcherState, width, error = null, isLoading = false) {
+    if (!repoPath)
+        return 1;
+    const displayPath = abbreviateHomePath(repoPath);
+    const isNotGitRepo = error === 'Not a git repository';
+    // Calculate branch width
+    let branchWidth = 0;
+    if (branch) {
+        branchWidth = branch.current.length;
+        if (branch.tracking)
+            branchWidth += 3 + branch.tracking.length;
+        if (branch.ahead > 0)
+            branchWidth += 3 + String(branch.ahead).length;
+        if (branch.behind > 0)
+            branchWidth += 3 + String(branch.behind).length;
+    }
+    // Calculate left side width
+    let leftWidth = displayPath.length;
+    if (isLoading)
+        leftWidth += 2;
+    if (isNotGitRepo)
+        leftWidth += 24;
+    if (error && !isNotGitRepo)
+        leftWidth += error.length + 3;
+    // Check if follow indicator causes wrap
+    if (watcherState?.enabled && watcherState.sourceFile) {
+        const followPath = abbreviateHomePath(watcherState.sourceFile);
+        const fullFollow = ` (follow: ${followPath})`;
+        const availableOneLine = width - leftWidth - branchWidth - 4;
+        if (fullFollow.length > availableOneLine) {
+            // Would need to wrap
+            const availableWithWrap = width - leftWidth - 2;
+            if (fullFollow.length <= availableWithWrap) {
+                return 2; // Branch wraps to second line
+            }
+        }
+    }
+    return 1;
+}
+function BranchDisplay({ branch }) {
+    return (_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: branch.current }), branch.tracking && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " \u2192 " }), _jsx(Text, { color: "blue", children: branch.tracking })] })), (branch.ahead > 0 || branch.behind > 0) && (_jsxs(Text, { children: [branch.ahead > 0 && _jsxs(Text, { color: "green", children: [" \u2191", branch.ahead] }), branch.behind > 0 && _jsxs(Text, { color: "red", children: [" \u2193", branch.behind] })] }))] }));
+}
+export function Header({ repoPath, branch, isLoading, error, debug, watcherState, width = 80, }) {
+    if (!repoPath) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Waiting for target path..." }), _jsx(Text, { dimColor: true, children: " (write path to ~/.cache/diffstalker/target)" })] }), debug && watcherState && watcherState.enabled && watcherState.sourceFile && (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ["[debug] source: ", abbreviateHomePath(watcherState.sourceFile)] }), watcherState.rawContent && _jsxs(Text, { dimColor: true, children: [" | raw: \"", watcherState.rawContent, "\""] })] }))] }));
+    }
+    const displayPath = abbreviateHomePath(repoPath);
+    const isNotGitRepo = error === 'Not a git repository';
+    const formatTime = (date) => {
+        if (!date)
+            return '';
+        return date.toLocaleTimeString();
+    };
+    // Calculate branch info width for layout
+    let branchWidth = 0;
+    if (branch) {
+        branchWidth = branch.current.length;
+        if (branch.tracking) {
+            branchWidth += 3 + branch.tracking.length; // " → tracking"
+        }
+        if (branch.ahead > 0)
+            branchWidth += 3 + String(branch.ahead).length;
+        if (branch.behind > 0)
+            branchWidth += 3 + String(branch.behind).length;
+    }
+    // Calculate left side content width (without follow)
+    let leftWidth = displayPath.length;
+    if (isLoading)
+        leftWidth += 2;
+    if (isNotGitRepo)
+        leftWidth += 24;
+    if (error && !isNotGitRepo)
+        leftWidth += error.length + 3;
+    // Determine follow indicator display and layout
+    let followText = null;
+    let wrapBranch = false;
+    if (watcherState?.enabled && watcherState.sourceFile) {
+        const followPath = abbreviateHomePath(watcherState.sourceFile);
+        const fullFollow = ` (follow: ${followPath})`;
+        const availableOneLine = width - leftWidth - branchWidth - 4; // 4 for spacing
+        if (fullFollow.length <= availableOneLine) {
+            // Everything fits on one line
+            followText = fullFollow;
+        }
+        else {
+            // Need to wrap branch to second line
+            const availableWithWrap = width - leftWidth - 2;
+            if (fullFollow.length <= availableWithWrap) {
+                followText = fullFollow;
+                wrapBranch = true;
+            }
+            // If it doesn't fit, don't show follow at all
+        }
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [wrapBranch ? (
+            // Two-line layout: path + follow on first line, branch on second
+            _jsxs(_Fragment, { children: [_jsx(Box, { justifyContent: "space-between", children: _jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: displayPath }), isLoading && _jsx(Text, { color: "yellow", children: " \u27F3" }), isNotGitRepo && _jsx(Text, { color: "yellow", children: " (not a git repository)" }), error && !isNotGitRepo && _jsxs(Text, { color: "red", children: [" (", error, ")"] }), followText && _jsx(Text, { dimColor: true, children: followText })] }) }), _jsx(Box, { justifyContent: "flex-end", children: branch && _jsx(BranchDisplay, { branch: branch }) })] })) : (
+            // Single-line layout
+            _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: displayPath }), isLoading && _jsx(Text, { color: "yellow", children: " \u27F3" }), isNotGitRepo && _jsx(Text, { color: "yellow", children: " (not a git repository)" }), error && !isNotGitRepo && _jsxs(Text, { color: "red", children: [" (", error, ")"] }), followText && _jsx(Text, { dimColor: true, children: followText })] }), branch && _jsx(BranchDisplay, { branch: branch })] })), debug && watcherState && watcherState.enabled && watcherState.sourceFile && (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ["[debug] source: ", abbreviateHomePath(watcherState.sourceFile)] }), _jsxs(Text, { dimColor: true, children: [" | raw: \"", watcherState.rawContent, "\""] }), watcherState.lastUpdate && (_jsxs(Text, { dimColor: true, children: [" | updated: ", formatTime(watcherState.lastUpdate)] }))] }))] }));
+}

package/dist/components/HistoryView.js

@@ -1 +1,21 @@
-import{jsx as e,jsxs as i,Fragment as d}from"react/jsx-runtime";import{Box as u,Text as r}from"ink";import{ScrollableList as C}from"./ScrollableList.js";import{formatDate as w}from"../utils/formatDate.js";import{formatCommitDisplay as H}from"../utils/commitFormat.js";export{getCommitIndexFromRow,getHistoryTotalRows,getHistoryRowOffset}from"../utils/rowCalculations.js";export function HistoryView({commits:s,selectedIndex:m,scrollOffset:a,maxHeight:c,isActive:h,width:f,onSelectCommit:S}){return s.length===0?e(u,{children:e(r,{dimColor:!0,children:"No commits yet"})}):e(C,{items:s,maxHeight:c,scrollOffset:a,getKey:t=>t.hash,renderItem:(t,g)=>{const o=g===m&&h,n=w(t.date),p=11+n.length+2,x=f-p,{displayMessage:y,displayRefs:l}=H(t.message,t.refs,x);return i(d,{children:[e(r,{color:"yellow",children:t.shortHash}),e(r,{children:" "}),e(r,{color:o?"cyan":void 0,bold:o,inverse:o,children:y}),e(r,{children:" "}),i(r,{dimColor:!0,children:["(",n,")"]}),l&&i(d,{children:[e(r,{children:" "}),e(r,{color:"green",children:l})]})]})}})}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ScrollableList } from './ScrollableList.js';
+import { formatDate } from '../utils/formatDate.js';
+import { formatCommitDisplay } from '../utils/commitFormat.js';
+// Re-export from utils for backwards compatibility
+export { getCommitIndexFromRow, getHistoryTotalRows, getHistoryRowOffset, } from '../utils/rowCalculations.js';
+export function HistoryView({ commits, selectedIndex, scrollOffset, maxHeight, isActive, width, onSelectCommit: _onSelectCommit, }) {
+    if (commits.length === 0) {
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "No commits yet" }) }));
+    }
+    return (_jsx(ScrollableList, { items: commits, maxHeight: maxHeight, scrollOffset: scrollOffset, getKey: (commit) => commit.hash, renderItem: (commit, actualIndex) => {
+            const isSelected = actualIndex === selectedIndex && isActive;
+            const dateStr = formatDate(commit.date);
+            // Fixed parts: hash(7) + spaces(4) + date + parens(2)
+            const baseWidth = 7 + 4 + dateStr.length + 2;
+            const remainingWidth = width - baseWidth;
+            const { displayMessage, displayRefs } = formatCommitDisplay(commit.message, commit.refs, remainingWidth);
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: commit.shortHash }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, inverse: isSelected, children: displayMessage }), _jsx(Text, { children: " " }), _jsxs(Text, { dimColor: true, children: ["(", dateStr, ")"] }), displayRefs && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "green", children: displayRefs })] }))] }));
+        } }));
+}

package/dist/components/HotkeysModal.js

@@ -1 +1,108 @@
-import{jsx as t,jsxs as c}from"react/jsx-runtime";import{Box as i,Text as s,useInput as C}from"ink";import{Modal as b,centerModal as M}from"./Modal.js";const r=[{title:"Navigation",entries:[{key:"\u2191/k",description:"Move up"},{key:"\u2193/j",description:"Move down"},{key:"Tab",description:"Toggle pane focus"}]},{title:"Staging",entries:[{key:"^S",description:"Stage file"},{key:"^U",description:"Unstage file"},{key:"^A",description:"Stage all"},{key:"^Z",description:"Unstage all"},{key:"Space/Enter",description:"Toggle stage"}]},{title:"Actions",entries:[{key:"c",description:"Open commit panel"},{key:"r",description:"Refresh"},{key:"q",description:"Quit"}]},{title:"Pane Resize",entries:[{key:"[",description:"Shrink top pane"},{key:"]",description:"Grow top pane"}]},{title:"Tabs",entries:[{key:"1",description:"Diff view"},{key:"2",description:"Commit panel"},{key:"3",description:"History view"},{key:"4",description:"Compare view"},{key:"a",description:"Toggle auto-tab mode"}]},{title:"Other",entries:[{key:"m",description:"Toggle scroll/select mode"},{key:"f",description:"Toggle follow mode"},{key:"w",description:"Toggle wrap mode"},{key:"t",description:"Theme picker"},{key:"b",description:"Base branch picker"},{key:"u",description:"Toggle uncommitted"},{key:"?",description:"This help"}]}];export function HotkeysModal({onClose:T,width:h,height:y}){C((e,o)=>{(o.escape||o.return||e==="?")&&T()});const m=h>=90,l=m?38:30,d=Math.min(m?82:40,h-4);let p;if(m){const e=Math.ceil(r.length/2),o=r.slice(0,e),n=r.slice(e),a=o.reduce((g,k)=>g+k.entries.length+2,0),w=n.reduce((g,k)=>g+k.entries.length+2,0);p=Math.min(Math.max(a,w)+5,y-4)}else{const e=r.reduce((o,n)=>o+n.entries.length+2,0)+4;p=Math.min(e,y-4)}const{x:f,y:x}=M(d,p,h,y),u=(e,o)=>c(i,{flexDirection:"column",marginBottom:1,children:[t(s,{bold:!0,dimColor:!0,children:e.title}),e.entries.map(n=>c(i,{children:[t(i,{width:13,children:t(s,{color:"cyan",children:n.key})}),t(i,{width:o-13,children:t(s,{children:n.description})})]},n.key))]},e.title);if(m){const e=Math.ceil(r.length/2),o=r.slice(0,e),n=r.slice(e);return t(b,{x:f,y:x,width:d,height:p,children:c(i,{borderStyle:"round",borderColor:"cyan",flexDirection:"column",width:d,children:[t(i,{justifyContent:"center",marginBottom:1,children:c(s,{bold:!0,color:"cyan",children:[" ","Keyboard Shortcuts"," "]})}),c(i,{children:[t(i,{flexDirection:"column",width:l,marginRight:2,children:o.map(a=>u(a,l))}),t(i,{flexDirection:"column",width:l,children:n.map(a=>u(a,l))})]}),t(i,{marginTop:1,justifyContent:"center",children:t(s,{dimColor:!0,children:"Press Esc, Enter, or ? to close"})})]})})}return t(b,{x:f,y:x,width:d,height:p,children:c(i,{borderStyle:"round",borderColor:"cyan",flexDirection:"column",width:d,children:[t(i,{justifyContent:"center",marginBottom:1,children:c(s,{bold:!0,color:"cyan",children:[" ","Keyboard Shortcuts"," "]})}),r.map(e=>u(e,l)),t(i,{marginTop:1,justifyContent:"center",children:t(s,{dimColor:!0,children:"Press Esc, Enter, or ? to close"})})]})})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { Modal, centerModal } from './Modal.js';
+const hotkeyGroups = [
+    {
+        title: 'Navigation',
+        entries: [
+            { key: '↑/k', description: 'Move up' },
+            { key: '↓/j', description: 'Move down' },
+            { key: 'Tab', description: 'Toggle pane focus' },
+        ],
+    },
+    {
+        title: 'Staging',
+        entries: [
+            { key: '^S', description: 'Stage file' },
+            { key: '^U', description: 'Unstage file' },
+            { key: '^A', description: 'Stage all' },
+            { key: '^Z', description: 'Unstage all' },
+            { key: 'Space/Enter', description: 'Toggle stage' },
+        ],
+    },
+    {
+        title: 'Actions',
+        entries: [
+            { key: 'c', description: 'Open commit panel' },
+            { key: 'r', description: 'Refresh' },
+            { key: 'q', description: 'Quit' },
+        ],
+    },
+    {
+        title: 'Pane Resize',
+        entries: [
+            { key: '[', description: 'Shrink top pane' },
+            { key: ']', description: 'Grow top pane' },
+        ],
+    },
+    {
+        title: 'Tabs',
+        entries: [
+            { key: '1', description: 'Diff view' },
+            { key: '2', description: 'Commit panel' },
+            { key: '3', description: 'History view' },
+            { key: '4', description: 'Compare view' },
+            { key: '5', description: 'Explorer view' },
+            { key: 'a', description: 'Toggle auto-tab mode' },
+        ],
+    },
+    {
+        title: 'Explorer',
+        entries: [
+            { key: '.', description: 'Toggle middle-dots' },
+            { key: '^H', description: 'Toggle hidden files' },
+            { key: '^G', description: 'Toggle gitignored' },
+            { key: 'Enter', description: 'Enter directory' },
+            { key: 'Backspace/h', description: 'Go up' },
+        ],
+    },
+    {
+        title: 'Other',
+        entries: [
+            { key: 'm', description: 'Toggle scroll/select' },
+            { key: 'f', description: 'Toggle follow mode' },
+            { key: 'w', description: 'Toggle wrap mode' },
+            { key: 't', description: 'Theme picker' },
+            { key: 'b', description: 'Base branch picker' },
+            { key: 'u', description: 'Toggle uncommitted' },
+            { key: '?', description: 'This help' },
+        ],
+    },
+];
+export function HotkeysModal({ onClose, width, height }) {
+    useInput((input, key) => {
+        if (key.escape || key.return || input === '?') {
+            onClose();
+        }
+    });
+    // Determine if we should use 2 columns (need at least 90 chars width)
+    const useTwoColumns = width >= 90;
+    const columnWidth = useTwoColumns ? 38 : 30;
+    const boxWidth = useTwoColumns ? Math.min(82, width - 4) : Math.min(40, width - 4);
+    // Calculate height based on layout
+    let boxHeight;
+    if (useTwoColumns) {
+        // Split groups into two columns
+        const midpoint = Math.ceil(hotkeyGroups.length / 2);
+        const leftGroups = hotkeyGroups.slice(0, midpoint);
+        const rightGroups = hotkeyGroups.slice(midpoint);
+        const leftLines = leftGroups.reduce((sum, g) => sum + g.entries.length + 2, 0);
+        const rightLines = rightGroups.reduce((sum, g) => sum + g.entries.length + 2, 0);
+        boxHeight = Math.min(Math.max(leftLines, rightLines) + 5, height - 4);
+    }
+    else {
+        const totalLines = hotkeyGroups.reduce((sum, g) => sum + g.entries.length + 2, 0) + 4;
+        boxHeight = Math.min(totalLines, height - 4);
+    }
+    // Center the modal
+    const { x, y } = centerModal(boxWidth, boxHeight, width, height);
+    // Render a single group
+    const renderGroup = (group, colWidth) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: group.title }), group.entries.map((entry) => (_jsxs(Box, { children: [_jsx(Box, { width: 13, children: _jsx(Text, { color: "cyan", children: entry.key }) }), _jsx(Box, { width: colWidth - 13, children: _jsx(Text, { children: entry.description }) })] }, entry.key)))] }, group.title));
+    if (useTwoColumns) {
+        const midpoint = Math.ceil(hotkeyGroups.length / 2);
+        const leftGroups = hotkeyGroups.slice(0, midpoint);
+        const rightGroups = hotkeyGroups.slice(midpoint);
+        return (_jsx(Modal, { x: x, y: y, width: boxWidth, height: boxHeight, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", width: boxWidth, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: [' ', "Keyboard Shortcuts", ' '] }) }), _jsxs(Box, { children: [_jsx(Box, { flexDirection: "column", width: columnWidth, marginRight: 2, children: leftGroups.map((g) => renderGroup(g, columnWidth)) }), _jsx(Box, { flexDirection: "column", width: columnWidth, children: rightGroups.map((g) => renderGroup(g, columnWidth)) })] }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "Press Esc, Enter, or ? to close" }) })] }) }));
+    }
+    return (_jsx(Modal, { x: x, y: y, width: boxWidth, height: boxHeight, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", width: boxWidth, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: [' ', "Keyboard Shortcuts", ' '] }) }), hotkeyGroups.map((group) => renderGroup(group, columnWidth)), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "Press Esc, Enter, or ? to close" }) })] }) }));
+}

package/dist/components/Modal.js

@@ -1 +1,19 @@
-import{jsx as e,jsxs as c}from"react/jsx-runtime";import{Box as i,Text as x}from"ink";export function Modal({x:o,y:r,width:n,height:t,children:l}){const a=" ".repeat(n);return c(i,{position:"absolute",marginLeft:o,marginTop:r,flexDirection:"column",children:[Array.from({length:t}).map((f,s)=>e(x,{children:a},`blank-${s}`)),e(i,{position:"absolute",flexDirection:"column",children:l})]})}export function centerModal(o,r,n,t){return{x:Math.floor((n-o)/2),y:Math.floor((t-r)/2)}}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * A modal overlay that blankets only its own area before rendering children.
+ * Use this to create popups that cover the content behind them.
+ */
+export function Modal({ x, y, width, height, children }) {
+    const blankLine = ' '.repeat(width);
+    return (_jsxs(Box, { position: "absolute", marginLeft: x, marginTop: y, flexDirection: "column", children: [Array.from({ length: height }).map((_, i) => (_jsx(Text, { children: blankLine }, `blank-${i}`))), _jsx(Box, { position: "absolute", flexDirection: "column", children: children })] }));
+}
+/**
+ * Helper to calculate centered modal position.
+ */
+export function centerModal(modalWidth, modalHeight, screenWidth, screenHeight) {
+    return {
+        x: Math.floor((screenWidth - modalWidth) / 2),
+        y: Math.floor((screenHeight - modalHeight) / 2),
+    };
+}

package/dist/components/ScrollableList.js

@@ -1 +1,125 @@
-import{jsxs as s,jsx as f}from"react/jsx-runtime";import{useMemo as C}from"react";import{Box as R,Text as w}from"ink";export function ScrollableList({items:e,renderItem:u,maxHeight:i,scrollOffset:o,getKey:n,header:r,showIndicators:m=!0,getItemHeight:x}){const d=!!x,{itemRowStarts:S,totalRows:g}=C(()=>{if(!d)return{itemRowStarts:[],totalRows:e.length};const a=[];let t=0;for(let l=0;l<e.length;l++)a.push(t),t+=x(e[l],l);return{itemRowStarts:a,totalRows:t}},[e,x,d]);let h=i;r&&h--;const j=o>0,p=(d?g:e.length)>i;m&&p&&(h-=2),h=Math.max(1,h);const v=[];let c=0,M=0,b=0;if(d){let a=0;for(let t=0;t<e.length;t++){const l=x(e[t],t);if(S[t]+l>o){a=t;break}}for(let t=a;t<e.length&&c<h;t++){const l=x(e[t],t);v.push({item:e[t],index:t}),c+=l}M=o,b=Math.max(0,g-o-c)}else{const a=Math.min(o+h,e.length);for(let t=o;t<a;t++)v.push({item:e[t],index:t}),c++;M=o,b=Math.max(0,e.length-o-c)}return s(R,{flexDirection:"column",overflowX:"hidden",height:i,overflow:"hidden",children:[r,m&&p&&(j?s(w,{dimColor:!0,children:["\u2191 ",M," more above"]}):f(w,{children:" "})),v.map(({item:a,index:t})=>f(R,{children:u(a,t)},`${o}-${t}-${n(a,t)}`)),m&&p&&(b>0?s(w,{dimColor:!0,children:["\u2193 ",b," more below"]}):f(w,{children:" "}))]})}export function getMaxScrollOffset(e,u,i=!1,o=!0){let n=u;return i&&n--,o&&e>n&&(n-=2),n=Math.max(1,n),Math.max(0,e-n)}export function getVisibleItemCount(e,u,i,o=!1,n=!0){let r=u;return o&&r--,n&&(i>0&&r--,e>i+r&&r--),r=Math.max(1,r),Math.min(r,e-i)}
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+/**
+ * A generic scrollable list component that properly handles:
+ * - Scroll indicators (↑/↓) taking up space
+ * - Consistent height calculations
+ * - Proper React keys for re-rendering
+ *
+ * Usage:
+ * ```tsx
+ * <ScrollableList
+ *   items={myItems}
+ *   renderItem={(item, i) => <MyRow item={item} />}
+ *   maxHeight={20}
+ *   scrollOffset={offset}
+ *   getKey={(item, i) => item.id}
+ * />
+ * ```
+ */
+export function ScrollableList({ items, renderItem, maxHeight, scrollOffset, getKey, header, showIndicators = true, getItemHeight, }) {
+    // If getItemHeight is not provided, use simple item-based scrolling
+    const hasVariableHeight = !!getItemHeight;
+    // Calculate cumulative row positions for variable height items
+    const { itemRowStarts, totalRows } = useMemo(() => {
+        if (!hasVariableHeight) {
+            return { itemRowStarts: [], totalRows: items.length };
+        }
+        const starts = [];
+        let cumulative = 0;
+        for (let i = 0; i < items.length; i++) {
+            starts.push(cumulative);
+            cumulative += getItemHeight(items[i], i);
+        }
+        return { itemRowStarts: starts, totalRows: cumulative };
+    }, [items, getItemHeight, hasVariableHeight]);
+    // Calculate available space for actual content
+    let availableHeight = maxHeight;
+    // Reserve space for header if present
+    if (header) {
+        availableHeight--;
+    }
+    const hasPrevious = scrollOffset > 0;
+    const contentTotal = hasVariableHeight ? totalRows : items.length;
+    const needsScrolling = contentTotal > maxHeight;
+    // Simple rule: if content needs scrolling, ALWAYS reserve 2 rows for indicators
+    // No clever predictions - just consistent, predictable behavior
+    if (showIndicators && needsScrolling) {
+        availableHeight -= 2;
+    }
+    // Ensure we have at least 1 line for content
+    availableHeight = Math.max(1, availableHeight);
+    // Find visible items based on scroll offset (in rows)
+    const visibleItems = [];
+    let usedRows = 0;
+    let rowsAbove = 0;
+    let rowsBelow = 0;
+    if (hasVariableHeight) {
+        // Find first visible item (the one that contains scrollOffset row)
+        let startIdx = 0;
+        for (let i = 0; i < items.length; i++) {
+            const itemHeight = getItemHeight(items[i], i);
+            if (itemRowStarts[i] + itemHeight > scrollOffset) {
+                startIdx = i;
+                break;
+            }
+        }
+        // Collect items that fit in available height
+        for (let i = startIdx; i < items.length && usedRows < availableHeight; i++) {
+            const itemHeight = getItemHeight(items[i], i);
+            visibleItems.push({ item: items[i], index: i });
+            usedRows += itemHeight;
+        }
+        rowsAbove = scrollOffset;
+        // Simple calculation: total rows minus what we've scrolled past minus what we're showing
+        rowsBelow = Math.max(0, totalRows - scrollOffset - usedRows);
+    }
+    else {
+        // Simple item-based scrolling (1 item = 1 row)
+        const endIdx = Math.min(scrollOffset + availableHeight, items.length);
+        for (let i = scrollOffset; i < endIdx; i++) {
+            visibleItems.push({ item: items[i], index: i });
+            usedRows++;
+        }
+        rowsAbove = scrollOffset;
+        rowsBelow = Math.max(0, items.length - scrollOffset - usedRows);
+    }
+    return (_jsxs(Box, { flexDirection: "column", overflowX: "hidden", height: maxHeight, overflow: "hidden", children: [header, showIndicators &&
+                needsScrolling &&
+                (hasPrevious ? _jsxs(Text, { dimColor: true, children: ["\u2191 ", rowsAbove, " more above"] }) : _jsx(Text, { children: " " })), visibleItems.map(({ item, index }) => (_jsx(Box, { children: renderItem(item, index) }, `${scrollOffset}-${index}-${getKey(item, index)}`))), showIndicators &&
+                needsScrolling &&
+                (rowsBelow > 0 ? _jsxs(Text, { dimColor: true, children: ["\u2193 ", rowsBelow, " more below"] }) : _jsx(Text, { children: " " }))] }));
+}
+/**
+ * Calculate the maximum scroll offset for a list.
+ */
+export function getMaxScrollOffset(totalItems, maxHeight, hasHeader = false, showIndicators = true) {
+    let availableHeight = maxHeight;
+    if (hasHeader)
+        availableHeight--;
+    // When scrolled, we always show "↑ above" indicator
+    // and usually "↓ below" indicator, so subtract 2
+    if (showIndicators && totalItems > availableHeight) {
+        availableHeight -= 2;
+    }
+    availableHeight = Math.max(1, availableHeight);
+    return Math.max(0, totalItems - availableHeight);
+}
+/**
+ * Calculate visible item count for a given configuration.
+ * Useful for scroll calculations in parent components.
+ */
+export function getVisibleItemCount(totalItems, maxHeight, scrollOffset, hasHeader = false, showIndicators = true) {
+    let availableHeight = maxHeight;
+    if (hasHeader)
+        availableHeight--;
+    if (showIndicators) {
+        if (scrollOffset > 0)
+            availableHeight--;
+        if (totalItems > scrollOffset + availableHeight)
+            availableHeight--;
+    }
+    availableHeight = Math.max(1, availableHeight);
+    return Math.min(availableHeight, totalItems - scrollOffset);
+}

package/dist/components/ThemePicker.js

@@ -1 +1,42 @@
-import{jsx as o,jsxs as c}from"react/jsx-runtime";import{useState as y}from"react";import{Box as l,Text as r,useInput as w}from"ink";import{themes as j,themeOrder as t,getTheme as S}from"../themes.js";import{Modal as T,centerModal as v}from"./Modal.js";function M({theme:h}){const{colors:e}=h;return c(l,{flexDirection:"column",marginLeft:2,children:[c(l,{children:[o(r,{backgroundColor:e.delBg,color:e.delLineNum,children:"  5 "}),o(r,{backgroundColor:e.delBg,color:e.delSymbol,bold:!0,children:"- "}),o(r,{backgroundColor:e.delBg,color:e.text,children:"const "}),o(r,{backgroundColor:e.delHighlight,color:e.text,children:"old"}),o(r,{backgroundColor:e.delBg,color:e.text,children:" = value;"})]}),c(l,{children:[o(r,{backgroundColor:e.addBg,color:e.addLineNum,children:"  5 "}),o(r,{backgroundColor:e.addBg,color:e.addSymbol,bold:!0,children:"+ "}),o(r,{backgroundColor:e.addBg,color:e.text,children:"const "}),o(r,{backgroundColor:e.addHighlight,color:e.text,children:"new"}),o(r,{backgroundColor:e.addBg,color:e.text,children:" = value;"})]})]})}export function ThemePicker({currentTheme:h,onSelect:e,onCancel:f,width:m,height:g}){const[a,x]=y(()=>{const n=t.indexOf(h);return n>=0?n:0}),C=S(t[a]);w((n,d)=>{d.escape?f():d.return?e(t[a]):d.upArrow||n==="k"?x(i=>Math.max(0,i-1)):(d.downArrow||n==="j")&&x(i=>Math.min(t.length-1,i+1))});const s=Math.min(50,m-4),b=Math.min(t.length+10,g-4),{x:p,y:B}=v(s,b,m,g);return o(T,{x:p,y:B,width:s,height:b,children:c(l,{borderStyle:"round",borderColor:"cyan",flexDirection:"column",width:s,children:[o(l,{justifyContent:"center",marginBottom:1,children:c(r,{bold:!0,color:"cyan",children:[" ","Select Theme"," "]})}),t.map((n,d)=>{const i=j[n],u=d===a,k=n===h;return c(l,{children:[o(r,{color:u?"cyan":void 0,children:u?"\u25B8 ":"  "}),o(r,{bold:u,color:u?"cyan":void 0,children:i.displayName}),k&&o(r,{dimColor:!0,children:" (current)"})]},n)}),c(l,{marginTop:1,flexDirection:"column",children:[o(r,{dimColor:!0,children:"Preview:"}),o(M,{theme:C})]}),o(l,{marginTop:1,justifyContent:"center",children:o(r,{dimColor:!0,children:"\u2191\u2193 navigate \u2022 Enter select \u2022 Esc cancel"})})]})})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { themes, themeOrder, getTheme } from '../themes.js';
+import { Modal, centerModal } from './Modal.js';
+// Preview sample for theme visualization
+function ThemePreview({ theme }) {
+    const { colors } = theme;
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.delBg, color: colors.delLineNum, children: '  5 ' }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.delSymbol, bold: true, children: '- ' }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.text, children: 'const ' }), _jsx(Text, { backgroundColor: colors.delHighlight, color: colors.text, children: 'old' }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.text, children: ' = value;' })] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.addBg, color: colors.addLineNum, children: '  5 ' }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.addSymbol, bold: true, children: '+ ' }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.text, children: 'const ' }), _jsx(Text, { backgroundColor: colors.addHighlight, color: colors.text, children: 'new' }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.text, children: ' = value;' })] })] }));
+}
+export function ThemePicker({ currentTheme, onSelect, onCancel, width, height, }) {
+    const [selectedIndex, setSelectedIndex] = useState(() => {
+        const idx = themeOrder.indexOf(currentTheme);
+        return idx >= 0 ? idx : 0;
+    });
+    const previewTheme = getTheme(themeOrder[selectedIndex]);
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+        }
+        else if (key.return) {
+            onSelect(themeOrder[selectedIndex]);
+        }
+        else if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => Math.min(themeOrder.length - 1, prev + 1));
+        }
+    });
+    // Calculate box dimensions
+    const boxWidth = Math.min(50, width - 4);
+    const boxHeight = Math.min(themeOrder.length + 10, height - 4); // +10 for header, preview, footer, borders
+    // Center the modal
+    const { x, y } = centerModal(boxWidth, boxHeight, width, height);
+    return (_jsx(Modal, { x: x, y: y, width: boxWidth, height: boxHeight, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", width: boxWidth, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: [' ', "Select Theme", ' '] }) }), themeOrder.map((themeName, index) => {
+                    const theme = themes[themeName];
+                    const isSelected = index === selectedIndex;
+                    const isCurrent = themeName === currentTheme;
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▸ ' : '  ' }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : undefined, children: theme.displayName }), isCurrent && _jsx(Text, { dimColor: true, children: " (current)" })] }, themeName));
+                }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Preview:" }), _jsx(ThemePreview, { theme: previewTheme })] }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u2022 Enter select \u2022 Esc cancel" }) })] }) }));
+}

package/dist/components/TopPane.js

@@ -1 +1,14 @@
-import{jsx as e,jsxs as o,Fragment as s}from"react/jsx-runtime";import G from"react";import{Box as n,Text as i}from"ink";import{FileList as X}from"./FileList.js";import{HistoryView as b}from"./HistoryView.js";import{CompareListView as z}from"./CompareListView.js";import{ExplorerView as H,buildBreadcrumbs as N}from"./ExplorerView.js";import{categorizeFiles as Y}from"../utils/fileCategories.js";export function TopPane({bottomTab:d,currentPane:l,terminalWidth:c,topPaneHeight:t,files:h,selectedIndex:g,fileListScrollOffset:C,stagedCount:w,onStage:y,onUnstage:a,commits:u,historySelectedIndex:A,historyScrollOffset:O,onSelectHistoryCommit:p,compareDiff:r,compareListSelection:v,compareScrollOffset:F,includeUncommitted:f,explorerCurrentPath:m="",explorerItems:I=[],explorerSelectedIndex:E=0,explorerScrollOffset:R=0,explorerIsLoading:j=!1,explorerError:L=null}){const{modified:S,untracked:k}=Y(h),B=S.length,M=k.length;return o(n,{flexDirection:"column",height:t,width:c,overflowX:"hidden",overflowY:"hidden",children:[(d==="diff"||d==="commit")&&o(s,{children:[o(n,{children:[e(i,{bold:!0,color:l==="files"?"cyan":void 0,children:"STAGING AREA"}),o(i,{dimColor:!0,children:[" ","(",B," modified, ",M," untracked, ",w," staged)"]})]}),e(X,{files:h,selectedIndex:g,isFocused:l==="files",scrollOffset:C,maxHeight:t-1,width:c,onStage:y,onUnstage:a})]}),d==="history"&&o(s,{children:[o(n,{children:[e(i,{bold:!0,color:l==="history"?"cyan":void 0,children:"COMMITS"}),o(i,{dimColor:!0,children:[" (",u.length," commits)"]})]}),e(b,{commits:u,selectedIndex:A,scrollOffset:O,maxHeight:t-1,isActive:l==="history",width:c,onSelectCommit:p})]}),d==="compare"&&o(s,{children:[o(n,{children:[e(i,{bold:!0,color:l==="compare"?"cyan":void 0,children:"COMPARE"}),e(i,{dimColor:!0,children:" (vs "}),e(i,{color:"cyan",children:r?.baseBranch??"..."}),o(i,{dimColor:!0,children:[": ",r?.commits.length??0," commits, ",r?.files.length??0," files) (b)"]}),r&&r.uncommittedCount>0&&o(s,{children:[e(i,{dimColor:!0,children:" | "}),o(i,{color:f?"magenta":"yellow",children:["[",f?"x":" ","] uncommitted"]}),e(i,{dimColor:!0,children:" (u)"})]})]}),e(z,{commits:r?.commits??[],files:r?.files??[],selectedItem:v,scrollOffset:F,maxHeight:t-1,isActive:l==="compare",width:c})]}),d==="explorer"&&o(s,{children:[o(n,{children:[e(i,{bold:!0,color:l==="explorer"?"cyan":void 0,children:"EXPLORER"}),e(i,{dimColor:!0,children:" "}),N(m).map((V,x,_)=>o(G.Fragment,{children:[e(i,{color:"blue",children:V}),x<_.length-1&&e(i,{dimColor:!0,children:" / "})]},x)),m&&e(i,{dimColor:!0,children:" /"}),!m&&e(i,{dimColor:!0,children:"(root)"})]}),e(H,{currentPath:m,items:I,selectedIndex:E,scrollOffset:R,maxHeight:t-1,isActive:l==="explorer",width:c,isLoading:j,error:L})]})]})}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+import { FileList } from './FileList.js';
+import { HistoryView } from './HistoryView.js';
+import { CompareListView } from './CompareListView.js';
+import { ExplorerView, buildBreadcrumbs } from './ExplorerView.js';
+import { categorizeFiles } from '../utils/fileCategories.js';
+export function TopPane({ bottomTab, currentPane, terminalWidth, topPaneHeight, files, selectedIndex, fileListScrollOffset, stagedCount, onStage, onUnstage, commits, historySelectedIndex, historyScrollOffset, onSelectHistoryCommit, compareDiff, compareListSelection, compareScrollOffset, includeUncommitted, explorerCurrentPath = '', explorerItems = [], explorerSelectedIndex = 0, explorerScrollOffset = 0, explorerIsLoading = false, explorerError = null, hideHiddenFiles = true, hideGitignored = true, }) {
+    const { modified, untracked } = categorizeFiles(files);
+    const modifiedCount = modified.length;
+    const untrackedCount = untracked.length;
+    return (_jsxs(Box, { flexDirection: "column", height: topPaneHeight, width: terminalWidth, overflowX: "hidden", overflowY: "hidden", children: [(bottomTab === 'diff' || bottomTab === 'commit') && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'files' ? 'cyan' : undefined, children: "STAGING AREA" }), _jsxs(Text, { dimColor: true, children: [' ', "(", modifiedCount, " modified, ", untrackedCount, " untracked, ", stagedCount, " staged)"] })] }), _jsx(FileList, { files: files, selectedIndex: selectedIndex, isFocused: currentPane === 'files', scrollOffset: fileListScrollOffset, maxHeight: topPaneHeight - 1, width: terminalWidth, onStage: onStage, onUnstage: onUnstage })] })), bottomTab === 'history' && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'history' ? 'cyan' : undefined, children: "COMMITS" }), _jsxs(Text, { dimColor: true, children: [" (", commits.length, " commits)"] })] }), _jsx(HistoryView, { commits: commits, selectedIndex: historySelectedIndex, scrollOffset: historyScrollOffset, maxHeight: topPaneHeight - 1, isActive: currentPane === 'history', width: terminalWidth, onSelectCommit: onSelectHistoryCommit })] })), bottomTab === 'compare' && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'compare' ? 'cyan' : undefined, children: "COMPARE" }), _jsx(Text, { dimColor: true, children: " (vs " }), _jsx(Text, { color: "cyan", children: compareDiff?.baseBranch ?? '...' }), _jsxs(Text, { dimColor: true, children: [": ", compareDiff?.commits.length ?? 0, " commits, ", compareDiff?.files.length ?? 0, " files) (b)"] }), compareDiff && compareDiff.uncommittedCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: includeUncommitted ? 'magenta' : 'yellow', children: ["[", includeUncommitted ? 'x' : ' ', "] uncommitted"] }), _jsx(Text, { dimColor: true, children: " (u)" })] }))] }), _jsx(CompareListView, { commits: compareDiff?.commits ?? [], files: compareDiff?.files ?? [], selectedItem: compareListSelection, scrollOffset: compareScrollOffset, maxHeight: topPaneHeight - 1, isActive: currentPane === 'compare', width: terminalWidth })] })), bottomTab === 'explorer' && (_jsxs(_Fragment, { children: [_jsxs(Box, { justifyContent: "space-between", width: terminalWidth, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'explorer' ? 'cyan' : undefined, children: "EXPLORER" }), _jsx(Text, { dimColor: true, children: " " }), buildBreadcrumbs(explorerCurrentPath).map((segment, i, arr) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: "blue", children: segment }), i < arr.length - 1 && _jsx(Text, { dimColor: true, children: " / " })] }, i))), explorerCurrentPath && _jsx(Text, { dimColor: true, children: " /" }), !explorerCurrentPath && _jsx(Text, { dimColor: true, children: "(root)" })] }), _jsx(Box, { children: (hideHiddenFiles || hideGitignored) && (_jsxs(Text, { dimColor: true, children: [hideHiddenFiles && 'H', hideGitignored && 'G'] })) })] }), _jsx(ExplorerView, { currentPath: explorerCurrentPath, items: explorerItems, selectedIndex: explorerSelectedIndex, scrollOffset: explorerScrollOffset, maxHeight: topPaneHeight - 1, isActive: currentPane === 'explorer', width: terminalWidth, isLoading: explorerIsLoading, error: explorerError })] }))] }));
+}

package/dist/components/UnifiedDiffView.js

@@ -1 +1,115 @@
-import{jsxs as f,jsx as e}from"react/jsx-runtime";import{useMemo as N}from"react";import{Box as m,Text as o}from"ink";import{getTheme as D}from"../themes.js";import{ScrollableList as I}from"./ScrollableList.js";import{getDisplayRowsLineNumWidth as j}from"../utils/displayRows.js";function l(n,r){return r<=0||n.length<=r?n:r<=1?"\u2026":n.slice(0,r-1)+"\u2026"}function b(n,r){return n===void 0?" ".repeat(r):String(n).padStart(r," ")}function T({row:n,lineNumWidth:r,width:g,theme:C,wrapMode:u}){const{colors:c}=C,h=g-r-5,s=g-2;switch(n.type){case"diff-header":{const t=n.content;if(t.startsWith("diff --git")){const i=t.match(/diff --git a\/.+ b\/(.+)$/);if(i){const a=s-6,d=l(i[1],a);return f(o,{color:"cyan",bold:!0,children:["\u2500\u2500 ",d," \u2500\u2500"]})}}return e(o,{dimColor:!0,children:l(t,s)})}case"diff-hunk":{const t=n.content.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/);if(t){const i=parseInt(t[1],10),a=t[2]?parseInt(t[2],10):1,d=parseInt(t[3],10),p=t[4]?parseInt(t[4],10):1,x=t[5].trim(),k=i+a-1,B=d+p-1,S=a===1?`${i}`:`${i}-${k}`,R=p===1?`${d}`:`${d}-${B}`,y=`Lines ${S} \u2192 ${R}`,L=s-y.length-1,$=x&&L>3?" "+l(x,L):"";return f(m,{children:[e(o,{color:"cyan",dimColor:!0,children:y}),$&&e(o,{color:"gray",children:$})]})}return e(o,{color:"cyan",dimColor:!0,children:l(n.content,s)})}case"diff-add":{const t=n.isContinuation,i=t?"\xBB":"+",d=" "+(u?n.content||"":l(n.content,h)||"")||" ";return f(m,{children:[e(o,{backgroundColor:c.addBg,color:c.addLineNum,children:b(n.lineNum,r)+" "}),e(o,{backgroundColor:c.addBg,color:t?c.addLineNum:c.addSymbol,bold:!t,children:i}),e(o,{backgroundColor:c.addBg,color:c.text,children:d})]})}case"diff-del":{const t=n.isContinuation,i=t?"\xBB":"-",d=" "+(u?n.content||"":l(n.content,h)||"")||" ";return f(m,{children:[e(o,{backgroundColor:c.delBg,color:c.delLineNum,children:b(n.lineNum,r)+" "}),e(o,{backgroundColor:c.delBg,color:t?c.delLineNum:c.delSymbol,bold:!t,children:i}),e(o,{backgroundColor:c.delBg,color:c.text,children:d})]})}case"diff-context":{const i=n.isContinuation?"\xBB ":"  ",a=u?n.content:l(n.content,h);return f(m,{children:[f(o,{color:c.contextLineNum,children:[b(n.lineNum,r)," "]}),e(o,{dimColor:!0,children:i}),e(o,{children:a})]})}case"commit-header":return e(o,{color:"yellow",children:l(n.content,s)});case"commit-message":return e(o,{children:l(n.content,s)});case"spacer":return e(o,{children:" "})}}export function UnifiedDiffView({rows:n,maxHeight:r,scrollOffset:g,theme:C,width:u,wrapMode:c=!1}){const h=N(()=>D(C),[C]),s=N(()=>j(n),[n]);return n.length===0?e(m,{paddingX:1,children:e(o,{dimColor:!0,children:"No diff to display"})}):e(m,{flexDirection:"column",paddingX:1,width:u,children:e(I,{items:n,maxHeight:r,scrollOffset:g,getKey:(t,i)=>`row-${i}`,renderItem:t=>e(T,{row:t,lineNumWidth:s,width:u,theme:h,wrapMode:c})})})}export function getUnifiedDiffTotalRows(n){return n.length}
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { getTheme } from '../themes.js';
+import { ScrollableList } from './ScrollableList.js';
+import { getDisplayRowsLineNumWidth } from '../utils/displayRows.js';
+// Truncate string to fit within maxWidth, adding ellipsis if needed
+function truncate(str, maxWidth) {
+    if (maxWidth <= 0 || str.length <= maxWidth)
+        return str;
+    if (maxWidth <= 1)
+        return '\u2026';
+    return str.slice(0, maxWidth - 1) + '\u2026';
+}
+// Format line number with padding
+function formatLineNum(lineNum, width) {
+    if (lineNum === undefined)
+        return ' '.repeat(width);
+    return String(lineNum).padStart(width, ' ');
+}
+function DisplayRowRenderer({ row, lineNumWidth, width, theme, wrapMode, }) {
+    const { colors } = theme;
+    // Available width for content: width - paddingX(1) - lineNum - space(1) - symbol(1) - space(1) - paddingX(1)
+    const contentWidth = width - lineNumWidth - 5;
+    // Width for headers (just subtract paddingX on each side)
+    const headerWidth = width - 2;
+    switch (row.type) {
+        case 'diff-header': {
+            // Extract file path from diff --git and show as clean separator
+            const content = row.content;
+            if (content.startsWith('diff --git')) {
+                const match = content.match(/diff --git a\/.+ b\/(.+)$/);
+                if (match) {
+                    const maxPathLen = headerWidth - 6; // "── " + " ──"
+                    const path = truncate(match[1], maxPathLen);
+                    return (_jsxs(Text, { color: "cyan", bold: true, children: ["\u2500\u2500 ", path, " \u2500\u2500"] }));
+                }
+            }
+            return _jsx(Text, { dimColor: true, children: truncate(content, headerWidth) });
+        }
+        case 'diff-hunk': {
+            // Parse hunk header: @@ -oldStart,oldCount +newStart,newCount @@ context
+            const match = row.content.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/);
+            if (match) {
+                const oldStart = parseInt(match[1], 10);
+                const oldCount = match[2] ? parseInt(match[2], 10) : 1;
+                const newStart = parseInt(match[3], 10);
+                const newCount = match[4] ? parseInt(match[4], 10) : 1;
+                const context = match[5].trim();
+                const oldEnd = oldStart + oldCount - 1;
+                const newEnd = newStart + newCount - 1;
+                const oldRange = oldCount === 1 ? `${oldStart}` : `${oldStart}-${oldEnd}`;
+                const newRange = newCount === 1 ? `${newStart}` : `${newStart}-${newEnd}`;
+                const rangeText = `Lines ${oldRange} \u2192 ${newRange}`;
+                const contextMaxLen = headerWidth - rangeText.length - 1;
+                const truncatedContext = context && contextMaxLen > 3 ? ' ' + truncate(context, contextMaxLen) : '';
+                return (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", dimColor: true, children: rangeText }), truncatedContext && _jsx(Text, { color: "gray", children: truncatedContext })] }));
+            }
+            return (_jsx(Text, { color: "cyan", dimColor: true, children: truncate(row.content, headerWidth) }));
+        }
+        case 'diff-add': {
+            const isCont = row.isContinuation;
+            // Use » for continuation - it's single-width and renders background correctly
+            const symbol = isCont ? '\u00bb' : '+';
+            const rawContent = wrapMode ? row.content || '' : truncate(row.content, contentWidth) || '';
+            // Always prepend space to content
+            const content = ' ' + rawContent || ' ';
+            return (_jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.addBg, color: colors.addLineNum, children: formatLineNum(row.lineNum, lineNumWidth) + ' ' }), _jsx(Text, { backgroundColor: colors.addBg, color: isCont ? colors.addLineNum : colors.addSymbol, bold: !isCont, children: symbol }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.text, children: content })] }));
+        }
+        case 'diff-del': {
+            const isCont = row.isContinuation;
+            // Use » for continuation - it's single-width and renders background correctly
+            const symbol = isCont ? '\u00bb' : '-';
+            const rawContent = wrapMode ? row.content || '' : truncate(row.content, contentWidth) || '';
+            // Always prepend space to content
+            const content = ' ' + rawContent || ' ';
+            return (_jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.delBg, color: colors.delLineNum, children: formatLineNum(row.lineNum, lineNumWidth) + ' ' }), _jsx(Text, { backgroundColor: colors.delBg, color: isCont ? colors.delLineNum : colors.delSymbol, bold: !isCont, children: symbol }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.text, children: content })] }));
+        }
+        case 'diff-context': {
+            const isCont = row.isContinuation;
+            // Use » for continuation - it's single-width and renders correctly
+            const symbol = isCont ? '\u00bb ' : '  ';
+            const content = wrapMode ? row.content : truncate(row.content, contentWidth);
+            return (_jsxs(Box, { children: [_jsxs(Text, { color: colors.contextLineNum, children: [formatLineNum(row.lineNum, lineNumWidth), " "] }), _jsx(Text, { dimColor: true, children: symbol }), _jsx(Text, { children: content })] }));
+        }
+        case 'commit-header':
+            return _jsx(Text, { color: "yellow", children: truncate(row.content, headerWidth) });
+        case 'commit-message':
+            return _jsx(Text, { children: truncate(row.content, headerWidth) });
+        case 'spacer':
+            return _jsx(Text, { children: " " });
+    }
+}
+/**
+ * The ONE diff renderer used by all tabs.
+ * Every row = exactly 1 terminal row.
+ * No variable heights, no complexity.
+ */
+export function UnifiedDiffView({ rows, maxHeight, scrollOffset, theme: themeName, width, wrapMode = false, }) {
+    const theme = useMemo(() => getTheme(themeName), [themeName]);
+    const lineNumWidth = useMemo(() => getDisplayRowsLineNumWidth(rows), [rows]);
+    if (rows.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "No diff to display" }) }));
+    }
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, width: width, children: _jsx(ScrollableList, { items: rows, maxHeight: maxHeight, scrollOffset: scrollOffset, getKey: (_, i) => `row-${i}`, 
+            // NO getItemHeight - all rows are 1 line
+            renderItem: (row) => (_jsx(DisplayRowRenderer, { row: row, lineNumWidth: lineNumWidth, width: width, theme: theme, wrapMode: wrapMode })) }) }));
+}
+/**
+ * Get total row count for scroll calculation.
+ * Since every row = 1 terminal row, this is just rows.length.
+ */
+export function getUnifiedDiffTotalRows(rows) {
+    return rows.length;
+}