@mieweb/ui 0.7.1 → 0.7.2

package/dist/chunk-X4LBUPJO.cjs

@@ -0,0 +1,511 @@
+'use strict';
+
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React2 = require('react');
+var reactDom = require('react-dom');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var defaultCollabStatusLabels = {
+  live: "Live",
+  connecting: "Connecting\u2026",
+  editing: (names) => `${names.join(", ")} ${names.length === 1 ? "is" : "are"} editing`,
+  triggerLabel: "Live-sync status \u2014 open the update log",
+  peersTitle: (count) => `In the room (${count})`,
+  alone: "You are the only one here.",
+  logTitle: (count) => `Update log (${count})`,
+  close: "Close update log",
+  wrap: "Wrap long values",
+  empty: "No updates yet.",
+  roomTerm: "Room",
+  urlTerm: "Socket",
+  clientTerm: "Client",
+  userTerm: "User",
+  clientSynced: "synced",
+  clientConnecting: "connecting"
+};
+function peerLabels(peers) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const p of peers) {
+    const entry = seen.get(p.name);
+    if (entry) entry.count += 1;
+    else seen.set(p.name, { count: 1, color: p.color });
+  }
+  return [...seen].map(([name, { count, color }]) => ({
+    label: count > 1 ? `${name} (${count})` : name,
+    color
+  }));
+}
+var PANEL_OFFSET = 6;
+var VIEWPORT_PADDING = 8;
+function useAnchoredPanel(open, anchorRef, panelRef) {
+  const [pos, setPos] = React2__namespace.useState(
+    null
+  );
+  React2__namespace.useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const update = () => {
+      const anchor = anchorRef.current;
+      const panel = panelRef.current;
+      if (!anchor || !panel) return;
+      const a = anchor.getBoundingClientRect();
+      const { offsetWidth: width, offsetHeight: height } = panel;
+      const maxLeft = window.innerWidth - width - VIEWPORT_PADDING;
+      const left = Math.max(
+        VIEWPORT_PADDING,
+        Math.min(a.right - width, Math.max(VIEWPORT_PADDING, maxLeft))
+      );
+      let top = a.bottom + PANEL_OFFSET;
+      if (top + height > window.innerHeight - VIEWPORT_PADDING) {
+        top = Math.max(VIEWPORT_PADDING, a.top - height - PANEL_OFFSET);
+      }
+      setPos({ top, left });
+    };
+    const raf = window.requestAnimationFrame(update);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorRef, panelRef]);
+  return pos;
+}
+var KIND_TONE = {
+  doc: "text-muted-foreground",
+  awareness: "text-primary-600 dark:text-primary-400",
+  sync: "text-success-700 dark:text-success-400",
+  patch: "text-muted-foreground"
+};
+function CollabStatus({
+  connected,
+  peers = [],
+  log = [],
+  room = null,
+  showLog = true,
+  compact = false,
+  attention = null,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = { ...defaultCollabStatusLabels, ...labelOverrides };
+  const [open, setOpen] = React2__namespace.useState(false);
+  const [wrapped, setWrapped] = React2__namespace.useState(false);
+  const triggerRef = React2__namespace.useRef(null);
+  const panelRef = React2__namespace.useRef(null);
+  const pos = useAnchoredPanel(open && showLog, triggerRef, panelRef);
+  const titleId = React2__namespace.useId();
+  React2__namespace.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (panelRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open]);
+  const occupants = peerLabels(peers);
+  const names = occupants.map((p) => p.label);
+  const clip = wrapped ? "break-all whitespace-pre-wrap" : "truncate";
+  const statusText = connected ? labels.live : labels.connecting;
+  const clientLine = `${room?.clientId ?? "\u2014"} \xB7 ${connected ? labels.clientSynced : labels.clientConnecting}`;
+  const triggerLabel = compact ? [
+    labels.triggerLabel,
+    statusText,
+    attention,
+    names.length > 0 && labels.editing(names)
+  ].filter(Boolean).join(" \u2014 ") : labels.triggerLabel;
+  const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ref: triggerRef,
+      className: chunkS5RVSXDV_cjs.cn(
+        "text-muted-foreground inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none",
+        showLog && "hover:bg-muted cursor-pointer",
+        className
+      ),
+      onClick: showLog ? () => setOpen((v) => !v) : void 0,
+      disabled: !showLog,
+      title: showLog ? triggerLabel : void 0,
+      "aria-expanded": showLog ? open : void 0,
+      "aria-label": showLog ? triggerLabel : void 0,
+      "data-slot": "collab-status-trigger",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "collab-status-dot",
+            className: chunkS5RVSXDV_cjs.cn(
+              "h-2 w-2 shrink-0 rounded-full",
+              !connected && "bg-warning-500 animate-pulse",
+              connected && attention && "bg-warning-500",
+              connected && !attention && "bg-success-500"
+            )
+          }
+        ),
+        !compact && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusText }),
+        !compact && attention && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-warning-700 dark:text-warning-400 truncate", children: [
+          "\xB7 ",
+          attention
+        ] }),
+        !compact && names.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: `\xB7 ${labels.editing(names)}` })
+      ]
+    }
+  );
+  if (!showLog) return trigger;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: "relative inline-flex items-center",
+      "data-slot": "collab-status",
+      children: [
+        trigger,
+        open && typeof document !== "undefined" && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: panelRef,
+              role: "dialog",
+              "aria-labelledby": titleId,
+              "data-slot": "collab-status-panel",
+              className: chunkS5RVSXDV_cjs.cn(
+                "bg-card text-card-foreground border-border fixed z-50 w-[26rem] max-w-[calc(100vw-1rem)]",
+                "rounded-lg border p-3 text-xs shadow-xl"
+              ),
+              style: {
+                top: pos?.top ?? 0,
+                left: pos?.left ?? 0,
+                visibility: pos ? void 0 : "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { id: titleId, className: "text-foreground text-sm", children: labels.logTitle(log.length) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: chunkS5RVSXDV_cjs.cn(
+                          "hover:text-foreground focus-visible:ring-ring rounded p-0.5 focus-visible:ring-2 focus-visible:outline-none",
+                          wrapped ? "text-foreground bg-muted" : "text-muted-foreground"
+                        ),
+                        onClick: () => setWrapped((v) => !v),
+                        "aria-pressed": wrapped,
+                        "aria-label": labels.wrap,
+                        title: labels.wrap,
+                        "data-slot": "collab-status-wrap",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WrapText, { className: "h-4 w-4", "aria-hidden": "true" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded p-0.5 focus-visible:ring-2 focus-visible:outline-none",
+                        onClick: () => {
+                          setOpen(false);
+                          triggerRef.current?.focus();
+                        },
+                        "aria-label": labels.close,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4", "aria-hidden": "true" })
+                      }
+                    )
+                  ] })
+                ] }),
+                attention && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    "data-slot": "collab-status-attention",
+                    className: "text-warning-700 dark:text-warning-400 mb-2",
+                    children: attention
+                  }
+                ),
+                room && /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "border-border text-muted-foreground mb-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-b pb-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "opacity-70", children: labels.roomTerm }),
+                  /* @__PURE__ */ jsxRuntime.jsx("dd", { className: clip, title: room.name, children: room.name }),
+                  room.url && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "opacity-70", children: labels.urlTerm }),
+                    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: clip, title: room.url, children: room.url })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "opacity-70", children: labels.clientTerm }),
+                  /* @__PURE__ */ jsxRuntime.jsx("dd", { className: clip, title: clientLine, children: clientLine }),
+                  room.userId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "opacity-70", children: labels.userTerm }),
+                    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: clip, title: room.userId, children: room.userId })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "border-border mb-2 border-b pb-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground mb-1 block", children: labels.peersTitle(peers.length) }),
+                  peers.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: labels.alone }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "ul",
+                    {
+                      className: "flex flex-wrap gap-x-3 gap-y-1",
+                      "data-slot": "collab-status-peers",
+                      children: occupants.map((peer) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            className: "h-2 w-2 shrink-0 rounded-full",
+                            style: {
+                              backgroundColor: peer.color ?? "currentColor"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: chunkS5RVSXDV_cjs.cn("text-foreground", clip),
+                            title: peer.label,
+                            children: peer.label
+                          }
+                        )
+                      ] }, peer.label))
+                    }
+                  )
+                ] }),
+                log.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: labels.empty }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "max-h-72 space-y-0.5 overflow-y-auto font-mono", children: log.map((e) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "li",
+                  {
+                    className: "grid grid-cols-[auto_auto_1fr] gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground opacity-70", children: new Date(e.at).toLocaleTimeString() }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "span",
+                        {
+                          className: chunkS5RVSXDV_cjs.cn(
+                            "whitespace-nowrap",
+                            e.origin === "remote" ? "text-primary-600 dark:text-primary-400" : KIND_TONE[e.kind]
+                          ),
+                          children: [
+                            e.kind,
+                            e.origin ? `/${e.origin}` : ""
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: chunkS5RVSXDV_cjs.cn("text-foreground", clip),
+                          title: e.detail,
+                          children: e.detail
+                        }
+                      )
+                    ]
+                  },
+                  e.id
+                )) })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function useYjsCollabStatus({
+  doc,
+  provider,
+  user,
+  roomName,
+  url,
+  userId,
+  logCap = 100
+}) {
+  const [connected, setConnected] = React2__namespace.useState(false);
+  const [peers, setPeers] = React2__namespace.useState([]);
+  const [lastRemoteEdit, setLastRemoteEdit] = React2__namespace.useState(null);
+  const [log, setLog] = React2__namespace.useState([]);
+  const logIdRef = React2__namespace.useRef(0);
+  const awarenessRef = React2__namespace.useRef(null);
+  const selfNameRef = React2__namespace.useRef("");
+  const activitySeen = React2__namespace.useRef(/* @__PURE__ */ new Map());
+  const peerNames = React2__namespace.useRef(/* @__PURE__ */ new Map());
+  const pushLog = React2__namespace.useCallback(
+    (entry) => {
+      const full = {
+        id: ++logIdRef.current,
+        at: Date.now(),
+        ...entry
+      };
+      setLog((prev) => [full, ...prev].slice(0, logCap));
+    },
+    [logCap]
+  );
+  const selfName = user?.name?.trim();
+  const selfColor = user?.color;
+  React2__namespace.useEffect(() => {
+    if (!doc || !provider) {
+      setConnected(false);
+      setPeers([]);
+      setLastRemoteEdit(null);
+      return;
+    }
+    const awareness = provider.awareness;
+    awarenessRef.current = awareness;
+    activitySeen.current = /* @__PURE__ */ new Map();
+    peerNames.current = /* @__PURE__ */ new Map();
+    setConnected(provider.synced ?? false);
+    const onDocUpdate = (update, origin) => {
+      pushLog({
+        kind: "doc",
+        origin: origin === provider ? "remote" : "local",
+        detail: `doc update \xB7 ${update.byteLength} bytes`
+      });
+    };
+    doc.on("update", onDocUpdate);
+    const onSync = (isSynced) => {
+      setConnected(isSynced);
+      pushLog({
+        kind: "sync",
+        detail: isSynced ? "synced with server" : "disconnected"
+      });
+    };
+    provider.on("sync", onSync);
+    const onStatus = (event) => {
+      if (event?.status === "disconnected") setConnected(false);
+    };
+    provider.on("status", onStatus);
+    const onAwareness = () => {
+      const others = [];
+      const present = /* @__PURE__ */ new Map();
+      let freshest = null;
+      awareness.getStates().forEach((state, clientId) => {
+        if (clientId === awareness.clientID) return;
+        const peer = state.user;
+        if (peer?.name) {
+          others.push({ name: peer.name, color: peer.color });
+          present.set(clientId, peer.name);
+        }
+        const activity = state.activity;
+        if (activity && activity.at > (activitySeen.current.get(clientId) ?? 0)) {
+          activitySeen.current.set(clientId, activity.at);
+          if (!freshest || activity.at > freshest.at) {
+            const sameUser = !!peer?.name && peer.name === selfNameRef.current;
+            freshest = {
+              fields: activity.fields,
+              by: sameUser ? "You (another window)" : peer?.name,
+              at: activity.at
+            };
+          }
+        }
+      });
+      for (const [clientId, name] of present) {
+        if (!peerNames.current.has(clientId)) {
+          pushLog({
+            kind: "awareness",
+            origin: "remote",
+            detail: `${name} joined the room`
+          });
+        }
+      }
+      for (const [clientId, name] of peerNames.current) {
+        if (!present.has(clientId)) {
+          pushLog({
+            kind: "awareness",
+            origin: "remote",
+            detail: `${name} left the room`
+          });
+        }
+      }
+      peerNames.current = present;
+      setPeers(others);
+      if (freshest) {
+        const edit = freshest;
+        setLastRemoteEdit(edit);
+        pushLog({
+          kind: "awareness",
+          origin: "remote",
+          detail: `${edit.by ?? "peer"} edited ${edit.fields.join(", ")}`
+        });
+      }
+    };
+    awareness.on("change", onAwareness);
+    return () => {
+      doc.off("update", onDocUpdate);
+      provider.off("sync", onSync);
+      provider.off("status", onStatus);
+      awareness.off("change", onAwareness);
+      awarenessRef.current = null;
+      activitySeen.current = /* @__PURE__ */ new Map();
+      peerNames.current = /* @__PURE__ */ new Map();
+      setConnected(false);
+      setPeers([]);
+      setLastRemoteEdit(null);
+      setLog([]);
+    };
+  }, [doc, provider, pushLog]);
+  React2__namespace.useEffect(() => {
+    const awareness = awarenessRef.current;
+    if (!awareness) return;
+    const name = selfName || `User ${awareness.clientID}`;
+    selfNameRef.current = name;
+    awareness.setLocalStateField("user", { name, color: selfColor });
+  }, [provider, selfName, selfColor]);
+  const publishActivity = React2__namespace.useCallback(
+    (fields) => {
+      awarenessRef.current?.setLocalStateField("activity", {
+        at: Date.now(),
+        fields
+      });
+      pushLog({
+        kind: "patch",
+        origin: "local",
+        detail: `edited ${fields.join(", ")}`
+      });
+    },
+    [pushLog]
+  );
+  const room = doc && provider ? {
+    name: roomName ?? provider.roomname ?? "room",
+    url: url ?? provider.url,
+    clientId: doc.clientID,
+    userId
+  } : null;
+  return { connected, peers, log, room, lastRemoteEdit, publishActivity };
+}
+
+exports.CollabStatus = CollabStatus;
+exports.defaultCollabStatusLabels = defaultCollabStatusLabels;
+exports.useYjsCollabStatus = useYjsCollabStatus;
+//# sourceMappingURL=chunk-X4LBUPJO.cjs.map
+//# sourceMappingURL=chunk-X4LBUPJO.cjs.map

