# `PhiaUi.Components.Collab.Cursor`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/collab/cursor.ex#L1)

Collaborative cursor and selection components for real-time multiplayer UIs.

Renders remote user cursors, text selections, and inline micro-chat bubbles
over a shared editor or canvas area. The cursor overlay uses the
`PhiaCollabCursors` JS hook for pointer tracking and idle detection, while
the cursor chat uses `PhiaCollabCursorChat` for inline messaging.

## Components

| Component                 | Purpose                                           |
|---------------------------|---------------------------------------------------|
| `collab_cursor/1`         | Single SVG cursor arrow with user name label      |
| `collab_cursors_overlay/1`| Container positioning multiple cursors over content|
| `collab_selection/1`      | Colored rectangle showing another user's selection |
| `collab_cursor_chat/1`    | Cursor with Figma-style inline micro-chat bubble  |

## Cursor map shape

The `collab_cursors_overlay` component accepts a list of cursor maps:

    %{
      id: "cursor-user-1",
      user_name: "Alice",
      color: "#3B82F6",
      x: 120,
      y: 340,
      idle: false
    }

# `collab_cursor`

Renders a single collaborative cursor with an SVG arrow and a name label.

The cursor is absolutely positioned at the given `x`/`y` coordinates within
its parent container. When `idle` is true, the cursor fades to reduced opacity.

## Example

    <.collab_cursor
      id="cursor-alice"
      user_name="Alice"
      color="#3B82F6"
      x={120}
      y={340}
    />

## Attributes

* `id` (`:string`) (required)
* `user_name` (`:string`) (required)
* `color` (`:string`) (required)
* `x` (`:any`) - Defaults to `0`.
* `y` (`:any`) - Defaults to `0`.
* `idle` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

# `collab_cursor_chat`

Renders a collaborative cursor with an optional Figma-style micro-chat bubble.

When `message` is set, displays a chat bubble below the cursor with the
message text. When `show_input` is true, renders a small text input for
composing a micro-chat message. Uses the `PhiaCollabCursorChat` JS hook
for keyboard shortcuts (/ to open, Enter to send, Escape to dismiss).

## Example

    <.collab_cursor_chat
      id="chat-cursor-alice"
      user_name="Alice"
      color="#3B82F6"
      x={200}
      y={150}
      message="Hey, check this out!"
    />

## Attributes

* `id` (`:string`) (required)
* `user_name` (`:string`) (required)
* `color` (`:string`) (required)
* `x` (`:any`) - Defaults to `0`.
* `y` (`:any`) - Defaults to `0`.
* `message` (`:string`) - Defaults to `nil`.
* `show_input` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

# `collab_cursors_overlay`

Renders a transparent overlay container that positions multiple collaborative
cursors over editor or canvas content.

Uses the `PhiaCollabCursors` JS hook to track local pointer movements,
push cursor positions to the server, and apply received remote cursor
positions via DOM transforms.

## Example

    <.collab_cursors_overlay
      id="editor-cursors"
      cursors={@remote_cursors}
    >
      <div>Your editor content here</div>
    </.collab_cursors_overlay>

## Attributes

* `id` (`:string`) (required)
* `cursors` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.

# `collab_selection`

Renders a semi-transparent colored rectangle representing another user's
text selection in a collaborative editor.

The selection is absolutely positioned within its parent container. A small
user name label appears at the top-left corner of the selection region.

## Example

    <.collab_selection
      id="sel-alice"
      color="#3B82F6"
      user_name="Alice"
      top={80}
      left={24}
      width={200}
      height={20}
    />

## Attributes

* `id` (`:string`) (required)
* `color` (`:string`) (required)
* `user_name` (`:string`) (required)
* `top` (`:any`) - Defaults to `0`.
* `left` (`:any`) - Defaults to `0`.
* `width` (`:any`) - Defaults to `0`.
* `height` (`:any`) - Defaults to `0`.
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*