# React · Edge.Provider

Creates a shared light for descendant surfaces.

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

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

## Edge.Styles

Render once per SSR document, before application styles. React reuses this stylesheet when surfaces connect. Keep this component mounted while Edge is in use; use nonce when your CSP requires it. Without it or an explicit CSS import, the default CSS is added on the client when a surface connects.

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

| Prop / option | Type | Default | Description |
| --- | --- | --- | --- |
| `nonce` | `string` | `undefined` | Optional request nonce for the style element. Use the same value on the server and during hydration. Required when your CSP permits inline style elements only with a nonce. |

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

## Edge.Provider

Lets descendant Edge.Surface elements share one light without adding DOM elements. Each nested Edge.Provider creates an independent light.

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

| Prop / option | Type | Default | Description |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | 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. |
| `staticDirection` | `number \| 'random'` | `315` | Direction in degrees for fixed lighting. Random chooses one shared direction per mount and keeps it across ordinary rerenders. Numbers must be finite. |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward faces highlights toward the pointer; away reverses them by 180 degrees. All surface styles preserve this choice. Only affects pointer-driven lighting; staticDirection controls fixed lighting. |
| `range` | `number` | `480` | Distance over which dynamic lighting fades outside a surface, in viewport CSS pixels. Must be positive and finite. |
| `intensity` | `number` | `0.75` | Shared light strength. Must be finite and between 0 and 1; invalid values throw a RangeError. |
| `children` | `ReactNode` | `Required` | The area that shares this light. Ordinary children stay unchanged; only explicit surfaces respond. |
| `ref` | `Ref<Light>` | `Unset` | Optional ref for the stable light handle. Call its refresh() method after position-only layout changes. |

Pointer input comes from the document. The scope chooses which surfaces respond; it does not clip input to a wrapper rectangle. `staticDirection` applies whenever fixed lighting is active, including when `motion="system"` respects reduced motion.