package/dist/chunk-X4LBUPJO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CollabStatus/CollabStatus.tsx","../src/components/CollabStatus/useYjsCollabStatus.ts"],"names":["React","jsxs","cn","jsx","createPortal","WrapText","X","Fragment","React2"],"mappings":"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","file":"chunk-X4LBUPJO.cjs","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { WrapText, X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/** Another participant currently present in the room. */\nexport interface CollabPeer {\n  /** Display name published through presence. */\n  name: string;\n  /** Optional presence color (cursor/avatar tint). */\n  color?: string;\n}\n\n/** Static identity of the open collaboration room, shown in the debug panel. */\nexport interface CollabRoomInfo {\n  /** Room name on the sync server (e.g. `case/4`). */\n  name: string;\n  /** Transport URL the client connected to. */\n  url?: string;\n  /** This window's client id (stable per document), or null before connect. */\n  clientId?: number | null;\n  /** The acting application user id passed to the sync server. */\n  userId?: string;\n}\n\n/** Category of a collaboration event in the debug log. */\nexport type CollabLogKind = 'doc' | 'awareness' | 'sync' | 'patch';\n\n/** A single entry in the collaboration debug log. */\nexport interface CollabLogEntry {\n  /** Stable key for rendering. */\n  id: number | string;\n  /** Wall-clock time of the event (epoch ms). */\n  at: number;\n  /** Event category. */\n  kind: CollabLogKind;\n  /** Whether this window or a peer originated it. */\n  origin?: 'local' | 'remote';\n  /** Human-readable detail line. */\n  detail: string;\n}\n\n/** Every user-facing string, so apps can translate the widget. */\nexport interface CollabStatusLabels {\n  /** Trigger text once the initial sync completed. */\n  live: string;\n  /** Trigger text before the initial sync completes. */\n  connecting: string;\n  /** Summary of who else is editing, e.g. `Ann, Bo are editing`. */\n  editing: (names: string[]) => string;\n  /** Accessible name / tooltip of the trigger button. */\n  triggerLabel: string;\n  /** Heading of the room-occupants section. */\n  peersTitle: (count: number) => string;\n  /** Shown in the occupants section when nobody else is in the room. */\n  alone: React.ReactNode;\n  /** Heading of the debug panel. */\n  logTitle: (count: number) => string;\n  /** Accessible name of the panel close button. */\n  close: string;\n  /** Accessible name of the toggle that unclips long values. */\n  wrap: string;\n  /** Shown when the log is empty. */\n  empty: React.ReactNode;\n  roomTerm: string;\n  urlTerm: string;\n  clientTerm: string;\n  userTerm: string;\n  /** Suffix appended to the client id once synced / while connecting. */\n  clientSynced: string;\n  clientConnecting: string;\n}\n\nexport const defaultCollabStatusLabels: CollabStatusLabels = {\n  live: 'Live',\n  connecting: 'Connecting…',\n  editing: (names) =>\n    `${names.join(', ')} ${names.length === 1 ? 'is' : 'are'} editing`,\n  triggerLabel: 'Live-sync status — open the update log',\n  peersTitle: (count) => `In the room (${count})`,\n  alone: 'You are the only one here.',\n  logTitle: (count) => `Update log (${count})`,\n  close: 'Close update log',\n  wrap: 'Wrap long values',\n  empty: 'No updates yet.',\n  roomTerm: 'Room',\n  urlTerm: 'Socket',\n  clientTerm: 'Client',\n  userTerm: 'User',\n  clientSynced: 'synced',\n  clientConnecting: 'connecting',\n};\n\nexport interface CollabStatusProps {\n  /** True once the room has completed its initial sync with the server. */\n  connected: boolean;\n  /** Other people in the room right now. */\n  peers?: CollabPeer[];\n  /** Recent collaboration events, newest first. */\n  log?: CollabLogEntry[];\n  /** Identity of the open room, shown at the top of the panel. */\n  room?: CollabRoomInfo | null;\n  /** Set false to render a status-only chip with no debug panel. */\n  showLog?: boolean;\n  /**\n   * Render the trigger as the bare connection dot, moving the status text into\n   * its accessible name. For headers with no room for a full chip.\n   */\n  compact?: boolean;\n  /**\n   * An app-level condition worth the same glance as the connection state, e.g.\n   * `\"Unsaved changes\"`. While set, the dot turns amber and the text joins the\n   * trigger's accessible name and heads the panel.\n   */\n  attention?: React.ReactNode;\n  /** Overrides for any user-facing string. */\n  labels?: Partial<CollabStatusLabels>;\n  /** Additional className for the trigger wrapper. */\n  className?: string;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\n/** One row of the occupants list: a display label and its presence color. */\ninterface PeerLabel {\n  label: string;\n  color?: string;\n}\n\n/** Collapse multiple windows of the same person into `Name (N)`. */\nfunction peerLabels(peers: CollabPeer[]): PeerLabel[] {\n  const seen = new Map<string, { count: number; color?: string }>();\n  for (const p of peers) {\n    const entry = seen.get(p.name);\n    if (entry) entry.count += 1;\n    else seen.set(p.name, { count: 1, color: p.color });\n  }\n  return [...seen].map(([name, { count, color }]) => ({\n    label: count > 1 ? `${name} (${count})` : name,\n    color,\n  }));\n}\n\nconst PANEL_OFFSET = 6;\nconst VIEWPORT_PADDING = 8;\n\n/**\n * Position the panel under the trigger, right-aligned to it but clamped to the\n * viewport on both axes (it flips above the trigger when it would overflow the\n * bottom). Returns null until the panel has been measured.\n */\nfunction useAnchoredPanel(\n  open: boolean,\n  anchorRef: React.RefObject<HTMLElement | null>,\n  panelRef: React.RefObject<HTMLElement | null>\n) {\n  const [pos, setPos] = React.useState<{ top: number; left: number } | null>(\n    null\n  );\n\n  React.useLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const update = () => {\n      const anchor = anchorRef.current;\n      const panel = panelRef.current;\n      if (!anchor || !panel) return;\n      const a = anchor.getBoundingClientRect();\n      const { offsetWidth: width, offsetHeight: height } = panel;\n\n      const maxLeft = window.innerWidth - width - VIEWPORT_PADDING;\n      const left = Math.max(\n        VIEWPORT_PADDING,\n        Math.min(a.right - width, Math.max(VIEWPORT_PADDING, maxLeft))\n      );\n\n      let top = a.bottom + PANEL_OFFSET;\n      if (top + height > window.innerHeight - VIEWPORT_PADDING) {\n        top = Math.max(VIEWPORT_PADDING, a.top - height - PANEL_OFFSET);\n      }\n\n      setPos({ top, left });\n    };\n\n    // Measured after the (hidden) panel has been laid out.\n    const raf = window.requestAnimationFrame(update);\n    window.addEventListener('scroll', update, true);\n    window.addEventListener('resize', update);\n    return () => {\n      window.cancelAnimationFrame(raf);\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [open, anchorRef, panelRef]);\n\n  return pos;\n}\n\nconst KIND_TONE: Record<CollabLogKind, string> = {\n  doc: 'text-muted-foreground',\n  awareness: 'text-primary-600 dark:text-primary-400',\n  sync: 'text-success-700 dark:text-success-400',\n  patch: 'text-muted-foreground',\n};\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Live-collaboration status chip: a connection dot, a `Live` / `Connecting…`\n * label, a summary of who else is editing, and a click-to-open panel with the\n * room identity, who is in the room, and a rolling log of collaboration\n * events. Pass `compact` to shrink the trigger down to the dot alone, and\n * `attention` to let an app condition (\"Unsaved changes\") share that dot.\n *\n * Transport-agnostic — it renders whatever presence state you hand it. For a\n * Yjs (`y-websocket`) room, {@link useYjsCollabStatus} produces these props\n * directly:\n *\n * @example\n * ```tsx\n * const doc = React.useMemo(() => new Y.Doc(), []);\n * const provider = React.useMemo(\n *   () => new WebsocketProvider('ws://localhost:1234', 'case/4', doc),\n *   [doc]\n * );\n * const status = useYjsCollabStatus({ doc, provider, user: { name: 'Ann' } });\n *\n * return <CollabStatus {...status} />;\n * ```\n */\nexport function CollabStatus({\n  connected,\n  peers = [],\n  log = [],\n  room = null,\n  showLog = true,\n  compact = false,\n  attention = null,\n  labels: labelOverrides,\n  className,\n}: CollabStatusProps) {\n  const labels = { ...defaultCollabStatusLabels, ...labelOverrides };\n  const [open, setOpen] = React.useState(false);\n  const [wrapped, setWrapped] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const pos = useAnchoredPanel(open && showLog, triggerRef, panelRef);\n  const titleId = React.useId();\n\n  // Escape closes and returns focus; a pointer outside dismisses.\n  React.useEffect(() => {\n    if (!open) return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Escape') return;\n      setOpen(false);\n      triggerRef.current?.focus();\n    };\n    const onPointerDown = (e: Event) => {\n      const target = e.target as Node;\n      if (panelRef.current?.contains(target)) return;\n      if (triggerRef.current?.contains(target)) return;\n      setOpen(false);\n    };\n    document.addEventListener('keydown', onKeyDown);\n    document.addEventListener('pointerdown', onPointerDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('pointerdown', onPointerDown);\n    };\n  }, [open]);\n\n  const occupants = peerLabels(peers);\n  const names = occupants.map((p) => p.label);\n  // Long values are clipped to one line; the panel's wrap toggle unclips them.\n  const clip = wrapped ? 'break-all whitespace-pre-wrap' : 'truncate';\n  const statusText = connected ? labels.live : labels.connecting;\n  const clientLine = `${room?.clientId ?? '—'} · ${\n    connected ? labels.clientSynced : labels.clientConnecting\n  }`;\n  // Compact triggers have no visible text, so the status and who is editing\n  // have to reach assistive tech (and the tooltip) through the label.\n  const triggerLabel = compact\n    ? [\n        labels.triggerLabel,\n        statusText,\n        attention,\n        names.length > 0 && labels.editing(names),\n      ]\n        .filter(Boolean)\n        .join(' — ')\n    : labels.triggerLabel;\n\n  const trigger = (\n    <button\n      type=\"button\"\n      ref={triggerRef}\n      className={cn(\n        'text-muted-foreground inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs',\n        'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none',\n        showLog && 'hover:bg-muted cursor-pointer',\n        className\n      )}\n      onClick={showLog ? () => setOpen((v) => !v) : undefined}\n      disabled={!showLog}\n      title={showLog ? triggerLabel : undefined}\n      aria-expanded={showLog ? open : undefined}\n      aria-label={showLog ? triggerLabel : undefined}\n      data-slot=\"collab-status-trigger\"\n    >\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"collab-status-dot\"\n        className={cn(\n          'h-2 w-2 shrink-0 rounded-full',\n          !connected && 'bg-warning-500 animate-pulse',\n          connected && attention && 'bg-warning-500',\n          connected && !attention && 'bg-success-500'\n        )}\n      />\n      {!compact && <span>{statusText}</span>}\n      {!compact && attention && (\n        <span className=\"text-warning-700 dark:text-warning-400 truncate\">\n          · {attention}\n        </span>\n      )}\n      {!compact && names.length > 0 && (\n        <span className=\"truncate\">{`· ${labels.editing(names)}`}</span>\n      )}\n    </button>\n  );\n\n  if (!showLog) return trigger;\n\n  return (\n    <span\n      className=\"relative inline-flex items-center\"\n      data-slot=\"collab-status\"\n    >\n      {trigger}\n      {open &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={panelRef}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            data-slot=\"collab-status-panel\"\n            className={cn(\n              'bg-card text-card-foreground border-border fixed z-50 w-[26rem] max-w-[calc(100vw-1rem)]',\n              'rounded-lg border p-3 text-xs shadow-xl'\n            )}\n            style={{\n              top: pos?.top ?? 0,\n              left: pos?.left ?? 0,\n              visibility: pos ? undefined : 'hidden',\n            }}\n          >\n            <div className=\"mb-2 flex items-center justify-between gap-2\">\n              <strong id={titleId} className=\"text-foreground text-sm\">\n                {labels.logTitle(log.length)}\n              </strong>\n              <span className=\"flex items-center gap-0.5\">\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'hover:text-foreground focus-visible:ring-ring rounded p-0.5 focus-visible:ring-2 focus-visible:outline-none',\n                    wrapped\n                      ? 'text-foreground bg-muted'\n                      : 'text-muted-foreground'\n                  )}\n                  onClick={() => setWrapped((v) => !v)}\n                  aria-pressed={wrapped}\n                  aria-label={labels.wrap}\n                  title={labels.wrap}\n                  data-slot=\"collab-status-wrap\"\n                >\n                  <WrapText className=\"h-4 w-4\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded p-0.5 focus-visible:ring-2 focus-visible:outline-none\"\n                  onClick={() => {\n                    setOpen(false);\n                    triggerRef.current?.focus();\n                  }}\n                  aria-label={labels.close}\n                >\n                  <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n                </button>\n              </span>\n            </div>\n\n            {attention && (\n              <p\n                data-slot=\"collab-status-attention\"\n                className=\"text-warning-700 dark:text-warning-400 mb-2\"\n              >\n                {attention}\n              </p>\n            )}\n\n            {room && (\n              <dl className=\"border-border text-muted-foreground mb-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-b pb-2\">\n                <dt className=\"opacity-70\">{labels.roomTerm}</dt>\n                {/* The values are clipped, so hovering must reveal the rest. */}\n                <dd className={clip} title={room.name}>\n                  {room.name}\n                </dd>\n                {room.url && (\n                  <>\n                    <dt className=\"opacity-70\">{labels.urlTerm}</dt>\n                    <dd className={clip} title={room.url}>\n                      {room.url}\n                    </dd>\n                  </>\n                )}\n                <dt className=\"opacity-70\">{labels.clientTerm}</dt>\n                <dd className={clip} title={clientLine}>\n                  {clientLine}\n                </dd>\n                {room.userId && (\n                  <>\n                    <dt className=\"opacity-70\">{labels.userTerm}</dt>\n                    <dd className={clip} title={room.userId}>\n                      {room.userId}\n                    </dd>\n                  </>\n                )}\n              </dl>\n            )}\n\n            <section className=\"border-border mb-2 border-b pb-2\">\n              <strong className=\"text-foreground mb-1 block\">\n                {labels.peersTitle(peers.length)}\n              </strong>\n              {peers.length === 0 ? (\n                <p className=\"text-muted-foreground\">{labels.alone}</p>\n              ) : (\n                <ul\n                  className=\"flex flex-wrap gap-x-3 gap-y-1\"\n                  data-slot=\"collab-status-peers\"\n                >\n                  {occupants.map((peer) => (\n                    <li key={peer.label} className=\"flex items-center gap-1.5\">\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"h-2 w-2 shrink-0 rounded-full\"\n                        style={{\n                          backgroundColor: peer.color ?? 'currentColor',\n                        }}\n                      />\n                      <span\n                        className={cn('text-foreground', clip)}\n                        title={peer.label}\n                      >\n                        {peer.label}\n                      </span>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </section>\n\n            {log.length === 0 ? (\n              <p className=\"text-muted-foreground\">{labels.empty}</p>\n            ) : (\n              <ul className=\"max-h-72 space-y-0.5 overflow-y-auto font-mono\">\n                {log.map((e) => (\n                  <li\n                    key={e.id}\n                    className=\"grid grid-cols-[auto_auto_1fr] gap-2\"\n                  >\n                    <span className=\"text-muted-foreground opacity-70\">\n                      {new Date(e.at).toLocaleTimeString()}\n                    </span>\n                    <span\n                      className={cn(\n                        'whitespace-nowrap',\n                        e.origin === 'remote'\n                          ? 'text-primary-600 dark:text-primary-400'\n                          : KIND_TONE[e.kind]\n                      )}\n                    >\n                      {e.kind}\n                      {e.origin ? `/${e.origin}` : ''}\n                    </span>\n                    <span\n                      className={cn('text-foreground', clip)}\n                      title={e.detail}\n                    >\n                      {e.detail}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>,\n          document.body\n        )}\n    </span>\n  );\n}\n","import * as React from 'react';\nimport type {\n  CollabLogEntry,\n  CollabPeer,\n  CollabRoomInfo,\n} from './CollabStatus';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\n// =============================================================================\n// Structural Yjs types\n// =============================================================================\n//\n// Declared structurally (as methods, so parameter bivariance applies) rather\n// than imported from `yjs` / `y-protocols`, so `@mieweb/ui` needs no Yjs\n// dependency at all. A real `Y.Doc`, `Awareness` and `WebsocketProvider`\n// satisfy these as-is.\n\n/** The subset of `Y.Doc` this hook observes. */\nexport interface YjsDocLike {\n  clientID: number;\n  on(event: string, handler: (...args: any[]) => void): void;\n  off(event: string, handler: (...args: any[]) => void): void;\n}\n\n/** The subset of `y-protocols/awareness`.`Awareness` this hook uses. */\nexport interface YjsAwarenessLike {\n  clientID: number;\n  getStates(): Map<number, Record<string, any>>;\n  setLocalStateField(field: string, value: unknown): void;\n  on(event: string, handler: (...args: any[]) => void): void;\n  off(event: string, handler: (...args: any[]) => void): void;\n}\n\n/** The subset of `y-websocket`.`WebsocketProvider` this hook uses. */\nexport interface YjsProviderLike {\n  awareness: YjsAwarenessLike;\n  /** True once the initial sync completed (y-websocket exposes this). */\n  synced?: boolean;\n  /** Room name, used as the default label in the debug panel. */\n  roomname?: string;\n  /** Server URL, used as the default label in the debug panel. */\n  url?: string;\n  on(event: string, handler: (...args: any[]) => void): void;\n  off(event: string, handler: (...args: any[]) => void): void;\n}\n\n/** Awareness payload published whenever this window makes a local edit. */\ninterface EditActivity {\n  at: number;\n  fields: string[];\n}\n\n/** A remote collaborator's edit that just changed the open document. */\nexport interface CollabRemoteEdit {\n  /** Human-readable labels of the fields that changed. */\n  fields: string[];\n  /** Who made the change, when attributable from presence. */\n  by?: string;\n  /** Timestamp; a new value signals a fresh growl/toast. */\n  at: number;\n}\n\nexport interface UseYjsCollabStatusOptions {\n  /** The shared document. Pass null to keep the hook inert. */\n  doc: YjsDocLike | null | undefined;\n  /** The sync provider (e.g. `y-websocket`). Pass null to keep it inert. */\n  provider: YjsProviderLike | null | undefined;\n  /**\n   * Presence identity published for this window. Defaults to\n   * `User <clientID>` so windows are distinguishable without a login.\n   */\n  user?: { name?: string; color?: string };\n  /** Room label for the debug panel. Defaults to `provider.roomname`. */\n  roomName?: string;\n  /** URL label for the debug panel. Defaults to `provider.url`. */\n  url?: string;\n  /** Application user id shown in the debug panel. */\n  userId?: string;\n  /** Maximum log entries kept in memory. Default 100. */\n  logCap?: number;\n}\n\nexport interface YjsCollabStatus {\n  /** True once the initial server sync completed. */\n  connected: boolean;\n  /** Other windows currently present in the room. */\n  peers: CollabPeer[];\n  /** Recent collaboration events, newest first. */\n  log: CollabLogEntry[];\n  /** Room identity for the debug panel. */\n  room: CollabRoomInfo | null;\n  /** The most recent remote edit, or null. */\n  lastRemoteEdit: CollabRemoteEdit | null;\n  /**\n   * Announce a local edit and the fields it touched, so other windows can\n   * attribute it. Also records a `patch` log entry.\n   */\n  publishActivity: (fields: string[]) => void;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Bind {@link CollabStatus} to a Yjs room: tracks initial-sync state, publishes\n * this window's presence, tracks peers joining/leaving, attributes remote edits,\n * and keeps a capped log of document/awareness/sync events.\n *\n * The return value is spreadable straight into the component.\n *\n * @example\n * ```tsx\n * import * as Y from 'yjs';\n * import { WebsocketProvider } from 'y-websocket';\n * import { CollabStatus, useYjsCollabStatus } from '@mieweb/ui';\n *\n * function Header({ caseId }: { caseId: string }) {\n *   const doc = React.useMemo(() => new Y.Doc(), []);\n *   const provider = React.useMemo(\n *     () => new WebsocketProvider('ws://localhost:1234', `case/${caseId}`, doc),\n *     [doc, caseId]\n *   );\n *   React.useEffect(() => () => provider.destroy(), [provider]);\n *\n *   const status = useYjsCollabStatus({ doc, provider, user: { name: 'Ann' } });\n *   return <CollabStatus {...status} />;\n * }\n * ```\n */\nexport function useYjsCollabStatus({\n  doc,\n  provider,\n  user,\n  roomName,\n  url,\n  userId,\n  logCap = 100,\n}: UseYjsCollabStatusOptions): YjsCollabStatus {\n  const [connected, setConnected] = React.useState(false);\n  const [peers, setPeers] = React.useState<CollabPeer[]>([]);\n  const [lastRemoteEdit, setLastRemoteEdit] =\n    React.useState<CollabRemoteEdit | null>(null);\n  const [log, setLog] = React.useState<CollabLogEntry[]>([]);\n\n  const logIdRef = React.useRef(0);\n  const awarenessRef = React.useRef<YjsAwarenessLike | null>(null);\n  /** Effective display name published to presence. */\n  const selfNameRef = React.useRef('');\n  /** Last activity timestamp seen per remote client, to detect new edits. */\n  const activitySeen = React.useRef(new Map<number, number>());\n  /** Names present, keyed by clientID, to detect join/leave. */\n  const peerNames = React.useRef(new Map<number, string>());\n\n  const pushLog = React.useCallback(\n    (entry: Omit<CollabLogEntry, 'id' | 'at'>) => {\n      const full: CollabLogEntry = {\n        id: ++logIdRef.current,\n        at: Date.now(),\n        ...entry,\n      };\n      setLog((prev) => [full, ...prev].slice(0, logCap));\n    },\n    [logCap]\n  );\n\n  const selfName = user?.name?.trim();\n  const selfColor = user?.color;\n\n  React.useEffect(() => {\n    if (!doc || !provider) {\n      setConnected(false);\n      setPeers([]);\n      setLastRemoteEdit(null);\n      return;\n    }\n\n    const awareness = provider.awareness;\n    awarenessRef.current = awareness;\n    activitySeen.current = new Map();\n    peerNames.current = new Map();\n    setConnected(provider.synced ?? false);\n\n    // Remote updates arrive with `origin === provider`; local transactions have\n    // a null origin — that is what labels the log entry.\n    const onDocUpdate = (update: Uint8Array, origin: unknown) => {\n      pushLog({\n        kind: 'doc',\n        origin: origin === provider ? 'remote' : 'local',\n        detail: `doc update · ${update.byteLength} bytes`,\n      });\n    };\n    doc.on('update', onDocUpdate);\n\n    const onSync = (isSynced: boolean) => {\n      setConnected(isSynced);\n      pushLog({\n        kind: 'sync',\n        detail: isSynced ? 'synced with server' : 'disconnected',\n      });\n    };\n    provider.on('sync', onSync);\n\n    const onStatus = (event: { status?: string }) => {\n      if (event?.status === 'disconnected') setConnected(false);\n    };\n    provider.on('status', onStatus);\n\n    const onAwareness = () => {\n      const others: CollabPeer[] = [];\n      const present = new Map<number, string>();\n      let freshest: CollabRemoteEdit | null = null;\n\n      awareness.getStates().forEach((state, clientId) => {\n        if (clientId === awareness.clientID) return; // skip this window\n        const peer = state.user as CollabPeer | undefined;\n        if (peer?.name) {\n          others.push({ name: peer.name, color: peer.color });\n          present.set(clientId, peer.name);\n        }\n        const activity = state.activity as EditActivity | undefined;\n        if (\n          activity &&\n          activity.at > (activitySeen.current.get(clientId) ?? 0)\n        ) {\n          activitySeen.current.set(clientId, activity.at);\n          if (!freshest || activity.at > freshest.at) {\n            const sameUser = !!peer?.name && peer.name === selfNameRef.current;\n            freshest = {\n              fields: activity.fields,\n              by: sameUser ? 'You (another window)' : peer?.name,\n              at: activity.at,\n            };\n          }\n        }\n      });\n\n      for (const [clientId, name] of present) {\n        if (!peerNames.current.has(clientId)) {\n          pushLog({\n            kind: 'awareness',\n            origin: 'remote',\n            detail: `${name} joined the room`,\n          });\n        }\n      }\n      for (const [clientId, name] of peerNames.current) {\n        if (!present.has(clientId)) {\n          pushLog({\n            kind: 'awareness',\n            origin: 'remote',\n            detail: `${name} left the room`,\n          });\n        }\n      }\n      peerNames.current = present;\n      setPeers(others);\n\n      if (freshest) {\n        const edit = freshest as CollabRemoteEdit;\n        setLastRemoteEdit(edit);\n        pushLog({\n          kind: 'awareness',\n          origin: 'remote',\n          detail: `${edit.by ?? 'peer'} edited ${edit.fields.join(', ')}`,\n        });\n      }\n    };\n    awareness.on('change', onAwareness);\n\n    return () => {\n      doc.off('update', onDocUpdate);\n      provider.off('sync', onSync);\n      provider.off('status', onStatus);\n      awareness.off('change', onAwareness);\n      awarenessRef.current = null;\n      activitySeen.current = new Map();\n      peerNames.current = new Map();\n      setConnected(false);\n      setPeers([]);\n      setLastRemoteEdit(null);\n      setLog([]);\n    };\n  }, [doc, provider, pushLog]);\n\n  // Publish (and re-publish) this window's presence without tearing the room\n  // down when the display name changes. Runs after the room effect above, which\n  // is what populates `awarenessRef`.\n  React.useEffect(() => {\n    const awareness = awarenessRef.current;\n    if (!awareness) return;\n    const name = selfName || `User ${awareness.clientID}`;\n    selfNameRef.current = name;\n    awareness.setLocalStateField('user', { name, color: selfColor });\n  }, [provider, selfName, selfColor]);\n\n  const publishActivity = React.useCallback(\n    (fields: string[]) => {\n      awarenessRef.current?.setLocalStateField('activity', {\n        at: Date.now(),\n        fields,\n      } satisfies EditActivity);\n      pushLog({\n        kind: 'patch',\n        origin: 'local',\n        detail: `edited ${fields.join(', ')}`,\n      });\n    },\n    [pushLog]\n  );\n\n  const room: CollabRoomInfo | null =\n    doc && provider\n      ? {\n          name: roomName ?? provider.roomname ?? 'room',\n          url: url ?? provider.url,\n          clientId: doc.clientID,\n          userId,\n        }\n      : null;\n\n  return { connected, peers, log, room, lastRemoteEdit, publishActivity };\n}\n"]}