VibeUI

Code Block

Changed Line

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

  • code
  • highlight
  • changed
  • edit

Превью

1440pxHost theme

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

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

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

components/cart.tsxизменено только что
export function cartTotal(items: Item[]) {  return items.reduce(    (sum, item) => sum + item.price * item.count,    0,  )}
Показать полную инструкцию

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

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

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

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

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

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

Листинг, в котором помечена последняя изменённая строка: полоса, подложка и однократная вспышка. Ноль зависимостей, клиентского JS нет.

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

<Codeblock017
  path="components/cart.tsx"
  changedLine={3}
  agoLabel="изменено только что"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-codeblock-017-* и не подменять её токенами вашей темы
- однократную вспышку: бесконечная анимация превращает блок в мигалку и мешает читать
- последний кадр вспышки, равный цвету подложки — иначе после анимации отметка пропадёт
- знак в ::after рядом с цветом: одна подложка не читается при дальтонизме и в печати
- номера строк и знак в псевдоэлементах, чтобы они не уезжали в буфер вместе с кодом
- правило prefers-reduced-motion: вспышка — раздражитель для части людей

## 6. Можно менять
- строки листинга массивом lines
- путь к файлу через path
- номер изменённой строки через changedLine
- подпись времени через agoLabel и оттенок отметки

## 7. Правила
- Помечается ровно одна строка: для набора изменений возьмите блок с дифом.
- Вспышка проигрывается один раз при появлении блока; повторить её без клиентского JS нельзя.
- changedLine вне списка строк просто ничего не подсветит — проверять границы приходится вызывающему коду.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-codeblock-017-*. Серверный: хуков нет. Номер строки печатает CSS-счётчик в ::before, отметку изменения — ::after, поэтому ни цифра, ни знак не уезжают в буфер обмена. Изменение помечено тремя независимыми признаками: полосой слева через inset box-shadow, полупрозрачной подложкой и однократной анимацией вспышки. Последний кадр анимации равен цвету подложки, поэтому после её завершения отметка остаётся на месте, а не исчезает.

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

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

import type { CSSProperties } from "react"

export type Codeblock017Props = {
  path?: string
  changedLine?: number
  agoLabel?: string
  lines?: string[]
  className?: string
  style?: CSSProperties
}

// Идея компонента: показать, что именно поменялось только что. Не диф целиком,
// а одна строка: она получает метку в поле номеров, подложку и короткую
// вспышку, которая гаснет сама и не оставляет мигающего элемента на экране.
const STYLES = `
:where([data-vibeui-block="codeblock-017"]){
--vibeui-codeblock-017-bg:oklch(0.2 0.016 150);
--vibeui-codeblock-017-head:oklch(0.24 0.02 150);
--vibeui-codeblock-017-fg:oklch(0.93 0.008 150);
--vibeui-codeblock-017-muted:oklch(0.67 0.016 150);
--vibeui-codeblock-017-gutter:oklch(0.52 0.02 150);
--vibeui-codeblock-017-border:oklch(1 0 0 / 12%);
--vibeui-codeblock-017-mark:oklch(0.82 0.15 152);
--vibeui-codeblock-017-tint:oklch(0.6 0.14 152 / 16%);
--vibeui-codeblock-017-flash:oklch(0.7 0.16 152 / 42%);
--vibeui-codeblock-017-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--vibeui-codeblock-017-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="codeblock-017"]{
display:flex;flex-direction:column;
width:100%;max-width:34rem;box-sizing:border-box;margin:0;overflow:hidden;
border:1px solid var(--vibeui-codeblock-017-border);border-radius:0.75rem;
background:var(--vibeui-codeblock-017-bg);color:var(--vibeui-codeblock-017-fg);
font-family:var(--vibeui-codeblock-017-font);
}
[data-vibeui-block="codeblock-017"] [data-part="head"]{
display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
padding:0.5rem 0.875rem;
background:var(--vibeui-codeblock-017-head);
border-bottom:1px solid var(--vibeui-codeblock-017-border);
font-size:0.75rem;color:var(--vibeui-codeblock-017-muted);
}
[data-vibeui-block="codeblock-017"] [data-part="path"]{
font-family:var(--vibeui-codeblock-017-mono);
}
[data-vibeui-block="codeblock-017"] [data-part="ago"]{
display:inline-flex;align-items:center;gap:0.375rem;flex:none;
color:var(--vibeui-codeblock-017-mark);font-weight:650;
}
[data-vibeui-block="codeblock-017"] [data-part="ago"]::before{
content:"";width:0.4375rem;height:0.4375rem;border-radius:50%;
background:currentColor;
}
[data-vibeui-block="codeblock-017"] pre{margin:0;padding:0.625rem 0;overflow-x:auto}
[data-vibeui-block="codeblock-017"] code{
display:block;min-width:max-content;
font-family:var(--vibeui-codeblock-017-mono);
font-size:0.8125rem;line-height:1.7;white-space:pre;
counter-reset:line;
}
[data-vibeui-block="codeblock-017"] [data-part="row"]{
display:block;position:relative;padding:0 0.875rem 0 3.25rem;
}
[data-vibeui-block="codeblock-017"] [data-part="row"]::before{
counter-increment:line;content:counter(line);
position:absolute;left:0;width:2.25rem;text-align:right;
color:var(--vibeui-codeblock-017-gutter);font-variant-numeric:tabular-nums;
user-select:none;-webkit-user-select:none;pointer-events:none;
}
/* Отметка в поле номеров живёт отдельно от подложки: цвет один читается
   плохо, а знак остаётся виден и в печати, и при дальтонизме. */
[data-vibeui-block="codeblock-017"] [data-part="row"][data-changed="true"]::after{
content:"▸";position:absolute;left:2.5rem;
color:var(--vibeui-codeblock-017-mark);
user-select:none;-webkit-user-select:none;pointer-events:none;
}
[data-vibeui-block="codeblock-017"] [data-part="row"][data-changed="true"]{
background:var(--vibeui-codeblock-017-tint);
box-shadow:inset 0.1875rem 0 0 var(--vibeui-codeblock-017-mark);
animation:vibeui-codeblock-017-flash 2.4s ease-out 1;
}
@keyframes vibeui-codeblock-017-flash{
from{background:var(--vibeui-codeblock-017-flash)}
to{background:var(--vibeui-codeblock-017-tint)}
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="codeblock-017"] *{animation:none!important;transition:none!important}}
`

const LINES = [
  "export function cartTotal(items: Item[]) {",
  "  return items.reduce(",
  "    (sum, item) => sum + item.price * item.count,",
  "    0,",
  "  )",
  "}",
]

/** Листинг с отметкой строки, изменённой последней правкой. */
export function Codeblock017({
  path = "components/cart.tsx",
  changedLine = 3,
  agoLabel = "изменено только что",
  lines = LINES,
  className,
  style,
}: Codeblock017Props) {
  return (
    <>
      <style href="vibeui-codeblock-017" precedence="medium">
        {STYLES}
      </style>
      <figure
        data-vibeui-block="codeblock-017"
        className={className}
        style={style}
      >
        <figcaption data-part="head">
          <span data-part="path">{path}</span>
          <span data-part="ago">{agoLabel}</span>
        </figcaption>
        <pre>
          <code>
            {lines.map((line, index) => (
              <span
                key={index}
                data-part="row"
                data-changed={index + 1 === changedLine || undefined}
                aria-current={index + 1 === changedLine ? "true" : undefined}
              >
                {line}
              </span>
            ))}
          </code>
        </pre>
      </figure>
    </>
  )
}