@inkandswitch/patchwork-pkg-base 0.0.131 → 0.0.132

package/packages/doc-openwith/doc-openwith.js

@@ -101,7 +101,7 @@ function DocOpenWith(handle, element) {
 		}
 
 		.doc-openwith-btn:hover,
-		.doc-openwith-btn[data-open] {
+		.doc-openwith-btn--open {
 			border-color: var(--doc-openwith-border-hover);
 			background: var(--doc-openwith-hover);
 		}
@@ -116,6 +116,18 @@ function DocOpenWith(handle, element) {
 			background: var(--doc-openwith-bg);
 			box-shadow: var(--studio-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
 			overflow: hidden;
+			/* Grows out of the button (transform-origin is set in toggleMenu, to
+			   whichever edge it is aligned to). Closing is instant. */
+			transition:
+				opacity max(1ms, calc(150ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+				scale max(1ms, calc(150ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+		}
+
+		@starting-style {
+			.doc-openwith-menu[popover]:popover-open {
+				opacity: 0;
+				scale: 0.97;
+			}
 		}
 
 		.doc-openwith-input {
@@ -254,9 +266,11 @@ function DocOpenWith(handle, element) {
 		if (rect.left + menuWidth > window.innerWidth - 8) {
 			menuEl.style.left = ""
 			menuEl.style.right = window.innerWidth - rect.right + "px"
+			menuEl.style.transformOrigin = "top right"
 		} else {
 			menuEl.style.right = ""
 			menuEl.style.left = rect.left + "px"
+			menuEl.style.transformOrigin = "top left"
 		}
 		menuEl.togglePopover()
 	}

package/packages/doc-presence/doc-presence.js

@@ -1,6 +1,6 @@
 import {render} from "solid-js/web"
 import html from "solid-js/html"
-import {createSignal} from "solid-js"
+import {createMemo, createSignal, For, Show} from "solid-js"
 import {Presence} from "@automerge/automerge-repo"
 import {automergeUrlToServiceWorkerUrl} from "@inkandswitch/patchwork-filesystem"
 import {subscribe} from "@inkandswitch/patchwork-providers"
@@ -169,26 +169,45 @@ function DocPresence(handle, element) {
 	connectToSelectedDocProvider(element)
 	const session = joinDoc(handle)
 
-	function face(entry, fadedFn) {
-		const color = entry.color || "#888"
-		const initial = (entry.name || "?")[0].toUpperCase()
-		const imgUrl = entry.avatarUrl
-			? automergeUrlToServiceWorkerUrl(entry.avatarUrl)
-			: null
+	// A face is built once and kept: everything about it that can change is
+	// read through `entry` (an accessor), so a peer's heartbeat updates the face
+	// it has rather than replacing it.
+	function face(entry, faded) {
+		const imgUrl = () => {
+			const avatarUrl = entry()?.avatarUrl
+			return avatarUrl ? automergeUrlToServiceWorkerUrl(avatarUrl) : null
+		}
 		return html`<div
-			class="doc-presence-face"
+			class=${() =>
+				"doc-presence-face" + (faded() ? " doc-presence-face--faded" : "")}
 			style=${() => {
-				let s = `--face-color:${color}; opacity:${fadedFn() ? 0.35 : 1};`
-				if (imgUrl)
-					s += ` background-image: url("${imgUrl}"); color: transparent;`
+				let s = `--face-color:${entry()?.color || "#888"};`
+				const url = imgUrl()
+				if (url) s += ` background-image: url("${url}"); color: transparent;`
 				return s
 			}}
-			title=${entry.name}
+			title=${() => entry()?.name}
 		>
-			${initial}
+			${() => (entry()?.name || "?")[0].toUpperCase()}
 		</div>`
 	}
 
+	// One face per contact, keyed by its url. `session.peers()` is a fresh array
+	// of fresh objects on every presence event (a heartbeat every couple of
+	// seconds), so the list is keyed on the urls, which are stable, and each
+	// face looks its own peer up.
+	const peerUrlsOf = () =>
+		createMemo(() => session.peers().map(p => p.value.contactUrl), [], {
+			equals: (a, b) =>
+				a.length === b.length && a.every((url, i) => url === b[i]),
+		})
+	// holds on to the last state it saw: a face can outlive its peer by a tick
+	const peerState = url =>
+		createMemo(
+			prev =>
+				session.peers().find(p => p.value.contactUrl === url)?.value ?? prev,
+		)
+
 	const style = document.createElement("style")
 	style.textContent = `
 		.doc-presence {
@@ -210,29 +229,53 @@ function DocPresence(handle, element) {
 			line-height: 1;
 			overflow: hidden;
 			flex-shrink: 0;
-			transition: opacity max(1ms, calc(0.3s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) ease;
+			transition:
+				opacity max(1ms, calc(0.3s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) ease,
+				scale max(1ms, calc(150ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
 			background-color: var(--color-base-200, #eee);
 			background-size: cover;
 			background-position: center;
 			color: var(--color-base-content, #333);
 		}
+		/* someone whose window isn't focused */
+		.doc-presence-face--faded {
+			opacity: 0.35;
+		}
+		/* Someone arriving while you watch fades in. The faces already here when
+		   the bar is drawn don't: \`data-live\` goes on a frame after that. */
+		@starting-style {
+			.doc-presence[data-live] .doc-presence-face,
+			.doc-presence[data-live] .doc-presence-face--faded {
+				opacity: 0;
+				scale: 0.8;
+			}
+		}
 	`
 	element.appendChild(style)
 
 	const dispose = render(
-		() => html`<div class="doc-presence">
-			${() => {
-				const s = selfInfo()
-				if (!s) return null
-				return face(s, () => !focused())
-			}}
-			${() =>
-				session.peers().map(p => face(p.value, () => !p.value.focused))}
-		</div>`,
+		() => {
+			const peerUrls = peerUrlsOf()
+			return html`<div class="doc-presence">
+				<${Show} when=${() => selfInfo()}>
+					${() => face(selfInfo, () => !focused())}
+				<//>
+				<${For} each=${() => peerUrls()}>
+					${url => {
+						const state = peerState(url)
+						return face(state, () => !state()?.focused)
+					}}
+				<//>
+			</div>`
+		},
 		element,
 	)
+	const live = requestAnimationFrame(() =>
+		element.querySelector(".doc-presence")?.setAttribute("data-live", ""),
+	)
 
 	return () => {
+		cancelAnimationFrame(live)
 		leaveDoc(handle)
 		style.remove()
 		dispose()

package/packages/drafts/dist/assets/{main-CG9HOCai.js → main-wz7oton3.js}

@@ -97,6 +97,32 @@
     var(--drafts-shadow-sm);
 }
 
+/* A merge just landed here: the ring the hover promised holds for a beat,
+   then fades. It is drawn over the card, since the card clips its own shadow
+   (see LANDED_MS in DraftsSidebar.tsx, which outlasts this). */
+.draft-card[data-landed] {
+  position: relative;
+}
+.draft-card[data-landed]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 2px solid var(--drafts-primary);
+  background: color-mix(in oklch, var(--drafts-primary), transparent 88%);
+  pointer-events: none;
+  animation: draft-landed max(1ms, calc(600ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) ease-out both;
+}
+@keyframes draft-landed {
+  0%,
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 .draft-card-header {
   /* The header is a div (a rename input can't nest in a button), which,
      unlike a button, doesn't default to border-box — without this the
@@ -1299,6 +1325,7 @@ const EMPTY_DRAFT_LIST = {
   actorAttributionUrl: null
 };
 const DRAFTS_VERSION = "0.0.45";
+const LANDED_MS = 700;
 console.log(`[drafts] DraftsSidebar v${DRAFTS_VERSION} loaded`);
 function DraftsSidebar(props) {
   const [hostDoc, hostDocHandle] = subscribeDoc(props.element, {
@@ -1598,6 +1625,18 @@ function DraftsSidebar(props) {
     return `Fork from ${formatVersionTime(time)}`;
   });
   const [mergeHighlight, setMergeHighlight] = createSignal(false);
+  const [landed, setLanded] = createSignal(null);
+  let landedTimer;
+  const flashLanded = (target) => {
+    clearTimeout(landedTimer);
+    setLanded(target);
+    landedTimer = setTimeout(() => setLanded(null), LANDED_MS);
+  };
+  onCleanup(() => clearTimeout(landedTimer));
+  const draftUrls = createMemo(() => list().drafts.map((s) => s.url), [], {
+    equals: (a, b) => a.length === b.length && a.every((url, i) => url === b[i])
+  });
+  const summaryFor = (url) => createMemo((prev) => list().drafts.find((s) => s.url === url) ?? prev, list().drafts.find((s) => s.url === url));
   const draftDepth = (summary) => {
     const byUrl = new Map(list().drafts.map((s) => [s.url, s]));
     const seen = /* @__PURE__ */ new Set();
@@ -1622,7 +1661,9 @@ function DraftsSidebar(props) {
     }
     const draftHandle = await repo.find(draftUrl);
     await mergeDraft(repo, draftHandle);
-    selectDraft(parentUrl && parentUrl !== list().main.url ? parentUrl : null);
+    const target = parentUrl && parentUrl !== list().main.url ? parentUrl : null;
+    selectDraft(target);
+    flashLanded(target ?? "main");
   };
   const onDeleteDraft = async () => {
     const draftUrl = selected();
@@ -1703,65 +1744,74 @@ function DraftsSidebar(props) {
           onForkAt: () => void onForkSelection(true),
           get isMergeTarget() {
             return memo(() => !!mergeHighlight())() && mergeParentUrl() === list().main.url;
+          },
+          get justLanded() {
+            return landed() === "main";
           }
         }), null);
         insert(_el$2, createComponent(For, {
           get each() {
-            return list().drafts;
+            return draftUrls();
           },
-          children: (summary) => createComponent(DraftCard, {
-            get url() {
-              return summary.url;
-            },
-            get members() {
-              return summary.members;
-            },
-            get changeGroupDocUrl() {
-              return summary.changeGroupDocUrl;
-            },
-            get mainDocUrl() {
-              return hostDocHandle()?.url;
-            },
-            get isSelected() {
-              return selected() === summary.url;
-            },
-            get name() {
-              return summary.name;
-            },
-            get depth() {
-              return draftDepth(summary);
-            },
-            onRename: (name) => void onRename(summary.url, name),
-            onSelect: selectDraft,
-            onScrub: (scrub) => onScrub(summary.url, summary.members, scrub),
-            scrubber: () => selected() === summary.url ? scrubber() : null,
-            onBaselineScrub: (base) => onBaselineScrub(summary.url, summary.members, base),
-            baseliner: () => selected() === summary.url ? baseliner() : null,
-            checkpoint: () => selected() === summary.url ? checkedOut()?.at ?? null : null,
-            get hasCheckpoint() {
-              return memo(() => selected() === summary.url)() && isPinned();
-            },
-            onReturnToLatest: clearCheckpoint,
-            get eyeOpen() {
-              return memo(() => selected() === summary.url)() && eyeOpen();
-            },
-            eyeDisabled: false,
-            onToggleEye: toggleEye,
-            onFork: () => void onForkSelection(false),
-            get forkAtLabel() {
-              return forkAtLabel();
-            },
-            onForkAt: () => void onForkSelection(true),
-            get mergeLabel() {
-              return `Merge into "${mergeTargetName()}"`;
-            },
-            onMerge: () => void onMergeDraft(),
-            onMergeHover: setMergeHighlight,
-            onDelete: () => void onDeleteDraft(),
-            get isMergeTarget() {
-              return memo(() => !!mergeHighlight())() && mergeParentUrl() === summary.url;
-            }
-          })
+          children: (url) => {
+            const summary = summaryFor(url);
+            return createComponent(DraftCard, {
+              get url() {
+                return summary().url;
+              },
+              get members() {
+                return summary().members;
+              },
+              get changeGroupDocUrl() {
+                return summary().changeGroupDocUrl;
+              },
+              get mainDocUrl() {
+                return hostDocHandle()?.url;
+              },
+              get isSelected() {
+                return selected() === summary().url;
+              },
+              get name() {
+                return summary().name;
+              },
+              get depth() {
+                return draftDepth(summary());
+              },
+              onRename: (name) => void onRename(summary().url, name),
+              onSelect: selectDraft,
+              onScrub: (scrub) => onScrub(summary().url, summary().members, scrub),
+              scrubber: () => selected() === summary().url ? scrubber() : null,
+              onBaselineScrub: (base) => onBaselineScrub(summary().url, summary().members, base),
+              baseliner: () => selected() === summary().url ? baseliner() : null,
+              checkpoint: () => selected() === summary().url ? checkedOut()?.at ?? null : null,
+              get hasCheckpoint() {
+                return memo(() => selected() === summary().url)() && isPinned();
+              },
+              onReturnToLatest: clearCheckpoint,
+              get eyeOpen() {
+                return memo(() => selected() === summary().url)() && eyeOpen();
+              },
+              eyeDisabled: false,
+              onToggleEye: toggleEye,
+              onFork: () => void onForkSelection(false),
+              get forkAtLabel() {
+                return forkAtLabel();
+              },
+              onForkAt: () => void onForkSelection(true),
+              get mergeLabel() {
+                return `Merge into "${mergeTargetName()}"`;
+              },
+              onMerge: () => void onMergeDraft(),
+              onMergeHover: setMergeHighlight,
+              onDelete: () => void onDeleteDraft(),
+              get isMergeTarget() {
+                return memo(() => !!mergeHighlight())() && mergeParentUrl() === summary().url;
+              },
+              get justLanded() {
+                return landed() === summary().url;
+              }
+            });
+          }
         }), null);
         return _el$2;
       }
@@ -2080,15 +2130,17 @@ function MainCard(props) {
       }
     }), null);
     effect((_p$) => {
-      var _v$ = props.isSelected ? "" : void 0, _v$2 = menuOpen() ? "" : void 0, _v$3 = props.isMergeTarget ? "" : void 0;
+      var _v$ = props.isSelected ? "" : void 0, _v$2 = menuOpen() ? "" : void 0, _v$3 = props.isMergeTarget ? "" : void 0, _v$4 = props.justLanded ? "" : void 0;
       _v$ !== _p$.e && setAttribute(_el$5, "data-selected", _p$.e = _v$);
       _v$2 !== _p$.t && setAttribute(_el$5, "data-menu-open", _p$.t = _v$2);
       _v$3 !== _p$.a && setAttribute(_el$5, "data-merge-target", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$5, "data-landed", _p$.o = _v$4);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
+      a: void 0,
+      o: void 0
     });
     return _el$5;
   })();
@@ -2198,17 +2250,19 @@ function DraftCard(props) {
       }
     }), null);
     effect((_p$) => {
-      var _v$4 = props.isSelected ? "" : void 0, _v$5 = menuOpen() ? "" : void 0, _v$6 = props.isMergeTarget ? "" : void 0, _v$7 = `${Math.min(props.depth + 1, 5)}rem`;
-      _v$4 !== _p$.e && setAttribute(_el$0, "data-selected", _p$.e = _v$4);
-      _v$5 !== _p$.t && setAttribute(_el$0, "data-menu-open", _p$.t = _v$5);
-      _v$6 !== _p$.a && setAttribute(_el$0, "data-merge-target", _p$.a = _v$6);
-      _v$7 !== _p$.o && setStyleProperty(_el$0, "margin-left", _p$.o = _v$7);
+      var _v$5 = props.isSelected ? "" : void 0, _v$6 = menuOpen() ? "" : void 0, _v$7 = props.isMergeTarget ? "" : void 0, _v$8 = props.justLanded ? "" : void 0, _v$9 = `${Math.min(props.depth + 1, 5)}rem`;
+      _v$5 !== _p$.e && setAttribute(_el$0, "data-selected", _p$.e = _v$5);
+      _v$6 !== _p$.t && setAttribute(_el$0, "data-menu-open", _p$.t = _v$6);
+      _v$7 !== _p$.a && setAttribute(_el$0, "data-merge-target", _p$.a = _v$7);
+      _v$8 !== _p$.o && setAttribute(_el$0, "data-landed", _p$.o = _v$8);
+      _v$9 !== _p$.i && setStyleProperty(_el$0, "margin-left", _p$.i = _v$9);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0
+      o: void 0,
+      i: void 0
     });
     return _el$0;
   })();
