@twick/studio 0.14.5

package/README.md

@@ -0,0 +1,122 @@
+# @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.

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

@@ -0,0 +1,3 @@
+import { PanelProps } from '../../types';
+
+export declare const AudioPanelContainer: (props: PanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { PanelProps } from '../../types';
+
+export declare function CirclePanelContainer(props: PanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { Size, TrackElement } from '@twick/timeline';
+
+interface ElementPanelContainerProps {
+    selectedTool: string;
+    selectedElement: TrackElement | null;
+    videoResolution: Size;
+    setSelectedTool: (tool: string) => void;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+}
+declare const ElementPanelContainer: ({ selectedTool, setSelectedTool, videoResolution, selectedElement, addElement, updateElement, }: ElementPanelContainerProps) => JSX.Element;
+export default ElementPanelContainer;

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

@@ -0,0 +1,3 @@
+import { PanelProps } from '../../types';
+
+export declare function IconPanelContainer(props: PanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { PanelProps } from '../../types';
+
+export declare function ImagePanelContainer(props: PanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { TrackElement } from '@twick/timeline';
+
+interface PropertiesPanelContainerProps {
+    selectedProp: string;
+    selectedElement: TrackElement | null;
+    updateElement: (element: TrackElement) => void;
+}
+export declare function PropertiesPanelContainer({ selectedProp, selectedElement, updateElement, }: PropertiesPanelContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import { PanelProps } from '../../types';
+
+export declare function RectPanelContainer(props: PanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { TrackElement } from '@twick/timeline';
+
+interface TextPanelContainerProps {
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+}
+export declare function TextPanelContainer(props: TextPanelContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import { PanelProps } from '../../types';
+
+export declare function VideoPanelContainer(props: PanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/header.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '@twick/timeline';
+
+interface StudioHeaderProps {
+    setVideoResolution: (resolution: Size) => void;
+    onLoadProject: () => void;
+    onSaveProject: () => void;
+    onExportVideo: () => void;
+}
+export declare const StudioHeader: ({ setVideoResolution, onLoadProject, onSaveProject, onExportVideo, }: StudioHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default StudioHeader;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +1,27 @@
+/**
+ * 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).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SubtitlesPanel />
+ * ```
+ *
+ * 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;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

package/dist/components/properties/animation.d.ts

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

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

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

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

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

package/dist/components/properties/subtitlte-prop.d.ts

@@ -0,0 +1,35 @@
+import { PropertiesPanelProps } from '../../types';
+
+export declare const CAPTION_STYLE: {
+    WORD_BG_HIGHLIGHT: string;
+    WORD_BY_WORD: string;
+    WORD_BY_WORD_WITH_BG: string;
+};
+export declare const CAPTION_STYLE_OPTIONS: {
+    [CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
+        label: string;
+        value: string;
+    };
+    [CAPTION_STYLE.WORD_BY_WORD]: {
+        label: string;
+        value: string;
+    };
+    [CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
+        label: string;
+        value: string;
+    };
+};
+export declare const CAPTION_FONT: {
+    size: number;
+    family: string;
+};
+export declare const CAPTION_COLOR: {
+    text: string;
+    highlight: string;
+    bgColor: string;
+};
+interface SubtitlePropPanelProps {
+    setApplyPropsToAllSubtitle: (apply: boolean) => void;
+}
+export declare function SubtitlePropPanel({ selectedElement, updateElement, setApplyPropsToAllSubtitle, }: SubtitlePropPanelProps & PropertiesPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export default SubtitlePropPanel;

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

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

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

@@ -0,0 +1,7 @@
+import { TrackElement } from '@twick/timeline';
+
+export declare function PropsToolbar({ selectedElement, selectedProp, setSelectedProp, }: {
+    selectedElement: TrackElement | null;
+    selectedProp: string;
+    setSelectedProp: (prop: string) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/shared/accordion-item.d.ts

@@ -0,0 +1,9 @@
+interface AccordionItemProps {
+    title: string;
+    icon: React.ReactNode;
+    children: React.ReactNode;
+    isOpen: boolean;
+    onToggle: () => void;
+}
+export declare function AccordionItem({ title, icon, children, isOpen, onToggle }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+declare const ColorInputDialog: ({ onColorSelect, onCancel }: {
+    onColorSelect: (color: string) => void;
+    onCancel: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ColorInputDialog;

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

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

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

@@ -0,0 +1,3 @@
+export * from './color-input';
+export * from './file-input';
+export * from './media-manager';

package/dist/components/shared/media-manager.d.ts

@@ -0,0 +1,3 @@
+import { BrowserMediaManager } from '@twick/video-editor';
+
+export declare const getMediaManager: () => BrowserMediaManager;

package/dist/components/shared/prop-container.d.ts

@@ -0,0 +1,7 @@
+interface PropContainerProps {
+    title: string;
+    icon: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare function PropContainer({ title, icon, children }: PropContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+declare const SearchInput: ({ searchQuery, setSearchQuery, }: {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchInput;

package/dist/components/toolbar.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Toolbar Component
+ *
+ * A vertical toolbar that provides quick access to different editing tools
+ * and media types. Displays icons with labels and optional keyboard shortcuts.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.selectedTool - Currently selected tool ID
+ * @param {(tool: string) => void} props.setSelectedTool - Callback to update selected tool
+ *
+ * @example
+ * ```tsx
+ * <Toolbar
+ *   selectedTool="text"
+ *   setSelectedTool={(tool) => console.log(`Selected ${tool}`)}
+ * />
+ * ```
+ */
+export declare function Toolbar({ selectedTool, setSelectedTool }: {
+    selectedTool: string;
+    setSelectedTool: (tool: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/twick-studio.d.ts

@@ -0,0 +1,5 @@
+import { StudioConfig } from '../types';
+
+export declare function TwickStudio({ studioConfig }: {
+    studioConfig?: StudioConfig;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/context/media-context.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { MediaItem } from '@twick/video-editor';
+
+type MediaType = "video" | "audio" | "image";
+export declare function MediaProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useMedia(type: MediaType): {
+    items: MediaItem[];
+    searchQuery: string;
+    isLoading: boolean;
+    setSearchQuery: (query: string) => void;
+    addItem: (item: MediaItem) => void;
+};
+export {};

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { MediaItem } from '@twick/video-editor';
+
+interface VideoPanelContextType {
+    items: MediaItem[];
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    addItem: (item: MediaItem) => void;
+    isLoading: boolean;
+}
+export declare function VideoPanelProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useVideoPanel(): VideoPanelContextType;
+export {};

package/dist/hooks/use-audio-preview.d.ts

@@ -0,0 +1,11 @@
+import { MediaItem } from '@twick/video-editor';
+
+export interface AudioPreviewState {
+    playingAudio: string | null;
+    audioElement: HTMLAudioElement | null;
+}
+export interface AudioPreviewActions {
+    togglePlayPause: (item: MediaItem) => void;
+    stopPlayback: () => void;
+}
+export declare const useAudioPreview: () => AudioPreviewState & AudioPreviewActions;

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

@@ -0,0 +1,29 @@
+import { TrackElement } from '@twick/timeline';
+
+export declare const DEFAULT_CIRCLE_PROPS: {
+    radius: number;
+    fillColor: string;
+    opacity: number;
+    strokeColor: string;
+    lineWidth: number;
+};
+export interface CirclePanelState {
+    radius: number;
+    fillColor: string;
+    opacity: number;
+    strokeColor: string;
+    lineWidth: number;
+}
+export interface CirclePanelActions {
+    setRadius: (radius: number) => void;
+    setFillColor: (color: string) => void;
+    setOpacity: (opacity: number) => void;
+    setStrokeColor: (color: string) => void;
+    setLineWidth: (width: number) => void;
+    handleApplyChanges: () => void;
+}
+export declare const useCirclePanel: ({ selectedElement, addElement, updateElement, }: {
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+}) => CirclePanelState & CirclePanelActions;

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

@@ -0,0 +1,24 @@
+import { TrackElement } from '@twick/timeline';
+
+export interface Icon {
+    name: string;
+    svg: string;
+}
+export interface IconPanelState {
+    icons: Icon[];
+    loading: boolean;
+    hasMore: boolean;
+    totalIcons: number;
+    searchQuery: string;
+}
+export interface IconPanelActions {
+    handleSearch: (query: string) => void;
+    handleSelection: (icon: Icon) => void;
+    handleDownloadIcon: (icon: Icon) => void;
+    handleLoadMore: () => void;
+}
+export declare const useIconPanel: ({ selectedElement, addElement, updateElement, }: {
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+}) => IconPanelState & IconPanelActions;

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

@@ -0,0 +1,23 @@
+import { TrackElement, Size } from '@twick/timeline';
+import { MediaItem } from '@twick/video-editor';
+
+export interface MediaPanelState {
+    items: MediaItem[];
+    searchQuery: string;
+    isLoading: boolean;
+    acceptFileTypes: string[];
+}
+export interface MediaPanelActions {
+    setSearchQuery: (query: string) => void;
+    handleSelection: (item: MediaItem, forceAdd?: boolean) => void;
+    handleFileUpload: (fileData: {
+        file: File;
+        blobUrl: string;
+    }) => void;
+}
+export type MediaType = "video" | "audio" | "image";
+export declare const useMediaPanel: (type: MediaType, { selectedElement, addElement, updateElement, }: {
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+}, videoResolution: Size) => MediaPanelState & MediaPanelActions;

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

@@ -0,0 +1,29 @@
+import { TrackElement } from '@twick/timeline';
+
+export declare const DEFAULT_RECT_PROPS: {
+    cornerRadius: number;
+    fillColor: string;
+    opacity: number;
+    strokeColor: string;
+    lineWidth: number;
+};
+export interface RectPanelState {
+    cornerRadius: number;
+    fillColor: string;
+    opacity: number;
+    strokeColor: string;
+    lineWidth: number;
+}
+export interface RectPanelActions {
+    setCornerRadius: (radius: number) => void;
+    setFillColor: (color: string) => void;
+    setOpacity: (opacity: number) => void;
+    setStrokeColor: (color: string) => void;
+    setLineWidth: (width: number) => void;
+    handleApplyChanges: () => void;
+}
+export declare const useRectPanel: ({ selectedElement, addElement, updateElement, }: {
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+}) => RectPanelState & RectPanelActions;

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

@@ -0,0 +1,11 @@
+import { TrackElement } from '@twick/timeline';
+
+export declare const useStudioManager: () => {
+    selectedProp: string;
+    setSelectedProp: import('react').Dispatch<import('react').SetStateAction<string>>;
+    selectedTool: string;
+    setSelectedTool: import('react').Dispatch<import('react').SetStateAction<string>>;
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+};

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

@@ -0,0 +1,8 @@
+import { StudioConfig } from '../types';
+
+declare const useStudioOperation: (studioConfig?: StudioConfig) => {
+    onLoadProject: () => Promise<void>;
+    onSaveProject: () => Promise<void>;
+    onExportVideo: () => Promise<void>;
+};
+export default useStudioOperation;

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

@@ -0,0 +1,50 @@
+import { TrackElement, TextAlign } from '@twick/timeline';
+
+export declare const DEFAULT_TEXT_PROPS: {
+    text: string;
+    fontSize: number;
+    fontFamily: string;
+    fontWeight: number;
+    fontStyle: string;
+    textColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    applyShadow: boolean;
+    shadowColor: string;
+    textAlign: TextAlign;
+    shadowOffset: number[];
+    shadowBlur: number;
+    shadowOpacity: number;
+};
+export interface TextPanelState {
+    textContent: string;
+    fontSize: number;
+    selectedFont: string;
+    isBold: boolean;
+    isItalic: boolean;
+    textColor: string;
+    strokeColor: string;
+    applyShadow: boolean;
+    shadowColor: string;
+    strokeWidth: number;
+    fonts: string[];
+    operation: string;
+}
+export interface TextPanelActions {
+    setTextContent: (text: string) => void;
+    setFontSize: (size: number) => void;
+    setSelectedFont: (font: string) => void;
+    setIsBold: (bold: boolean) => void;
+    setIsItalic: (italic: boolean) => void;
+    setTextColor: (color: string) => void;
+    setStrokeColor: (color: string) => void;
+    setApplyShadow: (shadow: boolean) => void;
+    setShadowColor: (color: string) => void;
+    setStrokeWidth: (width: number) => void;
+    handleApplyChanges: () => void;
+}
+export declare const useTextPanel: ({ selectedElement, addElement, updateElement, }: {
+    selectedElement: TrackElement | null;
+    addElement: (element: TrackElement) => void;
+    updateElement: (element: TrackElement) => void;
+}) => TextPanelState & TextPanelActions;