VibeUI

Code Block

Per Line Copy

Список команд, где копируется одна строка, а не весь блок: у каждой строки своя кнопка, доступная и мышью, и с клавиатуры.

  • code
  • copy
  • list
  • commands

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/codeblock-013

Обновление форка
  1. git remote add upstream git@github.com:vibeui/vibeui.git
  2. git fetch upstream --prune
  3. git rebase upstream/main
  4. git push --force-with-lease
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «codeblock-013» (Per Line Copy) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/codeblock-013.json

Registry item: https://vibeui.ru/r/codeblock-013.json
Ставится в: components/vibeui/codeblock-013.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Список команд, где копируется одна строка, а не весь блок: у каждой строки своя кнопка, доступная и мышью, и с клавиатуры.

Список команд, где каждая строка копируется отдельной кнопкой: кнопка проявляется по наведению и по фокусу, скопированная строка подсвечивается. Ноль зависимостей.

## 3. Как использовать
import { Codeblock013 } from "@/components/vibeui/codeblock-013"

<Codeblock013
  title="Обновление форка"
  showNumbers={true}
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-codeblock-013-* и не подменять её токенами вашей темы
- скрытие кнопок через opacity, а не display:none — иначе они выпадают из обхода клавиатурой
- проявление кнопки по :focus-visible: интерфейс, живущий только на hover, недоступен без мыши
- подпись кнопки с номером строки: десять одинаковых «Скопировать» бесполезны для читалки экрана
- один индекс на всё состояние: два подсвеченных ответа одновременно врут о том, что в буфере
- тёмную подложку блока — светлый моноширинный текст без неё не читается
- обрезку строки многоточием: полоса прокрутки на каждой строке превращает блок в лестницу, а в буфер строка всё равно уходит целиком

## 6. Можно менять
- строки списка массивом lines
- заголовок через title
- показ номеров через showNumbers
- цвет отметки о копировании и время её жизни

## 7. Правила
- navigator.clipboard работает только в защищённом контексте: по http кнопки промолчат.
- Кнопки «скопировать всё» здесь нет намеренно: блок про выборочное копирование.
- Очень длинная строка прокручивается внутри своей ячейки, чтобы кнопка не уезжала за край.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/codeblock-013.json
https://vibeui.ru/r/codeblock-013.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-codeblock-013-*. Клиентский: директива "use client" нужна для navigator.clipboard и отметки скопированной строки. Скопированный индекс держится одним числом, поэтому одновременно подсвечена ровно одна строка. Кнопки скрыты через opacity, а не display:none, — они остаются в порядке обхода клавиатурой и проявляются по :focus-visible. Номера строк печатает CSS-счётчик, поэтому в буфер уходит только текст команды.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

"use client"

import { useEffect, useRef, useState } from "react"
import type { CSSProperties } from "react"

export type Codeblock013Props = {
  title?: string
  lines?: string[]
  showNumbers?: boolean
  className?: string
  style?: CSSProperties
}

