Embed the headless asset picker

npm --prefix packages/assets-picker ci
npm --prefix packages/assets-picker run build
# In your application, use the actual checkout/package path:
npm install /path/to/stackshift/packages/assets-picker

// Inside your authenticated and authorized CMS backend handler:
const result = await sdk.assets.dam.createPickerCapability({
  origins: ['https://cms.example.com'], channel: 'web',
  buckets: ['catalog'], collections: [], actions: ['search', 'select'],
  result_limit: 12, expires_in_seconds: 900,
})
return Response.json({ token: result.token }, {
  headers: { 'Cache-Control': 'private, no-store' },
})

export async function getCapability() {
  const response = await fetch('/api/asset-picker-capability', {
    method: 'POST', cache: 'no-store',
    // Include your host application's CSRF header when required.
  })
  if (!response.ok) throw new Error('Could not authorize media selection')
  return response.json() // { token: string }
}
export async function saveSelection(items) {
  const response = await fetch('/api/product-media', {
    method: 'PUT', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items }),
  })
  if (!response.ok) throw new Error('Could not save selected media')
}

import { createAssetsPicker } from '@stackshift-cloud/assets-picker'
import { getCapability, saveSelection } from './picker-callbacks.js'

const host = document.querySelector('#asset-picker')
if (!host) throw new Error('Missing picker host')
const picker = createAssetsPicker(host, {
  apiOrigin: 'https://api.stackshift.cloud', getCapability, onSelect: saveSelection,
})
// On removal: picker.destroy()

import { StackshiftAssetPicker } from '@stackshift-cloud/assets-picker/react'
import { getCapability, saveSelection } from './picker-callbacks'

export function MediaSelector({ contextId }: { contextId: string }) {
  return <StackshiftAssetPicker key={contextId}
    apiOrigin="https://api.stackshift.cloud"
    getCapability={getCapability} onSelect={saveSelection}
  />
}