### Basic RTK Network Indicator Setup

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-network-indicator/usage/html-example.md

This example shows how to initialize and configure the RTK Network Indicator component by setting its participant and meeting properties.

```html
<rtk-network-indicator id="rtk-el"></rtk-network-indicator>

<script>
  const el = document.getElementById('rtk-el');

  el.participant = meeting.self;
  el.meeting = meeting;
</script>
```

--------------------------------

### Install RealtimeKit UI and Core

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/README.md

Install the RealtimeKit UI package along with the core RealtimeKit package using npm.

```sh
npm i @cloudflare/realtimekit-ui @cloudflare/realtimekit
```

--------------------------------

### Install All Workspaces

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/AGENTS.md

Installs all dependencies for all defined workspaces in the project.

```bash
npm install
```

--------------------------------

### Initialize RTK Setup Screen in HTML

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-setup-screen/usage/html-example.md

Include the RTK Setup Screen element in your HTML and initialize it with meeting data using JavaScript.

```html
<rtk-setup-screen id="rtk-el" style="height: 360px"></rtk-setup-screen>

<script>
  const el = document.getElementById('rtk-el');
  el.meeting = meeting;
</script>
```

--------------------------------

### Start Development Server

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/AGENTS.md

Launches the dev server, typically for the core package.

```bash
npm run dev
```

--------------------------------

### Install RealtimeKit React UI and Core

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/react-library/README.md

Install the necessary packages for RealtimeKit React UI and the core RealtimeKit library using npm.

```sh
npm i @cloudflare/realtimekit-react-ui @cloudflare/realtimekit
```

--------------------------------

### Configure RTK Notifications with Default Settings

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-notifications/usage/react-example.md

This example shows the initial setup of RtkNotifications with a comprehensive configuration object, including disabling all default notification types and sounds.

```jsx
<RtkNotifications
  meeting={meeting}
  config={{
    config: {
      notifications: {
        participant_joined: false,
        participant_left: false,
        participant_joined_waitlist: false,
        chat: false,
        polls: false,
        webinar: false,
        tab_sync: false,
        recording_started: false,
        recording_stopped: false,
      },
      notification_sounds: {
        participant_left: false,
      },
      participant_joined_sound_notification_limit: 10,
      participant_chat_message_sound_notification_limit: 10,
    },
  }}
/>
```

--------------------------------

### Basic RTKParticipantTile Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-participant-tile/usage/react-example.md

A basic example of the RTKParticipantTile component with a name tag and audio visualizer in the start slot.

```jsx
<RTKParticipantTile participant={meeting.self}>
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer slot="start" />
  </RtkNameTag>
</RTKParticipantTile>
```

--------------------------------

### Basic RTK Participant Tile Setup

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-participant-tile/usage/html-example.md

Demonstrates the default structure of an RTK Participant Tile and how to assign participant data to elements.

```html
<rtk-participant-tile class="rtk-el">
  <rtk-name-tag class="rtk-el">
    <rtk-audio-visualizer class="rtk-el" slot="start"></rtk-audio-visualizer>
  </rtk-name-tag>
</rtk-participant-tile>

<script>
  const elements = document.getElementsByClassName('rtk-el');
  for (const el of elements) {
    el.participant = meeting.self;
  }
</script>
```

--------------------------------

### Basic RtkDialog Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-dialog/usage/react-example.md

Shows how to open and close a dialog using state management. The dialog content can be any React node.

```jsx
function Example() {
  const [showDialog, setShowDialog] = useState(false);

  return (
    <div>
      <RtkButton onClick={() => setShowDialog(true)}>Show Dialog</RtkButton>
      <RtkDialog open={showDialog} onRtkDialogClose={() => setShowDialog(false)}>
        <div
          style={{
            width: '512px',
            backgroundColor: '#000',
            color: '#fff',
            padding: 12,
            borderRadius: 8,
          }}
        >
          <h3>Hello!</h3>
          <p style={{ marginBottom: 0 }}>This is some text inside dialog!</p>
        </div>
      </RtkDialog>
    </div>
  );
}
```

--------------------------------

### Basic RTK Audio Visualizer Setup

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-audio-visualizer/usage/html-example.md

This snippet shows how to initialize the RTK Audio Visualizer component and assign the current meeting participant's data to it.

```html
<rtk-audio-visualizer id="el"></rtk-audio-visualizer>
<script>
  const el = document.getElementById('el');
  el.participant = meeting.self;
</script>
```

--------------------------------

### Basic File Picker Button Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-file-picker-button/usage/html-example.md

Demonstrates the basic setup of a file picker button and listening for file changes. Ensure the element is added to the DOM before attempting to access it.

```html
<rtk-file-picker-button id="file-el" />
<rtk-file-picker-button id="image-el" />

<script>
  const fileEl = document.getElementById('file-el');
  fileEl.addEventListener('fileChange', (event) => {
    console.log('file: ', event.detail);
  });

  const imageEl = document.getElementById('image-el');
  imageEl.filter = 'image/*';
  imageEl.label = 'Upload Image';
  imageEl.icon = 'image';
  imageEl.addEventListener('fileChange', (event) => {
    console.log('image: ', event.detail);
  });
</script>
```

--------------------------------

### Basic RTK Dialog Manager Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-dialog-manager/usage/react-example.md

This example shows how to integrate the RtkDialogManager component with buttons to trigger different dialog states. It uses local state to manage which dialogs are active and updates them via button clicks.

