@twick/studio 0.14.6 → 0.14.8

package/README.md

@@ -34,12 +34,32 @@ export default function App() {
         initialData={INITIAL_TIMELINE_DATA}
         contextId={"studio-demo"}
       >
-        <TwickStudio studioConfig={{
-          videoProps: {
-            width: 720,
-            height: 1280,
-          },
-        }}/>
+        <TwickStudio 
+          studioConfig={{
+            videoProps: {
+              width: 720,
+              height: 1280,
+            },
+            // Optional: Customize timeline tick marks
+            timelineTickConfigs: [
+              { durationThreshold: 30, majorInterval: 5, minorTicks: 5 },
+              { durationThreshold: 300, majorInterval: 30, minorTicks: 6 }
+            ],
+            // Optional: Customize zoom behavior
+            timelineZoomConfig: {
+              min: 0.5, max: 2.0, step: 0.25, default: 1.0
+            },
+            // Optional: Customize element colors
+            elementColors: {
+              video: "#8B5FBF",
+              audio: "#3D8B8B",
+              image: "#D4956C",
+              text: "#A78EC8",
+              caption: "#9B8ACE",
+              fragment: "#1A1A1A"
+            }
+          }}
+        />
       </TimelineProvider>
     </LivePlayerProvider>
   );
@@ -59,6 +79,24 @@ The main studio component that provides a complete video editing interface.
       width: 1920,
       height: 1080
     },
+    // Optional: Customize timeline tick marks
+    timelineTickConfigs: [
+      { durationThreshold: 30, majorInterval: 5, minorTicks: 5 },
+      { durationThreshold: 300, majorInterval: 30, minorTicks: 6 }
+    ],
+    // Optional: Customize zoom behavior
+    timelineZoomConfig: {
+      min: 0.5, max: 2.0, step: 0.25, default: 1.0
+    },
+    // Optional: Customize element colors
+    elementColors: {
+      video: "#8B5FBF",
+      audio: "#3D8B8B",
+      image: "#D4956C",
+      text: "#A78EC8",
+      caption: "#9B8ACE",
+      fragment: "#1A1A1A"
+    },
     saveProject: async (project, fileName) => {
       // Custom save logic
       return { status: true, message: "Project saved" };
@@ -85,10 +123,39 @@ interface StudioConfig {
     width: number;
     height: number;
   };
+  // Timeline tick configuration
+  timelineTickConfigs?: TimelineTickConfig[];
+  // Zoom configuration
+  timelineZoomConfig?: TimelineZoomConfig;
+  // Element colors
+  elementColors?: ElementColors;
+  // Project management callbacks
   saveProject?: (project: ProjectJSON, fileName: string) => Promise<Result>;
   loadProject?: () => Promise<ProjectJSON>;
   exportVideo?: (project: ProjectJSON, videoSettings: VideoSettings) => Promise<Result>;
 }
+
+interface TimelineTickConfig {
+  durationThreshold: number; // Applies when duration < threshold
+  majorInterval: number;      // Major tick interval in seconds
+  minorTicks: number;         // Number of minor ticks between majors
+}
+
+interface TimelineZoomConfig {
+  min: number;     // Minimum zoom level
+  max: number;     // Maximum zoom level
+  step: number;    // Zoom step increment/decrement
+  default: number; // Default zoom level
+}
+
+interface ElementColors {
+  video: string;
+  audio: string;
+  image: string;
+  text: string;
+  caption: string;
+  fragment: string;
+}
 ```
 
 ### Individual Panels

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

@@ -1,5 +1,9 @@
 import { Size, TrackElement } from '@twick/timeline';
 
+/**
+ * Props interface for the ElementPanelContainer component.
+ * Defines the configuration and callback functions for element management.
+ */
 interface ElementPanelContainerProps {
     selectedTool: string;
     selectedElement: TrackElement | null;
@@ -8,5 +12,26 @@ interface ElementPanelContainerProps {
     addElement: (element: TrackElement) => void;
     updateElement: (element: TrackElement) => void;
 }
-declare const ElementPanelContainer: ({ selectedTool, setSelectedTool, videoResolution, selectedElement, addElement, updateElement, }: ElementPanelContainerProps) => JSX.Element;
+/**
+ * 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.
+ *
+ * @param props - Component props for element panel configuration
+ * @returns JSX element containing the appropriate element panel or empty state
+ *
+ * @example
+ * ```tsx
+ * <ElementPanelContainer
+ *   selectedTool="text"
+ *   selectedElement={currentElement}
+ *   videoResolution={{ width: 1920, height: 1080 }}
+ *   setSelectedTool={setTool}
+ *   addElement={addToTimeline}
+ *   updateElement={updateInTimeline}
+ * />
+ * ```
+ */
+declare const ElementPanelContainer: ({ selectedTool, videoResolution, selectedElement, addElement, updateElement, }: ElementPanelContainerProps) => JSX.Element;
 export default ElementPanelContainer;

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

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

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

@@ -1,3 +1,3 @@
 import { AudioPanelProps } from '../../types/media-panel';
 
-export declare const AudioPanel: ({ items, searchQuery, onSearchChange, onItemSelect, onFileUpload, acceptFileTypes, }: AudioPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioPanel: ({ items, onItemSelect, onFileUpload, acceptFileTypes, onUrlAdd, }: AudioPanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,3 @@
 import { ImagePanelProps } from '../../types/media-panel';
 
-export declare function ImagePanel({ items, searchQuery, onSearchChange, onItemSelect, onFileUpload, acceptFileTypes, }: ImagePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagePanel({ items, onItemSelect, onFileUpload, acceptFileTypes, onUrlAdd, }: ImagePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,27 +1,46 @@
 /**
  * SubtitlesPanel Component
  *
- * A panel for managing video subtitles in the studio. Provides functionality
- * for creating, editing, and managing subtitle entries with timing and text.
- * Supports both manual entry and automatic generation (TODO).
+ * A presentational panel for managing subtitle entries in the studio.
+ * Renders a list of subtitle 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 (SubtitleEntry):
+ * - `s`: start time (seconds)
+ * - `e`: end time (seconds)
+ * - `t`: subtitle text
+ *
+ * Props:
+ * - `subtitles`: SubtitleEntry[] — ordered list of subtitles
+ * - `addSubtitle()`: add a new subtitle at the end
+ * - `splitSubtitle(index)`: split the subtitle at `index`
+ * - `deleteSubtitle(index)`: remove the subtitle at `index`
+ * - `updateSubtitle(index, subtitle)`: update the subtitle at `index`
  *
  * @component
  * @example
  * ```tsx
