@inkandswitch/patchwork-pkg-base 0.0.54 → 0.0.56

package/packages/comments-view/dist/assets/main-BPvgT7fH.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  --comments-fg: var(--text-editor-line, var(--studio-line, black));\n  --comments-muted-fg: var(--studio-line-offset-50, #999);\n  --comments-bg: var(--text-editor-fill, var(--studio-fill, white));\n  --comments-border: var(--studio-fill-offset-20, #ccc);\n  --comments-hover-bg: var(--studio-fill-offset-10, #f5f5f5);\n  --comments-font: var(--studio-family-sans, system-ui, sans-serif);\n  --comments-accent: var(--studio-secondary, #33ccf8);\n}\n}\n\n/* The width:100% boxes below (panel, textarea) also carry padding and a\n   border, so without border-box they extend past their container and overflow\n   it. Scoped to the panel and the thread card so the injected stylesheet never\n   touches the host page (it may be injected into document.head, not a shadow\n   root). The card is covered on its own because a single thread renders\n   standalone too — e.g. in the editor's comment popover, with no panel around\n   it — and its draft textarea would otherwise spill out of the card. */\n.comments-panel,\n.comments-panel *,\n.comments-panel *::before,\n.comments-panel *::after,\n.comments-thread-card,\n.comments-thread-card *,\n.comments-thread-card *::before,\n.comments-thread-card *::after {\n  box-sizing: border-box;\n}\n\n.comments-panel {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem;\n  gap: 0.5rem;\n  font-family: var(--comments-font);\n  color: var(--comments-fg);\n}\n\n.comments-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-panel-header-title {\n  font-weight: 500;\n}\n\n.comments-empty {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1.5rem 0.5rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* The thread's card + actions are rendered by the `comment-thread` tool into\n   its <patchwork-view> host, so that host is the flex column that lays them\n   out (a custom element is `display: inline` by default). */\n.comments-thread > patchwork-view {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-card {\n  background: var(--comments-bg);\n  border: 1px solid var(--comments-border);\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  cursor: pointer;\n  transition: box-shadow 0.15s ease;\n}\n\n.comments-thread-card--primary {\n  box-shadow:\n    0 10px 15px -3px rgb(0 0 0 / 0.1),\n    0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--secondary {\n  box-shadow:\n    0 4px 6px -1px rgb(0 0 0 / 0.1),\n    0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--inactive {\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n/* Resolved threads are hidden in the sidebar but shown when embedded. Keep\n   them clearly readable, just visibly \"settled\": muted fill, dashed border,\n   and slightly dimmed so they read as archived rather than active. */\n.comments-thread-card--resolved {\n  background: var(--comments-hover-bg);\n  border-style: dashed;\n  opacity: 0.75;\n}\n\n.comments-thread-resolved-label {\n  align-self: flex-start;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.625rem;\n  color: var(--comments-muted-fg);\n  border: 1px solid var(--comments-border);\n}\n\n.comments-thread-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-doc-level {\n  font-size: 0.6875rem;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comments-thread-actions {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.comment-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comment-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comment-author {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.comment-author-name {\n  font-size: 0.875rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--comments-fg);\n}\n\n.comment-timestamp {\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comment-content {\n  font-size: 1rem;\n  color: var(--comments-fg);\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n\n/* The draft editor is a cute.txt (CodeMirror) instance; box it like the old\n   textarea. Its inner padding/font come from the injected cute.txt styles. */\n.comment-draft-editor {\n  height: 6rem;\n  min-height: 6rem;\n  border: 1px solid var(--comments-border);\n  border-radius: 0.5rem;\n  color: var(--comments-fg);\n  background: var(--comments-bg);\n  overflow: hidden;\n}\n\n.comment-draft-editor .cm-content {\n  box-sizing: border-box;\n  min-height: 100%;\n}\n\n.comment-draft-editor .cm-scroller {\n  height: 100%;\n}\n\n.comment-draft-editor:focus-within {\n  outline: 2px solid var(--comments-accent);\n  outline-offset: 1px;\n}\n\n.comment-btn {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  font-family: inherit;\n  font-size: 0.875rem;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  color: var(--comments-fg);\n}\n\n.comment-btn:hover {\n  background: var(--comments-hover-bg);\n}"));
+      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  --comments-fg: var(--text-editor-line, var(--studio-line, black));\n  --comments-muted-fg: var(--studio-line-offset-50, #999);\n  --comments-bg: var(--text-editor-fill, var(--studio-fill, white));\n  --comments-border: var(--studio-fill-offset-20, #ccc);\n  --comments-hover-bg: var(--studio-fill-offset-10, #f5f5f5);\n  --comments-font: var(--studio-family-sans, system-ui, sans-serif);\n  --comments-accent: var(--studio-secondary, #33ccf8);\n}\n}\n\n/* The width:100% boxes below (panel, textarea) also carry padding and a\n   border, so without border-box they extend past their container and overflow\n   it. Scoped to the panel and the thread card so the injected stylesheet never\n   touches the host page (it may be injected into document.head, not a shadow\n   root). The card is covered on its own because a single thread renders\n   standalone too — e.g. in the editor's comment popover, with no panel around\n   it — and its draft textarea would otherwise spill out of the card. */\n.comments-panel,\n.comments-panel *,\n.comments-panel *::before,\n.comments-panel *::after,\n.comments-thread-card,\n.comments-thread-card *,\n.comments-thread-card *::before,\n.comments-thread-card *::after {\n  box-sizing: border-box;\n}\n\n.comments-panel {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem;\n  gap: 0.5rem;\n  font-family: var(--comments-font);\n  color: var(--comments-fg);\n}\n\n.comments-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-panel-header-title {\n  font-weight: 500;\n}\n\n.comments-empty {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1.5rem 0.5rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* The thread's card + actions are rendered by the `comment-thread` tool into\n   its <patchwork-view> host, so that host is the flex column that lays them\n   out (a custom element is `display: inline` by default). */\n.comments-thread > patchwork-view {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-card {\n  background: var(--comments-bg);\n  border: 1px solid var(--comments-border);\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  cursor: pointer;\n  transition: box-shadow 0.15s ease;\n}\n\n.comments-thread-card--primary {\n  box-shadow:\n    0 10px 15px -3px rgb(0 0 0 / 0.1),\n    0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--secondary {\n  box-shadow:\n    0 4px 6px -1px rgb(0 0 0 / 0.1),\n    0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--inactive {\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n/* Resolved threads are hidden in the sidebar but shown when embedded. Keep\n   them clearly readable, just visibly \"settled\": muted fill, dashed border,\n   and slightly dimmed so they read as archived rather than active. */\n.comments-thread-card--resolved {\n  background: var(--comments-hover-bg);\n  border-style: dashed;\n  opacity: 0.75;\n}\n\n.comments-thread-resolved-label {\n  align-self: flex-start;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.625rem;\n  color: var(--comments-muted-fg);\n  border: 1px solid var(--comments-border);\n}\n\n.comments-thread-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-doc-level {\n  font-size: 0.6875rem;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comments-thread-actions {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.comment-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comment-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comment-author {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.comment-author-name {\n  font-size: 0.875rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--comments-fg);\n}\n\n.comment-timestamp {\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comment-content {\n  font-size: 1rem;\n  color: var(--comments-fg);\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n\n/* The draft editor is a cute.txt (CodeMirror) instance; box it like the old\n   textarea. Its inner padding/font come from the injected cute.txt styles. */\n.comment-draft-editor {\n  height: 6rem;\n  min-height: 6rem;\n  min-width: 0;\n  width: 100%;\n  border: 1px solid var(--comments-border);\n  border-radius: 0.5rem;\n  color: var(--comments-fg);\n  background: var(--comments-bg);\n  overflow: hidden;\n}\n\n.comment-draft-editor .cm-content {\n  box-sizing: border-box;\n  min-height: 0;\n  min-width: 0;\n  margin: 0;\n  padding: 0.5rem;\n}\n\n.comment-draft-editor .cm-line {\n  margin: 0;\n  padding: 0;\n}\n\n.comment-draft-editor .cm-scroller {\n  height: 100%;\n  min-width: 0;\n}\n\n.comment-draft-editor:focus-within {\n  outline: 2px solid var(--comments-accent);\n  outline-offset: 1px;\n}\n\n.comment-btn {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  font-family: inherit;\n  font-size: 0.875rem;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  color: var(--comments-fg);\n}\n\n.comment-btn:hover {\n  background: var(--comments-hover-bg);\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {

package/packages/tldraw4/dist/tool.js

@@ -8359,26 +8359,6 @@ function urlFromText(line) {
 
 // src/CollaboratorCursor.tsx
 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
-var USER_COLOR_PALETTE = [
-  "hsl(200, 70%, 50%)",
-  "hsl(10, 75%, 58%)",
-  "hsl(145, 70%, 45%)",
-  "hsl(270, 70%, 55%)",
-  "hsl(38, 85%, 50%)",
-  "hsl(350, 70%, 55%)",
-  "hsl(178, 70%, 45%)",
-  "hsl(235, 70%, 58%)",
-  "hsl(85, 70%, 45%)",
-  "hsl(310, 70%, 55%)",
-  "hsl(25, 80%, 52%)",
-  "hsl(188, 75%, 48%)"
-];
-function generateColorFromString(str) {
-  const hash = Math.abs(
-    str.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  );
-  return USER_COLOR_PALETTE[hash % USER_COLOR_PALETTE.length];
-}
 function splitPresenceUserId(userId) {
   if (!userId.startsWith("automerge:")) return { actorId: userId };
   const i = userId.indexOf("-");
@@ -8500,9 +8480,9 @@ function useContactInfo() {
     // this prevents tldraw from hiding local cursors across multiple sessions under the same account.
     userId: contactUrl ? `${contactUrl}-${repo.peerId}` : repo.peerId,
     name: contactDoc?.name ?? "Anonymous",
-    // Derived from the contact url with the same rule the contact-cursor
-    // token uses, so the cursor arrow and the token always match.
-    color: contactUrl ? generateColorFromString(contactUrl) : void 0
+    // The color chosen in the account picker; it rides along in our presence
+    // record, so the cursor arrow always matches the contact-cursor token.
+    color: contactDoc?.color
   };
 }
 function TldrawTool({