@@ -2295,9 +2349,9 @@ function CardMenu(props) {
             })()]
           }), null);
           effect((_p$) => {
-            var _v$8 = props.forkDisabled, _v$9 = props.forkDisabled ? "Drafts aren't supported for folders yet" : "Fork a new draft from the latest version";
-            _v$8 !== _p$.e && (_el$17.disabled = _p$.e = _v$8);
-            _v$9 !== _p$.t && setAttribute(_el$17, "title", _p$.t = _v$9);
+            var _v$0 = props.forkDisabled, _v$1 = props.forkDisabled ? "Drafts aren't supported for folders yet" : "Fork a new draft from the latest version";
+            _v$0 !== _p$.e && (_el$17.disabled = _p$.e = _v$0);
+            _v$1 !== _p$.t && setAttribute(_el$17, "title", _p$.t = _v$1);
             return _p$;
           }, {
             e: void 0,
@@ -2392,11 +2446,11 @@ function EyeToggle(props) {
       }
     }));
     effect((_p$) => {
-      var _v$0 = props.open ? "" : void 0, _v$1 = props.disabled ? "" : void 0, _v$10 = props.disabled, _v$11 = props.disabled ? "Nothing to compare yet — select a version in the timeline first" : props.open ? "Hide changes" : "Show what changed";
-      _v$0 !== _p$.e && setAttribute(_el$32, "data-active", _p$.e = _v$0);
-      _v$1 !== _p$.t && setAttribute(_el$32, "data-disabled", _p$.t = _v$1);
-      _v$10 !== _p$.a && setAttribute(_el$32, "aria-disabled", _p$.a = _v$10);
-      _v$11 !== _p$.o && setAttribute(_el$32, "title", _p$.o = _v$11);
+      var _v$10 = props.open ? "" : void 0, _v$11 = props.disabled ? "" : void 0, _v$12 = props.disabled, _v$13 = props.disabled ? "Nothing to compare yet — select a version in the timeline first" : props.open ? "Hide changes" : "Show what changed";
+      _v$10 !== _p$.e && setAttribute(_el$32, "data-active", _p$.e = _v$10);
+      _v$11 !== _p$.t && setAttribute(_el$32, "data-disabled", _p$.t = _v$11);
+      _v$12 !== _p$.a && setAttribute(_el$32, "aria-disabled", _p$.a = _v$12);
+      _v$13 !== _p$.o && setAttribute(_el$32, "title", _p$.o = _v$13);
       return _p$;
     }, {
       e: void 0,
@@ -2867,9 +2921,9 @@ function DraftChangesList(props) {
             return [(() => {
               var _el$44 = _tmpl$25();
               effect((_p$) => {
-                var _v$12 = `${Math.min(tokenGeometry()?.top ?? 0, baselineGeometry().top)}px`, _v$13 = `${Math.abs((tokenGeometry()?.top ?? 0) - baselineGeometry().top)}px`;
-                _v$12 !== _p$.e && setStyleProperty(_el$44, "top", _p$.e = _v$12);
-                _v$13 !== _p$.t && setStyleProperty(_el$44, "height", _p$.t = _v$13);
+                var _v$14 = `${Math.min(tokenGeometry()?.top ?? 0, baselineGeometry().top)}px`, _v$15 = `${Math.abs((tokenGeometry()?.top ?? 0) - baselineGeometry().top)}px`;
+                _v$14 !== _p$.e && setStyleProperty(_el$44, "top", _p$.e = _v$14);
+                _v$15 !== _p$.t && setStyleProperty(_el$44, "height", _p$.t = _v$15);
                 return _p$;
               }, {
                 e: void 0,
@@ -2942,11 +2996,11 @@ function AuthorAvatars(props) {
           }
         }));
         effect((_p$) => {
-          var _v$14 = author.contactUrl ? void 0 : author.key, _v$15 = author.contactUrl ? void 0 : authorColor(author.key), _v$16 = i() === 0 ? "0" : "-4px", _v$17 = String(visible().length - i());
-          _v$14 !== _p$.e && setAttribute(_el$60, "title", _p$.e = _v$14);
-          _v$15 !== _p$.t && setStyleProperty(_el$60, "background", _p$.t = _v$15);
-          _v$16 !== _p$.a && setStyleProperty(_el$60, "margin-left", _p$.a = _v$16);
-          _v$17 !== _p$.o && setStyleProperty(_el$60, "z-index", _p$.o = _v$17);
+          var _v$16 = author.contactUrl ? void 0 : author.key, _v$17 = author.contactUrl ? void 0 : authorColor(author.key), _v$18 = i() === 0 ? "0" : "-4px", _v$19 = String(visible().length - i());
+          _v$16 !== _p$.e && setAttribute(_el$60, "title", _p$.e = _v$16);
+          _v$17 !== _p$.t && setStyleProperty(_el$60, "background", _p$.t = _v$17);
+          _v$18 !== _p$.a && setStyleProperty(_el$60, "margin-left", _p$.a = _v$18);
+          _v$19 !== _p$.o && setStyleProperty(_el$60, "z-index", _p$.o = _v$19);
           return _p$;
         }, {
           e: void 0,
@@ -3120,4 +3174,4 @@ const renderDraftsSidebar = (_handle, element) => {
 export {
   renderDraftsSidebar
 };
-//# sourceMappingURL=main-CG9HOCai.js.map
+//# sourceMappingURL=main-wz7oton3.js.map