```jsx
function Example() {
  const [states, setStates] = useState({});

  const setState = (s) => setStates((states) => ({ ...states, ...s }));

  return (
    <Row>
      <RtkButton onClick={() => setState({ activeSettings: true })}>
        Show Settings
      </RtkButton>
      <RtkButton onClick={() => setState({ activeLeaveConfirmation: true })}>
        Show Leave Confirmation
      </RtkButton>
      <RtkButton
        onClick={() =>
          setState({
            activePermissionsMessage: { enabled: true, kind: 'audio' },
          })
        }
      >
        Show Permissions Troubleshooting UI
      </RtkButton>
      <RtkButton onClick={() => setState({ activeRemoteAccessManager: true })}>
        Show Remote Access Manager
      </RtkButton>
      <RtkDialogManager
        meeting={meeting}
        states={states}
        onRtkStateUpdate={(e) => setState(e.detail)}
      />
    </Row>
  );
}
```

--------------------------------

### Basic RtkEndedScreen Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-ended-screen/usage/react-example.md

This example shows how to render the RtkEndedScreen component with basic configuration, including a logo design token and custom height.

```jsx
<RtkEndedScreen
  config={{ designTokens: { logo: '/logo/dark.svg' } }}
  style={{ height: '360px' }}
/>
```

--------------------------------

### Basic RTK Poll Component Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-poll/usage/react-example.md

This example shows how to render the RtkPoll component with initial poll data and an event handler for votes.

```jsx
<RtkPoll
  poll={{
    id: 'poll-id',
    question: 'Have you started using rtk yet?',
    options: [
      {
        text: 'Yes',
        votes: [{ id: 'vaibhavs-user-id', name: 'Vaibhav' }],
        count: 0,
      },
      {
        text: 'Nope',
        votes: [],
        count: 0,
      },
    ],
    anonymous: false,
    hideVotes: false,
    createdBy: 'Vaibhav',
    createdByUserId: 'vaibhavs-user-id',
    voted: [],
  }}
  onRtkVotePoll={(e) => {
    console.log('Voted', e.detail);
  }}
/>
```

--------------------------------

### HTML Example of RTK Camera Toggle

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-camera-toggle/usage/html-example.md

Demonstrates how to use the rtk-camera-toggle component with different size and variant attributes. Includes JavaScript to bind meeting data to the elements.

```html
<rtk-camera-toggle size="sm" class="rtk-el"></rtk-camera-toggle>
<rtk-camera-toggle size="lg" class="rtk-el"></rtk-camera-toggle>
<rtk-camera-toggle variant="horizontal" class="rtk-el"></rtk-camera-toggle>

<script>
  const elements = document.getElementsByClassName('rtk-el');
  for (const el of elements) {
    el.meeting = meeting;
  }
</script>
```

--------------------------------

### Basic RTK Mixed Grid Setup

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-mixed-grid/usage/html-example.md

Demonstrates the basic HTML structure, JavaScript initialization, and CSS styling for the RTK Mixed Grid component. Configure participants and styles for optimal display.

```html
<rtk-mixed-grid id="rtk-el"></rtk-mixed-grid>

<script>
  const el = document.getElementBydId('rtk-el');
  el.participants = [meeting.self];
  el.pinnedParticipants = [meeting.self];
  el.screenShareParticipants = [meeting.self];
  el.plugins = [];
</script>

<style>
  rtk-mixed-grid {
    height: 360px;
    width: 100%;
  }
</style>
```

--------------------------------

### Basic RtkSidebar Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-sidebar/usage/react-example.md

Renders a standard RtkSidebar component within a centered layout. Ensure the 'meeting' object is defined in your scope.

```jsx
<Center>
  <RtkSidebar
    defaultSection="participants"
    meeting={meeting}
    style={{ height: '480px' }}
  />
</Center>
```

--------------------------------

### Displaying a Notification with RTK Component

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-notification/usage/html-example.md

This example shows how to initialize the RTK Notification component in HTML and populate it with data using JavaScript. It also includes an event listener for dismiss actions.

```html
<rtk-notification id="rtk-el"></rtk-notification>

<script>
  const el = document.getElementById('rtk-el');

  el.addEventListener('rtkNotificationDismiss', (e) => {
    e.target.remove();
  });

  el.notification = {
    id: 'your-id',
    message: 'Vaibhav says hi!',
    image: 'https://github.com/vaibhavshn.png',
    button: {
      text: 'Say Hi back',
      variant: 'ghost',
      onClick: () => alert('Hey'),
    },
  };
</script>
```

--------------------------------

### Basic RtkEmojiPicker Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-emoji-picker/usage/react-example.md

This example shows how to render the RtkEmojiPicker component and log the selected emoji details to the console when an emoji is clicked.

```jsx
<RtkEmojiPicker
  onRtkEmojiClicked={(e) => console.log('You selected', e.detail)}
/>
```

--------------------------------

### Image File Picker Button with Icon

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-file-picker-button/usage/angular-example.md

This example shows how to configure the file picker to accept only images and display an image icon. The `fileChange` event is emitted when an image is selected.

```html
<rtk-file-picker-button
  filter="image/*"
  label="Upload Image"
  icon="image"
  (fileChange)="onImageChange($event)"
></rtk-file-picker-button>
```

--------------------------------

### Basic RtkAvatar Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-avatar/usage/react-example.md

Demonstrates how to use the RtkAvatar component with different size props. The 'md' size example also shows how to pass participant data.

```jsx
<Row>
  <RtkAvatar size="sm" />
  <RtkAvatar size="md" participant={meeting.self} />
  <RtkAvatar size="lg" />
</Row>
```

--------------------------------

### RTKParticipantTile with Gradient Variant

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-participant-tile/usage/react-example.md

Shows how to use the gradient variant of RTKParticipantTile with a bottom-center name tag and audio visualizer in the start slot.

