@twick/studio 0.14.5 → 0.14.6

package/README.md

@@ -1,122 +1,147 @@
-# @twick/studio
-
-The main video editing interface for Twick, providing a professional-grade editing experience in the browser.
-
-## Features
-
-- **Modern Interface**: Clean, intuitive dark theme design
-- **Media Management**: Integrated video, audio, and image library
-- **Text Tools**: Advanced text editing with multiple fonts and styles
-- **Timeline Control**: Precise timeline-based editing
-- **Element Library**: Rich set of editing elements (shapes, icons, etc.)
-- **Audio Support**: Audio track management and editing
-- **Effects**: Visual effects and transitions
-
-## Installation
-
-```bash
-pnpm add @twick/studio
-```
-
-## Quick Start
-
-```tsx
-import { StudioProvider, VideoEditor } from '@twick/studio';
-
-function App() {
-  return (
-    <StudioProvider>
-      <VideoEditor />
-    </StudioProvider>
-  );
-}
-```
-
-## Components
-
-### VideoEditor
-
-The main editor component that combines all editing features.
-
-```tsx
-<VideoEditor
-  config={{
-    canvas: {
-      width: 1920,
-      height: 1080
-    }
-  }}
-/>
-```
-
-### ElementPanel
-
-Panel for managing different types of elements:
-- Videos
-- Images
-- Audio
-- Text
-- Icons
-- Shapes
-- Subtitles
-
-```tsx
-<ElementPanel
-  addElement={handleAddElement}
-/>
-```
-
-### TextPanel
-
-Advanced text editing with features:
-- Font selection
-- Size control
-- Color picker
-- Shadow effects
-- Stroke settings
-
-### IconPanel
-
-Icon library with features:
-- Search functionality
-- Category filtering
-- Color customization
-- Size adjustment
-
-## Development
-
-### Running Locally
-
-```bash
-# Install dependencies
-pnpm install
-
-# Start development server
-pnpm dev
-```
-
-### Building
-
-```bash
-pnpm build
-```
-
-## Browser Support
-
-Requires modern browsers with support for:
-- WebGL
-- Canvas API
-- Web Audio API
-- Modern JavaScript (ES2020+)
-
-## License
-
-This package is licensed under the **Sustainable Use License (SUL) Version 1.0**.
-
-- Free for use in commercial and non-commercial apps
-- Can be modified and self-hosted
-- Cannot be sold, rebranded, or distributed as a standalone SDK
-
-For commercial licensing inquiries, contact: contact@kifferai.com
-
-For full license terms, see the main LICENSE.md file in the project root.
+# @twick/studio
+
+The main video editing interface for Twick, providing a professional-grade editing experience in the browser.
+
+## Features
+
+- **Modern Interface**: Clean, intuitive dark theme design
+- **Media Management**: Integrated video, audio, and image library
+- **Text Tools**: Advanced text editing with multiple fonts and styles
+- **Timeline Control**: Precise timeline-based editing
+- **Element Library**: Rich set of editing elements (shapes, icons, etc.)
+- **Audio Support**: Audio track management and editing
+- **Effects**: Visual effects and transitions
+- **Project Management**: Save, load, and export video projects
+
+## Installation
+
+```bash
+pnpm add  @twick/timeline @twick/live-player @twick/studio
+```
+
+## Quick Start
+
+```tsx
+import { LivePlayerProvider } from "@twick/live-player";
+import { TwickStudio } from "@twick/studio";
+import { TimelineProvider, INITIAL_TIMELINE_DATA } from "@twick/timeline";
+import "@twick/studio/dist/studio.css";
+
+export default function App() {
+  return (
+    <LivePlayerProvider>
+      <TimelineProvider
+        initialData={INITIAL_TIMELINE_DATA}
+        contextId={"studio-demo"}
+      >
+        <TwickStudio studioConfig={{
+          videoProps: {
+            width: 720,
+            height: 1280,
+          },
+        }}/>
+      </TimelineProvider>
+    </LivePlayerProvider>
+  );
+}
+```
+
+## Components
+
+### TwickStudio
+
+The main studio component that provides a complete video editing interface.
+
+```tsx
+<TwickStudio 
+  studioConfig={{
+    videoProps: {
+      width: 1920,
+      height: 1080
+    },
+    saveProject: async (project, fileName) => {
+      // Custom save logic
+      return { status: true, message: "Project saved" };
+    },
+    loadProject: async () => {
+      // Custom load logic
+      return projectData;
+    },
+    exportVideo: async (project, videoSettings) => {
+      // Custom export logic
+      return { status: true, message: "Video exported" };
+    }
+  }}
+/>
+```
+
+### StudioConfig
+
+Configuration options for the studio:
+
+```tsx
+interface StudioConfig {
+  videoProps?: {
+    width: number;
+    height: number;
+  };
+  saveProject?: (project: ProjectJSON, fileName: string) => Promise<Result>;
+  loadProject?: () => Promise<ProjectJSON>;
+  exportVideo?: (project: ProjectJSON, videoSettings: VideoSettings) => Promise<Result>;
+}
+```
+
+### Individual Panels
+
+The studio includes specialized panels for different element types:
+
+- **AudioPanel**: Audio management and library
+- **VideoPanel**: Video management and library  
+- **ImagePanel**: Image management and library
+- **TextPanel**: Text editing with advanced styling
+- **SubtitlesPanel**: Subtitle and caption management
+- **CirclePanel**: Circle shape creation and editing
+- **RectPanel**: Rectangle shape creation and editing
+- **IconPanel**: Icon library with search and customization
+
+### Hooks
+
+- **useStudioManager**: Hook for managing studio state, selected tools, and element manipulation
+
+## Development
+
+### Running Locally
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+```
+
+### Building
+
+```bash
+pnpm build
+```
+
+## Browser Support
+
+Requires modern browsers with support for:
+- WebGL
+- Canvas API
+- Web Audio API
+- Modern JavaScript (ES2020+)
+
+## License
+
+This package is licensed under the **Sustainable Use License (SUL) Version 1.0**.
+
+- Free for use in commercial and non-commercial apps
+- Can be modified and self-hosted
+- Cannot be sold, rebranded, or distributed as a standalone SDK
+
+For commercial licensing inquiries, contact: contact@kifferai.com
+
+For full license terms, see the main LICENSE.md file in the project root.

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, setRadius, setFillColor, setOpacity, setStrokeColor, setLineWidth, handleApplyChanges, }: CirclePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CirclePanel({ radius, fillColor, opacity, strokeColor, lineWidth, operation, setRadius, setFillColor, setOpacity, setStrokeColor, setLineWidth, handleApplyChanges, }: CirclePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 import { IconPanelState, IconPanelActions } from '../../hooks/use-icon-panel';
 
 export type IconPanelProps = IconPanelState & IconPanelActions;
-export declare function IconPanel({ icons, loading, hasMore, totalIcons, searchQuery, handleSearch, handleSelection, handleDownloadIcon, handleLoadMore, }: IconPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconPanel({ icons, loading, totalIcons, searchQuery, handleSearch, handleSelection, handleDownloadIcon, handleLoadMore, }: IconPanelProps): 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, setCornerRadius, setFillColor, setOpacity, setStrokeColor, setLineWidth, handleApplyChanges, }: RectPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function RectPanel({ cornerRadius, fillColor, opacity, strokeColor, lineWidth, operation, setCornerRadius, setFillColor, setOpacity, setStrokeColor, setLineWidth, handleApplyChanges, }: RectPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/props-toolbar.d.ts

@@ -4,4 +4,4 @@ export declare function PropsToolbar({ selectedElement, selectedProp, setSelecte
     selectedElement: TrackElement | null;
     selectedProp: string;
     setSelectedProp: (prop: string) => void;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,9 @@
-declare const FileInput: ({ acceptFileTypes, onFileLoad, buttonText, id, }: {
+declare const FileInput: ({ acceptFileTypes, onFileLoad, buttonText, id, className, icon, }: {
     acceptFileTypes: string[];
     onFileLoad: (content: any) => void;
     buttonText: string;
     id: string;
+    className?: string;
+    icon?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FileInput;

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

@@ -13,6 +13,7 @@ export interface CirclePanelState {
     opacity: number;
     strokeColor: string;
     lineWidth: number;
+    operation: string;
 }
 export interface CirclePanelActions {
     setRadius: (radius: number) => void;

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

@@ -13,6 +13,7 @@ export interface RectPanelState {
     opacity: number;
     strokeColor: string;
     lineWidth: number;
+    operation: string;
 }
 export interface RectPanelActions {
     setCornerRadius: (radius: number) => void;