{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meeting-room",
  "title": "Meeting Room",
  "description": "Meeting shell, participant video tiles, responsive grid, and control bar (mic/camera/leave). Optional `renderVideoSlot` for real `<video />` from the host.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/components/meeting-room/index.ts",
      "content": "export { MeetingControlsBar } from \"./meeting-controls-bar\"\nexport { MeetingParticipantTile } from \"./meeting-participant-tile\"\nexport { MeetingRoom } from \"./meeting-room\"\nexport { MeetingVideoGrid } from \"./meeting-video-grid\"\nexport type {\n  MeetingControlsBarProps,\n  MeetingParticipantIdentity,\n  MeetingParticipantTileProps,\n  MeetingParticipantTileView,\n  MeetingRoomProps,\n  MeetingSessionConfig,\n  MeetingVideoGridProps,\n} from \"./types\"\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/meeting-room/meeting-room.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport type { MeetingRoomProps } from \"./types\"\n\nexport function MeetingRoom({\n  className,\n  session,\n  localParticipant,\n  children,\n}: MeetingRoomProps) {\n  return (\n    <section\n      aria-label={`Meeting ${session.meetingId}`}\n      className={cn(\"flex min-h-0 min-w-0 flex-1 flex-col\", className)}\n      data-meeting-id={session.meetingId}\n      data-room-id={session.roomId}\n      data-local-participant-id={localParticipant.id}\n    >\n      {children}\n    </section>\n  )\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/meeting-room/types.ts",
      "content": "import type { ReactNode } from \"react\"\n\n/**\n * Host apps own auth, tokens, and real media streams; these types are UI-facing view models + session keys.\n * Prefer adding optional fields over breaking required props.\n */\n\nexport type MeetingSessionConfig = {\n  meetingId: string\n  roomId: string\n}\n\nexport type MeetingParticipantIdentity = {\n  id: string\n  displayName: string\n}\n\nexport type MeetingRoomProps = {\n  className?: string\n  session: MeetingSessionConfig\n  localParticipant: MeetingParticipantIdentity\n  children?: ReactNode\n}\n\n/** One participant in the video grid (driven by host state / SDK hooks). */\nexport type MeetingParticipantTileView = {\n  id: string\n  displayName: string\n  isLocal?: boolean\n  isVideoOn: boolean\n  isAudioMuted: boolean\n  isSpeaking?: boolean\n}\n\nexport type MeetingParticipantTileProps = MeetingParticipantTileView & {\n  className?: string\n  /** When provided, rendered as the main media layer (e.g. `<video playsInline />`). */\n  videoSlot?: ReactNode\n}\n\nexport type MeetingVideoGridProps = {\n  participants: MeetingParticipantTileView[]\n  className?: string\n  /** Optional per-participant video layer; otherwise placeholder reflects `isVideoOn`. */\n  renderVideoSlot?: (id: string) => ReactNode\n}\n\nexport type MeetingControlsBarProps = {\n  micOn: boolean\n  cameraOn: boolean\n  onToggleMic: () => void\n  onToggleCamera: () => void\n  onLeave: () => void\n  className?: string\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/meeting-room/meeting-participant-tile.tsx",
      "content": "\"use client\"\n\nimport { Mic, MicOff } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport type { MeetingParticipantTileProps } from \"./types\"\n\nfunction initials(name: string) {\n  const parts = name.trim().split(/\\s+/).filter(Boolean)\n  if (parts.length >= 2) {\n    return `${parts[0]![0]}${parts[1]![0]}`.toUpperCase()\n  }\n  return name.slice(0, 2).toUpperCase() || \"?\"\n}\n\nexport function MeetingParticipantTile({\n  id,\n  displayName,\n  isLocal,\n  isVideoOn,\n  isAudioMuted,\n  isSpeaking,\n  className,\n  videoSlot,\n}: MeetingParticipantTileProps) {\n  const label = isLocal ? `${displayName} (you)` : displayName\n\n  return (\n    <div\n      aria-label={`${label}${isAudioMuted ? \", mic muted\" : \", mic on\"}${isVideoOn ? \", camera on\" : \", camera off\"}`}\n      className={cn(\n        \"relative flex min-h-0 min-w-0 overflow-hidden rounded-xl bg-zinc-900 shadow-md ring-2 ring-transparent transition-shadow\",\n        isSpeaking && \"ring-emerald-400\",\n        className,\n      )}\n      data-participant-id={id}\n    >\n      <div className=\"relative aspect-video w-full\">\n        {videoSlot ? (\n          <div className=\"absolute inset-0 [&_video]:h-full [&_video]:w-full [&_video]:object-cover\">\n            {videoSlot}\n          </div>\n        ) : isVideoOn ? (\n          <div\n            className=\"absolute inset-0 bg-gradient-to-br from-zinc-700 via-zinc-800 to-zinc-900\"\n            aria-hidden\n          >\n            <div className=\"absolute inset-0 animate-pulse opacity-40 bg-gradient-to-tl from-primary-600/30 to-transparent\" />\n            <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-medium text-zinc-400\">\n              Camera (mock)\n            </span>\n          </div>\n        ) : (\n          <div\n            className=\"absolute inset-0 flex items-center justify-center bg-zinc-800\"\n            aria-hidden\n          >\n            <div className=\"flex size-20 items-center justify-center rounded-full bg-zinc-600 text-lg font-semibold text-white\">\n              {initials(displayName)}\n            </div>\n          </div>\n        )}\n\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-2 pb-2 pt-8\">\n          <div className=\"flex items-end justify-between gap-2\">\n            <p className=\"truncate text-left text-xs font-medium text-white drop-shadow\">\n              {label}\n            </p>\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-md p-1.5\",\n                isAudioMuted ? \"bg-black/50 text-zinc-300\" : \"bg-emerald-600/90 text-white\",\n              )}\n              title={isAudioMuted ? \"Mic off\" : \"Mic on\"}\n            >\n              {isAudioMuted ? <MicOff className=\"size-3.5\" /> : <Mic className=\"size-3.5\" />}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/meeting-room/meeting-video-grid.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { MeetingParticipantTile } from \"./meeting-participant-tile\"\nimport type { MeetingVideoGridProps } from \"./types\"\n\nexport function MeetingVideoGrid({\n  participants,\n  className,\n  renderVideoSlot,\n}: MeetingVideoGridProps) {\n  return (\n    <div\n      className={cn(\n        \"grid min-h-0 w-full auto-rows-fr grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\",\n        className,\n      )}\n      role=\"list\"\n      aria-label=\"Meeting participants\"\n    >\n      {participants.map((p) => (\n        <div key={p.id} className=\"min-w-0\" role=\"listitem\">\n          <MeetingParticipantTile\n            {...p}\n            videoSlot={renderVideoSlot?.(p.id)}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/meeting-room/meeting-controls-bar.tsx",
      "content": "\"use client\"\n\nimport { Camera, CameraOff, Mic, MicOff, PhoneOff } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport type { MeetingControlsBarProps } from \"./types\"\n\nconst iconBtn =\n  \"inline-flex size-11 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-800 transition-colors hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 disabled:pointer-events-none disabled:opacity-40 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700\"\n\nexport function MeetingControlsBar({\n  micOn,\n  cameraOn,\n  onToggleMic,\n  onToggleCamera,\n  onLeave,\n  className,\n}: MeetingControlsBarProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-3 rounded-xl border border-zinc-200 bg-white/95 p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-900/95\",\n        className,\n      )}\n      role=\"toolbar\"\n      aria-label=\"Meeting controls\"\n    >\n      <button\n        type=\"button\"\n        className={iconBtn}\n        aria-pressed={micOn}\n        aria-label={micOn ? \"Mute microphone\" : \"Unmute microphone\"}\n        title={micOn ? \"Mute\" : \"Unmute\"}\n        onClick={onToggleMic}\n      >\n        {micOn ? <Mic className=\"size-5\" /> : <MicOff className=\"size-5\" />}\n      </button>\n      <button\n        type=\"button\"\n        className={iconBtn}\n        aria-pressed={cameraOn}\n        aria-label={cameraOn ? \"Turn camera off\" : \"Turn camera on\"}\n        title={cameraOn ? \"Camera off\" : \"Camera on\"}\n        onClick={onToggleCamera}\n      >\n        {cameraOn ? <Camera className=\"size-5\" /> : <CameraOff className=\"size-5\" />}\n      </button>\n      <button\n        type=\"button\"\n        className={cn(\n          iconBtn,\n          \"border-red-200 text-red-600 hover:bg-red-50 dark:border-red-900/60 dark:text-red-400 dark:hover:bg-red-950/50\",\n        )}\n        aria-label=\"Leave meeting\"\n        title=\"Leave\"\n        onClick={onLeave}\n      >\n        <PhoneOff className=\"size-5\" />\n      </button>\n    </div>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}