diff --git a/packages/react/src/Kitchensink.tsx b/packages/react/src/Kitchensink.tsx
index b739a3f5a..003da8126 100644
--- a/packages/react/src/Kitchensink.tsx
+++ b/packages/react/src/Kitchensink.tsx
@@ -4,7 +4,7 @@ import { FancyMultiSelect } from "./shadcn/ui/fancy-multiselect";
 import { Switch } from "./shadcn/ui/switch";
 import { Label } from "./shadcn/ui/label";
 import { Checkbox } from "./shadcn/ui/checkbox";
-import DemoTimeline from "./components/tldex/new-editor/components/Timeline/DemoTimeline";
+// import DemoTimeline from "./components/tldex/new-editor/components/Timeline/DemoTimeline";
 
 export function Kitchensink() {
   const [count, setCount] = useState(0);
@@ -116,7 +116,7 @@ export function Kitchensink() {
 
       {/* <WaveformTestPage /> */}
 
-      <DemoTimeline />
+      {/* <DemoTimeline /> */}
     </div>
   );
 }
diff --git a/packages/react/src/components/tldex/new-editor/components/unused/RndSubtitle.tsx b/packages/react/src/components/tldex/new-editor/components/unused/RndSubtitle.tsx
index 2eae311f1..042d8c388 100644
--- a/packages/react/src/components/tldex/new-editor/components/unused/RndSubtitle.tsx
+++ b/packages/react/src/components/tldex/new-editor/components/unused/RndSubtitle.tsx
@@ -1,106 +1,106 @@
-import React from "react";
-import { Rnd } from "react-rnd";
-import { useSpecificSubtitle } from "../../hooks/subtitles";
+// import React from "react";
+// import { Rnd } from "react-rnd";
+// import { useSpecificSubtitle } from "../../hooks/subtitles";
 
