@twick/studio 0.15.13 → 0.15.15

package/README.md

@@ -194,7 +194,7 @@ The studio includes specialized panels for different element types:
 - **VideoPanel**: Video management and library  
 - **ImagePanel**: Image management and library
 - **TextPanel**: Text editing with advanced styling
-- **SubtitlesPanel**: Subtitle and caption management
+- **CaptionsPanel**: Caption and caption management
 - **CirclePanel**: Circle shape creation and editing
 - **RectPanel**: Rectangle shape creation and editing
 - **IconPanel**: Icon library with search and customization
@@ -202,7 +202,7 @@ The studio includes specialized panels for different element types:
 ### Hooks
 
 - **useStudioManager**: Hook for managing studio state, selected tools, and element manipulation
-- **useGenerateSubtitles**: Hook for subtitle generation and polling
+- **useGenerateCaptions**: Hook for caption generation and polling
 
 ### Re-exported Components
 

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

@@ -0,0 +1 @@
+export declare function CaptionsPanelContainer(): import("react/jsx-runtime").JSX.Element;

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

@@ -17,7 +17,7 @@ interface ElementPanelContainerProps {
  * ElementPanelContainer component that renders the appropriate element panel
  * based on the currently selected tool. Provides a unified interface for
  * managing different types of timeline elements including media, text, shapes,
- * and subtitles. Shows an empty state when no tool is selected.
+ * and captions. Shows an empty state when no tool is selected.
  *
  * @param props - Component props for element panel configuration
  * @returns JSX element containing the appropriate element panel or empty state

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

@@ -1,13 +1,13 @@
-import { VideoElement, TrackElement } from '@twick/timeline';
-import { ISubtitleGenerationPollingResponse, SubtitleEntry } from '../../types';
+import { VideoElement, TrackElement, Size } from '@twick/timeline';
+import { ICaptionGenerationPollingResponse, CaptionEntry } from '../../types';
 
 interface PropertiesPanelContainerProps {
-    selectedProp: string;
     selectedElement: TrackElement | null;
     updateElement: (element: TrackElement) => void;
-    addSubtitlesToTimeline: (subtitles: SubtitleEntry[]) => void;
-    onGenerateSubtitles: (videoElement: VideoElement) => Promise<string | null>;
-    getSubtitleStatus: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;
+    addCaptionsToTimeline: (captions: CaptionEntry[]) => void;
+    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
+    videoResolution: Size;
 }
-export declare function PropertiesPanelContainer({ selectedProp, selectedElement, updateElement, addSubtitlesToTimeline, onGenerateSubtitles, getSubtitleStatus, }: PropertiesPanelContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function PropertiesPanelContainer({ selectedElement, updateElement, addCaptionsToTimeline, onGenerateCaptions, getCaptionstatus, videoResolution, }: PropertiesPanelContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/panel/captions-panel.d.ts

@@ -0,0 +1,46 @@
+/**
+ * CaptionsPanel Component
+ *
+ * A presentational panel for managing caption entries in the studio.
+ * Renders a list of caption items, each with a text input and two actions:
+ * Split and Delete. A single Add button appears below the list.
+ *
+ * State is controlled by the parent via props; this component is stateless.
+ *
+ * Entry shape (CaptionEntry):
+ * - `s`: start time (seconds)
+ * - `e`: end time (seconds)
+ * - `t`: caption text
+ *
+ * Props:
+ * - `captions`: CaptionEntry[] — ordered list of captions
+ * - `addCaption()`: add a new caption at the end
+ * - `splitCaption(index)`: split the caption at `index`
+ * - `deleteCaption(index)`: remove the caption at `index`
+ * - `updateCaption(index, caption)`: update the caption at `index`
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CaptionsPanel
+ *   captions={captions}
+ *   addCaption={addCaption}
+ *   splitCaption={splitCaption}
+ *   deleteCaption={deleteCaption}
+ *   updateCaption={updateCaption}
+ * />
+ * ```
+ */
+interface CaptionEntry {
+    s: number;
+    e: number;
+    t: string;
+}
+export declare function CaptionsPanel({ captions, addCaption, splitCaption, deleteCaption, updateCaption, }: {
+    captions: CaptionEntry[];
+    addCaption: () => void;
+    splitCaption: (index: number) => void;
+    deleteCaption: (index: number) => void;
+    updateCaption: (index: number, caption: CaptionEntry) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/panel/circle-panel.d.ts

@@ -1,4 +1,4 @@
 import { CirclePanelState, CirclePanelActions } from '../../hooks/use-circle-panel';
 
 export type CirclePanelProps = CirclePanelState & CirclePanelActions;
-export declare function CirclePanel({ radius, fillColor, opacity, strokeColor, lineWidth, operation, setRadius, setFillColor, setOpacity, setStrokeColor, setLineWidth, handleApplyChanges, }: CirclePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CirclePanel({ radius, fillColor, strokeColor, lineWidth, operation, setRadius, setFillColor, setStrokeColor, setLineWidth, handleApplyChanges, }: CirclePanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/panel/rect-panel.d.ts

@@ -1,4 +1,4 @@
 import { RectPanelState, RectPanelActions } from '../../hooks/use-rect-panel';
 
 export type RectPanelProps = RectPanelState & RectPanelActions;
-export declare function RectPanel({ cornerRadius, fillColor, opacity, strokeColor, lineWidth, operation, setCornerRadius, setFillColor, setOpacity, setStrokeColor, setLineWidth, handleApplyChanges, }: RectPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function RectPanel({ cornerRadius, fillColor, strokeColor, lineWidth, operation, setCornerRadius, setFillColor, setStrokeColor, setLineWidth, handleApplyChanges, }: RectPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/panel/text-panel.d.ts

@@ -1,4 +1,4 @@
 import { TextPanelState, TextPanelActions } from '../../hooks/use-text-panel';
 
 export type TextPanelProps = TextPanelState & TextPanelActions;
-export declare function TextPanel({ textContent, fontSize, selectedFont, isBold, isItalic, textColor, strokeColor, applyShadow, shadowColor, strokeWidth, fonts, operation, setTextContent, setFontSize, setSelectedFont, setIsBold, setIsItalic, setTextColor, setStrokeColor, setApplyShadow, setShadowColor, setStrokeWidth, handleApplyChanges, }: TextPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextPanel({ textContent, fontSize, selectedFont, isBold, isItalic, textColor, strokeColor, applyShadow, shadowColor, strokeWidth, applyBackground, backgroundColor, backgroundOpacity, fonts, operation, setTextContent, setFontSize, setSelectedFont, setIsBold, setIsItalic, setTextColor, setStrokeColor, setApplyShadow, setShadowColor, setStrokeWidth, setApplyBackground, setBackgroundColor, setBackgroundOpacity, handleApplyChanges, }: TextPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/properties/{subtitlte-prop.d.ts → caption-prop.d.ts}

@@ -28,8 +28,8 @@ export declare const CAPTION_COLOR: {
     highlight: string;
     bgColor: string;
 };
-interface SubtitlePropPanelProps {
-    setApplyPropsToAllSubtitle: (apply: boolean) => void;
+interface CaptionPropPanelProps {
+    setApplyPropsToAllCaption: (apply: boolean) => void;
 }
-export declare function SubtitlePropPanel({ selectedElement, updateElement, setApplyPropsToAllSubtitle, }: SubtitlePropPanelProps & PropertiesPanelProps): import("react/jsx-runtime").JSX.Element | null;
-export default SubtitlePropPanel;
+export declare function CaptionPropPanel({ selectedElement, updateElement, setApplyPropsToAllCaption, }: CaptionPropPanelProps & PropertiesPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export default CaptionPropPanel;

package/dist/components/properties/generate-captions.d.ts

@@ -0,0 +1,13 @@
+import { TrackElement, VideoElement } from '@twick/timeline';
+import { ICaptionGenerationPollingResponse } from '../../types';
+
+export declare function GenerateCaptionsPanel({ selectedElement, addCaptionsToTimeline, onGenerateCaptions, getCaptionstatus, }: {
+    selectedElement: TrackElement;
+    addCaptionsToTimeline: (captions: {
+        s: number;
+        e: number;
+        t: string;
+    }[]) => void;
+    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/properties/property-row.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+interface PropertyRowProps {
+    label: string;
+    children: ReactNode;
+    /** Optional secondary label/value on the right (e.g. units, current value) */
+    secondary?: ReactNode;
+}
+export declare function PropertyRow({ label, children, secondary }: PropertyRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/properties/text-props.d.ts

@@ -0,0 +1,3 @@
+import { PropertiesPanelProps } from '../../types';
+
+export declare function TextPropsPanel({ selectedElement, updateElement, }: PropertiesPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/helpers/generate-captions.service.d.ts

@@ -0,0 +1,21 @@
+import { ProjectJSON, VideoElement } from '@twick/timeline';
+import { ICaptionGenerationPollingResponse, ICaptionGenerationService, CaptionEntry } from '../types';
+
+declare class GenerateCaptionsService implements ICaptionGenerationService {
+    videoElement: VideoElement | null;
+    projectJSON: ProjectJSON | null;
+    generateSubtiltesApi: (videoUrl: string) => Promise<string>;
+    requestStatusApi: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
+    constructor({ generateSubtiltesApi, requestStatusApi, }: {
+        generateSubtiltesApi: (videoUrl: string) => Promise<string>;
+        requestStatusApi: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
+    });
+    generateCaptions(videoElement: VideoElement, projectJSON: ProjectJSON): Promise<string>;
+    getRequestStatus(reqId: string): Promise<ICaptionGenerationPollingResponse>;
+    updateProjectWithCaptions(captions: CaptionEntry[]): ProjectJSON;
+    generateCaptionVideo(videoUrl: string, videoSize?: {
+        width: number;
+        height: number;
+    }): Promise<string>;
+}
+export default GenerateCaptionsService;

package/dist/helpers/volume-db.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Volume conversion between linear (0-1) and dB scale.
+ * Used for PlaybackPropsPanel to match professional audio tools (e.g. -60 dB to +6 dB).
+ *
+ * Formula: dB = 20 * log10(linear)
+ * - 0 dB = 1.0 linear (full volume)
+ * - -60 dB ≈ 0.001 linear (effectively mute)
+ * - +6 dB ≈ 2.0 linear (amplification)
+ */
+declare const MIN_DB = -60;
+declare const MAX_DB = 6;
+/**
+ * Convert linear volume (0 to ~2) to dB.
+ * Returns MIN_DB for linear <= 0 to avoid -Infinity.
+ */
+export declare function linearToDb(linear: number): number;
+/**
+ * Convert dB to linear volume.
+ * Returns 0 for dB <= MIN_DB (mute).
+ */
+export declare function dbToLinear(db: number): number;
+export { MIN_DB, MAX_DB };

package/dist/hooks/use-captions-panel.d.ts

@@ -0,0 +1,13 @@
+interface CaptionEntry {
+    s: number;
+    e: number;
+    t: string;
+}
+export declare const useCaptionsPanel: () => {
+    captions: CaptionEntry[];
+    addCaption: () => void;
+    splitCaption: (index: number) => Promise<void>;
+    deleteCaption: (index: number) => void;
+    updateCaption: (index: number, caption: CaptionEntry) => void;
+};
+export {};

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

@@ -0,0 +1,9 @@
+import { VideoElement } from '@twick/timeline';
+import { ICaptionGenerationPollingResponse, StudioConfig, CaptionEntry } from '../types';
+
+declare const useGenerateCaptions: (studioConfig?: StudioConfig) => {
+    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    addCaptionsToTimeline: (captions: CaptionEntry[]) => void;
+    getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
+};
+export default useGenerateCaptions;

package/dist/hooks/use-studio-operation.d.ts

@@ -1,13 +1,13 @@
 import { VideoElement } from '@twick/timeline';
-import { ISubtitleGenerationPollingResponse, StudioConfig, SubtitleEntry } from '../types';
+import { ICaptionGenerationPollingResponse, StudioConfig, CaptionEntry } from '../types';
 
 declare const useStudioOperation: (studioConfig?: StudioConfig) => {
     onLoadProject: () => Promise<void>;
     onSaveProject: () => Promise<void>;
     onExportVideo: () => Promise<void>;
     onNewProject: () => void;
-    onGenerateSubtitles: (videoElement: VideoElement) => Promise<string | null>;
-    addSubtitlesToTimeline: (subtitles: SubtitleEntry[]) => void;
-    getSubtitleStatus: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;
+    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    addCaptionsToTimeline: (captions: CaptionEntry[]) => void;
+    getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
 };
 export default useStudioOperation;

package/dist/hooks/use-text-panel.d.ts

@@ -27,6 +27,9 @@ export interface TextPanelState {
     applyShadow: boolean;
     shadowColor: string;
     strokeWidth: number;
+    applyBackground: boolean;
+    backgroundColor: string;
+    backgroundOpacity: number;
     fonts: string[];
     operation: string;
 }
@@ -41,6 +44,9 @@ export interface TextPanelActions {
     setApplyShadow: (shadow: boolean) => void;
     setShadowColor: (color: string) => void;
     setStrokeWidth: (width: number) => void;
+    setApplyBackground: (apply: boolean) => void;
+    setBackgroundColor: (color: string) => void;
+    setBackgroundOpacity: (opacity: number) => void;
     handleApplyChanges: () => void;
 }
 export declare const useTextPanel: ({ selectedElement, addElement, updateElement, }: {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { TwickStudio } from './components/twick-studio';
 import { Toolbar } from './components/toolbar';
 import { useStudioManager } from './hooks/use-studio-manager';
-import { default as useGenerateSubtitles } from './hooks/use-generate-subtitles';
+import { default as useGenerateCaptions } from './hooks/use-generate-captions';
 import { default as StudioHeader } from './components/header';
 import { AudioPanel } from './components/panel/audio-panel';
 import { VideoPanel } from './components/panel/video-panel';
@@ -9,8 +9,7 @@ import { ImagePanel } from './components/panel/image-panel';
 import { TextPanel } from './components/panel/text-panel';
 import { CirclePanel } from './components/panel/circle-panel';
 import { RectPanel } from './components/panel/rect-panel';
-import { IconPanel } from './components/panel/icon-panel';
-import { SubtitlesPanel } from './components/panel/subtitles-panel';
+import { CaptionsPanel } from './components/panel/captions-panel';
 
 export { 
 /** Main studio editing environment */
@@ -28,20 +27,18 @@ VideoPanel,
 ImagePanel, 
 /** Panel for editing/add text elements */
 TextPanel, 
-/** Panel for subtitle/caption management */
-SubtitlesPanel, 
+/** Panel for caption/caption management */
+CaptionsPanel, 
 /** Panel for adding circles */
 CirclePanel, 
 /** Panel for adding rectangles */
-RectPanel, 
-/** Panel for icon assets */
-IconPanel, };
+RectPanel, };
 export { 
 /** Hook for managing studio state and selections */
 useStudioManager, 
-/** Hook for polling-based subtitle generation */
-useGenerateSubtitles, };
-export * from './helpers/generate-subtitles.service';
+/** Hook for polling-based caption generation */
+useGenerateCaptions, };
+export * from './helpers/generate-captions.service';
 export * from './helpers/constant';
 export * from './types';
 /**
@@ -83,7 +80,7 @@ export * from './types';
  * Main video editor component and related types
  */
 export { default as VideoEditor } from '@twick/video-editor';
-export type { VideoEditorProps, VideoEditorConfig, TimelineTickConfig, TimelineZoomConfig, PlayerControlsProps } from '@twick/video-editor';
+export type { VideoEditorProps, VideoEditorConfig, CanvasConfig, TimelineTickConfig, TimelineZoomConfig, PlayerControlsProps } from '@twick/video-editor';
 /**
  * Video editor hooks for custom implementations
  */
@@ -116,7 +113,7 @@ export { PLAYER_STATE, getBaseProject, generateId } from '@twick/live-player';
 /**
  * Timeline provider and editor
  */
-export { TimelineProvider, TimelineEditor, INITIAL_TIMELINE_DATA } from '@twick/timeline';
+export { useTimelineContext, TimelineProvider, TimelineEditor, INITIAL_TIMELINE_DATA } from '@twick/timeline';
 export type { TimelineProviderProps } from '@twick/timeline';
 /**
  * Timeline element classes