@waveform-playlist/ui-components 9.5.2 → 10.1.0

package/dist/index.d.mts

@@ -77,6 +77,7 @@ interface WaveformPlaylistTheme {
     selectedWaveOutlineColor: WaveformColor;
     selectedWaveFillColor: WaveformColor;
     selectedTrackControlsBackground: string;
+    selectedTrackBackground: string;
     timeColor: string;
     timescaleBackgroundColor: string;
     playheadColor: string;
@@ -681,6 +682,29 @@ interface TrackMenuProps {
 }
 declare const TrackMenu: react__default.FC<TrackMenuProps>;
 
+interface ColorStop {
+    dB: number;
+    color: string;
+}
+interface SegmentedVUMeterProps {
+    levels: number[];
+    peakLevels?: number[];
+    channelLabels?: string[];
+    orientation?: 'vertical' | 'horizontal';
+    segmentCount?: number;
+    dBRange?: [number, number];
+    showScale?: boolean;
+    colorStops?: ColorStop[];
+    segmentWidth?: number;
+    segmentHeight?: number;
+    segmentGap?: number;
+    coloredInactive?: boolean;
+    /** Color for scale labels and channel labels. Defaults to '#888'. */
+    labelColor?: string;
+    className?: string;
+}
+declare const SegmentedVUMeter: react__default.NamedExoticComponent<SegmentedVUMeterProps>;
+
 type SnapTo = 'bar' | 'beat' | 'off';
 type ScaleMode = 'beats' | 'temporal';
 interface BeatsAndBarsContextValue {
@@ -897,4 +921,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.d.ts

@@ -77,6 +77,7 @@ interface WaveformPlaylistTheme {
     selectedWaveOutlineColor: WaveformColor;
     selectedWaveFillColor: WaveformColor;
     selectedTrackControlsBackground: string;
+    selectedTrackBackground: string;
     timeColor: string;
     timescaleBackgroundColor: string;
     playheadColor: string;
@@ -681,6 +682,29 @@ interface TrackMenuProps {
 }
 declare const TrackMenu: react__default.FC<TrackMenuProps>;
 
+interface ColorStop {
+    dB: number;
+    color: string;
+}
+interface SegmentedVUMeterProps {
+    levels: number[];
+    peakLevels?: number[];
+    channelLabels?: string[];
+    orientation?: 'vertical' | 'horizontal';
+    segmentCount?: number;
+    dBRange?: [number, number];
+    showScale?: boolean;
+    colorStops?: ColorStop[];
+    segmentWidth?: number;
+    segmentHeight?: number;
+    segmentGap?: number;
+    coloredInactive?: boolean;
+    /** Color for scale labels and channel labels. Defaults to '#888'. */
+    labelColor?: string;
+    className?: string;
+}
+declare const SegmentedVUMeter: react__default.NamedExoticComponent<SegmentedVUMeterProps>;
+
 type SnapTo = 'bar' | 'beat' | 'off';
 type ScaleMode = 'beats' | 'temporal';
 interface BeatsAndBarsContextValue {
@@ -897,4 +921,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.js

@@ -74,6 +74,7 @@ __export(index_exports, {
   PlayoutProvider: () => PlayoutProvider,
   ScreenReaderOnly: () => ScreenReaderOnly,
   ScrollViewportProvider: () => ScrollViewportProvider,
+  SegmentedVUMeter: () => SegmentedVUMeter,
   Selection: () => Selection,
   SelectionTimeInputs: () => SelectionTimeInputs,
   Slider: () => Slider,
@@ -484,6 +485,8 @@ var defaultTheme = {
   // Selected: brighter cyan
   selectedTrackControlsBackground: "#d9e9ff",
   // Light blue background for selected track controls
+  selectedTrackBackground: "#e8f0fe",
+  // Light blue tint for selected track waveform area
   timeColor: "#000",
   timescaleBackgroundColor: "#fff",
   playheadColor: "#f00",
@@ -560,6 +563,8 @@ var darkTheme = {
   // Brighter amber background when selected
   selectedTrackControlsBackground: "#2a2218",
   // Dark warm brown for selected track controls
+  selectedTrackBackground: "#e8c090",
+  // Amber for selected track waveform area (matches selected clip)
   timeColor: "#d8c0a8",
   // Warm amber for timescale text
   timescaleBackgroundColor: "#1a1612",
@@ -3062,7 +3067,12 @@ var ChannelContainer = import_styled_components26.default.div.attrs((props) => (
   }
 }))`
   position: relative;
-  background: ${(props) => props.$backgroundColor || "transparent"};
+  background: ${(props) => {
+  if (props.$isSelected) {
+    return props.theme.selectedTrackBackground || props.$backgroundColor || "transparent";
+  }
+  return props.$backgroundColor || "transparent";
+}};
   height: 100%;
 `;
 var Track = ({
@@ -3075,7 +3085,7 @@ var Track = ({
   hasClipHeaders = false,
   onClick,
   trackId,
-  isSelected: _isSelected = false
+  isSelected = false
 }) => {
   const { waveHeight } = usePlaylistInfo();
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -3091,6 +3101,7 @@ var Track = ({
         {
           $backgroundColor: backgroundColor,
           $offset: offset,
+          $isSelected: isSelected,
           onClick,
           "data-track-id": trackId,
           children
@@ -3473,6 +3484,282 @@ var TrackMenu = ({ items: itemsProp }) => {
   ] });
 };
 
+// src/components/SegmentedVUMeter.tsx
+var import_react30 = __toESM(require("react"));
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_core8 = require("@waveform-playlist/core");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var DEFAULT_COLOR_STOPS = [
+  { dB: 2, color: "#ff0000" },
+  { dB: -1, color: "#e74c3c" },
+  { dB: -3, color: "#e67e22" },
+  { dB: -6, color: "#f1c40f" },
+  { dB: -12, color: "#2ecc71" },
+  { dB: -20, color: "#27ae60" },
+  { dB: -30, color: "#5dade2" },
+  { dB: -50, color: "#85c1e9" }
+];
+var INACTIVE_OPACITY = 0.15;
+var INACTIVE_COLOR = "rgba(128, 128, 128, 0.2)";
+var PEAK_COLOR = "#ffffff";
+function getDefaultLabels(channelCount) {
+  if (channelCount === 1) return ["M"];
+  if (channelCount === 2) return ["L", "R"];
+  return Array.from({ length: channelCount }, (_, i) => String(i + 1));
+}
+function getColorForDb(dB, colorStops) {
+  if (colorStops.length === 0) return INACTIVE_COLOR;
+  for (const stop of colorStops) {
+    if (dB >= stop.dB) {
+      return stop.color;
+    }
+  }
+  return colorStops[colorStops.length - 1].color;
+}
+function computeThresholds(segmentCount, dBRange) {
+  const safeCount = Math.max(2, segmentCount);
+  const [minDb, maxDb] = dBRange;
+  const step = (maxDb - minDb) / (safeCount - 1);
+  return Array.from({ length: safeCount }, (_, i) => maxDb - i * step);
+}
+function formatDbLabel(dB) {
+  return Math.round(dB).toString();
+}
+var MeterContainer = import_styled_components35.default.div`
+  display: inline-flex;
+  flex-direction: ${(props) => props.$orientation === "horizontal" ? "column" : "row"};
+  gap: 4px;
+  font-family: 'Courier New', monospace;
+`;
+var ChannelColumn = import_styled_components35.default.div`
+  display: flex;
+  flex-direction: ${(props) => props.$orientation === "horizontal" ? "row" : "column"};
+  align-items: center;
+  gap: 4px;
+`;
+var SegmentStack = import_styled_components35.default.div`
+  display: flex;
+  flex-direction: ${(props) => props.$orientation === "horizontal" ? "row" : "column"};
+`;
+var Segment = import_styled_components35.default.div.attrs((props) => ({
+  style: {
+    width: `${props.$width}px`,
+    height: `${props.$height}px`,
+    ...props.$orientation === "horizontal" ? { marginRight: `${props.$gap}px` } : { marginBottom: `${props.$gap}px` },
+    backgroundColor: props.$isPeak ? PEAK_COLOR : props.$active || props.$coloredInactive ? props.$color : INACTIVE_COLOR,
+    opacity: props.$isPeak || props.$active ? 1 : props.$coloredInactive ? INACTIVE_OPACITY : 1,
+    boxShadow: props.$active || props.$isPeak ? `0 0 4px ${props.$isPeak ? PEAK_COLOR : props.$color}40` : "none"
+  }
+}))`
+  border-radius: 1px;
+`;
+var DEFAULT_LABEL_COLOR = "#888";
+var ChannelLabel = import_styled_components35.default.div`
+  color: ${(props) => props.$labelColor};
+  font-size: 10px;
+  text-align: center;
+  user-select: none;
+`;
+var ScaleColumn = import_styled_components35.default.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 28px;
+`;
+var ScaleLabel = import_styled_components35.default.div.attrs((props) => ({
+  style: {
+    top: `${props.$top}px`,
+    color: props.$labelColor
+  }
+}))`
+  position: absolute;
+  left: 50%;
+  font-size: 9px;
+  font-family: 'Courier New', monospace;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  user-select: none;
+`;
+var HorizontalScaleWrapper = import_styled_components35.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+`;
+var ScaleRow = import_styled_components35.default.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  min-height: 16px;
+`;
+var ScaleLabelHorizontal = import_styled_components35.default.div.attrs((props) => ({
+  style: {
+    left: `${props.$left}px`,
+    color: props.$labelColor
+  }
+}))`
+  position: absolute;
+  top: 50%;
+  font-size: 9px;
+  font-family: 'Courier New', monospace;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  user-select: none;
+`;
+var SegmentedVUMeterInner = ({
+  levels,
+  peakLevels,
+  channelLabels,
+  orientation = "vertical",
+  segmentCount = 24,
+  dBRange = [-50, 5],
+  showScale = true,
+  colorStops = DEFAULT_COLOR_STOPS,
+  segmentWidth = 20,
+  segmentHeight = 8,
+  segmentGap = 2,
+  coloredInactive = false,
+  labelColor,
+  className
+}) => {
+  const labels = channelLabels ?? getDefaultLabels(levels.length);
+  const resolvedLabelColor = labelColor ?? DEFAULT_LABEL_COLOR;
+  const channelCount = levels.length;
+  if (process.env.NODE_ENV !== "production" && peakLevels != null && peakLevels.length !== channelCount) {
+    console.warn(
+      `[waveform-playlist] SegmentedVUMeter: peakLevels length (${peakLevels.length}) does not match levels length (${channelCount})`
+    );
+  }
+  const isMultiChannel = channelCount >= 2;
+  const segmentTotalHeight = segmentHeight + segmentGap;
+  const [dBMin, dBMax] = dBRange;
+  const thresholds = (0, import_react30.useMemo)(
+    () => computeThresholds(segmentCount, [dBMin, dBMax]),
+    [segmentCount, dBMin, dBMax]
+  );
+  const scaleLabels = (0, import_react30.useMemo)(() => {
+    const totalSize = segmentCount * segmentTotalHeight - segmentGap;
+    const minDb = dBMin;
+    const maxDb = dBMax;
+    let minSpacing;
+    if (orientation === "horizontal") {
+      minSpacing = 35;
+    } else {
+      minSpacing = Math.max(14, segmentTotalHeight * 2);
+    }
+    const labelCount = Math.max(2, Math.floor(totalSize / minSpacing));
+    const labels2 = [];
+    for (let i = 0; i < labelCount; i++) {
+      const t = i / (labelCount - 1);
+      const position = t * totalSize;
+      const db = orientation === "horizontal" ? minDb + t * (maxDb - minDb) : maxDb - t * (maxDb - minDb);
+      labels2.push({ position, label: formatDbLabel(db) });
+    }
+    return labels2;
+  }, [orientation, segmentCount, segmentTotalHeight, segmentGap, dBMin, dBMax]);
+  const renderThresholds = (0, import_react30.useMemo)(
+    () => orientation === "horizontal" ? [...thresholds].reverse() : thresholds,
+    [thresholds, orientation]
+  );
+  const renderChannel = (channelIndex) => {
+    const level = levels[channelIndex];
+    const levelDb = (0, import_core8.normalizedToDb)(level);
+    const peakDb = peakLevels != null ? (0, import_core8.normalizedToDb)(peakLevels[channelIndex]) : null;
+    let peakSegmentIndex = -1;
+    if (peakDb != null) {
+      let minDist = Infinity;
+      for (let i = 0; i < renderThresholds.length; i++) {
+        const dist = Math.abs(renderThresholds[i] - peakDb);
+        if (dist < minDist) {
+          minDist = dist;
+          peakSegmentIndex = i;
+        }
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ChannelColumn, { $orientation: orientation, "data-channel": true, children: [
+      orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChannelLabel, { $labelColor: resolvedLabelColor, children: labels[channelIndex] }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SegmentStack, { $orientation: orientation, children: renderThresholds.map((threshold, segIdx) => {
+        const active = levelDb >= threshold;
+        const isPeak = segIdx === peakSegmentIndex;
+        const color = getColorForDb(threshold, colorStops);
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Segment,
+          {
+            $width: orientation === "horizontal" ? segmentHeight : segmentWidth,
+            $height: orientation === "horizontal" ? segmentWidth : segmentHeight,
+            $gap: segmentGap,
+            $active: active,
+            $color: color,
+            $isPeak: isPeak,
+            $orientation: orientation,
+            $coloredInactive: coloredInactive,
+            "data-segment": true,
+            ...isPeak ? { "data-peak": true } : {}
+          },
+          segIdx
+        );
+      }) }),
+      orientation === "vertical" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChannelLabel, { $labelColor: resolvedLabelColor, children: labels[channelIndex] })
+    ] }, channelIndex);
+  };
+  const renderScale = () => {
+    if (orientation === "horizontal") {
+      const totalWidth = segmentCount * segmentTotalHeight - segmentGap;
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(HorizontalScaleWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChannelLabel, { $labelColor: resolvedLabelColor, style: { visibility: "hidden" }, children: "L" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScaleRow, { style: { width: `${totalWidth}px` }, children: scaleLabels.map(({ position, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScaleLabelHorizontal, { $left: position, $labelColor: resolvedLabelColor, children: label }, i)) })
+      ] });
+    }
+    const totalHeight = segmentCount * segmentTotalHeight - segmentGap;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScaleColumn, { style: { height: `${totalHeight}px` }, children: scaleLabels.map(({ position, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScaleLabel, { $top: position, $labelColor: resolvedLabelColor, children: label }, i)) });
+  };
+  if (isMultiChannel) {
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        MeterContainer,
+        {
+          className,
+          $orientation: orientation,
+          "data-meter-orientation": orientation,
+          children: [
+            Array.from({ length: channelCount }, (_, i) => renderChannel(i)),
+            showScale && renderScale()
+          ]
+        }
+      );
+    }
+    const midpoint = Math.ceil(channelCount / 2);
+    const leftChannels = Array.from({ length: midpoint }, (_, i) => i);
+    const rightChannels = Array.from({ length: channelCount - midpoint }, (_, i) => midpoint + i);
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      MeterContainer,
+      {
+        className,
+        $orientation: orientation,
+        "data-meter-orientation": orientation,
+        children: [
+          leftChannels.map(renderChannel),
+          showScale && renderScale(),
+          rightChannels.map(renderChannel)
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    MeterContainer,
+    {
+      className,
+      $orientation: orientation,
+      "data-meter-orientation": orientation,
+      children: [
+        renderChannel(0),
+        showScale && renderScale()
+      ]
+    }
+  );
+};
+var SegmentedVUMeter = import_react30.default.memo(SegmentedVUMeterInner);
+
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
   return samples / sampleRate;
@@ -3538,6 +3825,7 @@ function secondsToPixels2(seconds, samplesPerPixel, sampleRate) {
   PlayoutProvider,
   ScreenReaderOnly,
   ScrollViewportProvider,
+  SegmentedVUMeter,
   Selection,
   SelectionTimeInputs,
   Slider,