@twick/studio 0.14.5

package/dist/studio.css

@@ -0,0 +1,284 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  * {
+    @apply border-gray-600;
+  }
+  
+  body {
+    @apply bg-neutral-900 text-gray-100 font-sans;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  
+  html {
+    @apply scroll-smooth;
+  }
+}
+@layer components {
+  /* Custom scrollbar */
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.purple.600') theme('colors.gray.700');
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-track {
+    @apply bg-neutral-700;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-purple-600 rounded-full;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-purple-500;
+  }
+  
+  /* Glass morphism effect */
+  .glass {
+    @apply bg-neutral-800/70 backdrop-blur-md border border-gray-600/50 shadow-lg;
+  }
+  
+  /* Button styles */
+  .btn {
+    @apply inline-flex items-center justify-center rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  
+  .btn-primary {
+    @apply bg-gradient-to-r from-purple-600 to-purple-700 text-white hover:from-purple-700 hover:to-purple-800 focus:ring-purple-500 shadow-lg shadow-purple-500/25 hover:shadow-xl hover:shadow-purple-500/30;
+  }
+  
+  .btn-secondary {
+    @apply bg-gradient-to-r from-purple-200 to-purple-300 text-gray-600 hover:from-purple-200 hover:to-purple-300 focus:ring-purple-100 shadow-lg shadow-purple-100/25 hover:shadow-xl hover:shadow-purple-100/30;
+  }
+  
+  .btn-ghost {
+    @apply text-gray-300 hover:text-white hover:bg-neutral-700/50 focus:ring-gray-500;
+  }
+  
+  .btn-outline {
+    @apply border border-purple-500 text-purple-400 hover:bg-purple-500 hover:text-white focus:ring-purple-500;
+  }
+  
+  .btn-danger {
+    @apply bg-gradient-to-r from-red-600 to-red-700 text-white hover:from-red-700 hover:to-red-800 focus:ring-red-500;
+  }
+  
+  /* Input styles */
+  .input {
+    @apply w-full rounded-lg border border-gray-600 bg-neutral-700/80 px-3 py-2 text-sm text-gray-100 placeholder-gray-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm shadow-sm;
+  }
+  
+  /* Card styles */
+  .card {
+    @apply rounded-xl border border-gray-600/50 bg-neutral-800/60 backdrop-blur-md shadow-lg;
+  }
+  
+  /* Panel styles */
+  .panel {
+    @apply card p-4;
+  }
+  
+  /* Sidebar styles */
+  .sidebar {
+    @apply w-16 bg-neutral-800/80 border-r border-gray-600/50 flex flex-col backdrop-blur-md shadow-lg;
+  }
+  
+  /* Timeline track styles */
+  .timeline-track {
+    @apply relative h-12 bg-neutral-700/50 border border-gray-600/50 rounded-lg overflow-hidden backdrop-blur-sm shadow-md;
+  }
+  
+  .timeline-element {
+    @apply absolute top-1 bottom-1 rounded-md border border-purple-500/50 bg-gradient-to-r from-purple-600/30 to-purple-600/30 hover:from-purple-600/50 hover:to-purple-600/50 transition-all duration-200 cursor-pointer shadow-lg;
+  }
+  
+  /* Canvas styles */
+  .canvas-container {
+    @apply relative overflow-hidden shadow-xl;
+  }
+  
+  /* Toolbar styles */
+  .toolbar {
+    @apply flex items-center gap-2 p-3 bg-neutral-800/80 backdrop-blur-md border-b border-gray-600/50 shadow-md;
+  }
+  
+  /* Header styles */
+  .header {
+    @apply h-14 bg-neutral-800/90 border-b border-gray-600/50 flex items-center justify-between px-4 backdrop-blur-md shadow-lg;
+  }
+  
+  /* Media library styles */
+  .media-item {
+    @apply transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/20;
+  }
+  
+  /* Progress bar styling */
+  .progress-bar {
+    @apply transition-all duration-150 ease-out bg-gradient-to-r from-purple-500 to-purple-500;
+  }
+  
+  /* Button hover effects */
+  .btn-hover {
+    @apply transform hover:scale-105 active:scale-95 transition-transform duration-200;
+  }
+  
+  /* Accent colors */
+  .accent-purple {
+    @apply text-purple-400;
+  }
+  
+  .accent-blue {
+    @apply text-purple-400;
+  }
+  
+  /* Gradient text */
+  .text-gradient-purple {
+    @apply bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent;
+  }
+  
+  .text-gradient-blue {
+    @apply bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent;
+  }
+  
+  /* Glow effects */
+  .glow-purple {
+    box-shadow: 0 0 20px theme('colors.purple.500/20');
+  }
+  
+  .glow-blue {
+    box-shadow: 0 0 20px theme('colors.blue.500/20');
+  }
+  
+  /* Form elements */
+  .aspect-ratio-btn {
+    @apply px-3 py-1.5 rounded-lg border border-gray-600 text-gray-300 hover:border-purple-500 hover:text-purple-400 transition-all duration-200 text-sm;
+  }
+  
+  .aspect-ratio-btn.active {
+    @apply border-purple-500 bg-purple-500/20 text-purple-400 shadow-md shadow-purple-500/25;
+  }
+  
+  .slider-thumb {
+    @apply appearance-none bg-transparent cursor-pointer;
+  }
+  
+  .slider-thumb::-webkit-slider-thumb {
+    @apply appearance-none w-3 h-3 bg-gradient-to-r from-purple-500 to-purple-500 rounded-full shadow-lg cursor-pointer hover:shadow-xl hover:shadow-purple-500/30 transition-all duration-200;
+  }
+  
+  .slider-thumb::-moz-range-thumb {
+    @apply appearance-none w-3 h-3 bg-gradient-to-r from-purple-500 to-purple-500 rounded-full shadow-lg cursor-pointer border-0 hover:shadow-xl hover:shadow-purple-500/30 transition-all duration-200;
+  }
+  
+  .slider-thumb::-webkit-slider-track {
+    @apply w-full h-1.5 bg-neutral-600/50 rounded-full;
+  }
+  
+  .slider-thumb::-moz-range-track {
+    @apply w-full h-1.5 bg-neutral-600/50 rounded-full border-0;
+  }
+  
+  /* Form control buttons */
+  .form-btn {
+    @apply w-8 h-8 bg-gradient-to-br from-gray-700 to-gray-800 hover:from-gray-600 hover:to-gray-700 rounded-lg flex items-center justify-center text-gray-300 hover:text-white transition-all duration-200 shadow-sm hover:shadow-md hover:shadow-purple-500/20;
+  }
+  
+  .form-btn.active {
+    @apply bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-md shadow-purple-500/25;
+  }
+  
+  /* Toolbar buttons */
+  .toolbar-btn {
+    @apply w-12 max-h-12 rounded-lg flex flex-col items-center justify-center transition-all duration-200 shadow-sm hover:shadow-md;
+  }
+  
+  .toolbar-btn.active {
+    @apply bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/25;
+  }
+  
+  .toolbar-btn:not(.active) {
+    @apply text-gray-400 hover:text-white hover:bg-neutral-700/50;
+  }
+
+   /* Props Toolbar buttons */
+   .props-toolbar-btn {
+    @apply w-14 max-h-14 rounded-lg flex flex-col items-center justify-center transition-all duration-200 shadow-sm hover:shadow-md;
+  }
+  
+  .props-toolbar-btn.active {
+    @apply bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/25;
+  }
+  
+  .props-toolbar-btn:not(.active) {
+    @apply text-gray-400 hover:text-white hover:bg-neutral-700/50;
+  }
+}
+@layer utilities {
+  /* Text gradients */
+  .text-gradient {
+    @apply bg-gradient-to-r from-purple-400 to-purple-400 bg-clip-text text-transparent;
+  }
+  
+  /* Glow effects */
+  .glow-primary {
+    box-shadow: 0 0 20px theme('colors.purple.500/20');
+  }
+  
+  .glow-accent {
+    box-shadow: 0 0 20px theme('colors.blue.500/20');
+  }
+  
+  /* Grid layouts */
+  .grid-auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  }
+  
+  .grid-auto-fill {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  }
+  
+  /* Backdrop blur utilities */
+  .backdrop-blur-sm {
+    -webkit-backdrop-filter: blur(4px);
+            backdrop-filter: blur(4px);
+  }
+  
+  .backdrop-blur-md {
+    -webkit-backdrop-filter: blur(12px);
+            backdrop-filter: blur(12px);
+  }
+  
+  .backdrop-blur-lg {
+    -webkit-backdrop-filter: blur(16px);
+            backdrop-filter: blur(16px);
+  }
+}
+/* Video player customizations */
+video::-webkit-media-controls,
+video::-webkit-media-controls-panel {
+  display: none;
+}
+.main-container {
+  max-width: calc(100% - 634px);
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #374151;
+}
+::-webkit-scrollbar-thumb {
+  background: #9333ea;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #a855f7;
+}