-/**
- * Properties for the RndSubtitle component.
- *
- * @property {string} subtitleId Unique identifier for the subtitle.
- * @property {number} startTime Start time of the timeline range for the subtitle.
- * @property {number} endTime End time of the timeline range for the subtitle.
- * @property {number} containerWidth Width of the container in which the subtitle is displayed.
- */
-interface RndSubtitleProps {
-  subtitleId: string;
-  startTime: number;
-  endTime: number;
-  containerWidth: number;
-}
-/**
- * RndSubtitle is a resizable and draggable subtitle component for editing video subtitles.
- * It utilizes the react-rnd library to allow users to adjust the position
- * and duration of a subtitle by dragging or resizing the subtitle box.
- *
- * Props:
- * - subtitleId: Unique identifier for the subtitle.
- * - startTime: Start time of the timeline range for the subtitle.
- * - endTime: End time of the timeline range for the subtitle.
- * - containerWidth: Width of the container in which the subtitle is displayed.
- *
- * The component provides internal functions to convert time to position and vice versa,
- * and handlers to update subtitle start time and duration upon dragging or resizing.
- */
-export const RndSubtitle: React.FC<RndSubtitleProps> = ({
-  subtitleId,
-  startTime,
-  endTime,
-  containerWidth,
-}) => {
-  const [subtitle, edit] = useSpecificSubtitle(subtitleId);
+// /**
+//  * Properties for the RndSubtitle component.
+//  *
+//  * @property {string} subtitleId Unique identifier for the subtitle.
+//  * @property {number} startTime Start time of the timeline range for the subtitle.
+//  * @property {number} endTime End time of the timeline range for the subtitle.
+//  * @property {number} containerWidth Width of the container in which the subtitle is displayed.
+//  */
+// interface RndSubtitleProps {
+//   subtitleId: string;
+//   startTime: number;
+//   endTime: number;
+//   containerWidth: number;
+// }
+// /**
+//  * RndSubtitle is a resizable and draggable subtitle component for editing video subtitles.
+//  * It utilizes the react-rnd library to allow users to adjust the position
+//  * and duration of a subtitle by dragging or resizing the subtitle box.
+//  *
+//  * Props:
+//  * - subtitleId: Unique identifier for the subtitle.
+//  * - startTime: Start time of the timeline range for the subtitle.
+//  * - endTime: End time of the timeline range for the subtitle.
+//  * - containerWidth: Width of the container in which the subtitle is displayed.
+//  *
+//  * The component provides internal functions to convert time to position and vice versa,
+//  * and handlers to update subtitle start time and duration upon dragging or resizing.
+//  */
+// export const RndSubtitle: React.FC<RndSubtitleProps> = ({
+//   subtitleId,
+//   startTime,
+//   endTime,
+//   containerWidth,
+// }) => {
+//   const [subtitle, edit] = useSpecificSubtitle(subtitleId);
 
-  const timeToPosition = (time: number) => {
-    const timeRange = endTime - startTime;
-    const position = ((time - startTime) / timeRange) * containerWidth;
-    return position;
-  };
+//   const timeToPosition = (time: number) => {
+//     const timeRange = endTime - startTime;
+//     const position = ((time - startTime) / timeRange) * containerWidth;
+//     return position;
+//   };
 
-  const positionToTime = (position: number) => {
-    const timeRange = endTime - startTime;
-    const time = (position / containerWidth) * timeRange + startTime;
-    return Math.max(startTime, Math.min(time, endTime));
-  };
+//   const positionToTime = (position: number) => {
+//     const timeRange = endTime - startTime;
+//     const time = (position / containerWidth) * timeRange + startTime;
+//     return Math.max(startTime, Math.min(time, endTime));
+//   };
 
-  const handleDrag = (_: unknown, d: { x: number; y: number }) => {
-    const newStartTime = positionToTime(d.x);
-    edit({
-      type: "UPDATE_SUBTITLE",
-      payload: {
-        ...subtitle,
-        video_offset: newStartTime,
-        end: newStartTime + subtitle.duration / 1000,
-      },
-    });
-  };
+//   const handleDrag = (_: unknown, d: { x: number; y: number }) => {
+//     const newStartTime = positionToTime(d.x);
+//     edit({
+//       type: "UPDATE_SUBTITLE",
+//       payload: {
+//         ...subtitle,
+//         video_offset: newStartTime,
+//         end: newStartTime + subtitle.duration / 1000,
+//       },
+//     });
+//   };
 
-  const handleResize = (_: unknown, _direction: string, ref: HTMLElement) => {
-    const newWidth = ref.offsetWidth;
-    const newDuration =
-      (newWidth / containerWidth) * (endTime - startTime) * 1000;
-    edit({
-      type: "UPDATE_SUBTITLE",
-      payload: {
-        ...subtitle,
-        duration: newDuration,
-        end: subtitle.video_offset + newDuration / 1000,
-      },
-    });
-  };
+//   const handleResize = (_: unknown, _direction: string, ref: HTMLElement) => {
+//     const newWidth = ref.offsetWidth;
+//     const newDuration =
+//       (newWidth / containerWidth) * (endTime - startTime) * 1000;
+//     edit({
+//       type: "UPDATE_SUBTITLE",
+//       payload: {
+//         ...subtitle,
+//         duration: newDuration,
+//         end: subtitle.video_offset + newDuration / 1000,
+//       },
+//     });
+//   };
 
-  return (
-    <Rnd
-      position={{
-        x: timeToPosition(subtitle.video_offset),
-        y: 15,
-      }}
-      size={{
-        width:
-          timeToPosition(
-            subtitle.video_offset + (subtitle.duration || 3000) / 1000,
-          ) - timeToPosition(subtitle.video_offset),
-        height: 30,
-      }}
-      onDragStop={handleDrag}
-      onResize={handleResize}
-      bounds="parent"
-      className="border border-x-2 border-primary-9"
-      enableResizing={{ left: true, right: true }}
-    >
-      <div
-        className="h-full w-full cursor-move text-wrap bg-base-3 text-base-12 opacity-80 bg-blend-multiply"
-        title={subtitle.message}
-      >
-        <span className="truncate text-xs text-white">{subtitle.message}</span>
-      </div>
-    </Rnd>
-  );
-};
+//   return (
+//     <Rnd
+//       position={{
+//         x: timeToPosition(subtitle.video_offset),
+//         y: 15,
+//       }}
+//       size={{
+//         width:
+//           timeToPosition(
+//             subtitle.video_offset + (subtitle.duration || 3000) / 1000,
+//           ) - timeToPosition(subtitle.video_offset),
+//         height: 30,
+//       }}
+//       onDragStop={handleDrag}
+//       onResize={handleResize}
+//       bounds="parent"
+//       className="border border-x-2 border-primary-9"
+//       enableResizing={{ left: true, right: true }}
+//     >
+//       <div
+//         className="h-full w-full cursor-move text-wrap bg-base-3 text-base-12 opacity-80 bg-blend-multiply"
+//         title={subtitle.message}
+//       >
+//         <span className="truncate text-xs text-white">{subtitle.message}</span>
+//       </div>
+//     </Rnd>
+//   );
+// };
diff --git a/packages/react/src/components/tldex/new-editor/components/waveform/WaveformTestPage.tsx b/packages/react/src/components/tldex/new-editor/components/waveform/WaveformTestPage.tsx
index e50395b73..eac9d500e 100644
--- a/packages/react/src/components/tldex/new-editor/components/waveform/WaveformTestPage.tsx
+++ b/packages/react/src/components/tldex/new-editor/components/waveform/WaveformTestPage.tsx
@@ -1,118 +1,118 @@
-import React, { useEffect, useRef, useState } from "react";
-import { WaveformRenderer } from "./TestPage";
+// import React, { useEffect, useRef, useState } from "react";
+// import { WaveformRenderer } from "./TestPage";
 
