@twick/studio 0.15.19 → 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,6 +1,6 @@
 import { default as React } from 'react';
 import { Size, TrackElement } from '@twick/timeline';
-import { UploadConfig } from '../../types';
+import { StudioConfig, UploadConfig } from '../../types';
 
 /**
  * Props interface for the ElementPanelContainer component.
@@ -14,6 +14,7 @@ interface ElementPanelContainerProps {
     addElement: (element: TrackElement) => void;
     updateElement: (element: TrackElement) => void;
     uploadConfig?: UploadConfig;
+    studioConfig?: StudioConfig;
 }
 /**
  * ElementPanelContainer component that renders the appropriate element panel
@@ -36,5 +37,5 @@ interface ElementPanelContainerProps {
  * />
  * ```
  */
-declare const ElementPanelContainer: ({ selectedTool, videoResolution, selectedElement, addElement, updateElement, uploadConfig, }: 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/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-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;
+};