@proteos/ui 0.77.0 → 0.79.0

package/src/components/media-player/media-timeline.test.tsx

@@ -0,0 +1,133 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { MediaControls } from './media-controls'
+import { MediaPlayer, type MediaPlayerSource } from './media-player'
+import { MediaTimeline, type MediaTimelineProps } from './media-timeline'
+
+// A screen recording has no audio to draw: the decoder rejects it.
+vi.mock('./media-peaks', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('./media-peaks')>()),
+  decodePeaks: vi.fn(async () => {
+    throw new Error('no audio track')
+  }),
+}))
+
+const blob = new Blob(['video'], { type: 'video/webm' })
+const markers = [
+  { key: 'f1', label: 'Frame 1', start: 2, end: 2 },
+  { key: 'f2', label: 'Frame 2', start: 4, end: 6 },
+]
+
+function mediaElement(): HTMLMediaElement {
+  const element = document.querySelector('audio')
+  if (!element) throw new Error('no media element')
+  return element
+}
+
+/** jsdom has no media pipeline: stand in for what a loaded file reports. */
+function loadMedia(duration: number) {
+  const element = mediaElement()
+  Object.defineProperty(element, 'duration', { configurable: true, value: duration })
+  let paused = true
+  Object.defineProperty(element, 'paused', { configurable: true, get: () => paused })
+  element.play = vi.fn(async () => {
+    paused = false
+    fireEvent.play(element)
+  })
+  element.pause = vi.fn(() => {
+    paused = true
+    fireEvent.pause(element)
+  })
+  fireEvent.loadedMetadata(element)
+  return element
+}
+
+function renderTimeline(
+  props: Partial<MediaTimelineProps> = {},
+  source: MediaPlayerSource = { blob },
+) {
+  return render(
+    <MediaPlayer source={source} label="Screen recording">
+      <MediaTimeline markers={markers} markersLabel="Frames" {...props} />
+      <MediaControls />
+    </MediaPlayer>,
+  )
+}
+
+beforeEach(() => {
+  URL.createObjectURL = vi.fn(() => 'blob:recording')
+  URL.revokeObjectURL = vi.fn()
+})
+
+describe('MediaTimeline', () => {
+  it('seeks through its own named slider once the media loads', () => {
+    renderTimeline()
+    const slider = screen.getByRole('slider', { name: 'Timeline' })
+    expect(slider).toBeDisabled()
+    const element = loadMedia(30)
+    expect(slider).toBeEnabled()
+    expect(slider).toHaveAttribute('max', '30')
+    act(() => {
+      element.currentTime = 12
+      fireEvent.timeUpdate(element)
+    })
+    expect(slider).toHaveAttribute('aria-valuetext', '12 seconds of 30 seconds')
+  })
+
+  it('takes the name it is given', () => {
+    renderTimeline({ label: 'Recording position' })
+    expect(screen.getByRole('slider', { name: 'Recording position' })).toBeInTheDocument()
+  })
+
+  it('hides markers until a length is known', () => {
+    renderTimeline()
+    loadMedia(Number.POSITIVE_INFINITY)
+    expect(screen.queryByRole('button', { name: 'Frame 2, at 00:04' })).not.toBeInTheDocument()
+  })
+
+  it('scales to the override when the element reports no length', () => {
+    renderTimeline({ durationOverride: 30 })
+    loadMedia(Number.POSITIVE_INFINITY)
+    const slider = screen.getByRole('slider', { name: 'Timeline' })
+    expect(slider).toBeEnabled()
+    expect(slider).toHaveAttribute('max', '30')
+    expect(screen.getByRole('button', { name: 'Frame 2, at 00:04' })).toBeVisible()
+  })
+
+  it('takes the source duration for the whole player when the element has none', () => {
+    renderTimeline({}, { blob, duration: 30 })
+    loadMedia(Number.POSITIVE_INFINITY)
+    expect(screen.getByRole('slider', { name: 'Timeline' })).toHaveAttribute('max', '30')
+    expect(screen.getByRole('slider', { name: 'Seek' })).toHaveAttribute('max', '30')
+    expect(screen.getByRole('button', { name: 'Play' })).toBeEnabled()
+    expect(screen.getByText('00:30')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Frame 2, at 00:04' })).toBeVisible()
+  })
+
+  it('clamps seeking to the known length when the element has none', async () => {
+    const user = userEvent.setup()
+    renderTimeline({}, { blob, duration: 30 })
+    const element = loadMedia(Number.POSITIVE_INFINITY)
+    element.currentTime = 25
+    await user.click(screen.getByRole('button', { name: 'Forward 10 seconds' }))
+    expect(element.currentTime).toBe(30)
+  })
+
+  it('jumps to a marker and names the one holding the playhead', async () => {
+    const user = userEvent.setup()
+    renderTimeline()
+    const element = loadMedia(30)
+    expect(screen.getByText('Frames')).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Frame 2, at 00:04' }))
+    expect(element.currentTime).toBe(4)
+    expect(screen.getByText('Frame 2')).toBeInTheDocument()
+    expect(screen.queryByText('Frame 1')).not.toBeInTheDocument()
+  })
+
+  it('shows no marker track without markers', () => {
+    renderTimeline({ markers: [] })
+    expect(screen.queryByText('Frames')).not.toBeInTheDocument()
+  })
+})

package/src/components/media-player/media-timeline.tsx

@@ -0,0 +1,78 @@
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Slider } from '../slider/slider'
+import { type MediaMarker, MediaMarkerTrack } from './media-markers'
+import { useMediaPlayer } from './media-player'
+import { spokenMediaTime } from './media-time'
+
+/* =========================================================================
+   MediaTimeline — the recording as a bare time axis: a seek slider with the
+   marker track beneath, for media with no waveform worth drawing (a screen
+   recording, a silent clip). Same markers, same seeking as the waveform;
+   nothing decoded.
+
+   `durationOverride` scales the axis for a file whose container reports no
+   length, so markers land where they belong while the element still says
+   Infinity. `source.duration` on the player does the same for the whole
+   player, controls included; the override is for a timeline that must
+   disagree with it.
+   ========================================================================= */
+
+export const mediaTimelineStyles = tv({
+  slots: {
+    root: 'flex shrink-0 flex-col gap-1 px-[18px] pt-2 pb-3',
+    markers: 'pt-1',
+  },
+})
+
+export type MediaTimelineVariants = VariantProps<typeof mediaTimelineStyles>
+
+export interface MediaTimelineProps {
+  markers?: ReadonlyArray<MediaMarker>
+  /** Heading of the marker track. */
+  markersLabel?: string
+  /** Spoken name of the seek bar. */
+  label?: string
+  /** Seconds. Scales the axis in place of the player's duration. */
+  durationOverride?: number
+  className?: string
+}
+
+export function MediaTimeline({
+  markers = [],
+  markersLabel = 'Markers',
+  label = 'Timeline',
+  durationOverride,
+  className,
+}: MediaTimelineProps) {
+  const { currentTime, duration: playerDuration, isReady, seek } = useMediaPlayer()
+  const duration = durationOverride ?? playerDuration
+  const max = duration > 0 ? duration : 1
+  const styles = mediaTimelineStyles()
+
+  return (
+    <div className={cn(styles.root(), className)}>
+      <Slider
+        aria-label={label}
+        value={Math.min(currentTime, max)}
+        minValue={0}
+        maxValue={max}
+        step={1}
+        isDisabled={!isReady}
+        valueText={`${spokenMediaTime(currentTime)} of ${spokenMediaTime(duration)}`}
+        onChange={seek}
+      />
+      {markers.length > 0 ? (
+        <MediaMarkerTrack
+          markers={markers}
+          label={markersLabel}
+          currentTime={currentTime}
+          duration={duration}
+          onSeek={seek}
+          className={styles.markers()}
+        />
+      ) : null}
+    </div>
+  )
+}