```jsx
<RTKParticipantTile
  participant={meeting.self}
  nameTagPosition="bottom-center"
  variant="gradient"
>
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer slot="start" />
  </RtkNameTag>
</RTKParticipantTile>
```

--------------------------------

### Basic RtkScreenshareView Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-screenshare-view/usage/react-example.md

This example shows how to embed a participant's screen share using RtkScreenshareView. It includes a name tag and an audio visualizer for the participant.

```jsx
<RtkScreenshareView participant={meeting.self} style={{ height: '480px' }}>
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer slot="start" participant={meeting.self} />
  </RtkNameTag>
</RtkScreenshareView>
```

--------------------------------

### Basic RTK Image Viewer Initialization

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-image-viewer/usage/html-example.md

Initialize the RTK Image Viewer by setting its 'image' property with a valid image link. This example demonstrates how to display a single image.

```html
<rtk-image-viewer id="rtk-el"></rtk-image-viewer>

<script>
  const el = document.getElementById('rtk-el');
  el.image = {
    type: 'image',
    link: 'https://images.unsplash.com/photo-1657788913374-11f55e6afefe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1636&q=80',
  };
</script>
```

--------------------------------

### Initialize RTK Ended Screen with Configuration

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-ended-screen/usage/html-example.md

This example shows how to embed the RTK Ended Screen component in HTML and configure it using JavaScript. Set the 'config' property to customize elements like the logo.

```html
<rtk-ended-screen id="rtk-el" style="height: 360px"></rtk-ended-screen>

<script>
  const el = document.getElementById('rtk-el');
  el.config = { designTokens: { logo: '/logo/dark.svg' } };
</script>
```

--------------------------------

### Initialize and Manage Attachment View

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-draft-attachment-view/usage/html-example.md

This example shows how to initialize the rtk-draft-attachment-view component, set its attachment property, and handle the deleteAttachment event.

```html
<rtk-draft-attachment-view id="rtk-el" />

<script>
  const el = document.getElementById('rtk-el');
  el.attachment = { type: 'image', file: new File() };
  el.addEventListener('deleteAttachment', () => {
    el.attachment = null;
  });
</script>
```

--------------------------------

### RTK Settings Component HTML Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-settings/usage/html-example.md

Shows how to include the RTK Settings component in HTML for both desktop and mobile views. The script assigns meeting data to the elements, and styles define their dimensions.

```html
<rtk-settings class="rtk-el"></rtk-settings>

<rtk-settings size="sm" class="rtk-el"></rtk-settings>

<script>
  const elements = document.getElementsByClassName('rtk-el');
  for (const el of elements) {
    el.meeting = meeting;
  }
</script>

<style>
  rtk-settings {
    height: 480px;
    width: '100%';
    max-width: 720px;
  }
  rtk-settings[size='sm'] {
    max-width: 360px;
  }
</style>
```

--------------------------------

### Basic HTML and JavaScript Setup for RTK Participants

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-participants/usage/html-example.md

Include the RTK Participants component in your HTML and assign a meeting object to it using JavaScript. Ensure the meeting object is defined elsewhere.

```html
<rtk-participants id="rtk-el"></rtk-participants>

<script>
  document.getElementById('rtk-el').meeting = meeting;
</script>
```

--------------------------------

### RtkSidebar Mobile View Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-sidebar/usage/react-example.md

Displays the RtkSidebar in a full-screen mobile view. This is useful for smaller screens and requires a defined height for the container.

```jsx
<div style={{ position: 'relative', height: '600px' }}>
  <RtkSidebar
    view="full-screen"
    defaultSection="participants"
    meeting={meeting}
    style={{ maxWidth: '360px', margin: 'auto' }}
  />
</div>
```

--------------------------------

### HTML Example with RTK Plugin Main

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-plugin-main/usage/html-example.md

This snippet shows how to embed the rtk-plugin-main component in HTML and set its properties using JavaScript. The component's dimensions can be controlled via CSS.

```html
<rtk-plugin-main id="rtk-el"></rtk-plugin-main>

<script>
  document.getElementById('rtk-el').meeting = meeting;
  document.getElementById('rtk-el').plugin = activePlugin;
</script>

<style>
  rtk-plugin-main {
    height: 480px;
    width: 100%;
    max-width: 320px;
  }
</style>
```

--------------------------------

### RTK Mute All Button HTML Examples

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-mute-all-button/usage/html-example.md

Demonstrates the usage of the rtk-mute-all-button component with different size and variant attributes. Includes script to assign meeting context.

```html
<rtk-mute-all-button size="sm" class="rtk-el"></rtk-mute-all-button>
<rtk-mute-all-button size="lg" class="rtk-el"></rtk-mute-all-button>
<rtk-mute-all-button
  variant="horizontal"
  class="rtk-el"
></rtk-mute-all-button>

<script>
  const elements = document.getElementsByClassName('rtk-el');
  for (const el of elements) {
    el.meeting = meeting;
  }
</script>
```

--------------------------------

### Initialize RTK Header Component

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-header/usage/html-example.md

Include the RTK Header component in your HTML and then use JavaScript to get a reference to the element and assign properties like 'meeting'.

```html
<rtk-header id="rtk-el"></rtk-header>

<script>
  const el = document.getElementById('rtk-el');
  el.meeting = meeting;
</script>
```

--------------------------------

### UI Store Mutation Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/utils/AGENTS.md

Illustrates how to mutate the UI store's state and how these changes are automatically pushed to subscribed DOM elements, triggering Stencil component re-renders.

```typescript
uiStore.state.states = { activeSidebar: true };
// → elementsMap.get('states').forEach(el => el.states = newValue)
// → Stencil @Prop/@Watch triggers re-render automatically
```

