diffity 0.1.0

package/packages/ui/src/components/hunk-header.tsx

@@ -0,0 +1,144 @@
+import type { DiffHunk } from '@diffity/parser';
+import { ArrowUpIcon } from './icons/arrow-up-icon';
+import { ArrowDownIcon } from './icons/arrow-down-icon';
+import { ChevronUpDownIcon } from './icons/chevron-up-down-icon';
+import { Spinner } from './icons/spinner';
+
+export interface ExpandControls {
+  position: 'top' | 'between' | 'bottom';
+  remainingLines: number;
+  remainingUp: number;
+  remainingDown: number;
+  loading: boolean;
+  wasExpanded: boolean;
+  onExpand: (direction: 'up' | 'down' | 'all') => void;
+}
+
+interface HunkHeaderProps {
+  hunk: DiffHunk;
+  expandControls?: ExpandControls;
+}
+
+export function formatHunkHeader(hunk: DiffHunk): string {
+  const range = `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@`;
+  if (hunk.context) {
+    return `${range} ${hunk.context}`;
+  }
+  return range;
+}
+
+const SMALL_GAP_THRESHOLD = 40;
+
+const gutterCell = 'w-[25px] min-w-[25px] bg-diff-hunk-bg border-r border-border-muted p-0';
+const expandBtn = 'flex items-center justify-center w-full h-[18px] cursor-pointer text-diff-hunk-text/70 hover:text-diff-hunk-text transition-colors';
+const expandRow = 'bg-diff-hunk-bg';
+
+function SpinnerCell() {
+  return (
+    <td className={gutterCell}>
+      <div className="flex items-center justify-center h-[18px]">
+        <Spinner />
+      </div>
+    </td>
+  );
+}
+
+export function HunkHeader(props: HunkHeaderProps) {
+  const { hunk, expandControls } = props;
+
+  if (!expandControls) {
+    return (
+      <tr className="bg-diff-hunk-bg group/hunk">
+        <td colSpan={4} className="px-3 py-1 font-mono text-xs text-diff-hunk-text select-none">
+          {formatHunkHeader(hunk)}
+        </td>
+      </tr>
+    );
+  }
+
+  const { position, remainingLines, remainingUp, remainingDown, loading, wasExpanded, onExpand } = expandControls;
+
+  if (remainingLines <= 0) {
+    if (wasExpanded) {
+      return null;
+    }
+    return (
+      <tr className="bg-diff-hunk-bg group/hunk">
+        <td colSpan={4} className="px-3 py-1 font-mono text-xs text-diff-hunk-text select-none">
+          {formatHunkHeader(hunk)}
+        </td>
+      </tr>
+    );
+  }
+
+  const isSmallGap = remainingLines <= SMALL_GAP_THRESHOLD;
+  const showUp = remainingUp > 0;
+  const showDown = remainingDown > 0;
+
+  if (position === 'top') {
+    return (
+      <tr className="bg-diff-hunk-bg group/hunk">
+        {loading ? <SpinnerCell /> : (
+          <td className={gutterCell}>
+            <button className={expandBtn} onClick={() => onExpand('up')} title={`Expand ${Math.min(remainingLines, 20)} lines`}>
+              <ArrowUpIcon />
+            </button>
+          </td>
+        )}
+        <td colSpan={3} className="px-3 py-1 font-mono text-xs text-diff-hunk-text select-none">
+          {formatHunkHeader(hunk)}
+        </td>
+      </tr>
+    );
+  }
+
+  if (isSmallGap || (!showUp && showDown) || (showUp && !showDown)) {
+    return (
+      <tr className="bg-diff-hunk-bg group/hunk">
+        {loading ? <SpinnerCell /> : (
+          <td className={gutterCell}>
+            <button
+              className={expandBtn}
+              onClick={() => onExpand(isSmallGap ? 'all' : showUp ? 'up' : 'down')}
+              title={isSmallGap ? `Expand all ${remainingLines} lines` : `Expand ${Math.min(remainingLines, 20)} lines`}
+            >
+              {isSmallGap ? <ChevronUpDownIcon /> : showUp ? <ArrowUpIcon /> : <ArrowDownIcon />}
+            </button>
+          </td>
+        )}
+        <td colSpan={3} className="px-3 py-1 font-mono text-xs text-diff-hunk-text select-none">
+          {formatHunkHeader(hunk)}
+        </td>
+      </tr>
+    );
+  }
+
+  return (
+    <>
+      <tr className={expandRow}>
+        {loading ? <SpinnerCell /> : (
+          <td className={gutterCell}>
+            <button className={expandBtn} onClick={() => onExpand('down')} title="Expand down">
+              <ArrowDownIcon />
+            </button>
+          </td>
+        )}
+        <td colSpan={3} />
+      </tr>
+      <tr className="bg-diff-hunk-bg group/hunk">
+        <td className={gutterCell} />
+        <td colSpan={3} className="px-3 py-1 font-mono text-xs text-diff-hunk-text select-none">
+          {formatHunkHeader(hunk)}
+        </td>
+      </tr>
+      <tr className={expandRow}>
+        <td className={gutterCell}>
+          <button className={expandBtn} onClick={() => onExpand('up')} title="Expand up">
+            <ArrowUpIcon />
+          </button>
+        </td>
+        <td colSpan={3} />
+      </tr>
+    </>
+  );
+}

