apiVersion: capsule.dev/v0.1
kind: Capsule
name: lkmeet-livekit-ui-components
version: 0.1.0
type: library
purpose:
  summary: 'Offers a suite of reusable React UI components and associated styles for
    common LiveKit features, such as camera and microphone settings, keyboard shortcuts
    for media control, a recording indicator, and a debug overlay.

    '
  owns:
  - Camera and microphone configuration UI
  - Keyboard shortcut handling for media toggles
  - Visual indicator for recording status
  - Developer debug overlay for LiveKit room info
  - Settings menu for media and recording options
  does_not_own:
  - Core LiveKit client logic
  - Application-level routing or state management
interfaces:
  provides:
  - kind: library
    name: CameraSettings
    description: React component for managing camera devices and virtual backgrounds.
  - kind: library
    name: MicrophoneSettings
    description: React component for managing microphone devices and noise cancellation.
  - kind: library
    name: KeyboardShortcuts
    description: React component for global keyboard shortcuts to control media.
  - kind: library
    name: RecordingIndicator
    description: React component to visually indicate if a meeting is being recorded.
  - kind: library
    name: DebugMode
    description: React component providing a debug overlay for LiveKit room information
      and simulation.
  - kind: library
    name: SettingsMenu
    description: React component for a comprehensive settings menu for media and recording.
  requires:
  - kind: http_api
    name: /api/record/start
    from_capsule: lkmeet-livekit-recording-api
    description: Required by SettingsMenu to start recording.
  - kind: http_api
    name: /api/record/stop
    from_capsule: lkmeet-livekit-recording-api
    description: Required by SettingsMenu to stop recording.
dependencies:
  capsules:
  - name: lkmeet-livekit-client-utils
    version: '>=0.1.0'
agent:
  summary_for_ai: 'This capsule contains UI components that interact with LiveKit
    client SDK and potentially backend APIs. Ensure components are highly configurable
    and visually consistent. Pay attention to how `SettingsMenu` interacts with the
    recording API and how `DebugMode` integrates with Datadog. The virtual background
    feature in `CameraSettings` uses specific image paths.

    '
verification:
  invariants:
  - Keyboard shortcuts must not conflict with browser or OS shortcuts.
  - Media device menus must correctly list available devices.
  - Recording indicator must accurately reflect the room's recording status.
x-reuse:
  notes: 'The `BACKGROUND_IMAGES` array in `CameraSettings.tsx` contains hardcoded
    paths to specific background images (`public/background-images/`). These will
    need to be replaced or parameterized. The `toast` styling in `RecordingIndicator.tsx`
    is specific to the `lk-button` class and colors. The Datadog integration in `Debug.tsx`
    (using `NEXT_PUBLIC_DATADOG_CLIENT_TOKEN` and `NEXT_PUBLIC_DATADOG_SITE`) is specific
    and should be removed or made optional. Keyboard shortcuts (Cmd/Ctrl-Shift-A,
    Cmd/Ctrl-Shift-V) are hardcoded.

    '
x-reconstruct:
  install: install.json