@inkandswitch/patchwork-pkg-base 0.0.37 → 0.0.38

package/packages/contact/dist/{ContactAvatar-MKNZ5KEX.js → ContactAvatar-B4QQC47I.js}

@@ -4,29 +4,9 @@ import {
   setAvatarFallback,
   setAvatarImage
 } from "./chunk-MOZI4Y4O.js";
-
-// src/ui.ts
-var USER_COLOR_PALETTE = [
-  { name: "Sky Blue", value: "hsl(200, 70%, 50%)" },
-  { name: "Coral", value: "hsl(10, 75%, 58%)" },
-  { name: "Emerald", value: "hsl(145, 70%, 45%)" },
-  { name: "Violet", value: "hsl(270, 70%, 55%)" },
-  { name: "Amber", value: "hsl(38, 85%, 50%)" },
-  { name: "Rose", value: "hsl(350, 70%, 55%)" },
-  { name: "Teal", value: "hsl(178, 70%, 45%)" },
-  { name: "Indigo", value: "hsl(235, 70%, 58%)" },
-  { name: "Lime", value: "hsl(85, 70%, 45%)" },
-  { name: "Fuchsia", value: "hsl(310, 70%, 55%)" },
-  { name: "Orange", value: "hsl(25, 80%, 52%)" },
-  { name: "Cyan", value: "hsl(188, 75%, 48%)" }
-];
-function generateColorFromString(str) {
-  const hash = Math.abs(
-    str.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  );
-  const colorIndex = hash % USER_COLOR_PALETTE.length;
-  return USER_COLOR_PALETTE[colorIndex].value;
-}
+import {
+  generateColorFromString
+} from "./chunk-PZ7ORBQU.js";
 
 // src/components/ContactAvatar.ts
 import { getImportableUrlFromAutomergeUrl } from "@inkandswitch/patchwork-filesystem";
