Kanvas: Generative Remix and Lyrics Video Composer

// src/features/kanvas/types.ts
interface KanvasModel {
  id: string;
  name: string;
  studio: KanvasStudio;
  mode: KanvasMode;      // 'text-to-image' | 'image-to-video' | 'talking-head' | ...
  credits: number;       // credit cost per generation
  requiresAssets: KanvasAssetType[];
  controls: KanvasControlDefinition[];
  defaults: Record<string, unknown>;
}

// src/features/kanvas/service.ts
export class InsufficientCreditsError extends Error {
  constructor(public payload: { required: number; available: number }) { ... }
}

// Upload an asset
const asset = await uploadKanvasAsset(file, { assetType: 'image' | 'video' | 'audio' });

// Job status lifecycle
type KanvasJobStatus = 'queued' | 'processing' | 'completed' | 'failed' | 'cancelled';

import { Player, type PlayerRef } from '@remotion/player';

<Player
  component={LyricRemixComposition}
  inputProps={{ template, audioUrl, timelineSlots, selectedStyleId, aspectRatio }}
  durationInFrames={totalFrames}
  fps={30}
  compositionWidth={width}
  compositionHeight={height}
/>

// src/features/kanvas-lyrics/service.ts (key operations)
createTemplate(data)         // Create a new template with audio asset
uploadTemplateAudio(file)    // Upload audio and get a storage URL
transcribeTemplate(id)       // Trigger transcription → word-level LyricBlocks
updateTemplate(id, data)     // Persist lyric edits and cut markers
finalizeTemplate(id)         // Mark as ready for rendering
getTemplate(id)              // Fetch a saved template by ID

new → audio_ready → lyrics_processing → lyrics_ready → markers_ready → saved

submitKanvasJob(request)
  → POST /functions/v1/kanvas-generate
  → returns KanvasJob { id, status: 'queued' }

  [polling every 4s]
refreshKanvasJobStatus(jobId)
  → GET /functions/v1/kanvas-job-status?id=...
  → returns updated KanvasJob

  [on status === 'completed']
getJobPrimaryUrl(job)
  → job.resultPayload.primaryUrl  (video or image CDN URL)