@scaleflex/asset-preview

A standalone asset preview modal for the Scaleflex DAM — large media stage (image/video/audio/PDF/3D) with prev/next + zoom, a Variations list (Original + container presets + custom variants) with per-variation Embed / Options / Download, a read-only Metadata tab, an info grid, and Original / bundle (ZIP) download.

It is a Lit 3 web component (<sfx-asset-preview>) built on the shared @scaleflex/dam-core (headless variations/transform/archive data layer) and @scaleflex/dam-ui (the sfx-* primitives), matching the house format of @scaleflex/light-dam, @scaleflex/uploader, and @scaleflex/bulk-edit. It drops into light-dam (Lit) and Portals (React, via the ./react wrapper).

Plan: plan/13-asset-preview-module.md. Part of the scaleflex-dam-tools monorepo.

Distribution

| Import | Use | | ------------------------------- | -------------------------------------------------- | | @scaleflex/asset-preview | Element class + types + selected dam-core surface | | @scaleflex/asset-preview/define | Registers <sfx-asset-preview> (vanilla / any framework) | | @scaleflex/asset-preview/react | <AssetPreview> React wrapper (Portals, Spotlight) |

Quick start (vanilla)

import '@scaleflex/asset-preview/define';

const el = document.createElement('sfx-asset-preview');
el.config = { auth: { mode: 'sass-key', container: 'mycontainer', sassKey: 'KEY' } };
el.asset = asset;          // a dam-core Asset
el.assets = currentList;   // for prev/next
el.addEventListener('preview-close', () => el.remove());
document.body.appendChild(el);

React (Portals)

import { AssetPreview } from '@scaleflex/asset-preview/react';

<AssetPreview
  config={{ auth }}
  asset={asset}
  assets={list}
  features={{ metadata: true }}
  onClose={() => setOpen(false)}
  onDownload={(d) => console.log(d)}
/>;

Inputs

| Property | Type | Notes | | --------------- | ----------------------------- | -------------------------------------------------- | | config | AssetPreviewConfig | { auth, apiDomain? }. When set, the element fetches variations itself. | | asset | Asset | The asset to preview. | | assets | Asset[] | Surrounding list for prev/next. | | variations | Variation[] | Inject instead of fetching (fetch-or-inject). | | presets | Preset[] | Injected presets when the element fetches variants.| | metadataView | MetadataRow[] | Read-only rows for the Metadata tab. | | description | string | Short/AI description under the title. | | features | Partial<AssetPreviewFeatures> | Toggle variations / metadata / embed / download / bundleZip. |

Events

preview-close · asset-change {asset} · download {kind,…} · embed-copy {url} · error {message}.

Theming

Style via the --sfx-ap-* custom properties on the host (accent, fg, bg, border, radius …); they bridge onto the canonical --sfx-* tokens the embedded dam-ui primitives read, so one set themes the whole modal.

Develop

pnpm --filter @scaleflex/asset-preview dev         # offline dev harness (dev/)
pnpm --filter @scaleflex/asset-preview test        # vitest (jsdom)
pnpm --filter @scaleflex/asset-preview typecheck
pnpm --filter @scaleflex/asset-preview build       # ESM + CJS + d.ts (3 entries)
pnpm --filter @scaleflex/asset-preview build:cdn   # single IIFE