/
1.1k
Sponsor

File Change

PreviousNext

Interactive file-change review list with diff expansion, per-file accept/reject actions, and accept-all shortcut

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/file-change

Usage

import { FileChange } from "@/components/ui/file-change";
<FileChange
  changes={[
    { path: "src/utils.ts", type: "modify", diff: "-old line\n+new line" },
    {
      path: "src/helpers.ts",
      type: "create",
      content: "export const add = (a, b) => a + b;",
    },
    { path: "src/legacy.ts", type: "delete" },
  ]}
  onAccept={(path) => console.log("accepted", path)}
  onReject={(path) => console.log("rejected", path)}
  onAcceptAll={() => console.log("accepted all")}
/>

API Reference

FileChange

PropTypeDefault
changesFileChangeItem[]required
onAccept(path: string) => void-
onReject(path: string) => void-
onAcceptAll() => void-

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

  • Keyboard: Arrow keys move inside the composite; Home / End select the first or last enabled item; Enter / Space activate, select, or toggle; Escape cancels or closes an owned surface; Tab / Shift+Tab move between termcn/Ink focus targets.
  • Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
  • Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.