Mercury UI — дизайн-система

Mercury UI — библиотека компонентов дизайн-системы: пакет @fiberfx/ui, версия 4.0.0. Компоненты написаны на Mercury Hyperscript; цвета, типографика, отступы, радиусы и тени берутся из единой таблицы токенов.

Что такое Mercury UI

Пакет содержит 139 компонентов, по одному каталогу на компонент в fiberfx/ui/src/components/<family>/<Name>/. Каждый каталог объединяет три файла:

• <Name>.tsx: компонент — функция на @fiberfx/hyperscript. Его JSX компилируется для среды выполнения Hyperscript.
• <Name>.prompt.md: контракт, написанный вручную: назначение, свойства, допустимые значения перечислений, из чего компонент состоит и где используется, примеры и примечания. Такой файл есть у каждого из 139 компонентов.
• index.ts: одна строка export * from "./<Name>", которую подхватывает общий файл экспортов пакета.

У @fiberfx/ui две peer-зависимости той же версии: @fiberfx/hyperscript выполняет рендеринг, а @fiberfx/core содержит то, у чего нет собственной разметки: cx, форматирование дат и локалей, управление фокусом и окружение UI.

Импорт

Всё импортируется из одной точки входа, @fiberfx/ui:

import { Button, Card } from "@fiberfx/ui";

export function SaveCard() {
  return (
    <Card variant="raised" title="Draft">
      <Button variant="primary">Save</Button>
    </Card>
  );
}

Для опубликованной версии 4.0.0 подключайте стили явно. В нативном приложении добавьте import "@fiberfx/ui/styles.css"; в браузерном HTML используйте link на закреплённую таблицу стилей. Исходная точка входа src/index.ts содержит импорт CSS, но это не основание считать импорт опубликованного JavaScript достаточным для оформления. Подпути CSS:

Десять семейств

Каждое имя в таблице соответствует каталогу; он экспортирует компонент и его типы. Некоторые каталоги экспортируют несколько имён: Sheet — единый компонент и его части, PreviewTrigger — также связанные части Preview.

Свойства с перечислениями и токены

Оформление компонента задаётся свойствами с перечислениями, а не именами его классов. Button принимает variant (primary, secondary, outline, ghost, destructive, inverse) и size (sm, md, lg); Card — variant (flat, raised, floating). Каждое значение выбирает внутренние классы компонента, а они читают семантические токены, поэтому все компоненты следуют теме.

Классы mx-btn, mx-card и остальные — внутренние для пакета: приложение их не пишет. Собственная раскладка приложения оформляется теми же токенами через rgb(var(--token)). Таблица токенов разобрана в UI0.

Главы

Что поставляется

139 компонентов и их контракты входят в @fiberfx/ui. Версия 4.0.0 доступна в npm с 2026-11-05. Главы UI0–UI6 написаны; UI7 запланирована и пока не имеет страницы.