live-cursors 0.1.0

package/dist/cursors-CyiNtLCv.d.mts

@@ -0,0 +1,107 @@
+//#region src/protocol.d.ts
+declare const PROTOCOL_VERSION: 1;
+interface CursorMove {
+  v: typeof PROTOCOL_VERSION;
+  t: "m";
+  id?: string;
+  x: number;
+  y: number;
+  m?: Record<string, unknown>;
+}
+interface CursorLeave {
+  v: typeof PROTOCOL_VERSION;
+  t: "l";
+  id?: string;
+}
+type CursorMessage = CursorMove | CursorLeave;
+/**
+ * Turns wire data into a message, or null when it is unusable.
+ * Coordinates arrive from other clients, so they are clamped rather than trusted.
+ */
+declare function parseMessage(raw: unknown): CursorMessage | null;
+declare function moveMessage(id: string, x: number, y: number, meta?: Record<string, unknown>): CursorMove;
+declare function leaveMessage(id: string): CursorLeave;
+//#endregion
+//#region src/types.d.ts
+interface Point {
+  x: number;
+  y: number;
+}
+interface Size {
+  width: number;
+  height: number;
+}
+interface RemoteCursor {
+  id: string;
+  /** normalized 0..1 within the coordinate space */
+  x: number;
+  y: number;
+  meta?: Record<string, unknown>;
+  updatedAt: number;
+}
+/**
+ * Anything that can carry cursor messages between clients.
+ *
+ * `senderId` is for transports that already know the author of a message
+ * (Laravel Echo presence channels, Supabase Realtime). When present it wins
+ * over the id inside the payload, so a client cannot claim someone else's id.
+ */
+interface CursorTransport {
+  send: (message: CursorMessage) => void;
+  onMessage: (handler: (raw: unknown, senderId?: string) => void) => (() => void) | void;
+  close?: () => void;
+}
+interface PointerLike {
+  clientX: number;
+  clientY: number;
+}
+/**
+ * Maps pointer positions to normalized coordinates and back.
+ *
+ * `viewport` keeps a cursor at the same screen position for everyone regardless of
+ * window size and scroll offset; `element` pins it to content that scrolls with the page.
+ */
+interface CoordinateSpace {
+  toNormalized: (pointer: PointerLike) => Point | null;
+  fromNormalized: (point: Point) => Point;
+  size: () => Size;
+  target: () => HTMLElement | null;
+}
+//#endregion
+//#region src/cursors.d.ts
+interface CursorsOptions {
+  transport: CursorTransport;
+  /** id of the local participant; messages carrying it are ignored on receive */
+  selfId: string;
+  space?: CoordinateSpace;
+  /** how often a move goes out; 40ms is ~25fps and enough for smooth rendering */
+  throttleMs?: number;
+  /** a cursor with no update within this window disappears */
+  ttlMs?: number;
+  sweepMs?: number;
+  /** upper bound on tracked participants — a flooding client cannot grow the map past it */
+  maxRemote?: number;
+  enabled?: boolean;
+  /** extra payload sent with every move; keep it tiny and free of personal data */
+  meta?: () => Record<string, unknown> | undefined;
+  onError?: (error: unknown) => void;
+}
+interface CursorsInstance {
+  attach: (element?: HTMLElement) => () => void;
+  detach: () => void;
+  subscribe: (listener: () => void) => () => void;
+  getSnapshot: () => readonly RemoteCursor[];
+  get: (id: string) => RemoteCursor | undefined;
+  /** drop a cursor now, without waiting for its ttl — e.g. when presence reports someone left */
+  remove: (id: string) => void;
+  /** feed a raw message in by hand — for transports wired outside this instance */
+  ingest: (raw: unknown, senderId?: string) => void;
+  setEnabled: (enabled: boolean) => void;
+  isEnabled: () => boolean;
+  leave: () => void;
+  readonly space: CoordinateSpace;
+  destroy: () => void;
+}
+declare function createCursors(options: CursorsOptions): CursorsInstance;
+//#endregion
+export { CursorTransport as a, RemoteCursor as c, CursorMessage as d, CursorMove as f, parseMessage as g, moveMessage as h, CoordinateSpace as i, Size as l, leaveMessage as m, CursorsOptions as n, Point as o, PROTOCOL_VERSION as p, createCursors as r, PointerLike as s, CursorsInstance as t, CursorLeave as u };

