@twick/studio 0.15.3 → 0.15.5

package/dist/index.d.ts

@@ -45,22 +45,99 @@ export * from './helpers/generate-subtitles.service';
 export * from './helpers/constant';
 export * from './types';
 /**
- * Re-export commonly used components from dependencies.
+ * ============================================================================
+ * RE-EXPORTS FROM DEPENDENCY PACKAGES
+ * ============================================================================
  *
- * This allows users to import everything from @twick/studio without needing
- * to install or import from individual @twick packages. All required dependencies
- * are automatically installed when you install @twick/studio.
+ * The @twick/studio package re-exports components, hooks, types, and utilities
+ * from its dependency packages (@twick/video-editor, @twick/timeline, @twick/live-player).
  *
- * Re-exported components:
- * - VideoEditor: Main video editor component from @twick/video-editor
- * - LivePlayerProvider, LivePlayer: Player components from @twick/live-player
- * - TimelineProvider, INITIAL_TIMELINE_DATA: Timeline components from @twick/timeline
+ * This provides a single entry point for developers using the Twick SDK.
+ *
+ * Benefits:
+ * - Install only `@twick/studio` instead of multiple packages
+ * - Import everything from a single package: `import { ... } from '@twick/studio'`
+ * - All dependencies are automatically installed and version-matched
+ * - Simpler package management and fewer version conflicts
+ *
+ * @example
+ * ```jsx
+ * // Before: Multiple package imports
+ * import { TwickStudio } from '@twick/studio';
+ * import { LivePlayer, LivePlayerProvider } from '@twick/live-player';
+ * import { TimelineProvider, TimelineEditor } from '@twick/timeline';
+ * import { VideoEditor } from '@twick/video-editor';
+ *
+ * // After: Single package import
+ * import {
+ *   TwickStudio,
+ *   LivePlayer,
+ *   LivePlayerProvider,
+ *   TimelineProvider,
+ *   TimelineEditor,
+ *   VideoEditor
+ * } from '@twick/studio';
+ * ```
+ */
+/**
+ * Main video editor component and related types
  */
 export { default as VideoEditor } from '@twick/video-editor';
-export type { VideoEditorProps, VideoEditorConfig } from '@twick/video-editor';
-export { LivePlayerProvider, LivePlayer } from '@twick/live-player';
-export { TimelineProvider, INITIAL_TIMELINE_DATA } from '@twick/timeline';
+export type { VideoEditorProps, VideoEditorConfig, TimelineTickConfig, TimelineZoomConfig, PlayerControlsProps } from '@twick/video-editor';
+/**
+ * Video editor hooks for custom implementations
+ */
+export { usePlayerControl, useEditorManager, useTimelineControl } from '@twick/video-editor';
+/**
+ * Video editor components
+ */
+export { PlayerControls, TimelineManager } from '@twick/video-editor';
+/**
+ * Media management utilities
+ */
+export { BrowserMediaManager, BaseMediaManager } from '@twick/video-editor';
+/**
+ * Animation and text effect constants
+ */
+export { ANIMATIONS, TEXT_EFFECTS } from '@twick/video-editor';
+/**
+ * Editor utility functions and types
+ */
+export { animationGifs, getAnimationGif, setElementColors } from '@twick/video-editor';
+export type { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors } from '@twick/video-editor';
+/**
+ * Live player components and context
+ */
+export { LivePlayerProvider, LivePlayer, useLivePlayerContext } from '@twick/live-player';
+/**
+ * Player constants and utilities
+ */
+export { PLAYER_STATE, getBaseProject, generateId } from '@twick/live-player';
+/**
+ * Timeline provider and editor
+ */
+export { TimelineProvider, TimelineEditor, INITIAL_TIMELINE_DATA } from '@twick/timeline';
 export type { TimelineProviderProps } from '@twick/timeline';
