@waveform-playlist/ui-components 9.1.1 → 9.2.0

package/dist/index.mjs

@@ -781,7 +781,6 @@ var Channel = (props) => {
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH, clipOriginX);
   useEffect3(() => {
-    const tDraw = performance.now();
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
@@ -817,9 +816,6 @@ var Channel = (props) => {
         }
       }
     }
-    console.log(
-      `[waveform] draw ch${index}: ${canvasMapRef.current.size} chunks, ${(performance.now() - tDraw).toFixed(1)}ms`
-    );
   }, [
     canvasMapRef,
     data,
@@ -1105,6 +1101,7 @@ var FadeOverlay = ({
 };
 
 // src/components/Clip.tsx
+import { clipPixelWidth } from "@waveform-playlist/core";
 import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var ClipContainer = styled13.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
@@ -1118,13 +1115,8 @@ var ClipContainer = styled13.div.attrs((props) => ({
   width: ${(props) => props.$isOverlay ? `${props.$width}px` : "auto"};
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.05);
   z-index: 10; /* Above progress overlay (z-index: 2) but below controls/playhead */
   pointer-events: none; /* Let clicks pass through to ClickOverlay for playhead positioning */
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.08);
-  }
 `;
 var ChannelsWrapper = styled13.div`
   flex: 1;
@@ -1154,8 +1146,7 @@ var Clip = ({
   touchOptimized = false
 }) => {
   const left = Math.floor(startSample / samplesPerPixel);
-  const endPixel = Math.floor((startSample + durationSamples) / samplesPerPixel);
-  const width = endPixel - left;
+  const width = clipPixelWidth(startSample, durationSamples, samplesPerPixel);
   const enableDrag = showHeader && !disableHeaderDrag && !isOverlay;
   const draggableId = `clip-${trackIndex}-${clipIndex}`;
   const {
@@ -1164,20 +1155,20 @@ var Clip = ({
     isDragSource
   } = useDraggable({
     id: draggableId,
-    data: { clipId, trackIndex, clipIndex },
+    data: { clipId, trackIndex, clipIndex, startSample, durationSamples },
     disabled: !enableDrag
   });
   const leftBoundaryId = `clip-boundary-left-${trackIndex}-${clipIndex}`;
   const { ref: leftBoundaryRef, isDragSource: isLeftBoundaryDragging } = useDraggable({
     id: leftBoundaryId,
-    data: { clipId, trackIndex, clipIndex, boundary: "left" },
+    data: { clipId, trackIndex, clipIndex, boundary: "left", startSample, durationSamples },
     disabled: !enableDrag,
     feedback: "none"
   });
   const rightBoundaryId = `clip-boundary-right-${trackIndex}-${clipIndex}`;
   const { ref: rightBoundaryRef, isDragSource: isRightBoundaryDragging } = useDraggable({
     id: rightBoundaryId,
-    data: { clipId, trackIndex, clipIndex, boundary: "right" },
+    data: { clipId, trackIndex, clipIndex, boundary: "right", startSample, durationSamples },
     disabled: !enableDrag,
     feedback: "none"
   });
@@ -1362,7 +1353,6 @@ var PianoRollChannel = ({
   }, [midiNotes]);
   const color = isSelected ? selectedNoteColor : noteColor;
   useEffect4(() => {
-    const tDraw = performance.now();
     const noteRange = maxMidi - minMidi + 1;
     const noteHeight = Math.max(2, waveHeight / noteRange);
     const pixelsPerSecond = sampleRate / samplesPerPixel;
@@ -1394,9 +1384,6 @@ var PianoRollChannel = ({
       }
       ctx.globalAlpha = 1;
     }
-    console.log(
-      `[piano-roll] draw ch${index}: ${canvasMapRef.current.size} chunks, ${midiNotes.length} notes, ${(performance.now() - tDraw).toFixed(1)}ms`
-    );
   }, [
     canvasMapRef,
     midiNotes,
@@ -2036,7 +2023,7 @@ function clockFormat(seconds, decimals) {
   const hours = Math.floor(seconds / 3600) % 24;
   const minutes = Math.floor(seconds / 60) % 60;
   const secs = (seconds % 60).toFixed(decimals);
-  return String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + secs.padStart(decimals + 3, "0");
+  return String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + secs.padStart(decimals > 0 ? decimals + 3 : 2, "0");
 }
 function formatTime(seconds, format) {
   switch (format) {
@@ -2188,13 +2175,43 @@ var SelectionTimeInputs = ({
   ] });
 };
 
-// src/contexts/DevicePixelRatio.tsx
-import { useState as useState4, createContext as createContext3, useContext as useContext3 } from "react";
+// src/contexts/BeatsAndBars.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo3 } from "react";
+import { ticksPerBeat, ticksPerBar } from "@waveform-playlist/core";
 import { jsx as jsx19 } from "react/jsx-runtime";
+var BeatsAndBarsContext = createContext3(null);
+function BeatsAndBarsProvider({
+  bpm,
+  timeSignature,
+  snapTo,
+  children
+}) {
+  const [numerator, denominator] = timeSignature;
+  const value = useMemo3(() => {
+    const ts = [numerator, denominator];
+    const tpBeat = ticksPerBeat(ts);
+    const tpBar = ticksPerBar(ts);
+    return {
+      bpm,
+      timeSignature: ts,
+      snapTo,
+      ticksPerBeat: tpBeat,
+      ticksPerBar: tpBar
+    };
+  }, [bpm, numerator, denominator, snapTo]);
+  return /* @__PURE__ */ jsx19(BeatsAndBarsContext.Provider, { value, children });
+}
+function useBeatsAndBars() {
+  return useContext3(BeatsAndBarsContext);
+}
+
+// src/contexts/DevicePixelRatio.tsx
+import { useState as useState4, createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = createContext3(getScale());
+var DevicePixelRatioContext = createContext4(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
   const [scale, setScale] = useState4(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
@@ -2204,13 +2221,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ jsx19(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ jsx20(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => useContext3(DevicePixelRatioContext);
+var useDevicePixelRatio = () => useContext4(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var PlaylistInfoContext = createContext4({
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var PlaylistInfoContext = createContext5({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2224,26 +2241,26 @@ var PlaylistInfoContext = createContext4({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => useContext4(PlaylistInfoContext);
+var usePlaylistInfo = () => useContext5(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-import { useContext as useContext5 } from "react";
+import { useContext as useContext6 } from "react";
 import { ThemeContext } from "styled-components";
-var useTheme2 = () => useContext5(ThemeContext);
+var useTheme2 = () => useContext6(ThemeContext);
 
 // src/contexts/TrackControls.tsx
-import { createContext as createContext5, useContext as useContext6, Fragment as Fragment4 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var TrackControlsContext = createContext5(/* @__PURE__ */ jsx20(Fragment4, {}));
-var useTrackControls = () => useContext6(TrackControlsContext);
+import { createContext as createContext6, useContext as useContext7, Fragment as Fragment4 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var TrackControlsContext = createContext6(/* @__PURE__ */ jsx21(Fragment4, {}));
+var useTrackControls = () => useContext7(TrackControlsContext);
 
 // src/contexts/Playout.tsx
 import {
   useState as useState5,
-  createContext as createContext6,
-  useContext as useContext7
+  createContext as createContext7,
+  useContext as useContext8
 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2254,8 +2271,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = createContext6(defaultPlayout);
-var PlayoutStatusUpdateContext = createContext6({
+var PlayoutStatusContext = createContext7(defaultPlayout);
+var PlayoutStatusUpdateContext = createContext7({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2272,16 +2289,16 @@ var PlayoutProvider = ({ children }) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ jsx21(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx21(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ jsx22(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx22(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => useContext7(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => useContext7(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => useContext8(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => useContext8(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
 import { useRef as useRef6, useEffect as useEffect8 } from "react";
 import styled20 from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper4 = styled20.div.attrs((props) => ({
   style: {
@@ -2518,7 +2535,7 @@ var SpectrogramChannel = ({
   const canvases = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH3;
     const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH3);
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       SpectrogramCanvas,
       {
         $cssWidth: currentWidth,
@@ -2532,11 +2549,11 @@ var SpectrogramChannel = ({
       `${length}-${i}`
     );
   });
-  return /* @__PURE__ */ jsx22(Wrapper4, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ jsx23(Wrapper4, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2570,7 +2587,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2592,7 +2609,7 @@ var SmartChannel = ({
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
     return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2611,7 +2628,7 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "div",
         {
           style: {
@@ -2620,7 +2637,7 @@ var SmartChannel = ({
             width: props.length,
             height: halfHeight
           },
-          children: /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsx24(
             Channel,
             {
               ...props,
@@ -2640,7 +2657,7 @@ var SmartChannel = ({
     ] });
   }
   if (renderMode === "piano-roll") {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       PianoRollChannel,
       {
         index: props.index,
@@ -2659,7 +2676,7 @@ var SmartChannel = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Channel,
     {
       ...props,
@@ -2678,7 +2695,7 @@ var SmartChannel = ({
 // src/components/SpectrogramLabels.tsx
 import { useRef as useRef7, useLayoutEffect as useLayoutEffect2 } from "react";
 import styled21 from "styled-components";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = styled21.div`
   position: sticky;
@@ -2771,7 +2788,7 @@ var SpectrogramLabels = ({
     spectrogramHeight,
     clipHeaderOffset
   ]);
-  return /* @__PURE__ */ jsx24(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx25(
     "canvas",
     {
       ref: canvasRef,
@@ -2787,41 +2804,14 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-import { useContext as useContext9 } from "react";
+import React19, { useContext as useContext10, useMemo as useMemo4 } from "react";
+import styled23 from "styled-components";
 
 // src/components/TimeScale.tsx
-import React17, { useLayoutEffect as useLayoutEffect3, useContext as useContext8, useMemo as useMemo3 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useContext as useContext9 } from "react";
 import styled22, { withTheme as withTheme2 } from "styled-components";
-
-// src/utils/conversions.ts
-function samplesToSeconds(samples, sampleRate) {
-  return samples / sampleRate;
-}
-function secondsToSamples(seconds, sampleRate) {
-  return Math.ceil(seconds * sampleRate);
-}
-function samplesToPixels(samples, samplesPerPixel) {
-  return Math.floor(samples / samplesPerPixel);
-}
-function pixelsToSamples(pixels, samplesPerPixel) {
-  return Math.floor(pixels * samplesPerPixel);
-}
-function pixelsToSeconds(pixels, samplesPerPixel, sampleRate) {
-  return pixels * samplesPerPixel / sampleRate;
-}
-function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
-  return Math.ceil(seconds * sampleRate / samplesPerPixel);
-}
-
-// src/components/TimeScale.tsx
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH4 } from "@waveform-playlist/core";
-import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
-function formatTime2(milliseconds) {
-  const seconds = Math.floor(milliseconds / 1e3);
-  const s = seconds % 60;
-  const m = (seconds - s) / 60;
-  return `${m}:${String(s).padStart(2, "0")}`;
-}
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
 var PlaylistTimeScaleScroll = styled22.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
@@ -2843,70 +2833,20 @@ var TimeTickChunk = styled22.canvas.attrs((props) => ({
   position: absolute;
   bottom: 0;
 `;
-var TimeStamp = styled22.div.attrs((props) => ({
-  style: {
-    left: `${props.$left + 4}px`
-    // Offset 4px to the right of the tick
-  }
-}))`
-  position: absolute;
-  font-size: 0.75rem; /* Smaller font to prevent overflow */
-  white-space: nowrap; /* Prevent text wrapping */
-  color: ${(props) => props.theme.timeColor}; /* Use theme color instead of inheriting */
-`;
 var TimeScale = (props) => {
   const {
     theme: { timeColor },
-    duration,
-    marker,
-    bigStep,
-    secondStep,
-    renderTimestamp
+    tickData
   } = props;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const { sampleRate, samplesPerPixel, timeScaleHeight } = useContext8(PlaylistInfoContext);
+  const { timeScaleHeight } = useContext9(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const { widthX, canvasInfo, timeMarkersWithPositions } = useMemo3(() => {
-    const nextCanvasInfo = /* @__PURE__ */ new Map();
-    const nextMarkers = [];
-    const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
-    const pixPerSec = sampleRate / samplesPerPixel;
-    let counter = 0;
-    for (let i = 0; i < nextWidthX; i += pixPerSec * secondStep / 1e3) {
-      const pix = Math.floor(i);
-      if (counter % marker === 0) {
-        const timeMs = counter;
-        const timestamp = formatTime2(timeMs);
-        const element = renderTimestamp ? /* @__PURE__ */ jsx25(React17.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx25(TimeStamp, { $left: pix, children: timestamp }, timestamp);
-        nextMarkers.push({ pix, element });
-        nextCanvasInfo.set(pix, timeScaleHeight);
-      } else if (counter % bigStep === 0) {
-        nextCanvasInfo.set(pix, Math.floor(timeScaleHeight / 2));
-      } else if (counter % secondStep === 0) {
-        nextCanvasInfo.set(pix, Math.floor(timeScaleHeight / 5));
-      }
-      counter += secondStep;
-    }
-    return {
-      widthX: nextWidthX,
-      canvasInfo: nextCanvasInfo,
-      timeMarkersWithPositions: nextMarkers
-    };
-  }, [
-    duration,
-    samplesPerPixel,
-    sampleRate,
-    marker,
-    bigStep,
-    secondStep,
-    renderTimestamp,
-    timeScaleHeight
-  ]);
+  const { widthX, canvasInfo, timeMarkersWithPositions } = tickData;
   const visibleChunkIndices = useVisibleChunkIndices(widthX, MAX_CANVAS_WIDTH4);
   const visibleChunks = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH4;
     const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH4);
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(
       TimeTickChunk,
       {
         $cssWidth: chunkWidth,
@@ -2941,15 +2881,7 @@ var TimeScale = (props) => {
         ctx.fillRect(localX, scaleY, 1, scaleHeight);
       }
     }
-  }, [
-    canvasMapRef,
-    duration,
-    devicePixelRatio,
-    timeColor,
-    timeScaleHeight,
-    canvasInfo,
-    visibleChunkIndices
-  ]);
+  }, [canvasMapRef, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkIndices]);
   return /* @__PURE__ */ jsxs10(PlaylistTimeScaleScroll, { $cssWidth: widthX, $timeScaleHeight: timeScaleHeight, children: [
     visibleMarkers,
     visibleChunks
@@ -2958,64 +2890,22 @@ var TimeScale = (props) => {
 var StyledTimeScale = withTheme2(TimeScale);
 
 // src/components/SmartScale.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import {
+  PPQN,
+  ticksToSamples,
+  ticksToBarBeatLabel,
+  samplesToPixels,
+  secondsToPixels
+} from "@waveform-playlist/core";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var timeinfo = /* @__PURE__ */ new Map([
-  [
-    700,
-    {
-      marker: 1e3,
-      bigStep: 500,
-      smallStep: 100
-    }
-  ],
-  [
-    1500,
-    {
-      marker: 2e3,
-      bigStep: 1e3,
-      smallStep: 200
-    }
-  ],
-  [
-    2500,
-    {
-      marker: 2e3,
-      bigStep: 1e3,
-      smallStep: 500
-    }
-  ],
-  [
-    5e3,
-    {
-      marker: 5e3,
-      bigStep: 1e3,
-      smallStep: 500
-    }
-  ],
-  [
-    1e4,
-    {
-      marker: 1e4,
-      bigStep: 5e3,
-      smallStep: 1e3
-    }
-  ],
-  [
-    12e3,
-    {
-      marker: 15e3,
-      bigStep: 5e3,
-      smallStep: 1e3
-    }
-  ],
-  [
-    Infinity,
-    {
-      marker: 3e4,
-      bigStep: 1e4,
-      smallStep: 5e3
-    }
-  ]
+  [700, { marker: 1e3, bigStep: 500, smallStep: 100 }],
+  [1500, { marker: 2e3, bigStep: 1e3, smallStep: 200 }],
+  [2500, { marker: 2e3, bigStep: 1e3, smallStep: 500 }],
+  [5e3, { marker: 5e3, bigStep: 1e3, smallStep: 500 }],
+  [1e4, { marker: 1e4, bigStep: 5e3, smallStep: 1e3 }],
+  [12e3, { marker: 15e3, bigStep: 5e3, smallStep: 1e3 }],
+  [Infinity, { marker: 3e4, bigStep: 1e4, smallStep: 5e3 }]
 ]);
 function getScaleInfo(samplesPerPixel) {
   const keys = timeinfo.keys();
@@ -3031,25 +2921,113 @@ function getScaleInfo(samplesPerPixel) {
   }
   return config;
 }
-var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = useContext9(PlaylistInfoContext);
-  let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ jsx26(
-    StyledTimeScale,
-    {
-      marker: config.marker,
-      bigStep: config.bigStep,
-      secondStep: config.smallStep,
-      duration,
-      renderTimestamp
+function formatTime2(milliseconds) {
+  const seconds = Math.floor(milliseconds / 1e3);
+  const s = seconds % 60;
+  const m = (seconds - s) / 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+var TimeStamp = styled23.div.attrs((props) => ({
+  style: {
+    left: `${props.$left + 4}px`
+    // Offset 4px to the right of the tick
+  }
+}))`
+  position: absolute;
+  font-size: 0.75rem; /* Smaller font to prevent overflow */
+  white-space: nowrap; /* Prevent text wrapping */
+  color: ${(props) => props.theme.timeColor}; /* Use theme color instead of inheriting */
+`;
+var SmartScale = ({ renderTick }) => {
+  const { samplesPerPixel, sampleRate, duration, timeScaleHeight } = useContext10(PlaylistInfoContext);
+  const beatsAndBars = useBeatsAndBars();
+  const tickData = useMemo4(() => {
+    const widthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
+    if (beatsAndBars) {
+      const { bpm, timeSignature, ticksPerBar: tpBar, ticksPerBeat: tpBeat } = beatsAndBars;
+      const canvasInfo2 = /* @__PURE__ */ new Map();
+      const timeMarkersWithPositions2 = [];
+      const durationSeconds = duration / 1e3;
+      const totalTicks = Math.ceil(durationSeconds * bpm * PPQN / 60);
+      const pixelsPerBeat = ticksToSamples(tpBeat, bpm, sampleRate) / samplesPerPixel;
+      const pixelsPerBar = ticksToSamples(tpBar, bpm, sampleRate) / samplesPerPixel;
+      const MIN_TICK_PX = 10;
+      const MIN_LABEL_PX = 30;
+      let tickStep;
+      if (pixelsPerBeat >= MIN_TICK_PX) {
+        tickStep = tpBeat;
+      } else if (pixelsPerBar >= MIN_TICK_PX) {
+        tickStep = tpBar;
+      } else {
+        const barsPerTick = Math.ceil(MIN_TICK_PX / pixelsPerBar);
+        tickStep = tpBar * barsPerTick;
+      }
+      let labelStep;
+      if (pixelsPerBeat >= MIN_LABEL_PX) {
+        labelStep = tpBeat;
+      } else if (pixelsPerBar >= MIN_LABEL_PX) {
+        labelStep = tpBar;
+      } else {
+        const barsPerLabel = Math.ceil(MIN_LABEL_PX / pixelsPerBar);
+        labelStep = tpBar * barsPerLabel;
+      }
+      for (let tick = 0; tick <= totalTicks; tick += tickStep) {
+        const samples = ticksToSamples(tick, bpm, sampleRate);
+        const pix = samplesToPixels(samples, samplesPerPixel);
+        if (pix >= widthX) break;
+        const isBarLine = tick % tpBar === 0;
+        const isLabelTick = tick % labelStep === 0;
+        const tickHeight = isBarLine ? timeScaleHeight : isLabelTick ? Math.floor(timeScaleHeight / 2) : Math.floor(timeScaleHeight / 5);
+        canvasInfo2.set(pix, tickHeight);
+        if (isLabelTick) {
+          const label = ticksToBarBeatLabel(tick, timeSignature);
+          const element = renderTick ? /* @__PURE__ */ jsx27(React19.Fragment, { children: renderTick(label, pix) }, `bb-${tick}`) : /* @__PURE__ */ jsx27(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${pix + 4}px`,
+                fontSize: "0.75rem",
+                whiteSpace: "nowrap"
+              },
+              children: label
+            },
+            `bb-${tick}`
+          );
+          timeMarkersWithPositions2.push({ pix, element });
+        }
+      }
+      return { widthX, canvasInfo: canvasInfo2, timeMarkersWithPositions: timeMarkersWithPositions2 };
     }
-  );
+    const config = getScaleInfo(samplesPerPixel);
+    const { marker, bigStep, smallStep } = config;
+    const canvasInfo = /* @__PURE__ */ new Map();
+    const timeMarkersWithPositions = [];
+    const pixPerSec = sampleRate / samplesPerPixel;
+    let counter = 0;
+    for (let i = 0; i < widthX; i += pixPerSec * smallStep / 1e3) {
+      const pix = Math.floor(i);
+      if (counter % marker === 0) {
+        const timestamp = formatTime2(counter);
+        const element = renderTick ? /* @__PURE__ */ jsx27(React19.Fragment, { children: renderTick(timestamp, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx27(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+        timeMarkersWithPositions.push({ pix, element });
+        canvasInfo.set(pix, timeScaleHeight);
+      } else if (counter % bigStep === 0) {
+        canvasInfo.set(pix, Math.floor(timeScaleHeight / 2));
+      } else if (counter % smallStep === 0) {
+        canvasInfo.set(pix, Math.floor(timeScaleHeight / 5));
+      }
+      counter += smallStep;
+    }
+    return { widthX, canvasInfo, timeMarkersWithPositions };
+  }, [beatsAndBars, duration, samplesPerPixel, sampleRate, timeScaleHeight, renderTick]);
+  return /* @__PURE__ */ jsx27(StyledTimeScale, { tickData });
 };
 
 // src/components/TimeFormatSelect.tsx
-import styled23 from "styled-components";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var SelectWrapper = styled23.div`
+import styled24 from "styled-components";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SelectWrapper = styled24.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -3071,7 +3049,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ jsx27(SelectWrapper, { className, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(SelectWrapper, { className, children: /* @__PURE__ */ jsx28(
     BaseSelect,
     {
       className: "time-format",
@@ -3079,15 +3057,15 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx27("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx28("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-import styled24 from "styled-components";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var Container = styled24.div.attrs((props) => ({
+import styled25 from "styled-components";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Container = styled25.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
   }
@@ -3095,7 +3073,7 @@ var Container = styled24.div.attrs((props) => ({
   position: relative;
   ${(props) => props.$width !== void 0 && `width: ${props.$width}px;`}
 `;
-var ChannelContainer = styled24.div.attrs((props) => ({
+var ChannelContainer = styled25.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
@@ -3117,7 +3095,7 @@ var Track = ({
   isSelected: _isSelected = false
 }) => {
   const { waveHeight } = usePlaylistInfo();
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     Container,
     {
       $numChannels: numChannels,
@@ -3125,7 +3103,7 @@ var Track = ({
       $waveHeight: waveHeight,
       $width: width,
       $hasClipHeaders: hasClipHeaders,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx29(
         ChannelContainer,
         {
           $backgroundColor: backgroundColor,
@@ -3140,8 +3118,8 @@ var Track = ({
 };
 
 // src/components/TrackControls/Button.tsx
-import styled25 from "styled-components";
-var Button = styled25.button.attrs({
+import styled26 from "styled-components";
+var Button = styled26.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -3216,8 +3194,8 @@ var Button = styled25.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-import styled26 from "styled-components";
-var ButtonGroup = styled26.div`
+import styled27 from "styled-components";
+var ButtonGroup = styled27.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -3232,10 +3210,10 @@ var ButtonGroup = styled26.div`
 `;
 
 // src/components/TrackControls/CloseButton.tsx
-import styled27 from "styled-components";
+import styled28 from "styled-components";
 import { X as XIcon } from "@phosphor-icons/react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var StyledCloseButton = styled27.button`
+import { jsx as jsx30 } from "react/jsx-runtime";
+var StyledCloseButton = styled28.button`
   position: absolute;
   left: 0;
   top: 0;
@@ -3258,11 +3236,11 @@ var StyledCloseButton = styled27.button`
     color: #dc3545;
   }
 `;
-var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ jsx29(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx29(XIcon, { size: 12, weight: "bold" }) });
+var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ jsx30(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx30(XIcon, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
-import styled28 from "styled-components";
-var Controls = styled28.div`
+import styled29 from "styled-components";
+var Controls = styled29.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -3278,8 +3256,8 @@ var Controls = styled28.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-import styled29 from "styled-components";
-var Header = styled29.header`
+import styled30 from "styled-components";
+var Header = styled30.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -3294,27 +3272,27 @@ var Header = styled29.header`
 
 // src/components/TrackControls/VolumeDownIcon.tsx
 import { SpeakerLowIcon } from "@phosphor-icons/react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var VolumeDownIcon = (props) => /* @__PURE__ */ jsx30(SpeakerLowIcon, { weight: "light", ...props });
+import { jsx as jsx31 } from "react/jsx-runtime";
+var VolumeDownIcon = (props) => /* @__PURE__ */ jsx31(SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
 import { SpeakerHighIcon } from "@phosphor-icons/react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx31(SpeakerHighIcon, { weight: "light", ...props });
+import { jsx as jsx32 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx32(SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
 import { TrashIcon as PhosphorTrashIcon } from "@phosphor-icons/react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var TrashIcon = (props) => /* @__PURE__ */ jsx32(PhosphorTrashIcon, { weight: "light", ...props });
+import { jsx as jsx33 } from "react/jsx-runtime";
+var TrashIcon = (props) => /* @__PURE__ */ jsx33(PhosphorTrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/DotsIcon.tsx
 import { DotsThreeIcon } from "@phosphor-icons/react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var DotsIcon = (props) => /* @__PURE__ */ jsx33(DotsThreeIcon, { weight: "bold", ...props });
+import { jsx as jsx34 } from "react/jsx-runtime";
+var DotsIcon = (props) => /* @__PURE__ */ jsx34(DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
-import styled30 from "styled-components";
-var Slider = styled30(BaseSlider)`
+import styled31 from "styled-components";
+var Slider = styled31(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -3366,8 +3344,8 @@ var Slider = styled30(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-import styled31 from "styled-components";
-var SliderWrapper = styled31.label`
+import styled32 from "styled-components";
+var SliderWrapper = styled32.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -3378,15 +3356,15 @@ var SliderWrapper = styled31.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React19, { useState as useState6, useEffect as useEffect9, useRef as useRef8, useCallback as useCallback5 } from "react";
+import React20, { useState as useState6, useEffect as useEffect9, useRef as useRef8, useCallback as useCallback5 } from "react";
 import { createPortal } from "react-dom";
-import styled32 from "styled-components";
-import { jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
-var MenuContainer = styled32.div`
+import styled33 from "styled-components";
+import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
+var MenuContainer = styled33.div`
   position: relative;
   display: inline-block;
 `;
-var MenuButton = styled32.button`
+var MenuButton = styled33.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -3402,7 +3380,7 @@ var MenuButton = styled32.button`
   }
 `;
 var DROPDOWN_MIN_WIDTH = 180;
-var Dropdown = styled32.div`
+var Dropdown = styled33.div`
   position: fixed;
   top: ${(p) => p.$top}px;
   left: ${(p) => p.$left}px;
@@ -3415,7 +3393,7 @@ var Dropdown = styled32.div`
   min-width: ${DROPDOWN_MIN_WIDTH}px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 `;
-var Divider = styled32.hr`
+var Divider = styled33.hr`
   border: none;
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
@@ -3479,7 +3457,7 @@ var TrackMenu = ({ items: itemsProp }) => {
     };
   }, [open]);
   return /* @__PURE__ */ jsxs11(MenuContainer, { children: [
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       MenuButton,
       {
         ref: buttonRef,
@@ -3490,19 +3468,19 @@ var TrackMenu = ({ items: itemsProp }) => {
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ jsx34(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ jsx35(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ jsxs11(React19.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsx34(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ jsxs11(React20.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx35(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3511,6 +3489,26 @@ var TrackMenu = ({ items: itemsProp }) => {
     )
   ] });
 };
+
+// src/utils/conversions.ts
+function samplesToSeconds(samples, sampleRate) {
+  return samples / sampleRate;
+}
+function secondsToSamples(seconds, sampleRate) {
+  return Math.ceil(seconds * sampleRate);
+}
+function samplesToPixels2(samples, samplesPerPixel) {
+  return Math.floor(samples / samplesPerPixel);
+}
+function pixelsToSamples(pixels, samplesPerPixel) {
+  return Math.floor(pixels * samplesPerPixel);
+}
+function pixelsToSeconds(pixels, samplesPerPixel, sampleRate) {
+  return pixels * samplesPerPixel / sampleRate;
+}
+function secondsToPixels2(seconds, samplesPerPixel, sampleRate) {
+  return Math.ceil(seconds * sampleRate / samplesPerPixel);
+}
 export {
   AudioPosition,
   AutomaticScrollCheckbox,
@@ -3520,9 +3518,12 @@ export {
   BaseCheckboxWrapper,
   BaseControlButton,
   BaseInput,
+  BaseInputSmall,
   BaseLabel,
   BaseSelect,
+  BaseSelectSmall,
   BaseSlider,
+  BeatsAndBarsProvider,
   Button,
   ButtonGroup,
   CLIP_BOUNDARY_WIDTH,
@@ -3576,14 +3577,16 @@ export {
   darkTheme,
   defaultTheme,
   formatTime,
+  getScaleInfo,
   isWaveformGradient,
   parseTime,
   pixelsToSamples,
   pixelsToSeconds,
-  samplesToPixels,
+  samplesToPixels2 as samplesToPixels,
   samplesToSeconds,
-  secondsToPixels,
+  secondsToPixels2 as secondsToPixels,
   secondsToSamples,
+  useBeatsAndBars,
   useClipViewportOrigin,
   useDevicePixelRatio,
   usePlaylistInfo,