// Идея компонента: копировать не весь блок, а одну строку. У каждой строки
// своя кнопка: она проявляется при наведении и при фокусе с клавиатуры,
// поэтому копирование доступно и без мыши, а не только по hover.
const STYLES = `
:where([data-vibeui-block="codeblock-013"]){
--vibeui-codeblock-013-bg:oklch(0.2 0.006 265);
--vibeui-codeblock-013-head:oklch(0.24 0.008 265);
--vibeui-codeblock-013-fg:oklch(0.93 0.005 265);
--vibeui-codeblock-013-muted:oklch(0.67 0.012 265);
--vibeui-codeblock-013-gutter:oklch(0.5 0.014 265);
--vibeui-codeblock-013-border:oklch(1 0 0 / 13%);
--vibeui-codeblock-013-ok:oklch(0.84 0.14 152);
--vibeui-codeblock-013-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--vibeui-codeblock-013-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="codeblock-013"]{
display:flex;flex-direction:column;
width:100%;max-width:32rem;box-sizing:border-box;margin:0;overflow:hidden;
border:1px solid var(--vibeui-codeblock-013-border);border-radius:0.75rem;
background:var(--vibeui-codeblock-013-bg);color:var(--vibeui-codeblock-013-fg);
font-family:var(--vibeui-codeblock-013-font);
}
[data-vibeui-block="codeblock-013"] figcaption{
padding:0.5rem 0.875rem;
background:var(--vibeui-codeblock-013-head);
border-bottom:1px solid var(--vibeui-codeblock-013-border);
font-family:var(--vibeui-codeblock-013-mono);font-size:0.75rem;
color:var(--vibeui-codeblock-013-muted);
}
[data-vibeui-block="codeblock-013"] ol{
margin:0;padding:0.375rem 0;list-style:none;
counter-reset:line;
}
[data-vibeui-block="codeblock-013"] li{
display:flex;align-items:center;gap:0.5rem;
padding:0 0.375rem 0 0.875rem;min-height:1.625rem;
transition:background-color .16s ease;
}
[data-vibeui-block="codeblock-013"] li[data-numbered="true"]::before{
counter-increment:line;content:counter(line);
flex:none;width:1.5rem;text-align:right;
font-family:var(--vibeui-codeblock-013-mono);font-size:0.75rem;
color:var(--vibeui-codeblock-013-gutter);font-variant-numeric:tabular-nums;
user-select:none;-webkit-user-select:none;
}
[data-vibeui-block="codeblock-013"] li:hover{background:oklch(1 0 0 / 6%)}
[data-vibeui-block="codeblock-013"] li[data-copied="true"]{background:oklch(0.6 0.14 152 / 18%)}
/* Строка режется многоточием, а не прокручивается: своя полоса прокрутки на
   каждой строке превращает блок в лестницу, а кнопка копирования уезжает за
   край. Целиком строка всё равно уходит в буфер. */
[data-vibeui-block="codeblock-013"] code{
flex:1 1 auto;min-width:0;
font-family:var(--vibeui-codeblock-013-mono);
font-size:0.8125rem;line-height:1.6;
white-space:pre;overflow:hidden;text-overflow:ellipsis;
}
[data-vibeui-block="codeblock-013"] button{
appearance:none;border:0;cursor:pointer;flex:none;
width:1.5rem;height:1.5rem;border-radius:0.375rem;
display:inline-flex;align-items:center;justify-content:center;
background:oklch(1 0 0 / 10%);color:var(--vibeui-codeblock-013-muted);
opacity:0;transition:opacity .16s ease,color .16s ease;
}
[data-vibeui-block="codeblock-013"] li:hover button,
[data-vibeui-block="codeblock-013"] button:focus-visible,
[data-vibeui-block="codeblock-013"] button[data-copied="true"]{opacity:1}
[data-vibeui-block="codeblock-013"] button:hover{color:var(--vibeui-codeblock-013-fg)}
[data-vibeui-block="codeblock-013"] button:focus-visible{outline:2px solid var(--vibeui-codeblock-013-ok);outline-offset:2px}
[data-vibeui-block="codeblock-013"] button[data-copied="true"]{color:var(--vibeui-codeblock-013-ok)}
[data-vibeui-block="codeblock-013"] svg{width:0.875rem;height:0.875rem}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="codeblock-013"] *{animation:none!important;transition:none!important}}
`

const LINES = [
  "git remote add upstream git@github.com:vibeui/vibeui.git",
  "git fetch upstream --prune",
  "git rebase upstream/main",
  "git push --force-with-lease",
]

/** Список строк, каждую можно скопировать отдельной кнопкой. */
export function Codeblock013({
  title = "Обновление форка",
  lines = LINES,
  showNumbers = true,
  className,
  style,
}: Codeblock013Props) {
  const [copied, setCopied] = useState(-1)
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)

  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current)
    },
    [],
  )

  const copy = async (line: string, index: number) => {
    try {
      await navigator.clipboard.writeText(line)
    } catch {
      // Буфер недоступен: отметка «скопировано» была бы обманом.
      return
    }
    setCopied(index)
    if (timer.current) clearTimeout(timer.current)
    timer.current = setTimeout(() => setCopied(-1), 1400)
  }

  return (
    <>
      <style href="vibeui-codeblock-013" precedence="medium">
        {STYLES}
      </style>
      <figure
        data-vibeui-block="codeblock-013"
        className={className}
        style={style}
      >
        <figcaption>{title}</figcaption>
        <ol>
          {lines.map((line, index) => (
            <li
              key={index}
              data-numbered={showNumbers || undefined}
              data-copied={copied === index || undefined}
            >
              <code>{line}</code>
              <button
                type="button"
                data-copied={copied === index || undefined}
                onClick={() => copy(line, index)}
                aria-label={
                  copied === index
                    ? `Строка ${index + 1} скопирована`
                    : `Скопировать строку ${index + 1}`
                }
              >
                {copied === index ? (
                  <svg viewBox="0 0 12 12" aria-hidden="true">
                    <path
                      d="M2 6.5 4.6 9 10 3"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.8"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                ) : (
                  <svg viewBox="0 0 12 12" aria-hidden="true">
                    <rect
                      x="4"
                      y="1.5"
                      width="6.5"
                      height="6.5"
                      rx="1.5"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.3"
                    />
                    <path
                      d="M8 10.5H3a1.5 1.5 0 0 1-1.5-1.5V4"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.3"
                      strokeLinecap="round"
                    />
                  </svg>
                )}
              </button>
            </li>
          ))}
        </ol>
      </figure>
    </>
  )
}