"use client" import { useGate } from "@slices/gate" import { ChevronUpIcon, HandIcon, KeyboardIcon, MicIcon, MicOffIcon, MonitorUpIcon, PhoneOffIcon, SmilePlusIcon, VideoIcon, VideoOffIcon, } from "lucide-react" import { CaptionsIcon } from "lucide-react" import { MessageSquareTextIcon } from "lucide-react" import { UsersRoundIcon } from "lucide-react" import { PresentationIcon } from "lucide-react" import { Room } from "@slices.sh/realtime/headless" import { Transcript } from "@slices.sh/transcription/headless" import { Tip } from "@/components/realtime/tip" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { MotionPanel, PresenceGroup, slideUpMotion } from "@slices.sh/core/motion" /** A fixed six, as SVG-free emoji the platform draws: a call does not need eighteen hundred. */ const REACTIONS = ["👏", "👍", "❤️", "😂", "🎉", "🙌"] // @slices:when (panels has chat || panels has people || panels has whiteboard) const PANEL = "grid size-10 place-items-center rounded-full bg-background shadow-sm ring-1 ring-foreground/10 outline-none focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-primary aria-pressed:text-primary-foreground" /** The controls under the call: your devices, the room's gestures, the panels, and the way out. */ export function MeetControls() { const { when } = useGate() /** Keys the call listens to, for the sheet `?` opens. */ // @slices:hoist before=PANEL const KEYS = [ ["⌘ D", "Turn your microphone on or off"], ["⌘ E", "Turn your camera on or off"], ["⌃ ⌘ H", "Raise or lower your hand"], ...(when("panels has chat") ? [["⌃ ⌘ C", "Open or close the chat"]] : []), ...(when("panels has people") ? [["⌃ ⌘ P", "Open or close the people"]] : []), ...(when("panels has whiteboard") ? [["⌃ ⌘ B", "Open or close the whiteboard"]] : []), ["Enter", "Pin the tile in focus, or unpin it"], ["?", "Show these shortcuts"], ] return ( <> {/* Talking into a muted microphone: said here, with the way out, and heard by nobody else. */} You’re muted Unmute }> Keyboard shortcuts While the call has focus. On Windows and Linux, Ctrl stands in for ⌘.

