# はじめに · はじめに

既存の色、レイアウト、操作を保ちながら、UI に控えめなハイライトを加えます。

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

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

## UI に、少しの躍動感を。

同じライトに反応させる要素をまとめ、その中でハイライトを表示するサーフェスを選びます。独立して反応させたい領域には別のライトを用意します。

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

## Edge を使い始める

まず[インストール](https://edge.bolerish.com/ja/docs/installation/)でパッケージを追加し、[使い方](https://edge.bolerish.com/ja/docs/usage/)で基本の概念を確認してください。接続方法は[React](https://edge.bolerish.com/ja/docs/react/usage/)、各オプションの説明は[API リファレンス](https://edge.bolerish.com/ja/docs/react/api/)にあります。

---

# はじめに · インストール

Edge をインストールして React で使い始めます。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/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 を自動で用意します。Edge.Provider を使わずフックだけで接続する場合も、CSS のインポートは不要です。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/ja/docs/usage/)で光を共有する領域とサーフェスを決め、[React](https://edge.bolerish.com/ja/docs/react/usage/)の手順で接続します。

---

# はじめに · 使い方

コンポーネントを接続する前に、光とサーフェスを理解します。

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

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

## 領域を選ぶ

ライトは、一緒に反応するサーフェスのグループを管理します。セクション全体でも、一部の要素だけでもライトを共有できます。

サーフェス（surface）はライトに接続した HTML 要素です。接続したサーフェスだけがハイライトを表示します。独立して反応させる領域には別のライトを使います。

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

## 既存の UI を維持する

Edge は背景、文字、余白、基本の境界線を維持します。デフォルトのハイライトは各サーフェスの文字色と角丸を使います。既存の操作とキーボードフォーカスを維持してください。

サーフェスの反応は[スタイル](https://edge.bolerish.com/ja/docs/styles/)、光の動きは[動き](https://edge.bolerish.com/ja/docs/motion/)で選べます。

input のラッパーや既存の装飾との競合は、[導入時の注意点](https://edge.bolerish.com/ja/docs/integration/#wrap-inputs-you-own)を参照してください。

アプリから要素の位置を変更する場合は、[レイアウトの変更](https://edge.bolerish.com/ja/docs/integration/#refresh-after-layout-changes)を参照してください。

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

## フレームワークを選ぶ

使用するフレームワークのガイドを確認してください。

[

### React





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

---

# React · 使い方

まず Edge.Provider と Edge.Surface を使用してください。既存のコンポーネントに直接接続する場合は useSurface を使用できます。

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

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

## 領域を接続する

まず[インストール](https://edge.bolerish.com/ja/docs/installation/)を完了してください。サーバーコンポーネントを使うフレームワークでは、`"use client"` を宣言したクライアントモジュール内で Edge を使います。

光を共有する領域を `Edge.Provider` で囲み、反応させる要素にだけ `Edge.Surface` を使います。下の 2 つのカードは同じ光に反応します。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 は要素を 1 つレンダリングします。

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

input 要素にはラッパーが必要です。既存の装飾と競合する場合は[導入時の注意点](https://edge.bolerish.com/ja/docs/integration/)を参照してください。外観は[スタイル](https://edge.bolerish.com/ja/docs/styles/)、動きは[動き](https://edge.bolerish.com/ja/docs/motion/)で設定できます。

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

## 既存コンポーネントを接続する

Card や Button が自身の HTML 要素をレンダリングしている場合は、コンポーネント内で [useSurface(options)](https://edge.bolerish.com/ja/docs/react/use-surface/#use-surface) を呼び、返された ref をその要素に渡します。コンポーネントは Edge.Provider の内側に配置してください。React 18 の関数コンポーネントでは `forwardRef` で ref を転送します。

要素の位置が変わる場合は、[レイアウトの更新](https://edge.bolerish.com/ja/docs/integration/#refresh-after-layout-changes)を参照してください。

---

# React · Edge.Provider

子孫のサーフェスで共有する照明を作成します。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/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

DOM 要素を追加せずに、子孫の Edge.Surface でライトを共有します。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/ja/docs/react/surface/

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

## Edge.Surface

最も近い Edge.Provider に接続した HTML 要素を 1 つレンダリングします。`as` で選んだタグに応じた HTML 属性、イベント、ref を使えます。

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

| Prop / オプション | 型 | デフォルト | 説明 |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | 装飾に使う擬似要素です。既存の ::after を保つには before を選びます。両方が使用済み、またはネイティブ入力の場合はラッパーを使います。不正な値は RangeError を発生させます。 |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | 境界が光に反応する方法です。3 つのスタイルはいずれもコンポーネントの外観を維持します。 |
| `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 要素の内側に表示する内容です。input など擬似要素を直接表示できない要素にはラッパーを使います。 |
| `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/ja/docs/integration/)を参照してください。

ハイライトは DOM 要素の境界線の外側に揃います。既存コンポーネントがレンダリングする DOM 要素には、[useSurface](https://edge.bolerish.com/ja/docs/react/use-surface/#use-surface) で接続します。

---

# React · useLight

照明ハンドルを作成して設定します。

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

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

## useLight(options?)

Edge.Provider を使わずに光を管理するための `Light` ハンドルを返します。参照は維持され、オプションの変更は既存の光に反映されます。このハンドルを `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/ja/docs/integration/#refresh-after-layout-changes)を参照してください。

---

# React · useSurface

既存の DOM 要素を照明に接続する ref を返します。

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

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

## useSurface(options?)

既存の HTML 要素を最も近い Edge.Provider に接続するコールバック ref を返します。境界線を表示する要素に 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'` | 装飾に使う擬似要素です。既存の ::after を保つには before を選びます。両方が使用済み、またはネイティブ入力の場合はラッパーを使います。不正な値は RangeError を発生させます。 |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | 境界が光に反応する方法です。3 つのスタイルはいずれもコンポーネントの外観を維持します。 |
| `color` | `string` | `currentColor` | ハイライトの色です。デフォルトでは DOM 要素の文字色に従います。CSS 変数を含む任意の CSS 色文字列を指定できます。 |
| `shadowColor` | `string` | `#0008` | 反対側の境界の色です。任意の CSS 色文字列を指定できます。明るいサーフェスの影を消すには transparent を使います。 |
| `borderWidth` | `number` | `1` | 装飾の太さをピクセルで指定します。 DOM 要素の境界線は変えません。負数は 0 に制限され、有限でない値はデフォルト値になります。 |
| `intensity` | `number` | `1` | 共有するライトの強度に掛ける値です。有限値は 0〜1 に制限され、有限でない値はデフォルト値になります。 |

1 つの DOM 要素に接続できるライトは 1 つだけです。サイズが異なる親要素に ref を渡さないでください。

オプションを更新しても要素は置き換わりません。フックで接続したハイライトはハイドレーション後に適用されます。サーバー HTML にもクラスと CSS 変数を含めるには、`Edge.Surface` を使います。

---

# スタイル · スタイル

基本のスタイルを変えずに、サーフェスが光に反応する方法を選びます。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/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/ja/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/ja/docs/react/surface/#lighting-surface) に渡せばよく、CSS 変数の宣言は不要です。

この効果は、座標軸に平行な長方形に対して光が当たる方向を近似的に表現するもので、物理的な点光源を再現するものではありません。サーフェスの中心付近では、その大きさに比例した領域でハイライトの強度が弱まります。

既存の擬似要素や input のラッパーと組み合わせる場合は、[導入時の注意点](https://edge.bolerish.com/ja/docs/integration/)を参照してください。

---

# スタイル · 動き

共有する光がポインターに追従するか、方向を固定するかを選びます。

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

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

## 動きの設定を選ぶ

`system` は動きを減らす設定に従います。タッチで画面基準の照明位置を更新します。スクロール中や指を離した後も最後の位置を保ち、その下を移動するサーフェスが反応します。再びタッチすると位置を更新します。`dynamic` は動きを減らす設定を上書きするため、ユーザーが明示的に選べるようにしてください。詳しくは[動き](https://edge.bolerish.com/ja/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/ja/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/ja/docs/integration/#preserve-native-interactions)を参照してください。

---

# ガイド · 導入時の注意点

既存の擬似要素、input 要素、レイアウト変更と組み合わせる方法を確認します。

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

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

## 動きの設定を選ぶ

system は動きを減らす設定と入力機器の設定に従います。dynamic は動きを減らす設定でもマウスやペンに追従します。static は方向を固定します。タッチで画面基準の照明位置を更新します。スクロール中や指を離した後も最後の位置を保ち、その下を移動するサーフェスが反応します。再びタッチすると位置を更新します。 タッチ追従も選択したモーションモードに従います。static は固定され、system は動きを減らす設定が有効な場合に固定されます。

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

## レンダリングの負荷を理解する

各ライトは最大 1 フレームを予約し、スタイルの書き込み前に形状を読み取り、変更のない出力を省略します。グラデーションの変更にはブラウザーの描画処理が必要なため、フレームレートや電池消費は保証しません。

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

## ネイティブの操作を維持する

ラベル、文字のコントラスト、基本の境界線、キーボードフォーカスを維持してください。装飾はポインターイベントを遮らず、入力値、選択、キーボード操作、ポータルは従来どおり管理できます。

強制カラーモードでは装飾が非表示になります。選択、検証、利用可否はハイライトに頼らず伝えてください。

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

## 既存の擬似要素と組み合わせる

Edge はデフォルトで `::after` にハイライトを描画します。既存の `::after` を維持するには `pseudoElement: 'before'` を設定します。両方の擬似要素が使用済みなら、外側にラッパーを追加して適用してください。

既存の擬似要素を維持

```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/ja/docs/react/use-light/#refresh)を参照してください。

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

## 対応する形状とドキュメントの範囲

Edge は軸に沿った矩形を前提とします。回転、遠近変換、別ドキュメントへのポータルには対応していません。同一ドキュメント内のポータルは光を共有できます。フォーカス、選択、検証については[アクセシビリティ](https://edge.bolerish.com/ja/docs/integration/#preserve-native-interactions)を参照してください。

---

# ガイド · AI との統合

アシスタントが UI を変更する前に、最新の Edge ドキュメントを渡してください。

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

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

## ドキュメントを読む

[llms.txt](https://edge.bolerish.com/ja/llms.txt) は各ガイドと API リファレンスの Markdown へのリンクをまとめた短い索引です。ドキュメント全体が必要な場合は、[llms-full.txt](https://edge.bolerish.com/ja/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>

## インストール済みのバージョンを確認する

パッケージ設定やロックファイルを確認してください。ウェブの文書は新しい版の説明かもしれません。異なる場合は、インストール済みパッケージの型宣言と対応する文書を使います。例に合わせるだけの依存更新は避けてください。