Breakpoint Gutter

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

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

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

Import & use

import { Editor41 } from "@/components/beste/piece/editor41";

<Editor41
  lines={[
    {
      "line": 40,
      "code": "const users = load();"
    },
    {
      "line": 41,
      "code": "for (const user of users) {",
      "breakpoint": true,
      "hits": 12
    },
    {
      "line": 42,
      "code": "  render(user);",
      "current": true
    },
    {
      "line": 43,
      "code": "}"
    }
  ]}
/>