-// Main React Component
-const WaveformTestPage = () => {
-  const canvasRef = useRef(null);
-  const rendererRef = useRef<WaveformRenderer | null>(null);
-  const [timeRange, setTimeRange] = useState({ start: 0, end: 1 });
-  const [waveformData, setWaveformData] = useState(null);
-  const [maxTime, setMaxTime] = useState(1);
+// // Main React Component
+// const WaveformTestPage = () => {
+//   const canvasRef = useRef(null);
+//   const rendererRef = useRef<WaveformRenderer | null>(null);
+//   const [timeRange, setTimeRange] = useState({ start: 0, end: 1 });
+//   const [waveformData, setWaveformData] = useState(null);
+//   const [maxTime, setMaxTime] = useState(1);
 
-  useEffect(() => {
-    if (canvasRef.current && !rendererRef.current) {
-      rendererRef.current = new WaveformRenderer(canvasRef.current);
-    }
-  }, []);
+//   useEffect(() => {
+//     if (canvasRef.current && !rendererRef.current) {
+//       rendererRef.current = new WaveformRenderer(canvasRef.current);
+//     }
+//   }, []);
 
-  useEffect(() => {
-    if (waveformData && rendererRef.current) {
-      rendererRef.current.setData(waveformData);
-      const lastTime = waveformData[waveformData.length - 1][0];
-      setMaxTime(lastTime);
-      setTimeRange({ start: 0, end: lastTime });
-    }
-  }, [waveformData]);
+//   useEffect(() => {
+//     if (waveformData && rendererRef.current) {
+//       rendererRef.current.setData(waveformData);
+//       const lastTime = waveformData[waveformData.length - 1][0];
+//       setMaxTime(lastTime);
+//       setTimeRange({ start: 0, end: lastTime });
+//     }
+//   }, [waveformData]);
 
-  useEffect(() => {
-    const renderer = rendererRef.current;
-    if (renderer && timeRange.end != null) {
-      renderer.resize();
-      renderer.renderRange(timeRange.start, timeRange.end);
-    }
-  }, [timeRange]);
+//   useEffect(() => {
+//     const renderer = rendererRef.current;
+//     if (renderer && timeRange.end != null) {
+//       renderer.resize();
+//       renderer.renderRange(timeRange.start, timeRange.end);
+//     }
+//   }, [timeRange]);
 
-  const handleFileChange = (event) => {
-    const file = event.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          const json = JSON.parse(e.target.result);
-          setWaveformData(json.waveform);
-        } catch (error) {
-          console.error("Error parsing JSON:", error);
-        }
-      };
-      reader.readAsText(file);
-    }
-  };
+//   const handleFileChange = (event) => {
+//     const file = event.target.files[0];
+//     if (file) {
+//       const reader = new FileReader();
+//       reader.onload = (e) => {
+//         try {
+//           const json = JSON.parse(e.target.result);
+//           setWaveformData(json.waveform);
+//         } catch (error) {
+//           console.error("Error parsing JSON:", error);
+//         }
+//       };
+//       reader.readAsText(file);
+//     }
+//   };
 
