# @unpic/react Provider

`@unpic/react` интегрируется через base component и custom transformer из `@image-platform/client`.

## Remote source mode

Remote source mode принимает обычный image `src` из проекта или внешний URL и генерирует responsive `srcset` через Gateway:

```text
GET /p/{project}/remote/{preset}?src={sourceUrl}&w={width}&q={quality}&f=auto
```

## Usage

```tsx
import { Image } from "@unpic/react/base"
import { imagePlatformUnpicTransformer } from "@image-platform/client"

export function ProductImage() {
  return (
    <Image
      alt="Product"
      layout="constrained"
      options={{
        baseUrl: "https://img.example.com",
        preset: "card",
        project: "acme",
        sourceBaseUrl: "https://site.example.com",
      }}
      src="/images/product.jpg"
      transformer={imagePlatformUnpicTransformer}
      width={640}
      height={420}
    />
  )
}
```

Если `src` относительный, `sourceBaseUrl` превращает его в абсолютный source URL. Если `src` уже абсолютный, он используется без изменений.

## Breakpoints

Static presets принимают только разрешённые widths. Для `card` это `320`, `640`, `960`, поэтому consumer должен передать compatible `breakpoints` или использовать Next/Unpic config, который не генерирует лишние widths.

```tsx
<Image
  alt="Product"
  breakpoints={[320, 640, 960]}
  height={420}
  layout="constrained"
  options={{ baseUrl: "https://img.example.com", preset: "card", project: "acme", sourceBaseUrl: "https://site.example.com" }}
  src="/images/product.jpg"
  transformer={imagePlatformUnpicTransformer}
  width={640}
/>
```

## Auth

Image delivery URL публичный и не использует `Authorization`. Management API tokens нужны только server-side для создания assets, versions и variants.