--------------------------------

### HTML Example with RTK Dialog Manager

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-dialog-manager/usage/html-example.md

This snippet shows how to integrate the RTK Dialog Manager into an HTML page. It includes buttons to trigger dialogs and JavaScript to manage the dialog states.

```html
<rtk-button onclick="showSettings()">Show Settings</rtk-button>
<rtk-button onclick="showLeaveConfirmation()">Show Settings</rtk-button>

<rtk-dialog-manager id="rtk-el"></rtk-dialog-manager>

<script>
  const dialog = document.getElementById('rtk-el');
  dialog.meeting = meeting;
  let states = {};

  function updateStates() {
    dialog.states = states;
  }

  function stateUpdate(s) {
    states = { ...states, ...s };
    updateStates();
  }

  function showSettings() {
    stateUpdate({ activeSettings: true });
  }

  function showLeaveConfirmation() {
    stateUpdate({ activeLeaveConfirmation: true });
  }

  dialog.addEventListener('rtkStateUpdate', (e) => {
    stateUpdate(e.detail);
  });

  updateStates();
</script>
```

--------------------------------

### Initialize and Set Message for RTK Image Message

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-image-message/usage/html-example.md

This example shows how to initialize the rtk-image-message component and assign a message object to it. Ensure the element exists in the DOM before attempting to access it.

```html
<rtk-image-message id="rtk-el" />

<script>
  const el = document.getElementById('rtk-el');
  el.message = meeting.chat.messages[0];
</script>
```

--------------------------------

### Basic RTK Leave Button Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-leave-button/usage/angular-example.md

Demonstrates the default usage of the RTK Leave Button with small and large sizes. No additional setup is required beyond including the component.

```html
<rtk-leave-button size="sm"></rtk-leave-button>
<rtk-leave-button size="lg"></rtk-leave-button>
```

--------------------------------

### Basic RtkMenu Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-menu/usage/react-example.md

Demonstrates how to use the RtkMenu component with 'top' and 'bottom' placements. The menu content is defined using RtkMenuList and RtkMenuItem. This example shows two menus, one triggering from the top and another from the bottom.

```jsx
<Row style={{ padding: '52px 0 0 0' }}>
  <RtkMenu placement="top">
    <RtkButton slot="trigger">Top Menu</RtkButton>
    <RtkMenuList>
      <RtkMenuItem onClick={() => alert('You clicked: alert()')}>
        alert()
      </RtkMenuItem>
    </RtkMenuList>
  </RtkMenu>

  {/* This menu will be placed at top due to less space */}
  <RtkMenu placement="bottom">
    <RtkButton slot="trigger">Bottom Menu</RtkButton>
    <RtkMenuList>
      <RtkMenuItem onClick={() => alert('You clicked: alert()')}>
        alert()
      </RtkMenuItem>
    </RtkMenuList>
  </RtkMenu>
</Row>
```

--------------------------------

### Basic RtkSimpleGrid Example

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-simple-grid/usage/react-example.md

This snippet shows a basic implementation of the RtkSimpleGrid component, displaying a single participant. Ensure the 'meeting.self' object is properly defined in your application's state.

```jsx
<RtkSimpleGrid
  participants={[meeting.self]}
  style={{ height: '360px', width: '100%' }}
/>
```

--------------------------------

### Angular Component with RTK Idle Screen

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-idle-screen/usage/angular-example.md

This example demonstrates how to use the RtkIdleScreen component within an Angular component. It shows how to reference the component using a template variable and configure it after the view has been initialized.

```html
<rtk-idle-screen #idleScreen style="height: 360px"></rtk-idle-screen>
```

```typescript
class MyComponent {
  title = 'MyComponent';

  @ViewChild('idleScreen') componentIdleScreen: RtkIdleScreen;

  rtkMeeting: RealtimeKitClient; // meeting instance

  async ngAfterViewInit() {
    const config = {
      designTokens: { logo: 'https://docs.rtk.io/logo/dark.svg' },
    };
    this.componentIdleScreen.config = config;
  }
}
```

--------------------------------

### HTML Example: RTK Recording Toggle

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-recording-toggle/usage/html-example.md

Use this snippet to render RTK recording toggles with different sizes and variants. Ensure the 'meeting' object is defined in your JavaScript scope.

```html
<rtk-recording-toggle size="sm" class="rtk-el"></rtk-recording-toggle>
<rtk-recording-toggle size="lg" class="rtk-el"></rtk-recording-toggle>
<rtk-recording-toggle
  variant="horizontal"
  class="rtk-el"
></rtk-recording-toggle>
```

```javascript
const elements = document.getElementsByClassName('rtk-el');
for (const el of elements) {
  el.meeting = meeting;
}
```

--------------------------------

### Basic RTKSelfs Component Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-plugins/usage/react-example.md

This example shows how to render the RTKSelfs component within a centered layout. Ensure the 'meeting' object is properly defined in your component's state or props.

```jsx
<Center>
  <RTKSelfs
    meeting={meeting}
    style={{ height: '480px', maxWidth: '320px', backgroundColor: '#000' }}
  />
</Center>
```

--------------------------------

### Basic RtkCameraToggle Component Setup

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-camera-toggle/usage/angular-example.md

This snippet shows the basic HTML structure for including multiple RtkCameraToggle components in an Angular template. Each component is assigned a template reference variable for later access in the component class.

```html
<rtk-camera-toggle #one></rtk-camera-toggle>
<rtk-camera-toggle #two></rtk-camera-toggle>
<rtk-camera-toggle #three></rtk-camera-toggle>
```

--------------------------------

### Basic RTK Chat Component Setup

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-chat/usage/react-example.md

