clay-server 3.8.0-beta.1 → 3.8.0-beta.3

package/lib/public/css/profile.css

@@ -18,13 +18,16 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* Banner */
+/* Identity header */
 .profile-banner {
   height: 52px;
   position: relative;
   transition: background 0.2s ease;
   border-radius: 14px 14px 0 0;
   z-index: 1;
+  background: var(--bg);
+  border-top: 3px solid var(--profile-accent, #5857fc);
+  border-bottom: 1px solid var(--border);
 }
 
 .profile-close-btn {
@@ -34,8 +37,8 @@
   width: 24px;
   height: 24px;
   border: none;
-  background: rgba(0, 0, 0, 0.3);
-  color: #fff;
+  background: var(--bg-alt);
+  color: var(--text-muted);
   border-radius: 50%;
   font-size: 16px;
   line-height: 1;
@@ -47,7 +50,8 @@
 }
 
 .profile-close-btn:hover {
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--bg-hover, var(--bg-alt));
+  color: var(--text);
 }
 
 /* Avatar row (overlaps banner) */
@@ -65,7 +69,7 @@
 .profile-popover-avatar {
   width: 60px;
   height: 60px;
-  border-radius: 50%;
+  border-radius: 17px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -79,30 +83,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 50%;
-}
-
-/* Shuffle button next to Avatar label */
-.profile-shuffle-btn {
-  background: none;
-  border: none;
-  padding: 0;
-  margin-left: 4px;
-  cursor: pointer;
-  color: var(--text-muted);
-  vertical-align: middle;
-  transition: color 0.15s;
-  display: inline-flex;
-  align-items: center;
-}
-
-.profile-shuffle-btn .lucide {
-  width: 12px;
-  height: 12px;
-}
-
-.profile-shuffle-btn:hover {
-  color: var(--text);
+  border-radius: 14px;
 }
 
 .profile-name-display {
@@ -202,66 +183,140 @@
   border-color: var(--accent);
 }
 
-/* Avatar style grid */
-.profile-avatar-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
+/* Clay Imprint identity control */
+.profile-imprint-panel {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg);
+  padding: 9px;
 }
 
