npm - @inkandswitch/patchwork-pkg-base - Versions diffs - 0.0.53 → 0.0.55 - Mend

@inkandswitch/patchwork-pkg-base 0.0.53 → 0.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/packages/account/dist/{ContactAvatar-KCZOCABR.js → ContactAvatar-KM4BONY5.js} RENAMED Viewed

@@ -4,9 +4,6 @@ import {
   setAvatarFallback,
   setAvatarImage
 } from "./chunk-PLRZBPU4.js";
-import {
-  generateColorFromString
-} from "./chunk-3YUNEZX6.js";
 import "./chunk-5WRI5ZAA.js";
 // src/contact/ContactAvatar.ts
@@ -58,16 +55,19 @@ function renderContactAvatar(handle, element) {
     updatePresence();
   }
   function updatePresence() {
-    const docUrl = handle.url;
     const now = Date.now();
     const timeout = 3e4;
     const isPresent = Object.entries(heartbeats).some(
       ([id, ts]) => id !== selfName && now - ts < timeout
     );
-    const userColor = generateColorFromString(docUrl);
+    const userColor = handle.doc()?.color;
     if (isPresent) {
       avatar.classList.add("contact-avatar--present");
-      avatar.style.setProperty("--contact-presence-color", userColor);
+      if (userColor) {
+        avatar.style.setProperty("--contact-presence-color", userColor);
+      } else {
+        avatar.style.removeProperty("--contact-presence-color");
+      }
     } else {
       avatar.classList.remove("contact-avatar--present");
       avatar.style.removeProperty("--contact-presence-color");
@@ -138,4 +138,4 @@ function renderContactAvatar(handle, element) {
 export {
   renderContactAvatar
 };
-//# sourceMappingURL=ContactAvatar-KCZOCABR.js.map
+//# sourceMappingURL=ContactAvatar-KM4BONY5.js.map

package/packages/account/dist/ContactAvatar-KM4BONY5.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/contact/ContactAvatar.ts", "../node_modules/.pnpm/@inkandswitch+patchwork-providers@0.2.2_@automerge+automerge-repo@2.6.0-subduction.12/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 { 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 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    // The contact's chosen color; without one, the CSS fallback (neutral\n    // gray) applies.\n    const userColor = handle.doc()?.color;\n\n    if (isPresent) {\n      avatar.classList.add(\"contact-avatar--present\");\n      if (userColor) {\n        avatar.style.setProperty(\"--contact-presence-color\", userColor);\n      } else {\n        avatar.style.removeProperty(\"--contact-presence-color\");\n      }\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/account/dist/{ContactCursor-RLXRAX65.js → ContactCursor-4FYCATG5.js} RENAMED Viewed

@@ -1,6 +1,3 @@
-import {
-  generateColorFromString
-} from "./chunk-3YUNEZX6.js";
 import "./chunk-5WRI5ZAA.js";
 // src/contact/ContactCursor.ts
@@ -16,8 +13,11 @@ function renderContactCursor(handle, element) {
     }
     token.style.display = "";
     const name = contact.type === "registered" ? contact.name : "Anonymous";
-    const color = generateColorFromString(handle.url);
-    token.style.setProperty("--contact-cursor-color", color);
+    if (contact.color) {
+      token.style.setProperty("--contact-cursor-color", contact.color);
+    } else {
+      token.style.removeProperty("--contact-cursor-color");
+    }
     token.textContent = name;
     token.title = name;
   }
@@ -31,4 +31,4 @@ function renderContactCursor(handle, element) {
 export {
   renderContactCursor
 };
-//# sourceMappingURL=ContactCursor-RLXRAX65.js.map
+//# sourceMappingURL=ContactCursor-4FYCATG5.js.map

package/packages/account/dist/ContactCursor-4FYCATG5.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/contact/ContactCursor.ts"],
+  "sourcesContent": ["import type { DocHandle } from \"@automerge/automerge-repo/slim\";\nimport type { ToolElement } from \"@inkandswitch/patchwork-plugins\";\nimport type { ContactDoc } from \"../types\";\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    // The contact's chosen color; without one, the CSS fallback (neutral\n    // gray) applies.\n    if (contact.color) {\n      token.style.setProperty(\"--contact-cursor-color\", contact.color);\n    } else {\n      token.style.removeProperty(\"--contact-cursor-color\");\n    }\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": ";;;AAUO,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;AAG5D,QAAI,QAAQ,OAAO;AACjB,YAAM,MAAM,YAAY,0BAA0B,QAAQ,KAAK;AAAA,IACjE,OAAO;AACL,YAAM,MAAM,eAAe,wBAAwB;AAAA,IACrD;AACA,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/account/dist/index.css CHANGED Viewed

@@ -42,7 +42,7 @@
   height: 64px;
 }
 .contact-avatar--present {
-  box-shadow: 0 0 0 2px var(--contact-presence-color);
+  box-shadow: 0 0 0 2px var(--contact-presence-color, #888);
 }
 .contact-avatar-image {
   position: absolute;
@@ -118,26 +118,50 @@
   padding: 1.5rem 2rem;
   color: var(--account-picker-fg);
   & .profile-header {
+    position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
   }
-  & .avatar-area {
+  & .identity {
     position: relative;
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+  }
+  & .presence-slot {
+    width: 0;
+    overflow: visible;
   }
   & .avatar-button {
+    position: relative;
     background: none;
     border: none;
     padding: 0;
-    cursor: pointer;
+    margin-inline-start: 5px;
     border-radius: 50%;
     flex-shrink: 0;
     overflow: hidden;
     width: 56px;
     height: 56px;
     display: block;
+    cursor: pointer;
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background: rgb(0 0 0 / 30%);
+      opacity: 0;
+      transition: opacity 100ms;
+    }
+    &:hover::after,
+    &:focus-visible::after {
+      opacity: 1;
+    }
     & patchwork-view {
       display: block;
       width: 56px;
@@ -154,6 +178,7 @@
     }
   }
   & .input.profile-name-input {
+    margin-top: 12px;
     font-size: 1.125rem;
     font-weight: 600;
     border: 1px solid transparent;
@@ -308,17 +333,36 @@
     font-size: 0.75rem;
     color: var(--account-picker-tooltip-fg);
   }
-  & .color-trigger {
-    position: absolute;
-    bottom: -1px;
-    right: -1px;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    border: 2px solid var(--account-picker-bg);
+  & .presence-cursor {
+    display: inline-flex;
+    align-items: flex-start;
+    background: none;
+    border: none;
+    padding: 0;
     cursor: pointer;
-    z-index: 1;
-    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
+    &:hover .presence-nametag {
+      opacity: 0.85;
+    }
+  }
+  & .presence-cursor-arrow {
+    width: 16px;
+    height: 24px;
+    flex-shrink: 0;
+    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%));
+  }
+  & .presence-nametag {
+    margin-top: 12px;
+    margin-inline-start: -3px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.3;
+    color: white;
+    max-width: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   & .color-popup {
     position: absolute;
@@ -329,7 +373,7 @@
     border: 1px solid var(--account-picker-border);
     border-radius: 8px;
     box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
-    z-index: 10;
+    z-index: 30;
   }
   & .color-grid {
     display: grid;
@@ -455,6 +499,43 @@
     max-width: 90vw;
     box-shadow: 0 8px 30px rgb(0 0 0 / 10%);
   }
+  & .cropper-modal {
+    width: auto;
+    align-items: center;
+  }
+  & .cropper-viewport {
+    position: relative;
+    width: 260px;
+    height: 260px;
+    overflow: hidden;
+    border-radius: 6px;
+    background: var(--account-picker-border);
+    cursor: grab;
+    touch-action: none;
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  & .cropper-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    max-width: none;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+  & .cropper-mask {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0 9999px rgb(0 0 0 / 45%);
+    pointer-events: none;
+  }
+  & .cropper-zoom {
+    width: 260px;
+    accent-color: var(--account-picker-fg);
+  }
   & .modal-title {
     font-size: 0.875rem;
     font-weight: 600;

package/packages/account/dist/index.css.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/contact/styles.css", "../src/picker/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  --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", "@layer package {\n:root,\n:host,\n[theme] {\n  --account-picker-fg: var(--studio-line, black);\n  --account-picker-muted: var(--studio-line-offset-50, #999);\n  --account-picker-bg: var(--studio-fill, white);\n  --account-picker-border: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-tooltip-bg: var(--studio-line, black);\n  --account-picker-tooltip-fg: var(--studio-fill, white);\n}\n}\n\n.account-picker {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  padding: 1.5rem 2rem;\n  color: var(--account-picker-fg);\n\n  & .profile-header {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    margin-bottom: 1.5rem;\n  }\n\n  & .avatar-area {\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  & .avatar-button {\n    background: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    border-radius: 50%;\n    flex-shrink: 0;\n    overflow: hidden;\n    width: 56px;\n    height: 56px;\n    display: block;\n\n    & patchwork-view {\n      display: block;\n      width: 56px;\n      height: 56px;\n      overflow: hidden;\n    }\n\n    & img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n      border: none;\n      outline: none;\n    }\n  }\n\n  & .input.profile-name-input {\n    font-size: 1.125rem;\n    font-weight: 600;\n    border: 1px solid transparent;\n    background: transparent;\n    padding: 0.25rem 0.375rem;\n    border-radius: 4px;\n    height: auto;\n\n    &:focus-visible {\n      outline: 2px solid var(--account-picker-fg);\n      outline-offset: 1px;\n    }\n  }\n\n  & .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.375rem;\n    margin-bottom: 1rem;\n  }\n\n  & .section {\n    margin-bottom: 0.25rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.25rem;\n  }\n\n  & .field-group {\n    display: grid;\n    width: 100%;\n    gap: 0.5rem;\n    padding-block: 0.5rem;\n  }\n\n  & .input-row {\n    display: flex;\n    gap: 0.25rem;\n  }\n\n  & .tabs-list {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: 2rem;\n    align-items: center;\n    border-radius: 6px;\n    background: var(--account-picker-border);\n    padding: 2px;\n    color: var(--account-picker-muted);\n  }\n\n  & .tabs-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    cursor: pointer;\n    border: none;\n    background: transparent;\n    color: inherit;\n    transition: all 100ms;\n\n    &[data-selected] {\n      background: var(--account-picker-bg);\n      color: var(--account-picker-fg);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 6%);\n    }\n  }\n\n  & .tabs-content {\n    margin-top: 0.5rem;\n  }\n\n  & .btn {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    border-radius: 4px;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    border: none;\n    height: 2rem;\n    padding: 0 0.75rem;\n    transition: all 100ms;\n    color: var(--account-picker-fg);\n\n    &:disabled {\n      pointer-events: none;\n      opacity: 0.3;\n    }\n\n    &.default {\n      background: var(--account-picker-fg);\n      color: var(--account-picker-bg);\n\n      &:hover {\n        opacity: 0.85;\n      }\n    }\n\n    &.outline,\n    &.secondary,\n    &.ghost {\n      background: var(--account-picker-bg);\n      border: 1px solid var(--account-picker-border);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 5%);\n\n      &:hover {\n        background: var(--account-picker-hover);\n        box-shadow: none;\n      }\n    }\n  }\n\n  & .input {\n    display: flex;\n    height: 2rem;\n    width: 100%;\n    border-radius: 4px;\n    border: 1px solid var(--account-picker-border);\n    background: var(--account-picker-bg);\n    padding: 0.375rem 0.5rem;\n    font-size: 0.8125rem;\n    color: var(--account-picker-fg);\n\n    &::placeholder {\n      color: var(--account-picker-muted);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--account-picker-fg);\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n    }\n\n    &.valid {\n      border-color: hsl(140 40% 60%);\n    }\n  }\n\n  & .label {\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--account-picker-muted);\n  }\n\n  & .tooltip-trigger {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    height: 2rem;\n    width: 2rem;\n    border: none;\n    background: transparent;\n    color: inherit;\n\n    &:hover {\n      background: var(--account-picker-hover);\n    }\n  }\n\n  & .tooltip-content {\n    z-index: 50;\n    border-radius: 4px;\n    background: var(--account-picker-tooltip-bg);\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--account-picker-tooltip-fg);\n  }\n\n  /* ---- Color picker ---- */\n\n  & .color-trigger {\n    position: absolute;\n    bottom: -1px;\n    right: -1px;\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    border: 2px solid var(--account-picker-bg);\n    cursor: pointer;\n    z-index: 1;\n    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);\n  }\n\n  & .color-popup {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    padding: 6px;\n    background: var(--account-picker-bg);\n    border: 1px solid var(--account-picker-border);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);\n    z-index: 10;\n  }\n\n  & .color-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 24px);\n    gap: 2px;\n  }\n\n  & .color-swatch {\n    width: 24px;\n    height: 24px;\n    cursor: pointer;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 3px;\n\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &.selected {\n      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);\n    }\n  }\n\n  & .color-swatch-custom {\n    position: relative;\n    overflow: hidden;\n    cursor: pointer;\n    background: conic-gradient(\n      hsl(0 70% 55%),\n      hsl(60 70% 55%),\n      hsl(120 70% 55%),\n      hsl(180 70% 55%),\n      hsl(240 70% 55%),\n      hsl(300 70% 55%),\n      hsl(360 70% 55%)\n    );\n\n    & input {\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n      cursor: pointer;\n      width: 100%;\n      height: 100%;\n      border: none;\n      padding: 0;\n    }\n  }\n\n  & .icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  & .icon-inline {\n    width: 14px;\n    height: 14px;\n    margin-inline-end: 0.25rem;\n  }\n\n  & .icon-check {\n    width: 14px;\n    height: 14px;\n    margin: auto;\n    color: white;\n    filter: drop-shadow(0 0.5px 1px rgb(0 0 0 / 25%));\n  }\n\n  & .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  & .hint {\n    font-size: 0.75rem;\n    color: var(--account-picker-muted);\n    line-height: 1.4;\n  }\n\n  & .error-text {\n    font-size: 0.75rem;\n    color: hsl(0 70% 50%);\n    min-height: 1rem;\n  }\n\n  & .loading-text {\n    color: var(--account-picker-muted);\n  }\n\n  & .btn.sign-out {\n    color: var(--account-picker-muted);\n\n    &:hover {\n      color: white;\n      background: hsl(0 65% 52%);\n    }\n  }\n\n  & .btn.sign-out-confirm {\n    background: hsl(0 65% 52%);\n    color: white;\n\n    &:hover {\n      opacity: 0.9;\n    }\n  }\n\n  & .modal-backdrop {\n    position: fixed;\n    inset: 0;\n    background: rgb(0 0 0 / 20%);\n    backdrop-filter: blur(2px);\n    z-index: 100;\n  }\n\n  & .modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 101;\n    background: var(--account-picker-bg);\n    border: 1px solid var(--account-picker-border);\n    border-radius: 8px;\n    padding: 1.25rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    width: 20rem;\n    max-width: 90vw;\n    box-shadow: 0 8px 30px rgb(0 0 0 / 10%);\n  }\n\n  & .modal-title {\n    font-size: 0.875rem;\n    font-weight: 600;\n    margin: 0;\n  }\n\n  & .modal-actions {\n    display: flex;\n    gap: 0.375rem;\n    justify-content: flex-end;\n    margin-top: 0.25rem;\n  }\n}\n"],
-  "mappings": "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",
+  "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, #888);\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", "@layer package {\n:root,\n:host,\n[theme] {\n  --account-picker-fg: var(--studio-line, black);\n  --account-picker-muted: var(--studio-line-offset-50, #999);\n  --account-picker-bg: var(--studio-fill, white);\n  --account-picker-border: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-tooltip-bg: var(--studio-line, black);\n  --account-picker-tooltip-fg: var(--studio-fill, white);\n}\n}\n\n.account-picker {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  padding: 1.5rem 2rem;\n  color: var(--account-picker-fg);\n\n  & .profile-header {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n    margin-bottom: 1.5rem;\n  }\n\n  & .identity {\n    position: relative;\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.125rem;\n  }\n\n  & .presence-slot {\n    width: 0;\n    overflow: visible;\n  }\n\n\n  & .avatar-button {\n    position: relative;\n    background: none;\n    border: none;\n    padding: 0;\n    margin-inline-start: 5px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    overflow: hidden;\n    width: 56px;\n    height: 56px;\n    display: block;\n    cursor: pointer;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: 50%;\n      background: rgb(0 0 0 / 30%);\n      opacity: 0;\n      transition: opacity 100ms;\n    }\n\n    &:hover::after,\n    &:focus-visible::after {\n      opacity: 1;\n    }\n\n    & patchwork-view {\n      display: block;\n      width: 56px;\n      height: 56px;\n      overflow: hidden;\n    }\n\n    & img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n      border: none;\n      outline: none;\n    }\n  }\n\n  & .input.profile-name-input {\n    margin-top: 12px;\n    font-size: 1.125rem;\n    font-weight: 600;\n    border: 1px solid transparent;\n    background: transparent;\n    padding: 0.25rem 0.375rem;\n    border-radius: 4px;\n    height: auto;\n\n    &:focus-visible {\n      outline: 2px solid var(--account-picker-fg);\n      outline-offset: 1px;\n    }\n  }\n\n  & .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.375rem;\n    margin-bottom: 1rem;\n  }\n\n  & .section {\n    margin-bottom: 0.25rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.25rem;\n  }\n\n  & .field-group {\n    display: grid;\n    width: 100%;\n    gap: 0.5rem;\n    padding-block: 0.5rem;\n  }\n\n  & .input-row {\n    display: flex;\n    gap: 0.25rem;\n  }\n\n  & .tabs-list {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: 2rem;\n    align-items: center;\n    border-radius: 6px;\n    background: var(--account-picker-border);\n    padding: 2px;\n    color: var(--account-picker-muted);\n  }\n\n  & .tabs-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    cursor: pointer;\n    border: none;\n    background: transparent;\n    color: inherit;\n    transition: all 100ms;\n\n    &[data-selected] {\n      background: var(--account-picker-bg);\n      color: var(--account-picker-fg);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 6%);\n    }\n  }\n\n  & .tabs-content {\n    margin-top: 0.5rem;\n  }\n\n  & .btn {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    border-radius: 4px;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    border: none;\n    height: 2rem;\n    padding: 0 0.75rem;\n    transition: all 100ms;\n    color: var(--account-picker-fg);\n\n    &:disabled {\n      pointer-events: none;\n      opacity: 0.3;\n    }\n\n    &.default {\n      background: var(--account-picker-fg);\n      color: var(--account-picker-bg);\n\n      &:hover {\n        opacity: 0.85;\n      }\n    }\n\n    &.outline,\n    &.secondary,\n    &.ghost {\n      background: var(--account-picker-bg);\n      border: 1px solid var(--account-picker-border);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 5%);\n\n      &:hover {\n        background: var(--account-picker-hover);\n        box-shadow: none;\n      }\n    }\n  }\n\n  & .input {\n    display: flex;\n    height: 2rem;\n    width: 100%;\n    border-radius: 4px;\n    border: 1px solid var(--account-picker-border);\n    background: var(--account-picker-bg);\n    padding: 0.375rem 0.5rem;\n    font-size: 0.8125rem;\n    color: var(--account-picker-fg);\n\n    &::placeholder {\n      color: var(--account-picker-muted);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--account-picker-fg);\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n    }\n\n    &.valid {\n      border-color: hsl(140 40% 60%);\n    }\n  }\n\n  & .label {\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--account-picker-muted);\n  }\n\n  & .tooltip-trigger {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    height: 2rem;\n    width: 2rem;\n    border: none;\n    background: transparent;\n    color: inherit;\n\n    &:hover {\n      background: var(--account-picker-hover);\n    }\n  }\n\n  & .tooltip-content {\n    z-index: 50;\n    border-radius: 4px;\n    background: var(--account-picker-tooltip-bg);\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--account-picker-tooltip-fg);\n  }\n\n  /* ---- Color picker ---- */\n\n  & .presence-cursor {\n    display: inline-flex;\n    align-items: flex-start;\n    background: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n\n    &:hover .presence-nametag {\n      opacity: 0.85;\n    }\n  }\n\n  & .presence-cursor-arrow {\n    width: 16px;\n    height: 24px;\n    flex-shrink: 0;\n    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%));\n  }\n\n  & .presence-nametag {\n    margin-top: 12px;\n    margin-inline-start: -3px;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.3;\n    color: white;\n    max-width: 12rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  & .color-popup {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    padding: 6px;\n    background: var(--account-picker-bg);\n    border: 1px solid var(--account-picker-border);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);\n    z-index: 30;\n  }\n\n  & .color-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 24px);\n    gap: 2px;\n  }\n\n  & .color-swatch {\n    width: 24px;\n    height: 24px;\n    cursor: pointer;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 3px;\n\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &.selected {\n      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);\n    }\n  }\n\n  & .color-swatch-custom {\n    position: relative;\n    overflow: hidden;\n    cursor: pointer;\n    background: conic-gradient(\n      hsl(0 70% 55%),\n      hsl(60 70% 55%),\n      hsl(120 70% 55%),\n      hsl(180 70% 55%),\n      hsl(240 70% 55%),\n      hsl(300 70% 55%),\n      hsl(360 70% 55%)\n    );\n\n    & input {\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n      cursor: pointer;\n      width: 100%;\n      height: 100%;\n      border: none;\n      padding: 0;\n    }\n  }\n\n  & .icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  & .icon-inline {\n    width: 14px;\n    height: 14px;\n    margin-inline-end: 0.25rem;\n  }\n\n  & .icon-check {\n    width: 14px;\n    height: 14px;\n    margin: auto;\n    color: white;\n    filter: drop-shadow(0 0.5px 1px rgb(0 0 0 / 25%));\n  }\n\n  & .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  & .hint {\n    font-size: 0.75rem;\n    color: var(--account-picker-muted);\n    line-height: 1.4;\n  }\n\n  & .error-text {\n    font-size: 0.75rem;\n    color: hsl(0 70% 50%);\n    min-height: 1rem;\n  }\n\n  & .loading-text {\n    color: var(--account-picker-muted);\n  }\n\n  & .btn.sign-out {\n    color: var(--account-picker-muted);\n\n    &:hover {\n      color: white;\n      background: hsl(0 65% 52%);\n    }\n  }\n\n  & .btn.sign-out-confirm {\n    background: hsl(0 65% 52%);\n    color: white;\n\n    &:hover {\n      opacity: 0.9;\n    }\n  }\n\n  & .modal-backdrop {\n    position: fixed;\n    inset: 0;\n    background: rgb(0 0 0 / 20%);\n    backdrop-filter: blur(2px);\n    z-index: 100;\n  }\n\n  & .modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 101;\n    background: var(--account-picker-bg);\n    border: 1px solid var(--account-picker-border);\n    border-radius: 8px;\n    padding: 1.25rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    width: 20rem;\n    max-width: 90vw;\n    box-shadow: 0 8px 30px rgb(0 0 0 / 10%);\n  }\n\n  & .cropper-modal {\n    width: auto;\n    align-items: center;\n  }\n\n  & .cropper-viewport {\n    position: relative;\n    width: 260px;\n    height: 260px;\n    overflow: hidden;\n    border-radius: 6px;\n    background: var(--account-picker-border);\n    cursor: grab;\n    touch-action: none;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  & .cropper-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform-origin: 0 0;\n    max-width: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  & .cropper-mask {\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    box-shadow: 0 0 0 9999px rgb(0 0 0 / 45%);\n    pointer-events: none;\n  }\n\n  & .cropper-zoom {\n    width: 260px;\n    accent-color: var(--account-picker-fg);\n  }\n\n  & .modal-title {\n    font-size: 0.875rem;\n    font-weight: 600;\n    margin: 0;\n  }\n\n  & .modal-actions {\n    display: flex;\n    gap: 0.375rem;\n    justify-content: flex-end;\n    margin-top: 0.25rem;\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/packages/account/dist/index.js CHANGED Viewed

@@ -30,7 +30,7 @@ var plugins = [
     name: "Contact Avatar",
     supportedDatatypes: ["contact"],
     async load() {
-      const { renderContactAvatar } = await import("./ContactAvatar-KCZOCABR.js");
+      const { renderContactAvatar } = await import("./ContactAvatar-KM4BONY5.js");
       const { styled } = await import("./styles-KCFZAQMN.js");
       return styled(renderContactAvatar);
     }
@@ -52,7 +52,7 @@ var plugins = [
     name: "Contact Cursor",
     supportedDatatypes: ["contact"],
     async load() {
-      const { renderContactCursor } = await import("./ContactCursor-RLXRAX65.js");
+      const { renderContactCursor } = await import("./ContactCursor-4FYCATG5.js");
       const { styled } = await import("./styles-KCFZAQMN.js");
       return styled(renderContactCursor);
     }
@@ -63,7 +63,7 @@ var plugins = [
     name: "Account Picker",
     supportedDatatypes: ["account"],
     async load() {
-      const { AccountPickerTool } = await import("./AccountPicker-HMEN6MEN.js");
+      const { AccountPickerTool } = await import("./AccountPicker-HB6MDLKN.js");
       const { styled } = await import("./styles-KCFZAQMN.js");
       return styled(AccountPickerTool);
     }

package/packages/codemirror-base/dist/{chunk-H5POLO74.js → chunk-AKNT5U37.js} RENAMED Viewed

@@ -2311,18 +2311,18 @@ import {
 import {
   Presence
 } from "@automerge/automerge-repo/slim";
-function createPresenceExtension(handle, path, contactUrl) {
+function createPresenceExtension(handle, path, contactUrl, repo) {
   const compartment = new Compartment5();
   const extension = () => {
     const url = contactUrl();
-    return url ? presence(handle(), path(), url) : [];
+    return url ? presence(handle(), path(), url, repo) : [];
   };
   const createReconfigureEffect = (view) => createEffect6(() => {
     view.dispatch({ effects: compartment.reconfigure(extension()) });
   });
   return [compartment.of(extension()), createReconfigureEffect];
 }
-function presence(handle, path, contactUrl) {
+function presence(handle, path, contactUrl, repo) {
   const setRemoteSelections = StateEffect4.define();
   const remoteSelectionField = StateField3.define({
     create() {
@@ -2377,6 +2377,11 @@ function presence(handle, path, contactUrl) {
       presence;
       destroyed = false;
       broadcastQueued = false;
+      // Peers' contact docs, followed live so a color picked in the account
+      // picker recolors that peer's caret and tint immediately. Keyed by
+      // contact url; the stored function stops the subscription.
+      contactWatchers = /* @__PURE__ */ new Map();
+      contactColors = /* @__PURE__ */ new Map();
       constructor(view) {
         this.view = view;
         this.presence = new Presence({
@@ -2409,6 +2414,33 @@ function presence(handle, path, contactUrl) {
         this.destroyed = true;
         this.stopPresence();
         window.removeEventListener("pagehide", this.stopPresence);
+        for (const stop of this.contactWatchers.values()) stop();
+        this.contactWatchers.clear();
+      }
+      // A peer's color is whatever their account says (contact doc `color`),
+      // never derived locally. The doc is fetched once and followed; until it
+      // loads (or if the contact never picked a color) the caret stays on the
+      // neutral fallback.
+      trackContactColor(url) {
+        if (this.contactWatchers.has(url)) return;
+        this.contactWatchers.set(url, () => {
+        });
+        repo.find(url).then((contactHandle) => {
+          if (this.destroyed) return;
+          const read = () => {
+            const color = contactHandle.doc()?.color;
+            if (!color || this.contactColors.get(url) === color) return;
+            this.contactColors.set(url, color);
+            this.refresh();
+          };
+          contactHandle.on("change", read);
+          this.contactWatchers.set(
+            url,
+            () => contactHandle.off("change", read)
+          );
+          read();
+        }).catch(() => {
+        });
       }
       stopPresence = () => {
         if (this.presence.running) this.presence.stop();
@@ -2447,12 +2479,14 @@ function presence(handle, path, contactUrl) {
             const from = A3.getCursorPosition(doc, path, selection.start);
             const to = A3.getCursorPosition(doc, path, selection.end);
             const peerContactUrl = peer.userId ?? null;
+            if (peerContactUrl) this.trackContactColor(peerContactUrl);
             resolved.push({
               peerId,
               contactUrl: peerContactUrl,
-              // Same rule as the contact-cursor token (palette hash of the
-              // contact url), so the tint and the token can't drift apart.
-              color: generateColorFromString(peerContactUrl ?? peerId),
+              // The color the peer chose in their account -- the same contact
+              // doc the contact-cursor token renders from, so the tint and
+              // the token can't drift apart.
+              color: peerContactUrl && this.contactColors.get(peerContactUrl) || FALLBACK_PRESENCE_COLOR,
               from,
               to,
               head: selection.headAtStart ? from : to,
@@ -2570,26 +2604,7 @@ var presenceTheme = EditorView9.baseTheme({
     opacity: "0"
   }
 });
-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];
-}
+var FALLBACK_PRESENCE_COLOR = "#888";
 // src/lib/codemirror.tsx
 var lookup = (doc, path) => {
@@ -2609,7 +2624,7 @@ function CodeMirror(props) {
   const [decorationsExtension, createEffectReconfigureDecorations] = createDecorationsExtension(() => props.decorations?.());
   const [diffExtension, createEffectReconfigureDiff] = createDiffExtension(() => props.handle, () => props.path, () => props.baseline?.() ?? null);
   const [scrollHighlightIntoViewExtension, createEffectScrollHighlightIntoView] = createScrollHighlightIntoViewExtension(() => props.scrollTarget?.() ?? null);
-  const [presenceExtension, createEffectReconfigurePresence] = createPresenceExtension(() => props.handle, () => props.path, () => props.readOnly || props.handle.isReadOnly() ? null : props.contactUrl?.() ?? null);
+  const [presenceExtension, createEffectReconfigurePresence] = createPresenceExtension(() => props.handle, () => props.path, () => props.readOnly || props.handle.isReadOnly() ? null : props.contactUrl?.() ?? null, props.repo);
   const userExtensionsCompartment = new Compartment6();
   const selectionExtension = EditorView10.updateListener.of((update) => {
     if (!props.onChangeSelection) return;
@@ -2655,4 +2670,4 @@ function CodeMirror(props) {
 export {
   CodeMirror
 };
-//# sourceMappingURL=chunk-H5POLO74.js.map
+//# sourceMappingURL=chunk-AKNT5U37.js.map