> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fluid.app/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> For new direct REST integrations, use the v2026-04 surfaces. The @fluid-app FairShare SDK continues to use its own published public-v2025-06 contract.
> Authenticate with the header Authorization: Bearer <token>; public storefront read endpoints require no auth.
> Lists use cursor pagination via the page[cursor] and page[limit] query params; follow meta.pagination.next_cursor until it is null.
> When the same operation exists on more than one surface, use the newest: dated API versions are newer than unversioned ones, and later dates win (v2026-04 > v2025-06 > unversioned v0/v1.1). Fall back to a legacy or unversioned operation only when no newer versioned equivalent exists — the company-v0 notes below list the known superseded operations. /api/company/v1 and /api/v1/... paths are documented in no spec here and must never be used (/api/v1.1/... is distinct and documented in company-v0). Use page/per_page offset pagination only where a spec documents it — in practice the unversioned company-v0 admin surface; every versioned surface uses cursor pagination.
> The OpenAPI specs under api-reference/ are the authoritative contracts; prefer them over prose when in doubt. api-reference/storefront-v2026-04.yaml covers the v2026-04 storefront surface (/api/v202604/... paths); api-reference/auth-v0.yaml covers the unversioned auth surface (/api/... paths — authentication, MFA, social auth, and token exchange); api-reference/checkout-v2026-04.yaml covers the v2026-04 checkout surface (/api/checkout/v2026-04/... paths — carts, cart auth, discounts, items, subscriptions, orders, enrollments, and store config); api-reference/public-v2025-06.yaml covers the Public SDK surface used by the @fluid-app FairShare SDK, including its parallel cart lifecycle, browser integrations, versioned payment callbacks, unversioned public utilities, and the cart price-override operation; api-reference/payment-v2026-04.yaml covers the v2026-04 payment gateway admin surface (/api/payment/v2026-04/... paths, bearer-authenticated — gateway CRUD, gateway purchase/authorize/$0-verify, transaction list/show and capture/void/credit, and merchant payment configuration); api-reference/payments-v2026-04.yaml covers the v2026-04 cart payment surface (/api/payments/v2026-04/carts/{cart_token}/... paths, authenticated by the cart token in the path with no bearer — payment-method selection, VGS card tokenization, 3D Secure verification, and PayPal/Braintree/Klarna/Apple Pay flows); api-reference/commerce-v2026-04.yaml covers the v2026-04 commerce order-editing surface (/api/v202604/orders/{order_id}/edits paths, bearer-authenticated — post-checkout order edits that atomically insert items and add adjustments/discounts, with an optional dry-run preview); api-reference/webhooks-v0.yaml covers the unversioned webhooks surface (/api/... paths — webhook registration, delivery payloads, callback registrations, company events, and webhook/callback schemas); api-reference/company-v0.yaml covers the legacy unversioned company admin surface (/api/... paths, bearer-authenticated — company settings and management, customers, users, roles, subscription plans, subscription bundles, subscriptions, media, pages, catch-ups, inventory levels, domains, agreements, and admin order actions). company-v0 caveats: it is the legacy v0 admin contract and its lists use flat page/per_page offset pagination, which is expected there despite the general cursor-pagination rule; where an operation exists in both company-v0 and a versioned spec, prefer the versioned spec — the subscriptions lifecycle (list/create/show/update, cancel, pause, reactivate, resume, retry, skip, failed-cycle-waiver, discounts) and subscription bundles are superseded by checkout-v2026-04, and company pages/media CRUD plus the public pages, categories, products, and media list endpoints are superseded by storefront-v2026-04. Subscription plan management (/api/subscription_plans, resource-wrapped {"subscription_plan": {...}} bodies) exists only in company-v0. api-reference/analytics-v2026-04.yaml covers the v2026-04 Home dashboard analytics surface (/api/v202604/analytics/dashboard/... paths, bearer-authenticated — read-only endpoints for the Home > Overview, Home > Live, and Home > Field tabs, each accepting an optional country ISO alpha-2 query param that scopes aggregations to a single country).
> api-reference/analytics-v0.yaml covers the unversioned analytics surface that backs the fluid-admin Traffic tab (/api/analytics/... and /api/analytics/traffic/... paths, bearer-authenticated — the legacy shares/views/visitors summary plus traffic overview, ranked campaigns, sources, geographies, flows, and per-rep breakdown, all sharing one reporting-period contract).
> Successful responses wrap the resource payload alongside a top-level integer status and a meta object.
> Portal Definition authoring edits and synchronizes the portal JSON resource graph. Widget Package authoring builds either a company-owned or Droplet-owned Remote DOM package. These are separate contracts; do not imply that one defines the other.
> For Widget Package worker code, use only @fluid-app/portal-sdk/widgets/worker. Use only the Portal Definition and Widget Package workflows and public entry points documented here; do not infer support for undocumented surfaces.
> Every portal function and declarative capability used by a widget must appear in that widget's uses array. Use the same typed function value in uses; do not invent capability-name strings.
> Widget styling must use the portal's semantic theme variables for colors, typography, spacing, radii, borders, focus, and charts whenever a token represents the visual decision. Do not create a separate light or dark palette or duplicate theme controls as widget properties.
> Prefer worker-safe Fluid UI components exported by @fluid-app/portal-sdk/widgets/worker when they fit the interaction. When no exported component fits, use semantic HTML, accessible behavior, and the portal theme variables.
> A Portal Definition push updates the remote working definition. A portal version is an immutable snapshot, and activation is a separate live release operation.