package/src/components/media-player/media-video-stage.tsx

@@ -0,0 +1,113 @@
+import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { MediaStage, useMediaPlayer } from './media-player'
+
+/* =========================================================================
+   MediaVideoStage — the player's picture when the recording is video: a
+   `<video>` fitted into the stage at its own aspect, with an overlay slot
+   that covers exactly the frame. Anything drawn in the overlay in 0..1
+   coordinates lands on the pixels it was drawn over, however the stage is
+   sized. The overlay ignores the pointer unless its children opt in.
+
+   The box is fitted by measurement rather than CSS: `aspect-ratio` can't be
+   clamped on both axes at once, and `object-fit` would letterbox inside the
+   element, leaving the overlay's box wider than the picture.
+   ========================================================================= */
+
+export const mediaVideoStageStyles = tv({
+  slots: {
+    root: 'items-center justify-center overflow-hidden',
+    box: 'relative shrink-0 bg-ink',
+    video: 'block size-full',
+    overlay: 'pointer-events-none absolute inset-0',
+  },
+})
+
+export type MediaVideoStageVariants = VariantProps<typeof mediaVideoStageStyles>
+
+/** Until the picture says otherwise. */
+const DEFAULT_ASPECT = 16 / 9
+
+/** The largest `aspect` box inside `width` × `height`; width-bound when the height isn't known. */
+export function fitMediaBox(
+  width: number,
+  height: number,
+  aspect: number,
+): { width: number; height: number } {
+  if (width <= 0 || aspect <= 0) return { width: 0, height: 0 }
+  if (height <= 0 || width / height <= aspect) return { width, height: width / aspect }
+  return { width: height * aspect, height }
+}
+
+export interface MediaVideoStageProps {
+  /** Drawn over the picture, in a box the size of the frame. */
+  children?: ReactNode
+  /** Applied to the stage; padding is fine, the box fits the content area. */
+  className?: string
+}
+
+export function MediaVideoStage({ children, className }: MediaVideoStageProps) {
+  const { src, mediaRef } = useMediaPlayer()
+  const styles = mediaVideoStageStyles()
+  const stageRef = useRef<HTMLDivElement>(null)
+  const [video, setVideo] = useState<HTMLVideoElement | null>(null)
+  const [aspect, setAspect] = useState(DEFAULT_ASPECT)
+  const [box, setBox] = useState({ width: 0, height: 0 })
+
+  const registerVideo = useCallback(
+    (element: HTMLVideoElement | null) => {
+      setVideo(element)
+      mediaRef(element)
+    },
+    [mediaRef],
+  )
+
+  useEffect(() => {
+    if (!video) return
+    const sync = () => {
+      if (video.videoWidth > 0 && video.videoHeight > 0)
+        setAspect(video.videoWidth / video.videoHeight)
+    }
+    sync()
+    video.addEventListener('loadedmetadata', sync)
+    // The picture's own size changed mid-stream.
+    video.addEventListener('resize', sync)
+    return () => {
+      video.removeEventListener('loadedmetadata', sync)
+      video.removeEventListener('resize', sync)
+    }
+  }, [video])
+
+  // Observing reports the content box straight away, and again on every resize.
+  useEffect(() => {
+    const stage = stageRef.current
+    if (!stage) return
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect
+      if (!rect) return
+      const next = fitMediaBox(rect.width, rect.height, aspect)
+      setBox((previous) =>
+        previous.width === next.width && previous.height === next.height ? previous : next,
+      )
+    })
+    observer.observe(stage)
+    return () => observer.disconnect()
+  }, [aspect])
+
+  return (
+    <MediaStage ref={stageRef} className={cn(styles.root(), className)}>
+      <div className={styles.box()} style={{ width: box.width, height: box.height }}>
+        <video
+          ref={registerVideo}
+          playsInline
+          preload="metadata"
+          className={styles.video()}
+          {...(src ? { src } : {})}
+        />
+        <div className={styles.overlay()}>{children}</div>
+      </div>
+    </MediaStage>
+  )
+}

