@inkandswitch/patchwork-pkg-base 0.0.53 → 0.0.55

package/packages/account/dist/{AccountPicker-HMEN6MEN.js → AccountPicker-HB6MDLKN.js}

@@ -1,7 +1,3 @@
-import {
-  USER_COLOR_PALETTE,
-  parseHslColor
-} from "./chunk-3YUNEZX6.js";
 import {
   __commonJS,
   __toESM
@@ -2927,11 +2923,194 @@ function Button(props) {
   })();
 }
 
+// src/picker/ui/avatar-cropper.tsx
+var _tmpl$2 = /* @__PURE__ */ template(`<div class=modal-backdrop>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<input class=cropper-zoom type=range min=1 max=4 step=0.01>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div class="modal cropper-modal"><p class=modal-title>Crop avatar</p><div class=cropper-viewport><img class=cropper-image><div class=cropper-mask></div></div><div class=modal-actions>`);
+var VIEWPORT = 260;
+var MAX_ZOOM = 4;
+function AvatarCropper(props) {
+  const [natural, setNatural] = createSignal();
+  const [zoom, setZoom] = createSignal(1);
+  const [offset3, setOffset] = createSignal({
+    x: 0,
+    y: 0
+  });
+  const scale = () => {
+    const n = natural();
+    return n ? VIEWPORT / Math.min(n.w, n.h) * zoom() : 1;
+  };
+  const size3 = () => {
+    const n = natural();
+    return {
+      w: n.w * scale(),
+      h: n.h * scale()
+    };
+  };
+  const clamp2 = (next) => {
+    const {
+      w,
+      h
+    } = size3();
+    return {
+      x: Math.min(0, Math.max(VIEWPORT - w, next.x)),
+      y: Math.min(0, Math.max(VIEWPORT - h, next.y))
+    };
+  };
+  const onLoad = (e) => {
+    const img = e.currentTarget;
+    setNatural({
+      w: img.naturalWidth,
+      h: img.naturalHeight
+    });
+    const s = scale();
+    setOffset({
+      x: (VIEWPORT - img.naturalWidth * s) / 2,
+      y: (VIEWPORT - img.naturalHeight * s) / 2
+    });
+  };
+  const onPointerDown = (e) => {
+    if (!natural()) return;
+    const el = e.currentTarget;
+    el.setPointerCapture(e.pointerId);
+    const start = {
+      ...offset3(),
+      px: e.clientX,
+      py: e.clientY
+    };
+    const onMove = (move) => {
+      setOffset(clamp2({
+        x: start.x + move.clientX - start.px,
+        y: start.y + move.clientY - start.py
+      }));
+    };
+    const onUp = () => {
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointercancel", onUp);
+    };
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointercancel", onUp);
+  };
+  const setZoomAroundCenter = (next) => {
+    if (!natural()) return;
+    const previous = scale();
+    setZoom(Math.min(MAX_ZOOM, Math.max(1, next)));
+    const ratio = scale() / previous;
+    const o = offset3();
+    setOffset(clamp2({
+      x: VIEWPORT / 2 - (VIEWPORT / 2 - o.x) * ratio,
+      y: VIEWPORT / 2 - (VIEWPORT / 2 - o.y) * ratio
+    }));
+  };
+  const onWheel = (e) => {
+    e.preventDefault();
+    setZoomAroundCenter(zoom() * (1 - e.deltaY / 500));
+  };
+  const onConfirm = () => {
+    const o = offset3();
+    const s = scale();
+    props.onConfirm({
+      x: -o.x / s,
+      y: -o.y / s,
+      size: VIEWPORT / s
+    });
+  };
+  return [(() => {
+    var _el$ = _tmpl$2();
+    addEventListener(_el$, "click", props.onCancel, true);
+    return _el$;
+  })(), (() => {
+    var _el$2 = _tmpl$3(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$7 = _el$4.nextSibling;
+    _el$4.addEventListener("wheel", onWheel);
+    _el$4.$$pointerdown = onPointerDown;
+    _el$5.addEventListener("load", onLoad);
+    setAttribute(_el$5, "draggable", false);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return natural();
+      },
+      get children() {
+        var _el$6 = _tmpl$22();
+        _el$6.$$input = (e) => setZoomAroundCenter(e.currentTarget.valueAsNumber);
+        createRenderEffect(() => _el$6.value = zoom());
+        return _el$6;
+      }
+    }), _el$7);
+    insert(_el$7, createComponent(Button, {
+      variant: "secondary",
+      get onClick() {
+        return props.onCancel;
+      },
+      children: "Cancel"
+    }), null);
+    insert(_el$7, createComponent(Button, {
+      onClick: onConfirm,
+      get disabled() {
+        return !natural();
+      },
+      children: "Save"
+    }), null);
+    createRenderEffect((_p$) => {
+      var _v$ = props.src, _v$2 = natural() ? {
+        width: `${size3().w}px`,
+        height: `${size3().h}px`,
+        transform: `translate(${offset3().x}px, ${offset3().y}px)`
+      } : {
+        visibility: "hidden"
+      };
+      _v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
+      _p$.t = style(_el$5, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$2;
+  })()];
+}
+delegateEvents(["click", "pointerdown", "input"]);
+
+// src/user-colors.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;
+}
+function getRandomUserColor() {
+  return USER_COLOR_PALETTE[Math.floor(Math.random() * USER_COLOR_PALETTE.length)].value;
+}
+function parseHslColor(color) {
+  const match = color.match(/^hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/);
+  if (!match) return null;
+  return {
+    h: parseInt(match[1], 10),
+    s: parseInt(match[2], 10),
+    l: parseInt(match[3], 10)
+  };
+}
+
 // src/picker/ui/color-picker.tsx
