Optimize timeline performance

1 files changed, 24 insertions, 0 deletions

diff --git a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx
new file mode 100644
index 00000000..c0efc19e
--- /dev/null
+++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx
@@ -0,0 +1,24 @@
+import { TimelineCanvasRulerWrapperProps } from "@/types/timeline";
+import React, { forwardRef } from "react";
+
+/**
+ * Wrapper div around the canvas-based timeline ruler.
+ * Captures mouse events for scrubbing and ensures pointer events are properly enabled.
+ */
+const TimelineCanvasRulerWrapper = forwardRef<
+  HTMLDivElement,
+  TimelineCanvasRulerWrapperProps
+>(({ children, onMouseDown, className = "" }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={`relative overflow-hidden h-5 w-full select-none cursor-pointer ${className}`}
+      onMouseDown={onMouseDown}
+      data-ruler-wrapper
+    >
+      {children}
+    </div>
+  );
+});
+
+export default TimelineCanvasRulerWrapper;