feat(website): add Simplified Chinese (简体中文) translation

README.zh-Hans.md

@@ -0,0 +1,106 @@
+<div align="center">
+
+<img src="assets/logo.png" alt="Lisse" width="128" />
+
+<h1>Lisse</h1>
+
+面向 React、Vue 和 Svelte 的平滑边角 SVG 原语。
+像素级精确的 Figma squircle，外加另外三种边角曲线。
+
+[![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.ja.md) · [한국어](./README.ko.md) · [Português (BR)](./README.pt-BR.md) · [Русский](./README.ru.md) · [Deutsch](./README.de.md)
+
+</div>
+
+## 这是什么？
+
+标准的 CSS `border-radius` 在边角处产生圆弧。设计师（以及 Apple 和 Figma）更偏爱 **squircle**——曲率平滑过渡到直边的边角，从而形成更有机的形状。
+
+Lisse 用 JavaScript 实现了 [Figma 的边角平滑算法](https://www.figma.com/blog/desperately-seeking-squircles/)以及另外三种边角曲线。它生成 SVG 路径和 CSS `clip-path` 值，并为 React、Vue 和 Svelte 提供一流的绑定。
+
+## 快速上手
+
+```sh
+npm install @lisse/react
+```
+
+```tsx
+import { SmoothCorners } from "@lisse/react";
+
+function Card() {
+  return (
+    <SmoothCorners corners={{ radius: 20, smoothing: 0.6 }} style={{ background: "#fff", padding: 24 }}>
+      <h2>Hello, squircle</h2>
+    </SmoothCorners>
+  );
+}
+```
+
+如需 Vue、Svelte 或与框架无关的核心，请参见下方的[软件包](#packages)。
+
+## 曲线类型
+
+| Curve | Description |
+|---|---|
+| `arc` | 四分之一圆。与 CSS `border-radius` 完全相同。 |
+| `squircle` *(default)* | Figma 的三次肩部 + 中央圆弧。 |
+| `superellipse` | `\|x/R\|^n + \|y/R\|^n = 1`。当 `n > 2` 时带边缘的 G2。 |
+| `clothoid` | 从直边到中央圆弧的欧拉螺线（Euler-spiral）混合。处处 G2。 |
+
+数学参考：[`docs/curves.md`](docs/curves.md)。
+
+## 软件包
+
+| Package | npm | Description |
+|---|---|---|
+| `@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 hook 与组件 |
+| `@lisse/vue` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fvue?label=)](https://www.npmjs.com/package/@lisse/vue) | Vue composable 与组件 |
+| `@lisse/svelte` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fsvelte?label=)](https://www.npmjs.com/package/@lisse/svelte) | Svelte action |
+
+## 特性
+
+- 四种边角曲线（`arc`、`squircle`、`superellipse`、`clothoid`），支持逐角混合
+- 内 / 外 / 居中边框，含多种样式变体（实线、虚线、点线、双线、凹槽、凸脊）
+- 投影与内阴影，并可通过 API 实现渐变边框
+- 自动效果：挂载时将 CSS `border` 和 `box-shadow` 转换为等效的 SVG
+- 每次 `generatePath()` 调用约 1.5 µs；500 个边角的重算在 <1 ms 内完成（[详情](docs/performance.md)）
+- 零运行时依赖；ESM + CJS 双重导出；SSR 安全的 `/path` 子路径
+
+## 文档
+
+- [API 参考](docs/api.md)：完整的导出表
+- [迁移](MIGRATION.md)：在版本之间升级
+- [SSR](docs/ssr.md)：服务端渲染与边缘运行时
+- [曲线](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、框架用法
+
+## 贡献
+
+欢迎提交 Issue 和 PR。贡献者文档（发布流程、测试策略、基准测试）见于 [`docs/`](./docs/)。
+
+## 许可证
+
+[MIT](./LICENSE)
+
+---
+
+<div align="center">
+
+由 [Jace](https://ja.mt) 构建
+
+[X](https://ja.mt/x) | [Bluesky](https://ja.mt/bsky) | [Instagram](https://ja.mt/ig) | [Threads](https://ja.mt/threads)
+
+</div>

apps/website/messages/zh-Hans.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": "平滑已开启；演示方块使用 Lisse 的 squircle 圆角。",
+  "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": "读作 lees，形容词，源自法语 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-spiral）将每条直边过渡到中央圆弧，其曲率沿弧长线性递增——边缘处为 0，到弧上为 1/R。由构造保证处处 G2（κ 在每条接缝处都吻合），其特征与 Apple/Figma 的 squircle 明显不同：顶点处更圆，边角延展更长。是经典的公路缓和曲线几何。",
+  "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": "欧拉螺线（Euler-spiral）混合",
+  "math_curve_squircle_label": "Squircle",
+  "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 所采用的形状。两段三次 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": "用于绘制 squircle 圆角的 JavaScript 库——与 Figma 和 iOS 使用的连续曲线相同。为 React、Vue 和 Svelte 提供绑定，并附带一个与框架无关的核心。包含逐角控制、边框和阴影。",
+  "meta_home_description": "面向 Web 的 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": "演练场",
+  "nav_what": "这是什么？",
+  "playground_border_description": "沿平滑边角路径描绘的描边边框。实线、虚线、点线、双线、凹槽、凸脊——标准的 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。超椭圆是 CSS corner-shape 家族（n = 5——最接近 Figma 0.6）。回旋曲线是 G2 的欧拉螺线（Euler-spiral）混合。",
+  "section_curvetype_exponent_label": "指数（n）",
+  "section_curvetype_preset_arc": "圆弧",
+  "section_curvetype_preset_aria": "曲线类型",
+  "section_curvetype_preset_clothoid": "回旋曲线",
+  "section_curvetype_preset_squircle": "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": "每个角都可以拥有各自独立控制的半径和平滑度。适用于选项卡、标签（chip）等非对称形状。",
+  "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 在 2013 年随 iOS 7 将这一形状引入 iOS，当时每一个 app 图标都被裁切成这种形状。Figma 和 Sketch 都在 2018 年加入了边角平滑，此后这一形状便在设计工具中不断扩散。",
+  "what_p2_border_radius": "CSS border-radius 在每个角绘制单一的一段圆弧。该圆弧以一个生硬的切点与直边相接：曲率一步从零跳到最大值。看上去就像是硬生生拼接上去的一个角。在小半径下没人会注意到。一旦超过约 16 像素，接缝就显露出来，边角看起来便比应有的更僵硬。",
+  "what_p3_two_shapes": "有两种形状能修复这道接缝。一种超椭圆介于圆和方之间，由一个数字控制它有多圆或多方。另一种形状是在边角顶点处的一小段圆弧，两侧各有平滑的肩部，将圆弧缓和过渡到直边，使曲率永不跳变。两者在图标尺度下看起来相似，但底层的构造方式截然不同。",
+  "what_p4_apple_baggage": "Apple 采用的是带肩部圆弧的形状，而其实现带来了一些包袱。每个角的两半并非彼此严格的镜像。其中一侧有一小段几乎肯定不该存在的直线段：那些从 iOS 中提取出实际路径的开发者认为这很可能是个 bug，并在各个版本中被保留了下来。该形状在低宽高比下也会失效，届时它不再像 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 关键字，这听起来像是整个问题都解决了。仔细阅读其定义，会发现该关键字解析为一个内置固定指数的超椭圆。那属于另一类形状。它乍看接近 iOS 的 squircle，但曲率的分布方式不同，在界面所用的尺寸下这种差异是可见的。Apple、Figma 和 Lisse 绘制的都是带肩部的圆弧。而 CSS 默认绘制的是另一种东西，却用了同一个名字。",
+  "what_p8_browser_support": "浏览器支持也尚未到位。Chrome 在 2025 年 8 月加入了该属性。Safari 将其置于功能开关之后，但尚未发布到正式版。Firefox 还没有开始。即便在最乐观的时间线下——每个引擎都在来年发布——最先落地的也不是与 iOS 或 Figma 相匹配的形状。对于有意选用超椭圆的新设计而言，这个 CSS 属性是一个有用的基础构件。但它并不能替代人们已经在 iOS、在 Figma 文件中、以及在仿照它们的设计系统中看到的 squircle。",
+  "what_p9_lisse_fits": "这正是 Lisse 的用武之地。它将 Figma 的 squircle 绘制为一条 SVG 路径，并将元素裁切到该路径。边框和阴影描摹同一个形状：描边沿着 squircle，阴影则是裁切路径的偏移副本，因此柔和的边缘与其所处的表面保持一致。逐角半径能够干净地合成，在不同圆度的边角交界处不会出现拐折。一个单一的观察者监视每个由 Lisse 包裹的元素，仅在方框实际改变尺寸时才重绘。"
+}

apps/website/project.inlang/settings.json

@@ -2,7 +2,8 @@
   "$schema": "https://inlang.com/schema/project-settings",
   "baseLocale": "en",
   "locales": [
-    "en"
+    "en",
+    "zh-Hans"
   ],
   "modules": [
     "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4.4.0/dist/index.js",