### Project Setup and Commands: npm Installation and Execution

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

These commands outline the process for setting up and running the Astro Collaborative Starter project. It includes installing the necessary package, dependencies for the starter kit, and commands for development, building, and previewing the production build.

```bash
# Install the package in your own project
npm install astro-collab

# Install dependencies for the starter kit
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

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

### Install astro-collab Package

Source: https://github.com/ctnicholas/astro-collaborative-starter/blob/master/README.md

This command installs the 'astro-collab' package, which provides the necessary components for adding collaborative features to your Astro project. Ensure you have npm or a compatible package manager installed.

```bash
npm i astro-collab
```

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

### Astro Configuration: Integrating Lit, Tailwind, and React

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

Configuration for an Astro project, specifying the integration of Lit, Tailwind CSS, and React. This setup allows the project to leverage functionalities from these different technologies.

```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import lit from "@astrojs/lit";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [lit(), tailwind(), react()]
});
```

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

### Astro LiveblocksRoom Component Setup and Usage

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveblocksRoom component is essential for enabling multiplayer functionality. It connects to Liveblocks using a public API key and room ID, managing real-time synchronization. It accepts user details like name, color, status, and picture. This component can be used to wrap collaborative content and dynamically update user properties or switch rooms via JavaScript.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveCursors from 'astro-collab/LiveCursors.astro'
import LiveAvatars from 'astro-collab/LiveAvatars.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
const roomId = 'my-collaborative-room'
---

<LiveblocksRoom
  room-id={roomId}
  public-key={key}
  user-name="Chris"
  user-color="#00ff00"
  user-picture="/avatars/user.png"
  user-status="Available"
>
  <LiveCursors names />
  <LiveAvatars />
  <div>Your collaborative content here</div>
</LiveblocksRoom>

<script>
  // Dynamically update user properties
  window.LiveblocksRoom.setUser({
    name: 'Rachel',
    color: '#ff0000',
    status: 'In a meeting',
    picture: '/avatars/rachel.png'
  })

  // Change rooms dynamically
  window.LiveblocksRoom.setRoom('different-room-id')
</script>
```

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

### LiveblocksRoom Component

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveblocksRoom component is the central wrapper that enables multiplayer functionality. It connects to Liveblocks, manages real-time synchronization, and allows for customization of user properties and room settings.

```APIDOC
## LiveblocksRoom Component

### Description
The LiveblocksRoom component is the core wrapper that enables all multiplayer functionality in the application. It establishes a connection to Liveblocks using a public API key and room identifier, managing the real-time synchronization context for all child components.

### Method
Component Usage (Astro)

### Endpoint
N/A (Client-side component)

### Parameters
#### Attributes
- **room-id** (string) - Required - The unique identifier for the Liveblocks room.
- **public-key** (string) - Required - Your Liveblocks public API key.
- **user-name** (string) - Optional - The display name for the current user.
- **user-color** (string) - Optional - The color associated with the current user.
- **user-picture** (string) - Optional - The URL to the current user's avatar image.
- **user-status** (string) - Optional - The current status of the user (e.g., 'Available', 'In a meeting').

### Request Example
```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
const roomId = 'my-collaborative-room'
---

<LiveblocksRoom
  room-id={roomId}
  public-key={key}
  user-name="Chris"
  user-color="#00ff00"
  user-picture="/avatars/user.png"
  user-status="Available"
>
  <!-- Child components and content -->
</LiveblocksRoom>
```

### Response
#### Client-side API
- **LiveblocksRoom.setUser(userObject)**: Dynamically updates the current user's properties. `userObject` can include `name`, `color`, `status`, `picture`.
- **LiveblocksRoom.setRoom(roomId)**: Dynamically changes the current room.

### Response Example
```javascript
// Dynamically update user properties
window.LiveblocksRoom.setUser({
  name: 'Rachel',
  color: '#ff0000',
  status: 'In a meeting',
  picture: '/avatars/rachel.png'
});

// Change rooms dynamically
window.LiveblocksRoom.setRoom('different-room-id');
```
```

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

### Environment Configuration: Liveblocks API Key

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

This snippet shows how to set the Liveblocks public API key in the project's environment file (.env). This key is essential for secure access to Liveblocks' multiplayer backend services.

```bash
# .env file
PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_live_xxxxxxxxxxxxxxxxxxxxxxxxx
```

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

### Astro LiveCursors Component Configuration and Styling

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveCursors component displays real-time cursor positions of users in a room, enhancing collaborative presence. It offers options for displaying usernames, different movement animations ('quick' or 'perfect'), and specifying a custom selector for pointer events. The component's appearance can be customized using global styles targeting specific parts like the cursor or cursor name.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveCursors from 'astro-collab/LiveCursors.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="cursor-demo" public-key={key}>
  <!-- Basic cursors -->
  <LiveCursors />

  <!-- With usernames displayed -->
  <LiveCursors names />

  <!-- Quick movement (less smooth but faster) -->
  <LiveCursors movement="quick" />

  <!-- Perfect movement (realistic but slightly delayed) -->
  <LiveCursors movement="perfect" />

  <!-- Custom pointer event selector -->
  <LiveCursors selector="body" />
