VibeUI

Display

Doc Revisions

История правок документа: автор, комментарий и двухцветная полоска, длина частей которой пропорциональна добавленным и удалённым строкам.

  • timeline
  • history
  • diff
  • versions

Превью

1440pxHost theme

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

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

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

История документа

  1. v12
    Переписан раздел про тарифыМарк Иванов · сегодня, 14:20

    +64−12текущая

  2. v11
    Правки после юридической проверкиАня Петрова · вчера, 18:05

    +18−44

  3. v10
    Добавлены примеры договоровЛиза Ким · 11 марта

    +132−3

  4. v9
    Первая полная версияМарк Иванов · 6 марта

    +210−0

Показать полную инструкцию

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

# Установка и размещение «timeline-005» (Doc Revisions) из VibeUI

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

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

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

## 2. Что это
История правок документа: автор, комментарий и двухцветная полоска, длина частей которой пропорциональна добавленным и удалённым строкам.

Лента правок документа: версия, автор, комментарий и объём изменения полоской плюс числами. Ноль зависимостей, один файл, клиентского JS нет.

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

<Timeline005
  title="История документа"
  revisions={[
    { version: "v12", author: "Марк Иванов", note: "Переписан раздел про тарифы", time: "сегодня, 14:20", added: 64, removed: 12, current: true },
    { version: "v11", author: "Аня Петрова", note: "Правки после проверки", time: "вчера, 18:05", added: 18, removed: 44 },
  ]}
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-timeline-005-* и не подменять её токенами вашей темы
- числа +N и −N рядом с полоской: полоска без подписи не данные, а украшение
- долю добавленного в переменной --vibeui-timeline-005-share: ширина считается на рендере, а не на клиенте
- плашку номера версии в первой колонке — по ней ищут нужную правку глазами
- метку «текущая» у активной версии: рамка одного цвета мало кому заметна
- собственную светлую подложку: тёмный текст на тёмной странице пропадает

## 6. Можно менять
- заголовок через title
- правки через revisions: версия, автор, комментарий, время и числа added/removed
- цвет акцента через accent
- ширину карточки через max-width корневого элемента

## 7. Правила
- Полоска показывает пропорцию внутри одной правки, а не масштаб относительно других.
- Правка без изменений (added и removed по нулю) даст пустую полоску — скрывайте её.
- Помечать current стоит ровно одну версию, иначе метка теряет смысл.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

npx shadcn@latest add https://vibeui.ru/r/timeline-005.json
https://vibeui.ru/r/timeline-005.json

Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-timeline-005-*. Серверный: хуков нет. Доля добавленного считается на рендере и передаётся в CSS одной переменной --vibeui-timeline-005-share, которой задаётся ширина зелёной части полоски; красная часть занимает остаток через flex:1. Числа +N и −N стоят рядом текстом: полоска без подписи — украшение, а не данные. Номер версии оформлен как отдельная плашка в первой колонке grid, текущая версия помечена цветом рамки и словом «текущая».

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Timeline005Revision = {
  version: string
  author: string
  note: string
  time: string
  added?: number
  removed?: number
  current?: boolean
}

export type Timeline005Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children"
> & {
  revisions?: Timeline005Revision[]
  title?: string
  accent?: string
}

