@klikeai/cut-preview

Composição Remotion (SmartStudioComposition) + calculateSmartStudioMetadata empacotadas para o preview ao vivo do Klike Cut rodar no @remotion/player (browser/Lovable). O backend serve os inputProps em GET /klike-cut/sessions/{id}/preview/player; o front renderiza a composição ao vivo com estes símbolos.

Troque o escopo @klikeai pelo namespace npm da sua organização antes de publicar.

Build

cd remotion/preview-package
npm install
npm run build      # gera dist/index.js (ESM) + dist/index.d.ts (tsup)

Publicar (passo a passo)

1. Escolha o nome/namespace em package.json (name). Escopado (@suaorg/cut-preview) é o recomendado — registre o escopo cedo p/ evitar squatting.
2. npm login com a conta que tem acesso ao escopo.
3. Publique (escopado público exige --access public):

   npm publish --access public

4. Versionamento é o contrato: a version do pacote DEVE bater com COMPOSITION_VERSION em app/services/klike_cut/preview_player.py. A cada mudança da composição (qualquer TSX em ../src): build → bump da version E do COMPOSITION_VERSION → npm publish → redeploy do backend. O front compara as versões e cai no preview MP4 quando o pacote instalado está defasado.
5. (Opcional) Automatize com CI publicando em tag v*.

Consumo no frontend (Lovable)

Instale na MESMA versão de remotion (4.0.399) e adicione o Player:

npm install @remotion/player [email protected] \
  @remotion/[email protected] @remotion/[email protected] \
  @remotion/[email protected] @remotion/[email protected] \
  @klikeai/cut-preview

import {Player} from '@remotion/player';
import {SmartStudioComposition, calculateSmartStudioMetadata}
  from '@klikeai/cut-preview';

const {durationInFrames, fps, width, height} =
  calculateSmartStudioMetadata({props: inputProps});

<Player
  component={SmartStudioComposition}
  inputProps={inputProps}
  durationInFrames={durationInFrames}
  fps={fps}
  compositionWidth={width}
  compositionHeight={height}
  controls
  style={{width: '100%'}}
/>

Riscos / cuidados

• Exposição pública: o código da composição (lógica de renderização visual) fica público no npm. Não há segredo/credencial — é só apresentação —, mas é IP visual. Se incomodar: pacote privado (npm pago / GitHub Packages) ou copiar o ../src direto no projeto do front.
• Drift de versão: front com pacote < COMPOSITION_VERSION do backend → inputProps podem não casar. Mitigado pela checagem de versão + fallback ao MP4 (o backend responde composition_version no payload).
• peerDeps: o front precisa de remotion/@remotion/* na MESMA versão (4.0.399) + React 18/19. Versões divergentes = erro em runtime do Remotion.
• Manutenção: toda mudança da composição = rebuild + republish + bump + redeploy. Por isso o preview MP4 continua como rede de segurança.
• Assets http(s): source.videoPath, endcard.logoUrl e imageOverlays[].src DEVEM ser URLs (o backend já entrega presignado). No browser não existe o servidor de asset local do render SSR.