package/dist/styles/input-styles.d.ts

@@ -0,0 +1,39 @@
+export declare const inputStyles: {
+    container: string;
+    label: {
+        base: string;
+        small: string;
+    };
+    input: {
+        base: string;
+        small: string;
+    };
+    range: {
+        base: string;
+        gradient: string;
+        container: string;
+        value: string;
+    };
+    color: {
+        container: string;
+        picker: string;
+        preview: string;
+    };
+    toggle: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    radio: {
+        base: string;
+        label: string;
+        container: string;
+    };
+    button: {
+        primary: string;
+    };
+    panel: {
+        container: string;
+        title: string;
+    };
+};

package/dist/twick.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 80">
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Inter, Arial, Helvetica, sans-serif" font-weight="bold" font-size="56" fill="#8B5FBF">TWICK</text>
+</svg>

package/dist/types/index.d.ts

@@ -0,0 +1,134 @@
+import { ProjectJSON, Size, TrackElement } from '@twick/timeline';
+import { VideoEditorConfig } from '@twick/video-editor';
+
+export interface MediaItem {
+    id: string;
+    name: string;
+    type: 'video' | 'image' | 'audio';
+    url: string;
+    thumbnail?: string;
+    duration?: number;
+    size: number;
+    width?: number;
+    height?: number;
+    createdAt: Date;
+}
+export interface VideoSettings {
+    outFile: string;
+    fps: number;
+    resolution: {
+        width: number;
+        height: number;
+    };
+}
+export interface Result {
+    status: boolean;
+    message: string;
+    result?: any;
+}
+export interface StudioConfig extends VideoEditorConfig {
+    saveProject?: (project: ProjectJSON, fileName: string) => Promise<Result>;
+    loadProject?: () => Promise<ProjectJSON>;
+    exportVideo?: (project: ProjectJSON, videoSettings: VideoSettings) => Promise<Result>;
+}
+export interface PanelProps {
+    selectedElement?: TrackElement | null;
+    videoResolution: Size;
+    addElement?: (item: TrackElement) => void;
+    updateElement?: (item: TrackElement) => void;
+}
+export interface PropertiesPanelProps {
+    selectedElement?: TrackElement | null;
+    updateElement?: (element: TrackElement) => void;
+}
+export interface TextElement {
+    id: string;
+    text: string;
+    font: string;
+    fontSize: number;
+    fontWeight: 'normal' | 'bold';
+    fontStyle: 'normal' | 'italic';
+    textDecoration: 'none' | 'underline' | 'line-through';
+    color: string;
+    backgroundColor?: string;
+    alignment: 'left' | 'center' | 'right' | 'justify';
+    verticalAlignment: 'top' | 'middle' | 'bottom';
+    position: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    rotation: number;
+    borderRadius: {
+        topLeft: number;
+        topRight: number;
+        bottomLeft: number;
+        bottomRight: number;
+    };
+    border?: {
+        width: number;
+        color: string;
+        style: 'solid' | 'dashed' | 'dotted';
+    };
+    shadow?: {
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+    };
+}
+export interface TimelineElement {
+    id: string;
+    type: 'video' | 'image' | 'audio' | 'text';
+    startTime: number;
+    endTime: number;
+    mediaId?: string;
+    textElement?: TextElement;
+    volume: number;
+    muted: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    rotation: number;
+    opacity: number;
+    effects: string[];
+}
+export interface Track {
+    id: string;
+    name: string;
+    type: 'video' | 'audio' | 'text' | 'subtitle';
+    elements: TimelineElement[];
+    locked: boolean;
+    visible: boolean;
+    volume: number;
+    muted: boolean;
+    height: number;
+    color: string;
+}
+export interface Timeline {
+    id: string;
+    name: string;
+    tracks: Track[];
+    duration: number;
+    fps: number;
+    width: number;
+    height: number;
+    backgroundColor: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export interface ToolCategory {
+    id: string;
+    name: string;
+    icon: string;
+    description: string;
+    shortcut?: string;
+}

package/dist/types/media-panel.d.ts

@@ -0,0 +1,21 @@
+import { MediaItem } from '@twick/video-editor';
+
+export type MediaType = "video" | "audio" | "image";
+export interface MediaPanelBaseProps {
+    items: MediaItem[];
+    searchQuery: string;
+    isLoading: boolean;
+    acceptFileTypes: string[];
+    onSearchChange: (query: string) => void;
+    onItemSelect: (item: MediaItem, forceAdd?: boolean) => void;
+    onFileUpload: (fileData: {
+        file: File;
+        blobUrl: string;
+    }) => void;
+}
+export interface VideoPanelProps extends MediaPanelBaseProps {
+}
+export interface AudioPanelProps extends MediaPanelBaseProps {
+}
+export interface ImagePanelProps extends MediaPanelBaseProps {
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@twick/studio",
+  "version": "0.14.5",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "license": "SEE LICENSE IN LICENSE.md",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src/",
+    "clean": "rimraf .turbo node_modules dist",
+    "docs": "typedoc --options ./typedoc.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@twick/media-utils": "^0.14.5",
+    "@twick/timeline": "^0.14.5",
+    "@twick/video-editor": "^0.14.5"
+  },
+  "dependencies": {
+    "lucide-react": "^0.511.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@twick/timeline": "^0.14.5",
+    "@twick/video-editor": "^0.14.5",
+    "rimraf": "^5.0.5",
+    "typedoc": "^0.25.8",
+    "typedoc-plugin-markdown": "^3.17.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.4.20",
+    "vite-plugin-dts": "^3.7.3",
+    "postcss": "^8.4.35",
+    "autoprefixer": "^10.4.17"
+  }
+}