+/**
+ * Timeline element classes
+ */
+export { Track, TrackElement, TextElement, VideoElement, ImageElement, AudioElement, CircleElement, RectElement, IconElement, CaptionElement, ElementAnimation, ElementFrameEffect, ElementTextEffect } from '@twick/timeline';
+/**
+ * Timeline visitor pattern classes for element manipulation
+ */
+export { ElementSerializer, ElementDeserializer, ElementValidator, ElementAdder, ElementRemover, ElementUpdater, ElementSplitter, ElementCloner } from '@twick/timeline';
+/**
+ * Timeline utilities and helpers
+ */
+export { generateShortUuid, getTotalDuration, getCurrentElements, isTrackId, isElementId, TIMELINE_ELEMENT_TYPE } from '@twick/timeline';
+/**
+ * Timeline types
+ */
+export type { ProjectJSON, Size, Position, Frame, ElementJSON, TrackJSON, VideoProps, AudioProps, ImageProps, TextProps, RectProps, CircleProps, IconProps, TextEffect as TimelineTextEffect, FrameEffect, FrameEffectProps, Animation as TimelineAnimation, ObjectFit, TextAlign, BaseMediaProps } from '@twick/timeline';
+/**
+ * Timeline constants
+ */
+export { CAPTION_STYLE, CAPTION_STYLE_OPTIONS, CAPTION_FONT, CAPTION_COLOR, WORDS_PER_PHRASE, TIMELINE_ACTION, PROCESS_STATE } from '@twick/timeline';
 /**
  * Default export: TwickStudio (full editor component)
  */

package/dist/index.js

@@ -2833,11 +2833,25 @@ function PropsToolbar({
   }) });
 }
 function ElementProps({ selectedElement, updateElement }) {
-  const elementProps = (selectedElement == null ? void 0 : selectedElement.getProps()) || {};
-  const { x, y, opacity, rotation } = elementProps;
-  const handleUpdateElement = (props) => {
+  const opacity = (selectedElement == null ? void 0 : selectedElement.getOpacity()) || 1;
+  const rotation = (selectedElement == null ? void 0 : selectedElement.getRotation()) || 0;
+  const position = (selectedElement == null ? void 0 : selectedElement.getPosition()) || { x: 0, y: 0 };
+  const handleRotationChange = (rotation2) => {
     if (selectedElement) {
-      updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
+      selectedElement.setRotation(rotation2);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    }
+  };
+  const handleOpacityChange = (opacity2) => {
+    if (selectedElement) {
+      selectedElement.setOpacity(opacity2);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    }
+  };
+  const handlePositionChange = (props) => {
+    if (selectedElement) {
+      selectedElement.setPosition({ x: props.x ?? 0, y: props.y ?? 0 });
+      updateElement == null ? void 0 : updateElement(selectedElement);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
@@ -2851,8 +2865,8 @@ function ElementProps({ selectedElement, updateElement }) {
             "input",
             {
               type: "number",
-              value: x ?? 0,
-              onChange: (e) => handleUpdateElement({ x: Number(e.target.value) }),
+              value: position.x ?? 0,
+              onChange: (e) => handlePositionChange({ x: Number(e.target.value) }),
               className: "input-dark"
             }
           )
@@ -2863,8 +2877,8 @@ function ElementProps({ selectedElement, updateElement }) {
             "input",
             {
               type: "number",
-              value: y ?? 0,
-              onChange: (e) => handleUpdateElement({ y: Number(e.target.value) }),
+              value: position.y ?? 0,
+              onChange: (e) => handlePositionChange({ y: Number(e.target.value) }),
               className: "input-dark"
             }
           )
@@ -2881,7 +2895,7 @@ function ElementProps({ selectedElement, updateElement }) {
             min: "0",
             max: "100",
             value: (opacity ?? 1) * 100,
-            onChange: (e) => handleUpdateElement({ opacity: Number(e.target.value) / 100 }),
+            onChange: (e) => handleOpacityChange(Number(e.target.value) / 100),
             className: "slider-purple"
           }
         ),
@@ -2901,7 +2915,7 @@ function ElementProps({ selectedElement, updateElement }) {
             min: "0",
             max: "360",
             value: rotation ?? 0,
-            onChange: (e) => handleUpdateElement({ rotation: Number(e.target.value) }),
+            onChange: (e) => handleRotationChange(Number(e.target.value)),
             className: "slider-purple"
           }
         ),
@@ -3747,15 +3761,203 @@ function TwickStudio({ studioConfig }) {
     ] })
   ] }) });
 }
