From e95a1e73e879c18d86225ee70e811c57298eadbf Mon Sep 17 00:00:00 2001 From: Jace <60551230+JaceThings@users.noreply.github.com> Date: Tue, 2 Jun 2026 20:34:15 +0200 Subject: [PATCH 1/4] =?UTF-8?q?feat(website):=20add=20Russian=20(=D0=A0?= =?UTF-8?q?=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9)=20translation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds the ru locale: full translated message catalog (messages/ru.json), registers the locale in project.inlang/settings.json, and a translated README.ru.md. Branched off feat/i18n-infrastructure (merge that first). --- README.ru.md | 106 ++++++++++++++ apps/website/messages/ru.json | 166 ++++++++++++++++++++++ apps/website/project.inlang/settings.json | 3 +- 3 files changed, 274 insertions(+), 1 deletion(-) create mode 100644 README.ru.md create mode 100644 apps/website/messages/ru.json diff --git a/README.ru.md b/README.ru.md new file mode 100644 index 0000000..5eab8c8 --- /dev/null +++ b/README.ru.md @@ -0,0 +1,106 @@ +
+ +Lisse + +

Lisse

+ +SVG-примитивы с гладкими углами для React, Vue и Svelte. +Пиксель-в-пиксель точные squircle из Figma + три другие угловые кривые. + +[![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=%40lisse%2Fcore)](https://www.npmjs.com/package/@lisse/core) +[![bundle](https://deno.bundlejs.com/badge?q=%40lisse%2Fcore&label=bundle)](https://bundlejs.com/?q=%40lisse%2Fcore) +[![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.zh-Hans.md) · [日本語](./README.ja.md) · [한국어](./README.ko.md) · [Português (BR)](./README.pt-BR.md) · **Русский** · [Deutsch](./README.de.md) + +
+ +## Что это? + +Стандартный CSS `border-radius` создаёт в углах дуги окружности. Дизайнеры (а также Apple и Figma) предпочитают **squircle** — углы, в которых кривизна плавно переходит в прямые кромки, создавая более органичную форму. + +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` | Сопряжение спиралью Euler от прямой кромки к центральной дуге. 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 µs на вызов `generatePath()`; 500 углов пересчитываются за <1 мс ([подробности](docs/performance.md)) +- Ноль зависимостей во время выполнения; двойной экспорт 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`, такие как контуры фокуса, переполнение, полосы прокрутки +- [Конфигурация](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..e32f270 --- /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": "Демонстрация Squircle", + "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": "Четыре красных клина показывают, насколько squircle подтягивается внутрь относительно скруглённого средствами CSS заднего слоя.", + "demo_state_smoothing_off": "Сглаживание отключено; в демонстрационном квадрате используются стандартные углы CSS из четверти окружности.", + "demo_state_smoothing_on": "Сглаживание включено; в демонстрационном квадрате используются углы squircle из 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, которая рисует углы squircle, ту же непрерывную кривую, что используют 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": "сопрягает каждую прямую кромку с центральной дугой окружности через сегмент кривой Euler, кривизна которого нарастает линейно вдоль длины дуги — 0 на кромке, 1/R на дуге. G2 повсюду по построению (κ совпадает на каждом шве), при этом характер заметно отличается от squircle 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": "Clothoid", + "math_curve_clothoid_sub": "Сопряжение спиралью Euler", + "math_curve_squircle_label": "Squircle", + "math_curve_squircle_sub": "По умолчанию в Lisse · Figma", + "math_curve_superellipse_label": "Superellipse", + "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. Два кубических плеча Bézier плавно переходят в меньшую центральную дугу окружности. Кривизна нарастает постепенно, а не скачком, но в точках 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, которая рисует углы squircle — ту же непрерывную кривую, что используют Figma и iOS. Привязки для React, Vue и Svelte, а также независимое от фреймворков ядро. Управление каждым углом по отдельности, границы и тени в комплекте.", + "meta_home_description": "Углы Squircle для веба. Привязки для React, Vue и Svelte.", + "meta_home_title": "lisse", + "meta_playground_description": "Настраивайте радиус, сглаживание, тип кривой, границы и тени прямо в браузере.", + "meta_playground_title": "playground — lisse", + "meta_what_description": "Почему squircle выглядят мягче, чем CSS border-radius, и как Lisse их рисует.", + "meta_what_title": "что такое squircle — lisse", + "nav_aria_site": "Сайт", + "nav_docs": "Документация", + "nav_follow": "Подписаться", + "nav_home": "Главная", + "nav_playground": "Playground", + "nav_what": "Что?", + "playground_border_description": "Контурные границы, повторяющие путь гладкого угла. Solid, dashed, dotted, double, groove, ridge — стандартные стили линий CSS.", + "playground_center_border_title": "Центральная граница", + "playground_drop_shadow_description": "Отбрасываемые тени на основе SVG, обведённые по тому же пути squircle, что и элемент выше. Совпадают с формой поверхности при любом радиусе.", + "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 — полноценный squircle.", + "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": "Выберите построение угла. Squircle используется в Lisse по умолчанию (кривая Figma). Arc — это CSS border-radius. Superellipse — семейство CSS corner-shape (n = 5 — ближе всего к Figma 0.6). Clothoid — это G2-сопряжение спиралью Euler.", + "section_curvetype_exponent_label": "Показатель степени (n)", + "section_curvetype_preset_arc": "Дуга", + "section_curvetype_preset_aria": "Тип кривой", + "section_curvetype_preset_clothoid": "Clothoid", + "section_curvetype_preset_squircle": "Squircle", + "section_curvetype_preset_superellipse": "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": "squircle — это скруглённый прямоугольник, у которого углы плавно переходят в прямые кромки с непрерывной кривизной, а не одной дугой окружности. Apple представила эту форму в iOS в 2013 году вместе с iOS 7, где по ней вырезалась каждая иконка приложения. Figma и Sketch добавили сглаживание углов в 2018 году, и с тех пор форма распространяется по дизайнерским инструментам.", + "what_p2_border_radius": "CSS border-radius рисует в каждом углу одну дугу. Дуга встречается с прямой кромкой под резкой касательной: кривизна за один шаг скачком меняется от нуля до максимума. Глаз воспринимает это как прикреплённый угол. На малых радиусах этого никто не замечает. Примерно после 16 пикселей шов становится виден, и угол воспринимается жёстче, чем следовало бы.", + "what_p3_two_shapes": "Шов исправляют две формы. superellipse находится между окружностью и квадратом, и одно число управляет тем, насколько он круглый или квадратный. Другая форма — это небольшая дуга окружности на вершине угла с гладкими плечами по обе стороны, которые плавно вводят дугу в прямые кромки, так что кривизна нигде не меняется скачком. На масштабе иконки они выглядят похоже, но устроены изнутри по-разному.", + "what_p4_apple_baggage": "Apple использует форму «дуга с плечами», и у её реализации есть некоторый багаж. Две половины каждого угла не вполне зеркальны друг другу. На одной стороне есть крошечный прямой сегмент, которого почти наверняка там быть не должно: разработчики, извлёкшие реальный путь из iOS, описывают его как вероятный баг, сохраняющийся из версии в версию. Кроме того, форма ломается при малых соотношениях сторон, где перестаёт выглядеть как squircle и начинает выглядеть как обычный скруглённый прямоугольник. Ничто из этого не настраивается. Кривая 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, и звучит так, будто вся проблема решена. Прочитайте определение внимательно — и ключевое слово разрешается в superellipse с встроенным фиксированным показателем степени. Это другое семейство форм. На первый взгляд оно выглядит близко к squircle из iOS, но кривизна распределена иначе, и на размерах, используемых в интерфейсах, разница заметна. Apple, Figma и Lisse — все рисуют «дугу с плечами». CSS по умолчанию рисует нечто иное и называет это тем же именем.", + "what_p8_browser_support": "Поддержки в браузерах тоже пока нет. Chrome добавил это свойство в августе 2025 года. У Safari оно есть за флагом функции, но в релиз не поставлено. Firefox ещё не начинал. Даже по оптимистичному сценарию, при котором каждый движок выпустит его в течение года, первым появляется не та форма, что совпадает с iOS или Figma. CSS-свойство — полезный примитив для новых дизайнов, которые осознанно выбирают superellipse. Оно не замена squircle, который люди уже видят в iOS, в файлах Figma и в дизайн-системах, копирующих их.", + "what_p9_lisse_fits": "Вот тут и находит своё место Lisse. Он рисует squircle из Figma как путь SVG и обрезает по нему элемент. Границы и тени обводят ту же форму: контуры следуют за squircle, а тени — это смещённые копии обрезки, поэтому мягкий край остаётся согласован с поверхностью, на которой он лежит. Радиусы каждого угла компонуются чисто, без излома на границе между углами разной скруглённости. Один наблюдатель следит за каждым элементом, обёрнутым 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", From e280b9fcfb4d0f1289096a640ecdc44b7bf791a4 Mon Sep 17 00:00:00 2001 From: Jace <60551230+JaceThings@users.noreply.github.com> Date: Tue, 2 Jun 2026 22:53:07 +0200 Subject: [PATCH 2/4] fix(i18n): polish Russian translation copy MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Naturalness pass from a native-speaker review of how these terms are actually used: squircle→сквиркл, superellipse→суперэллипс, Euler→Эйлер, Bézier→Безье, spread label + feature-flag + playground fixes. Keys, placeholders, and the enforced do-not-translate tokens are unchanged. --- apps/website/messages/ru.json | 64 +++++++++++++++++------------------ 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/apps/website/messages/ru.json b/apps/website/messages/ru.json index e32f270..2889cde 100644 --- a/apps/website/messages/ru.json +++ b/apps/website/messages/ru.json @@ -12,16 +12,16 @@ "demo_compare_enter": "Включить режим сравнения", "demo_compare_exit": "Выйти из режима сравнения", "demo_compare_label": "Сравнение", - "demo_heading": "Демонстрация Squircle", + "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": "Четыре красных клина показывают, насколько squircle подтягивается внутрь относительно скруглённого средствами CSS заднего слоя.", - "demo_state_smoothing_off": "Сглаживание отключено; в демонстрационном квадрате используются стандартные углы CSS из четверти окружности.", - "demo_state_smoothing_on": "Сглаживание включено; в демонстрационном квадрате используются углы squircle из Lisse.", + "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).", @@ -35,11 +35,11 @@ "install_copy_command_label": "Скопировать {command} в буфер обмена", "install_error_announcement": "Не удалось скопировать команду установки {pkg}", "install_heading": "Установка", - "intro_lead": "Lisse — это небольшая библиотека на JavaScript, которая рисует углы squircle, ту же непрерывную кривую, что используют Figma и iOS. Есть привязки для React, Vue и Svelte, а также независимое от фреймворков ядро. В комплекте — управление каждым углом по отдельности, границы и тени.", + "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": "сопрягает каждую прямую кромку с центральной дугой окружности через сегмент кривой Euler, кривизна которого нарастает линейно вдоль длины дуги — 0 на кромке, 1/R на дуге. G2 повсюду по построению (κ совпадает на каждом шве), при этом характер заметно отличается от squircle Apple/Figma: круглее на вершине, длиннее по протяжённости угла. Классическая геометрия дорожных переходных кривых.", + "math_clothoid_body": "сопрягает каждую прямую кромку с центральной дугой окружности через сегмент спирали Эйлера, кривизна которого нарастает линейно вдоль длины дуги — 0 на кромке, 1/R на дуге. G2 повсюду по построению (κ совпадает на каждом шве), при этом характер заметно отличается от сквиркла Apple/Figma: круглее на вершине, с большей протяжённостью угла. Классическая геометрия дорожных переходных кривых.", "math_comb_density_smooth": "гладкая кривая", "math_comb_density_whiskers": "{n} усиков", "math_continuity_aria_label": "Непрерывность: {gn}", @@ -49,11 +49,11 @@ "math_copy_svg_aria_label": "Скопировать SVG в буфер обмена", "math_curve_arc_label": "Дуга", "math_curve_arc_sub": "CSS border-radius", - "math_curve_clothoid_label": "Clothoid", - "math_curve_clothoid_sub": "Сопряжение спиралью Euler", - "math_curve_squircle_label": "Squircle", + "math_curve_clothoid_label": "Клотоида", + "math_curve_clothoid_sub": "Сопряжение спиралью Эйлера", + "math_curve_squircle_label": "Сквиркл", "math_curve_squircle_sub": "По умолчанию в Lisse · Figma", - "math_curve_superellipse_label": "Superellipse", + "math_curve_superellipse_label": "Суперэллипс", "math_curve_superellipse_sub": "CSS corner-shape", "math_curve_type_aria_label": "Тип кривой", "math_diagram_aria_label": "Построение угловой кривой с гребёнкой кривизны. Две прямые кромки сходятся в углу, который заменяется выбранной сглаживающей кривой. Зелёная гребёнка показывает кривизну в каждой точке вдоль кривой.", @@ -67,25 +67,25 @@ "math_shape_label_smoothing": "Сглаживание", "math_slider_comb_density": "Плотность гребёнки", "math_slider_corner_radius": "Радиус угла", - "math_squircle_body": "— это текущая форма в Lisse и то, что поставляет Figma. Два кубических плеча Bézier плавно переходят в меньшую центральную дугу окружности. Кривизна нарастает постепенно, а не скачком, но в точках P3 / P4, где каждое плечо встречается с дугой, остаётся небольшая ступенька — на гребёнке она видна как «шапка Бэтмена». Это G1, а не G2.", + "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, которая рисует углы squircle — ту же непрерывную кривую, что используют Figma и iOS. Привязки для React, Vue и Svelte, а также независимое от фреймворков ядро. Управление каждым углом по отдельности, границы и тени в комплекте.", - "meta_home_description": "Углы Squircle для веба. Привязки для React, Vue и Svelte.", + "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": "playground — lisse", - "meta_what_description": "Почему squircle выглядят мягче, чем CSS border-radius, и как Lisse их рисует.", - "meta_what_title": "что такое squircle — lisse", + "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": "Playground", + "nav_playground": "Песочница", "nav_what": "Что?", "playground_border_description": "Контурные границы, повторяющие путь гладкого угла. Solid, dashed, dotted, double, groove, ridge — стандартные стили линий CSS.", "playground_center_border_title": "Центральная граница", - "playground_drop_shadow_description": "Отбрасываемые тени на основе SVG, обведённые по тому же пути squircle, что и элемент выше. Совпадают с формой поверхности при любом радиусе.", + "playground_drop_shadow_description": "Отбрасываемые тени на основе SVG, обведённые по тому же пути сквиркла, что и элемент выше. Совпадают с формой поверхности при любом радиусе.", "playground_drop_shadow_title": "Отбрасываемая тень", "playground_inner_border_title": "Внутренняя граница", "playground_inner_shadow_description": "Внутренние тени, отрисованные внутри пути гладкого угла. Полезны для утопленных поверхностей, нажатых состояний или мягкой заливки снизу.", @@ -106,20 +106,20 @@ "section_border_preset_ridge": "Гребень", "section_border_preset_solid": "Сплошная", "section_border_thickness_label": "Толщина", - "section_cornershape_desc": "Сглаживание определяет, насколько плавно кривая переходит в прямую кромку. 0 даёт дугу окружности, 1 — полноценный squircle.", + "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": "Выберите построение угла. Squircle используется в Lisse по умолчанию (кривая Figma). Arc — это CSS border-radius. Superellipse — семейство CSS corner-shape (n = 5 — ближе всего к Figma 0.6). Clothoid — это G2-сопряжение спиралью Euler.", + "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": "Clothoid", - "section_curvetype_preset_squircle": "Squircle", - "section_curvetype_preset_superellipse": "Superellipse", + "section_curvetype_preset_clothoid": "Клотоида", + "section_curvetype_preset_squircle": "Сквиркл", + "section_curvetype_preset_superellipse": "Суперэллипс", "section_curvetype_radius_label": "Радиус", "section_curvetype_smoothing_label": "Сглаживание", "section_curvetype_title": "Тип кривой", @@ -134,7 +134,7 @@ "section_percorner_title": "Радиус каждого угла", "section_percorner_top_left_label": "Верхний левый", "section_percorner_top_right_label": "Верхний правый", - "section_radius_desc": "Управляйте радиусом угла. Большие значения дают более скруглённые углы — при максимуме прямоугольник превращается в полный круг.", + "section_radius_desc": "Управляйте радиусом угла. Большие значения дают более скруглённые углы — на максимальном значении прямоугольник превращается в круг.", "section_radius_preset_0": "Радиус: 0", "section_radius_preset_20": "Радиус: 20", "section_radius_preset_50": "Радиус: 50", @@ -148,19 +148,19 @@ "section_shadow_preset_medium": "Средняя", "section_shadow_preset_none": "Нет", "section_shadow_preset_subtle": "Лёгкая", - "section_shadow_spread_label": "Растяжение", + "section_shadow_spread_label": "Разброс", "section_shadow_x_label": "X", "section_shadow_y_label": "Y", "switcher_aria_label": "Язык", - "what_p10_rest_translates": "Всё остальное в дизайне чисто переводится в CSS. Кривая — это та часть, которая не переводилась, а теперь переводится.", + "what_p10_rest_translates": "Всё остальное в дизайне без труда ложится на CSS. Кривая — единственное, что раньше так не ложилось. Теперь ложится.", "what_p11_docs_pointer": "Более подробный, насыщенный техническими деталями разбор — математика пути, правила композиции для каждого угла и стратегия отрисовки в Lisse — находится в документации по ссылкам внизу страницы.", - "what_p1_intro": "squircle — это скруглённый прямоугольник, у которого углы плавно переходят в прямые кромки с непрерывной кривизной, а не одной дугой окружности. Apple представила эту форму в iOS в 2013 году вместе с iOS 7, где по ней вырезалась каждая иконка приложения. Figma и Sketch добавили сглаживание углов в 2018 году, и с тех пор форма распространяется по дизайнерским инструментам.", + "what_p1_intro": "Сквиркл — это скруглённый прямоугольник, у которого углы плавно переходят в прямые кромки с непрерывной кривизной, а не одной дугой окружности. Apple представила эту форму в iOS в 2013 году вместе с iOS 7, где по ней вырезалась каждая иконка приложения. Figma и Sketch добавили сглаживание углов в 2018 году, и с тех пор форма распространяется по дизайнерским инструментам.", "what_p2_border_radius": "CSS border-radius рисует в каждом углу одну дугу. Дуга встречается с прямой кромкой под резкой касательной: кривизна за один шаг скачком меняется от нуля до максимума. Глаз воспринимает это как прикреплённый угол. На малых радиусах этого никто не замечает. Примерно после 16 пикселей шов становится виден, и угол воспринимается жёстче, чем следовало бы.", - "what_p3_two_shapes": "Шов исправляют две формы. superellipse находится между окружностью и квадратом, и одно число управляет тем, насколько он круглый или квадратный. Другая форма — это небольшая дуга окружности на вершине угла с гладкими плечами по обе стороны, которые плавно вводят дугу в прямые кромки, так что кривизна нигде не меняется скачком. На масштабе иконки они выглядят похоже, но устроены изнутри по-разному.", - "what_p4_apple_baggage": "Apple использует форму «дуга с плечами», и у её реализации есть некоторый багаж. Две половины каждого угла не вполне зеркальны друг другу. На одной стороне есть крошечный прямой сегмент, которого почти наверняка там быть не должно: разработчики, извлёкшие реальный путь из iOS, описывают его как вероятный баг, сохраняющийся из версии в версию. Кроме того, форма ломается при малых соотношениях сторон, где перестаёт выглядеть как squircle и начинает выглядеть как обычный скруглённый прямоугольник. Ничто из этого не настраивается. Кривая Apple зафиксирована.", + "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, и звучит так, будто вся проблема решена. Прочитайте определение внимательно — и ключевое слово разрешается в superellipse с встроенным фиксированным показателем степени. Это другое семейство форм. На первый взгляд оно выглядит близко к squircle из iOS, но кривизна распределена иначе, и на размерах, используемых в интерфейсах, разница заметна. Apple, Figma и Lisse — все рисуют «дугу с плечами». CSS по умолчанию рисует нечто иное и называет это тем же именем.", - "what_p8_browser_support": "Поддержки в браузерах тоже пока нет. Chrome добавил это свойство в августе 2025 года. У Safari оно есть за флагом функции, но в релиз не поставлено. Firefox ещё не начинал. Даже по оптимистичному сценарию, при котором каждый движок выпустит его в течение года, первым появляется не та форма, что совпадает с iOS или Figma. CSS-свойство — полезный примитив для новых дизайнов, которые осознанно выбирают superellipse. Оно не замена squircle, который люди уже видят в iOS, в файлах Figma и в дизайн-системах, копирующих их.", - "what_p9_lisse_fits": "Вот тут и находит своё место Lisse. Он рисует squircle из Figma как путь SVG и обрезает по нему элемент. Границы и тени обводят ту же форму: контуры следуют за squircle, а тени — это смещённые копии обрезки, поэтому мягкий край остаётся согласован с поверхностью, на которой он лежит. Радиусы каждого угла компонуются чисто, без излома на границе между углами разной скруглённости. Один наблюдатель следит за каждым элементом, обёрнутым Lisse, и перерисовывает только тогда, когда блок действительно меняет размер." + "what_p7_squircle_keyword": "Спецификация включает ключевое слово squircle, и звучит так, будто вся проблема решена. Прочитайте определение внимательно — и ключевое слово разрешается в суперэллипс с встроенным фиксированным показателем степени. Это другое семейство форм. На первый взгляд оно выглядит близко к сквирклу из iOS, но кривизна распределена иначе, и на размерах, используемых в интерфейсах, разница заметна. Apple, Figma и Lisse — все рисуют «дугу с плечами». CSS по умолчанию рисует нечто иное и называет это тем же именем.", + "what_p8_browser_support": "Поддержки в браузерах тоже пока нет. Chrome добавил это свойство в августе 2025 года. У Safari оно есть за экспериментальным флагом, но в релиз не поставлено. Firefox ещё не начинал. Даже по оптимистичному сценарию, при котором каждый движок выпустит его в течение года, первым появляется не та форма, что совпадает с iOS или Figma. CSS-свойство — полезный примитив для новых дизайнов, которые осознанно выбирают суперэллипс. Оно не замена сквирклу, который люди уже видят в iOS, в файлах Figma и в дизайн-системах, копирующих их.", + "what_p9_lisse_fits": "Вот тут и находит своё место Lisse. Он рисует сквиркл из Figma как путь SVG и обрезает по нему элемент. Границы и тени обводят ту же форму: контуры следуют за сквирклом, а тени — это смещённые копии обрезки, поэтому мягкий край остаётся согласован с поверхностью, на которой он лежит. Радиусы каждого угла компонуются чисто, без излома на границе между углами разной скруглённости. Один наблюдатель следит за каждым элементом, обёрнутым Lisse, и перерисовывает только тогда, когда блок действительно меняет размер." } From 20ef897c3e79bd6c4755228431665a65081ec311 Mon Sep 17 00:00:00 2001 From: Jace Date: Wed, 3 Jun 2026 22:47:43 +0200 Subject: [PATCH 3/4] fix(i18n): correct Russian translation mistranslations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Review surfaced wrong or overly literal renderings — e.g. CSS "border" as «граница» (boundary) and "Live demo" as «Живое демо» ("alive"). Reworked ~60 message keys plus the README prose against the English source for idiomatic developer Russian and correct CSS terminology (рамка/обводка, сглаживание, сквиркл, спираль Эйлера, etc.). --- README.ru.md | 60 ++++++++-------- apps/website/messages/ru.json | 124 +++++++++++++++++----------------- 2 files changed, 92 insertions(+), 92 deletions(-) diff --git a/README.ru.md b/README.ru.md index 5eab8c8..fb09b46 100644 --- a/README.ru.md +++ b/README.ru.md @@ -4,15 +4,15 @@

Lisse

-SVG-примитивы с гладкими углами для React, Vue и Svelte. -Пиксель-в-пиксель точные squircle из Figma + три другие угловые кривые. +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://deno.bundlejs.com/badge?q=%40lisse%2Fcore&label=bundle)](https://bundlejs.com/?q=%40lisse%2Fcore) [![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)** +**[Онлайн-демо →](https://corne.rs)** [English](./README.md) · [简体中文](./README.zh-Hans.md) · [日本語](./README.ja.md) · [한국어](./README.ko.md) · [Português (BR)](./README.pt-BR.md) · **Русский** · [Deutsch](./README.de.md) @@ -20,9 +20,9 @@ SVG-примитивы с гладкими углами для React, Vue и Sve ## Что это? -Стандартный CSS `border-radius` создаёт в углах дуги окружности. Дизайнеры (а также Apple и Figma) предпочитают **squircle** — углы, в которых кривизна плавно переходит в прямые кромки, создавая более органичную форму. +Стандартный CSS `border-radius` создает в углах дуги окружности. Дизайнеры (а также Apple и Figma) предпочитают **сквирклы** — углы, где кривизна плавно переходит в прямые стороны, создавая более органичную форму. -Lisse реализует [алгоритм сглаживания углов Figma](https://www.figma.com/blog/desperately-seeking-squircles/) и три другие угловые кривые на JavaScript. Он генерирует пути SVG и значения CSS `clip-path`, с первоклассными привязками для React, Vue и Svelte. +Lisse реализует [алгоритм сглаживания углов Figma](https://www.figma.com/blog/desperately-seeking-squircles/) и еще три типа кривых для углов на JavaScript. Библиотека генерирует SVG-пути и значения CSS `clip-path`, а также предоставляет полноценные биндинги для React, Vue и Svelte. ## Быстрый старт @@ -42,54 +42,54 @@ function Card() { } ``` -Для Vue, Svelte или независимого от фреймворков ядра см. [пакеты](#packages) ниже. +Для Vue, Svelte или ядра без привязки к фреймворку см. [пакеты](#packages) ниже. ## Типы кривых | Кривая | Описание | |---|---| -| `arc` | Четверть окружности. Идентична CSS `border-radius`. | -| `squircle` *(по умолчанию)* | Кубические плечи Figma + центральная дуга. | -| `superellipse` | `\|x/R\|^n + \|y/R\|^n = 1`. G2 с кромками при `n > 2`. | -| `clothoid` | Сопряжение спиралью Euler от прямой кромки к центральной дуге. G2 повсюду. | +| `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). +Математическая справка: [`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/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 µs на вызов `generatePath()`; 500 углов пересчитываются за <1 мс ([подробности](docs/performance.md)) -- Ноль зависимостей во время выполнения; двойной экспорт ESM + CJS; безопасный для SSR подпуть `/path` +- Четыре типа кривых для углов (`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): границы, тени, градиенты, авто-эффекты +- [Миграция](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`, такие как контуры фокуса, переполнение, полосы прокрутки -- [Конфигурация](docs/configuration.md): настройка для каждого угла, какой API использовать, применение во фреймворках +- [Внутреннее устройство](docs/internals.md): как работают обводки, тени и обработка изменения размера +- [Подводные камни](docs/gotchas.md): особенности `clip-path`, включая outline при фокусе, переполнение и полосы прокрутки +- [Конфигурация](docs/configuration.md): настройка отдельных углов, выбор API, использование с фреймворками ## Участие в разработке -Issues и PR приветствуются. Документация для участников (процесс релиза, стратегия тестирования, бенчмарки) находится в [`docs/`](./docs/). +Issues и PR приветствуются. Документация для контрибьюторов (процесс релиза, стратегия тестирования, бенчмарки) находится в [`docs/`](./docs/). ## Лицензия diff --git a/apps/website/messages/ru.json b/apps/website/messages/ru.json index 2889cde..155b640 100644 --- a/apps/website/messages/ru.json +++ b/apps/website/messages/ru.json @@ -1,31 +1,31 @@ { "$schema": "https://inlang.com/schema/inlang-message-format", - "curves_effect_border": "граница {n} px", - "curves_effect_drop_shadow": "отбрасываемая тень", + "curves_effect_border": "рамка {n} px", + "curves_effect_drop_shadow": "падающая тень", "curves_effect_fill_only": "только заливка", - "curves_effect_inner_border": "внутренняя граница {n} px", + "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_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_enter": "Перейти к сравнению", + "demo_compare_exit": "Выйти из сравнения", "demo_compare_label": "Сравнение", - "demo_heading": "Демонстрация сквиркла", + "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": "имеющий ровную, непрерывную поверхность; гладкий на ощупь", + "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_2": "гладкий, ровный; без изломов и шероховатостей (cheveux lisses).", + "header_def_3": "перен. отполированный, без трения; текущий без перерывов.", "header_def_b": "(о кривой, линии или переходе) непрерывный; без резких изменений (une courbe lisse).", "header_etymology_french_abbr": "фр.", "header_etymology_smooth": "гладкий", @@ -35,11 +35,11 @@ "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 внутри дуги — это и есть тот шов, на который жалуются дизайнеры.", + "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_clothoid_body": "сопрягает каждую прямую сторону с центральной дугой окружности через сегмент спирали Эйлера, у которого кривизна линейно растёт вдоль длины дуги — от 0 на прямой стороне до 1/R на дуге. G2 везде по построению (κ совпадает на каждом стыке), при этом характер заметно отличается от сквиркла Apple/Figma: вершина круглее, а угловой участок длиннее. Классическая геометрия переходных кривых на дорогах.", "math_comb_density_smooth": "гладкая кривая", "math_comb_density_whiskers": "{n} усиков", "math_continuity_aria_label": "Непрерывность: {gn}", @@ -56,25 +56,25 @@ "math_curve_superellipse_label": "Суперэллипс", "math_curve_superellipse_sub": "CSS corner-shape", "math_curve_type_aria_label": "Тип кривой", - "math_diagram_aria_label": "Построение угловой кривой с гребёнкой кривизны. Две прямые кромки сходятся в углу, который заменяется выбранной сглаживающей кривой. Зелёная гребёнка показывает кривизну в каждой точке вдоль кривой.", - "math_docs_reference": "Математические выкладки и ссылки на источники находятся в", + "math_diagram_aria_label": "Построение угловой кривой с гребёнкой кривизны. Две прямые стороны сходятся в углу, который заменяется выбранной сглаживающей кривой. Зелёная гребёнка показывает кривизну в каждой точке вдоль кривой.", + "math_docs_reference": "Математические выводы и ссылки на источники находятся в", "math_download": "Скачать", "math_download_svg_aria_label": "Скачать SVG", - "math_intro_g1": "означает, что касательные на шве совпадают, но кривизна может меняться скачком (у гребёнки есть разрыв).", + "math_intro_g1": "означает, что касательные на стыке совпадают, но кривизна может меняться скачком (на гребёнке есть разрыв).", "math_intro_g2": "означает, что кривизна непрерывна, поэтому гребёнка плавно проходит через стыки. Выберите кривую и подвигайте R/сглаживание, чтобы увидеть, как ведёт себя каждая из них.", - "math_intro_lead": "Четыре варианта построения углов, выведенные из одной и той же математики. Зелёная гребёнка — это кривизна в каждой точке вдоль кривой; длина усика пропорциональна κ.", + "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_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_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_playground_description": "Настраивайте радиус, сглаживание, тип кривой, рамки и тени прямо в браузере.", + "meta_playground_title": "песочница — lisse", "meta_what_description": "Почему сквирклы выглядят мягче, чем CSS border-radius, и как Lisse их рисует.", "meta_what_title": "что такое сквиркл — lisse", "nav_aria_site": "Сайт", @@ -83,37 +83,37 @@ "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_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": "Внешняя граница", + "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_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_groove": "Вдавленная", "section_border_preset_none": "Нет", - "section_border_preset_ridge": "Гребень", + "section_border_preset_ridge": "Выпуклая", "section_border_preset_solid": "Сплошная", "section_border_thickness_label": "Толщина", - "section_cornershape_desc": "Сглаживание определяет, насколько плавно кривая переходит в прямую кромку. 0 даёт дугу окружности, 1 — полноценный сквиркл.", + "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_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": "Тип кривой", @@ -125,42 +125,42 @@ "section_curvetype_title": "Тип кривой", "section_percorner_bottom_left_label": "Нижний левый", "section_percorner_bottom_right_label": "Нижний правый", - "section_percorner_desc": "У каждого угла может быть свой радиус и сглаживание, управляемые независимо. Полезно для асимметричных форм вроде вкладок и чипов.", + "section_percorner_desc": "У каждого угла может быть свой радиус и своё сглаживание, независимо от остальных. Полезно для асимметричных форм вроде вкладок и чипов.", "section_percorner_preset_all": "Все одинаковые", - "section_percorner_preset_aria": "Пресет для каждого угла", - "section_percorner_preset_custom": "Свой", - "section_percorner_preset_single": "Один", + "section_percorner_preset_aria": "Пресет для углов", + "section_percorner_preset_custom": "Настроить", + "section_percorner_preset_single": "Один угол", "section_percorner_preset_top": "Только верхние", - "section_percorner_title": "Радиус каждого угла", + "section_percorner_title": "Радиусы по углам", "section_percorner_top_left_label": "Верхний левый", "section_percorner_top_right_label": "Верхний правый", - "section_radius_desc": "Управляйте радиусом угла. Большие значения дают более скруглённые углы — на максимальном значении прямоугольник превращается в круг.", + "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_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_custom": "Настроить", "section_shadow_preset_medium": "Средняя", "section_shadow_preset_none": "Нет", "section_shadow_preset_subtle": "Лёгкая", - "section_shadow_spread_label": "Разброс", + "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 оно есть за экспериментальным флагом, но в релиз не поставлено. Firefox ещё не начинал. Даже по оптимистичному сценарию, при котором каждый движок выпустит его в течение года, первым появляется не та форма, что совпадает с iOS или Figma. CSS-свойство — полезный примитив для новых дизайнов, которые осознанно выбирают суперэллипс. Оно не замена сквирклу, который люди уже видят в iOS, в файлах Figma и в дизайн-системах, копирующих их.", - "what_p9_lisse_fits": "Вот тут и находит своё место Lisse. Он рисует сквиркл из Figma как путь SVG и обрезает по нему элемент. Границы и тени обводят ту же форму: контуры следуют за сквирклом, а тени — это смещённые копии обрезки, поэтому мягкий край остаётся согласован с поверхностью, на которой он лежит. Радиусы каждого угла компонуются чисто, без излома на границе между углами разной скруглённости. Один наблюдатель следит за каждым элементом, обёрнутым Lisse, и перерисовывает только тогда, когда блок действительно меняет размер." + "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, и перерисовывает его только тогда, когда блок действительно меняет размер." } From d72bb9a0aedc75205757c7237ec4f67e4b76b3d1 Mon Sep 17 00:00:00 2001 From: Jace Date: Wed, 3 Jun 2026 22:47:43 +0200 Subject: [PATCH 4/4] =?UTF-8?q?fix(docs):=20ru=20README=20=E2=80=94=20work?= =?UTF-8?q?ing=20bundle=20badge=20+=20trim=20switcher?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the dead bundlejs badge (HTTP 526) with bundlephobia, and drop the language-switcher links to unmerged translations (zh-Hans/ko/pt-BR) — matching README.md/ja/de on main. --- README.ru.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.ru.md b/README.ru.md index fb09b46..6ce72fb 100644 --- a/README.ru.md +++ b/README.ru.md @@ -8,13 +8,13 @@ SVG-примитивы для плавно скругленных углов в Пиксельно точные сквирклы как в Figma и еще три типа кривых для углов. [![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=%40lisse%2Fcore)](https://www.npmjs.com/package/@lisse/core) -[![bundle](https://deno.bundlejs.com/badge?q=%40lisse%2Fcore&label=bundle)](https://bundlejs.com/?q=%40lisse%2Fcore) +[![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.zh-Hans.md) · [日本語](./README.ja.md) · [한국어](./README.ko.md) · [Português (BR)](./README.pt-BR.md) · **Русский** · [Deutsch](./README.de.md) +[English](./README.md) · [日本語](./README.ja.md) · **Русский** · [Deutsch](./README.de.md)