package/packages/ui/src/components/hunk-with-gap.tsx

@@ -0,0 +1,113 @@
+import type { DiffHunk, DiffLine as DiffLineType } from '@diffity/parser';
+import type { HighlightedTokens } from '../hooks/use-highlighter';
+import type { ViewMode } from '../lib/diff-utils';
+import type { SyntaxToken } from '../lib/syntax-token';
+import type { ExpandControls } from './hunk-header';
+import type { CommentThread as CommentThreadType, CommentAuthor, CommentSide, LineSelection } from '../types/comment';
+import { HunkBlock } from './hunk-block';
+import { HunkBlockSplit } from './hunk-block-split';
+import { buildExpansionSyntaxMap, renderExpansionRows } from './render-expansion-rows';
+
+interface GapExpansion {
+  fromTop: number;
+  fromBottom: number;
+  linesFromTop: DiffLineType[];
+  linesFromBottom: DiffLineType[];
+}
+
+interface HunkWithGapProps {
+  hunk: DiffHunk;
+  viewMode: ViewMode;
+  syntaxMap?: Map<string, SyntaxToken[]>;
+  expandControls?: ExpandControls;
+  topExpansionLines?: DiffLineType[];
+  gapExpansion?: GapExpansion;
+  gapId?: string;
+  highlightLine?: (code: string) => HighlightedTokens[] | null;
+  threads?: CommentThreadType[];
+  pendingSelection?: LineSelection | null;
+  currentAuthor?: CommentAuthor;
+  isLineSelected?: (line: number, side: CommentSide) => boolean;
+  onLineMouseDown?: (line: number, side: CommentSide) => void;
+  onLineMouseEnter?: (line: number, side: CommentSide) => void;
+  onCommentClick?: (line: number, side: CommentSide) => void;
+  onAddThread?: (filePath: string, side: CommentSide, startLine: number, endLine: number, body: string, author: CommentAuthor) => void;
+  onReply?: (threadId: string, body: string, author: CommentAuthor) => void;
+  onResolve?: (threadId: string) => void;
+  onUnresolve?: (threadId: string) => void;
+  onDeleteComment?: (threadId: string, commentId: string) => void;
+  onDeleteThread?: (threadId: string) => void;
+  onCancelPending?: () => void;
+  filePath?: string;
+  onRevertChange?: (hunk: DiffHunk, startIndex: number, endIndex: number) => void;
+  getOriginalCode?: (side: CommentSide, startLine: number, endLine: number) => string;
+}
+
+export function HunkWithGap(props: HunkWithGapProps) {
+  const {
+    hunk, viewMode, syntaxMap, expandControls, topExpansionLines, gapExpansion, gapId, highlightLine,
+    threads, pendingSelection, currentAuthor, isLineSelected,
+    onLineMouseDown, onLineMouseEnter, onCommentClick,
+    onAddThread, onReply, onResolve, onUnresolve, onDeleteComment, onDeleteThread,
+    onCancelPending, filePath, onRevertChange, getOriginalCode,
+  } = props;
+
+  const HunkComponent = viewMode === 'split' ? HunkBlockSplit : HunkBlock;
+
+  const allExpansionLines = [
+    ...(topExpansionLines || []),
+    ...(gapExpansion?.linesFromTop || []),
+    ...(gapExpansion?.linesFromBottom || []),
+  ];
+  const expansionSyntaxMap = allExpansionLines.length > 0
+    ? buildExpansionSyntaxMap(allExpansionLines, highlightLine)
+    : undefined;
+
+  const commentProps = {
+    isLineSelected, onLineMouseDown, onLineMouseEnter, onCommentClick,
+    threads, pendingSelection, currentAuthor,
+    onAddThread, onReply, onResolve, onUnresolve, onDeleteComment, onDeleteThread,
+    onCancelPending, filePath,
+  };
+
+  return (
+    <>
+      {gapExpansion && gapExpansion.linesFromTop.length > 0 && (
+        <tbody>
+          {renderExpansionRows(
+            gapExpansion.linesFromTop,
+            viewMode,
+            `${gapId}-top`,
+            expansionSyntaxMap,
+            commentProps,
+          )}
+        </tbody>
+      )}
+      <HunkComponent
+        hunk={hunk}
+        syntaxMap={syntaxMap}
+        expandControls={expandControls}
+        topExpansionLines={topExpansionLines && topExpansionLines.length > 0 ? topExpansionLines : undefined}
+        bottomExpansionLines={gapExpansion && gapExpansion.linesFromBottom.length > 0 ? gapExpansion.linesFromBottom : undefined}
+        expansionSyntaxMap={expansionSyntaxMap}
+        threads={threads}
+        pendingSelection={pendingSelection}
+        currentAuthor={currentAuthor}
+        isLineSelected={isLineSelected}
+        onLineMouseDown={onLineMouseDown}
+        onLineMouseEnter={onLineMouseEnter}
+        onCommentClick={onCommentClick}
+        onAddThread={onAddThread}
+        onReply={onReply}
+        onResolve={onResolve}
+        onUnresolve={onUnresolve}
+        onDeleteComment={onDeleteComment}
+        onDeleteThread={onDeleteThread}
+        onCancelPending={onCancelPending}
+        filePath={filePath}
+        onRevertChange={onRevertChange}
+        getOriginalCode={getOriginalCode}
+      />
+    </>
+  );
+}