# Files SDK

> Embed Fluid's DAM picker to browse, upload, transform, and select assets from your application.

The Files SDK adds Fluid's Digital Asset Management (DAM) picker to your
application. You can let users browse approved assets, upload files, import a
public URL, search Unsplash, or generate an image with AI.

The package works with vanilla JavaScript and includes React bindings.

## Install the SDK

<CodeGroup>
  ```bash npm theme={null}
  npm install @fluid-app/dam-picker
  ```

  ```bash pnpm theme={null}
  pnpm add @fluid-app/dam-picker
  ```

  ```bash yarn theme={null}
  yarn add @fluid-app/dam-picker
  ```
</CodeGroup>

## Choose an asset

Create one picker instance, then call `open()` in response to a user action.

```javascript theme={null}
import { DamPicker } from "@fluid-app/dam-picker";

const picker = new DamPicker({
  token: "pub-acme-wellness-assets",
  shopName: "acme-wellness",
  accept: ["image/*"],
  maxFiles: 1,
  onSelect: (result) => {
    const image = result.asset;
    document.querySelector("#hero-image").src = image.url;
  },
  onCancel: () => {
    console.log("Asset selection cancelled");
  },
  onError: (error) => {
    console.error(error.code, error.message);
  },
});

document.querySelector("#choose-image").addEventListener("click", () => {
  picker.open();
});
```

