Merge Conflict

Classic conflict block with emerald current section, sky incoming section, and <<< === >>> markers.

<<<<<<< CurrentHEAD
const greet = (name) =>  `Hi, ${name}!`;
=======
const greet = (name: string) =>  `Merhaba, ${name}!`;
>>>>>>> Incomingfeat/onboarding

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Editor31 } from "@/components/beste/piece/editor31";

<Editor31
  currentBranch="HEAD"
  incomingBranch="feat/onboarding"
  currentCode={[
    "const greet = (name) =>",
    "  `Hi, ${name}!`;"
  ]}
  incomingCode={[
    "const greet = (name: string) =>",
    "  `Merhaba, ${name}!`;"
  ]}
/>

More Editor pieces

View all Editor
import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

editor30

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

Switch branch…
  • feat/onboarding
  • main
  • feat/ai-suggest↑3
  • chore/cleanup

Branch Switcher

editor24

Branch picker popover with search, a list of branches, ahead counts, and an emerald check on the current one.

const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line

Quick Fix

editor40

Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.

--primary:  #f43f5e;
--accent:  #8b5cf6;
--surface:  #0ea5e9;

Color Preview

editor26

CSS lines with inline color swatch squares next to each hex value.

button.tsxSaved 3s ago

Save Indicator

editor23

Pill with filename and a state glyph: emerald check for saved, sky dot for dirty.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

editor28

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.