@agent-native/toolkit 0.0.0-beta-20260819143124

package/dist/chat-history.css

@@ -0,0 +1,469 @@
+/*
+ * Shared chat history list — used by Core's `HistoryPopover`
+ * (MultiTabAssistantChat.tsx) and by Agent-Native Code's run rail
+ * (code-agents-ui CodeAgentsApp.tsx). Stable, prefixed class names (not
+ * Tailwind utilities) so the same visual language works in both a Tailwind
+ * host (core/templates) and a plain-CSS host (code-agents-ui), matching the
+ * approach used by agent-conversation.css. All colors resolve through the
+ * shared `hsl(var(--token))` variables so light/dark both work in either
+ * host's theme.
+ *
+ * Two density variants:
+ *   .an-chat-history           default — compact popover list (core)
+ *   .an-chat-history--rail     denser rail list with solid active state
+ */
+
+.an-chat-history {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.an-chat-history__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+  flex-shrink: 0;
+}
+
+.an-chat-history__search-icon {
+  flex-shrink: 0;
+}
+
+.an-chat-history__search-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  font-size: 12px;
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history__search-input::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history__list {
+  overflow-y: auto;
+  min-width: 0;
+  padding: 4px 0;
+  max-height: 16rem;
+}
+
+.an-chat-history--rail .an-chat-history__list {
+  max-height: none;
+  flex: 1;
+  min-height: 0;
+}
+
+.an-chat-history-rail .an-chat-history__state:empty {
+  display: none;
+}
+
+.an-chat-history__state {
+  padding: 16px 12px;
+  text-align: center;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history__state--error {
+  /* Matches the amber-500 warning tone historically used for the
+     HistoryPopover load-error state (Tailwind's `text-amber-500`). */
+  color: hsl(38 92% 50%);
+}
+
+.an-chat-history-rail__collapse {
+  display: flow-root;
+  height: auto;
+  overflow: hidden;
+  overflow: clip;
+  opacity: 1;
+  clip-path: inset(0);
+  interpolate-size: allow-keywords;
+  transition:
+    height 200ms var(--ease-collapse),
+    opacity 150ms ease,
+    clip-path 200ms var(--ease-collapse);
+}
+
+.an-chat-history-rail__collapse[data-state="closed"] {
+  height: 0;
+  opacity: 0;
+  clip-path: inset(0 0 100% 0);
+  pointer-events: none;
+}
+
+@starting-style {
+  .an-chat-history-rail__collapse[data-state="open"] {
+    height: 0;
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+}
+
+@supports not (interpolate-size: allow-keywords) {
+  .an-chat-history-rail__collapse {
+    height: auto;
+    max-height: 64rem;
+    transition:
+      max-height 200ms var(--ease-collapse),
+      opacity 150ms ease,
+      clip-path 200ms var(--ease-collapse);
+  }
+
+  .an-chat-history-rail__collapse[data-state="closed"] {
+    max-height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .an-chat-history-rail__collapse {
+    transition: opacity 150ms ease;
+  }
+}
+
+.an-chat-history-rail__footer {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 1px 4px 0;
+}
+
+.an-chat-history-rail__disclosure,
+.an-chat-history-rail__new-chat {
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: hsl(var(--muted-foreground) / 0.72);
+  cursor: pointer;
+}
+
+.an-chat-history-rail__disclosure:hover,
+.an-chat-history-rail__new-chat:hover {
+  background: hsl(var(--accent) / 0.5);
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-rail__disclosure:focus-visible,
+.an-chat-history-rail__new-chat:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: -2px;
+}
+
+.an-chat-history-rail__disclosure {
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 30px;
+  height: auto;
+  min-height: 30px;
+}
+
+.an-chat-history-rail__new-chat {
+  justify-content: flex-start;
+  flex: 1 1 auto;
+  gap: 8px;
+  height: auto;
+  min-width: 0;
+  min-height: 30px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: start;
+}
+
+.an-chat-history__section-label {
+  padding: 6px 12px 4px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+.an-chat-history--rail .an-chat-history__section {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+}
+
+/* ── Row ──────────────────────────────────────────────────────────────── */
+
+.an-chat-history-row {
+  position: relative;
+  min-width: 0;
+}
+
+.an-chat-history--rail .an-chat-history-row {
+  border-radius: calc(var(--radius) - 2px);
+  margin: 0 4px;
+}
+
+.an-chat-history-row__button {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: 8px 12px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.an-chat-history-row--disabled .an-chat-history-row__button {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.an-chat-history-row:hover .an-chat-history-row__button {
+  background: hsl(var(--accent) / 0.5);
+}
+
+.an-chat-history-row--active .an-chat-history-row__button {
+  background: hsl(var(--accent) / 0.3);
+}
+
+.an-chat-history--rail .an-chat-history-row__button {
+  min-height: 32px;
+  padding-block: 6px;
+  padding-inline: 10px;
+  border-radius: inherit;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__button {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__topline {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.an-chat-history-row__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history-row--active .an-chat-history-row__title {
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__title {
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--pinned:not(.an-chat-history-row--active)
+  .an-chat-history-row__title {
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history-row__timestamp {
+  flex-shrink: 0;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history--rail .an-chat-history-row__timestamp {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground) / 0.62);
+  transition: opacity 100ms ease;
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__timestamp {
+  color: hsl(var(--accent-foreground));
+}
+
+/* Hide trailing metadata while the absolute menu takes its place so hover
+   never changes the title's available width or moves the rest of the rail. */
+.an-chat-history--rail
+  .an-chat-history-row--has-menu:hover
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu:focus-within
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu.an-chat-history-row--menu-open
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu.an-chat-history-row--pinned
+  .an-chat-history-row__timestamp {
+  opacity: 0;
+}
+
+.an-chat-history-row__subtitle {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history-row__detail {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+/* ── Inline rename ────────────────────────────────────────────────────── */
+
+.an-chat-history-row__rename {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+}
+
+.an-chat-history-row__rename-input {
+  width: 100%;
+  min-width: 0;
+  padding: 2px 6px;
+  border: 1px solid hsl(var(--ring));
+  border-radius: calc(var(--radius) - 3px);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
+}
+
+.an-chat-history-row__rename-input:focus {
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.35);
+}
+
+/* ── Row action menu ──────────────────────────────────────────────────── */
+
+.an-chat-history-row__menu {
+  position: absolute;
+  top: 4px;
+  inset-inline-end: 4px;
+  z-index: 1;
+}
+
+.an-chat-history--rail .an-chat-history-row__menu {
+  /* Keep the visible icon aligned with the trailing timestamp column while
+     preserving the full 24px action hit target. */
+  inset-inline-end: 3px;
+}
+
+.an-chat-history-row__menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: calc(var(--radius) - 3px);
+  background: transparent;
+  color: hsl(var(--muted-foreground) / 0.72);
+  opacity: 0;
+  cursor: pointer;
+  transition:
+    background 100ms ease,
+    color 100ms ease,
+    opacity 100ms ease;
+}
+
+.an-chat-history--rail .an-chat-history-row__menu-trigger {
+  pointer-events: none;
+}
+
+.an-chat-history-row:hover .an-chat-history-row__menu-trigger,
+.an-chat-history-row:focus-within .an-chat-history-row__menu-trigger,
+.an-chat-history-row__menu-trigger[aria-expanded="true"],
+.an-chat-history-row__menu-trigger--pinned {
+  opacity: 1;
+}
+
+.an-chat-history--rail
+  .an-chat-history-row:hover
+  .an-chat-history-row__menu-trigger,
+.an-chat-history--rail
+  .an-chat-history-row:focus-within
+  .an-chat-history-row__menu-trigger,
+.an-chat-history--rail .an-chat-history-row__menu-trigger[aria-expanded="true"],
+.an-chat-history--rail .an-chat-history-row__menu-trigger--pinned {
+  pointer-events: auto;
+}
+
+.an-chat-history-row__menu-trigger:hover,
+.an-chat-history-row__menu-trigger[aria-expanded="true"] {
+  background: hsl(var(--accent));
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history-row__menu-content {
+  z-index: 290;
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  --agent-shadow: 0 0% 0%;
+  --agent-shadow-o: 0.14;
+  box-shadow: 0 10px 30px hsl(var(--agent-shadow) / var(--agent-shadow-o));
+}
+
+.dark .an-chat-history-row__menu-content {
+  --agent-shadow-o: 0.08;
+}
+
+.an-chat-history-row__menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  text-align: start;
+  cursor: pointer;
+}
+
+.an-chat-history-row__menu-item:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__menu-item--danger {
+  color: hsl(var(--destructive));
+}
+
+.an-chat-history-row__menu-item--danger:hover {
+  background: hsl(var(--destructive) / 0.12);
+  color: hsl(var(--destructive));
+}

package/dist/collab-ui/AgentPresenceChip.d.ts

@@ -0,0 +1,12 @@
+export interface AgentPresenceChipProps {
+    /** Whether the agent is actively editing this element. */
+    active: boolean;
+    /** Label text. Default: "AI editing" */
+    label?: string;
+    /** Color. Default: "#00B5FF" */
+    color?: string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+export declare function AgentPresenceChip({ active, label, color, className, }: AgentPresenceChipProps): import("react").JSX.Element | null;
+//# sourceMappingURL=AgentPresenceChip.d.ts.map

package/dist/collab-ui/AgentPresenceChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentPresenceChip.d.ts","sourceRoot":"","sources":["../../src/collab-ui/AgentPresenceChip.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,sBAAsB;IACrC,0DAA0D;IAC1D,MAAM,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,KAAoB,EACpB,KAAiB,EACjB,SAAS,GACV,EAAE,sBAAsB,sCAmCxB"}

package/dist/collab-ui/AgentPresenceChip.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pulseKeyframes = `
+@keyframes _anChipPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+`;
+let styleInjected = false;
+function injectStyles() {
+    if (styleInjected || typeof document === "undefined")
+        return;
+    const style = document.createElement("style");
+    style.textContent = pulseKeyframes;
+    document.head.appendChild(style);
+    styleInjected = true;
+}
+export function AgentPresenceChip({ active, label = "AI editing", color = "#00B5FF", className, }) {
+    if (!active)
+        return null;
+    injectStyles();
+    return (_jsxs("span", { className: className, style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            height: 20,
+            padding: "0 8px",
+            borderRadius: 9999,
+            backgroundColor: `${color}20`,
+            color,
+            fontSize: 11,
+            fontWeight: 600,
+            whiteSpace: "nowrap",
+        }, children: [_jsx("span", { style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    backgroundColor: color,
+                    animation: "_anChipPulse 2s infinite",
+                    flexShrink: 0,
+                } }), label] }));
+}
+//# sourceMappingURL=AgentPresenceChip.js.map

package/dist/collab-ui/AgentPresenceChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentPresenceChip.js","sourceRoot":"","sources":["../../src/collab-ui/AgentPresenceChip.tsx"],"names":[],"mappings":";AAWA,MAAM,cAAc,GAAG;;;;;CAKtB,CAAC;AAEF,IAAI,aAAa,GAAG,KAAK,CAAC;AAE1B,SAAS,YAAY;IACnB,IAAI,aAAa,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAC7D,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,WAAW,GAAG,cAAc,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,aAAa,GAAG,IAAI,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAChC,MAAM,EACN,KAAK,GAAG,YAAY,EACpB,KAAK,GAAG,SAAS,EACjB,SAAS,GACc;IACvB,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL,gBACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,OAAO;YAChB,YAAY,EAAE,IAAI;YAClB,eAAe,EAAE,GAAG,KAAK,IAAI;YAC7B,KAAK;YACL,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,GAAG;YACf,UAAU,EAAE,QAAQ;SACrB,aAED,eACE,KAAK,EAAE;oBACL,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,YAAY,EAAE,KAAK;oBACnB,eAAe,EAAE,KAAK;oBACtB,SAAS,EAAE,0BAA0B;oBACrC,UAAU,EAAE,CAAC;iBACd,GACD,EACD,KAAK,IACD,CACR,CAAC;AACJ,CAAC"}

package/dist/collab-ui/LiveCursorOverlay.d.ts

@@ -0,0 +1,46 @@
+/**
+ * LiveCursorOverlay — renders remote users' cursors over an absolutely-
+ * positioned container.
+ *
+ * Cursor positions are expected as normalized coordinates (0–1 relative to
+ * the container's content size) so different zoom/scroll positions map
+ * correctly. Pass a `mapCoords` prop to handle non-identity transforms
+ * (e.g. a zoomed canvas).
+ *
+ * The agent uses the same pointer shape with an "AI" label.
+ *
+ * Cursors fade out after 10 seconds of no movement.
+ */
+import { type RefObject } from "react";
+import type { OtherPresence, NormalizedPoint } from "./types.js";
+export interface CursorMapFn {
+    /** Convert normalized coords to pixel offsets within the overlay container. */
+    (norm: NormalizedPoint): {
+        x: number;
+        y: number;
+    };
+}
+export interface LiveCursorOverlayProps {
+    /** Remote participants with presence payload. */
+    others: OtherPresence[];
+    /**
+     * Key inside presence payload that carries the cursor position.
+     * Default: "cursor"
+     * Expected shape: { x: number; y: number } (normalized 0–1).
+     */
+    cursorKey?: string;
+    /**
+     * Override coordinate mapping. Default: scale by container clientWidth/Height.
+     * Pass this when the container uses transform: scale() or has virtual scroll.
+     */
+    mapCoords?: CursorMapFn;
+    /**
+     * Container element ref. Required when mapCoords is not provided —
+     * used to compute pixel positions from normalized coords.
+     */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Additional CSS class for the overlay div. */
+    className?: string;
+}
+export declare function LiveCursorOverlay({ others, cursorKey, mapCoords, containerRef, className, }: LiveCursorOverlayProps): import("react").JSX.Element;
+//# sourceMappingURL=LiveCursorOverlay.d.ts.map

package/dist/collab-ui/LiveCursorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveCursorOverlay.d.ts","sourceRoot":"","sources":["../../src/collab-ui/LiveCursorOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,+EAA+E;IAC/E,CAAC,IAAI,EAAE,eAAe,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD;AAED,MAAM,WAAW,sBAAsB;IACrC,iDAAiD;IACjD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuGD,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,SAAoB,EACpB,SAAS,EACT,YAAY,EACZ,SAAS,GACV,EAAE,sBAAsB,+BAuFxB"}

package/dist/collab-ui/LiveCursorOverlay.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LiveCursorOverlay — renders remote users' cursors over an absolutely-
+ * positioned container.
+ *
+ * Cursor positions are expected as normalized coordinates (0–1 relative to
+ * the container's content size) so different zoom/scroll positions map
+ * correctly. Pass a `mapCoords` prop to handle non-identity transforms
+ * (e.g. a zoomed canvas).
+ *
+ * The agent uses the same pointer shape with an "AI" label.
+ *
+ * Cursors fade out after 10 seconds of no movement.
+ */
+import { useState, useEffect, useRef, memo } from "react";
+const STALE_MS = 10_000; // Fade out cursors older than 10s
+function CursorPointer({ color }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "29", viewBox: "0 0 25 29", fill: "none", "aria-hidden": true, style: {
+            display: "block",
+            filter: "drop-shadow(0 2px 3px rgba(15, 23, 42, 0.3))",
+        }, children: _jsx("path", { d: "M2.5 2.5L21.5 11L12.6 14.1L8.3 24.5L2.5 2.5Z", fill: color, stroke: "white", strokeLinejoin: "round", strokeWidth: "3" }) }));
+}
+const CursorLabel = memo(function CursorLabel({ entry, }) {
+    const { other, x, y } = entry;
+    const color = other.user.color || "#94a3b8";
+    const label = other.isAgent ? "AI" : other.user.name || other.user.email;
+    return (_jsxs("div", { "aria-label": `${label} cursor`, style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            pointerEvents: "none",
+            userSelect: "none",
+            transform: `translate3d(${x - 2}px, ${y - 2}px, 0)`,
+            zIndex: 9999,
+            transition: "transform 80ms linear",
+            willChange: "transform",
+            width: 0,
+            height: 0,
+        }, children: [_jsx(CursorPointer, { color: color }), _jsxs("div", { style: {
+                    position: "absolute",
+                    left: 31,
+                    top: 31,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 5,
+                    backgroundColor: color,
+                    color: "#fff",
+                    fontSize: 12,
+                    fontWeight: 500,
+                    lineHeight: "16px",
+                    padding: "2px 7px",
+                    borderRadius: 2,
+                    whiteSpace: "nowrap",
+                    boxShadow: "0 5px 12px rgba(15, 23, 42, 0.16)",
+                    maxWidth: 150,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                }, children: [other.user.avatarUrl ? (_jsx("img", { src: other.user.avatarUrl, alt: "", style: {
+                            width: 14,
+                            height: 14,
+                            borderRadius: "50%",
+                            flexShrink: 0,
+                        } })) : null, label] })] }));
+});
+export function LiveCursorOverlay({ others, cursorKey = "cursor", mapCoords, containerRef, className, }) {
+    const overlayRef = useRef(null);
+    const [, tick] = useState(0); // Force re-render to prune stale cursors
+    const entriesRef = useRef(new Map());
+    // Tick every 5s to prune stale cursors (no re-render storm).
+    useEffect(() => {
+        const id = setInterval(() => tick((n) => n + 1), 5_000);
+        return () => clearInterval(id);
+    }, []);
+    // Build entries from others, computing pixel positions.
+    const now = Date.now();
+    const visible = [];
+    for (const other of others) {
+        const pos = other.presence[cursorKey];
+        if (!pos || typeof pos.x !== "number" || typeof pos.y !== "number")
+            continue;
+        // Compute pixel position.
+        let px;
+        let py;
+        if (mapCoords) {
+            const mapped = mapCoords(pos);
+            px = mapped.x;
+            py = mapped.y;
+        }
+        else {
+            const container = containerRef?.current ?? overlayRef.current?.parentElement;
+            const w = container ? container.clientWidth : 0;
+            const h = container ? container.clientHeight : 0;
+            px = pos.x * w;
+            py = pos.y * h;
+        }
+        const prev = entriesRef.current.get(other.clientId);
+        const lastSeen = prev && prev.x === px && prev.y === py ? prev.lastSeen : now;
+        const entry = { other, x: px, y: py, lastSeen };
+        entriesRef.current.set(other.clientId, entry);
+        if (now - lastSeen < STALE_MS) {
+            visible.push(entry);
+        }
+    }
+    // Remove entries for participants who left.
+    for (const clientId of entriesRef.current.keys()) {
+        if (!others.find((o) => o.clientId === clientId)) {
+            entriesRef.current.delete(clientId);
+        }
+    }
+    if (visible.length === 0) {
+        return (_jsx("div", { ref: overlayRef, "aria-hidden": true, style: {
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                overflow: "hidden",
+            }, className: className }));
+    }
+    return (_jsx("div", { ref: overlayRef, "aria-hidden": true, style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            overflow: "hidden",
+        }, className: className, children: visible.map((entry) => (_jsx(CursorLabel, { entry: entry }, entry.other.clientId))) }));
+}
+//# sourceMappingURL=LiveCursorOverlay.js.map