-.profile-avatar-option {
-  width: 100%;
-  aspect-ratio: 1;
-  border-radius: 10px;
-  border: 2px solid var(--border);
-  background: var(--bg);
-  cursor: pointer;
-  padding: 3px;
-  overflow: hidden;
+.profile-imprint-preview {
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: border-color 0.15s, transform 0.1s;
+  gap: 10px;
+  min-height: 54px;
 }
 
-.profile-avatar-option img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 6px;
+.profile-imprint-preview img {
+  width: 50px;
+  height: 50px;
+  border-radius: 13px;
+  flex: 0 0 auto;
 }
 
-.profile-avatar-option:hover {
-  border-color: var(--text-muted);
-  transform: scale(1.05);
+.profile-imprint-preview span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 }
 
-.profile-avatar-option.profile-avatar-option-active {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
+.profile-imprint-preview strong {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.profile-imprint-preview small {
+  color: var(--text-dimmer);
+  font-size: 10px;
+}
+
+.profile-imprint-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5px;
+  margin-top: 8px;
 }
 
-/* Avatar upload button */
-.profile-avatar-upload .profile-avatar-upload-icon {
+.profile-imprint-actions button {
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg-alt);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 600;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--text-muted);
+  gap: 4px;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
-.profile-avatar-upload .profile-avatar-upload-icon svg {
-  width: 24px;
-  height: 24px;
+
+.profile-imprint-actions button:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
 }
-.profile-avatar-upload:hover .profile-avatar-upload-icon {
+
+.profile-imprint-actions button.is-active {
   color: var(--text);
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.profile-imprint-actions button .lucide {
+  width: 11px;
+  height: 11px;
+}
+
+.profile-avatar-upload {
+  grid-column: 1 / -1;
+}
+
+.profile-mate-mark-actions .profile-avatar-upload {
+  grid-column: auto;
+}
+
+.profile-avatar-upload.is-active::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
 }
+
 .profile-avatar-custom-preview {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 6px;
+  border-radius: 12px;
+}
+
+.profile-use-imprint.is-active::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.profile-imprint-actions button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.profile-imprint-actions button:active {
+  transform: translateY(1px);
+}
+
+.profile-imprint-actions button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.profile-imprint-actions button:disabled:hover {
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+.profile-imprint-actions button.is-active:hover {
+  color: var(--text);
 }
 
 /* Avatar positioner overlay */
@@ -297,7 +352,7 @@
   color: var(--text-muted);
   font-size: 20px;
   cursor: pointer;
-  border-radius: 50%;
+  border-radius: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -313,7 +368,7 @@
   color: var(--text);
 }
 .avatar-positioner-viewport {
-  border-radius: 50%;
+  border-radius: 26%;
   overflow: hidden;
   position: relative;
   cursor: grab;
@@ -368,30 +423,3 @@
 .avatar-positioner-btn-done:hover {
   filter: brightness(1.1);
 }
-
-/* Color swatch grid */
-.profile-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.profile-color-swatch {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition: transform 0.15s, border-color 0.15s;
-  padding: 0;
-}
-
-.profile-color-swatch:hover {
-  transform: scale(1.15);
-}
-
-.profile-color-swatch.profile-color-active {
-  border-color: #fff;
-  box-shadow: 0 0 0 2px var(--accent);
-}
-

package/lib/public/css/session-actions.css

@@ -2,23 +2,29 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  gap: 6px;
+  width: auto;
   height: 28px;
-  padding: 0;
-  border: 1px solid transparent;
+  margin: 0;
+  padding: 0 9px;
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
-  background: transparent;
-  color: var(--text-dimmer);
+  background: color-mix(in srgb, var(--brand-indigo) 5%, var(--bg));
+  color: var(--text-secondary);
   cursor: pointer;
   flex-shrink: 0;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 650;
+  white-space: nowrap;
   transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
 
 #header-session-actions-btn:hover,
 #header-session-actions-btn[aria-expanded="true"] {
   color: var(--text);
-  background: rgba(var(--overlay-rgb), 0.05);
-  border-color: var(--border);
+  background: color-mix(in srgb, var(--brand-indigo) 9%, var(--bg));
+  border-color: color-mix(in srgb, var(--brand-indigo) 32%, var(--border));
 }
 
 #header-session-actions-btn:focus { outline: none; }
@@ -28,12 +34,26 @@
 }
 
 #header-session-actions-btn.hidden { display: none; }
-#header-session-actions-btn .lucide { width: 16px; height: 16px; }
+#header-session-actions-btn .lucide:first-child {
+  width: 14px;
+  height: 14px;
+  color: color-mix(in srgb, var(--brand-indigo) 78%, var(--text));
+}
+
+#header-session-actions-btn .session-actions-trigger-chevron {
+  width: 13px;
+  height: 13px;
+  transition: transform 0.16s ease;
+}
+
+#header-session-actions-btn[aria-expanded="true"] .session-actions-trigger-chevron {
+  transform: rotate(180deg);
+}
 
 .session-actions-menu {
   position: fixed;
   z-index: 10020;
-  width: 286px;
+  width: min(300px, calc(100vw - 16px));
   padding: 6px;
   border: 1px solid var(--border);
   border-radius: 12px;
@@ -63,6 +83,17 @@
 }
 
 .session-actions-row:hover { background: var(--bg-alt); }
+.session-actions-row.is-primary {
+  background: color-mix(in srgb, var(--brand-indigo) 6%, transparent);
+}
+.session-actions-row.is-primary:hover {
+  background: color-mix(in srgb, var(--brand-indigo) 10%, transparent);
+}
+.session-actions-row.is-primary .session-actions-row-icon {
+  border-color: transparent;
+  background: var(--brand-indigo);
+  color: var(--brand-paper);
+}
 .session-actions-row:disabled { cursor: default; opacity: 0.42; }
 .session-actions-row:disabled:hover { background: transparent; }
 

package/lib/public/css/user-settings.css

@@ -342,7 +342,7 @@
   flex-shrink: 0;
   width: 56px;
   height: 56px;
-  border-radius: 50%;
+  border-radius: 26%;
   overflow: hidden;
   border: 1px solid rgba(var(--overlay-rgb), 0.1);
   background: var(--bg);

package/lib/public/index.html

@@ -388,8 +388,8 @@
         <div id="ralph-sticky" class="hidden"></div>
         <div id="debate-sticky" class="hidden"></div>
         <div class="status">
