Мелочи

Portal

Рендер в body мимо текущего поддерева. Нужен всем всплывающим слоям: элемент, отрисованный внутри контейнера с overflow: hidden, обрезается его границами, а z-index внутри чужого stacking context не спасает.

import { Portal } from "@toimetdev/pathlogs-core";

<Portal>
  <div style={{ position: "fixed", inset: 0 }}>…</div>
</Portal>

DragScroll

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

import { DragScroll } from "@toimetdev/pathlogs-core";

<DragScroll axis="x" keyboard className="flex gap-3 overflow-x-auto">
  {tabs.map((t) => <Tab key={t.id} {...t} />)}
</DragScroll>

Принимает те же настройки, что и useDragScroll: axis, momentum, keyboard, enabled. Классы прокрутки задаёт вызывающий код — компонент отвечает за поведение, а не за раскладку.

PageHint

Подсказка-субтитул под заголовком страницы.

import { PageHint } from "@toimetdev/pathlogs-core";

<h1>Доска проекта</h1>
<PageHint>Перетащите карточку к краю доски — она подкрутится сама.</PageHint>

Backdrop

Цветная подложка страницы: мягкое пятно вверху или градиент во всю ширину. В трекере это персональный фон проекта — у каждого участника свой.

import { Backdrop } from "@toimetdev/pathlogs-core";

<Backdrop backdrop={{ color: "#6366f1", colorTo: "#ec4899", angle: 135 }} />

// однотонная — радиальное пятно вверху слева
<Backdrop backdrop={{ color: "#10b981" }} />

Рисуется fixed за контентом и не перехватывает указатель — по тексту над ней можно кликать и выделять его. Цвета полупрозрачные, поэтому одна и та же подложка работает в обеих темах.

CSS-строку можно получить и отдельно — backdropCss(bg) из @toimetdev/pathlogs-tokens. Одна функция на саму подложку и на превью в настройках: разъехаться им негде.