@twick/studio 0.14.6 → 0.14.7

package/README.md

@@ -34,12 +34,32 @@ export default function App() {
         initialData={INITIAL_TIMELINE_DATA}
         contextId={"studio-demo"}
       >
-        <TwickStudio studioConfig={{
-          videoProps: {
-            width: 720,
-            height: 1280,
-          },
-        }}/>
+        <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>
   );
@@ -59,6 +79,24 @@ The main studio component that provides a complete video editing interface.
       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" };
@@ -85,10 +123,39 @@ interface StudioConfig {
     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

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/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/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/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/index.js

@@ -797,6 +797,83 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   __publicField(_MediaManagerSingleton, "instance", null);
   let MediaManagerSingleton = _MediaManagerSingleton;
   const getMediaManager = () => MediaManagerSingleton.getInstance();
+  const EXTENSIONS = {
+    video: ["mp4", "webm", "ogg", "mov", "mkv", "m3u8"],
+    audio: ["mp3", "wav", "ogg", "m4a", "aac", "flac"],
+    image: ["jpg", "jpeg", "png", "gif", "webp", "svg"]
+  };
+  function isValidUrl(url) {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  function matchesType(url, type) {
+    const pathname = (() => {
+      try {
+        return new URL(url).pathname.toLowerCase();
+      } catch {
+        return url.toLowerCase();
+      }
+    })();
+    const ext = pathname.split(".").pop() || "";
+    return EXTENSIONS[type].includes(ext);
+  }
+  function UrlInput({
+    type,
+    onSubmit
+  }) {
+    const [url, setUrl] = react.useState("");
+    const [error, setError] = react.useState("");
+    const tryAdd = async () => {
+      const trimmed = url.trim();
+      if (!trimmed) return;
+      if (!isValidUrl(trimmed)) {
+        setError("Enter a valid URL");
+        return;
+      }
+      if (!matchesType(trimmed, type)) {
+        setError(`URL must be a ${type} (${EXTENSIONS[type].join(", ")})`);
+        return;
+      }
+      setError("");
+      onSubmit(trimmed);
+      setUrl("");
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        void tryAdd();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "url",
+            placeholder: `Paste ${type} URL...`,
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            onKeyDown,
+            className: "input w-full"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "btn-ghost",
+            onClick: () => void tryAdd(),
+            "aria-label": `Add ${type} by URL`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Plus, { size: 16 })
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error", children: error }) : null
+    ] });
+  }
   const initialMediaState = {
     items: [],
     searchQuery: "",
@@ -964,24 +1041,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       acceptFileTypes: config.acceptFileTypes
     };
   };
-  const SearchInput = ({
-    searchQuery,
-    setSearchQuery
-  }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "search-container", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          placeholder: "Search media...",
-          value: searchQuery,
-          onChange: (e) => setSearchQuery(e.target.value),
-          className: "input search-input w-full"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(Search, { className: "search-icon" })
-    ] });
-  };
   const useAudioPreview = () => {
     const [playingAudio, setPlayingAudio] = react.useState(null);
     const audioRef = react.useRef(null);
@@ -1021,22 +1080,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const AudioPanel = ({
     items,
-    searchQuery,
-    onSearchChange,
     onItemSelect,
     onFileUpload,
-    acceptFileTypes
+    acceptFileTypes,
+    onUrlAdd
   }) => {
     const { playingAudio, togglePlayPause } = useAudioPreview();
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Audio Library" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
-        SearchInput,
-        {
-          searchQuery,
-          setSearchQuery: onSearchChange
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(UrlInput, { type: "audio", onSubmit: onUrlAdd }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
@@ -1088,13 +1140,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }) }),
         items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
           /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No audio files found" }),
-          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No audio files found" })
         ] }) })
       ] })
     ] });
   };
   const AudioPanelContainer = (props) => {
+    const { addItem } = useMedia("audio");
+    const mediaManager = getMediaManager();
     const {
       items,
       searchQuery,
@@ -1112,6 +1165,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       },
       props.videoResolution
     );