package/packages/ui/src/components/icons/arrow-down-icon.tsx

@@ -0,0 +1,7 @@
+export function ArrowDownIcon() {
+  return (
+    <svg className="w-[14px] h-[14px]" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M2 13.25a.75.75 0 00.75.75h1a.75.75 0 000-1.5h-1a.75.75 0 00-.75.75zm4 0a.75.75 0 00.75.75h1a.75.75 0 000-1.5h-1a.75.75 0 00-.75.75zm4 0a.75.75 0 00.75.75h1a.75.75 0 000-1.5h-1a.75.75 0 00-.75.75zM7.47 10.03a.75.75 0 001.06 0l3.25-3.25a.75.75 0 00-1.06-1.06L8.5 7.94V1.75a.75.75 0 00-1.5 0v6.19L4.78 5.72a.75.75 0 00-1.06 1.06l3.25 3.25z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/arrow-up-icon.tsx

@@ -0,0 +1,7 @@
+export function ArrowUpIcon() {
+  return (
+    <svg className="w-[14px] h-[14px]" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M2 2.75a.75.75 0 01.75-.75h1a.75.75 0 010 1.5h-1A.75.75 0 012 2.75zm4 0a.75.75 0 01.75-.75h1a.75.75 0 010 1.5h-1A.75.75 0 016 2.75zm4 0a.75.75 0 01.75-.75h1a.75.75 0 010 1.5h-1a.75.75 0 01-.75-.75zM7.47 5.97a.75.75 0 011.06 0l3.25 3.25a.75.75 0 11-1.06 1.06L8.5 8.06V14.25a.75.75 0 01-1.5 0V8.06L4.78 10.28a.75.75 0 01-1.06-1.06l3.25-3.25z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/check-circle-icon.tsx

@@ -0,0 +1,8 @@
+export function CheckCircleIcon() {
+  return (
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 12l2 2 4-4" />
+      <circle cx="12" cy="12" r="10" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/check-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+
+export function CheckIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/chevron-down-icon.tsx

@@ -0,0 +1,11 @@
+interface ChevronDownIconProps {
+  className?: string;
+}
+
+export function ChevronDownIcon(props: ChevronDownIconProps) {
+  return (
+    <svg className={props.className ?? 'w-4 h-4'} viewBox="0 0 16 16" fill="currentColor">
+      <path d="M12.78 5.47a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 6.53a.75.75 0 011.06-1.06L8 9.19l3.72-3.72a.75.75 0 011.06 0z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/chevron-icon.tsx

@@ -0,0 +1,20 @@
+import { cn } from '../../lib/cn';
+
+interface ChevronIconProps {
+  expanded: boolean;
+}
+
+export function ChevronIcon(props: ChevronIconProps) {
+  return (
+    <svg
+      className={cn(
+        'w-3 h-3 shrink-0 text-text-muted transition-transform duration-150',
+        props.expanded && 'rotate-90'
+      )}
+      viewBox="0 0 16 16"
+      fill="currentColor"
+    >
+      <path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/chevron-up-down-icon.tsx

@@ -0,0 +1,7 @@
+export function ChevronUpDownIcon() {
+  return (
+    <svg className="w-[14px] h-[14px]" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M8.177 2.073a.25.25 0 00-.354 0L4.427 5.47a.25.25 0 00.177.427h6.792a.25.25 0 00.177-.427L8.177 2.073zM7.823 13.927a.25.25 0 00.354 0l3.396-3.397a.25.25 0 00-.177-.427H4.604a.25.25 0 00-.177.427l3.396 3.397z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/chevron-up-icon.tsx

@@ -0,0 +1,11 @@
+interface ChevronUpIconProps {
+  className?: string;
+}
+
+export function ChevronUpIcon(props: ChevronUpIconProps) {
+  return (
+    <svg className={props.className ?? 'w-4 h-4'} viewBox="0 0 16 16" fill="currentColor">
+      <path d="M3.22 10.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L8 6.81 4.28 10.53a.75.75 0 01-1.06 0z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/comment-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+
+export function CommentIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path fillRule="evenodd" clipRule="evenodd" d="M2.5 6C2.5 4.75736 3.50736 3.75 4.75 3.75H19.25C20.4926 3.75 21.5 4.75736 21.5 6V16.5484C21.5 17.791 20.4926 18.7984 19.25 18.7984H7.635L3.75032 22.277C3.52993 22.4743 3.21411 22.5237 2.94401 22.403C2.67391 22.2823 2.5 22.0141 2.5 21.7182V6ZM4.75 5.25C4.33579 5.25 4 5.58579 4 6V20.0399L6.84795 17.4897C6.9855 17.3665 7.16364 17.2984 7.34827 17.2984H19.25C19.6642 17.2984 20 16.9626 20 16.5484V6C20 5.58579 19.6642 5.25 19.25 5.25H4.75Z" fill="currentColor" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/copy-icon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+
+export function CopyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/eye-icon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+
+export function EyeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" />
+      <circle cx="8" cy="8" r="2" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/eye-off-icon.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+
+export function EyeOffIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M2 2l12 12" />
+      <path d="M6.5 6.5a2 2 0 0 0 2.83 2.83" />
+      <path d="M4.2 4.2C2.7 5.3 1.5 8 1.5 8s2.5 4.5 6.5 4.5c1.3 0 2.5-.4 3.5-1" />
+      <path d="M12.5 10.5c1-1.1 2-2.5 2-2.5s-2.5-4.5-6.5-4.5c-.5 0-1 .05-1.5.15" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/file-icon.tsx

@@ -0,0 +1,7 @@
+export function FileIcon() {
+  return (
+    <svg className="w-4 h-4 shrink-0 text-text-muted" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16h-9.5A1.75 1.75 0 012 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 019 4.25V1.5H3.75zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/folder-icon.tsx

@@ -0,0 +1,19 @@
+interface FolderIconProps {
+  open: boolean;
+}
+
+export function FolderIcon(props: FolderIconProps) {
+  if (props.open) {
+    return (
+      <svg className="w-4 h-4 shrink-0 text-accent opacity-80" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M.513 1.513A1.75 1.75 0 011.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 00.2.1h6.5A1.75 1.75 0 0116 4.75v8.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75c0-.464.184-.91.513-1.237zM1.75 2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H7.5c-.55 0-1.07-.26-1.4-.7l-.9-1.2a.25.25 0 00-.2-.1h-3.5a.25.25 0 00-.25.25z" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg className="w-4 h-4 shrink-0 text-accent opacity-80" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3H7.5a.25.25 0 01-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/git-branch-icon.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+export function GitBranchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <line x1="5" y1="3.5" x2="5" y2="12.5" />
+      <circle cx="5" cy="3.5" r="1.5" />
+      <circle cx="5" cy="12.5" r="1.5" />
+      <circle cx="11" cy="5.5" r="1.5" />
+      <path d="M11 7c0 2-2 3.5-6 4" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/keyboard-icon.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+export function KeyboardIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="1" y="3.5" width="14" height="9" rx="2" />
+      <line x1="4" y1="6.5" x2="5" y2="6.5" />
+      <line x1="7.5" y1="6.5" x2="8.5" y2="6.5" />
+      <line x1="11" y1="6.5" x2="12" y2="6.5" />
+      <line x1="5" y1="9.5" x2="11" y2="9.5" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/moon-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+
+export function MoonIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M13.5 8.5a5.5 5.5 0 0 1-7-7 5.5 5.5 0 1 0 7 7z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/plus-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+
+export function PlusIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 110 1.5H8.5v4.25a.75.75 0 11-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/search-icon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+
+export function SearchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <circle cx="7" cy="7" r="4.5" />
+      <line x1="10.2" y1="10.2" x2="14" y2="14" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/sidebar-icon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+
+export function SidebarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="1.5" y="2.5" width="13" height="11" rx="2" />
+      <line x1="5.5" y1="2.5" x2="5.5" y2="13.5" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/spinner.tsx

@@ -0,0 +1,7 @@
+export function Spinner(props: { className?: string }) {
+  const { className = 'w-3 h-3' } = props;
+
+  return (
+    <span className={`inline-block border-2 border-text-muted/40 border-t-transparent rounded-full animate-spin ${className}`} />
+  );
+}

package/packages/ui/src/components/icons/split-view-icon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+
+export function SplitViewIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="1.5" y="1.5" width="13" height="13" rx="2" />
+      <line x1="8" y1="1.5" x2="8" y2="14.5" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/sun-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+
+export function SunIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <circle cx="8" cy="8" r="3" />
+      <line x1="8" y1="1" x2="8" y2="2.5" />
+      <line x1="8" y1="13.5" x2="8" y2="15" />
+      <line x1="1" y1="8" x2="2.5" y2="8" />
+      <line x1="13.5" y1="8" x2="15" y2="8" />
+      <line x1="3.05" y1="3.05" x2="4.1" y2="4.1" />
+      <line x1="11.9" y1="11.9" x2="12.95" y2="12.95" />
+      <line x1="3.05" y1="12.95" x2="4.1" y2="11.9" />
+      <line x1="11.9" y1="4.1" x2="12.95" y2="3.05" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/trash-icon.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+
+export function TrashIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14.7223 12.7585C14.7426 12.3448 14.4237 11.9929 14.01 11.9726C13.5963 11.9522 13.2444 12.2711 13.2241 12.6848L12.9999 17.2415C12.9796 17.6552 13.2985 18.0071 13.7122 18.0274C14.1259 18.0478 14.4778 17.7289 14.4981 17.3152L14.7223 12.7585Z" fill="currentColor" />
+      <path d="M9.98802 11.9726C9.5743 11.9929 9.25542 12.3448 9.27577 12.7585L9.49993 17.3152C9.52028 17.7289 9.87216 18.0478 10.2859 18.0274C10.6996 18.0071 11.0185 17.6552 10.9981 17.2415L10.774 12.6848C10.7536 12.2711 10.4017 11.9522 9.98802 11.9726Z" fill="currentColor" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M10.249 2C9.00638 2 7.99902 3.00736 7.99902 4.25V5H5.5C4.25736 5 3.25 6.00736 3.25 7.25C3.25 8.28958 3.95503 9.16449 4.91303 9.42267L5.54076 19.8848C5.61205 21.0729 6.59642 22 7.78672 22H16.2113C17.4016 22 18.386 21.0729 18.4573 19.8848L19.085 9.42267C20.043 9.16449 20.748 8.28958 20.748 7.25C20.748 6.00736 19.7407 5 18.498 5H15.999V4.25C15.999 3.00736 14.9917 2 13.749 2H10.249ZM14.499 5V4.25C14.499 3.83579 14.1632 3.5 13.749 3.5H10.249C9.83481 3.5 9.49902 3.83579 9.49902 4.25V5H14.499ZM5.5 6.5C5.08579 6.5 4.75 6.83579 4.75 7.25C4.75 7.66421 5.08579 8 5.5 8H18.498C18.9123 8 19.248 7.66421 19.248 7.25C19.248 6.83579 18.9123 6.5 18.498 6.5H5.5ZM6.42037 9.5H17.5777L16.96 19.7949C16.9362 20.191 16.6081 20.5 16.2113 20.5H7.78672C7.38995 20.5 7.06183 20.191 7.03807 19.7949L6.42037 9.5Z" fill="currentColor" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/undo-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+
+export function UndoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path fillRule="evenodd" d="M2.854 3.146a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 1 0 .708-.708L1.707 6H7.5A4.5 4.5 0 1 1 3 10.5a.5.5 0 0 0-1 0A5.5 5.5 0 1 0 7.5 5H1.707l1.147-1.146a.5.5 0 0 0 0-.708Z" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/unified-view-icon.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+
+export function UnifiedViewIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="1.5" y="1.5" width="13" height="13" rx="2" />
+      <line x1="4.5" y1="5.5" x2="11.5" y2="5.5" />
+      <line x1="4.5" y1="8" x2="11.5" y2="8" />
+      <line x1="4.5" y1="10.5" x2="11.5" y2="10.5" />
+    </svg>
+  );
+}

package/packages/ui/src/components/icons/x-icon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+
+export function XIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <line x1="4" y1="4" x2="12" y2="12" />
+      <line x1="12" y1="4" x2="4" y2="12" />
+    </svg>
+  );
+}

package/packages/ui/src/components/line-number-cell.tsx

@@ -0,0 +1,18 @@
+import { cn } from '../lib/cn';
+
+interface LineNumberCellProps {
+  lineNumber: number | null;
+  className?: string;
+}
+
+const baseClass = 'w-12.5 min-w-12.5 px-2 text-right text-text-muted select-none cursor-pointer align-top text-xs leading-6';
+
+export function LineNumberCell(props: LineNumberCellProps) {
+  const { lineNumber, className } = props;
+
+  return (
+    <td className={cn(baseClass, className)}>
+      {lineNumber ?? ''}
+    </td>
+  );
+}