@waveform-playlist/ui-components 9.1.1 → 9.2.0

package/dist/index.js

@@ -38,9 +38,12 @@ __export(index_exports, {
   BaseCheckboxWrapper: () => BaseCheckboxWrapper,
   BaseControlButton: () => BaseControlButton,
   BaseInput: () => BaseInput,
+  BaseInputSmall: () => BaseInputSmall,
   BaseLabel: () => BaseLabel,
   BaseSelect: () => BaseSelect,
+  BaseSelectSmall: () => BaseSelectSmall,
   BaseSlider: () => BaseSlider,
+  BeatsAndBarsProvider: () => BeatsAndBarsProvider,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   CLIP_BOUNDARY_WIDTH: () => CLIP_BOUNDARY_WIDTH,
@@ -94,14 +97,16 @@ __export(index_exports, {
   darkTheme: () => darkTheme,
   defaultTheme: () => defaultTheme,
   formatTime: () => formatTime,
+  getScaleInfo: () => getScaleInfo,
   isWaveformGradient: () => isWaveformGradient,
   parseTime: () => parseTime,
   pixelsToSamples: () => pixelsToSamples,
   pixelsToSeconds: () => pixelsToSeconds,
-  samplesToPixels: () => samplesToPixels,
+  samplesToPixels: () => samplesToPixels2,
   samplesToSeconds: () => samplesToSeconds,
-  secondsToPixels: () => secondsToPixels,
+  secondsToPixels: () => secondsToPixels2,
   secondsToSamples: () => secondsToSamples,
+  useBeatsAndBars: () => useBeatsAndBars,
   useClipViewportOrigin: () => useClipViewportOrigin,
   useDevicePixelRatio: () => useDevicePixelRatio,
   usePlaylistInfo: () => usePlaylistInfo,
@@ -890,7 +895,6 @@ var Channel = (props) => {
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, import_core.MAX_CANVAS_WIDTH, clipOriginX);
   (0, import_react4.useEffect)(() => {
-    const tDraw = performance.now();
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * import_core.MAX_CANVAS_WIDTH;
@@ -926,9 +930,6 @@ var Channel = (props) => {
         }
       }
     }
-    console.log(
-      `[waveform] draw ch${index}: ${canvasMapRef.current.size} chunks, ${(performance.now() - tDraw).toFixed(1)}ms`
-    );
   }, [
     canvasMapRef,
     data,
@@ -1214,6 +1215,7 @@ var FadeOverlay = ({
 };
 
 // src/components/Clip.tsx
+var import_core2 = require("@waveform-playlist/core");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var ClipContainer = import_styled_components13.default.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
@@ -1227,13 +1229,8 @@ var ClipContainer = import_styled_components13.default.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 = import_styled_components13.default.div`
   flex: 1;
@@ -1263,8 +1260,7 @@ var Clip = ({
   touchOptimized = false
 }) => {
   const left = Math.floor(startSample / samplesPerPixel);
-  const endPixel = Math.floor((startSample + durationSamples) / samplesPerPixel);
-  const width = endPixel - left;
+  const width = (0, import_core2.clipPixelWidth)(startSample, durationSamples, samplesPerPixel);
   const enableDrag = showHeader && !disableHeaderDrag && !isOverlay;
   const draggableId = `clip-${trackIndex}-${clipIndex}`;
   const {
@@ -1273,20 +1269,20 @@ var Clip = ({
     isDragSource
   } = (0, import_react7.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 } = (0, import_react7.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 } = (0, import_react7.useDraggable)({
     id: rightBoundaryId,
-    data: { clipId, trackIndex, clipIndex, boundary: "right" },
+    data: { clipId, trackIndex, clipIndex, boundary: "right", startSample, durationSamples },
     disabled: !enableDrag,
     feedback: "none"
   });
@@ -1416,7 +1412,7 @@ var MasterVolumeControl = ({
 // src/components/PianoRollChannel.tsx
 var import_react8 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_core2 = require("@waveform-playlist/core");
+var import_core3 = require("@waveform-playlist/core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var NoteCanvas = import_styled_components15.default.canvas.attrs((props) => ({
   style: {
@@ -1459,7 +1455,7 @@ var PianoRollChannel = ({
 }) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core2.MAX_CANVAS_WIDTH, clipOriginX);
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH, clipOriginX);
   const { minMidi, maxMidi } = (0, import_react8.useMemo)(() => {
     if (midiNotes.length === 0) return { minMidi: 0, maxMidi: 127 };
     let min = 127, max = 0;
@@ -1471,12 +1467,11 @@ var PianoRollChannel = ({
   }, [midiNotes]);
   const color = isSelected ? selectedNoteColor : noteColor;
   (0, import_react8.useEffect)(() => {
-    const tDraw = performance.now();
     const noteRange = maxMidi - minMidi + 1;
     const noteHeight = Math.max(2, waveHeight / noteRange);
     const pixelsPerSecond = sampleRate / samplesPerPixel;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
-      const chunkPixelStart = canvasIdx * import_core2.MAX_CANVAS_WIDTH;
+      const chunkPixelStart = canvasIdx * import_core3.MAX_CANVAS_WIDTH;
       const canvasWidth = canvas.width / devicePixelRatio;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
@@ -1503,9 +1498,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,
@@ -1522,8 +1514,8 @@ var PianoRollChannel = ({
     index
   ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core2.MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, import_core2.MAX_CANVAS_WIDTH);
+    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       NoteCanvas,
       {
@@ -2145,7 +2137,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) {
@@ -2297,15 +2289,45 @@ var SelectionTimeInputs = ({
   ] });
 };
 
-// src/contexts/DevicePixelRatio.tsx
+// src/contexts/BeatsAndBars.tsx
 var import_react14 = require("react");
+var import_core4 = require("@waveform-playlist/core");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var BeatsAndBarsContext = (0, import_react14.createContext)(null);
+function BeatsAndBarsProvider({
+  bpm,
+  timeSignature,
+  snapTo,
+  children
+}) {
+  const [numerator, denominator] = timeSignature;
+  const value = (0, import_react14.useMemo)(() => {
+    const ts = [numerator, denominator];
+    const tpBeat = (0, import_core4.ticksPerBeat)(ts);
+    const tpBar = (0, import_core4.ticksPerBar)(ts);
+    return {
+      bpm,
+      timeSignature: ts,
+      snapTo,
+      ticksPerBeat: tpBeat,
+      ticksPerBar: tpBar
+    };
+  }, [bpm, numerator, denominator, snapTo]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BeatsAndBarsContext.Provider, { value, children });
+}
+function useBeatsAndBars() {
+  return (0, import_react14.useContext)(BeatsAndBarsContext);
+}
+
+// src/contexts/DevicePixelRatio.tsx
+var import_react15 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react14.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react15.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react14.useState)(getScale());
+  const [scale, setScale] = (0, import_react15.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -2313,13 +2335,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react14.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react15.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react15 = require("react");
-var PlaylistInfoContext = (0, import_react15.createContext)({
+var import_react16 = require("react");
+var PlaylistInfoContext = (0, import_react16.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2333,22 +2355,22 @@ var PlaylistInfoContext = (0, import_react15.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react15.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react16.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components20 = require("styled-components");
-var useTheme2 = () => (0, import_react16.useContext)(import_styled_components20.ThemeContext);
+var useTheme2 = () => (0, import_react17.useContext)(import_styled_components20.ThemeContext);
 
 // src/contexts/TrackControls.tsx
-var import_react17 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var TrackControlsContext = (0, import_react17.createContext)(/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react17.Fragment, {}));
-var useTrackControls = () => (0, import_react17.useContext)(TrackControlsContext);
-
-// src/contexts/Playout.tsx
 var import_react18 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var TrackControlsContext = (0, import_react18.createContext)(/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react18.Fragment, {}));
+var useTrackControls = () => (0, import_react18.useContext)(TrackControlsContext);
+
+// src/contexts/Playout.tsx
+var import_react19 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2359,8 +2381,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react18.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react18.createContext)({
+var PlayoutStatusContext = (0, import_react19.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react19.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2369,24 +2391,24 @@ var PlayoutStatusUpdateContext = (0, import_react18.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = (0, import_react18.useState)(defaultIsPlaying);
-  const [progress, setProgress] = (0, import_react18.useState)(defaultProgress);
-  const [selectionStart, setSelectionStart] = (0, import_react18.useState)(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = (0, import_react18.useState)(defaultSelectionEnd);
+  const [isPlaying, setIsPlaying] = (0, import_react19.useState)(defaultIsPlaying);
+  const [progress, setProgress] = (0, import_react19.useState)(defaultProgress);
+  const [selectionStart, setSelectionStart] = (0, import_react19.useState)(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = (0, import_react19.useState)(defaultSelectionEnd);
   const setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => (0, import_react18.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react18.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react19.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react19.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_core3 = require("@waveform-playlist/core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_core5 = require("@waveform-playlist/core");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper4 = import_styled_components21.default.div.attrs((props) => ({
   style: {
@@ -2438,24 +2460,24 @@ var SpectrogramChannel = ({
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const registeredIdsRef = (0, import_react19.useRef)([]);
-  const transferredCanvasesRef = (0, import_react19.useRef)(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = (0, import_react19.useRef)(workerApi);
-  const onCanvasesReadyRef = (0, import_react19.useRef)(onCanvasesReady);
+  const registeredIdsRef = (0, import_react20.useRef)([]);
+  const transferredCanvasesRef = (0, import_react20.useRef)(/* @__PURE__ */ new WeakSet());
+  const workerApiRef = (0, import_react20.useRef)(workerApi);
+  const onCanvasesReadyRef = (0, import_react20.useRef)(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
   const clipOriginX = useClipViewportOrigin();
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH, clipOriginX);
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core5.MAX_CANVAS_WIDTH, clipOriginX);
   const lut = colorLUT ?? DEFAULT_COLOR_LUT;
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
   const hasCustomFrequencyScale = Boolean(frequencyScaleFn);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
@@ -2510,15 +2532,15 @@ var SpectrogramChannel = ({
         const match = id.match(/chunk(\d+)$/);
         if (!match) {
           console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
-          return import_core3.MAX_CANVAS_WIDTH;
+          return import_core5.MAX_CANVAS_WIDTH;
         }
         const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * import_core3.MAX_CANVAS_WIDTH, import_core3.MAX_CANVAS_WIDTH);
+        return Math.min(length - chunkIdx * import_core5.MAX_CANVAS_WIDTH, import_core5.MAX_CANVAS_WIDTH);
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
   }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2532,7 +2554,7 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (isWorkerMode || !data) return;
     const {
       frequencyBinCount,
@@ -2545,7 +2567,7 @@ var SpectrogramChannel = ({
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
-      const globalPixelOffset = canvasIdx * import_core3.MAX_CANVAS_WIDTH;
+      const globalPixelOffset = canvasIdx * import_core5.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2621,9 +2643,9 @@ var SpectrogramChannel = ({
     visibleChunkIndices
   ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    const chunkLeft = i * import_core5.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core5.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SpectrogramCanvas,
       {
         $cssWidth: currentWidth,
@@ -2637,11 +2659,11 @@ var SpectrogramChannel = ({
       `${length}-${i}`
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Wrapper4, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Wrapper4, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2675,7 +2697,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2696,8 +2718,8 @@ var SmartChannel = ({
   }
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2716,7 +2738,7 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           style: {
@@ -2725,7 +2747,7 @@ var SmartChannel = ({
             width: props.length,
             height: halfHeight
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Channel,
             {
               ...props,
@@ -2745,7 +2767,7 @@ var SmartChannel = ({
     ] });
   }
   if (renderMode === "piano-roll") {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       PianoRollChannel,
       {
         index: props.index,
@@ -2764,7 +2786,7 @@ var SmartChannel = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Channel,
     {
       ...props,
@@ -2781,9 +2803,9 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = import_styled_components22.default.div`
   position: sticky;
@@ -2833,12 +2855,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react20.useRef)(null);
+  const canvasRef = (0, import_react21.useRef)(null);
   const devicePixelRatio = useDevicePixelRatio();
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
   const clipHeaderOffset = hasClipHeaders ? 22 : 0;
-  (0, import_react20.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2876,7 +2898,7 @@ var SpectrogramLabels = ({
     spectrogramHeight,
     clipHeaderOffset
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -2892,41 +2914,14 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react22 = require("react");
+var import_react23 = __toESM(require("react"));
+var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/components/TimeScale.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = require("react");
 var import_styled_components23 = __toESM(require("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
-var import_core4 = require("@waveform-playlist/core");
-var import_jsx_runtime25 = require("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")}`;
-}
+var import_core6 = require("@waveform-playlist/core");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var PlaylistTimeScaleScroll = import_styled_components23.default.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
@@ -2948,70 +2943,20 @@ var TimeTickChunk = import_styled_components23.default.canvas.attrs((props) => (
   position: absolute;
   bottom: 0;
 `;
-var TimeStamp = import_styled_components23.default.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 } = (0, import_react21.useContext)(PlaylistInfoContext);
+  const { timeScaleHeight } = (0, import_react22.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react21.useMemo)(() => {
-    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__ */ (0, import_jsx_runtime25.jsx)(import_react21.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(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 visibleChunkIndices = useVisibleChunkIndices(widthX, import_core4.MAX_CANVAS_WIDTH);
+  const { widthX, canvasInfo, timeMarkersWithPositions } = tickData;
+  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core6.MAX_CANVAS_WIDTH);
   const visibleChunks = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
-    const chunkWidth = Math.min(widthX - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    const chunkLeft = i * import_core6.MAX_CANVAS_WIDTH;
+    const chunkWidth = Math.min(widthX - chunkLeft, import_core6.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       TimeTickChunk,
       {
         $cssWidth: chunkWidth,
@@ -3025,14 +2970,14 @@ var TimeScale = (props) => {
       `timescale-${i}`
     );
   });
-  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core4.MAX_CANVAS_WIDTH : 0;
-  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core4.MAX_CANVAS_WIDTH : Infinity;
+  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core6.MAX_CANVAS_WIDTH : 0;
+  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core6.MAX_CANVAS_WIDTH : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = chunkIdx * import_core4.MAX_CANVAS_WIDTH;
+      const chunkLeft = chunkIdx * import_core6.MAX_CANVAS_WIDTH;
       const chunkWidth = canvas.width / devicePixelRatio;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -3046,16 +2991,8 @@ var TimeScale = (props) => {
         ctx.fillRect(localX, scaleY, 1, scaleHeight);
       }
     }
-  }, [
-    canvasMapRef,
-    duration,
-    devicePixelRatio,
-    timeColor,
-    timeScaleHeight,
-    canvasInfo,
-    visibleChunkIndices
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PlaylistTimeScaleScroll, { $cssWidth: widthX, $timeScaleHeight: timeScaleHeight, children: [
+  }, [canvasMapRef, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkIndices]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(PlaylistTimeScaleScroll, { $cssWidth: widthX, $timeScaleHeight: timeScaleHeight, children: [
     visibleMarkers,
     visibleChunks
   ] });
@@ -3063,64 +3000,16 @@ var TimeScale = (props) => {
 var StyledTimeScale = (0, import_styled_components23.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_core7 = require("@waveform-playlist/core");
+var import_jsx_runtime27 = require("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();
@@ -3136,25 +3025,113 @@ function getScaleInfo(samplesPerPixel) {
   }
   return config;
 }
-var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react22.useContext)(PlaylistInfoContext);
-  let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    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 = import_styled_components24.default.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 } = (0, import_react23.useContext)(PlaylistInfoContext);
+  const beatsAndBars = useBeatsAndBars();
+  const tickData = (0, import_react23.useMemo)(() => {
+    const widthX = (0, import_core7.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 * import_core7.PPQN / 60);
+      const pixelsPerBeat = (0, import_core7.ticksToSamples)(tpBeat, bpm, sampleRate) / samplesPerPixel;
+      const pixelsPerBar = (0, import_core7.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 = (0, import_core7.ticksToSamples)(tick, bpm, sampleRate);
+        const pix = (0, import_core7.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 = (0, import_core7.ticksToBarBeatLabel)(tick, timeSignature);
+          const element = renderTick ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react23.default.Fragment, { children: renderTick(label, pix) }, `bb-${tick}`) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "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__ */ (0, import_jsx_runtime27.jsx)(import_react23.default.Fragment, { children: renderTick(timestamp, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(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__ */ (0, import_jsx_runtime27.jsx)(StyledTimeScale, { tickData });
 };
 
 // src/components/TimeFormatSelect.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var SelectWrapper = import_styled_components24.default.div`
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SelectWrapper = import_styled_components25.default.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -3176,7 +3153,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -3184,15 +3161,15 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-var import_styled_components25 = __toESM(require("styled-components"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Container = import_styled_components25.default.div.attrs((props) => ({
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Container = import_styled_components26.default.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
   }
@@ -3200,7 +3177,7 @@ var Container = import_styled_components25.default.div.attrs((props) => ({
   position: relative;
   ${(props) => props.$width !== void 0 && `width: ${props.$width}px;`}
 `;
-var ChannelContainer = import_styled_components25.default.div.attrs((props) => ({
+var ChannelContainer = import_styled_components26.default.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
@@ -3222,7 +3199,7 @@ var Track = ({
   isSelected: _isSelected = false
 }) => {
   const { waveHeight } = usePlaylistInfo();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Container,
     {
       $numChannels: numChannels,
@@ -3230,7 +3207,7 @@ var Track = ({
       $waveHeight: waveHeight,
       $width: width,
       $hasClipHeaders: hasClipHeaders,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ChannelContainer,
         {
           $backgroundColor: backgroundColor,
@@ -3245,8 +3222,8 @@ var Track = ({
 };
 
 // src/components/TrackControls/Button.tsx
-var import_styled_components26 = __toESM(require("styled-components"));
-var Button = import_styled_components26.default.button.attrs({
+var import_styled_components27 = __toESM(require("styled-components"));
+var Button = import_styled_components27.default.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -3321,8 +3298,8 @@ var Button = import_styled_components26.default.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var ButtonGroup = import_styled_components27.default.div`
+var import_styled_components28 = __toESM(require("styled-components"));
+var ButtonGroup = import_styled_components28.default.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -3337,10 +3314,10 @@ var ButtonGroup = import_styled_components27.default.div`
 `;
 
 // src/components/TrackControls/CloseButton.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_react23 = require("@phosphor-icons/react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var StyledCloseButton = import_styled_components28.default.button`
+var import_styled_components29 = __toESM(require("styled-components"));
+var import_react24 = require("@phosphor-icons/react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var StyledCloseButton = import_styled_components29.default.button`
   position: absolute;
   left: 0;
   top: 0;
@@ -3363,11 +3340,11 @@ var StyledCloseButton = import_styled_components28.default.button`
     color: #dc3545;
   }
 `;
-var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react23.X, { size: 12, weight: "bold" }) });
+var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react24.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
-var Controls = import_styled_components29.default.div`
+var import_styled_components30 = __toESM(require("styled-components"));
+var Controls = import_styled_components30.default.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -3383,8 +3360,8 @@ var Controls = import_styled_components29.default.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
-var Header = import_styled_components30.default.header`
+var import_styled_components31 = __toESM(require("styled-components"));
+var Header = import_styled_components31.default.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -3398,28 +3375,28 @@ var Header = import_styled_components30.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react24 = require("@phosphor-icons/react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react24.SpeakerLowIcon, { weight: "light", ...props });
-
-// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react25 = require("@phosphor-icons/react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react25.SpeakerHighIcon, { weight: "light", ...props });
+var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react25.SpeakerLowIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/TrashIcon.tsx
+// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react26 = require("@phosphor-icons/react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react26.TrashIcon, { weight: "light", ...props });
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react26.SpeakerHighIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/DotsIcon.tsx
+// src/components/TrackControls/TrashIcon.tsx
 var import_react27 = require("@phosphor-icons/react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react27.DotsThreeIcon, { weight: "bold", ...props });
+var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react27.TrashIcon, { weight: "light", ...props });
+
+// src/components/TrackControls/DotsIcon.tsx
+var import_react28 = require("@phosphor-icons/react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react28.DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
-var Slider = (0, import_styled_components31.default)(BaseSlider)`
+var import_styled_components32 = __toESM(require("styled-components"));
+var Slider = (0, import_styled_components32.default)(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -3471,8 +3448,8 @@ var Slider = (0, import_styled_components31.default)(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
-var SliderWrapper = import_styled_components32.default.label`
+var import_styled_components33 = __toESM(require("styled-components"));
+var SliderWrapper = import_styled_components33.default.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -3483,15 +3460,15 @@ var SliderWrapper = import_styled_components32.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var import_styled_components33 = __toESM(require("styled-components"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var MenuContainer = import_styled_components33.default.div`
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var MenuContainer = import_styled_components34.default.div`
   position: relative;
   display: inline-block;
 `;
-var MenuButton = import_styled_components33.default.button`
+var MenuButton = import_styled_components34.default.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -3507,7 +3484,7 @@ var MenuButton = import_styled_components33.default.button`
   }
 `;
 var DROPDOWN_MIN_WIDTH = 180;
-var Dropdown = import_styled_components33.default.div`
+var Dropdown = import_styled_components34.default.div`
   position: fixed;
   top: ${(p) => p.$top}px;
   left: ${(p) => p.$left}px;
@@ -3520,19 +3497,19 @@ var Dropdown = import_styled_components33.default.div`
   min-width: ${DROPDOWN_MIN_WIDTH}px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 `;
-var Divider = import_styled_components33.default.hr`
+var Divider = import_styled_components34.default.hr`
   border: none;
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
 `;
 var TrackMenu = ({ items: itemsProp }) => {
-  const [open, setOpen] = (0, import_react28.useState)(false);
-  const close = (0, import_react28.useCallback)(() => setOpen(false), []);
+  const [open, setOpen] = (0, import_react29.useState)(false);
+  const close = (0, import_react29.useCallback)(() => setOpen(false), []);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
-  const [dropdownPos, setDropdownPos] = (0, import_react28.useState)({ top: 0, left: 0 });
-  const buttonRef = (0, import_react28.useRef)(null);
-  const dropdownRef = (0, import_react28.useRef)(null);
-  const updatePosition = (0, import_react28.useCallback)(() => {
+  const [dropdownPos, setDropdownPos] = (0, import_react29.useState)({ top: 0, left: 0 });
+  const buttonRef = (0, import_react29.useRef)(null);
+  const dropdownRef = (0, import_react29.useRef)(null);
+  const updatePosition = (0, import_react29.useCallback)(() => {
     if (!buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();
     const vw = window.innerWidth;
@@ -3549,7 +3526,7 @@ var TrackMenu = ({ items: itemsProp }) => {
     }
     setDropdownPos({ top, left });
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!open) return;
     updatePosition();
     const rafId = requestAnimationFrame(() => updatePosition());
@@ -3563,7 +3540,7 @@ var TrackMenu = ({ items: itemsProp }) => {
       window.removeEventListener("resize", onResize);
     };
   }, [open, updatePosition]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3583,8 +3560,8 @@ var TrackMenu = ({ items: itemsProp }) => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(MenuContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(MenuContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       MenuButton,
       {
         ref: buttonRef,
@@ -3595,19 +3572,19 @@ var TrackMenu = ({ items: itemsProp }) => {
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react28.default.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react29.default.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3616,6 +3593,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);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AudioPosition,
@@ -3626,9 +3623,12 @@ var TrackMenu = ({ items: itemsProp }) => {
   BaseCheckboxWrapper,
   BaseControlButton,
   BaseInput,
+  BaseInputSmall,
   BaseLabel,
   BaseSelect,
+  BaseSelectSmall,
   BaseSlider,
+  BeatsAndBarsProvider,
   Button,
   ButtonGroup,
   CLIP_BOUNDARY_WIDTH,
@@ -3682,6 +3682,7 @@ var TrackMenu = ({ items: itemsProp }) => {
   darkTheme,
   defaultTheme,
   formatTime,
+  getScaleInfo,
   isWaveformGradient,
   parseTime,
   pixelsToSamples,
@@ -3690,6 +3691,7 @@ var TrackMenu = ({ items: itemsProp }) => {
   samplesToSeconds,
   secondsToPixels,
   secondsToSamples,
+  useBeatsAndBars,
   useClipViewportOrigin,
   useDevicePixelRatio,
   usePlaylistInfo,