Renders the RTK Chat component within a centered layout. Ensure the 'meeting' object is properly defined in your component's state.

```jsx
<Center>
  <RtkChat
    meeting={meeting}
    style={{ height: '480px', maxWidth: '320px', backgroundColor: '#000' }}
  />
</Center>
```

--------------------------------

### Initialize and Set Message for RTK File Message

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-file-message/usage/html-example.md

This example shows how to initialize the rtk-file-message component and assign a message object to its 'message' property. Ensure the 'meeting.chat.messages' array is populated before accessing its elements.

```html
<rtk-file-message id="rtk-el" />

<script>
  const el = document.getElementById('rtk-el');
  el.message = meeting.chat.messages[0];
</script>
```

--------------------------------

### Basic RTK Switch Integration

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-switch/usage/html-example.md

Demonstrates how to initialize an RTK Switch component and listen for its change events using vanilla JavaScript.

```html
<rtk-switch id="rtk-el"></rtk-switch>

<script>
  const el = document.getElementById('rtk-el');
  el.addEventListener('rtkChange', (e) => {
    alert('New switch value: ' + e.detail);
  });
</script>
```

--------------------------------

### Initialize RealtimeKit Meeting from URL Parameters

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/index.html

Parses URL parameters to configure meeting settings like environment, auth token, and default audio/video states. Handles joining the meeting if the URL hash is '#join'.

```javascript
const app = () => {
  return {
    meeting: null,
    joining: false,
    status: 'Joining...', 
    data: {
      authToken: '',
      env: 'staging',
      showSetupScreen: false,
      defaults: {
        audio: false,
        video: false,
      },
      addEffectsAddon: false,
      disableEmojiPickerOverride: false,
    },
    async initialize() {
      const url = new URL(window.location.href);
      const authToken = url.searchParams.get('authToken');
      const env = url.searchParams.get('env');
      const showSetupScreen = url.searchParams.get('showSetupScreen');
      const enableVideo = url.searchParams.get('enableVideo');
      const enableAudio = url.searchParams.get('enableAudio');

      if (env) {
        this.data.env = env;
      }
      if (authToken) {
        this.data.authToken = authToken;
      }
      if (showSetupScreen && showSetupScreen !== 'false') {
        this.data.showSetupScreen = true;
      }
      if (enableVideo && enableVideo !== 'false') {
        this.data.defaults.video = true;
      }
      if (enableAudio && enableAudio !== 'false') {
        this.data.defaults.audio = true;
      }

      if (window.location.hash === '#join') {
        this.handleSubmit();
      }
    },
    async addAddonsInConfig(meeting) {
      const RealtimeKitVideoBackground = await import( 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/dist/video-background.js' );
      const { registerAddons } = await import( 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/dist/esm/index.js' );
      const videoBackground = await RealtimeKitVideoBackground.default.init({
        modes: ['blur', 'virtual'],
        meeting,
        images: [
          'https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3',
          'https://images.unsplash.com/photo-1496715976403-7a36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3',
          'https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3',
        ],
        onVideoBackgroundUpdate: ({ backgroundMode, backgroundURL }) => {
          console.log('videoBackgroundUpdated => ', { backgroundMode, backgroundURL });
        },
      });
      let config = registerAddons([videoBackground], meeting);
      this.$refs.meeting.config = config;
    },
    async addConnectedMeetingListeners(meeting) {
      meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {
        newMeeting.__internals__.logger.info('Showing the next meeting UI for breakout', {
          connectedMeetings: {
            movement: {
              destinationMeetingId: newMeeting.meta.meetingId,
              sourceMeetingId: meeting.meta.meetingId,
            },
          },
        });
        this.addAddonsInConfig(newMeeting);
        this.attachMeetingObject(newMeeting, true);
        this.addConnectedMeetingListeners(newMeeting);
      });
    },
    async handleSubmit() {
      if (!this.joining) {
        this.joining = true;
      } else {
        return;
      }
      const { env } = this.data;
      const apiBase = env === 'prod' ? 'https://api.realtime.cloudflare.com' : `https://api.${env}.realtime.cloudflare.com`;
      const baseURI = env === 'prod' ? 'realtime.cloudflare.com' : `${env}.realtime.cloudflare.com`;
      this.status = 'Getting meeting details...';
      const { roomName, defaults, authToken, addEffectsAddon, disableEmojiPickerOverride } = this.data;
      const modules = {
        spotlight: true,
        devTools: {
          logs: true,
        },
      };
      const pluginView = document.createElement('div');
      pluginView.textContent = 'Hello World';
      pluginView.style.cssText = 'display:flex;a';
    }
  };
};
```

--------------------------------

### Styling Slotted Components

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/docs/README.md

Example of using the ::slotted() pseudo-element to style components passed into a slot.

```css
:host(::slotted(rtk-name-tag)) {
  @apply absolute top-3 left-3;
}
```

--------------------------------

### Default Notification Configuration

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-notifications/usage/html-example.md

Pass the default configuration for notifications to the rtk-notifications element. This example shows how to disable the 'participant_left' notification.

```html
<rtk-notifications id="rtk-el"></rtk-notifications>

<script>
  const el = document.getElementById('rtk-el');
  el.meeting = meeting;
  el.config = {
    config: {
      notifications: {
        participant_left: false,
      },
      notification_sounds: {
        participant_left: false,
      },
      notification_duration: {
        participant_left: 1000,
      },
      participant_joined_sound_notification_limit: 10,
      participant_chat_message_sound_notification_limit: 10,
    },
  };
