canvu-react 0.3.5

package/dist/realtime.js

@@ -0,0 +1,2317 @@
+import { MousePointer2, MessageSquare, Sparkles, Hand, Square, Circle, Minus, ArrowUpRight, PenLine, Highlighter, Eraser, Type, Image } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect, useContext } from 'react';
+
+// src/react/presence/map-placement-preview.ts
+function remoteMarkupStrokeFromPlacementPreview(preview) {
+  if (!preview || preview.kind !== "stroke" || preview.points.length === 0) {
+    return null;
+  }
+  const tool = preview.tool;
+  const mapped = tool === "laser" || tool === "marker" || tool === "draw" ? tool : "draw";
+  return {
+    points: preview.points,
+    tool: mapped
+  };
+}
+
+// src/math/rect.ts
+function normalizeRect(r) {
+  const x0 = r.width >= 0 ? r.x : r.x + r.width;
+  const y0 = r.height >= 0 ? r.y : r.y + r.height;
+  return {
+    x: x0,
+    y: y0,
+    width: Math.abs(r.width),
+    height: Math.abs(r.height)
+  };
+}
+
+// src/renderer/svg-vector-renderer.ts
+function formatCameraTransform(camera) {
+  const z = camera.zoom;
+  return `matrix(${z}, 0, 0, ${z}, ${camera.x}, ${camera.y})`;
+}
+
+// src/scene/freehand-path.ts
+function smoothFreehandPointsToPathD(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) {
+    const p = points[0];
+    if (!p) return "";
+    return `M ${p.x} ${p.y}`;
+  }
+  if (n === 2) {
+    const a = points[0];
+    const b = points[1];
+    if (!a || !b) return "";
+    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+  }
+  const p0 = points[0];
+  if (!p0) return "";
+  let d = `M ${p0.x} ${p0.y}`;
+  let i = 1;
+  for (; i < n - 2; i++) {
+    const pi = points[i];
+    const pi1 = points[i + 1];
+    if (!pi || !pi1) continue;
+    const xc = (pi.x + pi1.x) / 2;
+    const yc = (pi.y + pi1.y) / 2;
+    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
+  }
+  const pLast = points[i];
+  const pEnd = points[i + 1];
+  if (!pLast || !pEnd) return d;
+  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
+  return d;
+}
+
+// src/react/presence/peer-color.ts
+function defaultPresenceColorForId(id) {
+  let h = 2166136261;
+  for (let i = 0; i < id.length; i++) {
+    h ^= id.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  const hue = (h >>> 0) % 360;
+  return `hsl(${hue} 72% 42%)`;
+}
+function strokePaint(tool, fallback) {
+  switch (tool) {
+    case "laser":
+      return { stroke: "#f43f5e", strokeOpacity: 0.92, widthWorld: 4 };
+    case "marker":
+      return { stroke: fallback, strokeOpacity: 0.45, widthWorld: 14 };
+    case "brush":
+      return { stroke: fallback, strokeOpacity: 0.85, widthWorld: 5 };
+    case "pencil":
+      return { stroke: fallback, strokeOpacity: 0.9, widthWorld: 2.5 };
+    default:
+      return { stroke: fallback, strokeOpacity: 0.95, widthWorld: 3.5 };
+  }
+}
+function PresenceRemoteLayer({
+  camera,
+  cameraVersion: _cameraVersion,
+  peers
+}) {
+  const z = camera.zoom;
+  const rootTransform = formatCameraTransform(camera);
+  const overlayStrokePx = 1.25;
+  const LUCIDE_POINTER_VIEWBOX = 24;
+  const remoteCursorScreenPx = 15;
+  const iconWorldScale = remoteCursorScreenPx / (LUCIDE_POINTER_VIEWBOX * z);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 9,
+        width: "100%",
+        height: "100%",
+        touchAction: "none",
+        pointerEvents: "none"
+      },
+      role: "presentation",
+      "aria-hidden": true,
+      width: "100%",
+      height: "100%",
+      children: /* @__PURE__ */ jsx("g", { transform: rootTransform, children: peers.map((peer) => {
+        const color = peer.color ?? defaultPresenceColorForId(peer.id);
+        const markup = peer.markupStroke;
+        let strokeNode = null;
+        if (markup && markup.points.length > 0) {
+          const paint = strokePaint(markup.tool, color);
+          const d = markup.points.length >= 2 ? smoothFreehandPointsToPathD([...markup.points]) : null;
+          if (d) {
+            strokeNode = /* @__PURE__ */ jsx(
+              "path",
+              {
+                d,
+                fill: "none",
+                stroke: paint.stroke,
+                strokeOpacity: paint.strokeOpacity,
+                strokeWidth: Math.max(paint.widthWorld / z, overlayStrokePx),
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                shapeRendering: "geometricPrecision",
+                vectorEffect: "non-scaling-stroke"
+              }
+            );
+          } else {
+            const p0 = markup.points[0];
+            if (p0) {
+              strokeNode = /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: p0.x,
+                  cy: p0.y,
+                  r: Math.max(3 / z, 2),
+                  fill: paint.stroke,
+                  fillOpacity: paint.strokeOpacity,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              );
+            }
+          }
+        }
+        const cur = peer.cursor;
+        let cursorNode = null;
+        if (cur) {
+          const displayName = peer.displayName;
+          const labelOffsetX = 10 / z;
+          const labelOffsetY = 10 / z;
+          const labelFont = 10 / z;
+          cursorNode = /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "g",
+              {
+                transform: `translate(${cur.x}, ${cur.y}) scale(${iconWorldScale}) translate(${ -4.037}, ${ -4.688})`,
+                children: /* @__PURE__ */ jsx(
+                  MousePointer2,
+                  {
+                    size: LUCIDE_POINTER_VIEWBOX,
+                    color,
+                    fill: color,
+                    stroke: "#ffffff",
+                    strokeWidth: 1.25,
+                    absoluteStrokeWidth: true,
+                    "aria-hidden": true
+                  }
+                )
+              }
+            ),
+            displayName ? /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cur.x + labelOffsetX,
+                y: cur.y + labelOffsetY,
+                fill: color,
+                stroke: "#ffffff",
+                strokeWidth: 2.5 / z,
+                paintOrder: "stroke",
+                style: {
+                  fontSize: labelFont,
+                  fontFamily: "system-ui, sans-serif",
+                  fontWeight: 600
+                },
+                vectorEffect: "non-scaling-stroke",
+                children: displayName
+              }
+            ) : null
+          ] });
+        }
+        return /* @__PURE__ */ jsxs("g", { children: [
+          strokeNode,
+          cursorNode
+        ] }, peer.id);
+      }) })
+    }
+  );
+}
+
+// src/react/plugins/realtime/protocol.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function getString(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function getNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function parseCursor(value) {
+  if (value === null) return null;
+  if (!isRecord(value)) return void 0;
+  const x = getNumber(value.x);
+  const y = getNumber(value.y);
+  if (x == null || y == null) return void 0;
+  return { x, y };
+}
+function parseMarkupStroke(value) {
+  if (value === null) return null;
+  if (!isRecord(value) || !Array.isArray(value.points)) return void 0;
+  const tool = getString(value.tool);
+  if (tool !== "draw" && tool !== "pencil" && tool !== "brush" && tool !== "marker" && tool !== "laser") {
+    return void 0;
+  }
+  const points = value.points.map((point) => {
+    if (!isRecord(point)) return null;
+    const x = getNumber(point.x);
+    const y = getNumber(point.y);
+    if (x == null || y == null) return null;
+    return { x, y };
+  }).filter((point) => point != null);
+  return { points, tool };
+}
+function parsePresencePayload(value) {
+  if (!isRecord(value)) return void 0;
+  const cursor = parseCursor(value.cursor);
+  if (cursor === void 0) return void 0;
+  const markupStroke = parseMarkupStroke(value.markupStroke);
+  if (markupStroke === void 0 && value.markupStroke !== void 0)
+    return void 0;
+  return {
+    cursor,
+    ...markupStroke !== void 0 ? { markupStroke } : {},
+    ...getString(value.activeTool) ? { activeTool: getString(value.activeTool) } : {}
+  };
+}
+function parseItems(value) {
+  return Array.isArray(value) ? value : void 0;
+}
+function parseDocumentSnapshot(value) {
+  if (!isRecord(value)) return void 0;
+  const revision = getNumber(value.revision);
+  const updatedAt = getNumber(value.updatedAt);
+  const items = parseItems(value.items);
+  if (revision == null || updatedAt == null || items == null) return void 0;
+  return {
+    revision,
+    updatedAt,
+    items,
+    ...getString(value.updatedByClientId) ? { updatedByClientId: getString(value.updatedByClientId) } : {}
+  };
+}
+function parseRealtimeSessionPeer(value) {
+  if (!isRecord(value)) return void 0;
+  const clientId = getString(value.clientId);
+  const peerId = getString(value.peerId);
+  const roomId = getString(value.roomId);
+  const joinedAt = getNumber(value.joinedAt);
+  const lastSeenAt = getNumber(value.lastSeenAt);
+  const cursor = parseCursor(value.cursor);
+  if (clientId == null || peerId == null || roomId == null || joinedAt == null || lastSeenAt == null || cursor === void 0) {
+    return void 0;
+  }
+  const markupStroke = parseMarkupStroke(value.markupStroke);
+  if (markupStroke === void 0 && value.markupStroke !== void 0)
+    return void 0;
+  const isSelf = value.isSelf === true;
+  const connectionState = getString(value.connectionState);
+  return {
+    id: clientId,
+    clientId,
+    peerId,
+    roomId,
+    joinedAt,
+    lastSeenAt,
+    isSelf,
+    cursor,
+    ...getString(value.displayName) ? { displayName: getString(value.displayName) } : {},
+    ...getString(value.color) ? { color: getString(value.color) } : {},
+    ...getString(value.image) ? { image: getString(value.image) } : {},
+    ...markupStroke !== void 0 ? { markupStroke } : {},
+    ...getString(value.activeTool) ? { activeTool: getString(value.activeTool) } : {},
+    ...connectionState ? { connectionState } : {}
+  };
+}
+function parsePeers(value) {
+  if (!Array.isArray(value)) return void 0;
+  const peers = value.map((peer) => parseRealtimeSessionPeer(peer)).filter((peer) => peer != null);
+  return peers.length === value.length ? peers : void 0;
+}
+function parseRealtimeClientMessage(value) {
+  if (!isRecord(value)) return void 0;
+  const type = getString(value.type);
+  if (type === "session:join") {
+    const roomId = getString(value.roomId);
+    const peer = isRecord(value.peer) ? value.peer : void 0;
+    const clientId = peer ? getString(peer.clientId) : void 0;
+    const peerId = peer ? getString(peer.peerId) : void 0;
+    if (!roomId || !peer || !clientId || !peerId) return void 0;
+    return {
+      type,
+      roomId,
+      peer: {
+        clientId,
+        peerId,
+        ...getString(peer.displayName) ? { displayName: getString(peer.displayName) } : {},
+        ...getString(peer.color) ? { color: getString(peer.color) } : {},
+        ...getString(peer.image) ? { image: getString(peer.image) } : {}
+      }
+    };
+  }
+  if (type === "session:leave" || type === "session:ping") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    if (!roomId || !clientId) return void 0;
+    if (type === "session:leave") {
+      return { type, roomId, clientId };
+    }
+    const sentAt = getNumber(value.sentAt);
+    if (sentAt == null) return void 0;
+    return { type, roomId, clientId, sentAt };
+  }
+  if (type === "presence:update") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const presence = parsePresencePayload(value.presence);
+    if (!roomId || !clientId || !presence) return void 0;
+    return { type, roomId, clientId, presence };
+  }
+  if (type === "document:update") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const baseRevision = getNumber(value.baseRevision);
+    const items = parseItems(value.items);
+    if (!roomId || !clientId || baseRevision == null || !items) return void 0;
+    return { type, roomId, clientId, baseRevision, items };
+  }
+  return void 0;
+}
+function parseRealtimeServerMessage(value) {
+  if (!isRecord(value)) return void 0;
+  const type = getString(value.type);
+  if (type === "session:welcome") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const serverTime = getNumber(value.serverTime);
+    const document2 = parseDocumentSnapshot(value.document);
+    const peers = parsePeers(value.peers);
+    if (!roomId || !clientId || serverTime == null || !document2 || !peers) {
+      return void 0;
+    }
+    return { type, roomId, clientId, serverTime, document: document2, peers };
+  }
+  if (type === "session:peer-joined") {
+    const roomId = getString(value.roomId);
+    const peer = parseRealtimeSessionPeer(value.peer);
+    if (!roomId || !peer) return void 0;
+    return { type, roomId, peer };
+  }
+  if (type === "session:peer-left") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    if (!roomId || !clientId) return void 0;
+    return { type, roomId, clientId };
+  }
+  if (type === "session:pong") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const sentAt = getNumber(value.sentAt);
+    const serverTime = getNumber(value.serverTime);
+    if (!roomId || !clientId || sentAt == null || serverTime == null) {
+      return void 0;
+    }
+    return { type, roomId, clientId, sentAt, serverTime };
+  }
+  if (type === "session:error") {
+    const code = getString(value.code);
+    const message = getString(value.message);
+    if (!code || !message) return void 0;
+    return {
+      type,
+      code,
+      message,
+      ...getString(value.roomId) ? { roomId: getString(value.roomId) } : {}
+    };
+  }
+  if (type === "presence:sync") {
+    const roomId = getString(value.roomId);
+    const peers = parsePeers(value.peers);
+    const serverTime = getNumber(value.serverTime);
+    if (!roomId || !peers || serverTime == null) return void 0;
+    return { type, roomId, peers, serverTime };
+  }
+  if (type === "document:sync" || type === "document:resync-required") {
+    const roomId = getString(value.roomId);
+    const document2 = parseDocumentSnapshot(value.document);
+    if (!roomId || !document2) return void 0;
+    if (type === "document:sync") {
+      return { type, roomId, document: document2 };
+    }
+    const reason = getString(value.reason);
+    if (!reason) return void 0;
+    return { type, roomId, reason, document: document2 };
+  }
+  return void 0;
+}
+var shell = {
+  position: "absolute",
+  top: 12,
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  gap: "0 14px",
+  maxWidth: "min(100% - 24px, 520px)",
+  padding: "6px 14px",
+  borderRadius: 9999,
+  border: "1px solid rgba(15, 23, 42, 0.08)",
+  background: "rgba(255, 255, 255, 0.78)",
+  backdropFilter: "blur(12px)",
+  WebkitBackdropFilter: "blur(12px)",
+  boxShadow: "0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06)",
+  pointerEvents: "auto",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  WebkitTouchCallout: "none",
+  fontSize: "0.6875rem",
+  fontWeight: 500,
+  letterSpacing: "0.01em",
+  color: "#334155"
+};
+var titleStyle = {
+  fontWeight: 600,
+  color: "#64748b",
+  letterSpacing: "0.06em",
+  textTransform: "uppercase",
+  fontSize: "0.625rem",
+  whiteSpace: "nowrap"
+};
+var statusRow = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  flexShrink: 0
+};
+var peerList = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: "4px 10px",
+  margin: 0,
+  padding: 0,
+  listStyle: "none",
+  justifyContent: "center"
+};
+var peerItem = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 5,
+  maxWidth: 140
+};
+var dot = {
+  width: 6,
+  height: 6,
+  borderRadius: 999,
+  flexShrink: 0
+};
+var avatarStyle = {
+  width: 18,
+  height: 18,
+  borderRadius: 999,
+  objectFit: "cover",
+  flexShrink: 0,
+  border: "1px solid rgba(15, 23, 42, 0.08)"
+};
+var nameStyle = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function connectionAppearance(connectionState) {
+  if (connectionState === "connected") {
+    return {
+      color: "#16a34a",
+      label: "Live",
+      shadow: "0 0 0 2px rgba(22, 163, 74, 0.25)"
+    };
+  }
+  if (connectionState === "connecting") {
+    return {
+      color: "#2563eb",
+      label: "Conectando",
+      shadow: "0 0 0 2px rgba(37, 99, 235, 0.18)"
+    };
+  }
+  if (connectionState === "reconnecting") {
+    return {
+      color: "#d97706",
+      label: "Reconectando",
+      shadow: "0 0 0 2px rgba(217, 119, 6, 0.2)"
+    };
+  }
+  if (connectionState === "error") {
+    return {
+      color: "#dc2626",
+      label: "Erro",
+      shadow: "none"
+    };
+  }
+  return {
+    color: "#64748b",
+    label: "Offline",
+    shadow: "none"
+  };
+}
+function RealtimeSessionPanel({
+  title = "Session",
+  peers,
+  connected = true,
+  connectionState,
+  roomId,
+  children
+}) {
+  const resolvedConnectionState = connectionState ?? (connected ? "connected" : "reconnecting");
+  const status = connectionAppearance(resolvedConnectionState);
+  return /* @__PURE__ */ jsxs("div", { style: shell, "data-slot": "realtime-session-panel", children: [
+    /* @__PURE__ */ jsx("span", { style: titleStyle, children: title }),
+    roomId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            width: 1,
+            height: 14,
+            background: "rgba(15, 23, 42, 0.12)",
+            flexShrink: 0
+          },
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { style: { ...titleStyle, textTransform: "none", letterSpacing: 0 }, children: [
+        "Sala ",
+        roomId
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          width: 1,
+          height: 14,
+          background: "rgba(15, 23, 42, 0.12)",
+          flexShrink: 0
+        },
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { style: statusRow, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...dot,
+            background: status.color,
+            boxShadow: status.shadow
+          },
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: { color: status.color, fontWeight: 600 }, children: status.label })
+    ] }),
+    peers.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            width: 1,
+            height: 14,
+            background: "rgba(15, 23, 42, 0.12)",
+            flexShrink: 0
+          },
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { style: peerList, children: peers.map((p) => /* @__PURE__ */ jsxs("li", { style: peerItem, children: [
+        "image" in p && p.image ? /* @__PURE__ */ jsx("img", { src: p.image, alt: "", "aria-hidden": true, style: avatarStyle }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              ...dot,
+              background: p.color ?? "#94a3b8"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: nameStyle, children: [
+          p.displayName ?? p.id,
+          "isSelf" in p && p.isSelf ? " (voc\xEA)" : ""
+        ] })
+      ] }, p.id)) })
+    ] }) : null,
+    children
+  ] });
+}
+var CanvuPluginContext = createContext(
+  null
+);
+function createCanvuPlugin(plugin) {
+  return plugin;
+}
+function useCanvuPluginContext() {
+  const ctx = useContext(CanvuPluginContext);
+  if (!ctx) {
+    throw new Error(
+      "useCanvuPluginContext must be used inside a VectorViewport plugin runtime."
+    );
+  }
+  return ctx;
+}
+function useCanvuViewportContext() {
+  const { viewportRef, viewport } = useCanvuPluginContext();
+  return { viewportRef, viewport };
+}
+function useCanvuDocumentContext() {
+  const { viewport } = useCanvuPluginContext();
+  return {
+    items: viewport.items,
+    onItemsChange: viewport.onItemsChange
+  };
+}
+function useCanvuPluginContribution(pluginId, contribution) {
+  const { registerContribution, unregisterContribution } = useCanvuPluginContext();
+  useLayoutEffect(() => {
+    registerContribution(pluginId, contribution);
+    return () => unregisterContribution(pluginId);
+  }, [contribution, pluginId, registerContribution, unregisterContribution]);
+}
+var base = {
+  width: 20,
+  height: 20,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function IconLaser(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 4v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 12h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 12h4" })
+  ] });
+}
+var ic = { size: 20, strokeWidth: 2 };
+var DEFAULT_VECTOR_TOOLS = [
+  {
+    id: "hand",
+    label: "Hand",
+    icon: /* @__PURE__ */ jsx(Hand, { ...ic, "aria-hidden": true }),
+    shortcutHint: "H"
+  },
+  {
+    id: "select",
+    label: "Select",
+    icon: /* @__PURE__ */ jsx(MousePointer2, { ...ic, "aria-hidden": true }),
+    shortcutHint: "V"
+  },
+  {
+    id: "rect",
+    label: "Rectangle",
+    icon: /* @__PURE__ */ jsx(Square, { ...ic, "aria-hidden": true }),
+    shortcutHint: "R"
+  },
+  {
+    id: "ellipse",
+    label: "Ellipse",
+    icon: /* @__PURE__ */ jsx(Circle, { ...ic, "aria-hidden": true }),
+    shortcutHint: "O"
+  },
+  {
+    id: "line",
+    label: "Line",
+    icon: /* @__PURE__ */ jsx(Minus, { ...ic, "aria-hidden": true }),
+    shortcutHint: "L"
+  },
+  {
+    id: "arrow",
+    label: "Arrow",
+    icon: /* @__PURE__ */ jsx(ArrowUpRight, { ...ic, "aria-hidden": true }),
+    shortcutHint: "A"
+  },
+  {
+    id: "draw",
+    label: "Desenhar",
+    tooltipLabel: "Draw",
+    icon: /* @__PURE__ */ jsx(PenLine, { ...ic, "aria-hidden": true }),
+    shortcutHint: "D"
+  },
+  {
+    id: "marker",
+    label: "Realce",
+    tooltipLabel: "Highlighter",
+    icon: /* @__PURE__ */ jsx(Highlighter, { ...ic, "aria-hidden": true }),
+    shortcutHint: "M"
+  },
+  {
+    id: "laser",
+    label: "Laser",
+    icon: /* @__PURE__ */ jsx(IconLaser, { "aria-hidden": true }),
+    shortcutHint: "K"
+  },
+  {
+    id: "eraser",
+    label: "Borracha",
+    tooltipLabel: "Eraser",
+    icon: /* @__PURE__ */ jsx(Eraser, { ...ic, "aria-hidden": true }),
+    shortcutHint: "E"
+  },
+  {
+    id: "text",
+    label: "Text",
+    icon: /* @__PURE__ */ jsx(Type, { ...ic, "aria-hidden": true }),
+    shortcutHint: "T"
+  },
+  {
+    id: "image",
+    label: "File",
+    icon: /* @__PURE__ */ jsx(Image, { ...ic, "aria-hidden": true }),
+    shortcutHint: "I"
+  }
+];
+
+// src/scene/custom-shape.ts
+function expandCustomShapeTemplate(template, width, height) {
+  return template.replace(/\{\{w\}\}/g, String(width)).replace(/\{\{h\}\}/g, String(height)).replace(/\{\{width\}\}/g, String(width)).replace(/\{\{height\}\}/g, String(height));
+}
+function resolveCustomInner(content, size) {
+  if ("render" in content) {
+    return content.render(size);
+  }
+  return expandCustomShapeTemplate(content.svg, size.width, size.height);
+}
+function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
+  const b = normalizeRect(bounds);
+  const sx = b.width / intrinsic.width;
+  const sy = b.height / intrinsic.height;
+  return `<g transform="scale(${sx},${sy})">${inner}</g>`;
+}
+function createCustomShapeItem(id, bounds, content) {
+  const r = normalizeRect(bounds);
+  const intrinsic = { width: r.width, height: r.height };
+  const inner = resolveCustomInner(content, intrinsic);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "custom",
+    customIntrinsicSize: intrinsic,
+    customInnerSvg: inner,
+    childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
+  };
+}
+var iconProps = { size: 20, strokeWidth: 2 };
+var COMMENT_PLUGIN_DATA_KEY = "realtimeComment";
+var REALTIME_COMMENT_TOOL = {
+  id: "comment",
+  label: "Coment\xE1rio",
+  tooltipLabel: "Comment",
+  ariaLabel: "Adicionar coment\xE1rio colaborativo",
+  shortcutHint: "C",
+  icon: /* @__PURE__ */ jsx(MessageSquare, { ...iconProps, "aria-hidden": true })
+};
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function getString2(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function getNumber2(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function initialsFromDisplayName(displayName) {
+  const words = displayName.trim().split(/\s+/).filter(Boolean).slice(0, 2);
+  if (words.length === 0) return "?";
+  return words.map((part) => part[0]?.toUpperCase() ?? "").join("") || "?";
+}
+function escapeSvgText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function createRealtimeCommentAvatarDataUrl(displayName, color) {
+  const initials = initialsFromDisplayName(displayName);
+  const svg = `
+		<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+			<defs>
+				<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+					<stop offset="0%" stop-color="${color}" />
+					<stop offset="100%" stop-color="#0f172a" />
+				</linearGradient>
+				<radialGradient id="shine" cx="30%" cy="24%" r="70%">
+					<stop offset="0%" stop-color="#ffffff" stop-opacity="0.48" />
+					<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
+				</radialGradient>
+			</defs>
+			<rect width="96" height="96" rx="28" fill="url(#bg)" />
+			<rect width="96" height="96" rx="28" fill="url(#shine)" />
+			<circle cx="48" cy="38" r="18" fill="rgba(255,255,255,0.2)" />
+			<path d="M20 84c5-16 17-24 28-24s23 8 28 24" fill="rgba(255,255,255,0.16)" />
+			<text x="48" y="56" text-anchor="middle" font-size="28" font-weight="700" font-family="system-ui, sans-serif" fill="#ffffff">${escapeSvgText(initials)}</text>
+		</svg>
+	`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+function commentPlaceholderInnerSvg(color) {
+  return `
+		<circle cx="9" cy="9" r="7" fill="rgba(255,255,255,0.94)" stroke="${color}" stroke-width="1.2" stroke-dasharray="2 1.5" />
+		<circle cx="9" cy="9" r="3.1" fill="${color}" fill-opacity="0.18" stroke="${color}" stroke-width="1" />
+		<path d="M7.1 8.1h3.8c.8 0 1.4.5 1.4 1.2v1.1c0 .7-.6 1.2-1.4 1.2H9.3l-1.2 1v-1H7.1c-.8 0-1.4-.5-1.4-1.2V9.3c0-.7.6-1.2 1.4-1.2Z" fill="#ffffff" stroke="${color}" stroke-width="0.9" />
+	`;
+}
+function commentAnchorInnerSvg(authorColor) {
+  return `
+		<circle cx="9" cy="9" r="7.2" fill="rgba(255,255,255,0.96)" stroke="rgba(15,23,42,0.1)" stroke-width="0.9" />
+		<circle cx="9" cy="9" r="4.1" fill="${authorColor}" />
+		<circle cx="13.2" cy="13.2" r="3.2" fill="#ffffff" stroke="rgba(15,23,42,0.12)" stroke-width="0.9" />
+		<path d="M11.7 12.1h2.7c.6 0 1 .4 1 .9v.9c0 .5-.4.9-1 .9h-1.1l-1 .8v-.8h-.4c-.6 0-1-.4-1-.9V13c0-.5.4-.9 1-.9Z" fill="#111827" fill-opacity="0.08" stroke="#111827" stroke-width="0.75" />
+	`;
+}
+function createRealtimeCommentDraftItem(id, bounds, seedColor = "#7c3aed") {
+  const base2 = createCustomShapeItem(id, bounds, {
+    render: () => commentPlaceholderInnerSvg(seedColor)
+  });
+  return {
+    ...base2,
+    pluginData: {
+      ...base2.pluginData ?? {},
+      [COMMENT_PLUGIN_DATA_KEY]: {
+        kind: "draft",
+        seedColor
+      }
+    }
+  };
+}
+function createRealtimeCommentItem(id, bounds, comment) {
+  const base2 = createCustomShapeItem(id, bounds, {
+    render: () => commentAnchorInnerSvg(comment.authorColor)
+  });
+  return {
+    ...base2,
+    pluginData: {
+      ...base2.pluginData ?? {},
+      [COMMENT_PLUGIN_DATA_KEY]: {
+        kind: "comment",
+        ...comment
+      }
+    }
+  };
+}
+function getStoredRealtimeCommentData(item) {
+  const pluginData = item.pluginData?.[COMMENT_PLUGIN_DATA_KEY];
+  if (!isRecord2(pluginData)) return null;
+  const kind = getString2(pluginData.kind);
+  if (kind === "draft") {
+    return {
+      kind,
+      ...getString2(pluginData.seedColor) ? { seedColor: getString2(pluginData.seedColor) } : {}
+    };
+  }
+  if (kind !== "comment") return null;
+  const body = getString2(pluginData.body);
+  const createdAt = getNumber2(pluginData.createdAt);
+  const authorPeerId = getString2(pluginData.authorPeerId);
+  const authorDisplayName = getString2(pluginData.authorDisplayName);
+  const authorColor = getString2(pluginData.authorColor);
+  const authorImage = getString2(pluginData.authorImage);
+  if (!body || createdAt == null || !authorPeerId || !authorDisplayName || !authorColor || !authorImage) {
+    return null;
+  }
+  return {
+    kind,
+    body,
+    createdAt,
+    authorPeerId,
+    authorDisplayName,
+    authorColor,
+    authorImage
+  };
+}
+function isRealtimeCommentDraftItem(item) {
+  return getStoredRealtimeCommentData(item)?.kind === "draft";
+}
+function isRealtimeCommentItem(item) {
+  return getStoredRealtimeCommentData(item)?.kind === "comment";
+}
+function getRealtimeCommentData(item) {
+  const data = getStoredRealtimeCommentData(item);
+  return data?.kind === "comment" ? data : null;
+}
+function withRealtimeCommentTool(tools) {
+  if (tools.some((tool) => tool.id === REALTIME_COMMENT_TOOL.id)) {
+    return tools.map(
+      (tool) => tool.id === REALTIME_COMMENT_TOOL.id ? { ...tool, ...REALTIME_COMMENT_TOOL } : tool
+    );
+  }
+  const textIndex = tools.findIndex((tool) => tool.id === "text");
+  if (textIndex < 0) return [...tools, REALTIME_COMMENT_TOOL];
+  return [
+    ...tools.slice(0, textIndex + 1),
+    REALTIME_COMMENT_TOOL,
+    ...tools.slice(textIndex + 1)
+  ];
+}
+var overlayShell = {
+  position: "absolute",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: 26,
+  overflow: "hidden"
+};
+function formatCommentTimestamp(timestamp) {
+  return new Intl.DateTimeFormat("pt-BR", {
+    dateStyle: "short",
+    timeStyle: "short"
+  }).format(new Date(timestamp));
+}
+function RealtimeCommentsOverlay({
+  items,
+  onItemsChange,
+  isDragEnabled = false,
+  cameraVersion,
+  viewportRef
+}) {
+  const [hoveredId, setHoveredId] = useState(null);
+  const [draggedId, setDraggedId] = useState(null);
+  const dragStateRef = useRef(null);
+  const itemsRef = useRef(items);
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+  const camera = viewportRef?.current?.getCamera() ?? null;
+  if (!camera) return null;
+  function moveCommentItem(item, deltaX, deltaY) {
+    return {
+      ...item,
+      x: item.x + deltaX,
+      y: item.y + deltaY,
+      bounds: {
+        ...item.bounds,
+        x: item.bounds.x + deltaX,
+        y: item.bounds.y + deltaY
+      }
+    };
+  }
+  function handleCommentPointerDown(itemId, event) {
+    if (event.button !== 0 || !onItemsChange || !isDragEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const currentCamera = viewportRef?.current?.getCamera();
+    if (!currentCamera) return;
+    const start = currentCamera.screenToWorld(event.clientX, event.clientY);
+    dragStateRef.current = {
+      itemId,
+      lastWorldX: start.worldX,
+      lastWorldY: start.worldY
+    };
+    setDraggedId(itemId);
+    setHoveredId((current) => current === itemId ? null : current);
+    const onPointerMove = (moveEvent) => {
+      const drag = dragStateRef.current;
+      const liveCamera = viewportRef?.current?.getCamera();
+      if (!drag || !liveCamera) return;
+      const next = liveCamera.screenToWorld(moveEvent.clientX, moveEvent.clientY);
+      const deltaX = next.worldX - drag.lastWorldX;
+      const deltaY = next.worldY - drag.lastWorldY;
+      if (deltaX === 0 && deltaY === 0) return;
+      drag.lastWorldX = next.worldX;
+      drag.lastWorldY = next.worldY;
+      const nextItems = itemsRef.current.map(
+        (item) => item.id === drag.itemId ? moveCommentItem(item, deltaX, deltaY) : item
+      );
+      itemsRef.current = nextItems;
+      onItemsChange(nextItems);
+    };
+    const onPointerUp = () => {
+      dragStateRef.current = null;
+      setDraggedId((current) => current === itemId ? null : current);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("pointercancel", onPointerUp);
+  }
+  const comments = items.map((item) => ({ item, data: getRealtimeCommentData(item) })).filter(
+    (entry) => entry.data != null
+  );
+  if (comments.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { style: overlayShell, "data-slot": "realtime-comments-overlay", children: comments.map(({ item, data }) => {
+    const anchor = camera.worldToScreen(
+      item.bounds.x + item.bounds.width / 2,
+      item.bounds.y + item.bounds.height / 2
+    );
+    const dragging = draggedId === item.id;
+    const expanded = hoveredId === item.id && !dragging;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Comment by ${data.authorDisplayName}`,
+        onMouseEnter: () => setHoveredId(item.id),
+        onMouseLeave: () => setHoveredId((current) => current === item.id ? null : current),
+        onPointerDown: (event) => handleCommentPointerDown(item.id, event),
+        style: {
+          background: "transparent",
+          border: 0,
+          padding: 0,
+          position: "absolute",
+          left: anchor.screenX,
+          top: anchor.screenY,
+          transform: "translate(-50%, -50%)",
+          pointerEvents: "auto",
+          cursor: onItemsChange && isDragEnabled ? dragging ? "grabbing" : "grab" : "default"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: expanded ? "flex-start" : "center",
+              gap: expanded ? 9 : 0,
+              width: expanded ? 228 : 44,
+              minHeight: 44,
+              padding: expanded ? "8px 10px 8px 8px" : 3,
+              borderRadius: expanded ? 18 : 999,
+              background: expanded ? "rgba(255,255,255,0.97)" : "transparent",
+              border: expanded ? "1px solid rgba(148,163,184,0.28)" : "1px solid transparent",
+              boxShadow: expanded ? "0 14px 32px rgba(15,23,42,0.18)" : "none",
+              backdropFilter: "blur(10px)",
+              transition: "width 160ms ease, border-radius 160ms ease, transform 160ms ease, box-shadow 160ms ease, padding 160ms ease",
+              transform: dragging ? "scale(0.98)" : expanded ? "translateY(-2px)" : "translateY(0)",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    width: 36,
+                    height: 36,
+                    borderRadius: 999,
+                    flexShrink: 0,
+                    boxShadow: expanded ? `0 0 0 2px ${data.authorColor}22` : "0 10px 18px rgba(15,23,42,0.14)",
+                    border: expanded ? "none" : "2px solid rgba(255,255,255,0.92)",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: data.authorImage,
+                        alt: data.authorDisplayName,
+                        style: { width: "100%", height: "100%", objectFit: "cover" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          right: expanded ? -1 : -2,
+                          bottom: expanded ? -1 : -2,
+                          width: 14,
+                          height: 14,
+                          borderRadius: 999,
+                          background: "#111827",
+                          color: "#fff",
+                          display: "grid",
+                          placeItems: "center",
+                          border: "1.5px solid rgba(255,255,255,0.98)",
+                          boxShadow: "0 4px 10px rgba(15,23,42,0.16)"
+                        },
+                        children: /* @__PURE__ */ jsx(Sparkles, { size: 8, strokeWidth: 2.2, "aria-hidden": true })
+                      }
+                    )
+                  ]
+                }
+              ),
+              expanded ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gap: 3,
+                    minWidth: 0,
+                    paddingTop: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          justifyContent: "space-between",
+                          gap: 8,
+                          alignItems: "baseline"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 12,
+                                fontWeight: 700,
+                                color: "#0f172a",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: data.authorDisplayName
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 10,
+                                color: "#64748b",
+                                whiteSpace: "nowrap"
+                              },
+                              children: formatCommentTimestamp(data.createdAt)
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 11,
+                          lineHeight: 1.4,
+                          color: "#334155",
+                          display: "-webkit-box",
+                          WebkitLineClamp: 3,
+                          WebkitBoxOrient: "vertical",
+                          overflow: "hidden"
+                        },
+                        children: data.body
+                      }
+                    )
+                  ]
+                }
+              ) : null
+            ]
+          }
+        )
+      },
+      item.id
+    );
+  }) });
+}
+function realtimeCommentsPlugin(options) {
+  return {
+    id: "trazo.plugin.realtime-comments",
+    render: (ctx) => /* @__PURE__ */ jsx(RealtimeCommentsOverlay, { ...options, viewportRef: ctx.viewportRef })
+  };
+}
+var COMMENT_BUBBLE_WORLD_SIZE = 18;
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function createCommentId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `comment-${Math.random().toString(36).slice(2, 10)}`;
+}
+function RealtimeCommentComposer({
+  viewportRef,
+  cameraVersion,
+  composer,
+  author,
+  authorImage,
+  roomId,
+  title,
+  description,
+  placeholder,
+  cancelLabel,
+  submitLabel,
+  submitHint,
+  onBodyChange,
+  onCommit,
+  onCancel
+}) {
+  const commentInputRef = useRef(null);
+  const composerRef = useRef(null);
+  const [composerSize, setComposerSize] = useState({ width: 360, height: 320 });
+  useEffect(() => {
+    if (!composer) return;
+    commentInputRef.current?.focus();
+  }, [composer]);
+  const camera = viewportRef?.current?.getCamera();
+  const viewportSize = viewportRef?.current?.getViewportSize();
+  useLayoutEffect(() => {
+    if (!composer || !viewportSize) return;
+    const el = composerRef.current;
+    if (!el) return;
+    const updateSize = () => {
+      const next = {
+        width: el.offsetWidth,
+        height: el.offsetHeight
+      };
+      setComposerSize(
+        (current) => current.width === next.width && current.height === next.height ? current : next
+      );
+    };
+    updateSize();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [composer, viewportSize]);
+  if (!composer) return null;
+  if (!camera || !viewportSize) return null;
+  const anchor = camera.worldToScreen(composer.worldX, composer.worldY);
+  const composerWidth = Math.min(360, Math.max(220, viewportSize.width - 32));
+  const screenPosition = {
+    left: clamp(
+      anchor.screenX + 20,
+      16,
+      Math.max(16, viewportSize.width - composerSize.width - 16)
+    ),
+    top: clamp(
+      anchor.screenY - 22,
+      16,
+      Math.max(16, viewportSize.height - composerSize.height - 16)
+    )
+  };
+  function handleKeyDown(event) {
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      event.preventDefault();
+      onCommit();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onCancel();
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: composerRef,
+      style: {
+        position: "absolute",
+        left: screenPosition.left,
+        top: screenPosition.top,
+        zIndex: 44,
+        width: composerWidth,
+        maxWidth: "calc(100% - 32px)",
+        maxHeight: "calc(100% - 32px)",
+        padding: 18,
+        borderRadius: 22,
+        background: "rgba(255,255,255,0.98)",
+        border: "1px solid rgba(148,163,184,0.28)",
+        boxShadow: "0 22px 48px rgba(15,23,42,0.18)",
+        backdropFilter: "blur(12px)",
+        pointerEvents: "auto",
+        boxSizing: "border-box",
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 700, color: "#0f172a" }, children: title }),
+        /* @__PURE__ */ jsx("div", { style: { marginTop: 6, color: "#64748b", fontSize: 13, lineHeight: 1.5 }, children: description }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              marginTop: 14,
+              marginBottom: 12
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: authorImage,
+                  alt: author.displayName,
+                  style: {
+                    width: 38,
+                    height: 38,
+                    borderRadius: 999,
+                    objectFit: "cover",
+                    boxShadow: `0 0 0 2px ${author.color}22`,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#0f172a" }, children: author.displayName }),
+                roomId ? /* @__PURE__ */ jsxs("div", { style: { color: "#64748b", fontSize: 12.5 }, children: [
+                  "Sala ",
+                  roomId
+                ] }) : null
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: commentInputRef,
+            value: composer.body,
+            onChange: (event) => onBodyChange(event.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            style: {
+              width: "100%",
+              minHeight: 116,
+              padding: "12px 14px",
+              borderRadius: 14,
+              border: "1px solid #cbd5e1",
+              boxSizing: "border-box",
+              fontFamily: "inherit",
+              fontSize: 15,
+              lineHeight: 1.5,
+              color: "#0f172a",
+              resize: "vertical"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-end",
+              flexWrap: "wrap",
+              gap: 10,
+              marginTop: 12
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    color: "#64748b",
+                    fontSize: 11.5,
+                    lineHeight: 1.4,
+                    flex: "1 1 120px"
+                  },
+                  children: submitHint
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, flexShrink: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onCancel,
+                    style: {
+                      padding: "10px 14px",
+                      borderRadius: 12,
+                      border: "1px solid #cbd5e1",
+                      background: "#fff",
+                      fontFamily: "inherit",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      whiteSpace: "nowrap",
+                      cursor: "pointer"
+                    },
+                    children: cancelLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onCommit,
+                    disabled: !composer.body.trim(),
+                    style: {
+                      padding: "10px 14px",
+                      borderRadius: 12,
+                      border: "1px solid #6d28d9",
+                      background: composer.body.trim() ? "#7c3aed" : "#c4b5fd",
+                      color: "#fff",
+                      fontFamily: "inherit",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      whiteSpace: "nowrap",
+                      cursor: composer.body.trim() ? "pointer" : "not-allowed",
+                      opacity: composer.body.trim() ? 1 : 0.72
+                    },
+                    children: submitLabel
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var overlayShell2 = {
+  position: "absolute",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: 26,
+  overflow: "hidden"
+};
+function renderRealtimeCommentsOverlayNode(options, viewportRef) {
+  return /* @__PURE__ */ jsxs("div", { style: overlayShell2, children: [
+    /* @__PURE__ */ jsx(
+      RealtimeCommentsOverlay,
+      {
+        items: options.items,
+        onItemsChange: options.onItemsChange,
+        isDragEnabled: options.isDragEnabled,
+        cameraVersion: options.cameraVersion,
+        viewportRef
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RealtimeCommentComposer,
+      {
+        viewportRef,
+        cameraVersion: options.cameraVersion,
+        composer: options.composer,
+        author: options.author,
+        authorImage: options.authorImage,
+        roomId: options.roomId,
+        title: options.title,
+        description: options.description,
+        placeholder: options.placeholder,
+        cancelLabel: options.cancelLabel,
+        submitLabel: options.submitLabel,
+        submitHint: options.submitHint,
+        onBodyChange: options.onBodyChange,
+        onCommit: options.onCommit,
+        onCancel: options.onCancel
+      }
+    )
+  ] });
+}
+function useRealtimeComments({
+  items,
+  onItemsChange,
+  author,
+  viewportRef,
+  activeToolId,
+  roomId,
+  setToolId,
+  toolAfterDraft = "select",
+  tools: providedTools = DEFAULT_VECTOR_TOOLS,
+  composerTitle = "Novo coment\xE1rio",
+  composerDescription = "Escreva algo para a equipe. Ao enviar, a bolha sincroniza na sala.",
+  composerPlaceholder = "Contexto, decisao, duvida, feedback...",
+  cancelLabel = "Cancelar",
+  submitLabel = "Publicar coment\xE1rio",
+  submitHint = "`Ctrl/Cmd + Enter` envia"
+}) {
+  const [cameraVersion, setCameraVersion] = useState(0);
+  const [commentComposer, setCommentComposer] = useState(null);
+  const authorImage = useMemo(
+    () => author.image ?? createRealtimeCommentAvatarDataUrl(author.displayName, author.color),
+    [author.color, author.displayName, author.image]
+  );
+  const tools = useMemo(
+    () => withRealtimeCommentTool(providedTools),
+    [providedTools]
+  );
+  const customPlacement = useMemo(
+    () => ({
+      toolId: "comment",
+      createItem: ({ id, bounds }) => createRealtimeCommentDraftItem(id, bounds, author.color)
+    }),
+    [author.color]
+  );
+  const onViewportItemsChange = useCallback(
+    (nextItems) => {
+      const currentIds = new Set(items.map((item) => item.id));
+      const draftItem = nextItems.find(
+        (item) => !currentIds.has(item.id) && isRealtimeCommentDraftItem(item)
+      );
+      if (!draftItem) {
+        onItemsChange(nextItems);
+        return;
+      }
+      const filteredItems = nextItems.filter((item) => item.id !== draftItem.id);
+      const shouldPersistFiltered = filteredItems.length !== items.length || filteredItems.some((item, index) => items[index]?.id !== item.id);
+      if (shouldPersistFiltered) {
+        onItemsChange(filteredItems);
+      }
+      setCommentComposer({
+        worldX: draftItem.bounds.x + draftItem.bounds.width / 2,
+        worldY: draftItem.bounds.y + draftItem.bounds.height / 2,
+        body: ""
+      });
+      setToolId?.(toolAfterDraft);
+    },
+    [items, onItemsChange, setToolId, toolAfterDraft]
+  );
+  const onCameraChange = useCallback(() => {
+    setCameraVersion((value) => value + 1);
+  }, []);
+  const closeComposer = useCallback(() => {
+    setCommentComposer(null);
+  }, []);
+  const onComposerBodyChange = useCallback((body) => {
+    setCommentComposer((current) => current ? { ...current, body } : current);
+  }, []);
+  const onComposerCommit = useCallback(() => {
+    if (!commentComposer) return;
+    const body = commentComposer.body.trim();
+    if (!body) return;
+    const half = COMMENT_BUBBLE_WORLD_SIZE / 2;
+    const nextItem = createRealtimeCommentItem(
+      createCommentId(),
+      {
+        x: commentComposer.worldX - half,
+        y: commentComposer.worldY - half,
+        width: COMMENT_BUBBLE_WORLD_SIZE,
+        height: COMMENT_BUBBLE_WORLD_SIZE
+      },
+      {
+        body,
+        createdAt: Date.now(),
+        authorPeerId: author.peerId,
+        authorDisplayName: author.displayName,
+        authorColor: author.color,
+        authorImage
+      }
+    );
+    onItemsChange(items.concat(nextItem));
+    setCommentComposer(null);
+  }, [
+    author.color,
+    author.displayName,
+    author.peerId,
+    authorImage,
+    commentComposer,
+    items,
+    onItemsChange
+  ]);
+  const overlay = useMemo(
+    () => renderRealtimeCommentsOverlayNode(
+      {
+        items,
+        onItemsChange,
+        isDragEnabled: activeToolId === "select",
+        cameraVersion,
+        composer: commentComposer,
+        author,
+        authorImage,
+        roomId,
+        title: composerTitle,
+        description: composerDescription,
+        placeholder: composerPlaceholder,
+        cancelLabel,
+        submitLabel,
+        submitHint,
+        onBodyChange: onComposerBodyChange,
+        onCommit: onComposerCommit,
+        onCancel: closeComposer
+      },
+      viewportRef
+    ),
+    [
+      author,
+      authorImage,
+      cameraVersion,
+      cancelLabel,
+      closeComposer,
+      commentComposer,
+      composerDescription,
+      composerPlaceholder,
+      composerTitle,
+      items,
+      activeToolId,
+      onItemsChange,
+      onComposerBodyChange,
+      onComposerCommit,
+      roomId,
+      submitHint,
+      submitLabel,
+      viewportRef
+    ]
+  );
+  const viewport = useMemo(
+    () => ({
+      customPlacement,
+      onItemsChange: onViewportItemsChange,
+      onCameraChange
+    }),
+    [customPlacement, onCameraChange, onViewportItemsChange]
+  );
+  return useMemo(
+    () => ({
+      tools,
+      overlay,
+      viewport,
+      isComposerOpen: commentComposer != null,
+      closeComposer
+    }),
+    [closeComposer, commentComposer, overlay, tools, viewport]
+  );
+}
+function createClientId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `client-${Math.random().toString(36).slice(2, 10)}`;
+}
+function normalizeSocketUrl(input) {
+  if (input.startsWith("ws://") || input.startsWith("wss://")) return input;
+  if (input.startsWith("http://")) return `ws://${input.slice("http://".length)}`;
+  if (input.startsWith("https://")) return `wss://${input.slice("https://".length)}`;
+  if (input.startsWith("/")) {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    return `${protocol}//${window.location.host}${input}`;
+  }
+  return input;
+}
+function isValidSocketUrl(input) {
+  if (!input || input.includes("<") || input.includes(">")) return false;
+  try {
+    const parsed = new URL(input);
+    return parsed.protocol === "ws:" || parsed.protocol === "wss:";
+  } catch {
+    return false;
+  }
+}
+function serializeItems(items) {
+  try {
+    return JSON.stringify(items);
+  } catch {
+    return null;
+  }
+}
+function sameSerializedItems(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  const leftJson = serializeItems(left);
+  const rightJson = serializeItems(right);
+  return leftJson != null && leftJson === rightJson;
+}
+function nowMs() {
+  return Date.now();
+}
+function useRealtimeSession(options) {
+  const {
+    url,
+    roomId,
+    peer,
+    enabled = true,
+    reconnect = true,
+    heartbeatMs = 1e4,
+    maxReconnectDelayMs = 12e3,
+    initialReconnectDelayMs = 800,
+    connectTimeoutMs = 1e4,
+    onError
+  } = options;
+  const clientIdRef = useRef(peer.clientId ?? createClientId());
+  const wsRef = useRef(null);
+  const reconnectTimerRef = useRef(null);
+  const heartbeatTimerRef = useRef(null);
+  const connectTimeoutRef = useRef(null);
+  const manualDisconnectRef = useRef(false);
+  const retryCountRef = useRef(0);
+  const currentRevisionRef = useRef(0);
+  const outboundInFlightRef = useRef(null);
+  const queuedItemsRef = useRef(null);
+  const subscriberRefs = useRef(/* @__PURE__ */ new Set());
+  const lastCursorRef = useRef(null);
+  const lastMarkupStrokeRef = useRef(null);
+  const lastActiveToolRef = useRef(void 0);
+  const latestDocumentRef = useRef(null);
+  const connectionStateRef = useRef(
+    enabled ? "connecting" : "offline"
+  );
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const [connectSequence, setConnectSequence] = useState(0);
+  const [connection, setConnection] = useState({
+    state: enabled ? "connecting" : "offline",
+    connected: false,
+    roomId,
+    clientId: null,
+    retryCount: 0,
+    lastConnectedAt: null,
+    lastMessageAt: null,
+    lastPongAt: null,
+    lastError: null
+  });
+  const [sessionPeers, setSessionPeers] = useState([]);
+  const [document2, setDocument] = useState(null);
+  connectionStateRef.current = connection.state;
+  const clearReconnectTimer = useCallback(() => {
+    if (reconnectTimerRef.current != null) {
+      window.clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+  }, []);
+  const clearHeartbeatTimer = useCallback(() => {
+    if (heartbeatTimerRef.current != null) {
+      window.clearInterval(heartbeatTimerRef.current);
+      heartbeatTimerRef.current = null;
+    }
+  }, []);
+  const clearConnectTimeout = useCallback(() => {
+    if (connectTimeoutRef.current != null) {
+      window.clearTimeout(connectTimeoutRef.current);
+      connectTimeoutRef.current = null;
+    }
+  }, []);
+  const updateConnection = useCallback(
+    (patch) => {
+      setConnection((prev) => {
+        if (typeof patch === "function") return patch(prev);
+        return { ...prev, ...patch };
+      });
+    },
+    []
+  );
+  const notifySubscribers = useCallback((items) => {
+    for (const subscriber of subscriberRefs.current) {
+      subscriber(items);
+    }
+  }, []);
+  const applyDocument = useCallback(
+    (snapshot, options2) => {
+      currentRevisionRef.current = snapshot.revision;
+      latestDocumentRef.current = snapshot;
+      setDocument(snapshot);
+      if (!options2?.suppressSubscriberNotify) {
+        notifySubscribers(snapshot.items);
+      }
+    },
+    [notifySubscribers]
+  );
+  const applyPeers = useCallback((peers) => {
+    const selfClientId = clientIdRef.current;
+    setSessionPeers(
+      peers.map(
+        (peerState) => peerState.clientId === selfClientId ? {
+          ...peerState,
+          isSelf: true,
+          connectionState: connectionStateRef.current
+        } : peerState
+      )
+    );
+  }, []);
+  const buildClientMessage = useCallback(
+    (message) => JSON.stringify(message),
+    []
+  );
+  const sendRaw = useCallback(
+    (message) => {
+      const ws = wsRef.current;
+      if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+      ws.send(buildClientMessage(message));
+      return true;
+    },
+    [buildClientMessage]
+  );
+  const flushQueuedDocument = useCallback(() => {
+    const next = queuedItemsRef.current;
+    if (!next || outboundInFlightRef.current) return;
+    queuedItemsRef.current = null;
+    const baseRevision = currentRevisionRef.current;
+    const serialized = serializeItems(next);
+    outboundInFlightRef.current = { baseRevision, items: next, serialized };
+    const didSend = sendRaw({
+      type: "document:update",
+      roomId,
+      clientId: clientIdRef.current,
+      baseRevision,
+      items: next
+    });
+    if (!didSend) {
+      queuedItemsRef.current = next;
+      outboundInFlightRef.current = null;
+    }
+  }, [roomId, sendRaw]);
+  const queueDocumentSend = useCallback(
+    (items) => {
+      queuedItemsRef.current = items;
+      flushQueuedDocument();
+    },
+    [flushQueuedDocument]
+  );
+  const sendPresenceUpdate = useCallback(() => {
+    sendRaw({
+      type: "presence:update",
+      roomId,
+      clientId: clientIdRef.current,
+      presence: {
+        cursor: lastCursorRef.current,
+        markupStroke: lastMarkupStrokeRef.current ?? null,
+        ...lastActiveToolRef.current ? { activeTool: lastActiveToolRef.current } : {}
+      }
+    });
+  }, [roomId, sendRaw]);
+  const scheduleReconnect = useCallback(() => {
+    if (!reconnect || manualDisconnectRef.current) return;
+    clearReconnectTimer();
+    retryCountRef.current += 1;
+    const delay = Math.min(
+      maxReconnectDelayMs,
+      initialReconnectDelayMs * 2 ** Math.max(0, retryCountRef.current - 1)
+    );
+    updateConnection((prev) => ({
+      ...prev,
+      state: "reconnecting",
+      connected: false,
+      retryCount: retryCountRef.current
+    }));
+    reconnectTimerRef.current = window.setTimeout(() => {
+      setConnectSequence((value) => value + 1);
+    }, delay);
+  }, [
+    clearReconnectTimer,
+    initialReconnectDelayMs,
+    maxReconnectDelayMs,
+    reconnect,
+    updateConnection
+  ]);
+  useEffect(() => {
+    if (!enabled) {
+      manualDisconnectRef.current = true;
+      clearReconnectTimer();
+      clearHeartbeatTimer();
+      clearConnectTimeout();
+      wsRef.current?.close();
+      wsRef.current = null;
+      setSessionPeers([]);
+      queuedItemsRef.current = null;
+      outboundInFlightRef.current = null;
+      updateConnection((prev) => ({
+        ...prev,
+        state: "offline",
+        connected: false,
+        roomId,
+        clientId: null
+      }));
+      return;
+    }
+    manualDisconnectRef.current = false;
+    const socketUrl = normalizeSocketUrl(url);
+    if (!isValidSocketUrl(socketUrl)) {
+      updateConnection((prev) => ({
+        ...prev,
+        state: "error",
+        connected: false,
+        roomId,
+        lastError: "URL de websocket invalida."
+      }));
+      onErrorRef.current?.("URL de websocket invalida.");
+      return;
+    }
+    let disposed = false;
+    updateConnection((prev) => ({
+      ...prev,
+      state: retryCountRef.current > 0 ? "reconnecting" : "connecting",
+      connected: false,
+      roomId,
+      lastError: null
+    }));
+    const socket = new WebSocket(socketUrl);
+    wsRef.current = socket;
+    clearConnectTimeout();
+    connectTimeoutRef.current = window.setTimeout(() => {
+      if (socket.readyState === WebSocket.CONNECTING) {
+        socket.close();
+      }
+    }, connectTimeoutMs);
+    socket.addEventListener("open", () => {
+      if (disposed) return;
+      clearConnectTimeout();
+      sendRaw({
+        type: "session:join",
+        roomId,
+        peer: {
+          clientId: clientIdRef.current,
+          peerId: peer.id,
+          ...peer.displayName ? { displayName: peer.displayName } : {},
+          ...peer.color ? { color: peer.color } : {},
+          ...peer.image ? { image: peer.image } : {}
+        }
+      });
+      clearHeartbeatTimer();
+      heartbeatTimerRef.current = window.setInterval(() => {
+        sendRaw({
+          type: "session:ping",
+          roomId,
+          clientId: clientIdRef.current,
+          sentAt: nowMs()
+        });
+      }, heartbeatMs);
+    });
+    socket.addEventListener("message", (event) => {
+      if (disposed) return;
+      let payload = event.data;
+      if (typeof event.data === "string") {
+        try {
+          payload = JSON.parse(event.data);
+        } catch {
+          return;
+        }
+      }
+      const parsed = parseRealtimeServerMessage(payload);
+      if (!parsed) return;
+      updateConnection((prev) => ({
+        ...prev,
+        lastMessageAt: nowMs()
+      }));
+      if (parsed.type === "session:welcome") {
+        retryCountRef.current = 0;
+        const queuedBeforeWelcome = queuedItemsRef.current;
+        const shouldPromoteQueuedLocalDraft = queuedBeforeWelcome != null && parsed.document.revision === 0 && parsed.document.items.length === 0;
+        updateConnection((prev) => ({
+          ...prev,
+          state: "connected",
+          connected: true,
+          clientId: parsed.clientId,
+          retryCount: 0,
+          lastConnectedAt: nowMs(),
+          lastError: null
+        }));
+        applyPeers(parsed.peers);
+        applyDocument(parsed.document, {
+          suppressSubscriberNotify: shouldPromoteQueuedLocalDraft
+        });
+        if (!shouldPromoteQueuedLocalDraft) {
+          queuedItemsRef.current = null;
+          outboundInFlightRef.current = null;
+        }
+        flushQueuedDocument();
+        return;
+      }
+      if (parsed.type === "presence:sync") {
+        applyPeers(parsed.peers);
+        return;
+      }
+      if (parsed.type === "session:peer-joined") {
+        setSessionPeers((prev) => {
+          const next = prev.filter(
+            (peerState) => peerState.clientId !== parsed.peer.clientId
+          );
+          next.push(
+            parsed.peer.clientId === clientIdRef.current ? { ...parsed.peer, isSelf: true } : parsed.peer
+          );
+          return next;
+        });
+        return;
+      }
+      if (parsed.type === "session:peer-left") {
+        setSessionPeers(
+          (prev) => prev.filter((peerState) => peerState.clientId !== parsed.clientId)
+        );
+        return;
+      }
+      if (parsed.type === "session:pong") {
+        updateConnection((prev) => ({
+          ...prev,
+          lastPongAt: parsed.serverTime
+        }));
+        return;
+      }
+      if (parsed.type === "session:error") {
+        updateConnection((prev) => ({
+          ...prev,
+          state: prev.connected ? prev.state : "error",
+          lastError: parsed.message
+        }));
+        onErrorRef.current?.(parsed.message);
+        return;
+      }
+      if (parsed.type === "document:sync") {
+        const selfClientId = clientIdRef.current;
+        const inFlight = outboundInFlightRef.current;
+        const isSelfAck = parsed.document.updatedByClientId === selfClientId;
+        if (!isSelfAck) {
+          outboundInFlightRef.current = null;
+          queuedItemsRef.current = null;
+          applyDocument(parsed.document);
+          return;
+        }
+        const shouldSuppress = inFlight != null && sameSerializedItems(inFlight.items, parsed.document.items);
+        outboundInFlightRef.current = null;
+        applyDocument(parsed.document, { suppressSubscriberNotify: shouldSuppress });
+        if (queuedItemsRef.current) {
+          if (sameSerializedItems(queuedItemsRef.current, parsed.document.items)) {
+            queuedItemsRef.current = null;
+          } else {
+            flushQueuedDocument();
+          }
+        }
+        return;
+      }
+      if (parsed.type === "document:resync-required") {
+        outboundInFlightRef.current = null;
+        queuedItemsRef.current = null;
+        updateConnection((prev) => ({
+          ...prev,
+          lastError: parsed.reason
+        }));
+        applyDocument(parsed.document);
+      }
+    });
+    socket.addEventListener("error", () => {
+      if (disposed) return;
+      updateConnection((prev) => ({
+        ...prev,
+        state: prev.connected ? prev.state : "error",
+        lastError: "Falha de conex\xE3o websocket."
+      }));
+    });
+    socket.addEventListener("close", () => {
+      if (disposed) return;
+      clearHeartbeatTimer();
+      clearConnectTimeout();
+      wsRef.current = null;
+      updateConnection((prev) => ({
+        ...prev,
+        connected: false,
+        clientId: prev.clientId,
+        state: manualDisconnectRef.current || !enabled ? "offline" : prev.state
+      }));
+      if (!manualDisconnectRef.current && enabled) {
+        scheduleReconnect();
+      }
+    });
+    return () => {
+      disposed = true;
+      clearReconnectTimer();
+      clearHeartbeatTimer();
+      clearConnectTimeout();
+      socket.close();
+    };
+  }, [
+    applyDocument,
+    applyPeers,
+    clearConnectTimeout,
+    clearHeartbeatTimer,
+    clearReconnectTimer,
+    connectSequence,
+    connectTimeoutMs,
+    enabled,
+    flushQueuedDocument,
+    heartbeatMs,
+    peer.color,
+    peer.displayName,
+    peer.image,
+    peer.id,
+    roomId,
+    scheduleReconnect,
+    sendRaw,
+    updateConnection,
+    url
+  ]);
+  useEffect(() => {
+    setSessionPeers(
+      (prev) => prev.map(
+        (peerState) => peerState.clientId === clientIdRef.current ? {
+          ...peerState,
+          isSelf: true,
+          connectionState: connection.state
+        } : peerState
+      )
+    );
+  }, [connection.state]);
+  const remoteAdapter = useMemo(
+    () => ({
+      subscribe(onItems) {
+        subscriberRefs.current.add(onItems);
+        if (latestDocumentRef.current) {
+          onItems(latestDocumentRef.current.items);
+        }
+        return () => {
+          subscriberRefs.current.delete(onItems);
+        };
+      },
+      send(items) {
+        queueDocumentSend(items);
+      }
+    }),
+    [queueDocumentSend]
+  );
+  const disconnect = useCallback(() => {
+    manualDisconnectRef.current = true;
+    clearReconnectTimer();
+    clearHeartbeatTimer();
+    clearConnectTimeout();
+    sendRaw({
+      type: "session:leave",
+      roomId,
+      clientId: clientIdRef.current
+    });
+    wsRef.current?.close();
+    wsRef.current = null;
+    updateConnection((prev) => ({
+      ...prev,
+      state: "offline",
+      connected: false
+    }));
+  }, [
+    clearConnectTimeout,
+    clearHeartbeatTimer,
+    clearReconnectTimer,
+    roomId,
+    sendRaw,
+    updateConnection
+  ]);
+  const reconnectNow = useCallback(() => {
+    disconnect();
+    manualDisconnectRef.current = false;
+    retryCountRef.current = 0;
+    setConnectSequence((value) => value + 1);
+  }, [disconnect]);
+  const remotePresence = useMemo(
+    () => sessionPeers.filter((peerState) => !peerState.isSelf),
+    [sessionPeers]
+  );
+  const bindViewportPresence = useCallback(
+    (bindingOptions) => ({
+      remotePresence,
+      onWorldPointerMove(world) {
+        lastCursorRef.current = world;
+        lastActiveToolRef.current = bindingOptions?.activeTool;
+        sendPresenceUpdate();
+      },
+      onWorldPointerLeave() {
+        lastCursorRef.current = null;
+        lastActiveToolRef.current = bindingOptions?.activeTool;
+        sendPresenceUpdate();
+      },
+      onPlacementPreviewChange(preview) {
+        lastMarkupStrokeRef.current = remoteMarkupStrokeFromPlacementPreview(preview);
+        lastActiveToolRef.current = bindingOptions?.activeTool;
+        sendPresenceUpdate();
+      }
+    }),
+    [remotePresence, sendPresenceUpdate]
+  );
+  return {
+    connection,
+    sessionPeers,
+    remotePresence,
+    remoteAdapter,
+    document: document2,
+    bindViewportPresence,
+    disconnect,
+    reconnectNow
+  };
+}
+function RealtimeCollaborationPluginComponent({
+  pluginId,
+  options
+}) {
+  const { viewportRef, viewport } = useCanvuViewportContext();
+  const { items, onItemsChange } = useCanvuDocumentContext();
+  const session = useRealtimeSession(options);
+  const peerDisplayName = options.peer.displayName ?? options.peer.id;
+  const peerColor = options.peer.color ?? defaultPresenceColorForId(options.peer.id);
+  const peerAuthor = useMemo(
+    () => ({
+      peerId: options.peer.id,
+      displayName: peerDisplayName,
+      color: peerColor,
+      ...options.peer.image ? { image: options.peer.image } : {}
+    }),
+    [options.peer.id, options.peer.image, peerColor, peerDisplayName]
+  );
+  const commentOptions = useMemo(
+    () => options.comments === false ? null : options.comments ?? {},
+    [options.comments]
+  );
+  const handleCommentItemsChange = useCallback(
+    (nextItems) => {
+      onItemsChange?.([...nextItems]);
+      session.remoteAdapter.send?.([...nextItems]);
+    },
+    [onItemsChange, session.remoteAdapter]
+  );
+  const comments = useRealtimeComments({
+    items,
+    onItemsChange: handleCommentItemsChange,
+    author: peerAuthor,
+    viewportRef,
+    activeToolId: viewport.toolId,
+    roomId: options.roomId,
+    setToolId: viewport.onToolChangeRequest,
+    ...commentOptions ?? {}
+  });
+  const presenceBindings = useMemo(
+    () => session.bindViewportPresence({ activeTool: viewport.toolId }),
+    [session.bindViewportPresence, viewport.toolId]
+  );
+  useEffect(() => {
+    if (!onItemsChange || !session.document) return;
+    if (session.document.updatedByClientId === session.connection.clientId) return;
+    onItemsChange(session.document.items);
+  }, [onItemsChange, session.connection.clientId, session.document]);
+  const contribution = useMemo(
+    () => ({
+      toolTransform: commentOptions ? () => comments.tools : void 0,
+      customPlacements: commentOptions ? comments.viewport.customPlacement ? [comments.viewport.customPlacement] : void 0 : void 0,
+      viewportProps: {
+        remotePresence: presenceBindings.remotePresence
+      },
+      callbacks: {
+        onWorldPointerMove: presenceBindings.onWorldPointerMove,
+        onWorldPointerLeave: presenceBindings.onWorldPointerLeave,
+        onPlacementPreviewChange: presenceBindings.onPlacementPreviewChange,
+        onCameraChange: commentOptions ? comments.viewport.onCameraChange : void 0
+      },
+      wrapOnItemsChange: (nextItems, ctx) => {
+        if (commentOptions) {
+          comments.viewport.onItemsChange?.(nextItems);
+          return;
+        }
+        ctx.next(nextItems);
+        session.remoteAdapter.send?.(nextItems);
+      }
+    }),
+    [
+      commentOptions,
+      comments.tools,
+      comments.viewport,
+      presenceBindings,
+      session.remoteAdapter
+    ]
+  );
+  useCanvuPluginContribution(pluginId, contribution);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    options.showSessionPanel === false ? null : /* @__PURE__ */ jsx(
+      RealtimeSessionPanel,
+      {
+        title: options.sessionPanel?.title ?? "Sess\xE3o realtime",
+        peers: session.sessionPeers,
+        connected: session.connection.connected,
+        connectionState: session.connection.state,
+        roomId: options.roomId,
+        children: options.sessionPanel?.children
+      }
+    ),
+    commentOptions ? comments.overlay : null
+  ] });
+}
+function realtimeCollaborationPlugin(options) {
+  const pluginId = `canvu.plugin.realtime-collaboration:${options.roomId}:${options.peer.clientId ?? options.peer.id}`;
+  return createCanvuPlugin({
+    id: pluginId,
+    Component() {
+      return /* @__PURE__ */ jsx(
+        RealtimeCollaborationPluginComponent,
+        {
+          pluginId,
+          options
+        }
+      );
+    }
+  });
+}
+function realtimeSessionPlugin(options) {
+  return {
+    id: "trazo.plugin.realtime-session",
+    render: () => /* @__PURE__ */ jsx(RealtimeSessionPanel, { ...options })
+  };
+}
+
+export { PresenceRemoteLayer, REALTIME_COMMENT_TOOL, RealtimeCommentsOverlay, RealtimeSessionPanel, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimeSession, withRealtimeCommentTool };
+//# sourceMappingURL=realtime.js.map
+//# sourceMappingURL=realtime.js.map