@waveform-playlist/ui-components 9.1.0 → 9.1.2

package/dist/index.mjs

@@ -1105,6 +1105,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 +1119,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 +1150,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 {
@@ -2036,7 +2031,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) {