- * <SubtitlesPanel />
+ * <SubtitlesPanel
+ *   subtitles={subtitles}
+ *   addSubtitle={addSubtitle}
+ *   splitSubtitle={splitSubtitle}
+ *   deleteSubtitle={deleteSubtitle}
+ *   updateSubtitle={updateSubtitle}
+ * />
  * ```
- *
- * Features:
- * - Add/delete subtitle entries
- * - Set start/end times
- * - Edit subtitle text
- * - Automatic subtitle generation (planned)
- * - Save subtitles to timeline
- *
- * Each subtitle entry includes:
- * - Start time (in seconds)
- * - End time (in seconds)
- * - Subtitle text
- * - Delete and save actions
  */
-export declare function SubtitlesPanel(): import("react/jsx-runtime").JSX.Element;
+interface SubtitleEntry {
+    s: number;
+    e: number;
+    t: string;
+}
+export declare function SubtitlesPanel({ subtitles, addSubtitle, splitSubtitle, deleteSubtitle, updateSubtitle, }: {
+    subtitles: SubtitleEntry[];
+    addSubtitle: () => void;
+    splitSubtitle: (index: number) => void;
+    deleteSubtitle: (index: number) => void;
+    updateSubtitle: (index: number, subtitle: SubtitleEntry) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,3 @@
 import { VideoPanelProps } from '../../types/media-panel';
 
-export declare function VideoPanel({ items, searchQuery, onSearchChange, onItemSelect, onFileUpload, acceptFileTypes, }: VideoPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoPanel({ items, onItemSelect, onFileUpload, acceptFileTypes, onUrlAdd, }: VideoPanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
 export * from './color-input';
 export * from './file-input';
 export * from './media-manager';
+export { default as UrlInput } from './url-input';

package/dist/components/shared/url-input.d.ts

@@ -0,0 +1,6 @@
+type MediaType = "video" | "audio" | "image";
+export default function UrlInput({ type, onSubmit, }: {
+    type: MediaType;
+    onSubmit: (url: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helpers/constant.d.ts

@@ -0,0 +1,52 @@
+export declare const CAPTION_PROPS: {
+    highlight_bg: {
+        font: {
+            size: number;
+            weight: number;
+            family: string;
+        };
+        colors: {
+            text: string;
+            highlight: string;
+            bgColor: string;
+        };
+        lineWidth: number;
+        stroke: string;
+        fontWeight: number;
+        shadowOffset: number[];
+        shadowColor: string;
+    };
+    word_by_word: {
+        font: {
+            size: number;
+            weight: number;
+            family: string;
+        };
+        colors: {
+            text: string;
+            highlight: string;
+            bgColor: string;
+        };
+        lineWidth: number;
+        stroke: string;
+        shadowOffset: number[];
+        shadowColor: string;
+        shadowBlur: number;
+    };
+    word_by_word_with_bg: {
+        font: {
+            size: number;
+            weight: number;
+            family: string;
+        };
+        colors: {
+            text: string;
+            highlight: string;
+            bgColor: string;
+        };
+        lineWidth: number;
+        shadowOffset: number[];
+        shadowColor: string;
+        shadowBlur: number;
+    };
+};

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

@@ -6,6 +6,6 @@ export declare const useStudioManager: () => {
     selectedTool: string;
     setSelectedTool: import('react').Dispatch<import('react').SetStateAction<string>>;
     selectedElement: TrackElement | null;
-    addElement: (element: TrackElement) => void;
+    addElement: (element: TrackElement) => Promise<void>;
     updateElement: (element: TrackElement) => void;
 };

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

@@ -0,0 +1,13 @@
+interface SubtitleEntry {
+    s: number;
+    e: number;
+    t: string;
+}
+export declare const useSubtitlesPanel: () => {
+    subtitles: SubtitleEntry[];
+    addSubtitle: () => void;
+    splitSubtitle: (index: number) => Promise<void>;
+    deleteSubtitle: (index: number) => void;
+    updateSubtitle: (index: number, subtitle: SubtitleEntry) => void;
+};
+export {};