# Guides · Integration considerations

Handle decoration conflicts, native inputs and layout changes.

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

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

## Choose motion behavior

System respects reduced-motion and device preferences. Dynamic follows mouse or pen input, even with reduced motion enabled. Static keeps a fixed direction. Touch updates the light position in viewport coordinates. Scrolling and lifting the finger preserve the last position; surfaces respond as they move beneath it. A new touch updates the position. Touch tracking follows the selected motion mode: static stays fixed, and system stays fixed when reduced motion is enabled.

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

## Understand rendering cost

Each light queues at most one frame, reads geometry before writing styles, and skips unchanged output. Gradient changes still require browser rendering work; this does not guarantee a frame rate or battery cost.

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

## Preserve native interactions

Keep labels, text contrast, base borders and visible keyboard focus. Decoration does not capture pointer events; input values, selection, keyboard handling and portals remain under your control.

Forced-colors mode hides decoration. Communicate selection, validation and availability independently of the highlight.

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

## Keep existing decorations

Edge uses `::after` by default. Set `pseudoElement: 'before'` to keep an existing `::after`. If both pseudo-elements are occupied, decorate a wrapper.

Keep existing pseudo-elements

```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>

## Wrap native inputs

Native inputs do not reliably display pseudo-element decoration. Connect a surrounding `label` or `div` with a matching radius instead. Keep the input’s label, focus, validation and keyboard behavior. Use `recessed` for an inset appearance.

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

## Refresh after layout changes

Size changes, nested scrolling, viewport resizing, font loading and resource loads update geometry automatically. After a position-only change or a element's border-thickness change without a size notification, call `light.refresh()` once the new layout is applied. It updates even with a stationary pointer.

See [light.refresh()](https://edge.bolerish.com/docs/react/use-light/#refresh) for the React call.

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

## Geometry and document boundaries

Edge approximates axis-aligned rectangles. Rotation, perspective transforms and cross-document portals are unsupported. Portals within the same document can share a light. For focus, selection and validation, see [Accessibility](https://edge.bolerish.com/docs/integration/#preserve-native-interactions).