+Object.defineProperty(exports, "AudioElement", {
+  enumerable: true,
+  get: () => timeline.AudioElement
+});
+Object.defineProperty(exports, "CAPTION_COLOR", {
+  enumerable: true,
+  get: () => timeline.CAPTION_COLOR
+});
+Object.defineProperty(exports, "CAPTION_FONT", {
+  enumerable: true,
+  get: () => timeline.CAPTION_FONT
+});
+Object.defineProperty(exports, "CAPTION_STYLE", {
+  enumerable: true,
+  get: () => timeline.CAPTION_STYLE
+});
+Object.defineProperty(exports, "CAPTION_STYLE_OPTIONS", {
+  enumerable: true,
+  get: () => timeline.CAPTION_STYLE_OPTIONS
+});
+Object.defineProperty(exports, "CaptionElement", {
+  enumerable: true,
+  get: () => timeline.CaptionElement
+});
+Object.defineProperty(exports, "CircleElement", {
+  enumerable: true,
+  get: () => timeline.CircleElement
+});
+Object.defineProperty(exports, "ElementAdder", {
+  enumerable: true,
+  get: () => timeline.ElementAdder
+});
+Object.defineProperty(exports, "ElementAnimation", {
+  enumerable: true,
+  get: () => timeline.ElementAnimation
+});
+Object.defineProperty(exports, "ElementCloner", {
+  enumerable: true,
+  get: () => timeline.ElementCloner
+});
+Object.defineProperty(exports, "ElementDeserializer", {
+  enumerable: true,
+  get: () => timeline.ElementDeserializer
+});
+Object.defineProperty(exports, "ElementFrameEffect", {
+  enumerable: true,
+  get: () => timeline.ElementFrameEffect
+});
+Object.defineProperty(exports, "ElementRemover", {
+  enumerable: true,
+  get: () => timeline.ElementRemover
+});
+Object.defineProperty(exports, "ElementSerializer", {
+  enumerable: true,
+  get: () => timeline.ElementSerializer
+});
+Object.defineProperty(exports, "ElementSplitter", {
+  enumerable: true,
+  get: () => timeline.ElementSplitter
+});
+Object.defineProperty(exports, "ElementTextEffect", {
+  enumerable: true,
+  get: () => timeline.ElementTextEffect
+});
+Object.defineProperty(exports, "ElementUpdater", {
+  enumerable: true,
+  get: () => timeline.ElementUpdater
+});
+Object.defineProperty(exports, "ElementValidator", {
+  enumerable: true,
+  get: () => timeline.ElementValidator
+});
 Object.defineProperty(exports, "INITIAL_TIMELINE_DATA", {
   enumerable: true,
   get: () => timeline.INITIAL_TIMELINE_DATA
 });
+Object.defineProperty(exports, "IconElement", {
+  enumerable: true,
+  get: () => timeline.IconElement
+});
+Object.defineProperty(exports, "ImageElement", {
+  enumerable: true,
+  get: () => timeline.ImageElement
+});
+Object.defineProperty(exports, "PROCESS_STATE", {
+  enumerable: true,
+  get: () => timeline.PROCESS_STATE
+});
+Object.defineProperty(exports, "RectElement", {
+  enumerable: true,
+  get: () => timeline.RectElement
+});
+Object.defineProperty(exports, "TIMELINE_ACTION", {
+  enumerable: true,
+  get: () => timeline.TIMELINE_ACTION
+});
+Object.defineProperty(exports, "TIMELINE_ELEMENT_TYPE", {
+  enumerable: true,
+  get: () => timeline.TIMELINE_ELEMENT_TYPE
+});
+Object.defineProperty(exports, "TextElement", {
+  enumerable: true,
+  get: () => timeline.TextElement
+});
+Object.defineProperty(exports, "TimelineEditor", {
+  enumerable: true,
+  get: () => timeline.TimelineEditor
+});
 Object.defineProperty(exports, "TimelineProvider", {
   enumerable: true,
   get: () => timeline.TimelineProvider
 });
