# Primeros pasos · Introducción
Reflejos sutiles para tu UI que conservan los colores, el diseño y las interacciones existentes.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/
## Un poco más de vida.
Agrupa los elementos que deban responder a una misma luz y elige cuáles mostrarán el reflejo. Usa otra luz para las áreas que deban responder por separado.
## Empezar con Edge
Empieza por [Instalación](https://edge.bolerish.com/es/docs/installation/), aprende los conceptos en [Uso](https://edge.bolerish.com/es/docs/usage/) y continúa con [React](https://edge.bolerish.com/es/docs/react/usage/). Consulta las opciones en la [Referencia de la API](https://edge.bolerish.com/es/docs/react/api/).
---
# Primeros pasos · Instalación
Instala Edge y empieza a usarlo en React.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/installation/
## Instalación
El adaptador de React requiere React 18 o 19. Aún no hay adaptadores para otros frameworks.
npm
```bash
npm install @bolerish/edge
```
pnpm
```bash
pnpm add @bolerish/edge
```
Yarn
```bash
yarn add @bolerish/edge
```
Bun
```bash
bun add @bolerish/edge
```
## Estilos predeterminados
React prepara el CSS predeterminado al conectar una superficie, también al usar hooks sin Edge.Provider. No hace falta importar una hoja de estilos. Para SSR, renderiza Edge.Styles una vez por documento, antes de los estilos de la aplicación. Si la CSP requiere un nonce, usa el mismo nonce de la solicitud en el servidor y durante la hidratación.
```tsx
```
```css
@import "@bolerish/edge/style.css";
```
Las importaciones de CSS existentes siguen siendo compatibles. El archivo CSS también está disponible para su uso sin un framework. Si lo importas explícitamente, cárgalo antes de los estilos de la aplicación y las utilidades; el reset puede ir primero. Las importaciones de CSS de paquetes requieren una herramienta de compilación que resuelva esas rutas.
## Empezar con Edge
Elige el área y las superficies en [Uso](https://edge.bolerish.com/es/docs/usage/) y conéctalas siguiendo [React](https://edge.bolerish.com/es/docs/react/usage/).
---
# Primeros pasos · Uso
Comprende las luces y superficies antes de conectar tus componentes.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/usage/
## Elegir un área
Una luz gestiona un grupo de superficies que responden juntas. Puedes compartirla en toda una sección o solo entre algunos elementos.
Una superficie es un elemento HTML conectado a una luz. Solo las superficies conectadas muestran el reflejo. Usa una luz independiente para cada área que deba responder por separado.
## Conservar tu UI
Edge conserva el fondo, texto, espaciado y borde base. El reflejo usa el color de texto y el radio de cada superficie por defecto. Conserva las interacciones y el foco del teclado.
Elige la respuesta de las superficies en [Estilo](https://edge.bolerish.com/es/docs/styles/) y el movimiento de la luz en [Movimiento](https://edge.bolerish.com/es/docs/motion/).
Para contenedores de inputs y conflictos con la decoración existente, consulta [Consideraciones de integración](https://edge.bolerish.com/es/docs/integration/#wrap-inputs-you-own).
Si tu aplicación cambia la posición de los elementos, consulta [cambios de diseño](https://edge.bolerish.com/es/docs/integration/#refresh-after-layout-changes).
## Elige tu framework
Consulta la guía de tu framework.
[
### React
](https://edge.bolerish.com/es/docs/react/usage/)
---
# React · Uso
Empieza con Edge.Provider y Edge.Surface. Usa useSurface para conectar directamente un componente existente.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/react/usage/
## Conectar un área
Completa primero la [Instalación](https://edge.bolerish.com/es/docs/installation/). Si tu framework usa Componentes de Servidor, usa Edge en un módulo cliente con la directiva `"use client"`.
Envuelve el área con `Edge.Provider` y usa `Edge.Surface` solo en los elementos que deban responder. Las dos tarjetas comparten una luz. Cada Edge.Provider anidado crea una luz independiente.
Una luz, tus componentes
```tsx
Example card
Another example card
```
## Conservar estilos y eventos
Elige la etiqueta HTML con `as`. Puedes usar sus atributos, eventos y refs nativos, y aplicar tus estilos mediante `className` y `style`. Edge.Provider no añade elementos DOM; cada Edge.Surface renderiza un elemento.
```tsx
Example button
```
Los elementos input necesitan un contenedor. Si hay conflictos con la decoración existente, consulta [Consideraciones de integración](https://edge.bolerish.com/es/docs/integration/). Configura la apariencia en [Estilo](https://edge.bolerish.com/es/docs/styles/) y el movimiento en [Movimiento](https://edge.bolerish.com/es/docs/motion/).
## Conectar un componente existente
Si Card o Button ya renderiza su propio elemento HTML, llama a [useSurface(options)](https://edge.bolerish.com/es/docs/react/use-surface/#use-surface) dentro del componente y asigna el ref devuelto a ese elemento. Mantén el componente dentro de Edge.Provider. En React 18, reenvía el ref mediante `forwardRef`.
Si cambia la posición del elemento, consulta [actualizaciones de diseño](https://edge.bolerish.com/es/docs/integration/#refresh-after-layout-changes).
---
# React · Edge.Provider
Crea una luz compartida para las superficies descendientes.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/react/provider/
## Edge.Styles
Renderízalo una vez por documento SSR, antes de los estilos de la aplicación. React reutiliza esta hoja de estilos al conectar superficies. Mantén el componente montado mientras uses Edge y pasa un nonce si la CSP lo requiere. Sin este componente ni una importación explícita de CSS, el CSS predeterminado se añade en el cliente al conectar una superficie.
```tsx
```
| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `nonce` | `string` | `undefined` | Nonce opcional de la solicitud para el elemento style. Usa el mismo valor en el servidor y durante la hidratación. Es necesario si la CSP solo permite estilos en línea con nonce. |
## Edge.Provider
Permite que los Edge.Surface descendientes compartan una luz, sin añadir elementos DOM. Cada Edge.Provider anidado crea una luz independiente.
```tsx
{/* Your surfaces */}
```
| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | system respeta las preferencias de movimiento y del dispositivo. dynamic sigue el ratón o lápiz incluso con movimiento reducido. static mantiene una dirección fija. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición. El seguimiento táctil respeta el modo elegido: static permanece fijo y system permanece fijo si está activada la reducción de movimiento. |
| `staticDirection` | `number \| 'random'` | `315` | Dirección en grados para iluminación fija. random elige una dirección compartida por montaje y la conserva al volver a renderizar. Los números deben ser finitos. |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward orienta el reflejo hacia el puntero y away lo invierte 180 grados. Todos los estilos mantienen esta elección. Solo afecta a la luz que sigue al puntero; staticDirection controla la dirección fija. |
| `range` | `number` | `480` | Distancia de atenuación de la luz dinámica fuera de una superficie, en píxeles CSS del viewport. Debe ser positiva y finita. |
| `intensity` | `number` | `0.75` | Intensidad de la luz compartida. Debe ser finita y estar entre 0 y 1; los valores inválidos lanzan RangeError. |
| `children` | `ReactNode` | `Required` | Área que comparte la luz. Los hijos normales no cambian; solo responden las superficies explícitas. |
| `ref` | `Ref` | `Unset` | Ref opcional para recibir el objeto de luz. Su referencia se mantiene estable. Llama a refresh() si solo cambia la posición del elemento. |
Los eventos del puntero se reciben del documento. Edge.Provider determina qué superficies responden, sin limitar la entrada al rectángulo de un contenedor. `staticDirection` se aplica siempre que la luz sea fija, también cuando `motion="system"` respeta la preferencia de movimiento reducido.
---
# React · Edge.Surface
Aplica iluminación a un elemento DOM.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/react/surface/
## Edge.Surface
Renderiza un elemento HTML conectado al Edge.Provider más cercano. La etiqueta elegida con `as` determina los atributos, eventos y refs disponibles.
```tsx
Your content
```
| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | Pseudoelemento de decoración. Elige before para conservar un ::after existente. Si ambos están ocupados o el elemento es una entrada nativa, usa un contenedor. Los valores inválidos lanzan RangeError. |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | Cómo responde el borde a la luz. Los tres estilos conservan la apariencia del componente. |
| `color` | `string` | `currentColor` | Color del reflejo. Usa el color de texto del elemento por defecto. Acepta cualquier cadena de color CSS, incluidas variables. |
| `shadowColor` | `string` | `#0008` | Color del borde opuesto. Acepta cualquier color CSS; usa transparent para quitar esta sombra en superficies claras. |
| `borderWidth` | `number` | `1` | Grosor decorativo en píxeles; no cambia el borde del elemento. Los negativos se limitan a 0. Los valores no finitos usan el predeterminado. |
| `intensity` | `number` | `1` | Multiplicador de la intensidad compartida. Los valores finitos se limitan a 0–1; los no finitos usan el predeterminado. |
| `as` | `HTML tag name` | `'div'` | Elemento HTML que se renderiza. Sus atributos y ref corresponden a la etiqueta elegida; no admite componentes React personalizados. |
| `children` | `ReactNode` | `Unset` | Contenido del elemento. Usa un contenedor para entradas y otros elementos que no puedan mostrar la decoración. |
| `ref` | `Ref` | `Unset` | Se reenvía al elemento junto con el ref de registro interno. Se conserva la limpieza de refs de callback de React 19. |
| `className` | `string` | `Unset` | Tus clases, combinadas con las clases de decoración. |
| `style` | `CSSProperties` | `Unset` | Tus estilos en línea, combinados después de la decoración. Conserva las variables CSS de Edge salvo que quieras sobrescribirlas. |
Usa `Edge.Surface` dentro de `Edge.Provider`. Renderizarlo fuera provoca un error. Para elementos input o conflictos con pseudoelementos existentes, consulta [Consideraciones de integración](https://edge.bolerish.com/es/docs/integration/).
El reflejo se alinea con el exterior del borde del elemento DOM. Para conectar el elemento de un componente existente, usa [useSurface](https://edge.bolerish.com/es/docs/react/use-surface/#use-surface).
---
# React · useLight
Crea y configura un identificador de luz.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/react/use-light/
## useLight(options?)
Devuelve un objeto `Light` de referencia estable para gestionar la luz sin Edge.Provider. Los cambios de opciones actualizan la luz existente. Pásalo a `useSurface(light, options)`. Para un árbol de componentes habitual, basta con `Edge.Provider`.
```tsx
function useLight(options?: LightOptions): Light;
```
| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | system respeta las preferencias de movimiento y del dispositivo. dynamic sigue el ratón o lápiz incluso con movimiento reducido. static mantiene una dirección fija. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición. El seguimiento táctil respeta el modo elegido: static permanece fijo y system permanece fijo si está activada la reducción de movimiento. |
| `staticDirection` | `number \| 'random'` | `315` | Dirección en grados para iluminación fija. random elige una dirección compartida por montaje y la conserva al volver a renderizar. Los números deben ser finitos. |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward orienta el reflejo hacia el puntero y away lo invierte 180 grados. Todos los estilos mantienen esta elección. Solo afecta a la luz que sigue al puntero; staticDirection controla la dirección fija. |
| `range` | `number` | `480` | Distancia de atenuación de la luz dinámica fuera de una superficie, en píxeles CSS del viewport. Debe ser positiva y finita. |
| `intensity` | `number` | `0.75` | Intensidad de la luz compartida. Debe ser finita y estar entre 0 y 1; los valores inválidos lanzan RangeError. |
`range` solo afecta a la iluminación dinámica. La luz fija no se atenúa con la distancia y usa la dirección indicada por `staticDirection`.
## light.refresh()
Vuelve a medir las superficies en el siguiente fotograma, incluso con el puntero inmóvil. Llámalo después de que React aplique cambios de posición o grosor del borde sin notificación de tamaño.
```tsx
interface Light {
refresh(): void;
}
```
Los cambios de tamaño y el scroll se detectan automáticamente. Consulta [actualizaciones de diseño](https://edge.bolerish.com/es/docs/integration/#refresh-after-layout-changes) para más información.
---
# React · useSurface
Devuelve una ref que conecta un elemento DOM existente a una luz.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/react/use-surface/
## useSurface(options?)
Devuelve un ref de callback que conecta un elemento HTML existente al Edge.Provider más cercano. Asígnalo al elemento que muestra el borde. Puedes conservar sus propiedades `className` y `style`.
```tsx
const ref = useSurface(options);
```
```tsx
function Area() {
return ;
}
function ExistingCard() {
const ref = useSurface();
return Your existing component;
}
```
En React 18, los componentes de función deben usar `forwardRef` para pasar el ref al elemento HTML. React 19 también permite recibir ref como prop.
Si no pasas una luz explícita, necesitas Edge.Provider. Para gestionar la luz directamente, pasa el objeto devuelto por `useLight` a `useSurface(light, options)`. La luz explícita tiene prioridad sobre la de Edge.Provider.
| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | Pseudoelemento de decoración. Elige before para conservar un ::after existente. Si ambos están ocupados o el elemento es una entrada nativa, usa un contenedor. Los valores inválidos lanzan RangeError. |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | Cómo responde el borde a la luz. Los tres estilos conservan la apariencia del componente. |
| `color` | `string` | `currentColor` | Color del reflejo. Usa el color de texto del elemento por defecto. Acepta cualquier cadena de color CSS, incluidas variables. |
| `shadowColor` | `string` | `#0008` | Color del borde opuesto. Acepta cualquier color CSS; usa transparent para quitar esta sombra en superficies claras. |
| `borderWidth` | `number` | `1` | Grosor decorativo en píxeles; no cambia el borde del elemento. Los negativos se limitan a 0. Los valores no finitos usan el predeterminado. |
| `intensity` | `number` | `1` | Multiplicador de la intensidad compartida. Los valores finitos se limitan a 0–1; los no finitos usan el predeterminado. |
Un elemento DOM solo puede conectarse a una luz. No asignes el ref a un elemento padre con dimensiones distintas.
Las opciones se actualizan sin sustituir el elemento. El hook aplica el reflejo después de la hidratación. Usa `Edge.Surface` si necesitas incluir sus clases y variables CSS en el HTML del servidor.
---
# Estilos · Estilo
Elige cómo responde una superficie a la luz sin cambiar sus estilos base.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/styles/
## Comparar la respuesta del borde
Elige un estilo y mueve el puntero alrededor de la tarjeta. La configuración elegida también se aplica a las tarjetas, los bloques de código y los elementos de navegación del sitio.
Comparar estilos de borde
```tsx
const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });
Your component
```
## Valores de estilo
| Valor | Comportamiento |
| --- | --- |
| `raised` | Ilumina el borde orientado hacia la luz. Predeterminado. |
| `recessed` | Dibuja el reflejo hacia dentro, a una distancia igual al grosor del borde decorativo. Mantiene la dirección de la luz seleccionada. |
| `matte` | Suaviza la respuesta del borde. |
Consulta las opciones adicionales en la [Referencia de la API](https://edge.bolerish.com/es/docs/react/surface/#lighting-surface).
## Raised
Usa `edgeStyle: 'raised'` para resaltar el borde hacia fuera.
## Recessed
Usa `edgeStyle: 'recessed'` para dibujar el reflejo hacia dentro a una distancia igual al grosor del borde decorativo, por ejemplo en contenedores de input. Mantiene la dirección de la luz seleccionada.
## Matte
Usa `edgeStyle: 'matte'` para un borde más suave y discreto.
## Personalizar el reflejo
Cada superficie usa su propio color de texto, incluso si está anidada, y el border-radius del elemento DOM conectado. Cambia el reflejo con `color` y multiplica la intensidad compartida con `intensity`. Usa `shadowColor="transparent"` para quitar la sombra del borde opuesto. `borderWidth` cambia solo el grosor decorativo, no el borde real. Pasa las opciones a [Edge.Surface](https://edge.bolerish.com/es/docs/react/surface/#lighting-surface); no necesitas declarar variables CSS.
El efecto simula de forma aproximada la dirección de la luz sobre rectángulos alineados con los ejes, sin reproducir una fuente de luz puntual física. Cerca del centro, la intensidad del reflejo disminuye en una región proporcional al tamaño de la superficie.
Para usar pseudoelementos existentes o contenedores de inputs, consulta [Consideraciones de integración](https://edge.bolerish.com/es/docs/integration/).
---
# Estilos · Movimiento
Elige si la luz compartida sigue al puntero o mantiene una dirección fija.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/motion/
## Elegir el comportamiento del movimiento
Usa `system` para respetar el movimiento reducido. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición. Ofrece `dynamic` como una elección explícita, ya que ignora el movimiento reducido. Consulta [Movimiento](https://edge.bolerish.com/es/docs/motion/).
## Elegir el comportamiento del movimiento
Prueba cada modo. La selección actualiza la luz compartida de todo el sitio, incluida la tarjeta de ejemplo.
Comparar movimiento
```tsx
const light = useLight({ motion: "dynamic" });
const surface = useSurface(light, { edgeStyle: "raised" });
Your component
```
## Iluminación del puntero
toward ilumina el borde orientado hacia el puntero; away ilumina el opuesto. range es la distancia de atenuación fuera de cada superficie. Por ejemplo, con range: 40 el efecto desaparece cuando el puntero está a 40 píxeles CSS de la tarjeta, fuera de ella; no crea un círculo iluminado de 40 píxeles alrededor del puntero. Mueve el puntero fuera de la tarjeta para comparar los valores. Estos ajustes no afectan a la iluminación fija.
Iluminación del puntero
```tsx
const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });
```
## Valores de movimiento
| Valor | Comportamiento |
| --- | --- |
| `system` | Respeta las preferencias de movimiento reducido y de entrada. Predeterminado de la biblioteca. |
| `dynamic` | Sigue el ratón, lápiz o contacto táctil incluso con movimiento reducido activado. |
| `static` | Mantiene una dirección fija e ignora el movimiento del puntero. |
Consulta las opciones adicionales en la [Referencia de la API](https://edge.bolerish.com/es/docs/react/provider/#lighting).
## System
Sin un dispositivo preciso con hover, la luz empieza fija. El ratón o lápiz puede activar el seguimiento si el movimiento reducido está desactivado. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición.
## Dynamic
Ofrece este modo como opción explícita porque ignora la reducción de movimiento. El efecto permanece oculto hasta recibir entrada de ratón, lápiz o contacto táctil.
## Static
Asigna a `staticDirection` un ángulo finito en grados o `"random"`. El ejemplo ofrece 0°, 90°, 180°, 270° y 315°. random elige una dirección compartida al montar y la conserva al volver a renderizar o cambiar la apariencia. Vuelve a montar para elegir otra dirección.
Static
```tsx
const light = useLight({ motion: 'static', staticDirection: "random" });
```
## Respetar las preferencias del usuario
El foco, la selección y la validación deben distinguirse sin depender de la luz. Consulta [Accesibilidad](https://edge.bolerish.com/es/docs/integration/#preserve-native-interactions) para los modos de entrada y colores forzados.
---
# Guías · Consideraciones de integración
Consulta cómo usar Edge con pseudoelementos existentes, elementos input y cambios de diseño.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/integration/
## Elegir el comportamiento del movimiento
system respeta las preferencias de movimiento y del dispositivo. dynamic sigue el ratón o lápiz incluso con movimiento reducido. static mantiene una dirección fija. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición. El seguimiento táctil respeta el modo elegido: static permanece fijo y system permanece fijo si está activada la reducción de movimiento.
## Entender el coste de renderizado
Cada luz programa como máximo un fotograma, lee la geometría antes de escribir estilos y omite salidas sin cambios. Los cambios de gradiente siguen requiriendo renderizado del navegador; no se garantiza una tasa de fotogramas ni un consumo de batería.
## Conservar las interacciones nativas
Conserva las etiquetas, el contraste del texto, los bordes base y el foco visible. La decoración no captura eventos del puntero; tú controlas los valores, la selección, el teclado y los portales.
El modo de colores forzados oculta la decoración. Comunica la selección, la validación y la disponibilidad independientemente del reflejo.
## Usar pseudoelementos existentes
Edge dibuja el reflejo en `::after` por defecto. Usa `pseudoElement: 'before'` para conservar un `::after` existente. Si ambos pseudoelementos están ocupados, aplica Edge a un contenedor externo.
Conservar pseudoelementos existentes
```tsx
import { Edge } from '@bolerish/edge';
Your existing ::after stays intact.
```
## Envolver elementos input
Los inputs nativos no muestran pseudoelementos de forma fiable. Conecta un `label` o `div` externo con el mismo border-radius. Conserva la etiqueta, el foco, la validación y el teclado del input. Usa `recessed` para un aspecto hundido.
## Actualizar tras cambios de diseño
Edge actualiza la geometría automáticamente al cambiar el tamaño, hacer scroll anidado, redimensionar el viewport o cargar fuentes y recursos. Si solo cambia la posición o el grosor del borde sin notificación de tamaño, llama a `light.refresh()` después de aplicar el diseño. Se actualiza aunque el puntero esté inmóvil.
Consulta cómo llamarlo desde React en la [light.refresh()](https://edge.bolerish.com/es/docs/react/use-light/#refresh).
## Geometría y límites entre documentos
Edge aproxima rectángulos alineados con los ejes. No admite rotación, transformaciones de perspectiva ni portales entre documentos. Los portales del mismo documento pueden compartir luz. Para foco, selección y validación, consulta [Accesibilidad](https://edge.bolerish.com/es/docs/integration/#preserve-native-interactions).
---
# Guías · Integración con IA
Proporciona documentación actual de Edge a tu asistente antes de que modifique la UI.
Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/ai-integration/
## Leer la documentación
[llms.txt](https://edge.bolerish.com/es/llms.txt) contiene un índice breve con enlaces a las guías y la referencia de la API en Markdown. Si tu asistente necesita toda la documentación, proporciona [llms-full.txt](https://edge.bolerish.com/es/llms-full.txt).
Estos archivos se generan a partir del mismo contenido del sitio e indican la versión del paquete. Publicarlos no garantiza que un asistente los lea automáticamente; incluye la URL en tu petición.
## Escribir un prompt
Pega el código del componente que quieres modificar e indica qué elementos deben responder a la luz. Por ejemplo:
```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.
```
## Comprobar la versión instalada
Comprueba el manifiesto o el archivo de bloqueo. La web puede describir una versión más reciente; si difieren, usa las declaraciones y documentación de la versión instalada. No actualices dependencias solo para seguir un ejemplo.