@@ -83,8 +63,7 @@ function renderContactAvatar(handle, element) {
     const isPresent = Object.entries(heartbeats).some(
       ([id, ts]) => id !== selfName && now - ts < timeout
     );
-    const contact = handle.doc();
-    const userColor = contact && "color" in contact && contact.color ? contact.color : generateColorFromString(docUrl);
+    const userColor = generateColorFromString(docUrl);
     if (isPresent) {
       avatar.classList.add("contact-avatar--present");
       avatar.style.setProperty("--contact-presence-color", userColor);
@@ -158,4 +137,4 @@ function renderContactAvatar(handle, element) {
 export {
   renderContactAvatar
 };
-//# sourceMappingURL=ContactAvatar-MKNZ5KEX.js.map
+//# sourceMappingURL=ContactAvatar-B4QQC47I.js.map

package/packages/contact/dist/ContactAvatar-B4QQC47I.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/ContactAvatar.ts", "../../node_modules/.pnpm/@inkandswitch+patchwork-providers@0.2.2_@automerge+automerge-repo@2.6.0-subduction.39_supports-color@7.2.0_/node_modules/@inkandswitch/patchwork-providers/dist/index.js"],
+  "sourcesContent": ["import type { AutomergeUrl, DocHandle } from \"@automerge/automerge-repo/slim\";\nimport type { ToolElement } from \"@inkandswitch/patchwork-plugins\";\nimport type { ContactDoc } from \"../types\";\nimport { createAvatar, setAvatarImage, setAvatarFallback, getInitials } from \"./Avatar\";\nimport { generateColorFromString } from \"../ui\";\nimport { getImportableUrlFromAutomergeUrl } from \"@inkandswitch/patchwork-filesystem\";\nimport { subscribe } from \"@inkandswitch/patchwork-providers\";\n\ndeclare global {\n  interface Window {\n    accountDocHandle?: { url: AutomergeUrl };\n  }\n}\n\ntype TinyPatchworkLayoutDoc = {\n  contactUrl: AutomergeUrl;\n};\n\nexport function renderContactAvatar(\n  handle: DocHandle<ContactDoc>,\n  element: ToolElement\n) {\n  const avatar = createAvatar(\"default\");\n  element.appendChild(avatar);\n\n  let selfName = \"me\";\n  const cleanups: (() => void)[] = [];\n\n  // Track presence via ephemeral messages\n  const heartbeats: Record<string, number> = {};\n  let presenceTimer: ReturnType<typeof setInterval>;\n\n  function onEphemeralMessage(message: { senderId: string; message: unknown }) {\n    // useRemoteAwareness tracks heartbeats from ephemeral messages\n    if (message.senderId) {\n      heartbeats[message.senderId] = Date.now();\n    }\n    updatePresence();\n  }\n\n  function updatePresence() {\n    const docUrl = handle.url;\n    const now = Date.now();\n    const timeout = 30000;\n    const isPresent = Object.entries(heartbeats).some(\n      ([id, ts]) => id !== selfName && now - ts < timeout\n    );\n\n    const userColor = generateColorFromString(docUrl);\n\n    if (isPresent) {\n      avatar.classList.add(\"contact-avatar--present\");\n      avatar.style.setProperty(\"--contact-presence-color\", userColor);\n    } else {\n      avatar.classList.remove(\"contact-avatar--present\");\n      avatar.style.removeProperty(\"--contact-presence-color\");\n    }\n  }\n\n  handle.on(\"ephemeral-message\", onEphemeralMessage);\n  cleanups.push(() => handle.off(\"ephemeral-message\", onEphemeralMessage));\n\n  // Periodically clean up stale heartbeats\n  presenceTimer = setInterval(updatePresence, 5000);\n  cleanups.push(() => clearInterval(presenceTimer));\n\n  // Get own contact via provider subscription\n  const unsubscribe = subscribe<string>(\n    element,\n    { type: \"patchwork:contact\" },\n    (contactUrl) => {\n      element.repo\n        .find<ContactDoc>(contactUrl as AutomergeUrl)\n        .then((selfHandle) => {\n          const selfDoc = selfHandle.doc();\n          if (selfDoc?.type === \"registered\") {\n            selfName = selfDoc.name;\n          }\n        });\n    }\n  );\n  cleanups.push(unsubscribe);\n\n  // Fallback: use window.accountDocHandle\n  if (window.accountDocHandle) {\n    element.repo\n      .find<TinyPatchworkLayoutDoc>(window.accountDocHandle.url)\n      .then((accountHandle) => {\n        const accountDoc = accountHandle.doc();\n        if (accountDoc?.contactUrl) {\n          element.repo\n            .find<ContactDoc>(accountDoc.contactUrl)\n            .then((selfHandle) => {\n              const selfDoc = selfHandle.doc();\n              if (selfDoc?.type === \"registered\") {\n                selfName = selfDoc.name;\n              }\n            });\n        }\n      });\n  }\n\n  async function update() {\n    const contact = handle.doc();\n    if (!contact) {\n      avatar.style.display = \"none\";\n      return;\n    }\n    avatar.style.display = \"\";\n\n    const isRegistered = contact.type === \"registered\";\n    const name = isRegistered ? contact.name : \"Anonymous\";\n\n    // avatar image\n    let avatarImgUrl: string | undefined;\n    if (isRegistered && contact.avatarUrl) {\n      try {\n        const avatarHandle = await element.repo.find(contact.avatarUrl);\n        avatarImgUrl = getImportableUrlFromAutomergeUrl(avatarHandle.url);\n      } catch {\n        // ignore failed avatar lookup\n      }\n    }\n    setAvatarImage(avatar, avatarImgUrl, name);\n\n    // fallback\n    if (isRegistered && name) {\n      setAvatarFallback(avatar, { initials: getInitials(name) });\n    } else {\n      setAvatarFallback(avatar, { iconSize: 20 });\n    }\n\n    updatePresence();\n  }\n\n  handle.on(\"change\", update);\n  cleanups.push(() => handle.off(\"change\", update));\n  update();\n\n  return () => {\n    for (const cleanup of cleanups) cleanup();\n  };\n}\n", "/**\n * Open a streaming subscription. Dispatches a `patchwork:subscribe` for the\n * given `selector` carrying a fresh `MessageChannel` port; the answering\n * provider pushes values back over that channel for as long as the\n * subscription is live. `listener` is invoked once per emission (the first\n * delivery is always async because `MessagePort.postMessage` queues a task).\n *\n * The event is dispatched from the nearest enclosing `<patchwork-view>` so\n * callers can pass any node inside a provider subtree. An unclaimed\n * subscription is never settled: if no provider answers, `listener` simply\n * never fires.\n *\n * Returns an unsubscribe function. Calling it tells the provider to tear down\n * (via an `unsubscribe` message) and closes the consumer's port; any values\n * the provider emits after that are dropped.\n */\nexport function subscribe(element, selector, listener) {\n    const view = element.closest(\"patchwork-view\");\n    const dispatchEl = view ?? element;\n    const channel = new MessageChannel();\n    const port = channel.port2;\n    const controller = new AbortController();\n    const { signal } = controller;\n    port.addEventListener(\"message\", (event) => {\n        if (event.data?.type === \"change\")\n            listener(event.data.value);\n    }, { signal });\n    // addEventListener (unlike assigning onmessage) does not implicitly start\n    // the port, so message delivery has to be kicked off explicitly.\n    port.start();\n    const detail = {\n        selector,\n        port: channel.port1,\n    };\n    dispatchEl.dispatchEvent(new CustomEvent(\"patchwork:subscribe\", {\n        detail,\n        bubbles: true,\n        composed: true,\n    }));\n    return () => {\n        if (signal.aborted)\n            return;\n        controller.abort();\n        port.postMessage({ type: \"unsubscribe\" });\n        port.close();\n    };\n}\n/**\n * Answer a `patchwork:subscribe`. The `producer` receives a `respond`\n * callback it can call any number of times to push values to the consumer,\n * and may return a teardown that runs when the consumer unsubscribes. Stops\n * propagation so ancestor providers don't double-answer. Values emitted after\n * the consumer unsubscribes are dropped.\n */\nexport function accept(event, producer) {\n    event.stopPropagation();\n    const port = event.detail.port;\n    let alive = true;\n    const respond = (value) => {\n        if (!alive)\n            return;\n        port.postMessage({ type: \"change\", value });\n    };\n    let teardown;\n    try {\n        teardown = producer(respond);\n    }\n    catch (err) {\n        console.error(\"[patchwork-providers] subscribe producer threw:\", err);\n    }\n    const stop = () => {\n        if (!alive)\n            return;\n        alive = false;\n        try {\n            teardown?.();\n        }\n        catch (err) {\n            console.error(\"[patchwork-providers] subscribe teardown threw:\", err);\n        }\n        port.close();\n    };\n    port.onmessage = (event) => {\n        if (event.data?.type === \"unsubscribe\")\n            stop();\n    };\n}\n/**\n * One-shot convenience wrapper over {@link subscribe}: opens a subscription\n * for `selector`, resolves with the first value a provider emits, then\n * immediately unsubscribes. Because there is no fallback provider, an\n * unclaimed selector never resolves \u2014 use `subscribe` directly if you need to\n * handle the \"no provider\" case.\n */\nexport function request(element, selector) {\n    return new Promise((resolve) => {\n        const unsubscribe = subscribe(element, selector, (value) => {\n            // The first emission is always async (postMessage queues a task), so\n            // `unsubscribe` is assigned by the time this fires.\n            unsubscribe();\n            resolve(value);\n        });\n    });\n}\nexport { registerRepoProviderElement, } from \"./repo-provider.js\";\n"],
+  "mappings": "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",
+  "names": []
+}

package/packages/contact/dist/ContactCursor-DTVFOQDW.js

@@ -0,0 +1,33 @@
+import {
+  generateColorFromString
+} from "./chunk-PZ7ORBQU.js";
+
+// src/components/ContactCursor.ts
+function renderContactCursor(handle, element) {
+  const token = document.createElement("div");
+  token.className = "contact-cursor-token";
+  element.appendChild(token);
+  function update() {
+    const contact = handle.doc();
+    if (!contact) {
+      token.style.display = "none";
+      return;
+    }
+    token.style.display = "";
+    const name = contact.type === "registered" ? contact.name : "Anonymous";
+    const color = generateColorFromString(handle.url);
+    token.style.setProperty("--contact-cursor-color", color);
+    token.textContent = name;
+    token.title = name;
+  }
+  handle.on("change", update);
+  update();
+  return () => {
+    handle.off("change", update);
+    token.remove();
+  };
+}
+export {
+  renderContactCursor
+};
+//# sourceMappingURL=ContactCursor-DTVFOQDW.js.map

package/packages/contact/dist/ContactCursor-DTVFOQDW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/ContactCursor.ts"],
+  "sourcesContent": ["import type { DocHandle } from \"@automerge/automerge-repo/slim\";\nimport type { ToolElement } from \"@inkandswitch/patchwork-plugins\";\nimport type { ContactDoc } from \"../types\";\nimport { generateColorFromString } from \"../ui\";\n\n/**\n * A compact cursor token: the contact's name on a pill in their presence\n * color. Hosts that render remote cursors (text editors, canvases) mount it\n * next to their own cursor primitive (caret line, pointer arrow) via\n * `<patchwork-view doc-url={contactUrl} tool-id=\"contact-cursor\">`.\n */\nexport function renderContactCursor(\n  handle: DocHandle<ContactDoc>,\n  element: ToolElement\n) {\n  const token = document.createElement(\"div\");\n  token.className = \"contact-cursor-token\";\n  element.appendChild(token);\n\n  function update() {\n    const contact = handle.doc();\n    if (!contact) {\n      token.style.display = \"none\";\n      return;\n    }\n    token.style.display = \"\";\n    const name = contact.type === \"registered\" ? contact.name : \"Anonymous\";\n    const color = generateColorFromString(handle.url);\n    token.style.setProperty(\"--contact-cursor-color\", color);\n    token.textContent = name;\n    token.title = name;\n  }\n\n  handle.on(\"change\", update);\n  update();\n\n  return () => {\n    handle.off(\"change\", update);\n    token.remove();\n  };\n}\n"],
+  "mappings": ";;;;;AAWO,SAAS,oBACd,QACA,SACA;AACA,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,YAAY;AAClB,UAAQ,YAAY,KAAK;AAEzB,WAAS,SAAS;AAChB,UAAM,UAAU,OAAO,IAAI;AAC3B,QAAI,CAAC,SAAS;AACZ,YAAM,MAAM,UAAU;AACtB;AAAA,IACF;AACA,UAAM,MAAM,UAAU;AACtB,UAAM,OAAO,QAAQ,SAAS,eAAe,QAAQ,OAAO;AAC5D,UAAM,QAAQ,wBAAwB,OAAO,GAAG;AAChD,UAAM,MAAM,YAAY,0BAA0B,KAAK;AACvD,UAAM,cAAc;AACpB,UAAM,QAAQ;AAAA,EAChB;AAEA,SAAO,GAAG,UAAU,MAAM;AAC1B,SAAO;AAEP,SAAO,MAAM;AACX,WAAO,IAAI,UAAU,MAAM;AAC3B,UAAM,OAAO;AAAA,EACf;AACF;",
+  "names": []
+}

package/packages/contact/dist/chunk-PZ7ORBQU.js

@@ -0,0 +1,27 @@
+// src/ui.ts
+var USER_COLOR_PALETTE = [
+  { name: "Sky Blue", value: "hsl(200, 70%, 50%)" },
+  { name: "Coral", value: "hsl(10, 75%, 58%)" },
+  { name: "Emerald", value: "hsl(145, 70%, 45%)" },
+  { name: "Violet", value: "hsl(270, 70%, 55%)" },
+  { name: "Amber", value: "hsl(38, 85%, 50%)" },
+  { name: "Rose", value: "hsl(350, 70%, 55%)" },
+  { name: "Teal", value: "hsl(178, 70%, 45%)" },
+  { name: "Indigo", value: "hsl(235, 70%, 58%)" },
+  { name: "Lime", value: "hsl(85, 70%, 45%)" },
+  { name: "Fuchsia", value: "hsl(310, 70%, 55%)" },
+  { name: "Orange", value: "hsl(25, 80%, 52%)" },
+  { name: "Cyan", value: "hsl(188, 75%, 48%)" }
+];
+function generateColorFromString(str) {
+  const hash = Math.abs(
+    str.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  );
+  const colorIndex = hash % USER_COLOR_PALETTE.length;
+  return USER_COLOR_PALETTE[colorIndex].value;
+}
+
+export {
+  generateColorFromString
+};
+//# sourceMappingURL=chunk-PZ7ORBQU.js.map

package/packages/contact/dist/chunk-PZ7ORBQU.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ui.ts"],
+  "sourcesContent": ["/**\n * TODO: establish a system for referencing styles that\n * are shared across multiple tools.\n * This palette is also defined in the account-picker.\n *\n * User color palette for presence indicators (cursors, avatars, etc.)\n *\n * Colors are selected to:\n * - Be easily distinguishable from each other\n * - Work well on both light and dark backgrounds\n * - Be accessible and readable\n * - Look professional and modern\n */\nexport const USER_COLOR_PALETTE = [\n  { name: \"Sky Blue\", value: \"hsl(200, 70%, 50%)\" },\n  { name: \"Coral\", value: \"hsl(10, 75%, 58%)\" },\n  { name: \"Emerald\", value: \"hsl(145, 70%, 45%)\" },\n  { name: \"Violet\", value: \"hsl(270, 70%, 55%)\" },\n  { name: \"Amber\", value: \"hsl(38, 85%, 50%)\" },\n  { name: \"Rose\", value: \"hsl(350, 70%, 55%)\" },\n  { name: \"Teal\", value: \"hsl(178, 70%, 45%)\" },\n  { name: \"Indigo\", value: \"hsl(235, 70%, 58%)\" },\n  { name: \"Lime\", value: \"hsl(85, 70%, 45%)\" },\n  { name: \"Fuchsia\", value: \"hsl(310, 70%, 55%)\" },\n  { name: \"Orange\", value: \"hsl(25, 80%, 52%)\" },\n  { name: \"Cyan\", value: \"hsl(188, 75%, 48%)\" },\n] as const;\n\n/**\n * Generate a deterministic color from a string (like a contact url).\n * The single source of presence colors: cursors, avatars, and selection\n * tints all hash the contact url through this palette.\n */\nexport function generateColorFromString(str: string): string {\n  const hash = Math.abs(\n    str.split(\"\").reduce((acc, char) => acc + char.charCodeAt(0), 0)\n  );\n  const colorIndex = hash % USER_COLOR_PALETTE.length;\n  return USER_COLOR_PALETTE[colorIndex].value;\n}\n"],
+  "mappings": ";AAaO,IAAM,qBAAqB;AAAA,EAChC,EAAE,MAAM,YAAY,OAAO,qBAAqB;AAAA,EAChD,EAAE,MAAM,SAAS,OAAO,oBAAoB;AAAA,EAC5C,EAAE,MAAM,WAAW,OAAO,qBAAqB;AAAA,EAC/C,EAAE,MAAM,UAAU,OAAO,qBAAqB;AAAA,EAC9C,EAAE,MAAM,SAAS,OAAO,oBAAoB;AAAA,EAC5C,EAAE,MAAM,QAAQ,OAAO,qBAAqB;AAAA,EAC5C,EAAE,MAAM,QAAQ,OAAO,qBAAqB;AAAA,EAC5C,EAAE,MAAM,UAAU,OAAO,qBAAqB;AAAA,EAC9C,EAAE,MAAM,QAAQ,OAAO,oBAAoB;AAAA,EAC3C,EAAE,MAAM,WAAW,OAAO,qBAAqB;AAAA,EAC/C,EAAE,MAAM,UAAU,OAAO,oBAAoB;AAAA,EAC7C,EAAE,MAAM,QAAQ,OAAO,qBAAqB;AAC9C;AAOO,SAAS,wBAAwB,KAAqB;AAC3D,QAAM,OAAO,KAAK;AAAA,IAChB,IAAI,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,WAAW,CAAC,GAAG,CAAC;AAAA,EACjE;AACA,QAAM,aAAa,OAAO,mBAAmB;AAC7C,SAAO,mBAAmB,UAAU,EAAE;AACxC;",
+  "names": []
+}

