npm package: @moongait/dam-picker
Description: Embeddable web component for selecting assets from MoonDAM. Built with [Lit](https://lit.dev/).
Latest version: 0.2.0

# @moongait/dam-picker

Embeddable web component for selecting assets from MoonDAM. Built with [Lit](https://lit.dev/).

Opens a modal picker that lets users browse folders, select assets, and receive signed imgproxy URLs ready for use.

## Install

```bash
npm install @moongait/dam-picker
```

## Usage

### Via npm (bundled apps)

```js
import '@moongait/dam-picker'
```

### Via CDN (plain HTML)

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@moongait/dam-picker/dist/dam-picker.js"></script>
```

### Add the element

```html
<dam-picker
  supabase-url="https://your-project.supabase.co"
  supabase-anon-key="your-anon-key"
  session-token="USER_JWT"
></dam-picker>
```

### Open and listen for events

```js
const picker = document.querySelector('dam-picker')

// Open the modal
picker.open = true

// User selects asset(s)
picker.addEventListener('dam-picker:select', (e) => {
  const { assets, transforms } = e.detail
  console.log(assets[0].transformedUrl) // signed imgproxy URL
})

// User cancels
picker.addEventListener('dam-picker:cancel', () => {
  console.log('cancelled')
})

// Error (auth expired, network, permission)
picker.addEventListener('dam-picker:error', (e) => {
  console.error(e.detail.code, e.detail.message)
})
```

## Attributes

| Attribute          | Type      | Default | Description                                      |
| ------------------ | --------- | ------- | ------------------------------------------------ |
| `supabase-url`     | `string`  | `''`    | Supabase project URL                             |
| `supabase-anon-key`| `string`  | `''`    | Supabase anon/public key                         |
| `session-token`    | `string`  | `''`    | User JWT from Supabase Auth                      |
| `folder-id`        | `string`  | `''`    | Pre-select a folder on open                      |
| `multi-select`     | `boolean` | `false` | Allow selecting multiple assets                  |
| `transforms`       | `string`  | `''`    | Image transforms, e.g. `"w:800,h:600,f:webp,q:80"` |
| `open`             | `boolean` | `false` | Show/hide the picker modal                       |

## Events

| Event                | Detail                              | Description              |
| -------------------- | ----------------------------------- | ------------------------ |
| `dam-picker:select`  | `{ assets: DamAsset[], transforms }` | User confirmed selection |
| `dam-picker:cancel`  | —                                   | User closed the picker   |
| `dam-picker:error`   | `{ code, message }`                | Auth, network, or permission error |

### DamAsset

```ts
interface DamAsset {
  id: string
  name: string
  storage_path: string
  mime_type: string
  size_bytes: number
  width: number | null
  height: number | null
  url: string           // raw storage path
  transformedUrl: string // signed imgproxy URL with transforms applied
}
```

## Authentication

The picker does **not** handle login. Your app must:

1. Authenticate the user with Supabase Auth
2. Pass the JWT as the `session-token` attribute

```js
const { data } = await supabase.auth.signInWithPassword({ email, password })
picker.sessionToken = data.session.access_token
```

When the token expires, the picker emits a `dam-picker:error` event with `code: 'auth_expired'`.

## Publishing

```bash
pnpm build
npm publish --access public
```

Once published, the CDN (jsdelivr/unpkg) serves it automatically — no separate deploy step needed.

## Development

```bash
pnpm dev    # starts Vite dev server with index.html test harness
```