diff --git a/README.ru.md b/README.ru.md new file mode 100644 index 0000000..6ce72fb --- /dev/null +++ b/README.ru.md @@ -0,0 +1,106 @@ +
+ +Lisse + +

Lisse

+ +SVG-примитивы для плавно скругленных углов в React, Vue и Svelte. +Пиксельно точные сквирклы как в Figma и еще три типа кривых для углов. + +[![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=%40lisse%2Fcore)](https://www.npmjs.com/package/@lisse/core) +[![bundle](https://img.shields.io/bundlephobia/minzip/%40lisse%2Fcore?label=bundle)](https://bundlephobia.com/package/@lisse/core) +[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE) +[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)](https://www.typescriptlang.org/) + +**[Онлайн-демо →](https://corne.rs)** + +[English](./README.md) · [日本語](./README.ja.md) · **Русский** · [Deutsch](./README.de.md) + +
+ +## Что это? + +Стандартный CSS `border-radius` создает в углах дуги окружности. Дизайнеры (а также Apple и Figma) предпочитают **сквирклы** — углы, где кривизна плавно переходит в прямые стороны, создавая более органичную форму. + +Lisse реализует [алгоритм сглаживания углов Figma](https://www.figma.com/blog/desperately-seeking-squircles/) и еще три типа кривых для углов на JavaScript. Библиотека генерирует SVG-пути и значения CSS `clip-path`, а также предоставляет полноценные биндинги для React, Vue и Svelte. + +## Быстрый старт + +```sh +npm install @lisse/react +``` + +```tsx +import { SmoothCorners } from "@lisse/react"; + +function Card() { + return ( + +

Hello, squircle

+
+ ); +} +``` + +Для Vue, Svelte или ядра без привязки к фреймворку см. [пакеты](#packages) ниже. + +## Типы кривых + +| Кривая | Описание | +|---|---| +| `arc` | Четверть окружности. Полностью соответствует CSS `border-radius`. | +| `squircle` *(по умолчанию)* | Кубические участки Figma + центральная дуга. | +| `superellipse` | `\|x/R\|^n + \|y/R\|^n = 1`. G2-сопряжение со сторонами при `n > 2`. | +| `clothoid` | Сопряжение спиралью Эйлера от прямой стороны к центральной дуге. G2 на всем протяжении. | + +Математическая справка: [`docs/curves.md`](docs/curves.md). + +## Пакеты + +| Пакет | npm | Описание | +|---|---|---| +| `@lisse/core` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=)](https://www.npmjs.com/package/@lisse/core) | Генерация путей и эффекты без привязки к фреймворку | +| `@lisse/react` | [![npm](https://img.shields.io/npm/v/%40lisse%2Freact?label=)](https://www.npmjs.com/package/@lisse/react) | React-хук и компонент | +| `@lisse/vue` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fvue?label=)](https://www.npmjs.com/package/@lisse/vue) | Composable-функция и компонент для Vue | +| `@lisse/svelte` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fsvelte?label=)](https://www.npmjs.com/package/@lisse/svelte) | Action для Svelte | + +## Возможности + +- Четыре типа кривых для углов (`arc`, `squircle`, `superellipse`, `clothoid`) с настройкой каждого угла отдельно +- Внутренние / внешние / средние обводки с вариантами стиля (solid, dashed, dotted, double, groove, ridge) +- Падающие и внутренние тени, а также градиентные обводки через API +- Автоэффекты: CSS `border` и `box-shadow` преобразуются в SVG-эквиваленты при монтировании +- ~1.5 мкс на вызов `generatePath()`; 500 углов пересчитываются менее чем за 1 мс ([подробности](docs/performance.md)) +- Никаких runtime-зависимостей; двойной экспорт ESM + CJS; безопасный для SSR подпуть `/path` + +## Документация + +- [Справочник API](docs/api.md): полная таблица экспортов +- [Миграция](MIGRATION.md): переход между версиями +- [SSR](docs/ssr.md): серверный рендеринг и edge-среды выполнения +- [Кривые](docs/curves.md): математическая справка по каждому типу кривой +- [Поддержка браузерами](docs/browser-support.md): матрица совместимости +- [Хуки для стилизации](docs/styling.md): атрибуты `data-slot` / `data-state` +- [Эффекты](docs/effects.md): обводки, тени, градиенты, автоэффекты +- [Производительность](docs/performance.md): бенчмарки и архитектура кэша +- [Внутреннее устройство](docs/internals.md): как работают обводки, тени и обработка изменения размера +- [Подводные камни](docs/gotchas.md): особенности `clip-path`, включая outline при фокусе, переполнение и полосы прокрутки +- [Конфигурация](docs/configuration.md): настройка отдельных углов, выбор API, использование с фреймворками + +## Участие в разработке + +Issues и PR приветствуются. Документация для контрибьюторов (процесс релиза, стратегия тестирования, бенчмарки) находится в [`docs/`](./docs/). + +## Лицензия + +[MIT](./LICENSE) + +--- + +
+ +Создано [Jace](https://ja.mt) + +[X](https://ja.mt/x) | [Bluesky](https://ja.mt/bsky) | [Instagram](https://ja.mt/ig) | [Threads](https://ja.mt/threads) + +
diff --git a/apps/website/messages/ru.json b/apps/website/messages/ru.json new file mode 100644 index 0000000..155b640 --- /dev/null +++ b/apps/website/messages/ru.json @@ -0,0 +1,166 @@ +{ + "$schema": "https://inlang.com/schema/inlang-message-format", + "curves_effect_border": "рамка {n} px", + "curves_effect_drop_shadow": "падающая тень", + "curves_effect_fill_only": "только заливка", + "curves_effect_inner_border": "внутренняя рамка {n} px", + "curves_effect_inner_shadow": "внутренняя тень", + "curves_effect_outer_border": "внешняя рамка {n} px", + "curves_effect_shadow_and_border": "тень + рамка", + "curves_matrix_description": "Радиус {radius}, сглаживание {smoothing}. Каждая строка — отдельная кривая, каждый столбец — отдельный эффект.", + "curves_matrix_title": "Матрица проверки «кривая × эффект»", + "demo_compare_enter": "Перейти к сравнению", + "demo_compare_exit": "Выйти из сравнения", + "demo_compare_label": "Сравнение", + "demo_heading": "Демо сквиркла", + "demo_smoothing_disable": "Отключить сглаживание", + "demo_smoothing_enable": "Включить сглаживание", + "demo_smoothing_label_off": "Без сглаживания", + "demo_smoothing_label_on": "Сглаживание", + "demo_state_compare_active": "Режим сравнения включён.", + "demo_state_compare_smoothing_off": "Передний слой совпадает с задним, поэтому красные углы не видны.", + "demo_state_compare_smoothing_on": "Четыре красных клина показывают, насколько сквиркл уходит внутрь относительно заднего слоя со стандартным CSS-скруглением.", + "demo_state_smoothing_off": "Сглаживание отключено; демо-квадрат использует обычные CSS-углы в виде четверти окружности.", + "demo_state_smoothing_on": "Сглаживание включено; демо-квадрат использует сквиркл-углы Lisse.", + "header_def_1": "с ровной, непрерывной поверхностью; гладкий на ощупь", + "header_def_1_example": "un galet lisse", + "header_def_2": "гладкий, ровный; без изломов и шероховатостей (cheveux lisses).", + "header_def_3": "перен. отполированный, без трения; текущий без перерывов.", + "header_def_b": "(о кривой, линии или переходе) непрерывный; без резких изменений (une courbe lisse).", + "header_etymology_french_abbr": "фр.", + "header_etymology_smooth": "гладкий", + "header_pos_adjective": "прил.", + "header_pronunciation_sr": "Произносится «лис», прилагательное, от французского lisse — «гладкий».", + "install_copied_announcement": "Команда установки {pkg} скопирована в буфер обмена", + "install_copy_command_label": "Скопировать {command} в буфер обмена", + "install_error_announcement": "Не удалось скопировать команду установки {pkg}", + "install_heading": "Установка", + "intro_lead": "Lisse — небольшая JavaScript-библиотека, которая рисует сквиркл-углы: ту же непрерывную кривую, что используют Figma и iOS. Есть биндинги для React, Vue и Svelte, а также ядро без привязки к фреймворку. Поддерживаются настройки для каждого угла, рамки и тени.", + "math_arc_body_after_code": "рисует: четверть окружности, пристыкованную к прямым сторонам. Касательные совпадают, но кривизна одним скачком меняется с 0 на прямой стороне до 1/R внутри дуги — это и есть тот шов, на который жалуются дизайнеры.", + "math_arc_body_before_code": "— это то, что CSS", + "math_arc_radius_readout": "центр · R = {r}", + "math_clothoid_body": "сопрягает каждую прямую сторону с центральной дугой окружности через сегмент спирали Эйлера, у которого кривизна линейно растёт вдоль длины дуги — от 0 на прямой стороне до 1/R на дуге. G2 везде по построению (κ совпадает на каждом стыке), при этом характер заметно отличается от сквиркла Apple/Figma: вершина круглее, а угловой участок длиннее. Классическая геометрия переходных кривых на дорогах.", + "math_comb_density_smooth": "гладкая кривая", + "math_comb_density_whiskers": "{n} усиков", + "math_continuity_aria_label": "Непрерывность: {gn}", + "math_copy_copied": "Скопировано", + "math_copy_failed": "Не удалось скопировать", + "math_copy_svg": "Копировать SVG", + "math_copy_svg_aria_label": "Скопировать SVG в буфер обмена", + "math_curve_arc_label": "Дуга", + "math_curve_arc_sub": "CSS border-radius", + "math_curve_clothoid_label": "Клотоида", + "math_curve_clothoid_sub": "Сопряжение спиралью Эйлера", + "math_curve_squircle_label": "Сквиркл", + "math_curve_squircle_sub": "По умолчанию в Lisse · Figma", + "math_curve_superellipse_label": "Суперэллипс", + "math_curve_superellipse_sub": "CSS corner-shape", + "math_curve_type_aria_label": "Тип кривой", + "math_diagram_aria_label": "Построение угловой кривой с гребёнкой кривизны. Две прямые стороны сходятся в углу, который заменяется выбранной сглаживающей кривой. Зелёная гребёнка показывает кривизну в каждой точке вдоль кривой.", + "math_docs_reference": "Математические выводы и ссылки на источники находятся в", + "math_download": "Скачать", + "math_download_svg_aria_label": "Скачать SVG", + "math_intro_g1": "означает, что касательные на стыке совпадают, но кривизна может меняться скачком (на гребёнке есть разрыв).", + "math_intro_g2": "означает, что кривизна непрерывна, поэтому гребёнка плавно проходит через стыки. Выберите кривую и подвигайте R/сглаживание, чтобы увидеть, как ведёт себя каждая из них.", + "math_intro_lead": "Четыре варианта построения угла, выведенные из одной математики. Зелёная гребёнка показывает кривизну в каждой точке вдоль кривой — длина усика пропорциональна κ.", + "math_shape_label_exponent": "Показатель степени (n)", + "math_shape_label_smoothing": "Сглаживание", + "math_slider_comb_density": "Плотность гребёнки", + "math_slider_corner_radius": "Радиус угла", + "math_squircle_body": "— текущая форма Lisse и та форма, которую использует Figma. Два кубических плеча Безье плавно входят в меньшую центральную дугу окружности. Кривизна растёт постепенно, а не скачком, но в точках P3 / P4, где каждое плечо встречается с дугой, всё ещё есть небольшая ступенька — на гребёнке она видна как «шапка Бэтмена». Это G1, а не G2.", + "math_superellipse_body_after": "сводится к этому (при n = 4). Для любого n > 2 кривизна точно равна 0 там, где кривая встречается с каждой прямой стороной, поэтому это G2 без дополнительных плеч. Но распределение кривизны отличается от формы Apple/Figma: она воспринимается как отдельное семейство, а не как более гладкая версия той же кривой.", + "math_superellipse_body_mid": "— это то, что CSS", + "meta_app_description": "JavaScript-библиотека, которая рисует сквиркл-углы — ту же непрерывную кривую, что используют Figma и iOS. Биндинги для React, Vue и Svelte, плюс ядро без привязки к фреймворку. Поддерживаются настройки для каждого угла, рамки и тени.", + "meta_home_description": "Сквиркл-углы для веба. Биндинги для React, Vue и Svelte.", + "meta_home_title": "lisse", + "meta_playground_description": "Настраивайте радиус, сглаживание, тип кривой, рамки и тени прямо в браузере.", + "meta_playground_title": "песочница — lisse", + "meta_what_description": "Почему сквирклы выглядят мягче, чем CSS border-radius, и как Lisse их рисует.", + "meta_what_title": "что такое сквиркл — lisse", + "nav_aria_site": "Сайт", + "nav_docs": "Документация", + "nav_follow": "Подписаться", + "nav_home": "Главная", + "nav_playground": "Песочница", + "nav_what": "Что?", + "playground_border_description": "Рамки, которые повторяют контур гладкого угла. solid, dashed, dotted, double, groove, ridge — стандартные CSS-стили линий.", + "playground_center_border_title": "Рамка по центру", + "playground_drop_shadow_description": "Падающие тени на SVG, построенные по тому же пути сквиркла, что и элемент выше. Совпадают с формой поверхности при любом радиусе.", + "playground_drop_shadow_title": "Падающая тень", + "playground_inner_border_title": "Внутренняя рамка", + "playground_inner_shadow_description": "Внутренние тени, отрисованные внутри контура гладкого угла. Полезны для утопленных поверхностей, нажатых состояний или мягкой заливки под контентом.", + "playground_inner_shadow_title": "Внутренняя тень", + "playground_outer_border_title": "Внешняя рамка", + "section_border_dash_label": "Штрих", + "section_border_dashcap_aria": "Окончание штриха: {title}", + "section_border_dashcap_none": "Нет", + "section_border_dashcap_round": "Скруглённое", + "section_border_dashcap_square": "Квадратное", + "section_border_gap_label": "Пробел", + "section_border_preset_aria": "Стиль: {title}", + "section_border_preset_dashed": "Штриховая", + "section_border_preset_dotted": "Пунктирная", + "section_border_preset_double": "Двойная", + "section_border_preset_groove": "Вдавленная", + "section_border_preset_none": "Нет", + "section_border_preset_ridge": "Выпуклая", + "section_border_preset_solid": "Сплошная", + "section_border_thickness_label": "Толщина", + "section_cornershape_desc": "Сглаживание управляет тем, насколько плавно кривая переходит в прямую сторону. 0 даёт дугу окружности, 1 — полноценный сквиркл.", + "section_cornershape_ios_label": "iOS – {value}", + "section_cornershape_preset_aria": "Пресет сглаживания", + "section_cornershape_preset_off": "Без сглаживания", + "section_cornershape_preset_on": "Со сглаживанием", + "section_cornershape_slider_label": "Сглаживание", + "section_cornershape_title": "Форма угла", + "section_curvetype_desc": "Выберите способ построения угла. Сквиркл — вариант Lisse по умолчанию (кривая Figma). Дуга — это CSS border-radius. Суперэллипс — семейство CSS corner-shape (n = 5 — ближе всего к Figma 0.6). Клотоида — G2-сопряжение спиралью Эйлера.", + "section_curvetype_exponent_label": "Показатель степени (n)", + "section_curvetype_preset_arc": "Дуга", + "section_curvetype_preset_aria": "Тип кривой", + "section_curvetype_preset_clothoid": "Клотоида", + "section_curvetype_preset_squircle": "Сквиркл", + "section_curvetype_preset_superellipse": "Суперэллипс", + "section_curvetype_radius_label": "Радиус", + "section_curvetype_smoothing_label": "Сглаживание", + "section_curvetype_title": "Тип кривой", + "section_percorner_bottom_left_label": "Нижний левый", + "section_percorner_bottom_right_label": "Нижний правый", + "section_percorner_desc": "У каждого угла может быть свой радиус и своё сглаживание, независимо от остальных. Полезно для асимметричных форм вроде вкладок и чипов.", + "section_percorner_preset_all": "Все одинаковые", + "section_percorner_preset_aria": "Пресет для углов", + "section_percorner_preset_custom": "Настроить", + "section_percorner_preset_single": "Один угол", + "section_percorner_preset_top": "Только верхние", + "section_percorner_title": "Радиусы по углам", + "section_percorner_top_left_label": "Верхний левый", + "section_percorner_top_right_label": "Верхний правый", + "section_radius_desc": "Настройте радиус угла. Чем больше значение, тем круглее углы; на максимуме прямоугольник превращается в круг.", + "section_radius_preset_0": "Радиус: 0", + "section_radius_preset_20": "Радиус: 20", + "section_radius_preset_50": "Радиус: 50", + "section_radius_preset_aria": "Пресет радиуса", + "section_radius_preset_custom": "Настроить", + "section_radius_slider_label": "Радиус", + "section_radius_title": "Радиус", + "section_shadow_blur_label": "Размытие", + "section_shadow_preset_aria": "Пресет: {title}", + "section_shadow_preset_custom": "Настроить", + "section_shadow_preset_medium": "Средняя", + "section_shadow_preset_none": "Нет", + "section_shadow_preset_subtle": "Лёгкая", + "section_shadow_spread_label": "Распространение", + "section_shadow_x_label": "X", + "section_shadow_y_label": "Y", + "switcher_aria_label": "Язык", + "what_p10_rest_translates": "Всё остальное в дизайне нормально переводится в CSS. Кривая была той частью, которая не переводилась. Теперь переводится.", + "what_p11_docs_pointer": "Более подробный и сильно технический разбор — математика пути, правила композиции для отдельных углов и стратегия рендеринга Lisse — находится в документации по ссылке внизу страницы.", + "what_p1_intro": "Сквиркл — это скруглённый прямоугольник, у которого углы плавно переходят в прямые стороны с непрерывной кривизной, а не одной дугой окружности. Apple представила эту форму в iOS в 2013 году вместе с iOS 7: по ней обрезалась каждая иконка приложения. Figma и Sketch добавили сглаживание углов в 2018 году, и с тех пор эта форма распространяется по дизайн-инструментам.", + "what_p2_border_radius": "CSS border-radius рисует в каждом углу одну дугу. Дуга встречается с прямой стороной с резким скачком касательной: кривизна за один шаг меняется от нуля до максимума. Глаз считывает это как угол, приделанный к прямоугольнику. На малых радиусах этого никто не замечает. Примерно после 16 пикселей шов становится виден, и угол выглядит жёстче, чем должен.", + "what_p3_two_shapes": "Шов убирают две формы. Суперэллипс находится между окружностью и квадратом, а одно число управляет тем, насколько он круглый или квадратный. Другая форма — небольшая дуга окружности на вершине угла с плавными плечами по обе стороны: они вводят дугу в прямые стороны так, чтобы кривизна не прыгала. В масштабе иконки эти формы похожи, но внутри построены по-разному.", + "what_p4_apple_baggage": "Apple использует форму «дуга с плечами», и у этой реализации есть багаж. Две половины каждого угла не совсем зеркальны. С одной стороны есть крошечный прямой сегмент, которого почти наверняка не должно быть: разработчики, вытащившие реальный путь из iOS, описывают его как вероятный баг, который сохраняется от релиза к релизу. Ещё форма ломается при малых соотношениях сторон: перестаёт выглядеть как сквиркл и превращается в обычный скруглённый прямоугольник. Ничего из этого не настраивается. Кривая Apple фиксирована.", + "what_p5_figma_redraw": "Когда Figma добавила сглаживание в 2018 году, она решила перерисовать кривую с нуля, а не копировать путь Apple. В тогдашней статье Daniel Furse объясняет почему. Путь Apple — не чистая формула, которую можно описать одной строкой. Он переносит асимметрию, не даёт ручки сглаживания и разваливается при малых соотношениях сторон. Повторная реализация того же семейства форм решила все три проблемы сразу. Две половины каждого угла стали нормально зеркалиться. Один регулятор сглаживания управляет тем, насколько мягким становится угол: ноль возвращает обычную дугу окружности, единица даёт максимальную мягкость, которую допускает построение. Значение около 0.6 достаточно близко к форме Apple, чтобы на масштабе иконки никто не заметил разницы, но геометрия под капотом стала удобнее для работы.", + "what_p6_css_catching_up": "Сам CSS тоже догоняет. Спецификация CSS — это набор правил, которые соглашаются реализовать все браузеры; её пишет и пересматривает рабочая группа W3C. Всё, что попадает в спецификацию, со временем в той или иной форме появляется в Chrome, Safari и Firefox. Сейчас этот путь проходит новое свойство corner-shape. Оно стоит рядом с border-radius и меняет кривую, по которой строится радиус, так что авторы могут выбрать не только стандартную дугу окружности и не тянуться за SVG.", + "what_p7_squircle_keyword": "В спецификации есть ключевое слово squircle, и кажется, будто проблема решена. Но если прочитать определение внимательно, это ключевое слово сводится к суперэллипсу с фиксированным показателем степени. Это другое семейство форм. На первый взгляд оно похоже на iOS-сквиркл, но кривизна распределена иначе, и на интерфейсных размерах разница заметна. Apple, Figma и Lisse рисуют «дугу с плечами». CSS по умолчанию рисует другую форму и называет её тем же словом.", + "what_p8_browser_support": "С поддержкой в браузерах пока тоже рано. Chrome добавил это свойство в августе 2025 года. В Safari оно есть за feature flag, но в релиз ещё не вышло. Firefox не начинал. Даже по оптимистичному сценарию, где все движки выпустят поддержку в течение года, первой приедет не та форма, которая совпадает с iOS или Figma. CSS-свойство — полезный примитив для новых дизайнов, которые осознанно выбирают суперэллипс. Но это не замена сквирклу, который люди уже видят в iOS, в файлах Figma и в дизайн-системах, которые их копируют.", + "what_p9_lisse_fits": "Здесь и нужен Lisse. Он рисует сквиркл Figma как SVG-путь и обрезает по нему элемент. Рамки и тени повторяют ту же форму: обводки идут по сквирклу, а тени — это смещённые копии клипа, поэтому мягкий край остаётся согласованным с поверхностью, на которой лежит. Радиусы отдельных углов складываются чисто, без изломов на стыках между углами с разной степенью скругления. Один observer следит за каждым элементом, обёрнутым в Lisse, и перерисовывает его только тогда, когда блок действительно меняет размер." +} diff --git a/apps/website/project.inlang/settings.json b/apps/website/project.inlang/settings.json index b2ef600..5906553 100644 --- a/apps/website/project.inlang/settings.json +++ b/apps/website/project.inlang/settings.json @@ -2,7 +2,8 @@ "$schema": "https://inlang.com/schema/project-settings", "baseLocale": "en", "locales": [ - "en" + "en", + "ru" ], "modules": [ "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4.4.0/dist/index.js",