{key}: {does}

) } 48:T1cc9,"use client" import { useGate } from "@slices/gate" import { Room } from "@slices.sh/realtime/headless" import { Transcript } from "@slices.sh/transcription/headless" import type { RoomMeetCopy } from "./copy" import type { RoomMeetSkin } from "./skin" type MeetControlsProps = { skin: RoomMeetSkin; copy: RoomMeetCopy } /** The controls under the call: your devices, the room's gestures, the panels, and the way out. */ export function MeetControls({ skin, copy }: MeetControlsProps) { const { when } = useGate() return ( <> {copy.youAreMuted} }> {copy.unmute} } > {copy.microphoneHeading} } > } /> {copy.noMicrophones} } /> } > {copy.cameraHeading} } > } /> {copy.noCameras} } > {copy.reactions.map((emoji) => ( } /> ))} } > {when("captioned") && ( } > )} {when("panels has chat") && ( } > )} {when("panels has people") && ( } > )} {when("panels has whiteboard") && ( } > )} } > }> }> {copy.shortcutsTitle} {copy.shortcutsDescription} {copy.keys.map(([key, does]) => ( {key} {does} ))} ) } 49:T3347,import type { ComponentType, ReactNode } from "react" /** An element a sentence places words in: a screen-reader-only span, a count. */ export type Slot = ComponentType<{ children?: ReactNode }> export type RoomMeetCopy = { chat: string chatTitle: string closeChat: string people: string peopleTitle: string closePeople: string whiteboard: string closeWhiteboard: string searchPeople: string boardUndo: string boardRedo: string boardDelete: string boardToFront: string boardToBack: string boardFit: string boardColour: string boardInkNames: Record boardTools: string boardTool: Record inTheCall: string youSuffix: string handRaisedSuffix: string mutedSuffix: string nobodyCalled: (query: string) => string // @slices:when panels has people following: (name: string) => string // @slices:when panels has people stopFollowing: string chatEmpty: string chatFieldLabel: string chatFieldPlaceholder: string chatMarker: (marker: { event: "joined" | "left" | "presenting" name: string }) => string chatNotSent: string chatRetry: string chatSend: string chatSending: string chatReply: string chatQuote: (parts: { name: string excerpt: string hint: Slot nameShown: Slot excerptShown: Slot }) => ReactNode chatReplyingTo: (parts: { name: string excerpt: string nameShown: Slot quiet: Slot }) => ReactNode chatStopReplying: string chatTranscriptLabel: string chatTyping: (state: { names: string[] }) => string chatUnseen: (state: { unseen: number }) => string doorCameraOff: string doorDeniedTitle: (state: { unsupported: boolean }) => string doorDeniedBody: (state: { unsupported: boolean }) => string doorMicrophone: string doorCamera: string doorReady: string doorInside: (state: { names: string[]; full: boolean }) => string doorYourName: string doorDefaultMicrophone: string doorDefaultCamera: string /** The pickers show the device chosen, so their name and tooltip say what they are for. */ doorChooseMicrophone: string doorChooseCamera: string doorNoMicrophones: string doorNoCameras: string doorJoin: string doorJoining: string live: string title: string more: (parts: { hidden: number; names: string[]; hint: Slot }) => ReactNode layoutIs: string layoutName: (state: { mode: string }) => string layout: string auto: string tiled: string spotlight: string sidebar: string tilesOnScreen: string hideNoVideo: string yourView: string selfAuto: string selfGrid: string selfFloat: string selfHidden: string pictureInPicture: string fullScreen: string deniedTitle: (state: { unsupported: boolean }) => string deniedBody: (state: { unsupported: boolean }) => string reconnecting: string joining: string muted: string linkQuality: (state: { quality: string }) => string pinned: string presenting: string you: string speaking: string handPlace: (parts: { place: number; hint: Slot; count: Slot }) => ReactNode noRoute: string pin: string moreTiles: (parts: { hidden: number names: string[] hint: Slot }) => ReactNode flightName: (state: { name: string; mine: boolean }) => string controls: string youAreMuted: string unmute: string microphone: string camera: string audioSettings: string videoSettings: string microphoneHeading: string cameraHeading: string noMicrophones: string noCameras: string present: string sendReaction: string /** The reactions offered, in order. */ reactions: string[] reactWith: (state: { emoji: string }) => string raiseHand: string // @slices:when captioned captions: string // @slices:when captioned notCaptioned: (state: { error: string }) => string // @slices:when captioned noTranscriber: string shortcuts: string leave: string shortcutsTitle: string shortcutsDescription: string /** Each key and what it does, for the sheet `?` opens. */ keys: [string, string][] fullTitle: string fullBody: string failedTitle: (state: { denied: boolean }) => string failedBody: (state: { denied: boolean }) => string /** The server lacks a variable the room needs. Said to whoever is looking, at the door or in the call. */ missingConfiguration: string leftTitle: string leftBody: string rejoin: string announce: (news: { kind: string; name: string }) => string | null } export const defaultCopy = { chat: "Chat", chatTitle: "In-call messages", closeChat: "Close chat", people: "People", peopleTitle: "People", closePeople: "Close people", whiteboard: "Whiteboard", closeWhiteboard: "Close whiteboard", searchPeople: "Search for people", boardUndo: "Undo", boardRedo: "Redo", boardDelete: "Delete selection", boardToFront: "Bring to front", boardToBack: "Send to back", boardFit: "Zoom to fit", boardColour: "Colour", boardInkNames: { ink: "Ink", blue: "Blue", red: "Red", yellow: "Yellow", green: "Green", }, boardTools: "Tools", boardTool: { select: { label: "Select", title: "Select · V" }, hand: { label: "Hand", title: "Hand · H" }, pen: { label: "Pen", title: "Pen · P" }, highlighter: { label: "Highlighter", title: "Highlighter · I" }, eraser: { label: "Eraser", title: "Eraser · E" }, rect: { label: "Rectangle", title: "Rectangle · R" }, ellipse: { label: "Ellipse", title: "Ellipse · O" }, arrow: { label: "Arrow", title: "Arrow · A" }, text: { label: "Text", title: "Text · T" }, note: { label: "Note", title: "Note · N" }, laser: { label: "Laser pointer", title: "Laser · K" }, }, inTheCall: "In the call", youSuffix: " (you)", handRaisedSuffix: ", hand raised", mutedSuffix: ", muted", nobodyCalled: (query) => `Nobody called “${query}” is here.`, // @slices:when panels has people following: (name) => `Following ${name}`, // @slices:when panels has people stopFollowing: "Stop", chatEmpty: "Messages sent here reach everybody in the room, and vanish when it empties.", chatFieldLabel: "Message", chatFieldPlaceholder: "Send a message to everyone", chatMarker: ({ event, name }) => event === "joined" ? `${name} joined` : event === "left" ? `${name} left` : `${name} started presenting`, chatNotSent: "Not sent.", chatRetry: "Retry", chatSend: "Send", chatSending: "Sending…", chatReply: "Reply", chatQuote: ({ name, excerpt, hint: Hint, nameShown: Name, excerptShown: Excerpt, }) => ( <> In reply to {name} {excerpt} ), chatReplyingTo: ({ name, excerpt, nameShown: Name, quiet: Quiet }) => ( <> Replying to {name} · {excerpt} ), chatStopReplying: "Stop replying", chatTranscriptLabel: "Conversation", chatTyping: ({ names }) => names.length === 1 ? `${names[0]} is typing` : names.length === 2 ? `${names[0]} and ${names[1]} are typing` : "Several people are typing", chatUnseen: ({ unseen }) => `${unseen} new`, doorCameraOff: "Your camera is off", doorDeniedTitle: ({ unsupported }) => unsupported ? "This browser cannot do calls" : "The camera or microphone was refused", doorDeniedBody: ({ unsupported }) => unsupported ? "It has no camera access at all, which no permission will change." : "Allow them from the icon in the address bar, then turn them on again.", doorMicrophone: "Microphone", doorCamera: "Camera", doorReady: "Ready to join?", doorInside: ({ names, full }) => { const first = names.map((name) => name.split(" ")[0]) if (full) return "This call is full" if (first.length === 0) return "Nobody else is here yet" if (first.length === 1) return `${first[0]} is in this call` if (first.length === 2) return `${first[0]} and ${first[1]} are in this call` const rest = first.length - 2 return `${first[0]}, ${first[1]} and ${rest} ${rest === 1 ? "other" : "others"} are in this call` }, doorYourName: "Your name", doorDefaultMicrophone: "Default microphone", doorDefaultCamera: "Default camera", doorChooseMicrophone: "Choose microphone", doorChooseCamera: "Choose camera", doorNoMicrophones: "Turn the microphone on to see the list.", doorNoCameras: "Turn the camera on to see the list.", doorJoin: "Join now", doorJoining: "Joining…", live: "Live", /* @slices:snippet else title: "{{room}}", */ // @slices:runtime-begin title: "standup", // @slices:runtime-end more: ({ hidden, names, hint: Hint }) => ( <> +{hidden} more: {names.join(", ")} ), layoutIs: "Layout: ", layoutName: ({ mode }) => mode, layout: "Layout", auto: "Auto", tiled: "Tiled", spotlight: "Spotlight", sidebar: "Sidebar", tilesOnScreen: "Tiles on screen", hideNoVideo: "Hide tiles without video", yourView: "Your own view", selfAuto: "Auto", selfGrid: "Grid", selfFloat: "Float", selfHidden: "Hide", pictureInPicture: "Picture in picture", fullScreen: "Full screen", deniedTitle: ({ unsupported }) => unsupported ? "This browser cannot do calls" : "The camera was refused", deniedBody: ({ unsupported }) => unsupported ? "It has no WebRTC, which no permission will change." : "Allow the camera and microphone in the address bar, then turn them on again.", reconnecting: "Reconnecting… everybody else sees you as away.", joining: "Joining…", muted: "Muted: ", linkQuality: ({ quality }) => quality === "poor" ? "Poor connection: " : "Unstable connection: ", pinned: "Pinned: ", presenting: "is presenting", you: "(you)", speaking: ", speaking", handPlace: ({ place, hint: Hint, count: Count }) => ( <> {place} , hand raised ), noRoute: "No route", pin: "Pin", moreTiles: ({ hidden, names, hint: Hint }) => ( <> +{hidden} more : {names.join(", ")} ), flightName: ({ name, mine }) => (mine ? "You" : name.split(" ")[0]), controls: "Call controls", youAreMuted: "You’re muted", unmute: "Unmute", microphone: "Microphone", camera: "Camera", audioSettings: "Audio settings", videoSettings: "Video settings", microphoneHeading: "Microphone", cameraHeading: "Camera", noMicrophones: "Turn the microphone on once to see the list.", noCameras: "Turn the camera on once to see the list.", present: "Present your screen", sendReaction: "Send a reaction", reactions: ["👏", "👍", "❤️", "😂", "🎉", "🙌"], reactWith: ({ emoji }) => `React ${emoji}`, raiseHand: "Raise hand", // @slices:when captioned captions: "Captions", // @slices:when captioned notCaptioned: ({ error }) => error === "transcription/unavailable" ? "Your voice isn’t being captioned: the transcription service isn’t available here." : "Your voice isn’t being captioned: the transcriber stopped.", // @slices:when captioned noTranscriber: "Your voice isn’t being captioned: no live transcription is set up here.", shortcuts: "Keyboard shortcuts", leave: "Leave call", shortcutsTitle: "Keyboard shortcuts", shortcutsDescription: "While the call has focus. On Windows and Linux, Ctrl stands in for ⌘.", keys: [ ["⌘ D", "Turn your microphone on or off"], ["⌘ E", "Turn your camera on or off"], ["⌃ ⌘ H", "Raise or lower your hand"], // @slices:when panels has chat ["⌃ ⌘ C", "Open or close the chat"], // @slices:when panels has people ["⌃ ⌘ P", "Open or close the people"], // @slices:when panels has whiteboard ["⌃ ⌘ B", "Open or close the whiteboard"], ["Enter", "Pin the tile in focus, or unpin it"], ["?", "Show these shortcuts"], ], fullTitle: "This meeting is full", fullBody: "It holds as many people as a mesh carries. Trying again…", failedTitle: ({ denied }) => denied ? "You cannot join this meeting" : "This meeting could not be reached", failedBody: ({ denied }) => denied ? "Ask whoever runs it to let you in." : "Trying again. If it keeps happening, the room service is down.", missingConfiguration: "This component requires extra server configuration to work properly. If you're the developer, see the logs. If you're a user, please report it!", leftTitle: "You left the meeting.", leftBody: "Everybody else is still in it.", rejoin: "Rejoin", announce: ({ kind, name }) => { if (kind === "joined") return `${name} joined` if (kind === "left") return `${name} left` if (kind === "muted") return `${name} muted` if (kind === "unmuted") return `${name} unmuted` if (kind === "sharing") return `${name} started sharing a screen` if (kind === "unsharing") return `${name} stopped sharing` return null }, } satisfies RoomMeetCopy 4a:T22a2,"use client" import { CameraIcon, ChevronDownIcon, MicIcon, MicOffIcon, UserRoundIcon, VideoIcon, VideoOffIcon } from "lucide-react" import { Join, Room } from "@slices.sh/realtime/headless" import { Tip } from "@/components/realtime/tip" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" /** Who is already in, the way a person would say it at the door. */ function inside({ names, full }: { names: string[]; full: boolean }) { const first = names.map((name) => name.split(" ")[0]) if (full) return "This call is full" if (first.length === 0) return "Nobody else is here yet" if (first.length === 1) return `${first[0]} is in this call` if (first.length === 2) return `${first[0]} and ${first[1]} are in this call` const rest = first.length - 2 return `${first[0]}, ${first[1]} and ${rest} ${rest === 1 ? "other" : "others"} are in this call` } /** The door: see and hear yourself, pick devices, say who you are, see who is in, go in. */ export function MeetDoor() { return (

Your camera is off

{({ unsupported }) => ( {unsupported ? "This browser cannot do calls" : "The camera or microphone was refused"} {unsupported ? "It has no camera access at all, which no permission will change." : "Allow them from the icon in the address bar, then turn them on again."} )}

Ready to join?

{(seen) => (

{inside(seen)}

)}

Your name } />

}> Default microphone Microphone }> {/* The item's value is its device's, which the part puts there. */} } />