package/packages/contact/dist/tool.css

@@ -8,6 +8,7 @@
     --contact-border: var(--editor-fill-offset-10, #e5e5e5);
     --contact-fallback-bg: var(--editor-fill-offset-20, #ccc);
     --contact-fallback-fg: var(--editor-line-offset-30, #4d4d4d);
+    --contact-family: var(--editor-family-sans, system-ui, sans-serif);
   }
 }
 .contact-avatar {
@@ -78,4 +79,21 @@
   font-size: 0.875rem;
   color: var(--contact-muted-fg);
 }
+.contact-cursor-token {
+  display: inline-block;
+  max-width: 160px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--contact-cursor-color, #888);
+  color: white;
+  font-family: var(--contact-family, system-ui, sans-serif);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  pointer-events: none;
+}
 /*# sourceMappingURL=tool.css.map */

package/packages/contact/dist/tool.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/styles.css"],
-  "sourcesContent": ["@layer package {\n:root,\n:host,\n[theme] {\n  --contact-fg: var(--editor-line, black);\n  --contact-muted-fg: var(--editor-line-offset-50, #999);\n  --contact-border: var(--editor-fill-offset-10, #e5e5e5);\n  --contact-fallback-bg: var(--editor-fill-offset-20, #ccc);\n  --contact-fallback-fg: var(--editor-line-offset-30, #4d4d4d);\n}\n}\n\n/* Avatar */\n\n.contact-avatar {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 9999px;\n  border: 1px solid var(--contact-border);\n  min-width: 2rem;\n  min-height: 2rem;\n  max-width: 2rem;\n  max-height: 2rem;\n  height: 100%;\n  width: 100%;\n}\n\n.contact-avatar--sm {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.contact-avatar--lg {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 64px;\n  height: 64px;\n}\n\n.contact-avatar--present {\n  box-shadow: 0 0 0 2px var(--contact-presence-color);\n}\n\n.contact-avatar-image {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.contact-avatar-fallback {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: var(--contact-fallback-bg);\n  color: var(--contact-fallback-fg);\n}\n\n/* Contact Viewer */\n\n.contact-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--contact-fg);\n}\n\n.contact-viewer-name {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.contact-viewer-label {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--contact-muted-fg);\n}\n"],
-  "mappings": ";AAAA;AACA;AAAA,EACA;AAAA,EACA,CAAC;AACC,kBAAc,IAAI,aAAa,EAAE;AACjC,wBAAoB,IAAI,uBAAuB,EAAE;AACjD,sBAAkB,IAAI,uBAAuB,EAAE;AAC/C,2BAAuB,IAAI,uBAAuB,EAAE;AACpD,2BAAuB,IAAI,uBAAuB,EAAE;AACtD;AACA;AAIA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,YAAU;AACV,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI;AACtB,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,UAAQ;AACR,SAAO;AACT;AAEA,CAAC;AACC,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,SAAO;AACP,UAAQ;AACR,cAAY;AACd;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,iBAAe;AACf,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAIA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,OAAK;AACL,SAAO,IAAI;AACb;AAEA,CAAC;AACC,UAAQ;AACR,aAAW;AACX,eAAa;AACf;AAEA,CAAC;AACC,UAAQ;AACR,aAAW;AACX,SAAO,IAAI;AACb;",
+  "sourcesContent": ["@layer package {\n:root,\n:host,\n[theme] {\n  --contact-fg: var(--editor-line, black);\n  --contact-muted-fg: var(--editor-line-offset-50, #999);\n  --contact-border: var(--editor-fill-offset-10, #e5e5e5);\n  --contact-fallback-bg: var(--editor-fill-offset-20, #ccc);\n  --contact-fallback-fg: var(--editor-line-offset-30, #4d4d4d);\n  --contact-family: var(--editor-family-sans, system-ui, sans-serif);\n}\n}\n\n/* Avatar */\n\n.contact-avatar {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 9999px;\n  border: 1px solid var(--contact-border);\n  min-width: 2rem;\n  min-height: 2rem;\n  max-width: 2rem;\n  max-height: 2rem;\n  height: 100%;\n  width: 100%;\n}\n\n.contact-avatar--sm {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.contact-avatar--lg {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 64px;\n  height: 64px;\n}\n\n.contact-avatar--present {\n  box-shadow: 0 0 0 2px var(--contact-presence-color);\n}\n\n.contact-avatar-image {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.contact-avatar-fallback {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: var(--contact-fallback-bg);\n  color: var(--contact-fallback-fg);\n}\n\n/* Contact Viewer */\n\n.contact-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--contact-fg);\n}\n\n.contact-viewer-name {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.contact-viewer-label {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--contact-muted-fg);\n}\n\n/* Cursor token (tool id \"contact-cursor\") \u2014 the contact's name on a pill in\n   their presence color. Hosts overlay it next to their own cursor primitive,\n   so it must not intercept pointer events. The pill background is the user's\n   presence color (not a theme surface), so the label uses white ink, which is\n   legible across the whole USER_COLOR_PALETTE. */\n\n.contact-cursor-token {\n  display: inline-block;\n  max-width: 160px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--contact-cursor-color, #888);\n  color: white;\n  font-family: var(--contact-family, system-ui, sans-serif);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  pointer-events: none;\n}\n"],
+  "mappings": ";AAAA;AACA;AAAA,EACA;AAAA,EACA,CAAC;AACC,kBAAc,IAAI,aAAa,EAAE;AACjC,wBAAoB,IAAI,uBAAuB,EAAE;AACjD,sBAAkB,IAAI,uBAAuB,EAAE;AAC/C,2BAAuB,IAAI,uBAAuB,EAAE;AACpD,2BAAuB,IAAI,uBAAuB,EAAE;AACpD,sBAAkB,IAAI,oBAAoB,EAAE,SAAS,EAAE;AACzD;AACA;AAIA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,YAAU;AACV,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI;AACtB,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,UAAQ;AACR,SAAO;AACT;AAEA,CAAC;AACC,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,SAAO;AACP,UAAQ;AACR,cAAY;AACd;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,iBAAe;AACf,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAIA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,OAAK;AACL,SAAO,IAAI;AACb;AAEA,CAAC;AACC,UAAQ;AACR,aAAW;AACX,eAAa;AACf;AAEA,CAAC;AACC,UAAQ;AACR,aAAW;AACX,SAAO,IAAI;AACb;AAQA,CAAC;AACC,WAAS;AACT,aAAW;AACX,WAAS,IAAI;AACb,iBAAe;AACf,cAAY,IAAI,sBAAsB,EAAE;AACxC,SAAO;AACP,eAAa,IAAI,gBAAgB,EAAE,SAAS,EAAE;AAC9C,aAAW;AACX,eAAa;AACb,eAAa;AACb,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,kBAAgB;AAClB;",
   "names": []
 }

