@shotstack/shotstack-studio 2.0.0-beta.13 → 2.0.0-beta.15

package/dist/index.d.ts

@@ -196,6 +196,8 @@ export declare class Canvas {
     private currentZoom;
     private onTickBound;
     private onBackgroundClickBound;
+    private onWheelBound;
+    private canvasRoot;
     constructor(edit: Edit);
     /**
      * Register a UIController to receive tick updates for canvas overlays.
@@ -204,6 +206,7 @@ export declare class Canvas {
     registerUIController(controller: UIController): void;
     load(): Promise<void>;
     private setupTouchHandling;
+    private onWheel;
     centerEdit(): void;
     zoomToFit(padding?: number): void;
     resize(): void;
@@ -278,9 +281,10 @@ export declare class CanvasToolbar {
     private backgroundChangeCallback;
     private clickOutsideHandler;
     private showMergeFields;
-    constructor(edit?: Edit, options?: {
-        mergeFields?: boolean;
-    });
+    private maxPixels?;
+    constructor(edit?: Edit, options?: CanvasToolbarOptions);
+    /** Check if given dimensions exceed the configured pixel limit */
+    private isOverLimit;
     /** Get the edit as ShotstackEdit if it has merge field capabilities */
     private getShotstackEdit;
     setPosition(screenX: number, screenY: number): void;
@@ -299,6 +303,8 @@ export declare class CanvasToolbar {
     private renderVariablesList;
     private addVariable;
     setResolution(width: number, height: number): void;
+    /** Update warning state for inputs when loaded resolution exceeds configured limit */
+    private updateConstraintWarning;
     setFps(fps: number): void;
     setBackground(color: string): void;
     onResolutionChange(callback: ResolutionChangeCallback): void;
@@ -307,6 +313,12 @@ export declare class CanvasToolbar {
     dispose(): void;
 }
 
+declare interface CanvasToolbarOptions {
+    mergeFields?: boolean;
+    /** Maximum total pixels allowed for custom resolution input. Omit for unlimited. */
+    maxPixels?: number;
+}
+
 export declare type CaptionAsset = components["schemas"]["CaptionAsset"];
 
 export { CaptionAssetSchema }
@@ -403,6 +415,15 @@ declare type CommandContext = {
     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;
 };
 
 export declare class Controls {
@@ -514,6 +535,12 @@ export declare const DestinationSchema: z.ZodUnion<readonly [z.ZodIntersection<z
 
 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.
+     */
+    private static readonly MAX_HISTORY_SIZE;
     assetLoader: AssetLoader;
     events: EventEmitter<EditEventMap & InternalEventMap>;
     private edit;
@@ -557,6 +584,8 @@ export declare class Edit extends Entity {
      */
     private initializeFromDocument;
     private updateViewportMask;
+    /** Update canvas visuals after size change (viewport mask, background, zoom) */
+    private updateCanvasForSize;
     play(): void;
     pause(): void;
     seek(target: number): void;
@@ -795,6 +824,10 @@ export declare class Edit extends Entity {
     getOutputFormat(): string;
     setOutputDestinations(destinations: Destination[]): void;
     getOutputDestinations(): Destination[];
+    setOutputResolution(resolution: string): void;
+    getOutputResolution(): string | undefined;
+    setOutputAspectRatio(aspectRatio: string): void;
+    getOutputAspectRatio(): string | undefined;
     getTimelineFonts(): Array<{
         src: string;
     }>;
@@ -815,6 +848,14 @@ export declare class Edit extends Entity {
     pruneUnusedFonts(): void;
     setTimelineBackground(color: string): void;
     getTimelineBackground(): string;
+    /**
+     * 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.
      */
@@ -900,6 +941,11 @@ 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;
 };
 
@@ -927,6 +973,8 @@ export declare const EditEvent: {
     readonly TrackRemoved: "track:removed";
     readonly DurationChanged: "duration:changed";
     readonly OutputResized: "output:resized";
+    readonly OutputResolutionChanged: "output:resolutionChanged";
+    readonly OutputAspectRatioChanged: "output:aspectRatioChanged";
     readonly OutputFpsChanged: "output:fpsChanged";
     readonly OutputFormatChanged: "output:formatChanged";
     readonly OutputDestinationsChanged: "output:destinationsChanged";
@@ -994,6 +1042,12 @@ export declare type EditEventMap = {
         width: number;
         height: number;
     };
+    [EditEvent.OutputResolutionChanged]: {
+        resolution: string | undefined;
+    };
+    [EditEvent.OutputAspectRatioChanged]: {
+        aspectRatio: string | undefined;
+    };
     [EditEvent.OutputFpsChanged]: {
         fps: number;
     };
@@ -1338,6 +1392,14 @@ export { OffsetSchema }
 
 export declare type Output = components["schemas"]["Output"];
 
+export declare const OutputAspectRatioSchema: z.ZodOptional<z.ZodEnum<{
+    "16:9": "16:9";
+    "9:16": "9:16";
+    "1:1": "1:1";
+    "4:3": "4:3";
+    "4:5": "4:5";
+}>>;
+
 export declare const OutputFormatSchema: z.ZodEnum<{
     mp4: "mp4";
     gif: "gif";
@@ -1349,6 +1411,15 @@ export declare const OutputFormatSchema: z.ZodEnum<{
 
 export declare const OutputFpsSchema: z.ZodUnion<readonly [z.ZodLiteral<12>, z.ZodLiteral<15>, z.ZodLiteral<23.976>, z.ZodLiteral<24>, z.ZodLiteral<25>, z.ZodLiteral<29.97>, z.ZodLiteral<30>, z.ZodLiteral<48>, z.ZodLiteral<50>, z.ZodLiteral<59.94>, z.ZodLiteral<60>]>;
 
+export declare const OutputResolutionSchema: z.ZodOptional<z.ZodEnum<{
+    preview: "preview";
+    mobile: "mobile";
+    sd: "sd";
+    hd: "hd";
+    1080: "1080";
+    "4k": "4k";
+}>>;
+
 export { OutputSchema }
 
 export declare const OutputSizeSchema: z.ZodObject<{
@@ -1856,6 +1927,7 @@ export declare class Timeline extends TimelineEntity {
     private readonly handlePlaybackPause;
     private readonly handleClipSelected;
     private readonly handleClipLoadFailed;
+    private readonly handleRulerMouseMove;
     constructor(edit: Edit, container: HTMLElement, options?: TimelineOptions);
     /** Initialize and mount the timeline */
     load(): Promise<void>;
@@ -2177,6 +2249,8 @@ export declare class UIController {
     readonly mergeFieldsEnabled: boolean;
     /** Whether selection handles are enabled for drag/resize/rotate */
     private readonly selectionHandlesEnabled;
+    /** Maximum total pixels for resolution picker (undefined = unlimited) */
+    private readonly maxPixels?;
     private clipToolbar;
     private toolbarMode;
     private currentAssetType;
@@ -2376,6 +2450,8 @@ export declare interface UIControllerOptions {
     selectionHandles?: boolean;
     /** Enable merge fields UI (Variables panel, autocomplete). Default: false (vanilla video editor) */
     mergeFields?: boolean;
+    /** Maximum total pixels allowed for resolution picker input. Omit for unlimited. */
+    maxPixels?: number;
 }
 
 /**