@shotstack/shotstack-studio 2.0.0-beta.17 → 2.0.0-beta.19

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import { audioAssetSchema as AudioAssetSchema } from '@shotstack/schemas/zod';
 import { captionAssetSchema as CaptionAssetSchema } from '@shotstack/schemas/zod';
 import { clipSchema as ClipSchema } from '@shotstack/schemas/zod';
 import { components } from '@shotstack/schemas';
-import { Container } from 'pixi.js';
 import { cropSchema as CropSchema } from '@shotstack/schemas/zod';
 import { editSchema as EditSchema } from '@shotstack/schemas/zod';
 import { htmlAssetSchema as HtmlAssetSchema } from '@shotstack/schemas/zod';
@@ -25,61 +24,6 @@ import { z } from 'zod';
 
 export declare type Asset = components["schemas"]["Asset"];
 
-declare type AssetEventMap = {
-    onAssetLoadInfoUpdated: AssetLoadInfoUpdatedPayload;
-};
-
-declare class AssetLoader {
-    private static readonly VIDEO_EXTENSIONS;
-    private static readonly VIDEO_MIME;
-    readonly loadTracker: AssetLoadTracker;
-    /** Reference counts for loaded assets - prevents premature unloading during transforms */
-    private refCounts;
-    /**
-     * Increment reference count for an asset.
-     * Called when a player starts loading an asset.
-     */
-    incrementRef(src: string): void;
-    /**
-     * Decrement reference count for an asset.
-     * @returns true if asset can be safely unloaded (count reached zero)
-     */
-    decrementRef(src: string): boolean;
-    constructor();
-    load<TResolvedAsset>(identifier: string, loadOptions: pixi.UnresolvedAsset): Promise<TResolvedAsset | null>;
-    /**
-     * Load a video with a unique HTMLVideoElement (not cached).
-     * Each call creates an independent video element, allowing multiple VideoPlayers
-     * to control playback independently even when using the same video URL.
-     */
-    loadVideoUnique(identifier: string, loadOptions: pixi.UnresolvedAsset): Promise<pixi.Texture<pixi.VideoSource> | null>;
-    getProgress(): number;
-    private extractUrl;
-    private hasVideoExtension;
-    private getContentType;
-    private canPlayVideo;
-    private isPlayableVideo;
-    private shouldUseSafariVideoLoader;
-    private loadVideoForSafari;
-    private updateAssetLoadMetadata;
-}
-
-declare type AssetLoadInfo = {
-    progress: number;
-    status: AssetLoadInfoStatus;
-};
-
-declare type AssetLoadInfoStatus = "pending" | "loading" | "success" | "failed";
-
-declare type AssetLoadInfoUpdatedPayload = {
-    registry: Record<string, AssetLoadInfo>;
-};
-
-declare class AssetLoadTracker extends EventEmitter<AssetEventMap> {
-    registry: Record<string, AssetLoadInfo>;
-    constructor();
-}
-
 export { AssetSchema }
 
 export declare class AssetToolbar {
@@ -187,6 +131,9 @@ export declare class Canvas {
     private readonly edit;
     /** Container for interactive overlays (handles, guides). Renders above content. */
     readonly overlayContainer: pixi.Container;
+    private viewportContainer?;
+    private editBackground?;
+    private viewportMask?;
     private container?;
     private background?;
     private timeline?;
@@ -228,6 +175,28 @@ export declare class Canvas {
         bottom: number;
     };
     registerTimeline(timeline: Timeline): void;
+    /**
+     * Get the viewport container for coordinate transforms.
+     * Used by selection handles, export coordinator, and other components
+     * that need to convert between viewport and world coordinates.
+     */
+    getViewportContainer(): pixi.Container;
+    /**
+     * Update the edit background and viewport mask when size changes.
+     * Called from Edit when output size is changed.
+     */
+    updateViewportForSize(width: number, height: number, backgroundColor: string): void;
+    /**
+     * Subscribe to Edit events for visual synchronization.
+     * Canvas reacts to these events to update PIXI visuals.
+     */
+    private subscribeToEditEvents;
+    private onPlayerAddedToTrack;
+    private onPlayerMovedBetweenTracks;
+    private onPlayerRemovedFromTrack;
+    private onTrackContainerRemoved;
+    private onViewportSizeChanged;
+    private onViewportNeedsZoomToFit;
     private registerExtensions;
     private configureApplication;
     private onTick;
@@ -355,16 +324,6 @@ declare interface ClipRenderer {
 
 export { ClipSchema }
 
-declare interface ClipStats {
-    videos: number;
-    images: number;
-    text: number;
-    richText: number;
-    luma: number;
-    animatedClips: number;
-    cachedFrames: number;
-}
-
 /**
  * Toolbar for clip-level properties (timing, linking).
  * Shows compact timing controls for start and length with:
@@ -385,67 +344,6 @@ export declare class ClipToolbar extends BaseToolbar {
     dispose(): void;
 }
 
-declare type ClipType = ResolvedClip;
-
-declare type CommandContext = {
-    getClips(): Player[];
-    getTracks(): Player[][];
-    getTrack(trackIndex: number): Player[] | null;
-    getContainer(): Container;
-    addPlayer(trackIdx: number, player: Player): Promise<void>;
-    addPlayerToContainer(trackIdx: number, player: Player): void;
-    createPlayerFromAssetType(clipConfiguration: ClipType): Player;
-    queueDisposeClip(player: Player): void;
-    disposeClips(): void;
-    clearClipError(trackIdx: number, clipIdx: number): void;
-    undeleteClip(trackIdx: number, clip: Player): void;
-    setUpdatedClip(clip: Player): void;
-    restoreClipConfiguration(clip: Player, previousConfig: ClipType): void;
-    updateDuration(): void;
-    emitEvent<T extends EditEventName>(name: T, ...args: EditEventMap[T] extends void ? [] : [EditEventMap[T]]): void;
-    findClipIndices(player: Player): {
-        trackIndex: number;
-        clipIndex: number;
-    } | null;
-    getClipAt(trackIndex: number, clipIndex: number): Player | null;
-    getSelectedClip(): Player | null;
-    setSelectedClip(clip: Player | null): void;
-    movePlayerToTrackContainer(player: Player, fromTrackIdx: number, toTrackIdx: number): void;
-    getEditState(): EditType;
-    propagateTimingChanges(trackIndex: number, startFromClipIndex: number): void;
-    resolveClipAutoLength(clip: Player): Promise<void>;
-    untrackEndLengthClip(clip: Player): void;
-    trackEndLengthClip(clip: Player): void;
-    getMergeFields(): MergeFieldService;
-    getOutputSize(): {
-        width: number;
-        height: number;
-    };
-    setOutputSize(width: number, height: number): void;
-    getOutputFps(): number;
-    setOutputFps(fps: number): void;
-    getTimelineBackground(): string;
-    setTimelineBackground(color: string): void;
-    getDocument(): EditDocument | null;
-    /** Update a clip's properties in the document (source of truth) */
-    documentUpdateClip(trackIdx: number, clipIdx: number, updates: Partial<DocumentClipType>): void;
-    /** Add a clip to the document, returns the added clip */
-    documentAddClip(trackIdx: number, clip: DocumentClipType, clipIdx?: number): DocumentClipType;
-    /** Remove a clip from the document, returns the removed clip or null */
-    documentRemoveClip(trackIdx: number, clipIdx: number): DocumentClipType | null;
-    /** Derive runtime Player state from document clip (applies document data to Player) */
-    derivePlayerFromDocument(trackIdx: number, clipIdx: number): void;
-    /**
-     * Build resolution context for a clip at the given position.
-     * Extracts all dependencies upfront so resolution can be pure.
-     *
-     * @param trackIdx - Track index
-     * @param clipIdx - Clip index on that track
-     * @returns Context with previousClipEnd, timelineEnd, intrinsicDuration
-     */
-    buildResolutionContext(trackIdx: number, clipIdx: number): ResolutionContext;
-};
-
 export declare class Controls {
     private edit;
     private seekDistance;
@@ -464,15 +362,11 @@ export { CropSchema }
 
 export declare type Destination = components["schemas"]["Destinations"];
 
-export declare const DestinationSchema: z.ZodUnion<readonly [z.ZodIntersection<z.ZodObject<{
-    destinations: z.ZodOptional<z.ZodLiteral<"shotstackDestination_ShotstackDestination">>;
-}, z.core.$strip>, z.ZodObject<{
-    provider: z.ZodDefault<z.ZodString>;
+export declare const DestinationSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    provider: z.ZodLiteral<"shotstack">;
     exclude: z.ZodOptional<z.ZodBoolean>;
-}, z.core.$strip>>, z.ZodIntersection<z.ZodObject<{
-    destinations: z.ZodOptional<z.ZodLiteral<"muxDestination_MuxDestination">>;
 }, z.core.$strip>, z.ZodObject<{
-    provider: z.ZodDefault<z.ZodString>;
+    provider: z.ZodLiteral<"mux">;
     options: z.ZodOptional<z.ZodObject<{
         playbackPolicy: z.ZodOptional<z.ZodArray<z.ZodEnum<{
             public: "public";
@@ -480,10 +374,8 @@ export declare const DestinationSchema: z.ZodUnion<readonly [z.ZodIntersection<z
         }>>>;
         passthrough: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;
-}, z.core.$strip>>, z.ZodIntersection<z.ZodObject<{
-    destinations: z.ZodOptional<z.ZodLiteral<"s3Destination_S3Destination">>;
 }, z.core.$strip>, z.ZodObject<{
-    provider: z.ZodDefault<z.ZodString>;
+    provider: z.ZodLiteral<"s3">;
     options: z.ZodOptional<z.ZodObject<{
         region: z.ZodString;
         bucket: z.ZodString;
@@ -491,27 +383,21 @@ export declare const DestinationSchema: z.ZodUnion<readonly [z.ZodIntersection<z
         filename: z.ZodOptional<z.ZodString>;
         acl: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;
-}, z.core.$strip>>, z.ZodIntersection<z.ZodObject<{
-    destinations: z.ZodOptional<z.ZodLiteral<"googleCloudStorageDestination_GoogleCloudStorageDestination">>;
 }, z.core.$strip>, z.ZodObject<{
-    provider: z.ZodDefault<z.ZodString>;
+    provider: z.ZodLiteral<"google-cloud-storage">;
     options: z.ZodOptional<z.ZodObject<{
         bucket: z.ZodString;
         prefix: z.ZodOptional<z.ZodString>;
         filename: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;
-}, z.core.$strip>>, z.ZodIntersection<z.ZodObject<{
-    destinations: z.ZodOptional<z.ZodLiteral<"googleDriveDestination_GoogleDriveDestination">>;
 }, z.core.$strip>, z.ZodObject<{
-    provider: z.ZodDefault<z.ZodString>;
+    provider: z.ZodLiteral<"google-drive">;
     options: z.ZodObject<{
         folderId: z.ZodString;
         filename: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>;
-}, z.core.$strip>>, z.ZodIntersection<z.ZodObject<{
-    destinations: z.ZodOptional<z.ZodLiteral<"vimeoDestination_VimeoDestination">>;
 }, z.core.$strip>, z.ZodObject<{
-    provider: z.ZodDefault<z.ZodString>;
+    provider: z.ZodLiteral<"vimeo">;
     options: z.ZodOptional<z.ZodObject<{
         name: z.ZodOptional<z.ZodString>;
         description: z.ZodOptional<z.ZodString>;
@@ -533,13 +419,13 @@ export declare const DestinationSchema: z.ZodUnion<readonly [z.ZodIntersection<z
                 nobody: "nobody";
                 contacts: "contacts";
             }>>;
+            download: z.ZodOptional<z.ZodBoolean>;
+            add: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>>;
         folderUri: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;
-}, z.core.$strip>>, z.ZodIntersection<z.ZodObject<{
-    destinations: z.ZodOptional<z.ZodLiteral<"tiktokDestination_TiktokDestination">>;
 }, z.core.$strip>, z.ZodObject<{
-    provider: z.ZodDefault<z.ZodString>;
+    provider: z.ZodLiteral<"tiktok">;
     options: z.ZodOptional<z.ZodObject<{
         title: z.ZodOptional<z.ZodString>;
         privacyLevel: z.ZodOptional<z.ZodEnum<{
@@ -551,88 +437,60 @@ export declare const DestinationSchema: z.ZodUnion<readonly [z.ZodIntersection<z
         disableStitch: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
         disableComment: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
     }, z.core.$strip>>;
-}, z.core.$strip>>]>;
+}, z.core.$strip>], "provider">;
 
-declare type DocumentClipType = Clip;
-
-export declare class Edit extends Entity {
-    private static readonly ZIndexPadding;
-    /**
-     * Maximum number of commands to keep in undo history.
-     * Prevents unbounded memory growth in long editing sessions.
-     * Each command may hold Player references and deep-cloned configs.
-     */
+export declare class Edit {
     private static readonly MAX_HISTORY_SIZE;
-    assetLoader: AssetLoader;
-    events: EventEmitter<EditEventMap & InternalEventMap>;
+    private document;
+    private backgroundColor;
     private edit;
     private tracks;
-    private clipsToDispose;
-    private clips;
-    private commandHistory;
-    private commandIndex;
-    playbackTime: number;
-    totalDuration: number;
+    playbackTime: Seconds;
+    totalDuration: Seconds;
+    isPlaying: boolean;
+    private get clips();
+    private get endLengthClips();
     private cachedTimelineEnd;
-    private endLengthClips;
-    private isBatchingEvents;
-    private isLoadingEdit;
-    private syncCorrectionCount;
-    private toolbarButtons;
     private canvas;
     private lumaMaskController;
+    private playerReconciler;
+    private outputSettings;
+    private selectionManager;
+    private alignmentGuides;
+    private commandHistory;
+    private commandIndex;
+    private commandQueue;
+    private clipsToDispose;
     private clipErrors;
+    private playerByClipId;
     private fontMetadata;
+    private isBatchingEvents;
+    private syncCorrectionCount;
+    private isExporting;
     /**
      * Create an Edit instance from a template configuration.
-     *
-     * @param template - The Edit JSON configuration (aligns with Shotstack API contract)
-     *
-     * @example
-     * ```typescript
-     * const edit = new Edit(template);
-     * await edit.load();
-     *
-     * const canvas = new Canvas(edit);
-     * await canvas.load();
-     * ```
      */
     constructor(template: Edit_2);
+    /**
+     * Load the edit session.
+     */
     load(): Promise<void>;
     /**
-     * Initialize players and timing from the document.
-     * Called during initial load() and can be called again via loadEdit() for hot-reload.
-     * @param source - The source identifier for events (default: "load")
+     * Initialize runtime from the document.
      */
     private initializeFromDocument;
-    private updateViewportMask;
-    /** Update canvas visuals after size change (viewport mask, background, zoom) */
-    private updateCanvasForSize;
     play(): void;
     pause(): void;
-    seek(target: number): void;
+    seek(target: Seconds): void;
     stop(): void;
     /**
      * Reload the edit with a new configuration (hot-reload).
-     * Uses smart diffing to only update what changed when possible.
-     *
-     * For initial loading, use the constructor + load() pattern instead:
-     * ```typescript
-     * const edit = new Edit(template);
-     * await edit.load();
-     * ```
-     *
-     * @param edit - The new Edit configuration to load
      */
     loadEdit(edit: Edit_2): Promise<void>;
     private loadSoundtrack;
     getEdit(): Edit_2;
     /**
-     * Validates an edit configuration without applying it.
-     * Use this to pre-validate user input before calling loadEdit().
-     *
-     * @param edit - The edit configuration to validate
-     * @returns Validation result with valid boolean and any errors
+     * Validates an edit configuration.
      */
     validateEdit(edit: unknown): {
         valid: boolean;
@@ -642,285 +500,96 @@ export declare class Edit extends Entity {
         }>;
     };
     getResolvedEdit(): ResolvedEdit;
-    /**
-     * Get the original parsed edit configuration.
-     * Unlike getResolvedEdit(), this returns the edit as originally parsed,
-     * with all clips present regardless of loading state.
-     */
-    getOriginalEdit(): ResolvedEdit | null;
     addClip(trackIdx: number, clip: Clip): void | Promise<void>;
     getClip(trackIdx: number, clipIdx: number): Clip | null;
-    /**
-     * Get the error state for a clip that failed to load.
-     * Returns null if the clip loaded successfully.
-     */
-    getClipError(trackIdx: number, clipIdx: number): {
-        error: string;
-        assetType: string;
-    } | null;
     /**
      * Clear the error for a deleted clip and shift indices for remaining errors.
-     * Called when a clip is deleted to keep error indices in sync.
      */
     private clearClipErrorAndShift;
-    getPlayerClip(trackIdx: number, clipIdx: number): Player | null;
-    /** Get the exportable asset for a clip, preserving merge field templates */
-    getOriginalAsset(trackIndex: number, clipIndex: number): unknown | undefined;
-    deleteClip(trackIdx: number, clipIdx: number): void;
-    splitClip(trackIndex: number, clipIndex: number, splitTime: number): void;
+    deleteClip(trackIdx: number, clipIdx: number): Promise<void>;
+    splitClip(trackIndex: number, clipIndex: number, splitTime: number): Promise<void>;
     addTrack(trackIdx: number, track: Track): Promise<void>;
     getTrack(trackIdx: number): Track | null;
     deleteTrack(trackIdx: number): void;
-    getTotalDuration(): number;
-    getMemoryStats(): {
-        clipCounts: Record<string, number>;
-        totalClips: number;
-        richTextCacheStats: {
-            clips: number;
-            totalFrames: number;
-        };
-        textPlayerCount: number;
-        lumaMaskCount: number;
-        commandHistorySize: number;
-        trackCount: number;
-    };
-    getComprehensiveMemoryStats(): {
-        textureStats: {
-            videos: {
-                count: number;
-                totalMB: number;
-                avgDimensions: string;
-            };
-            images: {
-                count: number;
-                totalMB: number;
-                avgDimensions: string;
-            };
-            text: {
-                count: number;
-                totalMB: number;
-            };
-            richText: {
-                count: number;
-                totalMB: number;
-            };
-            luma: {
-                count: number;
-                totalMB: number;
-            };
-            animated: {
-                count: number;
-                frames: number;
-                totalMB: number;
-            };
-            totalTextures: number;
-            totalMB: number;
-        };
-        assetDetails: Array<{
-            id: string;
-            type: "video" | "image" | "text" | "rich-text" | "luma" | "audio" | "html" | "shape" | "caption" | "unknown";
-            label: string;
-            width: number;
-            height: number;
-            estimatedMB: number;
-        }>;
-        systemStats: {
-            clipCount: number;
-            trackCount: number;
-            commandCount: number;
-        };
-    };
-    private estimateTextureMB;
-    private getAssetLabel;
-    getPlaybackHealth(): {
-        activePlayerCount: number;
-        totalPlayerCount: number;
-        videoMaxDrift: number;
-        audioMaxDrift: number;
-        syncCorrections: number;
-    };
-    recordSyncCorrection(): void;
-    undo(): void;
-    redo(): void;
-    updateClip(trackIdx: number, clipIdx: number, updates: Partial<Clip>): void;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
     /**
-     * Update clip timing mode and/or values.
-     * Supports manual values, "auto", and "end" timing modes.
-     * @param trackIdx - Track index
-     * @param clipIdx - Clip index within track
-     * @param params - Timing update parameters (start and/or length in milliseconds)
+     * Add a command to history without executing it.
      */
-    updateClipTiming(trackIdx: number, clipIdx: number, params: TimingUpdateParams): void;
-    executeEditCommand(command: EditCommand): void | Promise<void>;
-    protected executeCommand(command: EditCommand): void | Promise<void>;
+    private addCommandToHistory;
+    updateClip(trackIdx: number, clipIdx: number, updates: Partial<Clip>): Promise<void>;
     /**
-     * Emits a unified `edit:changed` event after any state mutation.
-     * Consumers can subscribe to this single event instead of tracking 31+ granular events.
+     * Handle command result - only add to history if successful.
      */
-    protected emitEditChanged(source: string): void;
+    private handleCommandResult;
     /**
      * Detects merge field placeholders in the raw edit before substitution.
-     * Returns a map of clip keys ("trackIdx-clipIdx") to their merge field bindings.
-     * Each binding maps a property path to its placeholder and resolved value.
      */
     private detectMergeFieldBindings;
     /**
      * Recursively walks an object to find merge field placeholders.
-     * Returns a map of property paths to their bindings.
      */
     private detectBindingsInObject;
     /**
      * Checks if edit has structural changes requiring full reload.
-     * Structural = track count, clip count, or asset type changed.
      */
     private hasStructuralChanges;
     /**
-     * Applies granular changes without full reload (preserves undo history, no flash).
-     * Only called when structure is unchanged (same track/clip counts).
+     * Transfers existing clip IDs from the current document to the new edit configuration.
+     */
+    private preserveClipIdsForGranularUpdate;
+    /**
+     * Applies granular changes without full reload.
      */
     private applyGranularChanges;
-    protected createCommandContext(): CommandContext;
     private queueDisposeClip;
-    protected disposeClips(): void;
     /**
      * Remove fonts from timeline.fonts that are no longer referenced by any clip.
-     * This keeps the document clean and prevents accumulation of unused font URLs.
      */
     private cleanupUnusedFonts;
     /**
      * Extract the filename (without extension) from a font URL.
-     * e.g., "https://fonts.gstatic.com/s/inter/v20/UcCO3Fwr...Bg-4.ttf" → "UcCO3Fwr...Bg-4"
      */
     private extractFilenameFromUrl;
     private disposeClip;
     private unloadClipAssets;
-    protected clearClips(): void;
     private updateTotalDuration;
     private resolveAllTiming;
-    propagateTimingChanges(trackIndex: number, startFromClipIndex: number): void;
-    resolveClipAutoLength(clip: Player): Promise<void>;
-    private addPlayerToContainer;
     private movePlayerToTrackContainer;
-    private createPlayerFromAssetType;
     private addPlayer;
-    selectClip(trackIndex: number, clipIndex: number): void;
-    clearSelection(): void;
-    isClipSelected(trackIndex: number, clipIndex: number): boolean;
-    getSelectedClipInfo(): {
-        trackIndex: number;
-        clipIndex: number;
-        player: Player;
-    } | null;
-    /**
-     * Copy a clip to the internal clipboard
-     */
-    copyClip(trackIdx: number, clipIdx: number): void;
-    /**
-     * Paste the copied clip at the current playhead position
-     */
-    pasteClip(): void;
-    /**
-     * Check if there is a clip in the clipboard
-     */
-    hasCopiedClip(): boolean;
-    findClipIndices(player: Player): {
-        trackIndex: number;
-        clipIndex: number;
-    } | null;
-    getClipAt(trackIndex: number, clipIndex: number): Player | null;
-    selectPlayer(player: Player): void;
-    isPlayerSelected(player: Player): boolean;
-    /**
-     * Move the selected clip by a pixel delta.
-     * Used for keyboard arrow key positioning.
-     */
-    moveSelectedClip(deltaX: number, deltaY: number): void;
-    setExportMode(exporting: boolean): void;
-    isInExportMode(): boolean;
-    setCanvas(canvas: Canvas): void;
-    getCanvasZoom(): number;
-    setOutputSize(width: number, height: number): void;
-    setOutputFps(fps: number): void;
+    setOutputSize(width: number, height: number): Promise<void>;
+    setOutputFps(fps: number): Promise<void>;
     getOutputFps(): number;
-    setOutputFormat(format: string): void;
+    setOutputFormat(format: string): Promise<void>;
     getOutputFormat(): string;
-    setOutputDestinations(destinations: Destination[]): void;
+    setOutputDestinations(destinations: Destination[]): Promise<void>;
     getOutputDestinations(): Destination[];
-    setOutputResolution(resolution: string): void;
+    setOutputResolution(resolution: string): Promise<void>;
     getOutputResolution(): string | undefined;
-    setOutputAspectRatio(aspectRatio: string): void;
+    setOutputAspectRatio(aspectRatio: string): Promise<void>;
     getOutputAspectRatio(): string | undefined;
     getTimelineFonts(): Array<{
         src: string;
     }>;
-    /**
-     * Look up a font URL by family name and weight.
-     * Uses normalized metadata extracted from TTF files during font loading.
-     * This enables rich-text font resolution for template fonts with UUID-based URLs.
-     *
-     * @param familyName - The font family name (e.g., "Lato", "Lato Light")
-     * @param weight - The font weight (e.g., 300 for Light, 900 for Black)
-     * @returns The font URL if found, null otherwise
-     */
-    getFontUrlByFamilyAndWeight(familyName: string, weight: number): string | null;
-    /**
-     * Remove any fonts from timeline.fonts that are no longer used by clips.
-     * Call this after changing a clip's font to clean up the old font.
-     */
-    pruneUnusedFonts(): void;
-    setTimelineBackground(color: string): void;
+    setTimelineBackground(color: string): Promise<void>;
+    private setTimelineBackgroundInternal;
     getTimelineBackground(): string;
+    /** Map of asset src → original asset type (for reliable luma detachment during undo) */
+    private originalAssetTypes;
     /**
-     * Resolve merge field placeholders in a string.
-     * Replaces {{ FIELD_NAME }} patterns with their current values.
-     *
-     * @param input - String potentially containing merge field placeholders
-     * @returns String with all merge fields resolved to their values
-     */
-    resolveMergeFields(input: string): string;
-    /**
-     * @deprecated Use `ui.registerButton()` instead.
-     */
-    registerToolbarButton(config: ToolbarButtonConfig_2): void;
-    /**
-     * @deprecated Use `ui.unregisterButton()` instead.
-     */
-    unregisterToolbarButton(id: string): void;
-    /**
-     * @deprecated Use `ui.getButtons()` instead.
+     * Find the luma clip attached to a content clip via timing match.
      */
-    getToolbarButtons(): ToolbarButtonConfig_2[];
-    /** Get the exportable clip (with merge field placeholders restored) */
-    protected getTemplateClip(trackIndex: number, clipIndex: number): ResolvedClip | null;
-    /** Get the text content from the template clip (with merge field placeholders) */
-    getTemplateClipText(trackIdx: number, clipIdx: number): string | null;
-    /** Map of content player → luma player for attachment tracking */
-    private lumaAttachments;
-    /** Map of asset src → original asset type (for reliable luma detachment) */
-    private originalAssetTypes;
+    private findAttachedLumaPlayer;
     /**
      * Attach a luma mask to a specific clip.
-     * Creates a luma clip on the same track with synchronized timing.
-     *
-     * @param trackIndex - Track index of the content clip
-     * @param clipIndex - Clip index of the content clip
-     * @param lumaSrc - URL of the luma mask asset (video or image)
      */
     attachLumaToClip(trackIndex: number, clipIndex: number, lumaSrc: string): Promise<void>;
     /**
      * Detach the luma mask from a clip.
-     * Removes the luma clip from the track.
-     *
-     * @param trackIndex - Track index of the content clip
-     * @param clipIndex - Clip index of the content clip
      */
     detachLumaFromClip(trackIndex: number, clipIndex: number): Promise<void>;
     /**
      * Get the luma mask attached to a clip, if any.
-     *
-     * @param trackIndex - Track index of the content clip
-     * @param clipIndex - Clip index of the content clip
-     * @returns Luma info or null if no luma attached
      */
     getClipLuma(trackIndex: number, clipIndex: number): {
         src: string;
@@ -928,231 +597,20 @@ export declare class Edit extends Entity {
     } | null;
     /**
      * Check if a clip has a luma mask attached.
-     *
-     * @param trackIndex - Track index of the content clip
-     * @param clipIndex - Clip index of the content clip
      */
     hasLumaMask(trackIndex: number, clipIndex: number): boolean;
     /**
-     * Register a luma attachment in the Edit Session's map.
-     * This is called when a luma is attached to a content clip (e.g., during drag-drop).
-     * The map is used by syncAttachedLuma() to coordinate timing between attached clips.
+     * Find the content clip that best matches a luma (by temporal overlap).
      */
-    registerLumaAttachment(contentTrackIndex: number, contentClipIndex: number, lumaTrackIndex: number, lumaClipIndex: number): void;
-    /**
-     * Transform a clip to luma type (for attachment).
-     * Recreates the player with luma asset type while preserving the src.
-     *
-     * @param trackIndex - Track index of the clip
-     * @param clipIndex - Clip index of the clip
-     */
-    transformToLuma(trackIndex: number, clipIndex: number): void;
-    /**
-     * Transform a luma clip back to its original type (for detachment).
-     * Uses stored original type for reliability, with URL extension fallback.
-     *
-     * @param trackIndex - Track index of the luma clip
-     * @param clipIndex - Clip index of the luma clip
-     */
-    transformFromLuma(trackIndex: number, clipIndex: number): void;
+    private findBestContentMatch;
     private setupIntentListeners;
 }
 
 declare type Edit_2 = components["schemas"]["Edit"];
 
-declare type EditCommand = {
-    execute(context?: CommandContext): void | Promise<void>;
-    undo?(context?: CommandContext): void | Promise<void>;
-    /**
-     * Optional cleanup when command is pruned from history.
-     * Called when command is removed to free memory (e.g., Player references, deep-cloned configs).
-     */
-    dispose?(): void;
-    readonly name: string;
-};
-
 /** Alias for Edit type to avoid conflicts with SDK's Edit class */
 export declare type EditConfig = Edit_2;
 
-declare class EditDocument {
-    private data;
-    constructor(edit: Edit_2);
-    /**
-     * Get the raw timeline configuration
-     */
-    getTimeline(): Edit_2["timeline"];
-    /**
-     * Get timeline background color
-     */
-    getBackground(): string | undefined;
-    /**
-     * Get all tracks (raw, unresolved)
-     */
-    getTracks(): Track[];
-    /**
-     * Get a specific track by index
-     */
-    getTrack(index: number): Track | null;
-    /**
-     * Get total number of tracks
-     */
-    getTrackCount(): number;
-    /**
-     * Get soundtrack configuration
-     */
-    getSoundtrack(): Soundtrack | undefined;
-    /**
-     * Get a specific clip by track and clip index
-     */
-    getClip(trackIndex: number, clipIndex: number): Clip | null;
-    /**
-     * Get all clips in a track
-     */
-    getClipsInTrack(trackIndex: number): Clip[];
-    /**
-     * Get total number of clips across all tracks
-     */
-    getClipCount(): number;
-    /**
-     * Get clip count in a specific track
-     */
-    getClipCountInTrack(trackIndex: number): number;
-    /**
-     * Get the raw output configuration
-     */
-    getOutput(): Edit_2["output"];
-    /**
-     * Get output size (width/height)
-     * @throws Error if size is not defined
-     */
-    getSize(): Size;
-    /**
-     * Get output format (mp4, gif, etc.)
-     */
-    getFormat(): Edit_2["output"]["format"];
-    /**
-     * Get output FPS
-     */
-    getFps(): number | undefined;
-    /**
-     * Get output resolution preset
-     */
-    getResolution(): Edit_2["output"]["resolution"];
-    /**
-     * Get output aspect ratio
-     */
-    getAspectRatio(): Edit_2["output"]["aspectRatio"];
-    /**
-     * Get merge field definitions
-     */
-    getMergeFields(): Edit_2["merge"];
-    /**
-     * Add a new track at the specified index
-     * @returns The added track
-     */
-    addTrack(index: number, track?: Track): Track;
-    /**
-     * Remove a track at the specified index
-     * @returns The removed track, or null if index invalid
-     */
-    removeTrack(index: number): Track | null;
-    /**
-     * Add a clip to a track
-     * @returns The added clip
-     */
-    addClip(trackIndex: number, clip: Clip, clipIndex?: number): Clip;
-    /**
-     * Remove a clip from a track
-     * @returns The removed clip, or null if indices invalid
-     */
-    removeClip(trackIndex: number, clipIndex: number): Clip | null;
-    /**
-     * Update a clip's properties (partial update)
-     */
-    updateClip(trackIndex: number, clipIndex: number, updates: Partial<Clip>): void;
-    /**
-     * Replace a clip entirely
-     */
-    replaceClip(trackIndex: number, clipIndex: number, newClip: Clip): Clip | null;
-    /**
-     * Set timeline background color
-     */
-    setBackground(color: string): void;
-    /**
-     * Set soundtrack
-     */
-    setSoundtrack(soundtrack: Soundtrack | undefined): void;
-    /**
-     * Get timeline fonts
-     */
-    getFonts(): Array<{
-        src: string;
-    }>;
-    /**
-     * Add a font to the timeline (if not already present)
-     */
-    addFont(src: string): void;
-    /**
-     * Remove a font from the timeline
-     */
-    removeFont(src: string): void;
-    /**
-     * Set all timeline fonts (replaces existing)
-     */
-    setFonts(fonts: Array<{
-        src: string;
-    }>): void;
-    /**
-     * Set output size
-     */
-    setSize(size: Size): void;
-    /**
-     * Set output format
-     */
-    setFormat(format: Edit_2["output"]["format"]): void;
-    /**
-     * Set output FPS (must be a valid FPS value)
-     */
-    setFps(fps: Edit_2["output"]["fps"]): void;
-    /**
-     * Set output resolution preset
-     */
-    setResolution(resolution: Edit_2["output"]["resolution"]): void;
-    /**
-     * Clear output resolution preset
-     */
-    clearResolution(): void;
-    /**
-     * Set output aspect ratio
-     */
-    setAspectRatio(aspectRatio: Edit_2["output"]["aspectRatio"]): void;
-    /**
-     * Clear output aspect ratio
-     */
-    clearAspectRatio(): void;
-    /**
-     * Clear output size (for use when setting resolution/aspectRatio)
-     */
-    clearSize(): void;
-    /**
-     * Set merge field definitions
-     */
-    setMergeFields(mergeFields: Edit_2["merge"]): void;
-    /**
-     * Export the document as raw Edit JSON (preserves "auto", "end", placeholders)
-     * This is what gets sent to the backend API.
-     */
-    toJSON(): Edit_2;
-    /**
-     * Create an EditDocument from raw Edit JSON
-     */
-    static fromJSON(json: Edit_2): EditDocument;
-    /**
-     * Create a deep clone of this document
-     */
-    clone(): EditDocument;
-}
-
 export declare const EditEvent: {
     readonly PlaybackPlay: "playback:play";
     readonly PlaybackPause: "playback:pause";
@@ -1298,26 +756,12 @@ export declare type EditEventName = (typeof EditEvent)[keyof typeof EditEvent];
 
 export { EditSchema }
 
-declare type EditType = ResolvedEdit;
-
 declare abstract class Entity {
     private readonly container;
     constructor();
     abstract load(): Promise<void>;
 }
 
-declare class EventEmitter<TEventPayloadMap extends EventPayloadMap = EventPayloadMap> {
-    private readonly events;
-    constructor();
-    on<TEventName extends keyof TEventPayloadMap>(name: TEventName, listener: Listener<TEventPayloadMap[TEventName]>): () => void;
-    once<TEventName extends keyof TEventPayloadMap>(name: TEventName, listener: Listener<TEventPayloadMap[TEventName]>): () => void;
-    off<TEventName extends keyof TEventPayloadMap>(name: TEventName, listener: Listener<TEventPayloadMap[TEventName]>): void;
-    clear(name: keyof TEventPayloadMap): void;
-    emit<TEventName extends keyof TEventPayloadMap>(name: TEventName, ...args: TEventPayloadMap[TEventName] extends void ? [] : [TEventPayloadMap[TEventName]]): void;
-}
-
-declare type EventPayloadMap<TPayload = any> = Record<string, TPayload>;
-
 /** SDK-extended CaptionAsset with stroke, width, height, alignment */
 export declare type ExtendedCaptionAsset = CaptionAsset & {
     stroke?: {
@@ -1348,22 +792,23 @@ export declare type ImageAsset = components["schemas"]["ImageAsset"];
 
 export { ImageAssetSchema }
 
-export declare class Inspector extends Entity {
-    private static readonly Width;
-    private static readonly Height;
-    fps: number;
-    playbackTime: number;
-    playbackDuration: number;
-    isPlaying: boolean;
-    clipStats: ClipStats | null;
-    systemStats: SystemStats | null;
-    playbackHealth: PlaybackHealth | null;
-    clipCounts: Record<string, number>;
-    totalClips: number;
-    commandHistorySize: number;
-    trackCount: number;
-    private background;
-    private text;
+/**
+ * Inspector displays performance stats as an HTML overlay.
+ * Shows FPS, memory, playback health, and clip statistics.
+ */
+export declare class Inspector {
+    private container;
+    private animationFrameId;
+    private lastFrameTime;
+    private edit;
+    private fpsEl;
+    private playbackEl;
+    private frameStatsEl;
+    private frameSparklineEl;
+    private jankEl;
+    private heapEl;
+    private heapSparklineEl;
+    private clipsEl;
     private historySamples;
     private readonly maxSamples;
     private lastSampleTime;
@@ -1371,41 +816,28 @@ export declare class Inspector extends Entity {
     private frameTimes;
     private readonly frameTimeWindow;
     private readonly jankThreshold;
-    constructor();
-    load(): Promise<void>;
-    update(_: number, deltaMS: number): void;
+    constructor(edit: Edit);
+    /**
+     * Mount the inspector to a parent element.
+     * @param parent - The parent element to append the inspector to
+     */
+    mount(parent: HTMLElement): void;
+    private startUpdateLoop;
+    private update;
     private trackFrameTime;
     private getFrameStats;
     private getFrameTimeSparkline;
     private addHistorySample;
     private getJsHeapSparkline;
-    private renderStats;
-    private getSyncStatusIcon;
-    draw(): void;
-    dispose(): void;
-    private formatClipCounts;
+    private render;
     private getMemoryInfo;
     private bytesToMegabytes;
+    dispose(): void;
 }
 
-declare type InternalEventMap = {
-    "canvas:clipClicked": {
-        player: Player;
-    };
-    "canvas:backgroundClicked": void;
-    "font:capabilitiesChanged": {
-        supportsBold: boolean;
-    };
-    "toolbar:buttonsChanged": {
-        buttons: ToolbarButtonConfig_2[];
-    };
-};
-
 declare type Keyframe_2 = Tween;
 export { Keyframe_2 as Keyframe }
 
-declare type Listener<TPayload = any> = (payload: TPayload) => void;
-
 export declare type LumaAsset = components["schemas"]["LumaAsset"];
 
 export { LumaAssetSchema }
@@ -1452,6 +884,7 @@ export declare class MediaToolbar extends BaseToolbar {
     private isDynamicSource;
     private dynamicFieldName;
     private originalSrc;
+    private abortController;
     mount(parent: HTMLElement): void;
     /**
      * Mount composite UI components into their placeholder elements.
@@ -1527,70 +960,6 @@ declare interface MergeField_2 {
     description?: string;
 }
 
-/**
- * Tracks a merge field binding for a specific property path.
- * Used to restore placeholders on export for properties that haven't changed.
- */
-declare interface MergeFieldBinding {
-    /** The original placeholder string, e.g., "{{ HERO_IMAGE }}" */
-    placeholder: string;
-    /** The resolved value at binding time, used for change detection */
-    resolvedValue: string;
-}
-
-declare class MergeFieldService {
-    private fields;
-    private events;
-    constructor(events: EventEmitter);
-    /**
-     * Register or update a merge field.
-     * @param field The merge field to register
-     * @param options.silent If true, suppresses event emission (for command-based operations)
-     */
-    register(field: MergeField_2, options?: {
-        silent?: boolean;
-    }): void;
-    /**
-     * Remove a merge field by name.
-     * @param name The field name to remove
-     * @param options.silent If true, suppresses event emission (for command-based operations)
-     */
-    remove(name: string, options?: {
-        silent?: boolean;
-    }): boolean;
-    /** Get a merge field by name */
-    get(name: string): MergeField_2 | undefined;
-    /** Get all registered merge fields */
-    getAll(): MergeField_2[];
-    /** Clear all merge fields */
-    clear(): void;
-    /**
-     * Apply merge field substitutions to a string.
-     * Replaces {{ FIELD_NAME }} patterns with their default values.
-     */
-    resolve(input: string): string;
-    /**
-     * Check if a string contains unresolved merge fields.
-     * Returns true if any {{ FIELD_NAME }} patterns remain after resolution.
-     */
-    hasUnresolved(input: string): boolean;
-    /**
-     * Extract the first merge field name from a string.
-     * Returns null if no merge field pattern is found.
-     */
-    extractFieldName(input: string): string | null;
-    /** Check if a string is a merge field template (contains {{ FIELD }}) */
-    isMergeFieldTemplate(input: string): boolean;
-    /** Create a merge field template string from a field name */
-    createTemplate(fieldName: string): string;
-    /** Export fields in Shotstack API format ({ find, replace }) */
-    toSerializedArray(): SerializedMergeField[];
-    /** Import fields from Shotstack API format (does not emit event - called during loadEdit) */
-    loadFromSerialized(fields: SerializedMergeField[]): void;
-    /** Generate a unique field name with a given prefix (e.g., MEDIA_1, MEDIA_2) */
-    generateUniqueName(prefix: string): string;
-}
-
 export declare interface NumericKeyframe {
     start: number;
     length: number;
@@ -1641,159 +1010,8 @@ export declare const OutputSizeSchema: z.ZodObject<{
     height: z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>>;
 }, z.core.$strip>;
 
-declare interface PlaybackHealth {
-    activePlayerCount: number;
-    totalPlayerCount: number;
-    videoMaxDrift: number;
-    audioMaxDrift: number;
-    syncCorrections: number;
-}
-
-/**
- * Base class for all visual content players in the canvas.
- *
- * Player is responsible for rendering clip content (video, image, text, etc.)
- * and applying keyframe animations.
- *
- */
-declare abstract class Player extends Entity {
-    private static readonly DiscardedFrameCount;
-    layer: number;
-    shouldDispose: boolean;
-    readonly playerType: PlayerType;
-    protected edit: Edit;
-    clipConfiguration: ResolvedClip;
-    private timingIntent;
-    private resolvedTiming;
-    private positionBuilder;
-    private offsetXKeyframeBuilder?;
-    private offsetYKeyframeBuilder?;
-    private scaleKeyframeBuilder?;
-    private opacityKeyframeBuilder?;
-    private rotationKeyframeBuilder?;
-    private maskXKeyframeBuilder?;
-    private wipeMask;
-    protected contentContainer: pixi.Container;
-    /**
-     * Tracks which properties came from merge field templates.
-     */
-    private mergeFieldBindings;
-    constructor(edit: Edit, clipConfiguration: ResolvedClip, playerType: PlayerType);
-    reconfigureAfterRestore(): void;
-    /**
-     * Reload the asset for this player (e.g., when asset.src changes).
-     * Override in subclasses that have loadable assets (image, video).
-     * Default implementation is a no-op.
-     */
-    reloadAsset(): Promise<void>;
-    protected configureKeyframes(): void;
-    load(): Promise<void>;
-    update(_: number, __: number): void;
-    private updateWipeMask;
-    draw(): void;
-    dispose(): void;
-    getStart(): Seconds;
-    getLength(): Seconds;
-    getEnd(): Seconds;
-    getTimingIntent(): TimingIntent;
-    setTimingIntent(intent: Partial<TimingIntent>): void;
-    getResolvedTiming(): ResolvedTiming;
-    setResolvedTiming(timing: ResolvedTiming): void;
-    /**
-     * Set a merge field binding for a property path.
-     */
-    setMergeFieldBinding(path: string, binding: MergeFieldBinding): void;
-    /**
-     * Get the merge field binding for a property path, if any.
-     */
-    getMergeFieldBinding(path: string): MergeFieldBinding | undefined;
-    /**
-     * Remove a merge field binding (e.g., when user changes the value).
-     */
-    removeMergeFieldBinding(path: string): void;
-    /**
-     * Get all merge field bindings for this player.
-     */
-    getMergeFieldBindings(): Map<string, MergeFieldBinding>;
-    /**
-     * Bulk set bindings during player initialization.
-     */
-    setInitialBindings(bindings: Map<string, MergeFieldBinding>): void;
-    /**
-     * Get the exportable clip configuration with merge field placeholders restored.
-     */
-    getExportableClip(): Clip;
-    /**
-     * Get the playback time relative to clip start, in seconds.
-     */
-    getPlaybackTime(): number;
-    abstract getSize(): Size;
-    /**
-     * Returns the source content dimensions (before fit scaling).
-     */
-    getContentSize(): Size;
-    getOpacity(): number;
-    getPosition(): Vector;
-    getPivot(): Vector;
-    protected getFitScale(): number;
-    getScale(): number;
-    protected getContainerScale(): Vector;
-    getRotation(): number;
-    isActive(): boolean;
-    shouldDiscardFrame(): boolean;
-    /**
-     * Handle pointer down - emit click event for selection handling.
-     * All drag/resize/rotate interaction is handled by SelectionHandles.
-     */
-    private onPointerDown;
-    private clipHasKeyframes;
-    protected applyFixedDimensions(): void;
-    protected applyAnchorPositioning(anchor: string, clipWidth: number, clipHeight: number, sprite: pixi.Sprite): void;
-    /**
-     * Override in subclasses to enable edge resize handles for dimension changes.
-     * When true, edge handles will be shown instead of corner scale handles.
-     */
-    supportsEdgeResize(): boolean;
-    /**
-     * Called when dimensions change via edge resize. Override in subclasses to handle re-rendering.
-     */
-    protected onDimensionsChanged(): void;
-    /**
-     * Public wrapper for notifying dimension changes.
-     * Called by SelectionHandles after edge resize operations.
-     */
-    notifyDimensionsChanged(): void;
-}
-
-declare enum PlayerType {
-    Video = "video",
-    Image = "image",
-    Audio = "audio",
-    Text = "text",
-    RichText = "rich-text",
-    Luma = "luma",
-    Html = "html",
-    Shape = "shape",
-    Caption = "caption",
-    Svg = "svg"
-}
-
 declare type ResolutionChangeCallback = (width: number, height: number) => void;
 
-/**
- * Context required to resolve timing intent to concrete values.
- *
- * @see resolveTimingIntent - the pure function that uses this context
- */
-declare interface ResolutionContext {
-    /** End time of previous clip on same track (for start: "auto") */
-    readonly previousClipEnd: Seconds;
-    /** Total duration of timeline excluding "end" clips (for length: "end") */
-    readonly timelineEnd: Seconds;
-    /** Intrinsic duration from asset metadata, null if not yet loaded (for length: "auto") */
-    readonly intrinsicDuration: Seconds | null;
-}
-
 declare type ResolvedClip = Omit<Clip, "start" | "length"> & {
     start: Seconds;
     length: Seconds;
@@ -1805,16 +1023,6 @@ declare type ResolvedEdit = Omit<Edit_2, "timeline"> & {
     };
 };
 
-/**
- * Resolved timing values in seconds.
- * Matches the external @shotstack/schemas unit convention.
- * Conversion to milliseconds happens only in the Player layer for pixi rendering.
- */
-declare interface ResolvedTiming {
-    start: Seconds;
-    length: Seconds;
-}
-
 declare type ResolvedTrack = {
     clips: ResolvedClip[];
 };
@@ -1878,6 +1086,8 @@ export declare class RichTextToolbar extends BaseToolbar {
     private animationDurationValue;
     private animationStyleSection;
     private animationDirectionSection;
+    private pendingAnimationDuration;
+    private animationDurationThrottle;
     private transitionPopup;
     private transitionPanel;
     private effectPopup;
@@ -1903,7 +1113,10 @@ export declare class RichTextToolbar extends BaseToolbar {
     private updateWeightPopupState;
     private setFontWeight;
     private toggleSizePopup;
+    /** Build popup once at mount - uses event delegation (no per-item listeners) */
     private buildSizePopup;
+    /** Update active state without rebuilding DOM */
+    private updateSizePopupState;
     private applyManualSize;
     private toggleSpacingPopup;
     private toggleAnimationPopup;
@@ -1965,6 +1178,7 @@ export declare class SelectionHandles implements CanvasOverlayRegistration {
     private app;
     private positionBuilder;
     private selectedPlayer;
+    private selectedClipId;
     private selectedTrackIndex;
     private selectedClipIndex;
     private isHovering;
@@ -2016,32 +1230,12 @@ export declare class SelectionHandles implements CanvasOverlayRegistration {
     private hasStateChanged;
 }
 
-/**
- * Serialized format for JSON export (matches Shotstack API).
- * The replace value can be any type - strings, numbers, booleans, objects.
- */
-declare interface SerializedMergeField {
-    find: string;
-    replace: unknown;
-}
-
 export declare type ShapeAsset = components["schemas"]["ShapeAsset"];
 
 export { ShapeAssetSchema }
 
-declare type Size = {
-    width: number;
-    height: number;
-};
-
 export declare type Soundtrack = components["schemas"]["Soundtrack"];
 
-declare interface SystemStats {
-    clipCount: number;
-    trackCount: number;
-    commandCount: number;
-}
-
 export declare type TextAsset = components["schemas"]["TextAsset"];
 
 export { TextAssetSchema }
@@ -2116,9 +1310,9 @@ export declare class TextToolbar extends BaseToolbar {
     dispose(): void;
 }
 
-/** HTML/CSS-based Timeline component extending TimelineEntity for SDK consistency */
-export declare class Timeline extends TimelineEntity {
+export declare class Timeline {
     private readonly edit;
+    readonly element: HTMLElement;
     private readonly container;
     private readonly stateManager;
     private features;
@@ -2138,17 +1332,17 @@ export declare class Timeline extends TimelineEntity {
     private lastFrameTime;
     private isInteracting;
     private isLoaded;
+    private thumbnailRenderPending;
     private readonly handleTimelineUpdated;
     private readonly handlePlaybackPlay;
     private readonly handlePlaybackPause;
     private readonly handleClipSelected;
     private readonly handleClipLoadFailed;
+    private readonly handleClipUpdated;
     private readonly handleRulerMouseMove;
     constructor(edit: Edit, container: HTMLElement, options?: TimelineOptions);
     /** Initialize and mount the timeline */
     load(): Promise<void>;
-    /** Update component state (called each frame during active rendering) */
-    update(_deltaTime: number, _elapsed: number): void;
     /** Render/draw component to DOM (called each frame after update) */
     draw(): void;
     /** Clean up and unmount the timeline */
@@ -2172,7 +1366,7 @@ export declare class Timeline extends TimelineEntity {
     setZoom(pixelsPerSecond: number): void;
     zoomIn(): void;
     zoomOut(): void;
-    scrollTo(time: number): void;
+    scrollTo(time: Seconds): void;
     /** Recalculate size from container and re-render */
     resize(): void;
     selectClip(trackIndex: number, clipIndex: number): void;
@@ -2184,38 +1378,6 @@ export declare class Timeline extends TimelineEntity {
     findClipAtPosition(x: number, y: number): ClipInfo | null;
 }
 
-/**
- * Base class for HTML-based timeline components.
- * Mirrors the Entity pattern used by PixiJS components (load/update/draw/dispose lifecycle).
- */
-declare abstract class TimelineEntity {
-    readonly element: HTMLElement;
-    protected children: TimelineEntity[];
-    constructor(tagName?: keyof HTMLElementTagNameMap, className?: string);
-    /** Initialize the component and its children */
-    abstract load(): Promise<void>;
-    /** Update component state (called each frame during active rendering) */
-    abstract update(deltaTime: number, elapsed: number): void;
-    /** Render/draw component to DOM (called each frame after update) */
-    abstract draw(): void;
-    /** Clean up resources and remove from DOM */
-    abstract dispose(): void;
-    /** Add a child entity */
-    protected addChild(child: TimelineEntity): void;
-    /** Remove a child entity */
-    protected removeChild(child: TimelineEntity): void;
-    /** Remove all children */
-    protected removeAllChildren(): void;
-    /** Load all children */
-    protected loadChildren(): Promise<void>;
-    /** Update all children */
-    protected updateChildren(deltaTime: number, elapsed: number): void;
-    /** Draw all children */
-    protected drawChildren(): void;
-    /** Dispose all children */
-    protected disposeChildren(): void;
-}
-
 /** Feature toggles for Timeline */
 export declare interface TimelineFeatures {
     /** Show toolbar with playback controls */
@@ -2349,33 +1511,6 @@ export declare interface TimelineThemeInput {
     };
 }
 
-/**
- * Stores the original timing intent as specified by the user.
- * This is preserved even after resolution to numeric values.
- * All numeric values are in seconds.
- */
-declare interface TimingIntent {
-    start: Seconds | "auto";
-    length: TimingValue;
-}
-
-/**
- * Command parameters for timing updates.
- * Values in milliseconds (for UI convenience).
- */
-declare interface TimingUpdateParams {
-    start?: number | "auto";
-    length?: number | "auto" | "end";
-}
-
-/**
- * A timing value can be a numeric value (in seconds) or a special string.
- * - "auto" for start: position after previous clip on track
- * - "auto" for length: asset's intrinsic duration
- * - "end" for length: extend to timeline end
- */
-declare type TimingValue = Seconds | "auto" | "end";
-
 export declare type TitleAsset = components["schemas"]["TitleAsset"];
 
 /**
@@ -2392,14 +1527,6 @@ export declare interface ToolbarButtonConfig {
     dividerBefore?: boolean;
 }
 
-declare interface ToolbarButtonConfig_2 {
-    id: string;
-    icon: string;
-    tooltip: string;
-    event: string;
-    dividerBefore?: boolean;
-}
-
 export declare type Track = components["schemas"]["Track"];
 
 export { TrackSchema }
@@ -2473,6 +1600,7 @@ export declare class UIController {
     private currentTrackIndex;
     private currentClipIndex;
     private onKeyDownBound;
+    private modeButtonHandlers;
     private buttonRegistry;
     private buttonEvents;
     private assetToolbar;
@@ -2685,11 +1813,6 @@ export declare interface UIRegistration {
     dispose(): void;
 }
 
-declare type Vector = {
-    x: number;
-    y: number;
-};
-
 export declare const VERSION: string;
 
 export declare type VideoAsset = components["schemas"]["VideoAsset"];