package/packages/contact/dist/tool.js

@@ -41,7 +41,7 @@ var plugins = [
     name: "Contact Avatar",
     supportedDatatypes: ["contact"],
     async load() {
-      const { renderContactAvatar } = await import("./ContactAvatar-MKNZ5KEX.js");
+      const { renderContactAvatar } = await import("./ContactAvatar-B4QQC47I.js");
       const css = await loadStyles();
       return (handle, element) => {
         addStyles(document.head, css);
@@ -62,6 +62,20 @@ var plugins = [
         return renderInlineContactAvatar(handle, element);
       };
     }
+  },
+  {
+    type: "patchwork:tool",
+    id: "contact-cursor",
+    name: "Contact Cursor",
+    supportedDatatypes: ["contact"],
+    async load() {
+      const { renderContactCursor } = await import("./ContactCursor-DTVFOQDW.js");
+      const css = await loadStyles();
+      return (handle, element) => {
+        addStyles(document.head, css);
+        return renderContactCursor(handle, element);
+      };
+    }
   }
 ];
 export {

package/packages/contact/dist/tool.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/tool.ts"],
-  "sourcesContent": ["import type { ToolImplementation } from \"@inkandswitch/patchwork-plugins\";\nimport \"./styles.css\";\n\nfunction addStyles(element: HTMLElement, textContent: string) {\n  const id = \"contact-styles\";\n  const el = element.querySelector(`#${id}`) ?? document.createElement(\"style\");\n  Object.assign(el, { textContent, id });\n  element.append(el);\n}\n\nasync function loadStyles() {\n  const url = new URL(\"./tool.css\", import.meta.url);\n  return (await fetch(url)).text();\n}\n\nexport const plugins = [\n  {\n    type: \"patchwork:datatype\",\n    id: \"contact\",\n    name: \"Contact\",\n    icon: \"User\",\n    unlisted: true,\n    async load() {\n      const { ContactDatatype } = await import(\"./datatype\");\n      return ContactDatatype;\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact\",\n    name: \"Contact Viewer\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderContactViewer } =\n        await import(\"./components/ContactViewer\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderContactViewer(handle, element);\n      };\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact-avatar\",\n    name: \"Contact Avatar\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderContactAvatar } =\n        await import(\"./components/ContactAvatar\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderContactAvatar(handle, element);\n      };\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact-inline\",\n    name: \"Inline Contact Avatar\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderInlineContactAvatar } =\n        await import(\"./components/InlineContactAvatar\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderInlineContactAvatar(handle, element);\n      };\n    },\n  },\n];\n"],
-  "mappings": ";AAGA,SAAS,UAAU,SAAsB,aAAqB;AAC5D,QAAM,KAAK;AACX,QAAM,KAAK,QAAQ,cAAc,IAAI,EAAE,EAAE,KAAK,SAAS,cAAc,OAAO;AAC5E,SAAO,OAAO,IAAI,EAAE,aAAa,GAAG,CAAC;AACrC,UAAQ,OAAO,EAAE;AACnB;AAEA,eAAe,aAAa;AAC1B,QAAM,MAAM,IAAI,IAAI,cAAc,YAAY,GAAG;AACjD,UAAQ,MAAM,MAAM,GAAG,GAAG,KAAK;AACjC;AAEO,IAAM,UAAU;AAAA,EACrB;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM,OAAO;AACX,YAAM,EAAE,gBAAgB,IAAI,MAAM,OAAO,wBAAY;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,oBAAoB,IAC1B,MAAM,OAAO,6BAA4B;AAC3C,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,oBAAoB,QAAQ,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,oBAAoB,IAC1B,MAAM,OAAO,6BAA4B;AAC3C,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,oBAAoB,QAAQ,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,0BAA0B,IAChC,MAAM,OAAO,mCAAkC;AACjD,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,0BAA0B,QAAQ,OAAO;AAAA,MAClD;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { ToolImplementation } from \"@inkandswitch/patchwork-plugins\";\nimport \"./styles.css\";\n\nfunction addStyles(element: HTMLElement, textContent: string) {\n  const id = \"contact-styles\";\n  const el = element.querySelector(`#${id}`) ?? document.createElement(\"style\");\n  Object.assign(el, { textContent, id });\n  element.append(el);\n}\n\nasync function loadStyles() {\n  const url = new URL(\"./tool.css\", import.meta.url);\n  return (await fetch(url)).text();\n}\n\nexport const plugins = [\n  {\n    type: \"patchwork:datatype\",\n    id: \"contact\",\n    name: \"Contact\",\n    icon: \"User\",\n    unlisted: true,\n    async load() {\n      const { ContactDatatype } = await import(\"./datatype\");\n      return ContactDatatype;\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact\",\n    name: \"Contact Viewer\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderContactViewer } =\n        await import(\"./components/ContactViewer\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderContactViewer(handle, element);\n      };\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact-avatar\",\n    name: \"Contact Avatar\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderContactAvatar } =\n        await import(\"./components/ContactAvatar\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderContactAvatar(handle, element);\n      };\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact-inline\",\n    name: \"Inline Contact Avatar\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderInlineContactAvatar } =\n        await import(\"./components/InlineContactAvatar\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderInlineContactAvatar(handle, element);\n      };\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact-cursor\",\n    name: \"Contact Cursor\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderContactCursor } =\n        await import(\"./components/ContactCursor\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderContactCursor(handle, element);\n      };\n    },\n  },\n];\n"],
+  "mappings": ";AAGA,SAAS,UAAU,SAAsB,aAAqB;AAC5D,QAAM,KAAK;AACX,QAAM,KAAK,QAAQ,cAAc,IAAI,EAAE,EAAE,KAAK,SAAS,cAAc,OAAO;AAC5E,SAAO,OAAO,IAAI,EAAE,aAAa,GAAG,CAAC;AACrC,UAAQ,OAAO,EAAE;AACnB;AAEA,eAAe,aAAa;AAC1B,QAAM,MAAM,IAAI,IAAI,cAAc,YAAY,GAAG;AACjD,UAAQ,MAAM,MAAM,GAAG,GAAG,KAAK;AACjC;AAEO,IAAM,UAAU;AAAA,EACrB;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM,OAAO;AACX,YAAM,EAAE,gBAAgB,IAAI,MAAM,OAAO,wBAAY;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,oBAAoB,IAC1B,MAAM,OAAO,6BAA4B;AAC3C,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,oBAAoB,QAAQ,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,oBAAoB,IAC1B,MAAM,OAAO,6BAA4B;AAC3C,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,oBAAoB,QAAQ,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,0BAA0B,IAChC,MAAM,OAAO,mCAAkC;AACjD,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,0BAA0B,QAAQ,OAAO;AAAA,MAClD;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,oBAAoB,IAC1B,MAAM,OAAO,6BAA4B;AAC3C,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,oBAAoB,QAAQ,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/packages/tldraw4/dist/tool.js

