---
alwaysApply: true
---

# video-editor-oss Codebase Index

**This file provides an index of exported functions, types, interfaces, classes, and constants in your codebase.**

Updated in real-time by Twiggy. Use this to discover existing utilities and avoid duplicating code.

## How to Use

When implementing new features:
1. Check if similar functionality already exists
2. Reuse existing types and utilities
3. Understand the API surface of your codebase

```typescript
## apps/web/src/constants

editor-constants.ts
  export const PLATFORM_LAYOUTS: Record<TPlatformLayout, string>
  export const PANEL_CONFIG

export-constants.ts
  export const DEFAULT_EXPORT_OPTIONS
  export const EXPORT_MIME_TYPES

font-constants.ts
  export interface FontOption {
    value: string
    label: string
    category: "system" | "google" | "custom"
    weights?: number[]
    hasClassName?: boolean
  }
  export const FONT_OPTIONS: FontOption[]
  export const DEFAULT_FONT
  export type FontFamily = (typeof FONT_OPTIONS)[number]["value"]
  export const getFontByValue = (value: string): FontOption | undefined => ...
  export const getGoogleFonts = (): FontOption[] => ...
  export const getSystemFonts = (): FontOption[] => ...

language-constants.ts
  export const LANGUAGES

project-constants.ts
  export const DEFAULT_CANVAS_PRESETS: TCanvasSize[]
  export const FPS_PRESETS
  export const BLUR_INTENSITY_PRESETS: { label: string; value: number }[]
  export const DEFAULT_CANVAS_SIZE: TCanvasSize
  export const DEFAULT_FPS
  export const DEFAULT_BLUR_INTENSITY
  export const DEFAULT_COLOR

site-constants.ts
  export const SITE_URL
  export const SITE_INFO
  export type ExternalTool = {
  	name: string;
  	description: string;
  	url: string;
  	icon: React.ElementType;
  }
  export const EXTERNAL_TOOLS: ExternalTool[]
  export const DEFAULT_LOGO_URL
  export const SOCIAL_LINKS
  export type Sponsor = {
  	name: string;
  	url: string;
  	logo: string;
  	description: string;
  }
  export const SPONSORS: Sponsor[]

stickers-constants.ts
  export const STICKER_CATEGORIES
  export const STICKER_CATEGORY_CONFIG: Record<
  	(typeof STICKER_CATEGORIES)[number],
  	string | undefined
  >

text-constants.ts
  export const DEFAULT_TEXT_ELEMENT: Omit<TextElement, "id">

timeline-constants.tsx
  export const TRACK_COLORS: Record<TrackType, { background: string }>
  export const TRACK_HEIGHTS: Record<TrackType, number>
  export const TRACK_GAP
  export const TIMELINE_CONSTANTS
  export const TRACK_ICONS: Record<TrackType, React.ReactNode>

transcription-constants.ts
  export const TRANSCRIPTION_LANGUAGES
  export const TRANSCRIPTION_MODELS: TranscriptionModel[]
  export const DEFAULT_TRANSCRIPTION_MODEL: TranscriptionModelId
  export const DEFAULT_CHUNK_LENGTH_SECONDS
  export const DEFAULT_STRIDE_SECONDS
  export const DEFAULT_WORDS_PER_CAPTION
  export const MIN_CAPTION_DURATION_SECONDS

## apps/web/src/core

index.ts
  export class EditorCore {
    instance: EditorCore | null
    command: CommandManager
    playback: PlaybackManager
    timeline: TimelineManager
    scenes: ScenesManager
    project: ProjectManager
    media: MediaManager
    renderer: RendererManager
    save: SaveManager
    static getInstance(): EditorCore
    static reset(): void
  }

## apps/web/src/hooks

use-editor.ts
  export function useEditor(): EditorCore

use-file-upload.ts
  export function useFileUpload({
  	accept,
  	multiple,
  	onFilesSelected,
  }: UseFileUploadOptions = {})

use-infinite-scroll.ts
  export function useInfiniteScroll({
  	onLoadMore,
  	hasMore,
  	isLoading,
  	threshold = 200,
  	enabled = true,
  }: UseInfiniteScrollOptions)

use-keybindings.ts
  export function useKeybindingsListener()
  export function useKeybindingDisabler()
  export const bindings

use-keyboard-shortcuts-help.ts
  export interface KeyboardShortcut {
    id: string
    keys: string[]
    description: string
    category: string
    action: TAction
    icon?: React.ReactNode
  }
  export function useKeyboardShortcutsHelp()

use-mobile.ts
  export function useIsMobile()

use-raf-loop.ts
  export function useRafLoop(callback: ({ time }: { time: number }) => void)

use-reveal-item.ts
  export function useRevealItem(
  	highlightId: string | null,
  	onClearHighlight: () => void,
  	highlightDuration = 1000,
  )

use-sound-search.ts
  export function useSoundSearch({
  	query,
  	commercialOnly,
  }: {
  	query: string;
  	commercialOnly: boolean;
  })

## apps/web/src/hooks/actions

use-action-handler.ts
  export function useActionHandler(
  	action: A,
  	handler: TActionFunc<A>,
  	isActive: TActionHandlerOptions,
  )

use-editor-actions.ts
  export function useEditorActions()

## apps/web/src/hooks/timeline

use-edge-auto-scroll.ts
  export function useEdgeAutoScroll({
  	isActive,
  	getMouseClientX,
  	rulerScrollRef,
  	tracksScrollRef,
  	contentWidth,
  	edgeThreshold = 100,
  	maxScrollSpeed = 15,
  }: UseEdgeAutoScrollParams): void

use-scroll-sync.ts
  export function useScrollSync({
  	rulerScrollRef,
  	tracksScrollRef,
  	trackLabelsScrollRef,
  	bookmarksScrollRef,
  }: UseScrollSyncProps)

use-selection-box.ts
  export function useSelectionBox({
  	containerRef,
  	onSelectionComplete,
  	isEnabled = true,
  	tracksScrollRef,
  	zoomLevel,
  }: UseSelectionBoxProps)

use-snap-indicator-position.ts
  export function useSnapIndicatorPosition({
  	snapPoint,
  	zoomLevel,
  	tracks,
  	timelineRef,
  	trackLabelsRef,
  	tracksScrollRef,
  }: UseSnapIndicatorPositionParams): SnapIndicatorPosition

use-timeline-drag-drop.ts
  export function useTimelineDragDrop({
  	containerRef,
  	zoomLevel,
  	isSnappingEnabled = true,
  }: UseTimelineDragDropProps)

use-timeline-playhead.ts
  export function useTimelinePlayhead({
  	zoomLevel,
  	rulerRef,
  	rulerScrollRef,
  	tracksScrollRef,
  	playheadRef,
  }: UseTimelinePlayheadProps)

use-timeline-seek.ts
  export function useTimelineSeek({
  	playheadRef,
  	trackLabelsRef,
  	rulerScrollRef,
  	tracksScrollRef,
  	zoomLevel,
  	duration,
  	isSelecting,
  	clearSelectedElements,
  	seek,
  }: UseTimelineSeekProps)

use-timeline-snapping.ts
  export interface SnapPoint {
    time: number
    type: "element-start" | "element-end" | "playhead"
    elementId?: string
    trackId?: string
  }
  export interface SnapResult {
    snappedTime: number
    snapPoint: SnapPoint | null
    snapDistance: number
  }
  export interface UseTimelineSnappingOptions {
    snapThreshold?: number
    enableElementSnapping?: boolean
    enablePlayheadSnapping?: boolean
  }
  export function useTimelineSnapping({
  	snapThreshold = 10,
  	enableElementSnapping = true,
  	enablePlayheadSnapping = true,
  }: UseTimelineSnappingOptions = {})

use-timeline-zoom.ts
  export function useTimelineZoom({
  	containerRef,
  	isInTimeline = false,
  	minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
  }: UseTimelineZoomProps): UseTimelineZoomReturn

## apps/web/src/hooks/timeline/element

use-element-interaction.ts
  export function useElementInteraction({
  	zoomLevel,
  	timelineRef,
  	tracksContainerRef,
  	tracksScrollRef,
  	snappingEnabled,
  	onSnapPointChange,
  }: UseElementInteractionProps)

use-element-resize.ts
  export interface ResizeState {
    elementId: string
    side: "left" | "right"
    startX: number
    initialTrimStart: number
    initialTrimEnd: number
    initialStartTime: number
    initialDuration: number
  }
  export function useTimelineElementResize({
  	element,
  	track,
  	zoomLevel,
  	onSnapPointChange,
  	onResizeStateChange,
  }: UseTimelineElementResizeProps)

use-element-selection.ts
  export function useElementSelection()

## apps/web/src/lib

drag-data.ts
  export function setDragData({
  	dataTransfer,
  	dragData,
  }: {
  	dataTransfer: DataTransfer;
  	dragData: TimelineDragData;
  }): void
  export function getDragData({
  	dataTransfer,
  }: {
  	dataTransfer: DataTransfer;
  }): TimelineDragData | null
  export function hasDragData({
  	dataTransfer,
  }: {
  	dataTransfer: DataTransfer;
  }): boolean
  export function clearDragData(): void

export.ts
  export function getExportMimeType({
  	format,
  }: {
  	format: ExportFormat;
  }): string
  export function getExportFileExtension({
  	format,
  }: {
  	format: ExportFormat;
  }): string

iconify-api.ts
  export const ICONIFY_HOSTS
  export interface IconSet {
    prefix: string
    name: string
    total: number
    author?: {
  		name: string;
  		url?: string;
  	}
    license?: {
  		title: string;
  		spdx?: string;
  		url?: string;
  	}
    samples?: string[]
    category?: string
    palette?: boolean
  }
  export interface IconSearchResult {
    icons: string[]
    total: number
    limit: number
    start: number
    collections: Record<string, IconSet>
  }
  export interface CollectionInfo {
    prefix: string
    total: number
    title?: string
    uncategorized?: string[]
    categories?: Record<string, string[]>
    hidden?: string[]
    aliases?: Record<string, string>
  }
  export function getCollections(
  	category?: string,
  ): Promise<Record<string, IconSet>>
  export function getCollection(
  	prefix: string,
  ): Promise<CollectionInfo | null>
  export function searchIcons(
  	query: string,
  	limit: number = 64,
  	prefixes?: string[],
  	category?: string,
  ): Promise<IconSearchResult>
  export function buildIconSvgUrl(
  	host: string,
  	iconName: string,
  	params?: {
  		color?: string;
  		width?: number;
  		height?: number;
  		flip?: "horizontal" | "vertical" | "horizontal,vertical";
  		rotate?: number | string;
  	},
  ): string
  export function getIconSvgUrl(
  	iconName: string,
  	params?: Parameters<typeof buildIconSvgUrl>[2],
  ): string
  export function downloadSvgAsText(
  	iconName: string,
  	params?: Parameters<typeof getIconSvgUrl>[1],
  ): Promise<string>
  export function svgToFile(svgText: string, fileName: string): File
  export const POPULAR_COLLECTIONS
  export function getCategoriesFromCollections(
  	collections: Record<string, IconSet>,
  ): string[]

rate-limit.ts
  export const baseRateLimit
  export function checkRateLimit({ request }: { request: Request })

scenes.ts
  export function getMainScene({ scenes }: { scenes: TScene[] }): TScene | null
  export function ensureMainScene({ scenes }: { scenes: TScene[] }): TScene[]
  export function buildDefaultScene({
  	name,
  	isMain,
  }: {
  	name: string;
  	isMain: boolean;
  }): TScene
  export function canDeleteScene({ scene }: { scene: TScene }): {
  	canDelete: boolean;
  	reason?: string;
  }
  export function getFallbackSceneAfterDelete({
  	scenes,
  	deletedSceneId,
  	currentSceneId,
  }: {
  	scenes: TScene[];
  	deletedSceneId: string;
  	currentSceneId: string | null;
  }): TScene | null
  export function findCurrentScene({
  	scenes,
  	currentSceneId,
  }: {
  	scenes: TScene[];
  	currentSceneId: string;
  }): TScene | null
  export function updateSceneInArray({
  	scenes,
  	sceneId,
  	updates,
  }: {
  	scenes: TScene[];
  	sceneId: string;
  	updates: Partial<TScene>;
  }): TScene[]

time.ts
  export function roundToFrame({
  	time,
  	fps,
  }: {
  	time: number;
  	fps: number;
  }): number
  export function formatTimeCode({
  	timeInSeconds,
  	format = "HH:MM:SS:CS",
  	fps,
  }: {
  	timeInSeconds: number;
  	format?: TTimeCode;
  	fps?: number;
  }): string
  export function parseTimeCode({
  	timeCode,
  	format = "HH:MM:SS:CS",
  	fps,
  }: {
  	timeCode: string;
  	format?: TTimeCode;
  	fps: number;
  }): number | null
  export function guessTimeCodeFormat({
  	timeCode,
  }: {
  	timeCode: string;
  }): TTimeCode | null
  export function timeToFrame({
  	time,
  	fps,
  }: {
  	time: number;
  	fps: number;
  }): number
  export function frameToTime({
  	frame,
  	fps,
  }: {
  	frame: number;
  	fps: number;
  }): number
  export function snapTimeToFrame({
  	time,
  	fps,
  }: {
  	time: number;
  	fps: number;
  }): number
  export function getSnappedSeekTime({
  	rawTime,
  	duration,
  	fps,
  }: {
  	rawTime: number;
  	duration: number;
  	fps: number;
  }): number

## apps/web/src/lib/actions

definitions.ts
  export type TActionCategory = | "playback"
  	| "navigation"
  	| "editing"
  	| "selection"
  	| "history"
  	| "timeline"
  	| "controls"
  export interface TActionDefinition {
    description: string
    category: TActionCategory
    defaultShortcuts?: ShortcutKey[]
    args?: Record<string, unknown>
  }
  export const ACTIONS
  export type TAction = keyof typeof ACTIONS
  export function getActionDefinition(action: TAction): TActionDefinition
  export function getDefaultShortcuts(): Record<ShortcutKey, TAction>

registry.ts
  export function bindAction(
  	action: A,
  	handler: TActionFunc<A>,
  )
  export function unbindAction(
  	action: A,
  	handler: TActionFunc<A>,
  )
  export const invokeAction = (
  	action: A,
  	args?: TArgOfAction<A>,
  	trigger?: TInvocationTrigger,
  ) => ...

types.ts
  export type TActionArgsMap = {
  	"seek-forward": { seconds: number } | undefined;
  	"seek-backward": { seconds: number } | undef...
  export type TActionWithArgs = keyof TActionArgsMap
  export type TActionWithOptionalArgs = | TActionWithNoArgs
  	| TKeysWithValueUndefined<TActionArgsMap>
  export type TActionWithNoArgs = Exclude<TAction, TActionWithArgs>
  export type TArgOfAction<A extends TAction> = A extends TActionWithArgs
  	? TActionArgsMap[A]
  	: undefined
  export type TActionFunc<A extends TAction> = A extends TActionWithArgs
  	? (arg: TArgOfAction<A>, trigger?: TInvocationTrigger) => void
  	: (_?:...
  export type TInvocationTrigger = "keypress" | "mouseclick"
  export type TBoundActionList = {
  	[A in TAction]?: Array<TActionFunc<A>>;
  }
  export type TActionHandlerOptions = | MutableRefObject<boolean>
  	| boolean
  	| undefined

## apps/web/src/lib/auth

server.ts
  export const auth
  export type Auth = typeof auth

## apps/web/src/lib/blog

query.ts
  export function getPosts()
  export function getTags()
  export function getSinglePost({ slug }: { slug: string })
  export function getCategories()
  export function getAuthors()
  export function processHtmlContent({
  	html,
  }: {
  	html: string;
  }): Promise<string>

## apps/web/src/lib/db

index.ts
  export const db

schema.ts
  export const users
  export const sessions
  export const accounts
  export const verifications

## apps/web/src/lib/gradients

canvas.ts
  export function drawCssBackground({
  	ctx,
  	width,
  	height,
  	css,
  }: {
  	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
  	width: number;
  	height: number;
  	css: string;
  }): void

parser.ts
  export type GradientOrientation = LinearOrientation | Array<RadialOrientation>
  export type Color = | { type: "hex"; value: string }
  	| { type: "literal"; value: string }
  	| { type: "rgb"; value: A...
  export type ColorStop = Color & { length?: Distance }
  export type GradientAst = {
  	type: GradientType;
  	orientation: GradientOrientation | undefined;
  	colorStops: Array<ColorSto...
  export const parseGradient = ({
  	code,
  }: {
  	code: string;
  }): Array<GradientAst> => ...
  export const GradientParser

## apps/web/src/lib/media

audio.ts
  export type CollectedAudioElement = Omit<
  	AudioElement,
  	"type" | "mediaId" | "volume" | "id" | "name" | "sourceType" | "sourceUrl"
  ...
  export function createAudioContext(): AudioContext
  export interface DecodedAudio {
    samples: Float32Array
    sampleRate: number
  }
  export function decodeAudioToFloat32({
  	audioBlob,
  }: {
  	audioBlob: Blob;
  }): Promise<DecodedAudio>
  export function collectAudioElements({
  	tracks,
  	mediaAssets,
  	audioContext,
  }: {
  	tracks: TimelineTrack[];
  	mediaAssets: MediaAsset[];
  	audioContext: AudioContext;
  }): Promise<CollectedAudioElement[]>
  export function collectAudioMixSources({
  	tracks,
  	mediaAssets,
  }: {
  	tracks: TimelineTrack[];
  	mediaAssets: MediaAsset[];
  }): Promise<AudioMixSource[]>
  export function createTimelineAudioBuffer({
  	tracks,
  	mediaAssets,
  	duration,
  	sampleRate = 44100,
  }: {
  	tracks: TimelineTrack[];
  	mediaAssets: MediaAsset[];
  	duration: number;
  	sampleRate?: number;
  }): Promise<AudioBuffer | null>

media-utils.ts
  export const SUPPORTS_AUDIO: readonly MediaType[]
  export function mediaSupportsAudio({
  	media,
  }: {
  	media: MediaAsset | null | undefined;
  }): boolean
  export const getMediaTypeFromFile = ({
  	file,
  }: {
  	file: File;
  }): MediaType | null => ...

mediabunny.ts
  export function getVideoInfo({
  	videoFile,
  }: {
  	videoFile: File;
  }): Promise<{
  	duration: number;
  	width: number;
  	height: number;
  	fps: number;
  }>
  export const extractTimelineAudio = ({
  	tracks,
  	mediaAssets,
  	totalDuration,
  	onProgress,
  }: {
  	tracks: TimelineTrack[];
  	mediaAssets: MediaAsset[];
  	totalDuration: number;
  	onProgress?: (progress: number) => void;
  }): Promise<Blob> => ...

processing.ts
  export interface ProcessedMediaAsset extends Omit<MediaAsset, "id">
  export function generateThumbnail({
  	videoFile,
  	timeInSeconds,
  }: {
  	videoFile: File;
  	timeInSeconds: number;
  }): Promise<string>
  export function processMediaAssets({
  	files,
  	onProgress,
  }: {
  	files: FileList | File[];
  	onProgress?: ({ progress }: { progress: number }) => void;
  }): Promise<ProcessedMediaAsset[]>

## apps/web/src/lib/timeline

bookmarks.ts
  export function findBookmarkIndex({
  	bookmarks,
  	frameTime,
  }: {
  	bookmarks: number[];
  	frameTime: number;
  }): number
  export function isBookmarkAtTime({
  	bookmarks,
  	frameTime,
  }: {
  	bookmarks: number[];
  	frameTime: number;
  }): boolean
  export function toggleBookmarkInArray({
  	bookmarks,
  	frameTime,
  }: {
  	bookmarks: number[];
  	frameTime: number;
  }): number[]
  export function removeBookmarkFromArray({
  	bookmarks,
  	frameTime,
  }: {
  	bookmarks: number[];
  	frameTime: number;
  }): number[]
  export function getFrameTime({
  	time,
  	fps,
  }: {
  	time: number;
  	fps: number;
  }): number

drop-utils.ts
  export function computeDropTarget({
  	elementType,
  	mouseX,
  	mouseY,
  	tracks,
  	playheadTime,
  	isExternalDrop,
  	elementDuration,
  	pixelsPerSecond,
  	zoomLevel,
  	verticalDragDirection,
  	startTimeOverride,
  	excludeElementId,
  }: ComputeDropTargetParams): DropTarget
  export function getDropLineY({
  	dropTarget,
  	tracks,
  }: {
  	dropTarget: DropTarget;
  	tracks: TimelineTrack[];
  }): number

element-utils.ts
  export function canElementHaveAudio(
  	element: TimelineElement,
  )
  export function canElementBeHidden(
  	element: TimelineElement,
  )
  export function hasMediaId(
  	element: TimelineElement,
  )
  export function requiresMediaId({
  	element,
  }: {
  	element: CreateTimelineElement;
  }): boolean
  export function checkElementOverlaps({
  	elements,
  }: {
  	elements: TimelineElement[];
  }): boolean
  export function resolveElementOverlaps({
  	elements,
  }: {
  	elements: TimelineElement[];
  }): TimelineElement[]
  export function wouldElementOverlap({
  	elements,
  	startTime,
  	endTime,
  	excludeElementId,
  }: {
  	elements: TimelineElement[];
  	startTime: number;
  	endTime: number;
  	excludeElementId?: string;
  }): boolean
  export function buildTextElement({
  	raw,
  	startTime,
  }: {
  	raw: Partial<Omit<TextElement, "type" | "id">>;
  	startTime: number;
  }): CreateTimelineElement
  export function buildStickerElement({
  	iconName,
  	startTime,
  }: {
  	iconName: string;
  	startTime: number;
  }): CreateStickerElement
  export function buildUploadAudioElement({
  	mediaId,
  	name,
  	duration,
  	startTime,
  	buffer,
  }: {
  	mediaId: string;
  	name: string;
  	duration: number;
  	startTime: number;
  	buffer?: AudioBuffer;
  }): CreateUploadAudioElement
  export function buildLibraryAudioElement({
  	sourceUrl,
  	name,
  	duration,
  	startTime,
  	buffer,
  }: {
  	sourceUrl: string;
  	name: string;
  	duration: number;
  	startTime: number;
  	buffer?: AudioBuffer;
  }): CreateLibraryAudioElement

index.ts
  export function calculateTotalDuration({
  	tracks,
  }: {
  	tracks: TimelineTrack[];
  }): number

track-utils.ts
  export function canTracktHaveAudio(
  	track: TimelineTrack,
  )
  export function canTrackBeHidden(
  	track: TimelineTrack,
  )
  export function getTrackColor({ type }: { type: TrackType })
  export function getTrackClasses({ type }: { type: TrackType })
  export function getTrackHeight({ type }: { type: TrackType }): number
  export function getCumulativeHeightBefore({
  	tracks,
  	trackIndex,
  }: {
  	tracks: Array<{ type: TrackType }>;
  	trackIndex: number;
  }): number
  export function getTotalTracksHeight({
  	tracks,
  }: {
  	tracks: Array<{ type: TrackType }>;
  }): number
  export function buildEmptyTrack({
  	id,
  	type,
  	name,
  }: {
  	id: string;
  	type: TrackType;
  	name?: string;
  }): TimelineTrack
  export function getDefaultInsertIndexForTrack({
  	tracks,
  	trackType,
  }: {
  	tracks: TimelineTrack[];
  	trackType: TrackType;
  }): number
  export function getHighestInsertIndexForTrack({
  	tracks,
  	trackType,
  }: {
  	tracks: TimelineTrack[];
  	trackType: TrackType;
  }): number
  export function isMainTrack(track: TimelineTrack)
  export function getMainTrack({
  	tracks,
  }: {
  	tracks: TimelineTrack[];
  }): TimelineTrack | null
  export function ensureMainTrack({
  	tracks,
  }: {
  	tracks: TimelineTrack[];
  }): TimelineTrack[]
  export function canElementGoOnTrack({
  	elementType,
  	trackType,
  }: {
  	elementType: ElementType;
  	trackType: TrackType;
  }): boolean
  export function validateElementTrackCompatibility({
  	element,
  	track,
  }: {
  	element: { type: ElementType };
  	track: { type: TrackType };
  }): { isValid: boolean; errorMessage?: string }

zoom-utils.ts
  export function getTimelineZoomMin({
  	duration,
  	containerWidth,
  }: {
  	duration: number;
  	containerWidth: number | null | undefined;
  }): number

## apps/web/src/lib/transcription

caption.ts
  export function buildCaptionChunks({
  	segments,
  	wordsPerChunk = DEFAULT_WORDS_PER_CAPTION,
  	minDuration = MIN_CAPTION_DURATION_SECONDS,
  }: {
  	segments: TranscriptionSegment[];
  	wordsPerChunk?: number;
  	minDuration?: number;
  }): CaptionChunk[]

## apps/web/src/services/media

video-cache.ts
  export class VideoCache {
    sinks
    initPromises
    async getFrameAt({
  		mediaId,
  		file,
  		time,
  	}: {
  		mediaId: string;
  		file: File;
  		time: number;
  	}): Promise<WrappedCanvas | null>
    clearVideo({ mediaId }: { mediaId: string }): void
    clearAll(): void
    getStats()
  }
  export const videoCache

## apps/web/src/services/renderer

canvas-renderer.ts
  export type CanvasRendererParams = {
  	width: number;
  	height: number;
  	fps: number;
  }
  export class CanvasRenderer {
    canvas: OffscreenCanvas | HTMLCanvasElement
    context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D
    width: number
    height: number
    fps: number
    constructor({ width, height, fps }: CanvasRendererParams)
    setSize({ width, height }: { width: number; height: number })
    async render({ node, time }: { node: BaseNode; time: number })
    async renderToCanvas({
  		node,
  		time,
  		targetCanvas,
  	}: {
  		node: BaseNode;
  		time: number;
  		targetCanvas: HTMLCanvasElement;
  	})
  }

scene-builder.ts
  export type BuildSceneParams = {
  	canvasSize: TCanvasSize;
  	tracks: TimelineTrack[];
  	mediaAssets: MediaAsset[];
  	duration: numb...
  export function buildScene(params: BuildSceneParams)

scene-exporter.ts
  export type ExportFormat = "mp4" | "webm"
  export type ExportQuality = "low" | "medium" | "high" | "very_high"
  export type SceneExporterEvents = {
  	progress: [progress: number];
  	complete: [buffer: ArrayBuffer];
  	error: [error: Error];
  	cance...
  export class SceneExporter extends EventEmitter<SceneExporterEvents> {
    renderer: CanvasRenderer
    format: ExportFormat
    quality: ExportQuality
    includeAudio: boolean
    audioBuffer: AudioBuffer
    cancelled
    constructor(params: ExportParams)
    cancel()
    async export(rootNode: RootNode)
  }

## apps/web/src/services/storage

indexeddb-adapter.ts
  export class IndexedDBAdapter implements StorageAdapter<T> {
    dbName: string
    storeName: string
    version: number
    constructor(dbName: string, storeName: string, version = 1)
    async get(key: string): Promise<T | null>
    async set(key: string, value: T): Promise<void>
    async remove(key: string): Promise<void>
    async list(): Promise<string[]>
    async getAll(): Promise<T[]>
    async clear(): Promise<void>
  }

opfs-adapter.ts
  export class OPFSAdapter implements StorageAdapter<File> {
    directoryName: string
    constructor(directoryName = "media")
    async get(key: string): Promise<File | null>
    async set(key: string, file: File): Promise<void>
    async remove(key: string): Promise<void>
    async list(): Promise<string[]>
    async clear(): Promise<void>
    static isSupported(): boolean
  }

storage-service.ts
  export const storageService

types.ts
  export interface StorageAdapter<T> {
    get(key: string): Promise<T | null>
    set(key: string, value: T): Promise<void>
    remove(key: string): Promise<void>
    list(): Promise<string[]>
    clear(): Promise<void>
  }
  export interface MediaAssetData {
    id: string
    name: string
    type: MediaType
    size: number
    lastModified: number
    width?: number
    height?: number
    duration?: number
    fps?: number
    ephemeral?: boolean
    thumbnailUrl?: string
    sourceStickerIconName?: string
  }
  export type SerializedScene = Omit<TScene, "createdAt" | "updatedAt"> & {
  	createdAt: string;
  	updatedAt: string;
  }
  export type SerializedProjectMetadata = Omit<
  	TProjectMetadata,
  	"createdAt" | "updatedAt"
  > & {
  	createdAt: string;
  	updatedAt: string;
  }
  export type SerializedProject = Omit<TProject, "metadata" | "scenes"> & {
  	metadata: SerializedProjectMetadata;
  	scenes: Serializ...
  export interface StorageConfig {
    projectsDb: string
    mediaDb: string
    savedSoundsDb: string
    version: number
  }

## apps/web/src/services/transcription

index.ts
  export const transcriptionService

worker.ts
  export type WorkerMessage = | { type: "init"; modelId: string }
  	| { type: "transcribe"; audio: Float32Array; language: strin...
  export type WorkerResponse = | { type: "init-progress"; progress: number }
  	| { type: "init-complete" }
  	| { type: "init-error...

## apps/web/src/stores

assets-panel-store.ts
  export const TAB_KEYS
  export type Tab = (typeof TAB_KEYS)[number]
  export const tabs
  export const useAssetsPanelStore

editor-store.ts
  export const useEditorStore

keybindings-store.ts
  export const defaultKeybindings: KeybindingConfig
  export interface KeybindingConflict {
    key: ShortcutKey
    existingAction: TActionWithOptionalArgs
    newAction: TActionWithOptionalArgs
  }
  export const useKeybindingsStore

panel-store.ts
  export interface PanelSizes {
    tools: number
    preview: number
    properties: number
    mainContent: number
    timeline: number
  }
  export type PanelId = keyof PanelSizes
  export const usePanelStore

sounds-store.ts
  export const useSoundsStore

stickers-store.ts
  export const useStickersStore

text-properties-store.ts
  export type TextPropertiesTab = "text" | "transform"
  export interface TextPropertiesTabMeta {
    value: TextPropertiesTab
    label: string
  }
  export const TEXT_PROPERTIES_TABS: ReadonlyArray<TextPropertiesTabMeta>
  export function isTextPropertiesTab(value: string)
  export const useTextPropertiesStore

timeline-store.ts
  export const useTimelineStore

## apps/web/src/types

assets.ts
  export type MediaType = "image" | "video" | "audio"
  export interface MediaAsset extends Omit<MediaAssetData, "size" | "lastModified"> {
    file: File
    url?: string
  }

blog.ts
  export type Post = {
  	id: string;
  	slug: string;
  	title: string;
  	content: string;
  	description: string;
  	coverImage...
  export type Pagination = {
  	limit: number;
  	currpage: number;
  	nextPage: number | null;
  	prevPage: number | null;
  	totalIt...
  export type MarblePostList = {
  	posts: Post[];
  	pagination: Pagination;
  }
  export type MarblePost = {
  	post: Post;
  }
  export type Tag = {
  	id: string;
  	name: string;
  	slug: string;
  }
  export type MarbleTag = {
  	tag: Tag;
  }
  export type MarbleTagList = {
  	tags: Tag[];
  	pagination: Pagination;
  }
  export type Category = {
  	id: string;
  	name: string;
  	slug: string;
  }
  export type MarbleCategory = {
  	category: Category;
  }
  export type MarbleCategoryList = {
  	categories: Category[];
  	pagination: Pagination;
  }
  export type Author = {
  	id: string;
  	name: string;
  	image: string;
  }
  export type MarbleAuthor = {
  	author: Author;
  }
  export type MarbleAuthorList = {
  	authors: Author[];
  	pagination: Pagination;
  }

drag.ts
  export interface MediaDragData extends BaseDragData {
    type: "media"
    mediaType: "image" | "video" | "audio"
  }
  export interface TextDragData extends BaseDragData {
    type: "text"
    content: string
  }
  export interface StickerDragData extends BaseDragData {
    type: "sticker"
    iconName: string
  }
  export type TimelineDragData = MediaDragData | TextDragData | StickerDragData

editor.ts
  export type TPlatformLayout = "tiktok"

export.ts
  export const EXPORT_QUALITY_VALUES
  export const EXPORT_FORMAT_VALUES
  export type ExportFormat = (typeof EXPORT_FORMAT_VALUES)[number]
  export type ExportQuality = (typeof EXPORT_QUALITY_VALUES)[number]
  export interface ExportOptions {
    format: ExportFormat
    quality: ExportQuality
    fps?: number
    includeAudio?: boolean
    onProgress?: ({ progress }: { progress: number }) => void
    onCancel?: () => boolean
  }
  export interface ExportResult {
    success: boolean
    buffer?: ArrayBuffer
    error?: string
    cancelled?: boolean
  }

keybinding.ts
  export type ModifierKeys = | "ctrl"
  	| "alt"
  	| "shift"
  	| "ctrl+shift"
  	| "alt+shift"
  	| "ctrl+alt"
  	| "ctrl+alt+shift"
  export type Key = | "a"
  	| "b"
  	| "c"
  	| "d"
  	| "e"
  	| "f"
  	| "g"
  	| "h"
  	| "i"
  	| "j"
  	| "k"
  	| "l"
  	| "m"
  	| "n"
  ...
  export type ModifierBasedShortcutKey = `${ModifierKeys}+${Key}`
  export type SingleCharacterShortcutKey = `${Key}`
  export type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey
  export type KeybindingConfig = {
  	[key in ShortcutKey]?: TActionWithOptionalArgs;
  }

language.ts
  export type Language = (typeof LANGUAGES)[number]
  export type LanguageCode = Language["code"]

project.ts
  export type TBackground = | {
  			type: "color";
  			color: string;
  	  }
  	| {
  			type: "blur";
  			blurIntensity: number;
  	  }
  export interface TCanvasSize {
    width: number
    height: number
  }
  export interface TProjectMetadata {
    id: string
    name: string
    thumbnail?: string
    createdAt: Date
    updatedAt: Date
  }
  export interface TProjectSettings {
    fps: number
    canvasSize: TCanvasSize
    originalCanvasSize?: TCanvasSize | null
    background: TBackground
  }
  export interface TProject {
    metadata: TProjectMetadata
    scenes: TScene[]
    currentSceneId: string
    settings: TProjectSettings
    version: number
  }

sounds.ts
  export interface SoundEffect {
    id: number
    name: string
    description: string
    url: string
    previewUrl?: string
    downloadUrl?: string
    duration: number
    filesize: number
    type: string
    channels: number
    bitrate: number
    bitdepth: number
    samplerate: number
    username: string
    tags: string[]
    license: string
    created: string
    downloads: number
    rating: number
    ratingCount: number
  }
  export interface SavedSound {
    id: number
    name: string
    username: string
    previewUrl?: string
    downloadUrl?: string
    duration: number
    tags: string[]
    license: string
    savedAt: string
  }
  export interface SavedSoundsData {
    sounds: SavedSound[]
    lastModified: string
  }

stickers.ts
  export type StickerCategory = (typeof STICKER_CATEGORIES)[number]

time.ts
  export type TTimeCode = "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF"

timeline.ts
  export interface TScene {
    id: string
    name: string
    isMain: boolean
    tracks: TimelineTrack[]
    bookmarks: number[]
    createdAt: Date
    updatedAt: Date
  }
  export type TrackType = "video" | "text" | "audio" | "sticker"
  export interface VideoTrack extends BaseTrack {
    type: "video"
    elements: (VideoElement | ImageElement)[]
    isMain: boolean
    muted: boolean
    hidden: boolean
  }
  export interface TextTrack extends BaseTrack {
    type: "text"
    elements: TextElement[]
    hidden: boolean
  }
  export interface AudioTrack extends BaseTrack {
    type: "audio"
    elements: AudioElement[]
    muted: boolean
  }
  export interface StickerTrack extends BaseTrack {
    type: "sticker"
    elements: StickerElement[]
    hidden: boolean
  }
  export type TimelineTrack = VideoTrack | TextTrack | AudioTrack | StickerTrack
  export interface Transform {
    scale: number
    position: {
  		x: number;
  		y: number;
  	}
    rotate: number
  }
  export interface UploadAudioElement extends BaseAudioElement {
    sourceType: "upload"
    mediaId: string
  }
  export interface LibraryAudioElement extends BaseAudioElement {
    sourceType: "library"
    sourceUrl: string
  }
  export type AudioElement = UploadAudioElement | LibraryAudioElement
  export interface VideoElement extends BaseTimelineElement {
    type: "video"
    mediaId: string
    muted?: boolean
    hidden?: boolean
    transform: Transform
    opacity: number
  }
  export interface ImageElement extends BaseTimelineElement {
    type: "image"
    mediaId: string
    hidden?: boolean
    transform: Transform
    opacity: number
  }
  export interface TextElement extends BaseTimelineElement {
    type: "text"
    content: string
    fontSize: number
    fontFamily: string
    color: string
    backgroundColor: string
    textAlign: "left" | "center" | "right"
    fontWeight: "normal" | "bold"
    fontStyle: "normal" | "italic"
    textDecoration: "none" | "underline" | "line-through"
    hidden?: boolean
    transform: Transform
    opacity: number
  }
  export interface StickerElement extends BaseTimelineElement {
    type: "sticker"
    iconName: string
    hidden?: boolean
    transform: Transform
    opacity: number
    color?: string
  }
  export type TimelineElement = | AudioElement
  	| VideoElement
  	| ImageElement
  	| TextElement
  	| StickerElement
  export type ElementType = TimelineElement["type"]
  export type CreateUploadAudioElement = Omit<UploadAudioElement, "id">
  export type CreateLibraryAudioElement = Omit<LibraryAudioElement, "id">
  export type CreateAudioElement = | CreateUploadAudioElement
  	| CreateLibraryAudioElement
  export type CreateVideoElement = Omit<VideoElement, "id">
  export type CreateImageElement = Omit<ImageElement, "id">
  export type CreateTextElement = Omit<TextElement, "id">
  export type CreateStickerElement = Omit<StickerElement, "id">
  export type CreateTimelineElement = | CreateAudioElement
  	| CreateVideoElement
  	| CreateImageElement
  	| CreateTextElement
  	| CreateSt...
  export interface ElementDragState {
    isDragging: boolean
    elementId: string | null
    trackId: string | null
    startMouseX: number
    startMouseY: number
    startElementTime: number
    clickOffsetTime: number
    currentTime: number
    currentMouseY: number
  }
  export interface DropTarget {
    trackIndex: number
    isNewTrack: boolean
    insertPosition: "above" | "below" | null
    xPosition: number
  }
  export interface ComputeDropTargetParams {
    elementType: ElementType
    mouseX: number
    mouseY: number
    tracks: TimelineTrack[]
    playheadTime: number
    isExternalDrop: boolean
    elementDuration: number
    pixelsPerSecond: number
    zoomLevel: number
    verticalDragDirection?: "up" | "down" | null
    startTimeOverride?: number
    excludeElementId?: string
  }
  export interface ClipboardItem {
    trackId: string
    trackType: TrackType
    element: CreateTimelineElement
  }

transcription.ts
  export type TranscriptionLanguage = LanguageCode | "auto"
  export interface TranscriptionSegment {
    text: string
    start: number
    end: number
  }
  export interface TranscriptionResult {
    text: string
    segments: TranscriptionSegment[]
    language: string
  }
  export type TranscriptionStatus = | "idle"
  	| "loading-model"
  	| "transcribing"
  	| "complete"
  	| "error"
  export interface TranscriptionProgress {
    status: TranscriptionStatus
    progress: number
    message?: string
  }
  export type TranscriptionModelId = | "whisper-tiny"
  	| "whisper-small"
  	| "whisper-medium"
  	| "whisper-large-v3-turbo"
  export interface TranscriptionModel {
    id: TranscriptionModelId
    name: string
    huggingFaceId: string
    description: string
  }
  export interface CaptionChunk {
    text: string
    startTime: number
    duration: number
  }

## apps/web/src/utils

browser.ts
  export function isTypableDOMElement({
  	element,
  }: {
  	element: HTMLElement;
  }): boolean

date.ts
  export function formatDate({ date }: { date: Date }): string

geometry.ts
  export function dimensionToAspectRatio({
  	width,
  	height,
  }: {
  	width: number;
  	height: number;
  }): string

id.ts
  export function generateUUID(): string

math.ts
  export function clamp({
  	value,
  	min,
  	max,
  }: {
  	value: number;
  	min: number;
  	max: number;
  }): number

platform.ts
  export function getPlatformSpecialKey(): string
  export function getPlatformAlternateKey(): string
  export function isAppleDevice(): boolean

strings.ts
  export function capitalizeFirstLetter({ string }: { string: string })
  export function uppercase({ string }: { string: string })

ui.ts
  export function cn(...inputs: ClassValue[]): string

## packages/ui/src/icons

base-icon.tsx
  export function BaseIcon({
  	title,
  	size = 24,
  	viewBox = "0 0 24 24",
  	children,
  	...props
  }: BaseIconProps)

create-icon.tsx
  export function createIcon({ definition }: CreateIconParams)

index.tsx
  export const GoogleIcon
  export const GithubIcon
  export const VercelIcon
  export const DataBuddyIcon
  export const MarbleIcon
  export const BackgroundIcon
  export const SocialsIcon
  export const TransitionUpIcon
  export const MenuIcon
  export const PencilIcon
  export const LeftArrowIcon
  export const TrashIcon

types.ts
  export type IconProps = Omit<
  	SVGProps<SVGSVGElement>,
  	"children" | "width" | "height"
  > & {
  	size?: number;
  	title?: s...
  export type IconNode = Array<{
  	element: keyof JSX.IntrinsicElements;
  	props: Record<string, string | number | undefined...
  export type IconDefinition = {
  	title: string;
  	viewBox?: string;
  	nodes: IconNode;
  }

## packages/ui/src/icons/collections

brand.ts
  export const BRAND_COLLECTION

editor.ts
  export const EDITOR_COLLECTION

index.ts
  export const ICON_COLLECTIONS

ui.ts
  export const UI_COLLECTION

## packages/ui/src/icons/registry

brand.ts
  export const BRAND_ICONS

index.ts
  export const ICON_DEFINITIONS

ui.ts
  export const UI_ICONS

```

---

*Generated and maintained by [Twiggy](https://github.com/twiggy-tools/Twiggy)*