Quick Fix

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

const value = user.prfile.name;

Rename to 'profile'Preferred
Add missing property 'prfile'
Disable rule for this line

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

Import & use

import { Editor40 } from "@/components/beste/piece/editor40";

<Editor40
  line="const value = user.prfile.name;"
  actions={[
    {
      "label": "Rename to 'profile'",
      "preferred": true
    },
    {
      "label": "Add missing property 'prfile'"
    },
    {
      "label": "Disable rule for this line"
    }
  ]}
/>

More Editor pieces

View all Editor

10import { greet } from './greet';
11 
12const user = { name: 'Ayşe' };
13const msg = greet(user.name);
14console.log(msg);
15

Git Gutter

editor30

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

AI Suggestion

const greet = (name: string) => `Hello, ${name}!`;

Inline Suggestion

editor8

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.

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.

return greet(name);

Ayşe

Collab Cursor

editor13

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

40const users = load();
41for (const user of users) {12×
42  render(user);
43}

Breakpoint Gutter

editor41

Gutter with rose breakpoint dots, an amber-highlighted current line, and a hit-count chip.

user.

idstring
namestring
emailstring
isAdminboolean
save(): Promise<void>

IntelliSense

editor2

Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.