package/dist/dom.d.mts

@@ -0,0 +1,20 @@
+import { c as RemoteCursor, t as CursorsInstance } from "./cursors-CyiNtLCv.mjs";
+//#region src/dom/index.d.ts
+interface RenderCursorsOptions {
+  cursors: CursorsInstance;
+  /** element the overlay is placed in; it needs a non-static position. Defaults to a fixed, viewport-sized overlay */
+  container?: HTMLElement;
+  color?: (cursor: RemoteCursor) => string;
+  label?: (cursor: RemoteCursor) => string | null | undefined;
+  zIndex?: number;
+}
+interface CursorsRenderer {
+  destroy: () => void;
+}
+declare const CURSOR_CSS = "\n.lc-overlay{position:absolute;top:0;left:0;pointer-events:none;overflow:hidden}\n.lc-overlay[data-fixed=true]{position:fixed;inset:0;width:100%;height:100%}\n.lc-cursor{position:absolute;top:0;left:0;color:var(--lc-color,#888);display:flex;align-items:flex-start;gap:2px;will-change:transform;transition:transform var(--lc-transition,80ms) linear}\n.lc-arrow{flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}\n.lc-label{display:flex;align-items:center;gap:4px;margin-top:12px;padding:2px 7px;border-radius:100px;max-width:var(--lc-label-max-width,160px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 11px/1.3 var(--lc-font,system-ui,sans-serif);color:var(--lc-label-color,#fff);background:var(--lc-color,#888);box-shadow:0 2px 8px rgba(0,0,0,.2)}\n@media (prefers-reduced-motion:reduce){.lc-cursor{transition:none}}\n";
+declare function ensureCursorStyles(): void;
+/** Arrow markup; its color comes from the `--lc-color` custom property of the cursor element. */
+declare const ARROW_SVG = "<svg class=\"lc-arrow\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\"><path d=\"M2 2L14.5 8L9 9.5L7 16L2 2Z\" fill=\"currentColor\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/></svg>";
+declare function renderCursors(options: RenderCursorsOptions): CursorsRenderer;
+//#endregion
+export { ARROW_SVG, CURSOR_CSS, CursorsRenderer, RenderCursorsOptions, ensureCursorStyles, renderCursors };

package/dist/dom.mjs