+    const onUrlAdd = async (url) => {
+      const nameFromUrl = (() => {
+        try {
+          const u = new URL(url);
+          const parts = u.pathname.split("/").filter(Boolean);
+          return decodeURIComponent(parts[parts.length - 1] || url);
+        } catch {
+          return url;
+        }
+      })();
+      const newItem = await mediaManager.addItem({
+        name: nameFromUrl,
+        url,
+        type: "audio",
+        metadata: { source: "url" }
+      });
+      addItem(newItem);
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       AudioPanel,
       {
@@ -1121,27 +1192,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         onItemSelect: handleSelection,
         onFileUpload: handleFileUpload,
         isLoading,
-        acceptFileTypes
+        acceptFileTypes,
+        onUrlAdd
       }
     );
   };
   function ImagePanel({
     items,
-    searchQuery,
-    onSearchChange,
     onItemSelect,
     onFileUpload,
-    acceptFileTypes
+    acceptFileTypes,
+    onUrlAdd
   }) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Image Library" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
-        SearchInput,
-        {
-          searchQuery,
-          setSearchQuery: onSearchChange
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(UrlInput, { type: "image", onSubmit: onUrlAdd }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
@@ -1178,13 +1243,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         )) }),
         items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
           /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No images found" }),
-          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No images found" })
         ] }) })
       ] })
     ] });
   }
   function ImagePanelContainer(props) {
+    const { addItem } = useMedia("image");
+    const mediaManager = getMediaManager();
     const {
       items,
       searchQuery,
@@ -1202,6 +1268,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       },
       props.videoResolution
     );
+    const onUrlAdd = async (url) => {
+      const nameFromUrl = (() => {
+        try {
+          const u = new URL(url);
+          const parts = u.pathname.split("/").filter(Boolean);
+          return decodeURIComponent(parts[parts.length - 1] || url);
+        } catch {
+          return url;
+        }
+      })();
+      const newItem = await mediaManager.addItem({
+        name: nameFromUrl,
+        url,
+        type: "image",
+        metadata: { source: "url" }
+      });
+      addItem(newItem);
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       ImagePanel,
       {
@@ -1211,7 +1295,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         onItemSelect: handleSelection,
         onFileUpload: handleFileUpload,
         isLoading,
-        acceptFileTypes
+        acceptFileTypes,
+        onUrlAdd
       }
     );
   }
@@ -1255,22 +1340,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   function VideoPanel({
     items,
-    searchQuery,
-    onSearchChange,
     onItemSelect,
     onFileUpload,
-    acceptFileTypes
+    acceptFileTypes,
+    onUrlAdd
   }) {
     const { playingVideo, togglePlayPause } = useVideoPreview();
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Video Library" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
-        SearchInput,
-        {
-          searchQuery,
-          setSearchQuery: onSearchChange
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(UrlInput, { type: "video", onSubmit: onUrlAdd }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
@@ -1304,7 +1382,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-duration", children: "0:13" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-actions", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -1339,17 +1416,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         )) }),
         items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
           /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No videos found" }),
-          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No videos found" })
         ] }) })
       ] })
     ] });
   }
   function VideoPanelContainer(props) {
+    const { addItem } = useMedia("video");
+    const mediaManager = getMediaManager();
     const {
       items,
-      searchQuery,
-      setSearchQuery,
       handleSelection,
       handleFileUpload,
       isLoading,
@@ -1363,16 +1439,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       },
       props.videoResolution
     );
+    const onUrlAdd = async (url) => {
+      const nameFromUrl = (() => {
+        try {
+          const u = new URL(url);
+          const parts = u.pathname.split("/").filter(Boolean);
+          return decodeURIComponent(parts[parts.length - 1] || url);
+        } catch {
+          return url;
+        }
+      })();
+      const newItem = await mediaManager.addItem({
+        name: nameFromUrl,
+        url,
+        type: "video",
+        metadata: { source: "url" }
+      });
+      addItem(newItem);
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       VideoPanel,
       {
         items,
-        searchQuery,
-        onSearchChange: setSearchQuery,
         onItemSelect: handleSelection,
         onFileUpload: handleFileUpload,
         isLoading,
-        acceptFileTypes
+        acceptFileTypes,
+        onUrlAdd
       }
     );
   }
@@ -1706,6 +1799,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const textPanelProps = useTextPanel(props);
     return /* @__PURE__ */ jsxRuntime.jsx(TextPanel, { ...textPanelProps });
   }
+  const SearchInput = ({
+    searchQuery,
+    setSearchQuery
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "search-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search media...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "input search-input w-full"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Search, { className: "search-icon" })
+    ] });
+  };
   function IconPanel({
     icons,
     loading,