@@ -3358,8 +3358,114 @@ function urlFromText(line) {
   return null;
 }
 
-// src/tool.tsx
+// src/CollaboratorCursor.tsx
 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
+var USER_COLOR_PALETTE = [
+  "hsl(200, 70%, 50%)",
+  "hsl(10, 75%, 58%)",
+  "hsl(145, 70%, 45%)",
+  "hsl(270, 70%, 55%)",
+  "hsl(38, 85%, 50%)",
+  "hsl(350, 70%, 55%)",
+  "hsl(178, 70%, 45%)",
+  "hsl(235, 70%, 58%)",
+  "hsl(85, 70%, 45%)",
+  "hsl(310, 70%, 55%)",
+  "hsl(25, 80%, 52%)",
+  "hsl(188, 75%, 48%)"
+];
+function generateColorFromString(str) {
+  const hash = Math.abs(
+    str.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  );
+  return USER_COLOR_PALETTE[hash % USER_COLOR_PALETTE.length];
+}
+function splitPresenceUserId(userId) {
+  if (!userId.startsWith("automerge:")) return { actorId: userId };
+  const i = userId.indexOf("-");
+  if (i === -1) return { contactUrl: userId };
+  return {
+    contactUrl: userId.slice(0, i),
+    actorId: userId.slice(i + 1)
+  };
+}
+function ContactCollaboratorCursor({
+  className,
+  point,
+  zoom,
+  color,
+  name,
+  userId
+}) {
+  if (!point) return null;
+  const { contactUrl } = splitPresenceUserId(userId);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: className ? `tl-overlays__item ${className}` : "tl-overlays__item",
+      style: {
+        transform: `translate(${point.x}px, ${point.y}px) scale(${1 / zoom})`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "svg",
+          {
+            className: "tl-cursor",
+            width: "32",
+            height: "32",
+            viewBox: "0 0 32 32",
+            fill: "none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { fill: "rgba(0,0,0,.2)", transform: "translate(-11,-11)", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { style: { color }, transform: "translate(-12,-12)", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: "m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z",
+                    fill: "white"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: "m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z",
+                    fill: "white"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: "m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z",
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: "m13 10.814v11.188l2.969-2.866.428-.139h4.768z",
+                    fill: "currentColor"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        contactUrl ? (
+          // Same offset as tldraw's .tl-nametag so the token hangs off the
+          // arrow tip.
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { position: "absolute", top: 16, left: 13 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("patchwork-view", { "doc-url": contactUrl, "tool-id": "contact-cursor" }) })
+        ) : name && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "tl-nametag", style: { backgroundColor: color }, children: name })
+      ]
+    }
+  );
+}
+
+// src/tool.tsx
+var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
 var customShapeUtils = [PatchworkDocShapeUtil];
 var customTools = [NewDocShapeTool];
 var MIME_TO_EXT = {
@@ -3395,16 +3501,9 @@ function useContactInfo() {
     // this prevents tldraw from hiding local cursors across multiple sessions under the same account.
     userId: contactUrl ? `${contactUrl}-${repo.peerId}` : repo.peerId,
     name: contactDoc?.name ?? "Anonymous",
-    color: contactDoc?.color
-  };
-}
-function splitPresenceUserId(userId) {
-  if (!userId.startsWith("automerge:")) return { actorId: userId };
-  const i = userId.indexOf("-");
-  if (i === -1) return { contactUrl: userId };
-  return {
-    contactUrl: userId.slice(0, i),
-    actorId: userId.slice(i + 1)
+    // Derived from the contact url with the same rule the contact-cursor
+    // token uses, so the cursor arrow and the token always match.
+    color: contactUrl ? generateColorFromString(contactUrl) : void 0
   };
 }
 function TldrawTool({
@@ -3440,10 +3539,14 @@ function TldrawTool({
   }, [diff, statusAtom]);
   useDeletedGhosts(store, handle, diff);
   const components = (0, import_react10.useMemo)(
-    () => ({ ShapeWrapper: DiffShapeWrapper, Toolbar: NewDocToolbar }),
+    () => ({
+      ShapeWrapper: DiffShapeWrapper,
+      Toolbar: NewDocToolbar,
+      CollaboratorCursor: ContactCollaboratorCursor
+    }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DiffStatusContext.Provider, { value: statusAtom, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DiffStatusContext.Provider, { value: statusAtom, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Tldraw,
     {
       inferDarkMode: true,
@@ -3453,7 +3556,7 @@ function TldrawTool({
       tools: customTools,
       overrides: newDocUiOverrides,
       components,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TldrawInner, { docUrl, element, readOnly })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TldrawInner, { docUrl, element, readOnly })
     }
   ) });
 }
@@ -3681,7 +3784,7 @@ function usePatchworkDrop(element) {
 function render(handle, element) {
   const root = (0, import_client.createRoot)(element);
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RepoContext.Provider, { value: element.repo, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TldrawTool, { docUrl: handle.url, element }) })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RepoContext.Provider, { value: element.repo, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TldrawTool, { docUrl: handle.url, element }) })
   );
   return () => root.unmount();
 }