@@ -0,0 +1,97 @@
+import { t as cursorColor } from "./color-CN1S_Vq9.mjs";
+//#region src/dom/index.ts
+const STYLE_ID = "live-cursors-style";
+const CURSOR_CSS = `
+.lc-overlay{position:absolute;top:0;left:0;pointer-events:none;overflow:hidden}
+.lc-overlay[data-fixed=true]{position:fixed;inset:0;width:100%;height:100%}
+.lc-cursor{position:absolute;top:0;left:0;color:var(--lc-color,#888);display:flex;align-items:flex-start;gap:2px;will-change:transform;transition:transform var(--lc-transition,80ms) linear}
+.lc-arrow{flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
+.lc-label{display:flex;align-items:center;gap:4px;margin-top:12px;padding:2px 7px;border-radius:100px;max-width:var(--lc-label-max-width,160px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 11px/1.3 var(--lc-font,system-ui,sans-serif);color:var(--lc-label-color,#fff);background:var(--lc-color,#888);box-shadow:0 2px 8px rgba(0,0,0,.2)}
+@media (prefers-reduced-motion:reduce){.lc-cursor{transition:none}}
+`;
+function ensureCursorStyles() {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = CURSOR_CSS;
+	document.head.append(style);
+}
+/** Arrow markup; its color comes from the `--lc-color` custom property of the cursor element. */
+const ARROW_SVG = `<svg class="lc-arrow" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path d="M2 2L14.5 8L9 9.5L7 16L2 2Z" fill="currentColor" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
+function renderCursors(options) {
+	const { cursors, container, color = (cursor) => cursorColor(cursor.id), label, zIndex = 10 } = options;
+	ensureCursorStyles();
+	const overlay = document.createElement("div");
+	overlay.className = "lc-overlay";
+	overlay.setAttribute("aria-hidden", "true");
+	overlay.style.zIndex = String(zIndex);
+	if (!container) overlay.dataset.fixed = "true";
+	(container ?? document.body).append(overlay);
+	const nodes = /* @__PURE__ */ new Map();
+	let frame = null;
+	const syncSize = () => {
+		if (!container) return;
+		const { width, height } = cursors.space.size();
+		overlay.style.width = `${width}px`;
+		overlay.style.height = `${height}px`;
+	};
+	const paint = () => {
+		frame = null;
+		syncSize();
+		const seen = /* @__PURE__ */ new Set();
+		for (const cursor of cursors.getSnapshot()) {
+			seen.add(cursor.id);
+			let node = nodes.get(cursor.id);
+			if (!node) {
+				node = document.createElement("div");
+				node.className = "lc-cursor";
+				node.innerHTML = ARROW_SVG;
+				nodes.set(cursor.id, node);
+				overlay.append(node);
+			}
+			node.style.setProperty("--lc-color", color(cursor));
+			const text = label?.(cursor);
+			if (text) {
+				let pill = node.querySelector(".lc-label");
+				if (!pill) {
+					pill = document.createElement("span");
+					pill.className = "lc-label";
+					node.append(pill);
+				}
+				if (pill.textContent !== text) pill.textContent = text;
+			} else node.querySelector(".lc-label")?.remove();
+			const point = cursors.space.fromNormalized(cursor);
+			node.style.transform = `translate(${point.x}px, ${point.y}px)`;
+		}
+		for (const [id, node] of nodes) if (!seen.has(id)) {
+			node.remove();
+			nodes.delete(id);
+		}
+	};
+	const schedule = () => {
+		if (frame !== null) return;
+		frame = requestAnimationFrame(paint);
+	};
+	const unsubscribe = cursors.subscribe(schedule);
+	const resizeObserver = container && typeof ResizeObserver !== "undefined" ? new ResizeObserver(schedule) : null;
+	const mutationObserver = container && typeof MutationObserver !== "undefined" ? new MutationObserver(schedule) : null;
+	resizeObserver?.observe(container);
+	mutationObserver?.observe(container, {
+		childList: true,
+		subtree: true,
+		characterData: true
+	});
+	window.addEventListener("resize", schedule, { passive: true });
+	schedule();
+	return { destroy() {
+		unsubscribe();
+		if (frame !== null) cancelAnimationFrame(frame);
+		resizeObserver?.disconnect();
+		mutationObserver?.disconnect();
+		window.removeEventListener("resize", schedule);
+		overlay.remove();
+		nodes.clear();
+	} };
+}
+//#endregion
+export { ARROW_SVG, CURSOR_CSS, ensureCursorStyles, renderCursors };

package/dist/echo.d.mts

@@ -0,0 +1,26 @@
+import { a as CursorTransport } from "./cursors-CyiNtLCv.mjs";
+//#region src/transports/echo.d.ts
+/**
+ * The slice of a Laravel Echo private/presence channel this transport needs.
+ * Typed structurally so the package never has to depend on laravel-echo itself.
+ */
+interface EchoWhisperChannel {
+  whisper: (event: string, data: unknown) => unknown;
+  listenForWhisper: (event: string, callback: (payload: unknown) => void) => unknown;
+  stopListeningForWhisper?: (event: string) => unknown;
+}
+interface EchoTransportOptions {
+  channel: EchoWhisperChannel | (() => EchoWhisperChannel);
+  /** whisper event name; must match on every client */
+  event?: string;
+}
+/**
+ * Laravel Echo transport over client events (whisper). Requires a private or presence
+ * channel — Reverb and Pusher reject client events on public channels.
+ *
+ * Echo's `stopListeningForWhisper(event)` drops every listener of an event on the channel,
+ * so give this transport an `event` name of its own if the app whispers the same event elsewhere.
+ */
+declare function echoTransport(options: EchoTransportOptions): CursorTransport;
+//#endregion
+export { EchoTransportOptions, EchoWhisperChannel, echoTransport };

package/dist/echo.mjs

@@ -0,0 +1,24 @@
+//#region src/transports/echo.ts
+/**
+* Laravel Echo transport over client events (whisper). Requires a private or presence
+* channel — Reverb and Pusher reject client events on public channels.
+*
+* Echo's `stopListeningForWhisper(event)` drops every listener of an event on the channel,
+* so give this transport an `event` name of its own if the app whispers the same event elsewhere.
+*/
+function echoTransport(options) {
+	const { channel, event = "cursor" } = options;
+	const resolve = () => typeof channel === "function" ? channel() : channel;
+	return {
+		send(message) {
+			resolve().whisper(event, message);
+		},
+		onMessage(handler) {
+			const target = resolve();
+			target.listenForWhisper(event, (payload) => handler(payload));
+			return () => target.stopListeningForWhisper?.(event);
+		}
+	};
+}
+//#endregion
+export { echoTransport };

package/dist/index-4O7Ji1vk.d.mts

@@ -0,0 +1,40 @@
+import { i as CoordinateSpace } from "./cursors-CyiNtLCv.mjs";
+//#region src/color.d.ts
+/**
+ * Deterministic hue per id: the same participant keeps the same color across
+ * reloads and across clients without any color negotiation.
+ */
+declare function hashHue(id: string): number;
+interface ColorOptions {
+  saturation?: number;
+  lightness?: number;
+}
+declare function cursorColor(id: string, options?: ColorOptions): string;
+/**
+ * Picks from a fixed palette instead of the full hue circle — for brand palettes
+ * or when hues have to stay distinguishable for color-blind viewers.
+ */
+declare function paletteColor(id: string, palette: readonly string[]): string;
+//#endregion
+//#region src/space.d.ts
+declare function viewportSpace(): CoordinateSpace;
+/**
+ * Scroll-aware space: coordinates are relative to the scrollable content of an element,
+ * so a cursor stays on the content it points at even when participants scroll differently.
+ */
+declare function elementSpace(resolve: HTMLElement | (() => HTMLElement | null)): CoordinateSpace;
+declare function customSpace(space: CoordinateSpace): CoordinateSpace;
+//#endregion
+//#region src/throttle.d.ts
+interface Throttled<A extends unknown[]> {
+  (...args: A): void;
+  flush: () => void;
+  cancel: () => void;
+}
+/**
+ * Leading + trailing throttle: the first move goes out immediately and the last
+ * one is never dropped, which is what keeps a cursor from freezing mid-screen.
+ */
+declare function throttle<A extends unknown[]>(fn: (...args: A) => void, ms: number): Throttled<A>;
+//#endregion
+export { viewportSpace as a, hashHue as c, elementSpace as i, paletteColor as l, throttle as n, ColorOptions as o, customSpace as r, cursorColor as s, Throttled as t };

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+import { a as CursorTransport, c as RemoteCursor, d as CursorMessage, f as CursorMove, g as parseMessage, h as moveMessage, i as CoordinateSpace, l as Size, m as leaveMessage, n as CursorsOptions, o as Point, p as PROTOCOL_VERSION, r as createCursors, s as PointerLike, t as CursorsInstance, u as CursorLeave } from "./cursors-CyiNtLCv.mjs";
+import { a as viewportSpace, c as hashHue, i as elementSpace, l as paletteColor, n as throttle, o as ColorOptions, r as customSpace, s as cursorColor, t as Throttled } from "./index-4O7Ji1vk.mjs";
+export { type ColorOptions, type CoordinateSpace, type CursorLeave, type CursorMessage, type CursorMove, type CursorTransport, type CursorsInstance, type CursorsOptions, PROTOCOL_VERSION, type Point, type PointerLike, type RemoteCursor, type Size, type Throttled, createCursors, cursorColor, customSpace, elementSpace, hashHue, leaveMessage, moveMessage, paletteColor, parseMessage, throttle, viewportSpace };

package/dist/index.mjs

@@ -0,0 +1,3 @@
+import { n as hashHue, r as paletteColor, t as cursorColor } from "./color-CN1S_Vq9.mjs";
+import { a as viewportSpace, c as moveMessage, i as elementSpace, l as parseMessage, n as throttle, o as PROTOCOL_VERSION, r as customSpace, s as leaveMessage, t as createCursors } from "./cursors-BhKZnRWg.mjs";
+export { PROTOCOL_VERSION, createCursors, cursorColor, customSpace, elementSpace, hashHue, leaveMessage, moveMessage, paletteColor, parseMessage, throttle, viewportSpace };

package/dist/react.d.mts

@@ -0,0 +1,26 @@
+import { a as CursorTransport, c as RemoteCursor, n as CursorsOptions, t as CursorsInstance } from "./cursors-CyiNtLCv.mjs";
+import { ReactElement, ReactNode } from "react";
+//#region src/react/index.d.ts
+interface UseCursorsOptions extends Omit<CursorsOptions, "transport" | "space"> {
+  /** a factory keeps BroadcastChannel and WebSocket out of the server render */
+  transport: CursorTransport | (() => CursorTransport);
+  space?: CursorsOptions["space"];
+  container?: HTMLElement | null;
+}
+interface UseCursorsReturn {
+  cursors: CursorsInstance | null;
+  list: readonly RemoteCursor[];
+}
+declare function useCursors(options: UseCursorsOptions): UseCursorsReturn;
+interface LiveCursorsProps {
+  cursors: CursorsInstance | null;
+  color?: (cursor: RemoteCursor) => string;
+  label?: (cursor: RemoteCursor) => string | null | undefined;
+  /** custom label content, keeping the built-in arrow; `children` replaces the whole cursor */
+  renderLabel?: (cursor: RemoteCursor, color: string) => ReactNode;
+  zIndex?: number;
+  children?: (cursor: RemoteCursor, color: string) => ReactNode;
+}
+declare function LiveCursors(props: LiveCursorsProps): ReactElement | null;
+//#endregion
+export { LiveCursors, LiveCursorsProps, UseCursorsOptions, UseCursorsReturn, useCursors };

package/dist/react.mjs

@@ -0,0 +1,91 @@
+import { t as cursorColor } from "./color-CN1S_Vq9.mjs";
+import { i as elementSpace, t as createCursors } from "./cursors-BhKZnRWg.mjs";
+import { ARROW_SVG, ensureCursorStyles } from "./dom.mjs";
+import { createElement, useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/react/index.ts
+const EMPTY = Object.freeze([]);
+function useCursors(options) {
+	const { transport, container, space, ...rest } = options;
+	const [instance, setInstance] = useState(null);
+	const settingsRef = useRef(rest);
+	settingsRef.current = rest;
+	const containerRef = useRef(container);
+	containerRef.current = container;
+	const setupRef = useRef({
+		transport,
+		space
+	});
+	useEffect(() => {
+		const setup = setupRef.current;
+		const created = createCursors({
+			...settingsRef.current,
+			transport: typeof setup.transport === "function" ? setup.transport() : setup.transport,
+			space: setup.space ?? (containerRef.current !== void 0 ? elementSpace(() => containerRef.current ?? null) : void 0)
+		});
+		setInstance(created);
+		return () => {
+			created.destroy();
+			setInstance(null);
+		};
+	}, []);
+	useEffect(() => {
+		if (!instance) return;
+		if (container === void 0) return instance.attach();
+		if (container === null) return;
+		return instance.attach(container);
+	}, [instance, container]);
+	return {
+		cursors: instance,
+		list: useSyncExternalStore((onChange) => instance?.subscribe(onChange) ?? (() => {}), () => instance?.getSnapshot() ?? EMPTY, () => EMPTY)
+	};
+}
+function LiveCursors(props) {
+	const { cursors, color, label, renderLabel, zIndex = 10, children } = props;
+	const [resizeTick, setResizeTick] = useState(0);
+	ensureCursorStyles();
+	const list = useSyncExternalStore((onChange) => cursors?.subscribe(onChange) ?? (() => {}), () => cursors?.getSnapshot() ?? EMPTY, () => EMPTY);
+	useEffect(() => {
+		const onResize = () => setResizeTick((value) => value + 1);
+		window.addEventListener("resize", onResize, { passive: true });
+		return () => window.removeEventListener("resize", onResize);
+	}, []);
+	const isFixed = cursors?.space.target() === null;
+	const size = cursors?.space.size() ?? {
+		width: 0,
+		height: 0
+	};
+	if (!cursors) return null;
+	return createElement("div", {
+		"className": "lc-overlay",
+		"aria-hidden": true,
+		"data-fixed": isFixed ? "true" : void 0,
+		"style": isFixed ? { zIndex } : {
+			zIndex,
+			width: size.width,
+			height: size.height
+		}
+	}, list.map((cursor) => {
+		const tint = color?.(cursor) ?? cursorColor(cursor.id);
+		const point = cursors.space.fromNormalized(cursor);
+		const text = label?.(cursor);
+		return createElement("div", {
+			key: cursor.id,
+			className: "lc-cursor",
+			style: {
+				"transform": `translate(${point.x}px, ${point.y}px)`,
+				"--lc-color": tint
+			}
+		}, children ? children(cursor, tint) : [createElement("span", {
+			key: "arrow",
+			dangerouslySetInnerHTML: { __html: ARROW_SVG }
+		}), renderLabel ? createElement("span", {
+			key: "label",
+			className: "lc-label"
+		}, renderLabel(cursor, tint)) : text ? createElement("span", {
+			key: "label",
+			className: "lc-label"
+		}, text) : null]);
+	}));
+}
+//#endregion
+export { LiveCursors, useCursors };

package/dist/vue.d.mts

@@ -0,0 +1,60 @@
+import { a as CursorTransport, c as RemoteCursor, n as CursorsOptions, t as CursorsInstance } from "./cursors-CyiNtLCv.mjs";
+import { PropType, ShallowRef } from "vue";
+//#region src/vue/index.d.ts
+type MaybeGetter<T> = T | (() => T);
+interface UseCursorsOptions extends Omit<CursorsOptions, "transport" | "space"> {
+  /** a factory keeps BroadcastChannel and WebSocket out of the server render */
+  transport: MaybeGetter<CursorTransport>;
+  space?: CursorsOptions["space"];
+  /** shorthand for `space: elementSpace(...)`; also the element pointer events bind to */
+  container?: MaybeGetter<HTMLElement | null | undefined>;
+}
+interface UseCursorsReturn {
+  cursors: ShallowRef<CursorsInstance | null>;
+  list: ShallowRef<readonly RemoteCursor[]>;
+}
+declare function useCursors(options: UseCursorsOptions): UseCursorsReturn;
+declare const LiveCursors: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  cursors: {
+    type: PropType<CursorsInstance | null>;
+    default: null;
+  };
+  color: {
+    type: PropType<(cursor: RemoteCursor) => string>;
+    default: undefined;
+  };
+  label: {
+    type: PropType<(cursor: RemoteCursor) => string | null | undefined>;
+    default: undefined;
+  };
+  zIndex: {
+    type: NumberConstructor;
+    default: number;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  cursors: {
+    type: PropType<CursorsInstance | null>;
+    default: null;
+  };
+  color: {
+    type: PropType<(cursor: RemoteCursor) => string>;
+    default: undefined;
+  };
+  label: {
+    type: PropType<(cursor: RemoteCursor) => string | null | undefined>;
+    default: undefined;
+  };
+  zIndex: {
+    type: NumberConstructor;
+    default: number;
+  };
+}>> & Readonly<{}>, {
+  cursors: CursorsInstance | null;
+  color: (cursor: RemoteCursor) => string;
+  label: (cursor: RemoteCursor) => string | null | undefined;
+  zIndex: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { LiveCursors, UseCursorsOptions, UseCursorsReturn, useCursors };

package/dist/vue.mjs

@@ -0,0 +1,144 @@
+import { t as cursorColor } from "./color-CN1S_Vq9.mjs";
+import { i as elementSpace, t as createCursors } from "./cursors-BhKZnRWg.mjs";
+import { ARROW_SVG, ensureCursorStyles } from "./dom.mjs";
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, shallowRef, toValue, watch } from "vue";
+//#region src/vue/index.ts
+function useCursors(options) {
+	const cursors = shallowRef(null);
+	const list = shallowRef([]);
+	let unsubscribe = null;
+	onMounted(() => {
+		const { transport, container, space, ...rest } = options;
+		const resolveContainer = () => toValue(container) ?? null;
+		const instance = createCursors({
+			...rest,
+			transport: typeof transport === "function" ? transport() : transport,
+			space: space ?? (container ? elementSpace(resolveContainer) : void 0)
+		});
+		cursors.value = instance;
+		unsubscribe = instance.subscribe(() => {
+			list.value = instance.getSnapshot();
+		});
+		if (container) watch(() => resolveContainer(), (el) => {
+			if (el) instance.attach(el);
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		else instance.attach();
+	});
+	onBeforeUnmount(() => {
+		unsubscribe?.();
+		cursors.value?.destroy();
+		cursors.value = null;
+		list.value = [];
+	});
+	return {
+		cursors,
+		list
+	};
+}
+const LiveCursors = defineComponent({
+	name: "LiveCursors",
+	props: {
+		cursors: {
+			type: Object,
+			default: null
+		},
+		color: {
+			type: Function,
+			default: void 0
+		},
+		label: {
+			type: Function,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			default: 10
+		}
+	},
+	setup(props, { slots }) {
+		const list = shallowRef([]);
+		const version = shallowRef(0);
+		let unsubscribe = null;
+		ensureCursorStyles();
+		watch(() => props.cursors, (instance) => {
+			unsubscribe?.();
+			unsubscribe = null;
+			list.value = [];
+			if (!instance) return;
+			unsubscribe = instance.subscribe(() => {
+				list.value = instance.getSnapshot();
+				version.value++;
+			});
+		}, { immediate: true });
+		onMounted(() => {
+			const bump = () => {
+				version.value++;
+			};
+			window.addEventListener("resize", bump, { passive: true });
+			const target = props.cursors?.space.target() ?? null;
+			const resizeObserver = target && typeof ResizeObserver !== "undefined" ? new ResizeObserver(bump) : null;
+			const mutationObserver = target && typeof MutationObserver !== "undefined" ? new MutationObserver(bump) : null;
+			if (target) {
+				resizeObserver?.observe(target);
+				mutationObserver?.observe(target, {
+					childList: true,
+					subtree: true,
+					characterData: true
+				});
+			}
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", bump);
+				resizeObserver?.disconnect();
+				mutationObserver?.disconnect();
+			});
+		});
+		onBeforeUnmount(() => unsubscribe?.());
+		const tint = (cursor) => props.color?.(cursor) ?? cursorColor(cursor.id);
+		const overlaySize = computed(() => {
+			version.value;
+			return props.cursors?.space.size() ?? {
+				width: 0,
+				height: 0
+			};
+		});
+		const isFixed = computed(() => props.cursors?.space.target() === null);
+		return () => {
+			const instance = props.cursors;
+			if (!instance) return null;
+			return h("div", {
+				"class": "lc-overlay",
+				"aria-hidden": "true",
+				"data-fixed": isFixed.value ? "true" : void 0,
+				"style": isFixed.value ? { zIndex: props.zIndex } : {
+					zIndex: props.zIndex,
+					width: `${overlaySize.value.width}px`,
+					height: `${overlaySize.value.height}px`
+				}
+			}, list.value.map((cursor) => {
+				version.value;
+				const point = instance.space.fromNormalized(cursor);
+				const color = tint(cursor);
+				const text = props.label?.(cursor);
+				return h("div", {
+					key: cursor.id,
+					class: "lc-cursor",
+					style: {
+						"transform": `translate(${point.x}px, ${point.y}px)`,
+						"--lc-color": color
+					}
+				}, slots.default ? slots.default({
+					cursor,
+					color
+				}) : [h("span", { innerHTML: ARROW_SVG }), slots.label ? h("span", { class: "lc-label" }, slots.label({
+					cursor,
+					color
+				})) : text ? h("span", { class: "lc-label" }, text) : null]);
+			}));
+		};
+	}
+});
+//#endregion
+export { LiveCursors, useCursors };

package/dist/websocket.d.mts

@@ -0,0 +1,20 @@
+import { a as CursorTransport } from "./cursors-CyiNtLCv.mjs";
+//#region src/transports/websocket.d.ts
+interface WebSocketTransportOptions {
+  url: string | (() => string);
+  /** sent as `{ room, ...message }` so a single endpoint can host many rooms */
+  room?: string;
+  protocols?: string | string[];
+  reconnect?: boolean;
+  /** first retry delay; doubles up to maxDelayMs */
+  reconnectDelayMs?: number;
+  maxDelayMs?: number;
+  onError?: (error: unknown) => void;
+}
+/**
+ * Raw WebSocket transport. Cursor updates are disposable, so nothing is buffered
+ * while the socket is down — the next pointer move takes over.
+ */
+declare function websocketTransport(options: WebSocketTransportOptions): CursorTransport;
+//#endregion
+export { WebSocketTransportOptions, websocketTransport };