Turn the microphone on to see the list.

}> Default camera Camera }> } />

Turn the camera on to see the list.

This component requires extra server configuration to work properly. If you're the developer, see the logs. If you're a user, please report it!

} className="group/join w-full @2xl/door:w-auto @2xl/door:self-start"> Join now Joining…

) } 4b:T15b3,"use client" import { Join, Room } from "@slices.sh/realtime/headless" import type { RoomMeetCopy } from "./copy" import type { RoomMeetSkin } from "./skin" type MeetDoorProps = { skin: RoomMeetSkin; copy: RoomMeetCopy } /** The door: see and hear yourself, pick devices, say who you are, see who is in, go in. */ export function MeetDoor({ skin, copy }: MeetDoorProps) { return ( {copy.doorCameraOff} } /> {(state) => {copy.doorDeniedBody(state)}} } /> }> }> {copy.doorReady} {(seen) => ( } /> {copy.doorInside(seen)} )} {copy.doorYourName} } /> }> {copy.doorDefaultMicrophone} {copy.doorMicrophone} }> } /> {copy.doorNoMicrophones} }> {copy.doorDefaultCamera} {copy.doorCamera} }> } /> {copy.doorNoCameras} {copy.missingConfiguration} }> {copy.doorJoin} {copy.doorJoining} ) } 4c:Tfa0,"use client" import { EyeIcon, HandIcon, MicOffIcon, SearchIcon, XIcon } from "lucide-react" import { Room } from "@slices.sh/realtime/headless" import { Tip } from "@/components/realtime/tip" import { Button } from "@/components/ui/button" /** * Everybody in the call, searchable, with who is muted and whose hand is up, in order. * Pressing a person follows them: their tile takes the stage and is outlined until you press * them again or choose Stop. Your own row is the one you cannot follow. */ export function MeetPeoplePanel() { return (

People

} aria-label="Close people" className="size-8">

Search for people

{/* The name is the next thing read, so the face is not read as a second one. */} (you) {({ place }) => ( {place} , hand raised )} , muted

{({ query }) =>

Nobody called “{query}” is here.

}

) } 4d:Tb04,"use client" import { Room } from "@slices.sh/realtime/headless" import type { RoomMeetCopy } from "./copy" import type { RoomMeetSkin } from "./skin" type MeetPeoplePanelProps = { skin: RoomMeetSkin; copy: RoomMeetCopy } /** * Everybody in the call, searchable, with who is muted and whose hand is up, in order. * Pressing a person follows them: their tile takes the stage and is outlined until you press * them again or choose Stop. Your own row is the one you cannot follow. */ export function MeetPeoplePanel({ skin, copy }: MeetPeoplePanelProps) { return ( }> {copy.peopleTitle} } /> }> {copy.searchPeople} } /> }> {/* The name is the next thing read, so the face is not read as a second one. */} } /> {copy.youSuffix} {({ place }) => ( {place} {copy.handRaisedSuffix} )} {copy.mutedSuffix} {({ query }) => {copy.nobodyCalled(query)}} ) } 4e:Tc9d3,import { ChevronUpIcon } from "lucide-react" import { FocusIcon, KeyboardIcon, LayoutDashboardIcon, LayoutGridIcon, MaximizeIcon, PictureInPicture2Icon, MicIcon, MicOffIcon, MonitorUpIcon, PanelRightIcon, PhoneOffIcon, PinIcon, RotateCcwIcon, SignalLowIcon, VideoIcon, VideoOffIcon, WifiOffIcon, } from "lucide-react" import { HandIcon } from "lucide-react" import { SmilePlusIcon } from "lucide-react" import { CaptionsIcon } from "lucide-react" import { ArrowDownIcon, ArrowUpIcon, BringToFrontIcon, CameraIcon, CircleIcon, EraserIcon, HighlighterIcon, MousePointer2Icon, MoveUpRightIcon, PencilIcon, Redo2Icon, ScanIcon, SquareIcon, StickyNoteIcon, Trash2Icon, TypeIcon, Undo2Icon, WandSparklesIcon, ChevronDownIcon, CircleAlertIcon, EyeIcon, LoaderIcon, MessageSquareTextIcon, PresentationIcon, SearchIcon, SendToBackIcon, UserRoundIcon, UsersRoundIcon, ReplyIcon, XIcon, } from "lucide-react" import type { ComponentProps, ComponentType, ReactNode } from "react" import { Tip, type TipProps } from "@/components/realtime/tip" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Skeleton } from "@/components/ui/skeleton" import { MotionItem, MotionPanel, popupMotion, PresenceGroup, slideUpMotion, } from "@slices.sh/core/motion" import { popMotion, riseMotion } from "@slices.sh/core/motion" import { type Role, withProps } from "@slices.sh/core/part" import { cn } from "@/lib/utils" const DOOR_TOGGLE = "grid size-11 place-items-center rounded-full bg-destructive text-white shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:bg-black/45 data-[active]:backdrop-blur" type Titled = ComponentType & { title: ReactNode }> export type RoomMeetSkin = { /** Names the control it wraps on hover and on focus. */ Tip: ComponentType // The door DoorFrame: Role<"div"> DoorLayout: Role<"div"> DoorMirror: Role<"div"> DoorCameraOffNote: Role<"div"> DoorCameraOffBadge: Role<"span"> DoorCameraOffIcon: Role<"svg"> DoorCameraOffText: Role<"p"> DoorSelfPicture: Role<"video"> DoorDeniedAlert: Titled DoorMicLevel: Role<"span"> DoorToggles: Role<"div"> DoorMicToggle: Role<"button"> DoorMicOnIcon: Role<"svg"> DoorMicOffIcon: Role<"svg"> DoorCameraToggle: Role<"button"> DoorCameraOnIcon: Role<"svg"> DoorCameraOffToggleIcon: Role<"svg"> DoorSide: Role<"div"> DoorHeading: Role<"div"> DoorTitle: Role<"h2"> DoorInsideRow: Role<"div"> DoorFaces: Role<"span"> DoorFace: Role<"span"> DoorInsideText: Role<"p"> DoorNameField: Role<"label"> DoorNameInput: Role<"input"> DoorDeviceRows: Role<"div"> DoorDeviceMenu: ComponentType> DoorDeviceTrigger: Role<"button"> DoorMicDeviceIcon: Role<"svg"> DoorCameraDeviceIcon: Role<"svg"> DoorDeviceName: Role<"span"> DoorCaretIcon: Role<"svg"> DoorDevicePanel: ComponentType> DoorDeviceSection: ComponentType> DoorDeviceHeading: ComponentType> DoorDeviceChoices: Role<"div"> DoorDeviceChoice: Role<"div"> DoorNoDevicesNote: Role<"p"> DoorJoinButton: Role<"button"> DoorJoinLabel: Role<"span"> DoorJoiningLabel: Role<"span"> DoorMissingConfigurationPill: Role<"p"> // The panels beside the call PanelArea: Role<"div"> Panel: Role<"aside"> PanelHeader: Role<"header"> PanelTitle: Role<"h3"> PanelClose: Role<"button"> CloseIcon: Role<"svg"> PanelDivider: ComponentType PanelButton: Role<"button"> ChatIcon: Role<"svg"> PeopleIcon: Role<"svg"> WhiteboardIcon: Role<"svg"> // The chat panel /** How turns, markers, messages and the reply draft arrive and leave. */ ChatArrivals: ComponentType<{ children?: ReactNode }> ChatComposer: Role<"form"> ChatComposerBox: Role<"div"> ChatEmpty: Role<"li"> ChatFailedIcon: Role<"svg"> ChatFailedNote: Role<"p"> ChatField: Role<"textarea"> ChatJumpBar: Role<"div"> ChatJumpButton: Role<"button"> ChatJumpIcon: Role<"svg"> ChatLoading: ComponentType ChatLog: Role<"ul"> ChatMarker: Role<"li"> ChatMarkerText: Role<"span"> ChatMessage: Role<"li"> ChatQuote: Role<"button"> ChatQuoteName: Role<"span"> ChatQuoteExcerpt: Role<"span"> ChatReplyButton: Role<"button"> ChatReplyIcon: Role<"svg"> ChatReplyBar: Role<"div"> ChatReplyBarIcon: Role<"svg"> ChatReplyingTo: Role<"span"> ChatReplyingName: Role<"span"> ChatReplyingAside: Role<"span"> ChatCancelReplyButton: Role<"button"> ChatMessageBody: Role<"span"> ChatMessageLine: Role<"div"> ChatRetryButton: Role<"button"> ChatRun: Role<"li"> ChatRunAuthor: Role<"span"> ChatRunAvatar: Role<"span"> ChatRunColumn: Role<"div"> ChatRunHeader: Role<"p"> ChatRunList: Role<"ul"> ChatRunTime: Role<"time"> ChatSendButton: Role<"button"> ChatSendIcon: Role<"svg"> ChatSendingIcon: Role<"svg"> ChatSendingNote: Role<"p"> ChatTranscript: Role<"div"> ChatTypingDots: ComponentType ChatTypingLine: Role<"p"> ChatTypingRow: Role<"div"> ChatWebAddress: Role<"a"> // The people panel PeopleCount: Role<"span"> SearchField: Role<"label"> SearchIcon: Role<"svg"> SearchInput: Role<"input"> RosterList: Role<"ul"> RosterRow: Role<"li"> // @slices:when panels has people RosterButton: Role<"button"> RosterAvatar: Role<"span"> RosterName: Role<"span"> RosterYou: Role<"span"> RosterHand: Role<"span"> RosterHandIcon: Role<"svg"> RosterPlace: Role<"span"> RosterSilencedIcon: Role<"svg"> // @slices:when panels has people RosterFollowingIcon: Role<"svg"> NoMatch: Role<"li"> // @slices:when panels has people FollowChip: Role<"p"> // @slices:when panels has people StopFollowingButton: Role<"button"> // The whiteboard panel boardInks: Record BoardPanel: Role<"aside"> BoardFrame: Role<"div"> BoardSurface: Role<"div"> BoardCanvas: Role<"svg"> BoardShape: Role<"g"> BoardLaser: Role<"g"> BoardSelection: Role<"g"> BoardMarquee: Role<"rect"> BoardPointer: Role<"div"> BoardPointerArrow: ComponentType BoardPointerName: Role<"span"> BoardTextBox: Role<"textarea"> BoardHistory: Role<"div"> BoardIconButton: Role<"button"> BoardUndoIcon: Role<"svg"> BoardRedoIcon: Role<"svg"> BoardDeleteIcon: Role<"svg"> BoardToFrontIcon: Role<"svg"> BoardToBackIcon: Role<"svg"> BoardFitIcon: Role<"svg"> BoardClose: Role<"button"> BoardInks: Role<"div"> BoardInk: Role<"button"> BoardToolbar: Role<"div"> BoardToolButton: Role<"button"> /** The icon for one tool: the toolbar draws them in one list. */ BoardToolIcon: ComponentType<{ tool: string }> // The call Frame: Role<"div"> TopBar: Role<"header"> LiveBadge: Role<"p"> Title: Role<"h2"> Pile: Role<"ul"> PileItem: Role<"li"> PileAvatar: Role<"span"> PileMore: Role<"li"> /** Words only a screen reader hears. */ Spoken: Role<"span"> LayoutMenu: ComponentType> LayoutTrigger: Role<"button"> LayoutIcon: Role<"svg"> CurrentLayout: Role<"span"> LayoutPanel: ComponentType> LayoutSection: Role<"div"> LayoutHeading: Role<"p"> Choices: Role<"div"> LayoutChoice: Role<"button"> AutoIcon: Role<"svg"> TiledIcon: Role<"svg"> SpotlightIcon: Role<"svg"> SidebarIcon: Role<"svg"> TileLimitField: Role<"label"> TileLimitInput: Role<"input"> SwitchRow: Role<"div"> Switch: Role<"button"> SelfViewSection: Role<"div"> SelfViewChoices: Role<"div"> SelfViewChoice: Role<"button"> PictureInPictureButton: Role<"button"> PictureInPictureIcon: Role<"svg"> FullScreenButton: Role<"button"> FullScreenIcon: Role<"svg"> MediaAlert: Titled ReconnectingNote: Role<"p"> Stage: Role<"div"> JoiningNote: Role<"p"> /** How tiles, flights, badges, captions and the unmute reminder arrive and leave. */ Arrivals: ComponentType<{ children?: ReactNode }> Tile: Role<"div"> TileSurface: Role<"div"> Video: Role<"video"> NoPicture: Role<"div"> AvatarBox: Role<"span"> TileAvatar: Role<"span"> AvatarRing: ComponentType VoiceRing: ComponentType NameRow: Role<"div"> NameChip: Role<"p"> PresentingIcon: Role<"svg"> SilencedIcon: Role<"svg"> ConnectionWarning: Role<"span"> ConnectionWarningIcon: Role<"svg"> PinnedIcon: Role<"svg"> TileName: Role<"span"> Presenting: Role<"span"> You: Role<"span"> SpeakingBars: ComponentType CornerBadges: Role<"div"> HandBadge: Role<"span"> HandPlace: Role<"span"> ReactionBadge: Role<"div"> NoRouteBadge: Role<"span"> PinButton: Role<"button"> PinIcon: Role<"svg"> Overflow: Role<"div"> FlightLane: Role<"div"> Flight: Role<"div"> FlightName: Role<"span"> // @slices:when captioned CaptionBar: Role<"div"> // @slices:when captioned CaptionLine: Role<"div"> // @slices:when captioned CaptionAvatar: Role<"span"> // @slices:when captioned CaptionWords: Role<"p"> // @slices:when captioned CaptionRun: Role<"span"> // @slices:when captioned CaptionSpeaker: Role<"span"> // @slices:when captioned CaptionText: Role<"span"> // @slices:when captioned UncaptionedNote: Role<"p"> // @slices:when captioned CaptionsButton: Role<"button"> // @slices:when captioned CaptionsIcon: Role<"svg"> UnmuteReminder: Role<"div"> UnmuteReminderIcon: Role<"svg"> UnmuteButton: Role<"button"> Toolbar: Role<"div"> MediaPill: Role<"div"> MicButton: Role<"button"> MicOnIcon: Role<"svg"> MicOffIcon: Role<"svg"> CameraButton: Role<"button"> CameraOnIcon: Role<"svg"> CameraOffIcon: Role<"svg"> DeviceMenu: ComponentType> DeviceTrigger: Role<"button"> CaretIcon: Role<"svg"> DevicePanel: ComponentType> DeviceSection: ComponentType> DeviceHeading: ComponentType> DeviceChoices: Role<"div"> DeviceChoice: Role<"div"> NoDevicesNote: Role<"p"> LevelBox: Role<"div"> LevelMeter: Role<"span"> ShareButton: Role<"button"> ShareIcon: Role<"svg"> ReactMenu: ComponentType> ReactTrigger: Role<"button"> ReactIcon: Role<"svg"> ReactPanel: ComponentType> QuickReaction: Role<"button"> HandButton: Role<"button"> HandIcon: Role<"svg"> ShortcutsButton: Role<"button"> KeyboardIcon: Role<"svg"> LeaveButton: Role<"button"> LeaveIcon: Role<"svg"> ShortcutsDialog: ComponentType> ShortcutsPanel: ComponentType> ShortcutsHeader: Role<"div"> ShortcutsTitle: ComponentType> ShortcutsDescription: ComponentType> KeyList: Role<"dl"> KeyRow: Role<"div"> KeyName: Role<"dt"> KeyMeaning: Role<"dd"> Notice: Titled ProblemNotice: Titled MissingConfigurationPill: Role<"p"> LeftScreen: Role<"div"> LeftTitle: Role<"p"> LeftBody: Role<"p"> RejoinButton: Role<"button"> RejoinIcon: Role<"svg"> Announcement: Role<"p"> } const ROUND = "rounded-full bg-background shadow-sm ring-1 ring-foreground/10 outline-none focus-visible:ring-2 focus-visible:ring-ring" const CHOICE = "data-[active]:border-primary data-[active]:bg-primary/5" /** Each tool's icon, the same ones the composed toolbar draws. */ const BOARD_ICONS: Record = { select: MousePointer2Icon, hand: HandIcon, pen: PencilIcon, highlighter: HighlighterIcon, eraser: EraserIcon, rect: SquareIcon, ellipse: CircleIcon, arrow: MoveUpRightIcon, text: TypeIcon, note: StickyNoteIcon, laser: WandSparklesIcon, } const chatArriving = (className: string) => function Arriving(props: ComponentProps<"li">) { return ( ) } // "Mine" draws your turn as muted bubbles on the right; everybody else's is plain text under // their name, as in Meet and Slack, so no black bubble outweighs the conversation. const CHAT_MINE = "group-data-[state=mine]/run" export const defaultSkin = { Tip, boardInks: { ink: "var(--foreground)", grey: "var(--muted-foreground)", blue: "oklch(0.62 0.19 256)", violet: "oklch(0.6 0.22 293)", red: "oklch(0.63 0.23 25)", orange: "oklch(0.72 0.18 55)", yellow: "oklch(0.83 0.17 90)", green: "oklch(0.66 0.17 150)", }, BoardPanel: withProps("aside", { className: "absolute inset-0 z-40 overflow-hidden rounded-2xl bg-background shadow-sm ring-1 ring-foreground/10 @3xl/call:static @3xl/call:min-w-0 @3xl/call:flex-[3]", }), BoardFrame: withProps("div", { className: "@container/board relative isolate size-full", }), BoardSurface: withProps("div", { className: "absolute inset-0 cursor-crosshair bg-[radial-gradient(circle,var(--border)_1px,transparent_1.5px)] bg-[length:calc(24px*var(--board-zoom))_calc(24px*var(--board-zoom))] bg-[position:calc(var(--board-x)*var(--board-zoom)*-1px)_calc(var(--board-y)*var(--board-zoom)*-1px)] outline-none select-none data-[state=hand]:cursor-grab data-[state=select]:cursor-default data-[state=text]:cursor-text", }), BoardCanvas: withProps("svg", { className: "absolute inset-0 size-full overflow-visible", }), BoardShape: withProps("g", { className: "text-foreground" }), BoardLaser: withProps("g", { className: "text-destructive" }), BoardSelection: withProps("g", { className: "text-primary" }), BoardMarquee: withProps("rect", { className: "text-primary" }), BoardPointer: withProps("div", { className: "pointer-events-none absolute top-0 left-0 z-10", }), BoardPointerArrow: () => ( ), BoardPointerName: withProps("span", { className: "ml-3 block w-max rounded-full bg-[var(--peer)] px-2 py-0.5 text-[11px] font-medium text-[var(--peer-ink)] shadow-sm", }), BoardTextBox: withProps("textarea", { className: "absolute z-20 resize-none overflow-hidden border-0 bg-transparent p-0 text-foreground outline-none", }), BoardHistory: withProps("div", { className: "absolute top-2 left-2 flex items-center gap-0.5 rounded-xl border bg-background/95 p-1 shadow-sm backdrop-blur", }), BoardIconButton: withProps("button", { className: "grid size-8 place-items-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4", }), BoardUndoIcon: Undo2Icon, BoardRedoIcon: Redo2Icon, BoardDeleteIcon: Trash2Icon, BoardToFrontIcon: BringToFrontIcon, BoardToBackIcon: SendToBackIcon, BoardFitIcon: ScanIcon, BoardClose: withProps(Button, { variant: "secondary", size: "icon", className: "absolute top-2 right-2 size-8 shadow-sm", }), BoardInks: withProps("div", { role: "group", className: "absolute top-12 left-2 flex flex-col gap-0.5 rounded-xl border bg-background/95 p-1 shadow-sm backdrop-blur", }), BoardInk: withProps("button", { className: "grid size-7 place-items-center rounded-md outline-none after:size-3.5 after:rounded-full after:bg-[var(--ink)] after:ring-1 after:ring-foreground/10 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-muted aria-pressed:after:ring-2 aria-pressed:after:ring-foreground/40", }), BoardToolbar: withProps("div", { role: "toolbar", className: "absolute inset-x-2 bottom-2 mx-auto flex w-max max-w-[calc(100%-1rem)] items-center gap-0.5 overflow-x-auto rounded-2xl border bg-background/95 p-1 shadow-md backdrop-blur", }), BoardToolButton: withProps("button", { className: "grid size-8 shrink-0 place-items-center rounded-lg text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-primary aria-pressed:text-primary-foreground [&_svg]:size-4", }), BoardToolIcon: ({ tool }) => { const Icon = BOARD_ICONS[tool] ?? MousePointer2Icon return }, PeopleCount: withProps("span", { className: "text-muted-foreground tabular-nums", }), SearchField: withProps("label", { className: "relative mx-3 mt-3 block" }), SearchIcon: withProps(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground", }), SearchInput: withProps("input", { className: "h-9 w-full rounded-lg border bg-background pr-3 pl-8 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30", }), RosterList: withProps("ul", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-2", }), RosterRow: withProps("li", {}), // A row is a button that follows its person, which is why it names a `group/row` for the // eye that says so; your own row is the one that is disabled. // @slices:when panels has people RosterButton: withProps("button", { className: "group/row flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring enabled:cursor-pointer enabled:hover:bg-muted/60 data-[active]:bg-muted", }), RosterAvatar: withProps("span", { className: "grid size-8 shrink-0 place-items-center rounded-full bg-[var(--peer)] text-[11px] font-medium text-[var(--peer-ink)] select-none", }), RosterName: withProps("span", { className: "min-w-0 flex-1 truncate text-sm", }), RosterYou: withProps("span", { className: "text-muted-foreground" }), RosterHand: withProps("span", { className: "flex h-6 shrink-0 items-center gap-1 rounded-full bg-primary px-2 text-xs font-medium text-primary-foreground", }), RosterHandIcon: withProps(HandIcon, { className: "size-3.5" }), RosterPlace: withProps("span", { className: "tabular-nums" }), RosterSilencedIcon: withProps(MicOffIcon, { className: "size-4 shrink-0 text-muted-foreground", }), // @slices:when panels has people RosterFollowingIcon: withProps(EyeIcon, { className: "hidden size-4 shrink-0 text-primary group-data-[active]/row:block", }), NoMatch: withProps("li", { className: "px-2 py-6 text-center text-sm text-muted-foreground", }), // The chip at the top of the stage while somebody is followed, with the way out of it. // @slices:when panels has people FollowChip: withProps("p", { className: "absolute top-3 left-1/2 z-30 flex -translate-x-1/2 items-center gap-2 rounded-full bg-primary py-1 pr-1 pl-3 text-xs font-medium whitespace-nowrap text-primary-foreground shadow-md", }), // @slices:when panels has people StopFollowingButton: withProps("button", { className: "rounded-full bg-primary-foreground/15 px-2 py-0.5 outline-none hover:bg-primary-foreground/25 focus-visible:ring-2 focus-visible:ring-primary-foreground", }), PanelArea: withProps("div", { className: "group/area relative flex min-h-0 flex-1 gap-2 px-2", }), Panel: withProps("aside", { className: "absolute inset-0 z-40 flex flex-col overflow-hidden rounded-2xl bg-background shadow-sm ring-1 ring-foreground/10 @2xl/call:static @2xl/call:w-80 @2xl/call:shrink-0", }), PanelHeader: withProps("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b pr-2 pl-4", }), PanelTitle: withProps("h3", { className: "flex-1 text-sm font-medium" }), PanelClose: withProps(Button, { variant: "ghost", size: "icon", className: "size-8", }), CloseIcon: XIcon, PanelDivider: () => ( ), PanelButton: withProps("button", { className: "grid size-10 place-items-center rounded-full bg-background shadow-sm ring-1 ring-foreground/10 outline-none focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-primary aria-pressed:text-primary-foreground", }), ChatIcon: withProps(MessageSquareTextIcon, { className: "size-4.5" }), PeopleIcon: withProps(UsersRoundIcon, { className: "size-4.5" }), WhiteboardIcon: withProps(PresentationIcon, { className: "size-4.5" }), ChatArrivals: PresenceGroup, ChatComposer: withProps("form", { className: "px-3 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", }), ChatComposerBox: withProps("div", { className: "flex items-end gap-1.5 rounded-2xl border bg-background p-1.5 shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/30", }), ChatEmpty: withProps("li", { className: "m-auto max-w-[30ch] px-4 text-center text-sm text-pretty text-muted-foreground", }), ChatFailedIcon: withProps(CircleAlertIcon, { className: "size-3.5" }), ChatFailedNote: withProps("p", { className: "flex items-center gap-1.5 px-1 text-xs text-destructive", }), ChatField: withProps("textarea", { className: "field-sizing-content max-h-28 min-h-9 flex-1 resize-none bg-transparent px-2 py-1.5 text-base outline-none placeholder:text-muted-foreground md:text-sm", }), ChatJumpBar: withProps("div", { className: "sticky bottom-0 mt-auto flex justify-center pt-2", }), ChatJumpButton: withProps(Button, { size: "sm", variant: "secondary", className: "h-7 gap-1 rounded-full shadow-sm", }), ChatJumpIcon: ArrowDownIcon, ChatLoading: () => ( ), ChatLog: withProps("ul", { className: "flex flex-1 flex-col gap-3" }), ChatMarker: chatArriving( "flex items-center gap-3 px-4 text-xs text-muted-foreground before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border" ), ChatMarkerText: withProps("span", { className: "shrink-0" }), ChatMessage: chatArriving( `group/message flex max-w-full flex-col gap-1 rounded-lg transition-colors duration-700 ${CHAT_MINE}:items-end data-[flash]:bg-primary/10 motion-reduce:transition-none` ), ChatQuote: withProps("button", { className: "flex max-w-[34ch] min-w-0 flex-col items-start rounded-lg border-l-2 border-primary/40 bg-muted/60 px-2 py-1 text-left text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring", }), ChatQuoteName: withProps("span", { className: "font-medium" }), ChatQuoteExcerpt: withProps("span", { className: "line-clamp-2 text-muted-foreground", }), ChatReplyButton: withProps(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100", }), ChatReplyIcon: ReplyIcon, ChatReplyBar: ({ className, ...props }: ComponentProps<"div">) => ( ), ChatReplyBarIcon: withProps(ReplyIcon, { className: "size-3.5 shrink-0 text-muted-foreground", }), ChatReplyingTo: withProps("span", { className: "min-w-0 flex-1 truncate" }), ChatReplyingName: withProps("span", { className: "font-medium" }), ChatReplyingAside: withProps("span", { className: "text-muted-foreground" }), ChatCancelReplyButton: withProps(Button, { variant: "ghost", size: "icon", className: "size-6 shrink-0 rounded-full", }), ChatMessageBody: withProps("span", { className: "text-sm leading-6 break-words whitespace-pre-wrap transition-opacity group-data-[pending]/message:opacity-60 group-data-[state=mine]/run:max-w-[34ch] group-data-[state=mine]/run:rounded-2xl group-data-[state=mine]/run:bg-muted group-data-[state=mine]/run:px-3 group-data-[state=mine]/run:py-1.5", }), ChatMessageLine: withProps("div", { className: `flex max-w-full items-center gap-1 ${CHAT_MINE}:flex-row-reverse`, }), ChatRetryButton: withProps("button", { className: "font-medium underline underline-offset-2", }), ChatRun: chatArriving( "group/run flex gap-2.5 px-4 data-[state=mine]:flex-row-reverse" ), ChatRunAuthor: withProps("span", { className: "font-medium text-[var(--peer)]", }), ChatRunAvatar: withProps("span", { className: `mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-[var(--peer)] text-[10px] font-medium text-[var(--peer-ink)] select-none ${CHAT_MINE}:hidden`, }), ChatRunColumn: withProps("div", { className: `flex min-w-0 flex-1 flex-col gap-0.5 ${CHAT_MINE}:items-end`, }), ChatRunHeader: withProps("p", { className: "flex items-baseline gap-2 text-xs text-muted-foreground", }), ChatRunList: withProps("ul", { className: `flex w-full flex-col gap-0.5 ${CHAT_MINE}:items-end`, }), ChatRunTime: withProps("time", { className: "tabular-nums" }), ChatSendButton: withProps(Button, { size: "icon", className: "size-9 shrink-0 rounded-xl", }), ChatSendIcon: ArrowUpIcon, ChatSendingIcon: withProps(LoaderIcon, { className: "size-3 animate-spin motion-reduce:animate-none", }), ChatSendingNote: withProps("p", { className: "flex items-center gap-1 px-1 text-xs text-muted-foreground", }), ChatTranscript: withProps("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-y-auto py-3 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", }), // Three dots breathing in turn: an opacity wave, nothing that moves, and still under // reduced motion. ChatTypingDots: () => ( ), ChatTypingLine: withProps("p", { className: "flex items-center gap-1.5" }), ChatTypingRow: withProps("div", { className: "h-6 px-4 text-xs text-muted-foreground", }), ChatWebAddress: withProps("a", { className: "underline decoration-current/40 underline-offset-2 hover:decoration-current", }), DoorFrame: withProps("div", { className: "@container/door w-full rounded-2xl border bg-background p-4 text-foreground @2xl/door:p-6", }), DoorLayout: withProps("div", { className: "grid items-center gap-6 @2xl/door:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]", }), DoorMirror: withProps("div", { className: "relative aspect-video w-full overflow-hidden rounded-2xl bg-muted", }), DoorCameraOffNote: withProps("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 text-muted-foreground", }), DoorCameraOffBadge: withProps("span", { className: "grid size-16 place-items-center rounded-full bg-background/70", }), DoorCameraOffIcon: withProps(UserRoundIcon, { className: "size-7" }), DoorCameraOffText: withProps("p", { className: "text-sm" }), DoorSelfPicture: withProps("video", { className: "absolute inset-0 size-full -scale-x-100 object-cover", }), DoorDeniedAlert: ({ title, children, className, ...props }) => ( {title} {children} ), DoorMicLevel: withProps("span", { className: "absolute bottom-5 left-4 hidden h-1.5 w-20 overflow-hidden rounded-full bg-foreground/15 before:block before:h-full before:w-[calc(var(--level,0)*100%)] before:rounded-full before:bg-primary @md/door:block", }), DoorToggles: withProps("div", { className: "absolute inset-x-0 bottom-3 flex justify-center gap-3", }), DoorMicToggle: withProps("button", { className: `group/mic ${DOOR_TOGGLE}` }), DoorMicOnIcon: withProps(MicIcon, { className: "hidden size-5 group-data-[active]/mic:block", }), DoorMicOffIcon: withProps(MicOffIcon, { className: "size-5 group-data-[active]/mic:hidden", }), DoorCameraToggle: withProps("button", { className: `group/cam ${DOOR_TOGGLE}`, }), DoorCameraOnIcon: withProps(VideoIcon, { className: "hidden size-5 group-data-[active]/cam:block", }), DoorCameraOffToggleIcon: withProps(VideoOffIcon, { className: "size-5 group-data-[active]/cam:hidden", }), DoorSide: withProps("div", { className: "flex min-w-0 flex-col gap-5" }), DoorHeading: withProps("div", { className: "flex flex-col gap-2" }), DoorTitle: withProps("h2", { className: "text-2xl font-semibold tracking-tight", }), DoorInsideRow: withProps("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", }), DoorFaces: withProps("span", { className: "flex -space-x-2" }), DoorFace: withProps("span", { className: "grid size-7 place-items-center rounded-full bg-[var(--peer)] text-[10px] font-medium text-[var(--peer-ink)] ring-2 ring-background select-none", }), DoorInsideText: withProps("p", {}), DoorNameField: withProps("label", { className: "flex flex-col gap-1.5 text-sm font-medium", }), DoorNameInput: Input, DoorDeviceRows: withProps("div", { className: "grid gap-2" }), DoorDeviceMenu: DropdownMenu, DoorDeviceTrigger: withProps(DropdownMenuTrigger, { render: (