Ruler Guide

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.

col guide80
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'

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

Import & use
import { Editor25 } from "@/components/beste/piece/editor25";

<Editor25
  limit={80}
  lines={[
    {
      "text": "const message = `Hello`;"
    },
    {
      "text": "const longer = `Shipping the biggest onboarding upgrade yet`;"
    },
    {
      "text": "const wrapped = items.map((i) => i.name).join(', ') + '!'"
    }
  ]}
/>