+Object.defineProperty(exports, "Track", {
+  enumerable: true,
+  get: () => timeline.Track
+});
+Object.defineProperty(exports, "TrackElement", {
+  enumerable: true,
+  get: () => timeline.TrackElement
+});
+Object.defineProperty(exports, "VideoElement", {
+  enumerable: true,
+  get: () => timeline.VideoElement
+});
+Object.defineProperty(exports, "WORDS_PER_PHRASE", {
+  enumerable: true,
+  get: () => timeline.WORDS_PER_PHRASE
+});
+Object.defineProperty(exports, "generateShortUuid", {
+  enumerable: true,
+  get: () => timeline.generateShortUuid
+});
+Object.defineProperty(exports, "getCurrentElements", {
+  enumerable: true,
+  get: () => timeline.getCurrentElements
+});
+Object.defineProperty(exports, "getTotalDuration", {
+  enumerable: true,
+  get: () => timeline.getTotalDuration
+});
+Object.defineProperty(exports, "isElementId", {
+  enumerable: true,
+  get: () => timeline.isElementId
+});
+Object.defineProperty(exports, "isTrackId", {
+  enumerable: true,
+  get: () => timeline.isTrackId
+});
+Object.defineProperty(exports, "ANIMATIONS", {
+  enumerable: true,
+  get: () => VideoEditor.ANIMATIONS
+});
+Object.defineProperty(exports, "BaseMediaManager", {
+  enumerable: true,
+  get: () => VideoEditor.BaseMediaManager
+});
+Object.defineProperty(exports, "BrowserMediaManager", {
+  enumerable: true,
+  get: () => VideoEditor.BrowserMediaManager
+});
+Object.defineProperty(exports, "PlayerControls", {
+  enumerable: true,
+  get: () => VideoEditor.PlayerControls
+});
+Object.defineProperty(exports, "TEXT_EFFECTS", {
+  enumerable: true,
+  get: () => VideoEditor.TEXT_EFFECTS
+});
+Object.defineProperty(exports, "TimelineManager", {
+  enumerable: true,
+  get: () => VideoEditor.TimelineManager
+});
 exports.VideoEditor = VideoEditor;
+Object.defineProperty(exports, "animationGifs", {
+  enumerable: true,
+  get: () => VideoEditor.animationGifs
+});
+Object.defineProperty(exports, "getAnimationGif", {
+  enumerable: true,
+  get: () => VideoEditor.getAnimationGif
+});
+Object.defineProperty(exports, "setElementColors", {
+  enumerable: true,
+  get: () => VideoEditor.setElementColors
+});
+Object.defineProperty(exports, "useEditorManager", {
+  enumerable: true,
+  get: () => VideoEditor.useEditorManager
+});
+Object.defineProperty(exports, "usePlayerControl", {
+  enumerable: true,
+  get: () => VideoEditor.usePlayerControl
+});
+Object.defineProperty(exports, "useTimelineControl", {
+  enumerable: true,
+  get: () => VideoEditor.useTimelineControl
+});
 Object.defineProperty(exports, "LivePlayer", {
   enumerable: true,
   get: () => livePlayer.LivePlayer
@@ -3764,6 +3966,22 @@ Object.defineProperty(exports, "LivePlayerProvider", {
   enumerable: true,
   get: () => livePlayer.LivePlayerProvider
 });
+Object.defineProperty(exports, "PLAYER_STATE", {
+  enumerable: true,
+  get: () => livePlayer.PLAYER_STATE
+});
+Object.defineProperty(exports, "generateId", {
+  enumerable: true,
+  get: () => livePlayer.generateId
+});
+Object.defineProperty(exports, "getBaseProject", {
+  enumerable: true,
+  get: () => livePlayer.getBaseProject
+});
+Object.defineProperty(exports, "useLivePlayerContext", {
+  enumerable: true,
+  get: () => livePlayer.useLivePlayerContext
+});
 exports.AudioPanel = AudioPanel;
 exports.CAPTION_PROPS = CAPTION_PROPS;
 exports.CirclePanel = CirclePanel;