@shotstack/shotstack-studio 2.0.0-beta.29 → 2.0.0-beta.30

package/dist/index.d.ts

@@ -31,11 +31,16 @@ export { AssetSchema }
 
 export declare class AssetToolbar {
     private container;
+    private buttonsContainer;
     private ui;
     private unsubscribe;
+    private dragResult;
     constructor(ui: UIController);
+    getDragState(): ToolbarDragState | null;
     setPosition(screenX: number, screenY: number): void;
-    mount(parent: HTMLElement): void;
+    mount(parent: HTMLElement, options?: {
+        onDragReset?: () => void;
+    }): void;
     private render;
     private setupEventListeners;
     dispose(): void;
@@ -57,7 +62,12 @@ declare abstract class BaseToolbar {
     protected selectedTrackIdx: number;
     protected selectedClipIdx: number;
     protected clickOutsideHandler: ((e: MouseEvent) => void) | null;
+    protected dragResult: ToolbarDragHandle | null;
     constructor(edit: Edit);
+    /**
+     * Add a drag handle to the toolbar container and enable free-form dragging.
+     */
+    protected enableDrag(): void;
     /**
      * Mount the toolbar to a parent element.
      * Subclasses must implement to build their specific HTML structure.
@@ -248,6 +258,7 @@ export declare class CanvasToolbar {
     private fpsChangeCallback;
     private backgroundChangeCallback;
     private clickOutsideHandler;
+    private dragResult;
     private showMergeFields;
     private maxPixels?;
     constructor(edit?: Edit, options?: CanvasToolbarOptions);
@@ -255,8 +266,11 @@ export declare class CanvasToolbar {
     private isOverLimit;
     /** Get the edit as ShotstackEdit if it has merge field capabilities */
     private getShotstackEdit;
+    getDragState(): ToolbarDragState | null;
     setPosition(screenX: number, screenY: number): void;
-    mount(parent: HTMLElement): void;
+    mount(parent: HTMLElement, options?: {
+        onDragReset?: () => void;
+    }): void;
     private setupEventListeners;
     private togglePopup;
     private closeAllPopups;
@@ -1530,6 +1544,17 @@ export declare interface ToolbarButtonConfig {
     dividerBefore?: boolean;
 }
 
+declare interface ToolbarDragHandle {
+    getState(): ToolbarDragState;
+    dispose(): void;
+}
+
+declare interface ToolbarDragState {
+    readonly hasUserPosition: boolean;
+    readonly userX: number;
+    readonly userY: number;
+}
+
 export declare type Track = components["schemas"]["Track"];
 
 export { TrackSchema }
@@ -1607,6 +1632,10 @@ export declare class UIController {
     private buttonEvents;
     private assetToolbar;
     private canvasToolbar;
+    private lastAutoAssetX;
+    private lastAutoAssetY;
+    private lastAutoCanvasX;
+    private lastAutoCanvasY;
     /**
      * Create a UIController with all standard toolbars pre-registered.
      * This is the recommended way to create a UIController for most use cases.
@@ -1689,6 +1718,10 @@ export declare class UIController {
      * Update all canvas overlays. Called by Canvas each tick.
      */
     updateOverlays(deltaTime: number, elapsed: number): void;
+    /**
+     * Position a sidebar toolbar at autoX/autoY, applying the user's drag offset if present.
+     */
+    private applySidebarPosition;
     /**
      * Update toolbar positions to be adjacent to the canvas content.
      * Uses position: fixed with screen coordinates for complete independence from parent CSS.

package/dist/schema/index.d.ts

@@ -31,11 +31,16 @@ export { AssetSchema }
 
 export declare class AssetToolbar {
     private container;
+    private buttonsContainer;
     private ui;
     private unsubscribe;
+    private dragResult;
     constructor(ui: UIController);
+    getDragState(): ToolbarDragState | null;
     setPosition(screenX: number, screenY: number): void;
-    mount(parent: HTMLElement): void;
+    mount(parent: HTMLElement, options?: {
+        onDragReset?: () => void;
+    }): void;
     private render;
     private setupEventListeners;
     dispose(): void;
@@ -57,7 +62,12 @@ declare abstract class BaseToolbar {
     protected selectedTrackIdx: number;
     protected selectedClipIdx: number;
     protected clickOutsideHandler: ((e: MouseEvent) => void) | null;
+    protected dragResult: ToolbarDragHandle | null;
     constructor(edit: Edit);
+    /**
+     * Add a drag handle to the toolbar container and enable free-form dragging.
+     */
+    protected enableDrag(): void;
     /**
      * Mount the toolbar to a parent element.
      * Subclasses must implement to build their specific HTML structure.
@@ -248,6 +258,7 @@ export declare class CanvasToolbar {
     private fpsChangeCallback;
     private backgroundChangeCallback;
     private clickOutsideHandler;
+    private dragResult;
     private showMergeFields;
     private maxPixels?;
     constructor(edit?: Edit, options?: CanvasToolbarOptions);
@@ -255,8 +266,11 @@ export declare class CanvasToolbar {
     private isOverLimit;
     /** Get the edit as ShotstackEdit if it has merge field capabilities */
     private getShotstackEdit;
+    getDragState(): ToolbarDragState | null;
     setPosition(screenX: number, screenY: number): void;
-    mount(parent: HTMLElement): void;
+    mount(parent: HTMLElement, options?: {
+        onDragReset?: () => void;
+    }): void;
     private setupEventListeners;
     private togglePopup;
     private closeAllPopups;
@@ -1530,6 +1544,17 @@ export declare interface ToolbarButtonConfig {
     dividerBefore?: boolean;
 }
 
+declare interface ToolbarDragHandle {
+    getState(): ToolbarDragState;
+    dispose(): void;
+}
+
+declare interface ToolbarDragState {
+    readonly hasUserPosition: boolean;
+    readonly userX: number;
+    readonly userY: number;
+}
+
 export declare type Track = components["schemas"]["Track"];
 
 export { TrackSchema }
@@ -1607,6 +1632,10 @@ export declare class UIController {
     private buttonEvents;
     private assetToolbar;
     private canvasToolbar;
+    private lastAutoAssetX;
+    private lastAutoAssetY;
+    private lastAutoCanvasX;
+    private lastAutoCanvasY;
     /**
      * Create a UIController with all standard toolbars pre-registered.
      * This is the recommended way to create a UIController for most use cases.
@@ -1689,6 +1718,10 @@ export declare class UIController {
      * Update all canvas overlays. Called by Canvas each tick.
      */
     updateOverlays(deltaTime: number, elapsed: number): void;
+    /**
+     * Position a sidebar toolbar at autoX/autoY, applying the user's drag offset if present.
+     */
+    private applySidebarPosition;
     /**
      * Update toolbar positions to be adjacent to the canvas content.
      * Uses position: fixed with screen coordinates for complete independence from parent CSS.