</script>
```

--------------------------------

### Build All Packages

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/AGENTS.md

Compiles and builds all packages within the project.

```bash
npm run build
```

--------------------------------

### Basic HTML and JavaScript Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-image-message-view/usage/html-example.md

Demonstrates how to initialize and set the URL for the RTK Image Message View component using plain HTML and JavaScript.

```html
<rtk-image-message-view id="rtk-el" />

<script>
  const el = document.getElementById('rtk-el');
  el.url = 'https://image.net/peter/jpg';
</script>
```

--------------------------------

### Initialize RealtimeKit Meeting Client

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/README.md

Initialize a meeting object using the RealtimeKitClient. Requires an `authToken` obtained from your backend API. Defaults for video and audio can be set here.

```js
import RealtimeKitClient from '@cloudflare/realtimekit';

const meeting = await RealtimeKitClient.init({
  authToken: '<your-auth-token>',
  defaults: {
    video: true,
    audio: true,
  },
});
```

--------------------------------

### Tailwind CSS Setup Notes

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/AGENTS.md

Configuration details for Tailwind CSS within the Stencil project, including disabled utilities and custom variants.

```css
- `preflight: false` — Shadow DOM manages its own baseline styles.
- All `filter`, `backdrop-filter`, `transform`, `container`, `space` utilities are disabled (bundle size).
- Custom `size-sm:`, `size-md:`, `size-lg:`, `size-xl:` variants map to `:host([size='X']) &` — not media queries.
- `content: ['']` — no purging; PostCSS handles per-component CSS.
- Colors use CSS variables: `rgb(var(--rtk-colors-brand-500, 33 96 253))` — all overridable at runtime.
```

--------------------------------

### Basic RTK Text Composer View Initialization and Event Handling

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-text-composer-view/usage/html-example.md

Initialize the RTK Text Composer View, set its placeholder, and listen for the 'textChange' event to log the input value.

```html
<rtk-text-composer-view id="rtk-el" />

<script>
  const el = document.getElementById('rtk-el');
  el.placeholder = 'Write something...';
  el.addEventListener('textChange', (event) => {
    console.log('text: ', event.detail);
  });
</script>
```

--------------------------------

### Initialize and Manage RTKAudio

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/lib/AGENTS.md

Instantiate RTKAudio to manage MediaStream and HTMLAudioElement for participant audio tracks. Tracks can be added and removed dynamically, and the audio device can be set. Includes error callback registration and playback initiation.

```typescript
const audio = new RTKAudio(meeting, optionalAudioEl?);
audio.addTrack(participantId, mediaStreamTrack);
audio.removeTrack(participantId);
audio.setDevice(deviceId);     // setSinkId — guarded by disableSettingSinkId()
audio.play();                  // triggers playback; handles autoplay NotAllowedError
audio.onError((err) => {});    // register error callback
```

--------------------------------

### Get Custom Icon Pack

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/lib/AGENTS.md

Fetch and merge custom icon packs from a URL. Missing icons will automatically fall back to the `defaultIconPack`.

```typescript
const icons = await getIconPack('https://cdn.example.com/my-icons.json');
// Returns merged pack — missing icons fall back to defaultIconPack
```

--------------------------------

### Basic RTK Meeting Component Integration

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-meeting/usage/html-example.md

Include the RTK Meeting component in your HTML and set its dimensions. This is the initial setup for embedding the meeting functionality.

```html
<rtk-meeting mode="fill" style="height: 480px; width: 100%"></rtk-meeting>
```

--------------------------------

### Basic and Horizontal Fullscreen Toggle

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-fullscreen-toggle/usage/angular-example.md

Demonstrates the basic usage of the rtk-fullscreen-toggle component and its horizontal variant. No additional setup is required beyond including the component in your template.

```html
<rtk-fullscreen-toggle #one></rtk-fullscreen-toggle>
<rtk-fullscreen-toggle #two variant="horizontal"></rtk-fullscreen-toggle>
```

--------------------------------

### Basic RTK Menu Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-menu/usage/html-example.md

Demonstrates how to implement a basic RTK menu with a trigger button and menu items. The menu can be placed at different positions using the 'placement' attribute.

```html
<rtk-menu placement="top">
  <rtk-button slot="trigger">Top Menu</rtk-button>
  <rtk-menu-list>
    <rtk-menu-item onclick="alert('You clicked alert()')">alert()</rtk-button>
  </rtk-menu-list>
</rtk-menu>
```

--------------------------------

### Basic RtkFilePickerButton Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-file-picker-button/usage/react-example.md

Demonstrates how to use the RtkFilePickerButton with a default label and file change handler.

```jsx
<RtkFilePickerButton
  label="Upload File"
  onFileChange={(event) => console.log(event.detail)}
/>
```

--------------------------------

### Basic RtkSpotlightGrid Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-spotlight-grid/usage/react-example.md

Use this snippet to render a basic spotlight grid with active participants and a pinned self-participant. Ensure the `meeting` object is properly initialized.

```jsx
<RtkSpotlightGrid
  layout="row"
  participants={meeting.participants.active.toArray()}
  pinnedParticipants={[meeting.self]}
  style={{ height: '360px', width: '100%' }}
/>
```

--------------------------------

### Initialize RTK Mute All Confirmation Component

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-mute-all-confirmation/usage/html-example.md

Include the component in your HTML and then initialize it by assigning the meeting object to its 'meeting' property.

```html
<rtk-mute-all-confirmation id="rtk-el"></rtk-mute-all-confirmation>

<script>
  const el = document.getElementById('rtk-el');
  el.meeting = meeting;
