@twick/studio 0.15.18 → 0.15.20

package/README.md

@@ -161,6 +161,9 @@ interface StudioConfig {
   saveProject?: (project: ProjectJSON, fileName: string) => Promise<Result>;
   loadProject?: () => Promise<ProjectJSON>;
   exportVideo?: (project: ProjectJSON, videoSettings: VideoSettings) => Promise<Result>;
+  // Generative AI (optional; enables generate-media toolbar)
+  imageGenerationService?: IImageGenerationService;
+  videoGenerationService?: IVideoGenerationService;
 }
 
 interface TimelineTickConfig {
@@ -199,10 +202,32 @@ The studio includes specialized panels for different element types:
 - **RectPanel**: Rectangle shape creation and editing
 - **IconPanel**: Icon library with search and customization
 
+### Generative AI Services
+
+Implement `IImageGenerationService` and/or `IVideoGenerationService` to enable the generate-media tool (toolbar icon Wand2):
+
+```ts
+interface IImageGenerationService {
+  generateImage: (params: GenerateImageParams) => Promise<string>; // returns requestId
+  getRequestStatus: (reqId: string) => Promise<IGenerationPollingResponse>;
+  getAvailableModels?: () => ModelInfo[];
+}
+
+interface IVideoGenerationService {
+  generateVideo: (params: GenerateVideoParams) => Promise<string>;
+  getRequestStatus: (reqId: string) => Promise<IGenerationPollingResponse>;
+  getAvailableModels?: () => ModelInfo[];
+}
+```
+
+Types (`GenerateImageParams`, `GenerateVideoParams`, `IGenerationPollingResponse`, `ModelInfo`) come from `@twick/ai-models`. Pass your implementation via `studioConfig.imageGenerationService` and `studioConfig.videoGenerationService`. If neither is provided, the generate-media tool is hidden.
+
 ### Hooks
 
 - **useStudioManager**: Hook for managing studio state, selected tools, and element manipulation
 - **useGenerateCaptions**: Hook for caption generation and polling
+- **useGenerateImage**: Hook for image generation (returns `generateImage`, `addImageToTimeline`, `isGenerating`, `error`)
+- **useGenerateVideo**: Hook for video generation (returns `generateVideo`, `addVideoToTimeline`, `isGenerating`, `error`)
 
 ### Re-exported Components
 

package/dist/components/container/element-panel-container.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { Size, TrackElement } from '@twick/timeline';
+import { StudioConfig, UploadConfig } from '../../types';
 
 /**
  * Props interface for the ElementPanelContainer component.
@@ -12,6 +13,8 @@ interface ElementPanelContainerProps {
     setSelectedTool: (tool: string) => void;
     addElement: (element: TrackElement) => void;
     updateElement: (element: TrackElement) => void;
+    uploadConfig?: UploadConfig;
+    studioConfig?: StudioConfig;
 }
 /**
  * ElementPanelContainer component that renders the appropriate element panel
@@ -34,5 +37,5 @@ interface ElementPanelContainerProps {
  * />
  * ```
  */
-declare const ElementPanelContainer: ({ selectedTool, videoResolution, selectedElement, addElement, updateElement, }: ElementPanelContainerProps) => React.ReactElement;
+declare const ElementPanelContainer: ({ selectedTool, videoResolution, selectedElement, addElement, updateElement, uploadConfig, studioConfig, }: ElementPanelContainerProps) => React.ReactElement;
 export default ElementPanelContainer;

package/dist/components/container/generate-media-panel-container.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { Size, TrackElement } from '@twick/timeline';
+import { StudioConfig } from '../../types';
+
+interface GenerateMediaPanelContainerProps {
+    videoResolution: Size;
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+    studioConfig?: StudioConfig;
+}
+export declare function GenerateMediaPanelContainer({ videoResolution, addElement, studioConfig, }: GenerateMediaPanelContainerProps): React.ReactElement;
+export {};

package/dist/components/properties/caption-prop.d.ts

@@ -1,24 +1,7 @@
+import { CAPTION_STYLE, CAPTION_STYLE_OPTIONS } from '@twick/timeline';
 import { PropertiesPanelProps } from '../../types';
 
-export declare const CAPTION_STYLE: {
-    WORD_BG_HIGHLIGHT: string;
-    WORD_BY_WORD: string;
-    WORD_BY_WORD_WITH_BG: string;
-};
-export declare const CAPTION_STYLE_OPTIONS: {
-    [CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
-        label: string;
-        value: string;
-    };
-    [CAPTION_STYLE.WORD_BY_WORD]: {
-        label: string;
-        value: string;
-    };
-    [CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
-        label: string;
-        value: string;
-    };
-};
+export { CAPTION_STYLE, CAPTION_STYLE_OPTIONS };
 export declare const CAPTION_FONT: {
     size: number;
     family: string;
@@ -27,9 +10,11 @@ export declare const CAPTION_COLOR: {
     text: string;
     highlight: string;
     bgColor: string;
+    outlineColor: string;
 };
 interface CaptionPropPanelProps {
-    setApplyPropsToAllCaption: (apply: boolean) => void;
+    /** No-op when using fixed config. Kept for API compatibility. */
+    setApplyPropsToAllCaption?: (apply: boolean) => void;
 }
-export declare function CaptionPropPanel({ selectedElement, updateElement, setApplyPropsToAllCaption, }: CaptionPropPanelProps & PropertiesPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CaptionPropPanel({ selectedElement, updateElement, }: CaptionPropPanelProps & PropertiesPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export default CaptionPropPanel;

package/dist/components/shared/cloud-media-upload.d.ts

@@ -0,0 +1,15 @@
+import { CloudUploadProvider } from '../../hooks/use-cloud-media-upload';
+
+export interface CloudMediaUploadProps {
+    onSuccess: (url: string, file: File) => void;
+    onError?: (error: string) => void;
+    accept?: string;
+    uploadApiUrl: string;
+    provider: CloudUploadProvider;
+    buttonText?: string;
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    icon?: React.ReactNode;
+}
+export declare const CloudMediaUpload: ({ onSuccess, onError, accept, uploadApiUrl, provider, buttonText, className, disabled, id: providedId, icon, }: CloudMediaUploadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/index.d.ts

@@ -1,3 +1,4 @@
+export * from './cloud-media-upload';
 export * from './color-input';
 export * from './file-input';
 export * from './media-manager';

package/dist/helpers/constant.d.ts

@@ -49,4 +49,40 @@ export declare const CAPTION_PROPS: {
         shadowColor: string;
         shadowBlur: number;
     };
+    outline_only: {
+        font: {
+            size: number;
+            weight: number;
+            family: string;
+        };
+        colors: {
+            text: string;
+            highlight: string;
+            bgColor: string;
+        };
+        lineWidth: number;
+        stroke: string;
+        fontWeight: number;
+        shadowOffset: number[];
+        shadowColor: string;
+        shadowBlur: number;
+    };
+    soft_box: {
+        font: {
+            size: number;
+            weight: number;
+            family: string;
+        };
+        colors: {
+            text: string;
+            highlight: string;
+            bgColor: string;
+        };
+        lineWidth: number;
+        stroke: string;
+        fontWeight: number;
+        shadowOffset: number[];
+        shadowColor: string;
+        shadowBlur: number;
+    };
 };

package/dist/hooks/use-cloud-media-upload.d.ts

@@ -0,0 +1,27 @@
+export type CloudUploadProvider = "s3" | "gcs";
+export interface UseCloudMediaUploadConfig {
+    uploadApiUrl: string;
+    provider: CloudUploadProvider;
+}
+/** Response from S3 presign API (e.g. file-uploader Lambda). */
+export interface S3PresignResponse {
+    uploadUrl: string;
+    key?: string;
+    bucket?: string;
+    contentType?: string;
+    expiresIn?: number;
+}
+/** Response from GCS upload API (server-side upload). */
+export interface GCSUploadResponse {
+    url: string;
+}
+export interface UseCloudMediaUploadReturn {
+    uploadFile: (file: File) => Promise<{
+        url: string;
+    }>;
+    isUploading: boolean;
+    progress: number;
+    error: string | null;
+    resetError: () => void;
+}
+export declare const useCloudMediaUpload: (config: UseCloudMediaUploadConfig) => UseCloudMediaUploadReturn;

package/dist/hooks/use-generate-image.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '@twick/timeline';
+import { StudioConfig, GenerateImageParams } from '../types';
+
+export declare const useGenerateImage: (studioConfig?: StudioConfig) => {
+    generateImage: (params: GenerateImageParams) => Promise<string | null>;
+    addImageToTimeline: (url: string, videoResolution: Size, startTime: number, duration: number) => void;
+    isGenerating: boolean;
+    error: string | null;
+    hasService: boolean;
+};

package/dist/hooks/use-generate-video.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '@twick/timeline';
+import { StudioConfig, GenerateVideoParams } from '../types';
+
+export declare const useGenerateVideo: (studioConfig?: StudioConfig) => {
+    generateVideo: (params: GenerateVideoParams) => Promise<string | null>;
+    addVideoToTimeline: (url: string, videoResolution: Size, startTime: number, duration: number) => void;
+    isGenerating: boolean;
+    error: string | null;
+    hasService: boolean;
+};

package/dist/index.d.ts

@@ -10,6 +10,8 @@ import { TextPanel } from './components/panel/text-panel';
 import { CirclePanel } from './components/panel/circle-panel';
 import { RectPanel } from './components/panel/rect-panel';
 import { CaptionsPanel } from './components/panel/captions-panel';
+import { CloudMediaUpload } from './components/shared/cloud-media-upload';
+import { useCloudMediaUpload } from './hooks/use-cloud-media-upload';
 
 export { 
 /** Main studio editing environment */
@@ -37,10 +39,17 @@ export {
 /** Hook for managing studio state and selections */
 useStudioManager, 
 /** Hook for polling-based caption generation */
-useGenerateCaptions, };
+useGenerateCaptions, 
+/** Hook for S3/GCS cloud media upload */
+useCloudMediaUpload, };
+export { 
+/** Cloud media upload (S3 or GCS) for use in media panels */
+CloudMediaUpload, };
 export * from './helpers/generate-captions.service';
 export * from './helpers/constant';
 export * from './types';
+export type { CloudUploadProvider, UseCloudMediaUploadConfig, UseCloudMediaUploadReturn, S3PresignResponse, GCSUploadResponse, } from './hooks/use-cloud-media-upload';
+export type { CloudMediaUploadProps } from './components/shared/cloud-media-upload';
 /**
  * ============================================================================
  * RE-EXPORTS FROM DEPENDENCY PACKAGES