For browser integrations outside Fluid Admin, pass a public (`pub-`) token and
the company's shop name. Do not put a company or partner token in client-side
code. See [Authentication](/api/authentication#public-token) for token guidance.

## Configure the picker

Use these options to shape the selection workflow.

| Option            | Purpose                                                                     |
| ----------------- | --------------------------------------------------------------------------- |
| `accept`          | Restrict files by MIME type or extension, such as `["image/*", ".pdf"]`.    |
| `fromSources`     | Choose which source tabs appear.                                            |
| `maxFiles`        | Limit how many files a user can select or upload. The default is `1`.       |
| `minFiles`        | Require a minimum number of selections. The default is `1`.                 |
| `maxSize`         | Set the maximum size of each file in megabytes.                             |
| `imageDim`        | Require exact image dimensions as `[width, height]`.                        |
| `imageMin`        | Require minimum image dimensions as `[width, height]`.                      |
| `imageMax`        | Require maximum image dimensions as `[width, height]`.                      |
| `transformations` | Show selected transformation tools, or use `false` to skip transformations. |
| `onSelect`        | Receive the confirmed asset selection.                                      |
| `onCancel`        | Handle the user closing the picker without a selection.                     |
| `onError`         | Handle authentication, network, validation, and upload errors.              |

### Select sources

The SDK supports five source identifiers:

* `local_file_system`
* `url`
* `dam_library`
* `unsplash`
* `ai_generate`

For example, you can limit an editor to uploads and the approved DAM library:

```javascript theme={null}
const picker = new DamPicker({
  token: "pub-acme-wellness-assets",
  shopName: "acme-wellness",
  fromSources: ["local_file_system", "dam_library"],
  accept: ["image/*"],
  maxFiles: 5,
  onSelect: (result) => {
    renderGallery(result.assets);
  },
});
```

### Configure transformations

All available transformation tools are enabled by default. Set individual tools
to `false` when a workflow should offer fewer choices.

```javascript theme={null}
const picker = new DamPicker({
  token: "pub-acme-wellness-assets",
  shopName: "acme-wellness",
  accept: ["image/*"],
  transformations: {
    crop: true,
    rotate: true,
    quality: true,
    removeBackground: true,
    changeBackground: false,
    upscale: false,
    retouch: false,
    dropShadow: false,
    smartCrop: true,
    editWithAi: false,
  },
  onSelect: ({ asset }) => {
    updateProductImage(asset.url);
  },
});
```

Set `transformations: false` for files that should be returned without an
editing step.

## Use the selection result

`onSelect` receives a result with two views of the selection:

* `result.asset` is the first selected asset.
* `result.assets` is every selected asset and is always an array.

Each selected asset includes its public `url`, `assetCode`, `name`, and
`mimeType`. It can also include dimensions, file size, a variant identifier,
and a numeric DAM identifier.

```typescript theme={null}
import type { DamPickerResult } from "@fluid-app/dam-picker";

function saveSelection(result: DamPickerResult) {
  const records = result.assets.map((asset) => ({
    assetCode: asset.assetCode,
    url: asset.url,
    mimeType: asset.mimeType,
    width: asset.metadata?.width,
    height: asset.metadata?.height,
  }));

  saveAssets(records);
}
```

Store the `assetCode` with the URL when you need a stable DAM identity as well
as a renderable asset location.

## Open an existing asset for editing

Pass `asset` to skip source selection and open one existing asset in the
transformation editor. You can identify it by its DAM asset code.

```javascript theme={null}
const editor = new DamPicker({
  token: "pub-acme-wellness-assets",
  shopName: "acme-wellness",
  asset: { assetCode: "hero-summer-2026" },
  onSelect: ({ asset }) => {
    updateHeroImage(asset.url);
  },
});

editor.open();
```

You can also pass an asset URL, or both the URL and asset code.

## Use the React hook

Import React bindings from `@fluid-app/dam-picker/react`. The hook returns an
`open()` function and the current open state.

```tsx theme={null}
import { useState } from "react";
import { useDamPicker } from "@fluid-app/dam-picker/react";

export function ImageSelector() {
  const [imageUrl, setImageUrl] = useState<string>();
  const { open, isOpen } = useDamPicker({
    token: "pub-acme-wellness-assets",
    shopName: "acme-wellness",
    accept: ["image/*"],
    maxFiles: 1,
  });

  return (
    <div>
      <button
        disabled={isOpen}
        onClick={() =>
          open({
            onSelect: ({ asset }) => setImageUrl(asset.url),
          })
        }
      >
        Choose image
      </button>

      {imageUrl && <img src={imageUrl} alt="Selected product" />}
    </div>
  );
}
```

For declarative control, import `DamPickerModal` from the same React entry
point.

## Clean up an instance

Call `destroy()` when the component or view that owns a vanilla JavaScript
picker is removed.

```javascript theme={null}
picker.destroy();
```

This closes the picker and removes the resources associated with that instance.