</script>
```

--------------------------------

### RTK Sidebar Full-Screen Mobile View

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-sidebar/usage/html-example.md

Configures the RTK Sidebar for a full-screen mobile view. This example includes specific styling for the container to manage layout and size.

```html
<div id="app">
  <rtk-sidebar
    view="full-screen"
    default-section="participants"
    id="rtk-el"
  ></rtk-sidebar>
</div>

<script>
  const el = document.getElementById('rtk-el');
  el.meeting = meeting;
</script>

<style>
  #app {
    position: relative;
    height: 600px;
  }

  rtk-sidebar {
    height: 360px;
    max-width: 360px;
    margin: auto;
  }
</style>
```

--------------------------------

### Basic RtkMuteAllButton Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-mute-all-button/usage/react-example.md

Demonstrates how to render RtkMuteAllButton components with different sizes and orientations. Ensure the 'meeting' object is properly initialized.

```jsx
<Center>
  <RtkMuteAllButton size="sm" meeting={meeting} />
  <RtkMuteAllButton size="lg" meeting={meeting} />
  <RtkMuteAllButton variant="horizontal" size="sm" meeting={meeting} />
</Center>
```

--------------------------------

### Initialize RealtimeKit Client

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/index.html

Initializes the RealtimeKit client with room details, authentication, plugins, and modules. It also handles setting the display name from localStorage and adding effects addons.

```javascript
const meeting = await RealtimeKitClient.init({
  roomName,
  baseURI,
  authToken,
  defaults: {
    ...defaults,
    plugins: [
      {
        id: 'hello-world-plugin',
        name: 'Hello World',
        icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ctext x='12' y='16' text-anchor='middle' fill='white' font-size='12'%3EHW%3C/text%3E%3C/svg%3E",
        permissions: { canActivate: true, canDeactivate: true },
        view: pluginView,
      },
    ],
  },
  modules,
});

if (!location.href.includes('http://localhost:3333/')) {
  // set name from localStorage cache
  const name = typeof localStorage !== 'undefined' && localStorage.getItem('rtk-display-name');
  if (name && name.length > 0) {
    meeting.self.setName(name);
  }
}

if (addEffectsAddon) {
  await this.addAddonsInConfig(meeting);
}

this.overrides = {
  disableEmojiPicker: disableEmojiPickerOverride,
};

this.attachMeetingObject(meeting);
this.$refs.meeting.overrides = this.overrides;
this.addConnectedMeetingListeners(meeting);
```

--------------------------------

### HTML Example: RTK Livestream Toggle

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-livestream-toggle/usage/html-example.md

Demonstrates the usage of the rtk-livestream-toggle component with different size and variant attributes. Assigns meeting data to the elements via JavaScript.

```html
<rtk-livestream-toggle size="sm" class="rtk-el"></rtk-livestream-toggle>
<rtk-livestream-toggle size="lg" class="rtk-el"></rtk-livestream-toggle>
<rtk-livestream-toggle
  variant="horizontal"
  class="rtk-el"
></rtk-livestream-toggle>

<script>
  const elements = document.getElementsByClassName('rtk-el');
  for (const el of elements) {
    el.meeting = meeting;
  }
</script>
```

--------------------------------

### Basic RTK Emoji Picker Integration

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-emoji-picker/usage/html-example.md

This example shows how to embed the RTK Emoji Picker in HTML and listen for the 'rtkEmojiClicked' event to log the selected emoji details.

```html
<rtk-emoji-picker id="rtk-el"></rtk-emoji-picker>
<script>
  const el = document.getElementById('rtk-el');

  el.addEventListener('rtkEmojiClicked', (e) => {
    console.log('selected:', e.detail);
  });
</script>
```

--------------------------------

### Basic RtkTooltip Usage with Variants

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-tooltip/usage/react-example.md

Demonstrates the primary and secondary variants of the RtkTooltip component. Ensure the Center component is imported for layout.

```jsx
<Center>
  <RtkTooltip label="Primary tooltip variant" variant="primary">
    <div>Hover over me</div>
  </RtkTooltip>
  <RtkTooltip variant="secondary" label="Secondary tooltip variant">
    <div>Hover over me</div>
  </RtkTooltip>
</Center>
```

--------------------------------

### Initialize RealtimeKit UI App

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/vlist.html

Sets up the RealtimeKit UI application, including message generation, loading, and rendering logic. It configures the message list component with a renderer and a load more function.

```javascript
const app = () => { return { meeting: null, joining: false, status: 'Joining...', data: { roomName: 'kvvuko-cidyur', authToken: '', env: 'preprod', showSetupScreen: false, defaults: { audio: false, video: false, }, }, async handleRoutes() { const { pathname } = window.location; / ** Matches * - /meeting/stage/ [roomName] * - /meeting/join/ [roomName] * - / [roomName] * / const match = /\/(meeting\/(stage|join)\/)?(?<roomName>.\*)/.exec(pathname); const roomName = match.groups.roomName; if (roomName) { this.data.roomName = roomName.replace('/', ''); this.data.env = 'devel'; this.data.showSetupScreen = true; this.data.defaults.audio = true; this.data.defaults.video = true; await this.handleSubmit(); } }, async initialize() { const n = 1000; const c = 50; function rand(min, max) { return Math.floor(min + Math.random() * (max - min + 1)) } function randomId() { return Math.floor(Math.random() * Date.now()).toString(16); } const msgs = new Array(n).fill({}).map((_, index) => { const id = randomId(); const time = new Date(1695555266251 - n); return { id: `${index}_${id}`, text: index + ' => ' + Array.from({ length: rand(3, 30) }).map(() => `${id} `).join('') + id, time: time.setDate(time.getMinutes() + index), index } }); const getMessages = (offset) => { return msgs.slice(offset, offset + c); } this.$refs.list.messages = getMessages(n - c); this.$refs.list.loadMore = async (msg) => { if (msg.index === 0) return; await new Promise((resolve) => setTimeout(resolve, 5000)); return getMessages(msg.index - c); }; this.$refs.list.renderer = (msg, index) => { const $message = document.createElement('rtk-message-view'); $message.authorName = "Peter"; $message.time = new Date(msg.time); $message.innerHTML = `<span>${msg.text}</span>`; return $message; } } }; };
```

--------------------------------

### Controlling RTK Meeting with JavaScript

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-meeting/usage/html-example.md

Use JavaScript to get a reference to the RTK Meeting element and assign a meeting object to it. This allows dynamic control over the meeting instance.

```javascript
const el = document.getElementById('rtk-el');
el.meeting = meeting;
```

--------------------------------

### Initialize RTK Settings Audio Component

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-settings-audio/usage/html-example.md

Include the RTK Settings Audio component in your HTML and then initialize it with meeting data using JavaScript.

```html
<rtk-settings-audio id="rtk-el"></rtk-settings-audio>