-var _tmpl$2 = /* @__PURE__ */ template(`<button type=button class=color-trigger>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<div class=color-popup><div class=color-grid><label class="color-swatch color-swatch-custom"title="Custom color"><input type=color>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg class=icon-check viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round><polyline points="20 6 9 17 4 12">`);
-var _tmpl$4 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div class=color-popup><div class=color-grid><label class="color-swatch color-swatch-custom"title="Custom color"><input type=color>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<svg class=icon-check viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round><polyline points="20 6 9 17 4 12">`);
+var _tmpl$32 = /* @__PURE__ */ template(`<button type=button>`);
 function hslToHex(hsl) {
   const parsed = parseHslColor(hsl);
   if (!parsed) return "#3b82f6";
@@ -2964,73 +3143,82 @@ function hslToHex(hsl) {
   const hex = (c) => Math.round(c * 255).toString(16).padStart(2, "0");
   return `#${hex(r)}${hex(g)}${hex(b)}`;
 }
-function ColorPicker(props) {
-  const [open, setOpen] = createSignal(false);
+function ColorPopup(props) {
   const currentColor = () => props.value || USER_COLOR_PALETTE[0].value;
   const inputValue = () => {
     const v = currentColor();
     return v.startsWith("#") ? v : hslToHex(v);
   };
-  return [(() => {
-    var _el$ = _tmpl$2();
-    _el$.$$click = (e) => {
-      e.stopPropagation();
-      setOpen(!open());
-    };
-    createRenderEffect((_$p) => setStyleProperty(_el$, "background-color", currentColor()));
+  return (() => {
+    var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return [...USER_COLOR_PALETTE];
+      },
+      children: (color) => (() => {
+        var _el$5 = _tmpl$32();
+        _el$5.$$click = () => {
+          props.onChange(color.value);
+          props.onClose();
+        };
+        insert(_el$5, createComponent(Show, {
+          get when() {
+            return props.value === color.value;
+          },
+          get children() {
+            return _tmpl$23();
+          }
+        }));
+        createRenderEffect((_p$) => {
+          var _v$ = `color-swatch${props.value === color.value ? " selected" : ""}`, _v$2 = color.value, _v$3 = color.name;
+          _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+          _v$2 !== _p$.t && setStyleProperty(_el$5, "background-color", _p$.t = _v$2);
+          _v$3 !== _p$.a && setAttribute(_el$5, "title", _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$5;
+      })()
+    }), _el$3);
+    _el$4.$$input = (e) => props.onChange(e.currentTarget.value);
+    createRenderEffect(() => _el$4.value = inputValue());
     return _el$;
-  })(), createComponent(Show, {
-    get when() {
-      return open();
-    },
-    get children() {
-      var _el$2 = _tmpl$22(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
-      insert(_el$3, createComponent(For, {
-        get each() {
-          return [...USER_COLOR_PALETTE];
-        },
-        children: (color) => (() => {
-          var _el$6 = _tmpl$4();
-          _el$6.$$click = () => {
-            props.onChange(color.value);
-            setOpen(false);
-          };
-          insert(_el$6, createComponent(Show, {
-            get when() {
-              return props.value === color.value;
-            },
-            get children() {
-              return _tmpl$3();
-            }
-          }));
-          createRenderEffect((_p$) => {
-            var _v$ = `color-swatch${props.value === color.value ? " selected" : ""}`, _v$2 = color.value, _v$3 = color.name;
-            _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
-            _v$2 !== _p$.t && setStyleProperty(_el$6, "background-color", _p$.t = _v$2);
-            _v$3 !== _p$.a && setAttribute(_el$6, "title", _p$.a = _v$3);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-          });
-          return _el$6;
-        })()
-      }), _el$4);
-      _el$5.$$input = (e) => props.onChange(e.currentTarget.value);
-      createRenderEffect(() => _el$5.value = inputValue());
-      return _el$2;
-    }
-  })];
+  })();
+}
+delegateEvents(["input", "click"]);
+
+// src/picker/ui/presence-cursor.tsx
+var _tmpl$5 = /* @__PURE__ */ template(`<button type=button class=presence-cursor><svg class=presence-cursor-arrow viewBox="11 7 14 21"><g fill=#fff><path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z"></path><path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z"></path></g><g><path d="m13 10.814v11.188l2.969-2.866.428-.139h4.768z"></path><path d="m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z"></path></g></svg><span class=presence-nametag>`);
+function PresenceCursor(props) {
+  const [local, rest] = splitProps(props, ["color", "name"]);
+  return (() => {
+    var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
+    spread(_el$, rest, false, true);
+    insert(_el$5, () => local.name);
+    createRenderEffect((_p$) => {
+      var _v$ = local.color, _v$2 = local.color;
+      _v$ !== _p$.e && setAttribute(_el$4, "fill", _p$.e = _v$);
+      _v$2 !== _p$.t && setStyleProperty(_el$5, "background-color", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
 }
-delegateEvents(["click", "input"]);
 
 // src/picker/ui/input.tsx
-var _tmpl$5 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<input>`);
 function Input(props) {
   const [local, rest] = splitProps(props, ["class", "type"]);
   return (() => {
-    var _el$ = _tmpl$5();
+    var _el$ = _tmpl$6();
     spread(_el$, mergeProps({
       get type() {
         return local.type;
@@ -3044,11 +3232,11 @@ function Input(props) {
 }
 
 // src/picker/ui/label.tsx
-var _tmpl$6 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<label>`);
 function Label(props) {
   const [local, rest] = splitProps(props, ["class", "children"]);
   return (() => {
-    var _el$ = _tmpl$6();
+    var _el$ = _tmpl$7();
     spread(_el$, mergeProps({
       get ["class"]() {
         return `label${local.class ? " " + local.class : ""}`;
@@ -7130,7 +7318,7 @@ function usePopperContext() {
   }
   return context;
 }
-var _tmpl$7 = /* @__PURE__ */ template(`<svg display="block" viewBox="0 0 30 30" style="transform:scale(1.02)"><g><path fill="none" d="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"></path><path stroke="none" d="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z">`);
+var _tmpl$8 = /* @__PURE__ */ template(`<svg display="block" viewBox="0 0 30 30" style="transform:scale(1.02)"><g><path fill="none" d="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"></path><path stroke="none" d="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z">`);
 var DEFAULT_SIZE = 30;
 var HALF_DEFAULT_SIZE = DEFAULT_SIZE / 2;
 var ROTATION_DEG = {
@@ -7178,7 +7366,7 @@ function PopperArrow(props) {
     }
   }, others, {
     get children() {
-      const _el$ = _tmpl$7(), _el$2 = _el$.firstChild;
+      const _el$ = _tmpl$8(), _el$2 = _el$.firstChild;
       createRenderEffect(() => setAttribute(_el$2, "transform", rotate()));
       return _el$;
     }
@@ -8254,15 +8442,15 @@ var TooltipTrigger2 = Tooltip.Trigger;
 var TooltipContent2 = Tooltip.Content;
 
 // src/picker/AccountPicker.tsx
-var _tmpl$8 = /* @__PURE__ */ template(`<div class=field-group>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div>Not a valid account token, try copy-pasting again.`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div class=loading-text>Looking up account...`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div class=field-group>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div>Not a valid account token, try copy-pasting again.`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div class=loading-text>Looking up account...`);
 var _tmpl$42 = /* @__PURE__ */ template(`<div>Account not found`);
 var _tmpl$52 = /* @__PURE__ */ template(`<form class=field-group><p class=hint>Paste your account token to log in. You can find it in account settings on any device where you're signed in.</p><div class=input-row></div><div class=error-text>`);
 var _tmpl$62 = /* @__PURE__ */ template(`<input type=file accept=image/* class=sr-only>`);
-var _tmpl$72 = /* @__PURE__ */ template(`<button type=button class=avatar-button title="Click to change avatar"><patchwork-view tool-id=contact>`, true, false, false);
-var _tmpl$82 = /* @__PURE__ */ template(`<div class=profile-header><div class=avatar-area>`);
-var _tmpl$9 = /* @__PURE__ */ template(`<p>Copied`);
+var _tmpl$72 = /* @__PURE__ */ template(`<button type=button class=avatar-button title="Change avatar"><patchwork-view tool-id=contact>`, true, false, false);
+var _tmpl$82 = /* @__PURE__ */ template(`<div class=profile-header><div class=identity><div class=presence-slot>`);
+var _tmpl$92 = /* @__PURE__ */ template(`<p>Copied`);
 var _tmpl$0 = /* @__PURE__ */ template(`<div class=actions>`);
 var _tmpl$1 = /* @__PURE__ */ template(`<div class=modal-backdrop>`);
 var _tmpl$10 = /* @__PURE__ */ template(`<div class=modal><p class=modal-title>Sign out?</p><p class=hint>Make sure you've saved your account token first.</p><div class=input-row></div><div class=modal-actions>`);
@@ -8275,6 +8463,7 @@ var AccountPicker = (props) => {
   const currentAccount = makeDocumentProjection(props.handle);
   const [self, selfHandle] = useDocument(() => currentAccount.contactUrl, props.element);
   let avatarInputRef;
+  let colorPopupRef;
   const [signupName, setSignupName] = createSignal("");
   const [activeTab, setActiveTab] = createSignal(
     "signUp"
@@ -8284,6 +8473,8 @@ var AccountPicker = (props) => {
   const [isCopyTooltipOpen, setIsCopyTooltipOpen] = createSignal(false);
   const [isContactCardCopyTooltipOpen, setIsContactCardCopyTooltipOpen] = createSignal(false);
   const [showSignOutConfirm, setShowSignOutConfirm] = createSignal(false);
+  const [showColorPopup, setShowColorPopup] = createSignal(false);
+  const [pendingAvatar, setPendingAvatar] = createSignal();
   const [accountTokenToLogin, setAccountTokenToLogin] = createSignal("");
   const accountAutomergeUrlToLogin = createMemo(() => accountTokenToAutomergeUrl(accountTokenToLogin()));
   const [accountToLogin, accountToLoginHandle] = useDocument(accountAutomergeUrlToLogin);
@@ -8304,6 +8495,25 @@ var AccountPicker = (props) => {
     const s = self();
     return s?.type === "registered" ? s.name : "";
   };
+  createEffect(() => {
+    if (!showColorPopup()) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (colorPopupRef?.contains(target)) return;
+      if (target?.closest(".presence-cursor")) return;
+      setShowColorPopup(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setShowColorPopup(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    });
+  });
+  const presenceColor = () => self()?.color || "#888";
   const currentAccountToken = createMemo(() => {
     return currentAccount ? automergeUrlToAccountToken(props.handle.url, name()) : null;
   });
@@ -8323,20 +8533,34 @@ var AccountPicker = (props) => {
       contact.color = newColor;
     });
   };
-  const onAvatarChange = async (e) => {
+  const onAvatarChange = (e) => {
     const target = e.target;
-    const s = self();
-    if (!currentAccount || !s || s.type !== "registered") return;
     const avatarFile = !target.files ? void 0 : target.files[0];
+    target.value = "";
     if (!avatarFile) return;
-    const compressed = await compressAvatar(avatarFile);
+    setPendingAvatar({
+      file: avatarFile,
+      url: URL.createObjectURL(avatarFile)
+    });
+  };
+  const onCancelCrop = () => {
+    const pending = pendingAvatar();
+    if (pending) URL.revokeObjectURL(pending.url);
+    setPendingAvatar(void 0);
+  };
+  const onCropAvatar = async (crop) => {
+    const pending = pendingAvatar();
+    const s = self();
+    if (!pending || !currentAccount || !s || s.type !== "registered") return;
+    onCancelCrop();
+    const compressed = await compressAvatar(pending.file, crop);
     if (!compressed) return;
     const repo = props.element.repo;
     const imageHandle = await repo.create2();
     imageHandle.change((doc) => {
       doc.content = compressed.content;
       doc.mimeType = compressed.mimeType;
-      doc.name = avatarFile.name;
+      doc.name = pending.file.name;
       doc.extension = "webp";
     });
     selfHandle()?.change((contact) => {
@@ -8347,21 +8571,28 @@ var AccountPicker = (props) => {
   };
   const onSignUp = async () => {
     if (!currentAccount || !signupName()) return;
+    let targetContactHandle = selfHandle();
     if (!currentAccount.contactUrl) {
       const repo = props.element.repo;
-      const contactHandle = await repo.create2({
+      targetContactHandle = await repo.create2({
         ["@patchwork"]: {
           type: "patchwork:contact"
         },
-        type: "anonymous"
+        type: "anonymous",
+        color: getRandomUserColor()
       });
+      const targetContactUrl = targetContactHandle.url;
       props.handle.change((account) => {
-        account.contactUrl = contactHandle.url;
+        account.contactUrl = targetContactUrl;
       });
     }
-    selfHandle()?.change((contact) => {
+    if (!targetContactHandle) return;
+    targetContactHandle.change((contact) => {
       contact.type = "registered";
       contact.name = signupName();
+      if (!contact.color) {
+        contact.color = generateColorFromString(targetContactHandle.url);
+      }
     });
   };
   const onLogIn = async () => {
@@ -8431,7 +8662,7 @@ var AccountPicker = (props) => {
                   value: "signUp",
                   "class": "tabs-content",
                   get children() {
-                    var _el$2 = _tmpl$8();
+                    var _el$2 = _tmpl$9();
                     insert(_el$2, createComponent(Label, {
                       "for": "name",
                       children: "Name"
@@ -8503,7 +8734,7 @@ var AccountPicker = (props) => {
                         return accountTokenToLoginStatus() === "malformed";
                       },
                       get children() {
-                        return _tmpl$23();
+                        return _tmpl$24();
                       }
                     }), null);
                     insert(_el$6, createComponent(Show, {
@@ -8511,7 +8742,7 @@ var AccountPicker = (props) => {
                         return accountTokenToLoginStatus() === "loading";
                       },
                       get children() {
-                        return _tmpl$32();
+                        return _tmpl$33();
                       }
                     }), null);
                     insert(_el$6, createComponent(Show, {
@@ -8549,7 +8780,7 @@ var AccountPicker = (props) => {
               use((el) => avatarInputRef = el, _el$0);
               return _el$0;
             })(), (() => {
-              var _el$1 = _tmpl$82(), _el$10 = _el$1.firstChild;
+              var _el$1 = _tmpl$82(), _el$10 = _el$1.firstChild, _el$13 = _el$10.firstChild;
               insert(_el$10, createComponent(Show, {
                 get when() {
                   return currentAccount?.contactUrl;
@@ -8558,15 +8789,42 @@ var AccountPicker = (props) => {
                   var _el$11 = _tmpl$72(), _el$12 = _el$11.firstChild;
                   _el$11.$$click = () => avatarInputRef?.click();
                   _el$12._$owner = getOwner();
-                  createRenderEffect(() => _el$12.docUrl = currentAccount.contactUrl);
+                  createRenderEffect((_p$) => {
+                    var _v$ = `0 0 0 2px var(--account-picker-bg), 0 0 0 5px ${presenceColor()}`, _v$2 = currentAccount.contactUrl;
+                    _v$ !== _p$.e && setStyleProperty(_el$11, "box-shadow", _p$.e = _v$);
+                    _v$2 !== _p$.t && (_el$12.docUrl = _p$.t = _v$2);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  });
                   return _el$11;
                 }
-              }), null);
-              insert(_el$10, createComponent(ColorPicker, {
-                get value() {
-                  return self()?.color;
+              }), _el$13);
+              insert(_el$13, createComponent(PresenceCursor, {
+                get color() {
+                  return presenceColor();
+                },
+                get name() {
+                  return name() || "You";
                 },
-                onChange: onColorChange
+                title: "Change presence colour",
+                onClick: () => setShowColorPopup((prev) => !prev)
+              }));
+              insert(_el$10, createComponent(Show, {
+                get when() {
+                  return showColorPopup();
+                },
+                get children() {
+                  return createComponent(ColorPopup, {
+                    ref: (el) => colorPopupRef = el,
+                    get value() {
+                      return self()?.color;
+                    },
+                    onChange: onColorChange,
+                    onClose: () => setShowColorPopup(false)
+                  });
+                }
               }), null);
               insert(_el$1, createComponent(Input, {
                 id: "name",
@@ -8579,8 +8837,8 @@ var AccountPicker = (props) => {
               }), null);
               return _el$1;
             })(), (() => {
-              var _el$13 = _tmpl$0();
-              insert(_el$13, createComponent(Tooltip2, {
+              var _el$14 = _tmpl$0();
+              insert(_el$14, createComponent(Tooltip2, {
                 get open() {
                   return isCopyTooltipOpen();
                 },
@@ -8603,12 +8861,12 @@ var AccountPicker = (props) => {
                   }), createComponent(TooltipContent2, {
                     "class": "tooltip-content",
                     get children() {
-                      return _tmpl$9();
+                      return _tmpl$92();
                     }
                   })];
                 }
               }), null);
-              insert(_el$13, createComponent(Show, {
+              insert(_el$14, createComponent(Show, {
                 get when() {
                   return props.element.hive?.active?.contactCard;
                 },
@@ -8636,36 +8894,47 @@ var AccountPicker = (props) => {
                       }), createComponent(TooltipContent2, {
                         "class": "tooltip-content",
                         get children() {
-                          return _tmpl$9();
+                          return _tmpl$92();
                         }
                       })];
                     }
                   });
                 }
               }), null);
-              insert(_el$13, createComponent(Button, {
+              insert(_el$14, createComponent(Button, {
                 onClick: () => setShowSignOutConfirm(true),
                 variant: "ghost",
                 "class": "sign-out",
                 children: "Sign out"
               }), null);
-              return _el$13;
+              return _el$14;
             })(), createComponent(Show, {
+              get when() {
+                return pendingAvatar();
+              },
+              children: (pending) => createComponent(AvatarCropper, {
+                get src() {
+                  return pending().url;
+                },
+                onCancel: onCancelCrop,
+                onConfirm: onCropAvatar
+              })
+            }), createComponent(Show, {
               get when() {
                 return showSignOutConfirm();
               },
               get children() {
                 return [(() => {
-                  var _el$16 = _tmpl$1();
-                  _el$16.$$click = () => setShowSignOutConfirm(false);
-                  return _el$16;
+                  var _el$17 = _tmpl$1();
+                  _el$17.$$click = () => setShowSignOutConfirm(false);
+                  return _el$17;
                 })(), (() => {
-                  var _el$17 = _tmpl$10(), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling, _el$22 = _el$20.nextSibling;
-                  insert(_el$17, createComponent(Label, {
+                  var _el$18 = _tmpl$10(), _el$19 = _el$18.firstChild, _el$20 = _el$19.nextSibling, _el$21 = _el$20.nextSibling, _el$23 = _el$21.nextSibling;
+                  insert(_el$18, createComponent(Label, {
                     "for": "signOutAccountUrl",
                     children: "Account token"
-                  }), _el$20);
-                  insert(_el$20, createComponent(Input, {
+                  }), _el$21);
+                  insert(_el$21, createComponent(Input, {
                     onFocus: (e) => e.currentTarget.select(),
                     get value() {
                       return currentAccountToken() || "";
@@ -8677,7 +8946,7 @@ var AccountPicker = (props) => {
                     readOnly: true,
                     autocomplete: "off"
                   }), null);
-                  insert(_el$20, createComponent(Button, {
+                  insert(_el$21, createComponent(Button, {
                     variant: "ghost",
                     onClick: onToggleShowAccountUrl,
                     type: "button",
@@ -8695,7 +8964,7 @@ var AccountPicker = (props) => {
                       });
                     }
                   }), null);
-                  insert(_el$17, createComponent(Tooltip2, {
+                  insert(_el$18, createComponent(Tooltip2, {
                     get open() {
                       return isCopyTooltipOpen();
                     },
@@ -8721,22 +8990,22 @@ var AccountPicker = (props) => {
                       }), createComponent(TooltipContent2, {
                         "class": "tooltip-content",
                         get children() {
-                          return _tmpl$9();
+                          return _tmpl$92();
                         }
                       })];
                     }
-                  }), _el$22);
-                  insert(_el$22, createComponent(Button, {
+                  }), _el$23);
+                  insert(_el$23, createComponent(Button, {
                     variant: "secondary",
                     onClick: () => setShowSignOutConfirm(false),
                     children: "Cancel"
                   }), null);
-                  insert(_el$22, createComponent(Button, {
+                  insert(_el$23, createComponent(Button, {
                     onClick: onLogout,
                     "class": "sign-out-confirm",
                     children: "Sign out"
                   }), null);
-                  return _el$17;
+                  return _el$18;
                 })()];
               }
             })];
@@ -8748,14 +9017,12 @@ var AccountPicker = (props) => {
   })();
 };
 var AVATAR_MAX_SIZE = 512;
-async function compressAvatar(file) {
+async function compressAvatar(file, crop) {
   const bitmap = await createImageBitmap(file);
-  const scale = Math.min(1, AVATAR_MAX_SIZE / Math.max(bitmap.width, bitmap.height));
-  const width = Math.round(bitmap.width * scale);
-  const height = Math.round(bitmap.height * scale);
-  const canvas = new OffscreenCanvas(width, height);
+  const side = Math.round(Math.min(AVATAR_MAX_SIZE, crop.size));
+  const canvas = new OffscreenCanvas(side, side);
   const ctx = canvas.getContext("2d");
-  ctx.drawImage(bitmap, 0, 0, width, height);
+  ctx.drawImage(bitmap, crop.x, crop.y, crop.size, crop.size, 0, 0, side, side);
   bitmap.close();
   const blob = await canvas.convertToBlob({
     type: "image/webp",
@@ -8775,9 +9042,9 @@ function EyeOffIcon() {
 }
 function CopyIcon(props) {
   return (() => {
-    var _el$25 = _tmpl$14();
-    createRenderEffect(() => setAttribute(_el$25, "class", props.class ?? "icon"));
-    return _el$25;
+    var _el$26 = _tmpl$14();
+    createRenderEffect(() => setAttribute(_el$26, "class", props.class ?? "icon"));
+    return _el$26;
   })();
 }
 var AccountPickerTool = (handle, element) => {
@@ -8799,4 +9066,4 @@ export {
   AccountPicker,
   AccountPickerTool
 };
-//# sourceMappingURL=AccountPicker-HMEN6MEN.js.map
+//# sourceMappingURL=AccountPicker-HB6MDLKN.js.map