-  // Ensure start time is never greater than end time
-  const handleStartChange = (value) => {
-    const newStart = Math.min(value, timeRange.end - 0.1);
-    setTimeRange((prev) => ({ ...prev, start: newStart }));
-  };
+//   // Ensure start time is never greater than end time
+//   const handleStartChange = (value) => {
+//     const newStart = Math.min(value, timeRange.end - 0.1);
+//     setTimeRange((prev) => ({ ...prev, start: newStart }));
+//   };
 
-  // Ensure end time is never less than start time
-  const handleEndChange = (value) => {
-    const newEnd = Math.max(value, timeRange.start + 0.1);
-    setTimeRange((prev) => ({ ...prev, end: newEnd }));
-  };
+//   // Ensure end time is never less than start time
+//   const handleEndChange = (value) => {
+//     const newEnd = Math.max(value, timeRange.start + 0.1);
+//     setTimeRange((prev) => ({ ...prev, end: newEnd }));
+//   };
 
-  return (
-    <Card className="w-full max-w-4xl">
-      <CardContent className="space-y-4 p-6">
-        <div>
-          <input
-            type="file"
-            accept=".json"
-            onChange={handleFileChange}
-            className="block w-full text-sm text-gray-500 file:mr-4 file:rounded-md file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100"
-          />
-        </div>
+//   return (
+//     <Card className="w-full max-w-4xl">
+//       <CardContent className="space-y-4 p-6">
+//         <div>
+//           <input
+//             type="file"
+//             accept=".json"
+//             onChange={handleFileChange}
+//             className="block w-full text-sm text-gray-500 file:mr-4 file:rounded-md file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100"
+//           />
+//         </div>
 
-        <div className="space-y-2">
-          <div className="flex items-center space-x-2">
-            <span className="w-16">Start:</span>
-            <input
-              type="range"
-              min={0}
-              max={maxTime}
-              step="0.1"
-              value={timeRange.start || 0}
-              onChange={(e) => handleStartChange(parseFloat(e.target.value))}
-              className="flex-1"
-            />
-            <span className="w-12 text-right">
-              {(timeRange.start || 0).toFixed(1)}s
-            </span>
-          </div>
+//         <div className="space-y-2">
+//           <div className="flex items-center space-x-2">
+//             <span className="w-16">Start:</span>
+//             <input
+//               type="range"
+//               min={0}
+//               max={maxTime}
+//               step="0.1"
+//               value={timeRange.start || 0}
+//               onChange={(e) => handleStartChange(parseFloat(e.target.value))}
+//               className="flex-1"
+//             />
+//             <span className="w-12 text-right">
+//               {(timeRange.start || 0).toFixed(1)}s
+//             </span>
+//           </div>
 
-          <div className="flex items-center space-x-2">
-            <span className="w-16">End:</span>
-            <input
-              type="range"
-              min={0}
-              max={maxTime}
-              step="0.1"
-              value={timeRange.end || 1}
-              onChange={(e) => handleEndChange(parseFloat(e.target.value))}
-              className="flex-1"
-            />
-            <span className="w-12 text-right">
-              {(timeRange.end || 1).toFixed(1)}s
-            </span>
-          </div>
-        </div>
+//           <div className="flex items-center space-x-2">
+//             <span className="w-16">End:</span>
+//             <input
+//               type="range"
+//               min={0}
+//               max={maxTime}
+//               step="0.1"
+//               value={timeRange.end || 1}
+//               onChange={(e) => handleEndChange(parseFloat(e.target.value))}
+//               className="flex-1"
+//             />
+//             <span className="w-12 text-right">
+//               {(timeRange.end || 1).toFixed(1)}s
+//             </span>
+//           </div>
+//         </div>
 
-        <canvas
-          ref={canvasRef}
-          className="h-48 w-full rounded-md border bg-gray-50"
-        />
-      </CardContent>
-    </Card>
-  );
-};
+//         <canvas
+//           ref={canvasRef}
+//           className="h-48 w-full rounded-md border bg-gray-50"
+//         />
+//       </CardContent>
+//     </Card>
+//   );
+// };
 
-export default WaveformTestPage;
+// export default WaveformTestPage;