<script>
  const el = document.getElementById('rtk-el');
  el.meeting = meeting;
</script>
```

--------------------------------

### Responsive Styling with Size Prop

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/docs/README.md

Shows how to apply styles based on the 'size' attribute reflected in the DOM for responsive design.

```css
:host([size='sm']) {
  @apply inline;
}
```

--------------------------------

### Check Feature Access

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/utils/AGENTS.md

Checks if specific features are accessible to the user. This example demonstrates checking if chat can be viewed and if breakout rooms are enabled. It combines checks from `sidebar.ts` and `flags.ts`.

```typescript
import { canViewChat, canViewPolls } from '../utils/sidebar';
import { isBreakoutRoomsEnabled } from '../utils/flags';

if (canViewChat(meeting) && isBreakoutRoomsEnabled(meeting)) { ... }
```

--------------------------------

### Initialize and Bind Meeting Data to RTK Settings Video

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-settings-video/usage/html-example.md

This snippet shows how to initialize the RTK Settings Video component by referencing its HTML element and binding meeting data to it. Ensure the 'meeting' variable is defined in your scope.

```html
<rtk-settings-video id="rtk-el"></rtk-settings-video>

<script>
  const el = document.getElementById('rtk-el');
  el.meeting = meeting;
</script>
```

--------------------------------

### Basic RTK Breakout Room Toggle Integration

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-breakout-room-toggle/usage/html-example.md

Demonstrates how to include the RTK Breakout Room Toggle component in HTML and initialize it with meeting data using JavaScript.

```html
<rtk-breakout-rooms-toggle
  id="breakout-rooms-toggle"
></rtk-breakout-rooms-toggle>
<script>
  const element = document.getElementById('breakout-rooms-toggle');
  el.meeting = meeting;
</script>
```

--------------------------------

### Add Changes to Staging

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/CONTRIBUTING.md

Stage your changes before committing them.

```bash
git add .
```

--------------------------------

### Basic RtkMicToggle Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-mic-toggle/usage/react-example.md

Demonstrates how to render RtkMicToggle components with different sizes and orientations. Ensure the 'meeting' object is properly initialized.

```jsx
<Center>
  <RtkMicToggle size="sm" meeting={meeting} />
  <RtkMicToggle size="lg" meeting={meeting} />
  <RtkMicToggle variant="horizontal" size="sm" meeting={meeting} />
</Center>
```

--------------------------------

### Basic RTK Grid Setup in Angular Template

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-grid/usage/angular-example.md

This HTML snippet shows how to declare an RTK Grid component in an Angular template, assigning it a template reference variable and setting its height.

```html
<rtk-grid #grid style="height: 360px;"></rtk-grid>
```

--------------------------------

### Generate TypeDoc API Reference

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/AGENTS.md

Generates API documentation in Markdown format using TypeDoc.

```bash
npm run docs:generate
```

--------------------------------

### Basic RtkSettingsToggle Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-settings-toggle/usage/react-example.md

Demonstrates the usage of RtkSettingsToggle with different sizes and a horizontal variant. Ensure the Center component is imported and available in your scope.

```jsx
<Center>
  <RtkSettingsToggle size="sm" />
  <RtkSettingsToggle size="lg" />
  <RtkSettingsToggle variant="horizontal" size="sm" />
</Center>
```

--------------------------------

### Component File Structure

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/docs/README.md

The generated component includes CSS, TSX, and optional test files.

```sh
├── my-component
│   ├── my-component.css
│   ├── my-component.tsx
│   └── test
│       ├── my-component.e2e.ts
│       └── my-component.spec.tsx
```

--------------------------------

### Get User Preferences

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/utils/AGENTS.md

Retrieves user preferences such as `mirrorVideo` and `muteNotificationSounds` from `localStorage` via `graceful-storage`. Note that these preferences are also loaded into `States.prefs` at store initialization, which is the preferred way to access them.

```typescript
import { getUserPreferences } from '../utils/user-prefs';

const { mirrorVideo, muteNotificationSounds } = getUserPreferences();
// Already loaded into States.prefs at store initialization — prefer reading from states.prefs
```

--------------------------------

### Basic RtkFullscreenToggle Usage

Source: https://github.com/cloudflare/realtimekit-ui/blob/staging/packages/core/src/components/rtk-fullscreen-toggle/usage/react-example.md

Demonstrates the basic usage of the RtkFullscreenToggle component and its horizontal variant within a centered layout. Ensure the Center component is imported and available.

```jsx
<Center>
  <RtkFullscreenToggle />
  <RtkFullscreenToggle variant="horizontal" />
</Center>
```