</LiveblocksRoom>

<style is:global>
  /* Customize cursor appearance */
  live-cursor::part(cursor) {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  }

  live-cursor::part(cursor_name) {
    font-weight: 500;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
  }
</style>
```

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

### Display Live Users List in Astro

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveUsers component displays a list of users in a room, showing avatars, names, and status. It can be customized to show specific users (self, others) and adjust avatar sizes. It requires the LiveblocksRoom component to be set up.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveUsers from 'astro-collab/LiveUsers.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="users-demo" public-key={key}>
  <!-- Basic user list -->
  <LiveUsers />

  <!-- Custom avatar size -->
  <LiveUsers size="32" />

  <!-- Show only yourself -->
  <LiveUsers show="self" />

  <!-- Show only others -->
  <LiveUsers show="others" />

  <!-- Custom self suffix (default is " (you)") -->
  <LiveUsers self-suffix=" - this is you" />
</LiveblocksRoom>

<style is:global>
  /* Customize user list appearance */
  live-users::part(user) {
    margin-bottom: 12px;
    padding: 8px;
    background: #f9fafb;
    border-radius: 8px;
  }

  live-users::part(name) {
    font-weight: 500;
    color: #111827;
  }

  live-users::part(status) {
    color: #6b7280;
    font-size: 14px;
  }
</style>
```

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

### LiveAvatars Component

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveAvatars component shows a stack of user avatars currently in the room. It handles fallback placeholders for users without profile pictures, using their color and initials.

```APIDOC
## LiveAvatars Component

### Description
LiveAvatars displays a stack of avatar images for all users currently present in the room. When a user has no picture, it generates a fallback placeholder using the user's color and initials.

### Method
Component Usage (Astro)

### Endpoint
N/A (Client-side component)

### Parameters
#### Attributes
- **size** (string) - Optional - The size of the avatars in pixels (e.g., '32').
- **show** (string) - Optional - Controls which users' avatars are displayed. Options: `self` (only the current user), `others` (all users except the current one).

### Request Example
```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveAvatars from 'astro-collab/LiveAvatars.astro'
const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="avatar-demo" public-key={key}>
  <!-- Basic avatar stack -->
  <LiveAvatars />

  <!-- Custom avatar size (32 pixels) -->
  <LiveAvatars size="32" />

  <!-- Show only current user -->
  <LiveAvatars show="self" />

  <!-- Show only other users -->
  <LiveAvatars show="others" />
</LiveblocksRoom>
```

### Response
#### Success Response (200)
N/A (Component renders UI elements)

#### Response Example
N/A

### Styling
Customizable via CSS Shadow Parts:
- `::part(avatar)`: Styles individual avatar elements.
- `::part(avatar_picture_wrapper)`: Styles the wrapper around the avatar picture.
- `::part(avatar_fallback)`: Styles the fallback placeholder when no user picture is available.
```

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

### Enable Real-time Collaborative Forms in Astro

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveForm component synchronizes form input values across users in real-time. Any input, textarea, or select element with a name attribute within the LiveForm component will be shared. Requires LiveblocksRoom and uses client-side hydration.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveForm from 'astro-collab/LiveForm.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="form-demo" public-key={key}>
  <LiveForm name="registration-form" client:load>
    <div class="form-grid">
      <!-- Text inputs -->
      <label>
        First Name
        <input name="firstname" type="text" placeholder="John" />
      </label>

      <label>
        Last Name
        <input name="lastname" type="text" placeholder="Doe" />
      </label>

      <!-- Number input -->
      <label>
        Age
        <input name="age" type="number" placeholder="25" />
      </label>

      <!-- Select dropdown -->
      <label>
        Country
        <select name="country">
          <option value="us">United States</option>
          <option value="uk">United Kingdom</option>
          <option value="ca">Canada</option>
        </select>
      </label>

      <!-- Checkbox -->
      <label>
        <input name="subscribe" type="checkbox" />
        Subscribe to newsletter
      </label>

      <!-- Color picker -->
      <label>
        Favorite Color
        <input name="color" type="color" />
      </label>

      <!-- Date picker -->
      <label>
        Birth Date
        <input name="birthdate" type="date" />
      </label>

      <!-- Textarea -->
      <label>
        Comments
        <textarea name="comments" rows="4"></textarea>
      </label>
    </div>
  </LiveForm>
</LiveblocksRoom>
```

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

### LiveCursors Component

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveCursors component displays real-time cursor positions of other users in the room. It enhances collaboration by showing user presence and can be configured to show names and adjust movement smoothness.

```APIDOC
## LiveCursors Component

### Description
LiveCursors displays real-time cursor positions for all users in the room, creating a collaborative presence experience. It supports multiple animation modes and can optionally display user names next to cursors.

### Method
Component Usage (Astro)

### Endpoint
N/A (Client-side component)

### Parameters
#### Attributes
- **names** (boolean) - Optional - If true, displays user names next to their cursors.
- **movement** (string) - Optional - Controls cursor animation smoothness. Options: `quick` (faster, less smooth), `perfect` (realistic, slightly delayed).
- **selector** (string) - Optional - A CSS selector to specify the DOM element that should track cursors.