// Идея компонента: история правок документа, где объём изменения видно
// глазом. Рядом с каждой версией стоит двухцветная полоска: её левая часть
// пропорциональна добавленным строкам, правая — удалённым. Числа продублированы
// текстом, потому что полоска без подписи — украшение, а не данные.
const STYLES = `
:where([data-vibeui-block="timeline-005"]){
--vibeui-timeline-005-bg:oklch(1 0 0);
--vibeui-timeline-005-fg:oklch(0.22 0.014 265);
--vibeui-timeline-005-muted:oklch(0.57 0.014 265);
--vibeui-timeline-005-border:oklch(0.91 0.006 265);
--vibeui-timeline-005-added:oklch(0.6 0.13 150);
--vibeui-timeline-005-removed:oklch(0.6 0.16 25);
--vibeui-timeline-005-accent:oklch(0.55 0.18 262);
--vibeui-timeline-005-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="timeline-005"]{
display:flex;flex-direction:column;gap:0.75rem;
width:100%;max-width:28rem;box-sizing:border-box;padding:0.9375rem;
background:var(--vibeui-timeline-005-bg);
border:1px solid var(--vibeui-timeline-005-border);border-radius:0.875rem;
font-family:var(--vibeui-timeline-005-font);color:var(--vibeui-timeline-005-fg);
}
[data-vibeui-block="timeline-005"] [data-part="title"]{margin:0;font-size:0.9375rem;font-weight:650}
[data-vibeui-block="timeline-005"] ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
[data-vibeui-block="timeline-005"] li{
position:relative;display:grid;grid-template-columns:2.75rem 1fr;
gap:0.625rem;padding:0 0 0.875rem;
}
[data-vibeui-block="timeline-005"] li::before{
content:"";position:absolute;left:1.3125rem;top:1.5rem;bottom:0;
width:1px;background:var(--vibeui-timeline-005-border);
}
[data-vibeui-block="timeline-005"] li:last-child{padding-bottom:0}
[data-vibeui-block="timeline-005"] li:last-child::before{display:none}
/* Номер версии — не иконка: он и есть смысл строки, и его читают вслух. */
[data-vibeui-block="timeline-005"] [data-part="version"]{
display:flex;align-items:center;justify-content:center;
height:1.375rem;box-sizing:border-box;padding:0 0.375rem;
border:1px solid var(--vibeui-timeline-005-border);border-radius:0.375rem;
background:var(--vibeui-timeline-005-bg);
font-size:0.6875rem;font-weight:700;font-variant-numeric:tabular-nums;
color:var(--vibeui-timeline-005-muted);
}
[data-vibeui-block="timeline-005"] li[data-current="true"] [data-part="version"]{
border-color:var(--vibeui-timeline-005-accent);color:var(--vibeui-timeline-005-accent);
}
[data-vibeui-block="timeline-005"] [data-part="body"]{display:flex;flex-direction:column;gap:0.1875rem;min-width:0}
[data-vibeui-block="timeline-005"] [data-part="note"]{font-size:0.875rem;font-weight:600;line-height:1.3}
[data-vibeui-block="timeline-005"] [data-part="by"]{font-size:0.75rem;color:var(--vibeui-timeline-005-muted)}
[data-vibeui-block="timeline-005"] [data-part="who"]{color:var(--vibeui-timeline-005-fg);font-weight:600}
[data-vibeui-block="timeline-005"] [data-part="diff"]{
display:flex;align-items:center;gap:0.4375rem;margin-top:0.125rem;
font-size:0.6875rem;font-variant-numeric:tabular-nums;
}
[data-vibeui-block="timeline-005"] [data-part="bar"]{
display:flex;width:4rem;height:0.25rem;border-radius:9999px;overflow:hidden;
background:var(--vibeui-timeline-005-border);
}
[data-vibeui-block="timeline-005"] [data-part="plus"]{background:var(--vibeui-timeline-005-added);width:var(--vibeui-timeline-005-share,50%)}
[data-vibeui-block="timeline-005"] [data-part="minus"]{background:var(--vibeui-timeline-005-removed);flex:1}
[data-vibeui-block="timeline-005"] [data-part="count-plus"]{color:var(--vibeui-timeline-005-added);font-weight:650}
[data-vibeui-block="timeline-005"] [data-part="count-minus"]{color:var(--vibeui-timeline-005-removed);font-weight:650}
[data-vibeui-block="timeline-005"] [data-part="badge"]{
margin-left:auto;padding:0.0625rem 0.375rem;border-radius:9999px;
background:color-mix(in oklab,var(--vibeui-timeline-005-accent) 12%,transparent);
color:var(--vibeui-timeline-005-accent);font-size:0.625rem;font-weight:700;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="timeline-005"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_REVISIONS: Timeline005Revision[] = [
  {
    version: "v12",
    author: "Марк Иванов",
    note: "Переписан раздел про тарифы",
    time: "сегодня, 14:20",
    added: 64,
    removed: 12,
    current: true,
  },
  {
    version: "v11",
    author: "Аня Петрова",
    note: "Правки после юридической проверки",
    time: "вчера, 18:05",
    added: 18,
    removed: 44,
  },
  {
    version: "v10",
    author: "Лиза Ким",
    note: "Добавлены примеры договоров",
    time: "11 марта",
    added: 132,
    removed: 3,
  },
  {
    version: "v9",
    author: "Марк Иванов",
    note: "Первая полная версия",
    time: "6 марта",
    added: 210,
    removed: 0,
  },
]

/**
 * История правок документа: автор, комментарий и объём изменения полоской.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Timeline005({
  revisions = DEFAULT_REVISIONS,
  title = "История документа",
  accent,
  className,
  style,
  ...props
}: Timeline005Props) {
  const palette = {
    ...(accent ? { "--vibeui-timeline-005-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-timeline-005" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="timeline-005"
        className={className}
        style={palette}
      >
        <h3 data-part="title">{title}</h3>
        <ol>
          {revisions.map((revision) => {
            const added = revision.added ?? 0
            const removed = revision.removed ?? 0
            const total = added + removed || 1
            return (
              <li key={revision.version} data-current={revision.current}>
                <span data-part="version">{revision.version}</span>
                <div data-part="body">
                  <span data-part="note">{revision.note}</span>
                  <span data-part="by">
                    <span data-part="who">{revision.author}</span> ·{" "}
                    {revision.time}
                  </span>
                  <p data-part="diff">
                    <span
                      data-part="bar"
                      aria-hidden="true"
                      style={
                        {
                          "--vibeui-timeline-005-share": `${Math.round((added / total) * 100)}%`,
                        } as CSSProperties
                      }
                    >
                      <span data-part="plus" />
                      <span data-part="minus" />
                    </span>
                    <span data-part="count-plus">+{added}</span>
                    <span data-part="count-minus">−{removed}</span>
                    {revision.current ? (
                      <span data-part="badge">текущая</span>
                    ) : null}
                  </p>
                </div>
              </li>
            )
          })}
        </ol>
      </section>
    </>
  )
}