PhiaUi.Components.Collab.Cursor (phia_ui v0.1.17)

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
}

Summary

Functions

collab_cursor(assigns)

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

collab_cursor_chat(assigns)

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

collab_cursors_overlay(assigns)

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

collab_selection(assigns)

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

Functions

collab_cursor(assigns)

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(assigns)

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(assigns)

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(assigns)

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.