package/src/components/media-player/media-waveform.tsx

@@ -0,0 +1,330 @@
+import { memo, type PointerEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type WaveSurfer from 'wavesurfer.js'
+
+import { cn } from '../../lib/cn'
+import { type MediaMarker, MediaMarkerTrack } from './media-markers'
+import { type MediaSegment, maskPeaks } from './media-peaks'
+import { useMediaPlayer } from './media-player'
+import { formatMediaTime } from './media-time'
+
+/* =========================================================================
+   MediaWaveform — the recording drawn as stacked lanes, one per source of
+   sound. A lane's bars come from the recording's single curve, masked to the
+   lane's segments, so one mixed file can show several people. Without lanes
+   it is one unnamed lane holding everything. Markers sit on a track beneath
+   (shared with the timeline, see media-markers).
+
+   Each lane is its own wavesurfer instance on the player's shared media
+   element, which keeps labels as ordinary DOM rows between the canvases.
+   Pointer seeking and the playhead live here, across all lanes, so the
+   instances only draw.
+   ========================================================================= */
+
+export const mediaWaveformStyles = tv({
+  slots: {
+    root: 'relative flex min-h-0 flex-1 cursor-pointer touch-none flex-col justify-center gap-2.5 px-[18px] py-3.5',
+    lane: 'flex min-h-[34px] max-h-24 flex-1 basis-0 flex-col gap-0.5',
+    laneName: 'flex min-w-0 shrink-0 items-center gap-1.5 text-[12px] leading-4 text-ink-3',
+    laneDot: 'size-[5px] shrink-0 rounded-pill',
+    laneMeta: 'ml-auto shrink-0 font-mono text-[11px] text-ink-4',
+    bars: [
+      'relative min-h-0 flex-1',
+      "before:absolute before:inset-x-0 before:top-1/2 before:h-px before:bg-rule-2 before:content-['']",
+    ],
+    canvas: 'absolute inset-0',
+    playhead: 'pointer-events-none absolute inset-y-0 z-10 w-px bg-ink',
+    hover: 'pointer-events-none absolute inset-y-0 z-10 w-px bg-ink-4',
+    chip: [
+      'pointer-events-none absolute top-2 z-20 -translate-x-1/2 whitespace-nowrap rounded-sm bg-ink px-1.5 py-1',
+      'font-mono text-[11px] leading-none text-surface',
+    ],
+    status: 'pointer-events-none px-[18px] pb-3 text-[12px] text-ink-3',
+    markers: 'border-t border-rule-2 pt-2',
+  },
+  variants: {
+    isActive: {
+      true: { laneName: 'font-medium text-ink', laneDot: 'bg-ink' },
+    },
+    isSeekable: {
+      false: { root: 'cursor-default' },
+    },
+  },
+})
+
+export type MediaWaveformVariants = VariantProps<typeof mediaWaveformStyles>
+
+export interface MediaLane {
+  key: string
+  /** Null for the one unnamed lane holding the whole recording. */
+  label: string | null
+  /** Quiet fact at the row's end. */
+  meta?: string
+  /** Where this lane has sound; null means everywhere. */
+  segments: ReadonlyArray<MediaSegment> | null
+}
+
+export interface MediaWaveformProps {
+  lanes?: ReadonlyArray<MediaLane>
+  markers?: ReadonlyArray<MediaMarker>
+  /** Heading of the marker track. */
+  markersLabel?: string
+  className?: string
+}
+
+const WHOLE_RECORDING: ReadonlyArray<MediaLane> = [{ key: 'all', label: null, segments: null }]
+
+const isWithin = (segments: ReadonlyArray<MediaSegment> | null, time: number) =>
+  segments?.some(([start, end]) => time >= start && time < end) ?? false
+
+/** Canvas colors can't take a CSS variable, so they follow the theme by hand. */
+function useWaveColors() {
+  const [colors, setColors] = useState(() => readColors())
+  useEffect(() => {
+    const observer = new MutationObserver(() => setColors(readColors()))
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    })
+    return () => observer.disconnect()
+  }, [])
+  return colors
+}
+
+function readColors() {
+  const style = getComputedStyle(document.documentElement)
+  return {
+    wave: style.getPropertyValue('--color-rule-strong').trim() || 'gray',
+    progress: style.getPropertyValue('--color-ink').trim() || 'black',
+  }
+}
+
+const LaneBars = memo(function LaneBars({
+  media,
+  peaks,
+  duration,
+  wave,
+  progress,
+  onDrawFailed,
+}: {
+  media: HTMLMediaElement
+  peaks: Float32Array
+  duration: number
+  wave: string
+  progress: string
+  onDrawFailed: () => void
+}) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const instanceRef = useRef<WaveSurfer | null>(null)
+  const colorsRef = useRef({ wave, progress })
+  colorsRef.current = { wave, progress }
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    let isCancelled = false
+    let instance: WaveSurfer | null = null
+    let observer: ResizeObserver | null = null
+    // Loaded on first draw, so conversations without a recording never pay for it.
+    import('wavesurfer.js')
+      .then(({ default: WaveSurferClass }) => {
+        if (isCancelled) return
+        instance = WaveSurferClass.create({
+          container,
+          media,
+          peaks: [peaks],
+          duration,
+          height: container.clientHeight || 1,
+          barWidth: 2,
+          barGap: 1,
+          barRadius: 1,
+          cursorWidth: 0,
+          interact: false,
+          normalize: false,
+          autoScroll: false,
+          hideScrollbar: true,
+          // A new instance otherwise resets the shared element to its own default.
+          audioRate: media.playbackRate,
+          waveColor: colorsRef.current.wave,
+          progressColor: colorsRef.current.progress,
+        })
+        instanceRef.current = instance
+        let lastHeight = container.clientHeight
+        observer = new ResizeObserver(() => {
+          const height = container.clientHeight
+          if (height > 0 && height !== lastHeight) {
+            lastHeight = height
+            instance?.setOptions({ height })
+          }
+        })
+        observer.observe(container)
+      })
+      // A chunk that won't load or a draw that throws: the audio still plays.
+      .catch(() => {
+        if (!isCancelled) onDrawFailed()
+      })
+    return () => {
+      isCancelled = true
+      observer?.disconnect()
+      instance?.destroy()
+      instanceRef.current = null
+    }
+  }, [media, peaks, duration, onDrawFailed])
+
+  useEffect(() => {
+    instanceRef.current?.setOptions({ waveColor: wave, progressColor: progress })
+  }, [wave, progress])
+
+  return <div ref={containerRef} className={mediaWaveformStyles().canvas()} aria-hidden />
+})
+
+export function MediaWaveform({
+  lanes: lanesProp,
+  markers = [],
+  markersLabel = 'Markers',
+  className,
+}: MediaWaveformProps) {
+  const { media, decoded, duration, currentTime, waveformStatus, isReady, isPlaying, seek } =
+    useMediaPlayer()
+  const lanes = lanesProp && lanesProp.length > 0 ? lanesProp : WHOLE_RECORDING
+  const colors = useWaveColors()
+  const styles = mediaWaveformStyles({ isSeekable: isReady })
+  const rootRef = useRef<HTMLDivElement>(null)
+  const playheadRef = useRef<HTMLDivElement>(null)
+  const [hover, setHover] = useState<{ x: number; text: string } | null>(null)
+  const [isDrawFailed, setIsDrawFailed] = useState(false)
+  const handleDrawFailed = useCallback(() => setIsDrawFailed(true), [])
+
+  const lanePeaks = useMemo(
+    () =>
+      lanes.map((lane) =>
+        decoded && lane.segments
+          ? maskPeaks(decoded.peaks, decoded.duration, lane.segments)
+          : (decoded?.peaks ?? null),
+      ),
+    [lanes, decoded],
+  )
+
+  // The playhead moves every frame while playing, outside React's render.
+  useEffect(() => {
+    const playhead = playheadRef.current
+    if (!media || !playhead) return
+    let frame = 0
+    const place = () => {
+      const position = duration > 0 ? Math.min(1, media.currentTime / duration) : 0
+      playhead.style.left = `calc(18px + (100% - 36px) * ${position})`
+      playhead.style.visibility = position > 0 ? 'visible' : 'hidden'
+    }
+    const loop = () => {
+      place()
+      frame = requestAnimationFrame(loop)
+    }
+    place()
+    if (isPlaying) frame = requestAnimationFrame(loop)
+    media.addEventListener('seeked', place)
+    return () => {
+      cancelAnimationFrame(frame)
+      media.removeEventListener('seeked', place)
+    }
+  }, [media, duration, isPlaying])
+
+  const timeAt = (clientX: number) => {
+    const rect = rootRef.current?.getBoundingClientRect()
+    if (!rect || duration <= 0) return 0
+    return (
+      (Math.max(0, Math.min(1, (clientX - rect.left - 18) / (rect.width - 36))) || 0) * duration
+    )
+  }
+
+  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (!isReady || (event.target as HTMLElement).closest('[data-media-marker]')) return
+    event.currentTarget.setPointerCapture(event.pointerId)
+    seek(timeAt(event.clientX))
+  }
+
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!isReady) return
+    const time = timeAt(event.clientX)
+    if (event.buttons > 0 && event.currentTarget.hasPointerCapture(event.pointerId)) seek(time)
+    const target = event.target as HTMLElement
+    const markerKey = target.closest<HTMLElement>('[data-media-marker]')?.dataset.mediaMarker
+    const laneKey = target.closest<HTMLElement>('[data-media-lane]')?.dataset.mediaLane
+    const marker = markers.find((entry) => entry.key === markerKey)
+    const lane = lanes.find((entry) => entry.key === laneKey)
+    const name = marker?.label ?? (lane?.label && isWithin(lane.segments, time) ? lane.label : null)
+    const rect = event.currentTarget.getBoundingClientRect()
+    setHover({
+      x: event.clientX - rect.left,
+      text: name ? `${name} · ${formatMediaTime(time)}` : formatMediaTime(time),
+    })
+  }
+
+  return (
+    <>
+      <div
+        ref={rootRef}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerLeave={() => setHover(null)}
+        className={cn(styles.root(), className)}
+      >
+        {lanes.map((lane, index) => {
+          const isActive = lane.segments !== null && isWithin(lane.segments, currentTime)
+          const peaks = lanePeaks[index]
+          const laneStyles = mediaWaveformStyles({ isActive })
+          return (
+            <div key={lane.key} data-media-lane={lane.key} className={styles.lane()}>
+              {lane.label !== null ? (
+                <div className={laneStyles.laneName()} data-active={isActive || undefined}>
+                  <span aria-hidden className={laneStyles.laneDot()} />
+                  <span className="min-w-0 truncate">{lane.label}</span>
+                  {lane.meta ? <span className={styles.laneMeta()}>{lane.meta}</span> : null}
+                </div>
+              ) : null}
+              <div className={styles.bars()}>
+                {media && peaks && decoded ? (
+                  <LaneBars
+                    media={media}
+                    peaks={peaks}
+                    duration={decoded.duration}
+                    wave={colors.wave}
+                    progress={colors.progress}
+                    onDrawFailed={handleDrawFailed}
+                  />
+                ) : null}
+              </div>
+            </div>
+          )
+        })}
+
+        {markers.length > 0 ? (
+          <MediaMarkerTrack
+            markers={markers}
+            label={markersLabel}
+            currentTime={currentTime}
+            duration={duration}
+            onSeek={seek}
+            className={styles.markers()}
+          />
+        ) : null}
+
+        <div ref={playheadRef} className={styles.playhead()} />
+        {hover ? (
+          <>
+            <div className={styles.hover()} style={{ left: hover.x }} />
+            <span
+              className={styles.chip()}
+              style={{ left: `clamp(70px, ${hover.x}px, calc(100% - 70px))` }}
+            >
+              {hover.text}
+            </span>
+          </>
+        ) : null}
+      </div>
+      {waveformStatus === 'decoding' ? <p className={styles.status()}>Drawing waveform</p> : null}
+      {waveformStatus === 'unavailable' || isDrawFailed ? (
+        <p className={styles.status()}>Waveform isn’t available. Use the slider to seek.</p>
+      ) : null}
+    </>
+  )
+}

package/src/components/slider/index.ts

@@ -0,0 +1,2 @@
+export type { SliderProps, SliderVariants } from './slider'
+export { Slider, sliderStyles } from './slider'

package/src/components/slider/slider.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Slider } from './slider'
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Slider>
+
+function Controlled() {
+  const [value, setValue] = useState(40)
+  return (
+    <div className="w-[320px]">
+      <Slider aria-label="Position" value={value} maxValue={100} onChange={setValue} />
+    </div>
+  )
+}
+
+export const Default: Story = { render: () => <Controlled /> }
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[320px]">
+      <Slider aria-label="Position" value={40} maxValue={100} isDisabled />
+    </div>
+  ),
+}