-          <button id="header-session-actions-btn" type="button" aria-label="Session actions" title="Session actions" aria-haspopup="menu" aria-expanded="false">
-            <i data-lucide="ellipsis"></i>
+          <button id="header-session-actions-btn" type="button" aria-label="Session actions" aria-haspopup="menu" aria-expanded="false">
+            <i data-lucide="bot"></i><span>Add AI worker</span><i class="session-actions-trigger-chevron" data-lucide="chevron-down"></i>
           </button>
           <button type="button" id="header-tui-font-btn" class="header-tui-font-btn hidden" title="Terminal font" aria-label="Terminal font">
             <i data-lucide="type"></i>

package/lib/public/modules/app-cursors.js

@@ -72,8 +72,8 @@ function createCursorElement(userId, displayName, color, avatarStyle, avatarSeed
   // Avatar
   var avatarImg = document.createElement("img");
   avatarImg.className = "remote-cursor-avatar";
-  avatarImg.src = avatarCustom ? avatarCustom : avatarUrl(avatarStyle || "thumbs", avatarSeed || userId, 16);
-  avatarImg.style.cssText = "width:14px;height:14px;border-radius:50%;background:#fff;flex-shrink:0;";
+  avatarImg.src = avatarCustom ? avatarCustom : avatarUrl(avatarStyle || "imprint", avatarSeed || userId, 16);
+  avatarImg.style.cssText = "width:14px;height:14px;border-radius:4px;background:#fff;flex-shrink:0;";
   tag.appendChild(avatarImg);
 
   // Name label

package/lib/public/modules/app-dm.js

@@ -215,7 +215,7 @@ export function enterDmMode(key, targetUser, messages) {
     var termBtn = document.getElementById("terminal-toggle-btn");
     if (termBtn) termBtn.style.display = "none";
     // Apply mate color to chat title bar and panels
-    var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
+    var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#5857fc";
     document.body.style.setProperty("--mate-color", mateColor);
     document.body.style.setProperty("--mate-color-tint", mateColor + "0a");
     document.body.classList.add("mate-dm-active");
@@ -223,19 +223,12 @@ export function enterDmMode(key, targetUser, messages) {
     var mp = targetUser.profile || {};
     var mateAvUrlDm = mateAvatarUrl(targetUser, 36);
     var myUser = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
-    if (!myUser) {
-      try { var cached = JSON.parse(localStorage.getItem("clay_my_user") || "null"); if (cached) myUser = cached; } catch(e) {}
-    }
     var myAvatarUrl = userAvatarUrl(myUser || { id: store.get('myUserId') }, 36);
     var myDisplayName = (myUser && myUser.displayName) || "";
     document.body.dataset.mateAvatarUrl = mateAvUrlDm;
     document.body.dataset.mateName = mp.displayName || targetUser.displayName || targetUser.name || "";
     document.body.dataset.myAvatarUrl = myAvatarUrl;
     document.body.dataset.myDisplayName = myDisplayName;
-    // Cache my info for restore after hard refresh
-    if (myUser) {
-      try { localStorage.setItem("clay_my_user", JSON.stringify({ displayName: myUser.displayName, avatarStyle: myUser.avatarStyle, avatarSeed: myUser.avatarSeed, avatarCustom: myUser.avatarCustom, username: myUser.username })); } catch(e) {}
-    }
     var titleBarContent = document.querySelector(".title-bar-content");
     if (titleBarContent) {
       titleBarContent.style.background = mateColor;

package/lib/public/modules/app-messages.js

@@ -95,7 +95,7 @@ export function processMessage(msg) {
         if (headerTitleEl) headerTitleEl.textContent = _mdn;
         var _tbpn = document.getElementById("title-bar-project-name");
         if (_tbpn) _tbpn.textContent = _mdn;
-        var _mc2 = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#7c3aed";
+        var _mc2 = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#5857fc";
         var _tbc2 = document.querySelector(".title-bar-content");
         if (_tbc2) { _tbc2.style.background = _mc2; _tbc2.classList.add("mate-dm-active"); }
         document.body.classList.add("mate-dm-active");
@@ -299,7 +299,7 @@ export function processMessage(msg) {
           var tbProjectName = document.getElementById("title-bar-project-name");
           if (tbProjectName) tbProjectName.textContent = _mateDN;
           // Re-apply mate title bar styling (may be lost during project switch)
-          var _mc = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#7c3aed";
+          var _mc = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#5857fc";
           var _tbc = document.querySelector(".title-bar-content");
           if (_tbc) { _tbc.style.background = _mc; _tbc.classList.add("mate-dm-active"); }
           document.body.classList.add("mate-dm-active");

package/lib/public/modules/app-projects.js

@@ -257,12 +257,13 @@ export function updateProjectList(msg) {
     if (msg.dmConversations) store.set({ cachedDmConversations: msg.dmConversations });
     // renderUserStrip is handled by the store subscriber
     var st2 = store.snap();
-    if (document.body.classList.contains("mate-dm-active") || document.body.classList.contains("wide-view")) {
-      var refreshedMyUser = st2.cachedAllUsers.find(function (u) { return u.id === st2.myUserId; });
-      if (refreshedMyUser) {
-        document.body.dataset.myDisplayName = refreshedMyUser.displayName || refreshedMyUser.username || "";
-        document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
-        try { localStorage.setItem("clay_my_user", JSON.stringify({ displayName: refreshedMyUser.displayName, username: refreshedMyUser.username, avatarStyle: refreshedMyUser.avatarStyle, avatarSeed: refreshedMyUser.avatarSeed, avatarCustom: refreshedMyUser.avatarCustom })); } catch(e) {}
+    var refreshedMyUser = st2.cachedAllUsers.find(function (u) { return u.id === st2.myUserId; });
+    if (refreshedMyUser) {
+      document.body.dataset.myDisplayName = refreshedMyUser.displayName || refreshedMyUser.username || "";
+      document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
+      var myMessageAvatars = document.querySelectorAll('.dm-bubble-avatar-me');
+      for (var avatarIndex = 0; avatarIndex < myMessageAvatars.length; avatarIndex++) {
+        myMessageAvatars[avatarIndex].src = document.body.dataset.myAvatarUrl;
       }
     }
     // Render my avatar (always present, hidden behind user-island)

package/lib/public/modules/app-rate-limit.js

@@ -311,7 +311,6 @@ export function addScheduledMessageBubble(text, resetsAt) {
   if (isChannel) {
     // Channel mode: avatar + header with scheduled badge + message
     var _me = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
-    if (!_me) { try { _me = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {} }
     var _myName = document.body.dataset.myDisplayName || (_me && (_me.displayName || _me.username)) || "Me";
 
     var avi = document.createElement("img");

package/lib/public/modules/app-rendering.js

@@ -552,9 +552,6 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName, d
     _displayName = fromUserName || (_targetUser && (_targetUser.displayName || _targetUser.username)) || "User";
   } else {
     _targetUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
-    if (!_targetUser) {
-      try { _targetUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {}
-    }
     _displayName = document.body.dataset.myDisplayName || "";
     if (!_displayName) {
       _displayName = (_targetUser && (_targetUser.displayName || _targetUser.username)) || "Me";

package/lib/public/modules/avatar-imprint.js

@@ -0,0 +1,134 @@
+// Clay Imprints: deterministic SVG identities derived from a stable seed.
+
+var PAPER = "#f1efe8";
+var INK = "#1b1b1a";
+var LIGHT_BASE = "#e7e5de";
+var LIGHT_FIELD = "#333330";
+var REGISTRATION_INDIGO = "#5857fc";
+var BRAND_GREEN = "#07e5a3";
+
+function hashString(value) {
+  var text = String(value || "anonymous");
+  var hash = 2166136261;
+  for (var index = 0; index < text.length; index++) {
+    hash ^= text.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function makeRandom(seed) {
+  var state = seed >>> 0;
+  return function nextRandom() {
+    state += 0x6d2b79f5;
+    var value = state;
+    value = Math.imul(value ^ (value >>> 15), value | 1);
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function between(random, min, max) {
+  return min + random() * (max - min);
+}
+
+function number(value) {
+  return Math.round(value * 100) / 100;
+}
+
+function xmlText(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function legacyIdentity(style, seed) {
+  var sourceStyle = String(style || "imprint").toLowerCase();
+  var sourceSeed = String(seed || "anonymous");
+  if (sourceStyle === "imprint") return sourceSeed;
+  return "legacy:" + sourceStyle + ":" + sourceSeed;
+}
+
+function curvePath(y, bow, endOffset) {
+  return "M -28 " + number(y) +
+    " C 17 " + number(y + bow) +
+    ", 71 " + number(y - bow) +
+    ", 124 " + number(y + endOffset);
+}
+
+function cutPath(random) {
+  var start = between(random, 37, 52);
+  var first = between(random, 14, 84);
+  var second = between(random, 12, 86);
+  var end = between(random, 40, 64);
+  return "M -22 " + number(start) + " C 21 " + number(first) + ", 73 " + number(second) + ", 118 " + number(end);
+}
+
+export function imprintSvg(options) {
+  var settings = options || {};
+  var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
+  var identity = legacyIdentity(settings.style, settings.seed);
+  var hash = hashString(identity);
+  var random = makeRandom(hash);
+  var darkBase = random() > 0.52;
+  var base = darkBase ? INK : LIGHT_BASE;
+  var field = darkBase ? PAPER : LIGHT_FIELD;
+  var accent = REGISTRATION_INDIGO;
+  var rotation = Math.floor(random() * 4) * 90;
+  var bandWidth = between(random, 37, 56);
+  var secondaryWidth = between(random, 14, 24);
+  var cutWidth = between(random, 15, 25);
+  var firstY = between(random, 24, 42);
+  var secondY = between(random, 58, 78);
+  var firstBow = between(random, -34, 34);
+  var secondBow = between(random, -32, 32);
+  var firstPath = curvePath(firstY, firstBow, 6);
+  var secondPath = curvePath(secondY, -secondBow, -5);
+  var contours = "";
+
+  if (size >= 40) {
+    for (var contour = -1; contour <= 1; contour++) {
+      var offset = contour * 5.2;
+      contours += '<path d="' + curvePath(firstY + offset, firstBow, 0) + '" fill="none" stroke="' +
+        (darkBase ? PAPER : INK) + '" stroke-opacity="0.2" stroke-width="0.8"/>';
+    }
+  }
+
+  var clipId = "imprint-" + hash.toString(16);
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
+    '" viewBox="0 0 96 96"><defs><clipPath id="' + clipId +
+    '"><rect width="96" height="96" rx="24"/></clipPath></defs><g clip-path="url(#' + clipId +
+    ')"><rect width="96" height="96" fill="' + base + '"/><g transform="rotate(' + rotation +
+    ' 48 48)"><path d="' + firstPath + '" fill="none" stroke="' + field + '" stroke-width="' +
+    number(bandWidth) + '" stroke-linecap="square"/><path d="' + secondPath + '" fill="none" stroke="' +
+    accent + '" stroke-width="' + number(secondaryWidth) + '" stroke-linecap="square"/><path d="' +
+    cutPath(random) + '" fill="none" stroke="' + base + '" stroke-width="' + number(cutWidth) +
+    '" stroke-linecap="square"/>' + contours + '</g></g><rect x="0.5" y="0.5" width="95" height="95" rx="23.5" fill="none" stroke="' +
+    (darkBase ? "#000000" : INK) + '" stroke-opacity="0.16"/></svg>';
+}
+
+export function imprintDataUrl(options) {
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(imprintSvg(options));
+}
+
+export function mateMarkSvg(options) {
+  var settings = options || {};
+  var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
+  var identity = String(settings.seed || "M").trim();
+  var initial = Array.from(identity || "M")[0].toUpperCase();
+  var palette = [
+    { background: REGISTRATION_INDIGO, foreground: PAPER },
+    { background: BRAND_GREEN, foreground: INK },
+    { background: PAPER, foreground: REGISTRATION_INDIGO },
+  ][initial.codePointAt(0) % 3];
+  var clipId = "mate-mark";
+
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
+    '" viewBox="0 0 96 96"><defs><clipPath id="' + clipId +
+    '"><rect width="96" height="96" rx="24"/></clipPath></defs><g clip-path="url(#' + clipId +
+    ')"><rect width="96" height="96" fill="' + palette.background + '"/><text x="48" y="50" fill="' + palette.foreground +
+    '" font-family="Arial, Helvetica, sans-serif" font-size="43" font-weight="600" text-anchor="middle" dominant-baseline="middle">' +
+    xmlText(initial) + '</text></g><rect x="0.5" y="0.5" width="95" height="95" rx="23.5" fill="none" stroke="#000000" stroke-opacity="0.18"/></svg>';
+}
+
+export function mateMarkDataUrl(options) {
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(mateMarkSvg(options));
+}