git-trace 0.1.0

package/dist/index.js

@@ -0,0 +1,845 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useEffect, memo } from 'react';
+
+// Default AI detection patterns — browser-safe, no Node.js dependencies
+const DEFAULT_PATTERNS = {
+    emails: [
+        'noreply@cursor.sh',
+        'claude@anthropic.com',
+        'bot@github.com',
+        'copilot',
+        'cursor'
+    ],
+    messages: [
+        'Co-Authored-By: Claude',
+        'Co-Authored-By: Cursor',
+        'Generated-by:',
+        '[skip-human-review]',
+        'AI-generated'
+    ]
+};
+
+// Shared utilities for git adapters — parse diffs, detect AI authors, format dates
+// Compile string arrays to lowercase Sets for fast O(1) lookup
+function compilePatterns(patterns) {
+    return {
+        emails: new Set(patterns.emails.map((p)=>p.toLowerCase())),
+        messages: new Set(patterns.messages.map((p)=>p.toLowerCase()))
+    };
+}
+// Cached compiled defaults
+compilePatterns(DEFAULT_PATTERNS);
+// Escape HTML to prevent XSS attacks
+function escapeHtml(unsafe) {
+    return unsafe.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+}
+
+// 2026 preset themes — modern, accessible, trend-aligned color schemes
+const themes = {
+    // Dark theme (default) — classic developer dark mode
+    dark: {
+        bg: '#09090b',
+        fg: '#e4e4e7',
+        dim: '#71717a',
+        human: '#22c55e',
+        ai: '#a855f7',
+        add: 'rgba(34, 102, 68, 0.25)',
+        remove: 'rgba(185, 28, 28, 0.2)',
+        border: '#27272a',
+        borderSubtle: '#18181b'
+    },
+    // Light theme — clean, minimal
+    light: {
+        bg: '#ffffff',
+        fg: '#18181b',
+        dim: '#71717a',
+        human: '#16a34a',
+        ai: '#9333ea',
+        add: 'rgba(22, 163, 74, 0.15)',
+        remove: 'rgba(220, 38, 38, 0.12)',
+        border: '#e4e4e7',
+        borderSubtle: '#f4f4f5'
+    },
+    // Midnight — deep blue-black, cyberpunk adjacent
+    midnight: {
+        bg: '#030712',
+        fg: '#e2e8f0',
+        dim: '#64748b',
+        human: '#06b6d4',
+        ai: '#f472b6',
+        add: 'rgba(6, 182, 212, 0.2)',
+        remove: 'rgba(244, 114, 182, 0.15)',
+        border: '#1e293b',
+        borderSubtle: '#0f172a'
+    },
+    // Cyber — neon accents on near-black
+    cyber: {
+        bg: '#050505',
+        fg: '#f0f0f0',
+        dim: '#6b6b6b',
+        human: '#00ff9f',
+        ai: '#ff00ff',
+        add: 'rgba(0, 255, 159, 0.2)',
+        remove: 'rgba(255, 0, 255, 0.15)',
+        border: '#2a2a2a',
+        borderSubtle: '#0a0a0a'
+    },
+    // Forest — nature-inspired greens
+    forest: {
+        bg: '#0a1208',
+        fg: '#d4e5d4',
+        dim: '#5a6a5a',
+        human: '#4ade80',
+        ai: '#2dd4bf',
+        add: 'rgba(74, 222, 128, 0.2)',
+        remove: 'rgba(248, 113, 113, 0.15)',
+        border: '#1a2a1a',
+        borderSubtle: '#0a180a'
+    },
+    // Sunset — warm tones, easy on eyes
+    sunset: {
+        bg: '#0f0808',
+        fg: '#f5e6e6',
+        dim: '#7a5a5a',
+        human: '#fb923c',
+        ai: '#f43f5e',
+        add: 'rgba(251, 146, 60, 0.2)',
+        remove: 'rgba(244, 63, 94, 0.15)',
+        border: '#2a1a1a',
+        borderSubtle: '#1a0a0a'
+    }
+};
+// Generate CSS variables from theme colors
+function themeToVars(theme) {
+    return {
+        '--trace-bg': theme.bg,
+        '--trace-fg': theme.fg,
+        '--trace-dim': theme.dim,
+        '--trace-human': theme.human,
+        '--trace-ai': theme.ai,
+        '--trace-add': theme.add,
+        '--trace-remove': theme.remove,
+        '--trace-border': theme.border,
+        '--trace-border-subtle': theme.borderSubtle
+    };
+}
+
+const styles = `
+.trace-root {
+  --trace-bg: #09090b;
+  --trace-fg: #e4e4e7;
+  --trace-dim: #71717a;
+  --trace-human: #22c55e;
+  --trace-ai: #a855f7;
+  --trace-add: rgba(34, 102, 68, 0.2);
+  --trace-remove: rgba(185, 28, 28, 0.2);
+  --trace-border: #27272a;
+  --trace-border-subtle: #18181b;
+  --trace-font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+  --trace-line-height: 1.6;
+  --trace-radius: 0;
+  --trace-duration: 0.18s;
+  --trace-stagger: 35ms;
+  display: block;
+  font-family: var(--trace-font-code);
+  background: var(--trace-bg);
+  color: var(--trace-fg);
+  border-radius: var(--trace-radius);
+  overflow: hidden;
+  font-size: 13px;
+}
+.trace-container {
+  display: flex;
+  height: 100%;
+  min-height: 420px;
+}
+.trace-timeline {
+  width: 240px;
+  border-right: 1px solid var(--trace-border-subtle);
+  padding: 0;
+  overflow-y: auto;
+  flex-shrink: 0;
+  position: relative;
+  background: var(--trace-bg);
+  /* Performance: isolate layout and paint */
+  contain: layout style paint;
+  will-change: scroll-position;
+}
+.trace-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--trace-commit-color, var(--trace-human));
+  opacity: 0.6;
+  pointer-events: none;
+  transition: height 0.25s ease-out;
+}
+.trace-commit {
+  position: relative;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+  border-left: 2px solid transparent;
+}
+.trace-commit:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+.trace-commit.active {
+  background: rgba(255, 255, 255, 0.03);
+  border-left-color: var(--trace-commit-color, var(--trace-human));
+}
+.trace-commit-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.trace-commit-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--trace-commit-color, var(--trace-human));
+  flex-shrink: 0;
+}
+.trace-commit-message {
+  font-size: 12px;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  color: var(--trace-fg);
+}
+.trace-commit-meta {
+  font-size: 11px;
+  color: var(--trace-dim);
+  margin-top: 4px;
+  padding-left: 14px;
+}
+.trace-badge {
+  font-size: 10px;
+  color: var(--trace-dim);
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: -0.02em;
+}
+.trace-diff {
+  flex: 1;
+  padding: 0;
+  overflow-y: auto;
+  font-size: 13px;
+  line-height: var(--trace-line-height);
+  background: var(--trace-bg);
+  /* Performance: isolate layout and paint */
+  contain: layout style paint;
+  will-change: scroll-position;
+}
+.trace-diff-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--trace-border-subtle);
+  background: var(--trace-bg);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.trace-diff-header-message {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--trace-fg);
+  margin-bottom: 4px;
+}
+.trace-diff-header-meta {
+  font-size: 11px;
+  color: var(--trace-dim);
+}
+.trace-line {
+  padding: 1px 16px;
+  /* 2026: content-visibility for lazy rendering off-screen lines */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 22px;
+  min-height: 22px;
+  display: flex;
+  align-items: flex-start;
+  /* Performance: isolate layout changes */
+  contain: layout style paint;
+}
+.trace-line-prefix {
+  width: 16px;
+  flex-shrink: 0;
+  color: var(--trace-dim);
+  opacity: 0.5;
+  font-size: 11px;
+  user-select: none;
+  text-align: center;
+}
+.trace-line-content {
+  flex: 1;
+  white-space: pre;
+  overflow-x: auto;
+}
+@keyframes trace-line-in {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.trace-line.add {
+  background: var(--trace-add);
+  color: #86efac;
+}
+.trace-line.add .trace-line-prefix {
+  color: #22c55e;
+}
+.trace-line.remove {
+  background: var(--trace-remove);
+  color: #fca5a5;
+}
+.trace-line.remove .trace-line-prefix {
+  color: #ef4444;
+}
+.trace-line.ctx {
+  opacity: 0.5;
+}
+.trace-controls {
+  display: flex;
+  gap: 4px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--trace-border-subtle);
+  align-items: center;
+  background: var(--trace-bg);
+}
+.trace-btn {
+  background: transparent;
+  border: 1px solid var(--trace-border);
+  color: var(--trace-fg);
+  padding: 4px 10px;
+  border-radius: var(--trace-radius);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  font-family: inherit;
+}
+.trace-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--trace-dim);
+}
+.trace-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.trace-info {
+  font-size: 11px;
+  color: var(--trace-dim);
+  margin-left: auto;
+}
+.trace-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  color: var(--trace-dim);
+}
+.trace-filter-bar {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--trace-border-subtle);
+  align-items: center;
+  background: var(--trace-bg);
+  flex-wrap: wrap;
+}
+.trace-filter-input {
+  flex: 1;
+  min-width: 140px;
+  background: transparent;
+  border: 1px solid var(--trace-border);
+  color: var(--trace-fg);
+  padding: 6px 10px;
+  border-radius: var(--trace-radius);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.12s ease;
+}
+.trace-filter-input:focus {
+  border-color: var(--trace-dim);
+}
+.trace-filter-input::placeholder {
+  color: var(--trace-dim);
+}
+.trace-filter-group {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.trace-filter-btn {
+  background: transparent;
+  border: 1px solid var(--trace-border);
+  color: var(--trace-dim);
+  padding: 4px 10px;
+  border-radius: var(--trace-radius);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  font-family: inherit;
+}
+.trace-filter-btn:hover {
+  color: var(--trace-fg);
+  border-color: var(--trace-dim);
+}
+.trace-filter-btn.active {
+  background: rgba(168, 85, 247, 0.15);
+  color: var(--trace-ai);
+  border-color: var(--trace-ai);
+}
+.trace-filter-btn.active[data-filter="human"] {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--trace-human);
+  border-color: var(--trace-human);
+}
+.trace-filter-clear {
+  background: transparent;
+  border: none;
+  color: var(--trace-dim);
+  padding: 4px 8px;
+  border-radius: var(--trace-radius);
+  font-size: 11px;
+  cursor: pointer;
+  transition: color 0.12s ease;
+  font-family: inherit;
+}
+.trace-filter-clear:hover {
+  color: var(--trace-fg);
+}
+.trace-filter-stats {
+  font-size: 11px;
+  color: var(--trace-dim);
+  margin-left: auto;
+}
+`;
+// Line prefix lookup - constant outside render
+const LINE_PREFIX = {
+    add: '+',
+    remove: '-',
+    ctx: ' '
+};
+const STYLE_ID = 'trace-styles';
+// Filter bar component with search and filters
+const FilterBar = /*#__PURE__*/ memo(function FilterBar({ filter, onFilterChange, totalCount, filteredCount }) {
+    const authorType = filter.authorType ?? 'all';
+    const setAuthorType = (type)=>{
+        onFilterChange({
+            ...filter,
+            authorType: type === authorType ? 'all' : type
+        });
+    };
+    const setSearch = (search)=>{
+        onFilterChange({
+            ...filter,
+            search: search || undefined
+        });
+    };
+    const clearFilter = ()=>{
+        onFilterChange({});
+    };
+    const hasActiveFilter = filter.search || filter.authorType && filter.authorType !== 'all';
+    return /*#__PURE__*/ jsxs("div", {
+        className: "trace-filter-bar",
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                type: "text",
+                className: "trace-filter-input",
+                placeholder: "Search commits...",
+                value: filter.search ?? '',
+                onChange: (e)=>setSearch(e.target.value),
+                "aria-label": "Search commits"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "trace-filter-group",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: `trace-filter-btn ${authorType === 'ai' ? 'active' : ''}`,
+                        "data-filter": "ai",
+                        onClick: ()=>setAuthorType('ai'),
+                        "aria-label": "Filter by AI commits",
+                        children: "AI"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: `trace-filter-btn ${authorType === 'human' ? 'active' : ''}`,
+                        "data-filter": "human",
+                        onClick: ()=>setAuthorType('human'),
+                        "aria-label": "Filter by Human commits",
+                        children: "Human"
+                    })
+                ]
+            }),
+            hasActiveFilter && /*#__PURE__*/ jsx("button", {
+                className: "trace-filter-clear",
+                onClick: clearFilter,
+                "aria-label": "Clear filters",
+                children: "clear"
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: "trace-filter-stats",
+                children: [
+                    filteredCount,
+                    " / ",
+                    totalCount
+                ]
+            })
+        ]
+    });
+});
+// Memoized line component - only re-renders when line content changes
+const DiffLine = /*#__PURE__*/ memo(function DiffLine({ line, prefix }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: `trace-line ${line.type}`,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "trace-line-prefix",
+                children: prefix
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "trace-line-content",
+                dangerouslySetInnerHTML: {
+                    __html: escapeHtml(line.content)
+                }
+            })
+        ]
+    });
+});
+// Memoized commit item - only re-renders when active state or commit changes
+const CommitItem = /*#__PURE__*/ memo(function CommitItem({ commit, index, isActive, onClick }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: `trace-commit ${isActive ? 'active' : ''}`,
+        style: {
+            '--trace-commit-color': commit.authorType === 'ai' ? 'var(--trace-ai)' : 'var(--trace-human)'
+        },
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "trace-commit-header",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "trace-commit-dot",
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "trace-commit-message",
+                        children: commit.message
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: `trace-badge ${commit.authorType}`,
+                        "aria-label": `Author type: ${commit.authorType}`,
+                        children: commit.authorType
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "trace-commit-meta",
+                children: [
+                    commit.author,
+                    " · ",
+                    commit.time
+                ]
+            })
+        ]
+    });
+});
+// Memoized diff content - only re-renders when active commit changes
+const DiffContent = /*#__PURE__*/ memo(function DiffContent({ commit, activeIndex, linePrefix }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "trace-diff-header",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "trace-diff-header-message",
+                        children: commit.message
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "trace-diff-header-meta",
+                        children: [
+                            commit.hash,
+                            " · ",
+                            commit.author
+                        ]
+                    })
+                ]
+            }),
+            commit.lines.map((line, index)=>/*#__PURE__*/ jsx(DiffLine, {
+                    line: line,
+                    prefix: linePrefix[line.type] || ' '
+                }, `${activeIndex}-${index}-${line.type}`))
+        ]
+    });
+});
+function injectStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = styles;
+    document.head.appendChild(style);
+}
+function Trace({ commits = [], autoPlay = false, interval = 2000, onCommit, className = '', theme = 'dark', filterable = false, defaultFilter = {}, onFilterChange }) {
+    const themeVars = themeToVars(themes[theme]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [filter, setFilter] = useState(defaultFilter);
+    const intervalRef = useRef(undefined);
+    const commitsRef = useRef(commits);
+    const onCommitRef = useRef(onCommit);
+    // Filter commits based on filter options
+    const filteredCommits = useMemo(()=>{
+        let result = commits;
+        if (filter.search) {
+            const searchLower = filter.search.toLowerCase();
+            result = result.filter((c)=>c.message.toLowerCase().includes(searchLower) || c.author.toLowerCase().includes(searchLower) || c.hash.toLowerCase().includes(searchLower));
+        }
+        if (filter.authorType && filter.authorType !== 'all') {
+            result = result.filter((c)=>c.authorType === filter.authorType);
+        }
+        return result;
+    }, [
+        commits,
+        filter
+    ]);
+    // Handle filter change
+    const handleFilterChange = useCallback((newFilter)=>{
+        setFilter(newFilter);
+        setActiveIndex(0);
+        setIsPlaying(false);
+        onFilterChange?.(newFilter);
+    }, [
+        onFilterChange
+    ]);
+    useEffect(()=>{
+        injectStyles();
+    }, []);
+    useEffect(()=>{
+        commitsRef.current = commits;
+        onCommitRef.current = onCommit;
+    }, [
+        commits,
+        onCommit
+    ]);
+    useEffect(()=>{
+        if (!isPlaying) {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = undefined;
+            }
+            return;
+        }
+        intervalRef.current = window.setInterval(()=>{
+            setActiveIndex((i)=>{
+                const next = i + 1;
+                const maxIndex = filteredCommits.length - 1;
+                if (next >= maxIndex) {
+                    setIsPlaying(false);
+                    return maxIndex;
+                }
+                return next;
+            });
+        }, interval);
+        return ()=>{
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [
+        isPlaying,
+        interval,
+        filteredCommits.length
+    ]);
+    useEffect(()=>{
+        if (filteredCommits[activeIndex]) {
+            onCommitRef.current?.(filteredCommits[activeIndex]);
+        }
+    }, [
+        activeIndex,
+        filteredCommits
+    ]);
+    // Helper to navigate with View Transitions API (2026: native smooth transitions)
+    const navigateToIndex = useCallback((newIndex)=>{
+        const setActive = ()=>setActiveIndex(newIndex);
+        // Use View Transitions API for smooth native transitions (Chrome 111+)
+        // Disabled for performance - can be enabled via prop if needed
+        // if (document.startViewTransition) {
+        //   try {
+        //     document.startViewTransition(setActive)
+        //   } catch (err: unknown) {
+        //     setActive()
+        //     console.error('View transition failed:', err)
+        //   }
+        // } else {
+        setActive();
+    // }
+    }, []);
+    const handlePrev = useCallback(()=>{
+        navigateToIndex(Math.max(0, activeIndex - 1));
+    }, [
+        activeIndex,
+        navigateToIndex
+    ]);
+    const handleNext = useCallback(()=>{
+        navigateToIndex(Math.min(filteredCommits.length - 1, activeIndex + 1));
+    }, [
+        activeIndex,
+        navigateToIndex,
+        filteredCommits.length
+    ]);
+    const togglePlay = useCallback(()=>{
+        setIsPlaying((v)=>!v);
+    }, []);
+    // Keyboard navigation handler
+    const handleKeyDown = useCallback((e)=>{
+        switch(e.key){
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                e.preventDefault();
+                handlePrev();
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                e.preventDefault();
+                handleNext();
+                break;
+            case ' ':
+                e.preventDefault();
+                togglePlay();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                navigateToIndex(0);
+                setIsPlaying(false);
+                break;
+            case 'Home':
+                e.preventDefault();
+                navigateToIndex(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                navigateToIndex(filteredCommits.length - 1);
+                break;
+        }
+    }, [
+        handlePrev,
+        handleNext,
+        togglePlay,
+        navigateToIndex,
+        filteredCommits.length
+    ]);
+    if (commits.length === 0) {
+        return /*#__PURE__*/ jsx("div", {
+            className: `trace-root ${className}`,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "trace-empty",
+                children: "no commits to display"
+            })
+        });
+    }
+    if (filteredCommits.length === 0) {
+        return /*#__PURE__*/ jsx("div", {
+            className: `trace-root ${className}`,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "trace-empty",
+                children: "no commits match your filter"
+            })
+        });
+    }
+    const activeCommit = filteredCommits[activeIndex];
+    const progressHeight = filteredCommits.length > 0 ? (activeIndex + 1) / filteredCommits.length * 100 : 0;
+    // Guard against out-of-bounds activeIndex (can happen with rapid navigation)
+    if (!activeCommit) {
+        return /*#__PURE__*/ jsx("div", {
+            className: `trace-root ${className}`,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "trace-empty",
+                children: "commit not found"
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: `trace-root ${className}`,
+        style: themeVars,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        children: [
+            filterable && /*#__PURE__*/ jsx(FilterBar, {
+                filter: filter,
+                onFilterChange: handleFilterChange,
+                totalCount: commits.length,
+                filteredCount: filteredCommits.length
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "trace-controls",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: "trace-btn",
+                        onClick: handlePrev,
+                        disabled: activeIndex === 0,
+                        children: "prev"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: "trace-btn",
+                        onClick: togglePlay,
+                        children: isPlaying ? 'pause' : 'play'
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: "trace-btn",
+                        onClick: handleNext,
+                        disabled: activeIndex >= filteredCommits.length - 1,
+                        children: "next"
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: "trace-info",
+                        children: [
+                            activeIndex + 1,
+                            " / ",
+                            filteredCommits.length
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "trace-container",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "trace-timeline",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "trace-progress",
+                                style: {
+                                    height: `${progressHeight}%`
+                                }
+                            }),
+                            filteredCommits.map((commit, index)=>/*#__PURE__*/ jsx(CommitItem, {
+                                    commit: commit,
+                                    index: index,
+                                    isActive: index === activeIndex,
+                                    onClick: ()=>navigateToIndex(index)
+                                }, commit.hash))
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "trace-diff",
+                        children: /*#__PURE__*/ jsx(DiffContent, {
+                            commit: activeCommit,
+                            activeIndex: activeIndex,
+                            linePrefix: LINE_PREFIX
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+export { Trace, themeToVars, themes };