@twick/studio 0.14.5 → 0.14.7

package/README.md

@@ -1,122 +1,214 @@
-# @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,
+            },
+            // 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>
+  );
+}
+```
+
+## Components
+
+### TwickStudio
+
+The main studio component that provides a complete video editing interface.
+
+```tsx
+<TwickStudio 
+  studioConfig={{
+    videoProps: {
+      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" };
+    },
+    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;
+  };
+  // 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
+
+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/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/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/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/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/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/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/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/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;