# 入门指南 · 简介

为 UI 添加柔和高光，保留原有颜色、布局和交互。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/

<a id="one-shared-light"></a>

## 让界面更有活力。

将需要响应同一光照的元素分组，再选择其中显示高光的表面。需要独立响应的区域可以使用单独的光照。

<a id="choose-your-framework"></a>

## 开始使用 Edge

先按照[安装](https://edge.bolerish.com/zh/docs/installation/)添加依赖，再通过[用法](https://edge.bolerish.com/zh/docs/usage/)了解基本概念。[React](https://edge.bolerish.com/zh/docs/react/usage/)介绍组件连接方式，[API 参考](https://edge.bolerish.com/zh/docs/react/api/)列出各项配置。

---

# 入门指南 · 安装

安装 Edge 并在 React 中开始使用。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/installation/

<a id="installation"></a>

## 安装

React 适配器需要 React 18 或 19。其他框架的适配器暂未提供。

npm

```bash
npm install @bolerish/edge
```

pnpm

```bash
pnpm add @bolerish/edge
```

Yarn

```bash
yarn add @bolerish/edge
```

Bun

```bash
bun add @bolerish/edge
```

<a id="stylesheet"></a>

## 默认样式

React 会在连接表面时自动准备默认 CSS，即使仅使用 Hook 而不使用 Edge.Provider 也是如此，无需导入样式表。使用 SSR 时，请在应用样式之前为每个文档渲染一次 Edge.Styles。如果 CSP 要求 nonce，请在服务端和水合时使用同一请求的 nonce。

```tsx
<Edge.Styles nonce={nonce} />
```

```css
@import "@bolerish/edge/style.css";
```

现有的 CSS 导入方式仍然可用，也提供不依赖框架的 CSS 文件。显式导入时，请将其放在应用和工具类样式之前；重置样式可以更早加载。 通过包路径导入 CSS 时，需要能解析该路径的构建工具。

<a id="next-steps"></a>

## 开始使用 Edge

在[用法](https://edge.bolerish.com/zh/docs/usage/)中确定共享光照的区域和 表面，再按照[React](https://edge.bolerish.com/zh/docs/react/usage/)连接。

---

# 入门指南 · 用法

连接组件前，先了解光照与表面。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/usage/

<a id="share-one-light"></a>

## 选择区域

一个光照管理一组共同响应的表面。可以让整个区域共享光照，也可以只连接其中几个元素。

表面（surface）是连接到光照的 HTML 元素。只有已连接的表面会显示高光。需要独立响应的区域应使用单独的光照。

<a id="keep-your-styles"></a>

## 保留现有 UI

Edge 保留背景、文字、间距和基础边框。高光默认使用各表面的文字颜色和圆角。请保留现有交互和键盘焦点标识。

在[样式](https://edge.bolerish.com/zh/docs/styles/)中选择 表面的响应方式，在[动态效果](https://edge.bolerish.com/zh/docs/motion/)中设置光照的移动方式。

input 的包裹方式和现有装饰冲突见[集成注意事项](https://edge.bolerish.com/zh/docs/integration/#wrap-inputs-you-own)。

如果应用自行改变元素位置，请参阅[布局变化](https://edge.bolerish.com/zh/docs/integration/#refresh-after-layout-changes)。

<a id="connect-existing-components"></a>

## 选择框架

查看所用框架的指南。

[

### React





](https://edge.bolerish.com/zh/docs/react/usage/)

---

# React · 用法

先使用 Edge.Provider 和 Edge.Surface。要直接连接现有组件，可以使用 useSurface。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/react/usage/

<a id="share-one-light"></a>

## 连接区域

请先完成[安装](https://edge.bolerish.com/zh/docs/installation/)。如果框架支持服务器组件，请在声明了 `"use client"` 的客户端模块中使用 Edge。

用 `Edge.Provider` 包裹共享光照的区域，只为需要响应的元素添加 `Edge.Surface`。下方两张卡片共享光照。嵌套的 Edge.Provider 会创建独立光照。

共享光照，保留原有组件

```tsx
<Edge.Provider>
  <Edge.Surface>Example card</Edge.Surface>
  <Edge.Surface>Another example card</Edge.Surface>
</Edge.Provider>
```

<a id="keep-your-styles"></a>

## 保留样式和事件

通过 `as` 选择要渲染的 HTML 标签。可直接使用该元素的 HTML 属性、事件和 ref，并通过 `className` 和 `style` 应用原有样式。Edge.Provider 不添加 DOM 元素，每个 Edge.Surface 渲染一个元素。

```tsx
<Edge.Surface as="button" type="button" onClick={handleExampleClick}>
  Example button
</Edge.Surface>
```

input 元素需要外层容器。若与现有装饰冲突，请参阅[集成注意事项](https://edge.bolerish.com/zh/docs/integration/)。外观可在[样式](https://edge.bolerish.com/zh/docs/styles/)中设置，动态效果见[动态效果](https://edge.bolerish.com/zh/docs/motion/)。

<a id="connect-existing-components"></a>

## 连接现有组件

如果 Card 或 Button 已渲染自己的 HTML 元素，请在组件内调用 [useSurface(options)](https://edge.bolerish.com/zh/docs/react/use-surface/#use-surface)，并将返回的 ref 传给该元素。组件应位于 Edge.Provider 内。React 18 的函数组件需要通过 `forwardRef` 转发 ref。

如果元素位置发生变化，请参阅[布局更新](https://edge.bolerish.com/zh/docs/integration/#refresh-after-layout-changes)。

---

# React · Edge.Provider

创建供后代界面共享的光照。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/react/provider/

<a id="styles"></a>

## Edge.Styles

请为每个 SSR 文档在应用样式之前渲染一次。React 会在连接表面时复用此样式。在使用 Edge 期间请保留此组件，并在 CSP 要求时传入 nonce。如果没有此组件或显式 CSS 导入，则会在连接表面时由客户端添加默认 CSS。

```tsx
<Edge.Styles nonce={nonce} />
```

| Prop / 选项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `nonce` | `string` | `undefined` | 传给 style 元素的可选请求级 nonce。请在服务端和水合时使用相同值。如果 CSP 只允许带 nonce 的内联样式元素，则必须提供。 |

<a id="lighting"></a>

## Edge.Provider

让后代 Edge.Surface 共享同一光照，不添加额外的 DOM 元素。嵌套的 Edge.Provider 会创建独立光照。

```tsx
<Edge.Provider motion="system" range={480} intensity={0.75}>
  {/* Your surfaces */}
</Edge.Provider>
```

| Prop / 选项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | system 遵循减少动态效果和设备偏好。dynamic 即使在减少动态效果开启时也跟随鼠标或笔。static 保持固定方向。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。 触摸跟随也遵循所选动态模式：static 保持固定，system 在开启减少动态效果时保持固定。 |
| `staticDirection` | `number \| 'random'` | `315` | 固定光照的方向，单位为度。random 每次挂载选择一个共享方向，并在普通重渲染时保持。数值必须有限。 |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward 使高光朝向指针，away 将方向反转 180 度。所有表面样式均保持这一选择。仅影响跟随指针的光照；固定方向由 staticDirection 控制。 |
| `range` | `number` | `480` | 动态光照在表面外衰减的距离，以视口 CSS 像素为单位。必须为有限正数。 |
| `intensity` | `number` | `0.75` | 共享光照强度。必须为 0 到 1 之间的有限值；无效值抛出 RangeError。 |
| `children` | `ReactNode` | `Required` | 共享此光照的区域。普通子元素保持不变，只有显式连接的表面会响应。 |
| `ref` | `Ref<Light>` | `Unset` | 用于接收光照句柄的 ref，句柄引用保持稳定。仅位置发生变化后，可调用 refresh()。 |

指针输入来自整个文档。Edge.Provider 决定哪些表面 响应，而不是将输入限制在容器矩形内。固定光照使用 `staticDirection`，包括 `motion="system"` 遵循减少动态效果设置时。

---

# React · Edge.Surface

为 DOM 元素应用光照效果。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/react/surface/

<a id="lighting-surface"></a>

## Edge.Surface

渲染一个连接到最近 Edge.Provider 的 HTML 元素。`as` 指定的标签决定可用的 HTML 属性、事件和 ref。

```tsx
<Edge.Surface as="article" edgeStyle="raised">
  Your content
</Edge.Surface>
```

| Prop / 选项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | 装饰使用的伪元素。选择 before 可保留现有 ::after。若两者均被占用，或宿主为原生输入元素，请使用容器。无效值抛出 RangeError。 |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | 边缘对光照的响应方式。三种样式均保留组件原有外观。 |
| `color` | `string` | `currentColor` | 高光颜色。默认跟随DOM 元素的文字颜色。接受任意 CSS 颜色字符串，包括 CSS 变量。 |
| `shadowColor` | `string` | `#0008` | 相对边缘的颜色。接受任意 CSS 颜色字符串；使用 transparent 可移除浅色表面上的此阴影。 |
| `borderWidth` | `number` | `1` | 装饰边缘的厚度，单位为像素；不改变DOM 元素的边框。负数限制为 0，非有限值使用默认值。 |
| `intensity` | `number` | `1` | 共享光照强度的乘数。有限值限制在 0–1，非有限值使用默认值。 |
| `as` | `HTML tag name` | `'div'` | 要渲染的 HTML 元素。原生属性和 ref 随所选标签变化；此处不接受自定义 React 组件。 |
| `children` | `ReactNode` | `Unset` | DOM 元素内渲染的内容。输入等无法自行显示装饰的元素请使用容器。 |
| `ref` | `Ref<HTMLElement for the chosen tag>` | `Unset` | 与内部注册 ref 一起转发给渲染的元素。保留 React 19 回调 ref 的清理行为。 |
| `className` | `string` | `Unset` | 原有类名，与装饰类合并。 |
| `style` | `CSSProperties` | `Unset` | 原有内联样式，在装饰绑定之后合并。除非有意覆盖，请保留 Edge 管理的 CSS 变量。 |

`Edge.Surface` 必须在 `Edge.Provider` 内使用，否则渲染时会抛出错误。对于 input 元素或现有伪元素冲突，请参阅[集成注意事项](https://edge.bolerish.com/zh/docs/integration/)。

高光与 DOM 元素边框的外侧对齐。要连接现有组件渲染的 DOM 元素，请使用 [useSurface](https://edge.bolerish.com/zh/docs/react/use-surface/#use-surface)。

---

# React · useLight

创建并配置光照句柄。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/react/use-light/

<a id="use-light"></a>

## useLight(options?)

返回引用稳定的 `Light` 句柄，用于在不使用 Edge.Provider 时自行管理光照。选项变化会更新现有光照。将句柄传给 `useSurface(light, options)` 即可。普通组件树使用 `Edge.Provider` 就足够了。

```tsx
function useLight(options?: LightOptions): Light;
```

| Prop / 选项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | system 遵循减少动态效果和设备偏好。dynamic 即使在减少动态效果开启时也跟随鼠标或笔。static 保持固定方向。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。 触摸跟随也遵循所选动态模式：static 保持固定，system 在开启减少动态效果时保持固定。 |
| `staticDirection` | `number \| 'random'` | `315` | 固定光照的方向，单位为度。random 每次挂载选择一个共享方向，并在普通重渲染时保持。数值必须有限。 |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward 使高光朝向指针，away 将方向反转 180 度。所有表面样式均保持这一选择。仅影响跟随指针的光照；固定方向由 staticDirection 控制。 |
| `range` | `number` | `480` | 动态光照在表面外衰减的距离，以视口 CSS 像素为单位。必须为有限正数。 |
| `intensity` | `number` | `0.75` | 共享光照强度。必须为 0 到 1 之间的有限值；无效值抛出 RangeError。 |

`range` 仅影响动态光照。固定光照不随距离衰减，方向由 `staticDirection` 决定。

<a id="refresh"></a>

## light.refresh()

在下一帧重新测量表面的位置和尺寸，即使指针静止也会更新。如果元素的位置或边框粗细发生变化，但未触发尺寸变更通知，请在 React 提交这些更改后调用。

```tsx
interface Light {
  refresh(): void;
}
```

尺寸变化和滚动会自动检测。详情请参阅[布局更新](https://edge.bolerish.com/zh/docs/integration/#refresh-after-layout-changes)。

---

# React · useSurface

返回将现有 DOM 元素连接到光照的 ref。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/react/use-surface/

<a id="use-surface"></a>

## useSurface(options?)

返回回调 ref，将现有 HTML 元素连接到最近的 Edge.Provider。将 ref 传给显示边框的元素，保留原有的 `className` 和 `style` 即可。

```tsx
const ref = useSurface<HTMLElement>(options);
```

```tsx
function Area() {
  return <Edge.Provider><ExistingCard /><ExistingCard /></Edge.Provider>;
}

function ExistingCard() {
  const ref = useSurface<HTMLDivElement>();
  return <Card ref={ref}>Your existing component</Card>;
}
```

React 18 的函数组件需要通过 `forwardRef` 将 ref 转发给 HTML 元素。React 19 也支持将 ref 作为 prop 接收。

未显式传入光照时，需要 Edge.Provider。要自行管理光照，请将 `useLight` 返回的句柄传给 `useSurface(light, options)`。显式传入的光照优先于 Edge.Provider 中的光照。

| Prop / 选项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | 装饰使用的伪元素。选择 before 可保留现有 ::after。若两者均被占用，或宿主为原生输入元素，请使用容器。无效值抛出 RangeError。 |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | 边缘对光照的响应方式。三种样式均保留组件原有外观。 |
| `color` | `string` | `currentColor` | 高光颜色。默认跟随DOM 元素的文字颜色。接受任意 CSS 颜色字符串，包括 CSS 变量。 |
| `shadowColor` | `string` | `#0008` | 相对边缘的颜色。接受任意 CSS 颜色字符串；使用 transparent 可移除浅色表面上的此阴影。 |
| `borderWidth` | `number` | `1` | 装饰边缘的厚度，单位为像素；不改变DOM 元素的边框。负数限制为 0，非有限值使用默认值。 |
| `intensity` | `number` | `1` | 共享光照强度的乘数。有限值限制在 0–1，非有限值使用默认值。 |

一个 DOM 元素只能连接一个光照。不要将 ref 传给尺寸不同的父元素。

选项更新不会替换元素。通过 Hook 连接的高光在水合后生效。如需在服务端 HTML 中包含相关 class 和 CSS 变量，请使用 `Edge.Surface`。

---

# 样式 · 样式

选择表面对光照的响应方式，保留其基础样式。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/styles/

<a id="compare-styles"></a>

## 比较边缘响应

选择样式，并在卡片周围移动指针。所选设置也会应用到本站的卡片、代码块和导航元素。

比较边缘样式

```tsx
const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>
```

<a id="options"></a>

## 样式值

| 值 | 行为 |
| --- | --- |
| `raised` | 高亮朝向光照的边缘。默认值。 |
| `recessed` | 将高光向内偏移一个装饰边框的宽度。保持所选的光照方向。 |
| `matte` | 柔化边缘的响应。 |

更多选项请参阅[API 参考](https://edge.bolerish.com/zh/docs/react/surface/#lighting-surface)。

<a id="raised"></a>

## Raised

使用 `edgeStyle: 'raised'` 可呈现向外凸起的边缘。

<a id="recessed"></a>

## Recessed

对于 input 包装元素等场景，可使用 `edgeStyle: 'recessed'` 将高光向内偏移一个装饰边框的宽度。所选的光照方向保持不变。

<a id="matte"></a>

## Matte

使用 `edgeStyle: 'matte'` 可让边缘更柔和、低调。

<a id="customize-the-highlight"></a>

## 自定义高光

每个 表面都使用自己的文字颜色，即使嵌套也不例外，并遵循所连接 DOM 元素的 border-radius。`color` 可覆盖高光颜色，`intensity` 用于调整共享光照的强度系数。`shadowColor="transparent"` 可移除相对边缘的阴影。`borderWidth` 仅改变高光厚度，不影响实际边框。将这些选项传给 [Edge.Surface](https://edge.bolerish.com/zh/docs/react/surface/#lighting-surface) 即可，无需额外声明 CSS 变量。

此效果以轴对齐的矩形为基础，近似模拟光照方向，并不模拟真实的点光源。在表面中心附近，高光强度会在与表面尺寸成比例的区域内逐渐减弱。

如需保留现有伪元素或包裹 input，请参阅[集成注意事项](https://edge.bolerish.com/zh/docs/integration/)。

---

# 样式 · 动态效果

选择共享光照是跟随指针还是保持固定方向。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/motion/

<a id="choose-an-input-mode"></a>

## 选择动态效果

使用 `system` 可遵循减少动态效果设置。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。`dynamic` 会覆盖减少动态效果设置，应由用户主动选择。详情请参阅[动态效果](https://edge.bolerish.com/zh/docs/motion/)。

<a id="compare-motion"></a>

## 选择动态效果

试用以下模式。所选设置会更新全站的共享光照，包括示例卡片。

比较动态效果

```tsx
const light = useLight({ motion: "dynamic" });
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>
```

<a id="pointer-lighting"></a>

## 指针光照

toward 强调朝向指针的边缘，away 则强调相反方向。range 表示光照在表面外部逐渐消失的距离。例如，range: 40 会在指针移到卡片外侧、距离卡片达到 40 CSS 像素时使效果消失，而不是仅照亮指针周围 40 像素的圆形区域。请将指针移到卡片外部，比较不同数值的效果。这些设置不影响固定光照。

指针光照

```tsx
const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });
```

<a id="options"></a>

## 动态效果值

| 值 | 行为 |
| --- | --- |
| `system` | 遵循减少动态效果和输入偏好。库的默认值。 |
| `dynamic` | 即使开启减少动态效果，也跟随鼠标、笔输入或触摸接触。 |
| `static` | 保持固定方向，忽略指针移动。 |

更多选项请参阅[API 参考](https://edge.bolerish.com/zh/docs/react/provider/#lighting)。

<a id="system"></a>

## System

没有精确悬停设备时，光照以固定模式开始。关闭减少动态效果后，鼠标或笔输入可启用跟踪。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。

<a id="dynamic"></a>

## Dynamic

此模式会覆盖减少动态效果设置，应由用户主动选择。在鼠标、笔输入或触摸接触前，效果保持隐藏。

<a id="static"></a>

## Static

为 `staticDirection` 指定有限角度（单位为度）或 `"random"`。示例提供 0°、90°、180°、270° 和 315°。random 在挂载时选择一个共享方向，重渲染和外观变化不会改变该方向。重新挂载可选择新方向。

Static

```tsx
const light = useLight({ motion: 'static', staticDirection: "random" });
```

<a id="accessibility"></a>

## 尊重用户偏好

焦点、选择状态和验证结果不应依赖光照才能识别。输入方式和强制颜色模式的行为见[无障碍](https://edge.bolerish.com/zh/docs/integration/#preserve-native-interactions)。

---

# 指南 · 集成注意事项

了解如何与现有伪元素、input 元素及布局变化配合使用。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/integration/

<a id="choose-an-input-mode"></a>

## 选择动态效果

system 遵循减少动态效果和设备偏好。dynamic 即使在减少动态效果开启时也跟随鼠标或笔。static 保持固定方向。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。 触摸跟随也遵循所选动态模式：static 保持固定，system 在开启减少动态效果时保持固定。

<a id="understand-rendering-cost"></a>

## 了解渲染开销

每个光照最多安排一帧，先读取几何信息再写入样式，并跳过未变的输出。渐变变化仍需浏览器渲染，因此不保证帧率或耗电量。

<a id="preserve-native-interactions"></a>

## 保留原生交互

保留标签、文字对比度、基础边框和可见的键盘焦点。装饰不会捕获指针事件；输入值、选择、键盘处理和 Portal 仍由你控制。

强制颜色模式会隐藏装饰。选择、验证和可用状态应独立于高光传达。

<a id="existing-decorations"></a>

## 与现有伪元素配合使用

Edge 默认在 `::after` 上绘制高光。要保留现有的 `::after`，请设置 `pseudoElement: 'before'`。如果两个伪元素都已使用，请在外层添加容器并应用 Edge。

保留现有伪元素

```tsx
import { Edge } from '@bolerish/edge';

<Edge.Provider>
  <Edge.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Edge.Surface>
</Edge.Provider>
```

<a id="wrap-inputs-you-own"></a>

## 包裹 input 元素

原生 input 无法可靠显示伪元素。请连接外围的 `label` 或 `div`，并匹配 border-radius。保留 input 的标签、焦点、验证和键盘行为。使用 `recessed` 可呈现内凹效果。

<a id="refresh-after-layout-changes"></a>

## 布局变化后刷新

尺寸变化、嵌套滚动、视口变化、字体和资源加载都会自动更新几何信息。如果只有元素位置或边框粗细变化，且未触发尺寸通知，请在新布局生效后调用 `light.refresh()`。即使指针静止也会更新。

React 中的调用方式见[light.refresh()](https://edge.bolerish.com/zh/docs/react/use-light/#refresh)。

<a id="geometry-limits"></a>

## 支持的形状和文档范围

Edge 近似模拟轴对齐矩形。不支持旋转、透视变换和跨文档 Portal。同一文档内的 Portal 可以共享光照。焦点、选择状态和验证见[无障碍](https://edge.bolerish.com/zh/docs/integration/#preserve-native-interactions)。

---

# 指南 · AI 集成

在助手修改 UI 前，提供最新的 Edge 文档。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/ai-integration/

<a id="llms-txt"></a>

## 阅读文档

[llms.txt](https://edge.bolerish.com/zh/llms.txt) 是一个简短索引，链接到各指南和 API 参考的 Markdown 文档。如果助手需要完整文档，请提供 [llms-full.txt](https://edge.bolerish.com/zh/llms-full.txt)。

这些文件与本站内容同源生成，并标明对应的包版本。发布文件不代表助手会自动读取，请在请求中附上 URL。

<a id="prompt"></a>

## 编写提示词

粘贴需要修改的组件代码，并说明哪些元素需要显示光照效果。例如，可以这样提问：

```text
Read https://edge.bolerish.com/llms.txt and follow the relevant Markdown links.
Check the installed @bolerish/edge version and its types before choosing APIs.
Add Edge to the component below, preserving its markup, colors and interactions.
Connect only the surfaces I specify. Keep native controls and focus indicators.
Use the library's default motion="system" unless I ask for another mode.
```

<a id="installed-version"></a>

## 确认已安装版本

请检查包清单或锁文件。在线文档可能对应较新版本；若版本不同，请以已安装包的声明和对应文档为准。不要仅为匹配示例而升级依赖。