### Request Example
```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveCursors from 'astro-collab/LiveCursors.astro'
const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="cursor-demo" public-key={key}>
  <!-- Basic cursors -->
  <LiveCursors />

  <!-- With usernames displayed -->
  <LiveCursors names />

  <!-- Quick movement (less smooth but faster) -->
  <LiveCursors movement="quick" />

  <!-- Perfect movement (realistic but slightly delayed) -->
  <LiveCursors movement="perfect" />

  <!-- Custom pointer event selector -->
  <LiveCursors selector="body" />
</LiveblocksRoom>
```

### Response
#### Success Response (200)
N/A (Component renders UI elements)

#### Response Example
N/A

### Styling
Customizable via CSS Shadow Parts:
- `::part(cursor)`: Styles the cursor element.
- `::part(cursor_name)`: Styles the name tag displayed with the cursor.
```

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

### LiveDrawing Component: Collaborative Whiteboard in Astro

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveDrawing component provides a collaborative whiteboard functionality powered by tldraw. It allows multiple users to draw, write, and create shapes together in real-time. It can be used with basic configuration or customized with options like hiding the menu or controlling page and zoom visibility.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveDrawing from 'astro-collab/LiveDrawing.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="drawing-demo" public-key={key}>
  <div style="width: 100%; height: 600px;">
    <!-- Basic drawing canvas -->
    <LiveDrawing />

    <!-- Hide menu -->
    <LiveDrawing showMenu={false} />

    <!-- Custom tldraw options -->
    <LiveDrawing
      showMenu={true}
      showPages={false}
      showZoom={true}
    />
  </div>
</LiveblocksRoom>
```

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

### Astro LiveAvatars Component Usage and Customization

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveAvatars component renders a stack of user avatars for individuals present in the room. It supports fallback placeholders generated from user initials and colors when an avatar image is unavailable. Customization options include avatar size, filtering to show only the current user ('self') or others ('others'). Styling can be applied globally to elements like the avatar wrapper and fallback text.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveAvatars from 'astro-collab/LiveAvatars.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="avatar-demo" public-key={key}>
  <!-- Basic avatar stack -->
  <LiveAvatars />

  <!-- Custom avatar size (32 pixels) -->
  <LiveAvatars size="32" />

  <!-- Show only current user -->
  <LiveAvatars show="self" />

  <!-- Show only other users -->
  <LiveAvatars show="others" />
</LiveblocksRoom>

<style is:global>
  /* Customize avatar styling */
  live-avatars::part(avatar) {
    padding: 12px;
    margin-right: 8px;
  }

  live-avatars::part(avatar_picture_wrapper) {
    border: 2px solid black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  live-avatars::part(avatar_fallback) {
    font-weight: 600;
    font-size: 14px;
  }
</style>
```

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

### Update User Presence with LiveUserForm in Astro

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The LiveUserForm component allows users to update their own presence information, such as name, color, picture, and status. These updates are reflected across other collaborative components. It can be controlled via form inputs or programmatically.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import LiveUserForm from 'astro-collab/LiveUserForm.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<LiveblocksRoom room-id="user-form-demo" public-key={key}>
  <LiveUserForm>
    <div class="user-settings">
      <!-- Update username -->
      <label>
        Your Name
        <input name="user-name" type="text" placeholder="Enter your name" />
      </label>

      <!-- Update color as text -->
      <label>
        Color (hex)
        <input name="user-color" type="text" placeholder="#ff0000" />
      </label>

      <!-- Update color with color picker -->
      <label>
        Color Picker
        <input name="user-color" type="color" />
      </label>

      <!-- Update profile picture URL -->
      <label>
        Picture URL
        <input name="user-picture" type="text" placeholder="https://example.com/avatar.jpg" />
      </label>

      <!-- Update status message -->
      <label>
        Status
        <input name="user-status" type="text" placeholder="Available" />
      </label>
    </div>
  </LiveUserForm>
</LiveblocksRoom>

<script>
  // Alternative: Set user properties programmatically
  window.LiveblocksRoom.setUser({
    name: 'Chris',
    color: '#00ff00',
    status: 'In a meeting',
    picture: '/avatars/chris.png'
  })
</script>
```

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

### RandomUserInfo Component: Generate User Properties in Astro

Source: https://context7.com/ctnicholas/astro-collaborative-starter/llms.txt

The RandomUserInfo component generates random user properties, such as name, color, status, and an optional avatar, for demonstration and testing purposes. It's often used in conjunction with LiveblocksRoom and LiveUsers to display these properties in a multiplayer context.

```astro
---
import LiveblocksRoom from 'astro-collab/LiveblocksRoom.astro'
import RandomUserInfo from 'astro-collab/RandomUserInfo.astro'
import LiveUsers from 'astro-collab/LiveUsers.astro'

const key = import.meta.env.PUBLIC_LIVEBLOCKS_PUBLIC_KEY
---

<RandomUserInfo />
<LiveblocksRoom room-id="demo-room" public-key={key}>
  <LiveUsers />
  <!-- Each visitor will have random user properties -->
</LiveblocksRoom>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.