canvu-react 0.3.5

package/dist/realtime.d.cts

@@ -0,0 +1,309 @@
+import { P as PlacementPreview, R as RemotePresenceMarkupStroke, q as RemotePresencePeer, r as RealtimeConnectionState, j as VectorViewportHandle, V as VectorToolDefinition, k as VectorViewportProps, C as CanvasPlugin, d as CanvasPluginRenderContext } from './types-D1ftVsOQ.cjs';
+export { s as PresenceOverlayRenderContext } from './types-D1ftVsOQ.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as Camera2D } from './camera-BwQjm5oh.cjs';
+import { V as VectorSceneItem, R as Rect } from './types-CB0TZZuk.cjs';
+import { ReactNode, RefObject } from 'react';
+import { a as VectorCanvasRemoteAdapter } from './types-B58i5k-u.cjs';
+
+/**
+ * Maps a local {@link PlacementPreview} stroke to {@link RemotePresenceMarkupStroke} for broadcasting.
+ * Returns `null` when there is no in-progress stroke.
+ */
+declare function remoteMarkupStrokeFromPlacementPreview(preview: PlacementPreview | null): RemotePresenceMarkupStroke | null;
+
+type PresenceRemoteLayerProps = {
+    camera: Camera2D;
+    /** Bump when camera changes (same as {@link InteractionOverlay}). */
+    cameraVersion: number;
+    peers: readonly RemotePresencePeer[];
+};
+/**
+ * World-space SVG overlay: remote cursors + in-progress markup strokes.
+ * Usually passed via {@link VectorViewport} `remotePresence` or `presenceOverlay`.
+ */
+declare function PresenceRemoteLayer({ camera, cameraVersion: _cameraVersion, peers, }: PresenceRemoteLayerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Deterministic accent from a peer id when `color` is not provided.
+ */
+declare function defaultPresenceColorForId(id: string): string;
+
+type RealtimeSessionPeer = RemotePresencePeer & {
+    readonly clientId: string;
+    readonly peerId: string;
+    readonly roomId: string;
+    readonly joinedAt: number;
+    readonly lastSeenAt: number;
+    readonly isSelf: boolean;
+    readonly connectionState?: RealtimeConnectionState;
+};
+type RealtimeDocumentSnapshot = {
+    readonly revision: number;
+    readonly items: VectorSceneItem[];
+    readonly updatedAt: number;
+    readonly updatedByClientId?: string;
+};
+type RealtimeConnectionInfo = {
+    readonly state: RealtimeConnectionState;
+    readonly connected: boolean;
+    readonly roomId: string;
+    readonly clientId: string | null;
+    readonly retryCount: number;
+    readonly lastConnectedAt: number | null;
+    readonly lastMessageAt: number | null;
+    readonly lastPongAt: number | null;
+    readonly lastError: string | null;
+};
+type RealtimePresencePayload = {
+    readonly cursor: {
+        readonly x: number;
+        readonly y: number;
+    } | null;
+    readonly markupStroke?: RemotePresenceMarkupStroke | null;
+    readonly activeTool?: string;
+};
+type RealtimeClientPeer = {
+    readonly clientId: string;
+    readonly peerId: string;
+    readonly displayName?: string;
+    readonly color?: string;
+    readonly image?: string;
+};
+type RealtimeClientMessage = {
+    readonly type: "session:join";
+    readonly roomId: string;
+    readonly peer: RealtimeClientPeer;
+} | {
+    readonly type: "session:leave";
+    readonly roomId: string;
+    readonly clientId: string;
+} | {
+    readonly type: "session:ping";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly sentAt: number;
+} | {
+    readonly type: "presence:update";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly presence: RealtimePresencePayload;
+} | {
+    readonly type: "document:update";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly baseRevision: number;
+    readonly items: VectorSceneItem[];
+};
+type RealtimeServerMessage = {
+    readonly type: "session:welcome";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly serverTime: number;
+    readonly document: RealtimeDocumentSnapshot;
+    readonly peers: RealtimeSessionPeer[];
+} | {
+    readonly type: "session:peer-joined";
+    readonly roomId: string;
+    readonly peer: RealtimeSessionPeer;
+} | {
+    readonly type: "session:peer-left";
+    readonly roomId: string;
+    readonly clientId: string;
+} | {
+    readonly type: "session:pong";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly sentAt: number;
+    readonly serverTime: number;
+} | {
+    readonly type: "session:error";
+    readonly roomId?: string;
+    readonly code: string;
+    readonly message: string;
+} | {
+    readonly type: "presence:sync";
+    readonly roomId: string;
+    readonly peers: RealtimeSessionPeer[];
+    readonly serverTime: number;
+} | {
+    readonly type: "document:sync";
+    readonly roomId: string;
+    readonly document: RealtimeDocumentSnapshot;
+} | {
+    readonly type: "document:resync-required";
+    readonly roomId: string;
+    readonly reason: string;
+    readonly document: RealtimeDocumentSnapshot;
+};
+declare function parseRealtimeClientMessage(value: unknown): RealtimeClientMessage | undefined;
+declare function parseRealtimeServerMessage(value: unknown): RealtimeServerMessage | undefined;
+
+type RealtimeSessionPanelProps = {
+    /** @default "Session" */
+    title?: string;
+    /** Shown in the participant list (ids + optional display names from your presence layer). */
+    peers: readonly (RealtimeSessionPeer | {
+        id: string;
+        displayName?: string;
+        color?: string;
+        image?: string;
+        isSelf?: boolean;
+    })[];
+    /** @default true */
+    connected?: boolean;
+    connectionState?: RealtimeConnectionState;
+    roomId?: string;
+    children?: ReactNode;
+};
+/**
+ * Minimal roster + connection status, top-center above the viewport.
+ * Pair with {@link realtimeSessionPlugin} and {@link VectorViewport} presence props.
+ */
+declare function RealtimeSessionPanel({ title, peers, connected, connectionState, roomId, children, }: RealtimeSessionPanelProps): react_jsx_runtime.JSX.Element;
+
+type RealtimeCommentsAuthor = {
+    peerId: string;
+    displayName: string;
+    color: string;
+    image?: string;
+};
+type UseRealtimeCommentsOptions = {
+    items: readonly VectorSceneItem[];
+    onItemsChange: (items: VectorSceneItem[]) => void;
+    author: RealtimeCommentsAuthor;
+    viewportRef?: RefObject<VectorViewportHandle | null>;
+    activeToolId?: string;
+    roomId?: string;
+    setToolId?: (toolId: string) => void;
+    toolAfterDraft?: string;
+    tools?: readonly VectorToolDefinition[];
+    composerTitle?: string;
+    composerDescription?: string;
+    composerPlaceholder?: string;
+    cancelLabel?: string;
+    submitLabel?: string;
+    submitHint?: string;
+};
+type RealtimeCommentsViewportBindings = Pick<VectorViewportProps, "customPlacement" | "onItemsChange" | "onCameraChange">;
+type UseRealtimeCommentsResult = {
+    tools: VectorToolDefinition[];
+    overlay: ReactNode;
+    viewport: RealtimeCommentsViewportBindings;
+    isComposerOpen: boolean;
+    closeComposer: () => void;
+};
+declare function useRealtimeComments({ items, onItemsChange, author, viewportRef, activeToolId, roomId, setToolId, toolAfterDraft, tools: providedTools, composerTitle, composerDescription, composerPlaceholder, cancelLabel, submitLabel, submitHint, }: UseRealtimeCommentsOptions): UseRealtimeCommentsResult;
+
+type RealtimeSessionPeerInput = {
+    id: string;
+    displayName?: string;
+    color?: string;
+    image?: string;
+    clientId?: string;
+};
+type UseRealtimeSessionOptions = {
+    url: string;
+    roomId: string;
+    peer: RealtimeSessionPeerInput;
+    enabled?: boolean;
+    reconnect?: boolean;
+    heartbeatMs?: number;
+    maxReconnectDelayMs?: number;
+    initialReconnectDelayMs?: number;
+    connectTimeoutMs?: number;
+    onError?: (message: string) => void;
+};
+type RealtimeViewportPresenceBindings = Pick<VectorViewportProps, "remotePresence" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange">;
+type UseRealtimeSessionResult = {
+    connection: RealtimeConnectionInfo;
+    sessionPeers: RealtimeSessionPeer[];
+    remotePresence: RealtimeSessionPeer[];
+    remoteAdapter: VectorCanvasRemoteAdapter;
+    document: RealtimeDocumentSnapshot | null;
+    bindViewportPresence: (options?: {
+        activeTool?: string;
+    }) => RealtimeViewportPresenceBindings;
+    disconnect: () => void;
+    reconnectNow: () => void;
+};
+declare function useRealtimeSession(options: UseRealtimeSessionOptions): UseRealtimeSessionResult;
+
+type RealtimeCollaborationPluginOptions = UseRealtimeSessionOptions & {
+    /** Enable or disable the built-in session panel. Default: `true`. */
+    showSessionPanel?: boolean;
+    /** Optional visual customization for the built-in session panel. */
+    sessionPanel?: Partial<Omit<RealtimeSessionPanelProps, "peers" | "connected" | "connectionState" | "roomId">>;
+    /**
+     * Enable or configure the built-in collaborative comments experience.
+     *
+     * Pass `false` to disable comments entirely. When omitted, comments are enabled.
+     */
+    comments?: false | Omit<UseRealtimeCommentsOptions, "items" | "onItemsChange" | "author" | "viewportRef" | "roomId" | "setToolId">;
+};
+/**
+ * High-level plug and play collaboration plugin for `VectorViewport`.
+ *
+ * Use this when you want realtime presence, session UI, collaborative comments, and document sync
+ * without manually wiring `useRealtimeSession`, `useRealtimeComments`, or extra viewport props.
+ *
+ * For advanced customizations and bespoke UIs, use `useRealtimeSession(...)` and
+ * `useRealtimeComments(...)` directly.
+ */
+declare function realtimeCollaborationPlugin(options: RealtimeCollaborationPluginOptions): CanvasPlugin;
+
+type RealtimeCommentData = {
+    body: string;
+    createdAt: number;
+    authorPeerId: string;
+    authorDisplayName: string;
+    authorColor: string;
+    authorImage: string;
+};
+type RealtimeCommentsOverlayProps = {
+    items: readonly VectorSceneItem[];
+    onItemsChange?: (items: VectorSceneItem[]) => void;
+    isDragEnabled?: boolean;
+    cameraVersion: number;
+    viewportRef?: CanvasPluginRenderContext["viewportRef"];
+};
+type RealtimeCommentsPluginOptions = Omit<RealtimeCommentsOverlayProps, "viewportRef">;
+/** Dedicated collaboration tool; unlike `text`, this opens a comment composer flow. */
+declare const REALTIME_COMMENT_TOOL: VectorToolDefinition;
+/**
+ * Generates a tiny inline avatar so comments carry a portable visual identity even without a user photo API.
+ */
+declare function createRealtimeCommentAvatarDataUrl(displayName: string, color: string): string;
+declare function createRealtimeCommentDraftItem(id: string, bounds: Rect, seedColor?: string): VectorSceneItem;
+declare function createRealtimeCommentItem(id: string, bounds: Rect, comment: RealtimeCommentData): VectorSceneItem;
+declare function isRealtimeCommentDraftItem(item: VectorSceneItem): boolean;
+declare function isRealtimeCommentItem(item: VectorSceneItem): boolean;
+declare function getRealtimeCommentData(item: VectorSceneItem): RealtimeCommentData | null;
+/**
+ * Adds the comment tool without replacing the native text tool.
+ * By default it is inserted right after `text`, or appended when `text` is absent.
+ */
+declare function withRealtimeCommentTool(tools: readonly VectorToolDefinition[]): VectorToolDefinition[];
+declare function RealtimeCommentsOverlay({ items, onItemsChange, isDragEnabled, cameraVersion, viewportRef, }: RealtimeCommentsOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function realtimeCommentsPlugin(options: RealtimeCommentsPluginOptions): CanvasPlugin;
+
+type RealtimeSessionPluginOptions = RealtimeSessionPanelProps;
+/**
+ * Optional UI roster for who is in the session (your WebSocket layer fills `peers`).
+ * World-space cursors and strokes use {@link VectorViewport} `remotePresence` and
+ * `onWorldPointerMove` — this plugin only renders a small panel in the viewport plugin layer.
+ *
+ * @example
+ * ```tsx
+ * <VectorViewport
+ *   items={doc.items}
+ *   onItemsChange={doc.onItemsChange}
+ *   plugins={[
+ *     realtimeSessionPlugin({ peers: presenceRoster, connected: wsOpen }),
+ *   ]}
+ * />
+ * ```
+ */
+declare function realtimeSessionPlugin(options: RealtimeSessionPluginOptions): CanvasPlugin;
+
+export { PresenceRemoteLayer, type PresenceRemoteLayerProps, REALTIME_COMMENT_TOOL, type RealtimeClientMessage, type RealtimeCollaborationPluginOptions, type RealtimeCommentData, type RealtimeCommentsAuthor, RealtimeCommentsOverlay, type RealtimeCommentsOverlayProps, type RealtimeCommentsPluginOptions, type RealtimeCommentsViewportBindings, type RealtimeConnectionInfo, RealtimeConnectionState, type RealtimeDocumentSnapshot, type RealtimePresencePayload, type RealtimeServerMessage, RealtimeSessionPanel, type RealtimeSessionPanelProps, type RealtimeSessionPeer, type RealtimeSessionPluginOptions, type RealtimeViewportPresenceBindings, RemotePresenceMarkupStroke, RemotePresencePeer, type UseRealtimeCommentsOptions, type UseRealtimeCommentsResult, type UseRealtimeSessionOptions, type UseRealtimeSessionResult, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimeSession, withRealtimeCommentTool };

package/dist/realtime.d.ts

@@ -0,0 +1,309 @@
+import { P as PlacementPreview, R as RemotePresenceMarkupStroke, q as RemotePresencePeer, r as RealtimeConnectionState, j as VectorViewportHandle, V as VectorToolDefinition, k as VectorViewportProps, C as CanvasPlugin, d as CanvasPluginRenderContext } from './types--ALu1mF-.js';
+export { s as PresenceOverlayRenderContext } from './types--ALu1mF-.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as Camera2D } from './camera-KwCYYPhm.js';
+import { V as VectorSceneItem, R as Rect } from './types-CB0TZZuk.js';
+import { ReactNode, RefObject } from 'react';
+import { a as VectorCanvasRemoteAdapter } from './types-DgEArHkA.js';
+
+/**
+ * Maps a local {@link PlacementPreview} stroke to {@link RemotePresenceMarkupStroke} for broadcasting.
+ * Returns `null` when there is no in-progress stroke.
+ */
+declare function remoteMarkupStrokeFromPlacementPreview(preview: PlacementPreview | null): RemotePresenceMarkupStroke | null;
+
+type PresenceRemoteLayerProps = {
+    camera: Camera2D;
+    /** Bump when camera changes (same as {@link InteractionOverlay}). */
+    cameraVersion: number;
+    peers: readonly RemotePresencePeer[];
+};
+/**
+ * World-space SVG overlay: remote cursors + in-progress markup strokes.
+ * Usually passed via {@link VectorViewport} `remotePresence` or `presenceOverlay`.
+ */
+declare function PresenceRemoteLayer({ camera, cameraVersion: _cameraVersion, peers, }: PresenceRemoteLayerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Deterministic accent from a peer id when `color` is not provided.
+ */
+declare function defaultPresenceColorForId(id: string): string;
+
+type RealtimeSessionPeer = RemotePresencePeer & {
+    readonly clientId: string;
+    readonly peerId: string;
+    readonly roomId: string;
+    readonly joinedAt: number;
+    readonly lastSeenAt: number;
+    readonly isSelf: boolean;
+    readonly connectionState?: RealtimeConnectionState;
+};
+type RealtimeDocumentSnapshot = {
+    readonly revision: number;
+    readonly items: VectorSceneItem[];
+    readonly updatedAt: number;
+    readonly updatedByClientId?: string;
+};
+type RealtimeConnectionInfo = {
+    readonly state: RealtimeConnectionState;
+    readonly connected: boolean;
+    readonly roomId: string;
+    readonly clientId: string | null;
+    readonly retryCount: number;
+    readonly lastConnectedAt: number | null;
+    readonly lastMessageAt: number | null;
+    readonly lastPongAt: number | null;
+    readonly lastError: string | null;
+};
+type RealtimePresencePayload = {
+    readonly cursor: {
+        readonly x: number;
+        readonly y: number;
+    } | null;
+    readonly markupStroke?: RemotePresenceMarkupStroke | null;
+    readonly activeTool?: string;
+};
+type RealtimeClientPeer = {
+    readonly clientId: string;
+    readonly peerId: string;
+    readonly displayName?: string;
+    readonly color?: string;
+    readonly image?: string;
+};
+type RealtimeClientMessage = {
+    readonly type: "session:join";
+    readonly roomId: string;
+    readonly peer: RealtimeClientPeer;
+} | {
+    readonly type: "session:leave";
+    readonly roomId: string;
+    readonly clientId: string;
+} | {
+    readonly type: "session:ping";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly sentAt: number;
+} | {
+    readonly type: "presence:update";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly presence: RealtimePresencePayload;
+} | {
+    readonly type: "document:update";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly baseRevision: number;
+    readonly items: VectorSceneItem[];
+};
+type RealtimeServerMessage = {
+    readonly type: "session:welcome";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly serverTime: number;
+    readonly document: RealtimeDocumentSnapshot;
+    readonly peers: RealtimeSessionPeer[];
+} | {
+    readonly type: "session:peer-joined";
+    readonly roomId: string;
+    readonly peer: RealtimeSessionPeer;
+} | {
+    readonly type: "session:peer-left";
+    readonly roomId: string;
+    readonly clientId: string;
+} | {
+    readonly type: "session:pong";
+    readonly roomId: string;
+    readonly clientId: string;
+    readonly sentAt: number;
+    readonly serverTime: number;
+} | {
+    readonly type: "session:error";
+    readonly roomId?: string;
+    readonly code: string;
+    readonly message: string;
+} | {
+    readonly type: "presence:sync";
+    readonly roomId: string;
+    readonly peers: RealtimeSessionPeer[];
+    readonly serverTime: number;
+} | {
+    readonly type: "document:sync";
+    readonly roomId: string;
+    readonly document: RealtimeDocumentSnapshot;
+} | {
+    readonly type: "document:resync-required";
+    readonly roomId: string;
+    readonly reason: string;
+    readonly document: RealtimeDocumentSnapshot;
+};
+declare function parseRealtimeClientMessage(value: unknown): RealtimeClientMessage | undefined;
+declare function parseRealtimeServerMessage(value: unknown): RealtimeServerMessage | undefined;
+
+type RealtimeSessionPanelProps = {
+    /** @default "Session" */
+    title?: string;
+    /** Shown in the participant list (ids + optional display names from your presence layer). */
+    peers: readonly (RealtimeSessionPeer | {
+        id: string;
+        displayName?: string;
+        color?: string;
+        image?: string;
+        isSelf?: boolean;
+    })[];
+    /** @default true */
+    connected?: boolean;
+    connectionState?: RealtimeConnectionState;
+    roomId?: string;
+    children?: ReactNode;
+};
+/**
+ * Minimal roster + connection status, top-center above the viewport.
+ * Pair with {@link realtimeSessionPlugin} and {@link VectorViewport} presence props.
+ */
+declare function RealtimeSessionPanel({ title, peers, connected, connectionState, roomId, children, }: RealtimeSessionPanelProps): react_jsx_runtime.JSX.Element;
+
+type RealtimeCommentsAuthor = {
+    peerId: string;
+    displayName: string;
+    color: string;
+    image?: string;
+};
+type UseRealtimeCommentsOptions = {
+    items: readonly VectorSceneItem[];
+    onItemsChange: (items: VectorSceneItem[]) => void;
+    author: RealtimeCommentsAuthor;
+    viewportRef?: RefObject<VectorViewportHandle | null>;
+    activeToolId?: string;
+    roomId?: string;
+    setToolId?: (toolId: string) => void;
+    toolAfterDraft?: string;
+    tools?: readonly VectorToolDefinition[];
+    composerTitle?: string;
+    composerDescription?: string;
+    composerPlaceholder?: string;
+    cancelLabel?: string;
+    submitLabel?: string;
+    submitHint?: string;
+};
+type RealtimeCommentsViewportBindings = Pick<VectorViewportProps, "customPlacement" | "onItemsChange" | "onCameraChange">;
+type UseRealtimeCommentsResult = {
+    tools: VectorToolDefinition[];
+    overlay: ReactNode;
+    viewport: RealtimeCommentsViewportBindings;
+    isComposerOpen: boolean;
+    closeComposer: () => void;
+};
+declare function useRealtimeComments({ items, onItemsChange, author, viewportRef, activeToolId, roomId, setToolId, toolAfterDraft, tools: providedTools, composerTitle, composerDescription, composerPlaceholder, cancelLabel, submitLabel, submitHint, }: UseRealtimeCommentsOptions): UseRealtimeCommentsResult;
+
+type RealtimeSessionPeerInput = {
+    id: string;
+    displayName?: string;
+    color?: string;
+    image?: string;
+    clientId?: string;
+};
+type UseRealtimeSessionOptions = {
+    url: string;
+    roomId: string;
+    peer: RealtimeSessionPeerInput;
+    enabled?: boolean;
+    reconnect?: boolean;
+    heartbeatMs?: number;
+    maxReconnectDelayMs?: number;
+    initialReconnectDelayMs?: number;
+    connectTimeoutMs?: number;
+    onError?: (message: string) => void;
+};
+type RealtimeViewportPresenceBindings = Pick<VectorViewportProps, "remotePresence" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange">;
+type UseRealtimeSessionResult = {
+    connection: RealtimeConnectionInfo;
+    sessionPeers: RealtimeSessionPeer[];
+    remotePresence: RealtimeSessionPeer[];
+    remoteAdapter: VectorCanvasRemoteAdapter;
+    document: RealtimeDocumentSnapshot | null;
+    bindViewportPresence: (options?: {
+        activeTool?: string;
+    }) => RealtimeViewportPresenceBindings;
+    disconnect: () => void;
+    reconnectNow: () => void;
+};
+declare function useRealtimeSession(options: UseRealtimeSessionOptions): UseRealtimeSessionResult;
+
+type RealtimeCollaborationPluginOptions = UseRealtimeSessionOptions & {
+    /** Enable or disable the built-in session panel. Default: `true`. */
+    showSessionPanel?: boolean;
+    /** Optional visual customization for the built-in session panel. */
+    sessionPanel?: Partial<Omit<RealtimeSessionPanelProps, "peers" | "connected" | "connectionState" | "roomId">>;
+    /**
+     * Enable or configure the built-in collaborative comments experience.
+     *
+     * Pass `false` to disable comments entirely. When omitted, comments are enabled.
+     */
+    comments?: false | Omit<UseRealtimeCommentsOptions, "items" | "onItemsChange" | "author" | "viewportRef" | "roomId" | "setToolId">;
+};
+/**
+ * High-level plug and play collaboration plugin for `VectorViewport`.
+ *
+ * Use this when you want realtime presence, session UI, collaborative comments, and document sync
+ * without manually wiring `useRealtimeSession`, `useRealtimeComments`, or extra viewport props.
+ *
+ * For advanced customizations and bespoke UIs, use `useRealtimeSession(...)` and
+ * `useRealtimeComments(...)` directly.
+ */
+declare function realtimeCollaborationPlugin(options: RealtimeCollaborationPluginOptions): CanvasPlugin;
+
+type RealtimeCommentData = {
+    body: string;
+    createdAt: number;
+    authorPeerId: string;
+    authorDisplayName: string;
+    authorColor: string;
+    authorImage: string;
+};
+type RealtimeCommentsOverlayProps = {
+    items: readonly VectorSceneItem[];
+    onItemsChange?: (items: VectorSceneItem[]) => void;
+    isDragEnabled?: boolean;
+    cameraVersion: number;
+    viewportRef?: CanvasPluginRenderContext["viewportRef"];
+};
+type RealtimeCommentsPluginOptions = Omit<RealtimeCommentsOverlayProps, "viewportRef">;
+/** Dedicated collaboration tool; unlike `text`, this opens a comment composer flow. */
+declare const REALTIME_COMMENT_TOOL: VectorToolDefinition;
+/**
+ * Generates a tiny inline avatar so comments carry a portable visual identity even without a user photo API.
+ */
+declare function createRealtimeCommentAvatarDataUrl(displayName: string, color: string): string;
+declare function createRealtimeCommentDraftItem(id: string, bounds: Rect, seedColor?: string): VectorSceneItem;
+declare function createRealtimeCommentItem(id: string, bounds: Rect, comment: RealtimeCommentData): VectorSceneItem;
+declare function isRealtimeCommentDraftItem(item: VectorSceneItem): boolean;
+declare function isRealtimeCommentItem(item: VectorSceneItem): boolean;
+declare function getRealtimeCommentData(item: VectorSceneItem): RealtimeCommentData | null;
+/**
+ * Adds the comment tool without replacing the native text tool.
+ * By default it is inserted right after `text`, or appended when `text` is absent.
+ */
+declare function withRealtimeCommentTool(tools: readonly VectorToolDefinition[]): VectorToolDefinition[];
+declare function RealtimeCommentsOverlay({ items, onItemsChange, isDragEnabled, cameraVersion, viewportRef, }: RealtimeCommentsOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function realtimeCommentsPlugin(options: RealtimeCommentsPluginOptions): CanvasPlugin;
+
+type RealtimeSessionPluginOptions = RealtimeSessionPanelProps;
+/**
+ * Optional UI roster for who is in the session (your WebSocket layer fills `peers`).
+ * World-space cursors and strokes use {@link VectorViewport} `remotePresence` and
+ * `onWorldPointerMove` — this plugin only renders a small panel in the viewport plugin layer.
+ *
+ * @example
+ * ```tsx
+ * <VectorViewport
+ *   items={doc.items}
+ *   onItemsChange={doc.onItemsChange}
+ *   plugins={[
+ *     realtimeSessionPlugin({ peers: presenceRoster, connected: wsOpen }),
+ *   ]}
+ * />
+ * ```
+ */
+declare function realtimeSessionPlugin(options: RealtimeSessionPluginOptions): CanvasPlugin;
+
+export { PresenceRemoteLayer, type PresenceRemoteLayerProps, REALTIME_COMMENT_TOOL, type RealtimeClientMessage, type RealtimeCollaborationPluginOptions, type RealtimeCommentData, type RealtimeCommentsAuthor, RealtimeCommentsOverlay, type RealtimeCommentsOverlayProps, type RealtimeCommentsPluginOptions, type RealtimeCommentsViewportBindings, type RealtimeConnectionInfo, RealtimeConnectionState, type RealtimeDocumentSnapshot, type RealtimePresencePayload, type RealtimeServerMessage, RealtimeSessionPanel, type RealtimeSessionPanelProps, type RealtimeSessionPeer, type RealtimeSessionPluginOptions, type RealtimeViewportPresenceBindings, RemotePresenceMarkupStroke, RemotePresencePeer, type UseRealtimeCommentsOptions, type UseRealtimeCommentsResult, type UseRealtimeSessionOptions, type UseRealtimeSessionResult, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimeSession, withRealtimeCommentTool };