集成注意事项

选择动态效果

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

了解渲染开销

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

保留原生交互

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

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

与现有伪元素配合使用

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

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>

包裹 input 元素

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

布局变化后刷新

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

React 中的调用方式见light.refresh()。

支持的形状和文档范围

Edge 近似模拟轴对齐矩形。不支持旋转、透视变换和跨文档 Portal。同一文档内的 Portal 可以共享光照。焦点、选择状态和验证见无障碍。