@1agh/maude 1.4.4 → 1.4.6

package/apps/studio/comments-overlay.tsx

@@ -33,9 +33,13 @@
  * trade-off), which can silently reanchor a comment to the wrong element or to
  * nothing. `resolveCommentTarget` tries the stored selector first, falls back
  * to a structural match via `resolveByDomPath` (dom-selection.ts) when the
- * direct hit is missing or looks like the wrong element (tag mismatch), and —
- * per DDR-034's deferred future-work item — `CommentPin` auto-deletes a
- * comment whose target stays unresolvable past a short grace window.
+ * direct hit is missing or looks like the wrong element (tag mismatch). A
+ * comment whose target stays unresolvable past a short grace window is
+ * DETACHED — kept, shown at its last known place, and marked — never deleted:
+ * software deleting a comment is how #134/#136 lost every comment placed on a
+ * sticky or on empty canvas, and how one peer's missing element deleted a
+ * comment for everyone. Only a person deletes a comment. Comments on
+ * annotations and on empty canvas anchor through `comment-anchor.ts`.
  *
  * Popup placement — `CommentComposer` / `CommentThread` pick a side
  * (left/right, above/below the anchor) that actually fits the viewport via
@@ -49,6 +53,13 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import {
+  annotationElement,
+  isAnnotationId,
+  isWorldPoint,
+  type WorldPoint,
+  worldToClient,
+} from './comment-anchor.ts';
 import { resolveByDomPath } from './dom-selection.ts';
 import { isReadOnlyCanvas } from './read-only-mode.ts';
 import { useCollab } from './use-collab.tsx';
@@ -84,6 +95,10 @@ interface ComposeSelection {
   dom_path: string[];
   bounds: OverlayBounds | null;
   html: string;
+  /** Set when the click landed on an annotation (comment-anchor.ts). */
+  annotationId?: string;
+  /** World point of the click, when the canvas has a world plane. */
+  world?: WorldPoint;
 }
 
 interface ComposerState {
@@ -121,6 +136,11 @@ export interface OverlayComment {
   tag?: string;
   classes?: string;
   dom_path?: string[];
+  /** Anchor on an annotation (sticky, shape, stroke…) — see comment-anchor.ts. */
+  annotationId?: string;
+  /** World point of the comment — the anchor of a floating comment, and the
+   * last known place of an anchored one whose target is gone. */
+  world?: WorldPoint;
   // html_excerpt unused at overlay layer; kept off the type to keep the
   // surface tight.
 }
@@ -176,6 +196,7 @@ export interface TargetRef {
   tag?: string;
   classes?: string;
   dom_path?: string[];
+  annotationId?: string;
 }
 
 /**
@@ -187,6 +208,9 @@ export interface TargetRef {
  * match via `resolveByDomPath`.
  */
 export function resolveCommentTarget(target: TargetRef): HTMLElement | null {
+  if (isAnnotationId(target.annotationId)) {
+    return annotationElement(target.annotationId) as HTMLElement | null;
+  }
   if (!target.selector) return null;
   let el: HTMLElement | null = null;
   try {
@@ -426,6 +450,8 @@ export function CommentsOverlay(): React.ReactNode {
         classes: sel.classes,
         bounds: sel.bounds,
         html_excerpt: sel.html,
+        ...(sel.annotationId ? { annotationId: sel.annotationId } : {}),
+        ...(sel.world ? { world: sel.world } : {}),
         text,
       };
       if (typeof window === 'undefined') return;
@@ -547,7 +573,6 @@ export function CommentsOverlay(): React.ReactNode {
             sequence={n}
             focused={focusedId === c.id}
             onClick={handlePinClick}
-            onOrphaned={handleDelete}
           />
         );
       })}
@@ -836,28 +861,54 @@ function MentionAwareTextarea({
 // reflow, font load). Falls back to the stored `bounds` when the target is
 // gone from the DOM.
 
-// How long a pin is allowed to stay unresolvable (no live target AND no
-// structural-fallback match) before its comment is presumed orphaned and
-// auto-deleted. Long enough to ride out a canvas HMR remount; short enough
-// that a genuinely deleted element's comment doesn't linger.
-const ORPHAN_GRACE_MS = 3000;
+// How long a pin may stay unresolvable before it is shown as DETACHED. Long
+// enough to ride out a canvas HMR remount. Detached is a view of this client's
+// DOM, never a fact written back: another peer may still resolve the target.
+const DETACH_GRACE_MS = 3000;
+
+/** The pin box for a client point — the pin centres on the point. */
+function pointBox(p: { x: number; y: number }): OverlayBounds {
+  return { x: p.x - 12, y: p.y - 12, w: 24, h: 24 };
+}
+
+/**
+ * Where a comment's pin goes this frame, and whether its target is missing.
+ *
+ *   - anchored (element selector or annotation id) and resolved → on the target;
+ *   - anchored but unresolved → last known place (world point, else the
+ *     create-time screen bounds), `missing: true`;
+ *   - floating (no anchor) → its world point, else legacy screen bounds.
+ */
+export function locateComment(comment: OverlayComment): {
+  pos: OverlayBounds | null;
+  missing: boolean;
+} {
+  const anchored = !!comment.selector || isAnnotationId(comment.annotationId);
+  if (anchored) {
+    const live = screenRectFor(comment);
+    if (live) return { pos: live, missing: false };
+  }
+  const at = isWorldPoint(comment.world) ? worldToClient(comment.world) : null;
+  const pos = at ? pointBox(at) : (comment.bounds ?? null);
+  return { pos, missing: anchored };
+}
 
 function CommentPin({
   comment,
   sequence,
   focused,
   onClick,
-  onOrphaned,
 }: {
   comment: OverlayComment;
   sequence: number;
   focused: boolean;
   onClick: (id: string) => void;
-  onOrphaned: (id: string) => void;
 }) {
   const ref = useRef<HTMLButtonElement | null>(null);
   const rafRef = useRef<number | null>(null);
-  const unresolvedSinceRef = useRef<number | null>(null);
+  const missingSinceRef = useRef<number | null>(null);
+  const [detached, setDetached] = useState(false);
+  const detachedRef = useRef(false);
 
   useEffect(() => {
     const tick = () => {
@@ -865,27 +916,18 @@ function CommentPin({
       const pin = ref.current;
       if (!pin) return;
 
-      // Live screen-coord lookup mirrors SelectionHalos in canvas-shell.tsx
-      // (resolveCommentTarget tries the stored selector, then a structural
-      // fallback). Falls back to stored bounds (a screen-coord capture at
-      // create time) when neither resolves — better than vanishing entirely.
-      let pos = screenRectFor(comment);
-      if (pos) {
-        unresolvedSinceRef.current = null;
+      // Live screen-coord lookup mirrors SelectionHalos in canvas-shell.tsx.
+      const { pos, missing } = locateComment(comment);
+      let nowDetached = false;
+      if (missing) {
+        if (missingSinceRef.current == null) missingSinceRef.current = Date.now();
+        nowDetached = Date.now() - missingSinceRef.current > DETACH_GRACE_MS;
       } else {
-        if (unresolvedSinceRef.current == null) {
-          unresolvedSinceRef.current = Date.now();
-        } else if (Date.now() - unresolvedSinceRef.current > ORPHAN_GRACE_MS) {
-          onOrphaned(comment.id);
-        }
-        if (comment.bounds) {
-          pos = {
-            x: comment.bounds.x,
-            y: comment.bounds.y,
-            w: comment.bounds.w,
-            h: comment.bounds.h,
-          };
-        }
+        missingSinceRef.current = null;
+      }
+      if (nowDetached !== detachedRef.current) {
+        detachedRef.current = nowDetached;
+        setDetached(nowDetached);
       }
       if (!pos) {
         pin.style.display = 'none';
@@ -905,10 +947,10 @@ function CommentPin({
     return () => {
       if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
     };
-  }, [comment, onOrphaned]);
+  }, [comment]);
 
   const author = comment.author?.trim() || 'unknown';
-  const label = `Comment ${sequence} by ${author}`;
+  const label = `Comment ${sequence} by ${author}${detached ? ' (detached: its target is gone)' : ''}`;
 
   return (
     <button
@@ -917,6 +959,7 @@ function CommentPin({
       className="cm-pin"
       data-resolved={comment.status === 'resolved' ? 'true' : 'false'}
       data-focused={focused ? 'true' : 'false'}
+      data-detached={detached ? 'true' : 'false'}
       data-comment-pin={comment.id}
       aria-label={label}
       aria-expanded={focused}
@@ -1002,7 +1045,7 @@ function CommentComposer({
   // tight inside the 300px card.
   const selectorChip = useMemo(() => {
     const s = state.selection.selector || '';
-    if (!s) return state.selection.tag || 'canvas';
+    if (!s) return state.selection.tag || (state.selection.annotationId ? 'annotation' : 'canvas');
     // [data-cd-id="…"] → cd:<id> · keeps the chip readable when stable ids
     // are present.
     const cd = s.match(/data-cd-id="([^"]+)"/);

package/apps/studio/context.ts

@@ -274,6 +274,7 @@ export interface Context {
           | { op: 'dir.move'; from: string; to: string }
       ): Promise<{ status: 'accepted' | 'rejected'; code?: string; queued?: boolean }> | null;
       acceptedMode?(): boolean;
+      commentsConfirmedOnHub?(slug: string): boolean;
       acceptedHistory?(q: {
         limit?: number;
         before?: number | null;

package/apps/studio/cursors-overlay.tsx

@@ -111,6 +111,9 @@ function ensureCursorStyles(): void {
   document.head.appendChild(s);
 }
 
+/** How often a peer halo re-measures when nothing it can observe changed. */
+const HALO_REFRESH_MS = 500;
+
 interface ViewportSnapshot {
   x: number;
   y: number;
@@ -122,39 +125,75 @@ interface CursorProps {
   viewport: ViewportSnapshot;
 }
 
-const Cursor = memo(function Cursor({ peer, viewport }: CursorProps): JSX.Element | null {
-  if (!peer.cursor) return null;
-  // world → screen: screen = world * zoom + viewport.{x,y}
-  const screenX = peer.cursor.x * viewport.zoom + viewport.x;
-  const screenY = peer.cursor.y * viewport.zoom + viewport.y;
-  const editing = !!peer.editing;
+// Issue #131 — awareness hands out a FRESH peer object on every change (every
+// 30 Hz cursor publish of every peer), so the default shallow `memo` never
+// held: each cursor move re-rendered every halo, and the halos measure the DOM
+// in render. Each component compares only what it draws.
+const sameViewport = (a: ViewportSnapshot, b: ViewportSnapshot): boolean =>
+  a === b || (a.x === b.x && a.y === b.y && a.zoom === b.zoom);
+const sameLabel = (a: ForeignAwareness, b: ForeignAwareness): boolean =>
+  a.clientID === b.clientID && a.name === b.name && a.color === b.color;
+function sameSelection(a: ForeignAwareness['selection'], b: ForeignAwareness['selection']) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const ab = a.bounds;
+  const bb = b.bounds;
   return (
-    <div
-      className={`dc-cursor${editing ? ' dc-cursor--editing' : ''}`}
-      style={{ transform: `translate(${screenX}px, ${screenY}px)` }}
-    >
-      {/* DS colors-presence Pointer — one plain triangle glyph, tinted by its
-          owner (the specimen's exact 24-grid path, no tail/notch). */}
-      <svg
-        className="dc-cursor-arrow"
-        width="15"
-        height="15"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
+    a.cssPath === b.cssPath &&
+    (ab === bb ||
+      (!!ab && !!bb && ab.x === bb.x && ab.y === bb.y && ab.w === bb.w && ab.h === bb.h))
+  );
+}
+function sameIds(a: readonly string[] | undefined, b: readonly string[] | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  return a.every((id, i) => id === b[i]);
+}
+
+const Cursor = memo(
+  function Cursor({ peer, viewport }: CursorProps): JSX.Element | null {
+    if (!peer.cursor) return null;
+    // world → screen: screen = world * zoom + viewport.{x,y}
+    const screenX = peer.cursor.x * viewport.zoom + viewport.x;
+    const screenY = peer.cursor.y * viewport.zoom + viewport.y;
+    const editing = !!peer.editing;
+    return (
+      <div
+        className={`dc-cursor${editing ? ' dc-cursor--editing' : ''}`}
+        style={{ transform: `translate(${screenX}px, ${screenY}px)` }}
       >
-        <path d="M4 3 L20 11.5 L12.5 13 L10 21 Z" fill={peer.color} />
-      </svg>
-      <div className="dc-cursor-label" style={{ background: peer.color }}>
-        {peer.name}
-        {editing && (
-          <span className="dc-cursor-edit-mark" aria-hidden="true">
-            ✎
-          </span>
-        )}
+        {/* DS colors-presence Pointer — one plain triangle glyph, tinted by its
+          owner (the specimen's exact 24-grid path, no tail/notch). */}
+        <svg
+          className="dc-cursor-arrow"
+          width="15"
+          height="15"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path d="M4 3 L20 11.5 L12.5 13 L10 21 Z" fill={peer.color} />
+        </svg>
+        <div className="dc-cursor-label" style={{ background: peer.color }}>
+          {peer.name}
+          {editing && (
+            <span className="dc-cursor-edit-mark" aria-hidden="true">
+              ✎
+            </span>
+          )}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+  (a, b) =>
+    sameViewport(a.viewport, b.viewport) &&
+    sameLabel(a.peer, b.peer) &&
+    !!a.peer.editing === !!b.peer.editing &&
+    (a.peer.cursor === b.peer.cursor ||
+      (!!a.peer.cursor &&
+        !!b.peer.cursor &&
+        a.peer.cursor.x === b.peer.cursor.x &&
+        a.peer.cursor.y === b.peer.cursor.y))
+);
 
 /**
  * Foreign-selection halos for stamped annotation strokes. Each peer publishes
@@ -173,50 +212,62 @@ interface PeerAnnotationSelectionProps {
    * screen space while the stroke it outlines moves away underneath it.
    */
   viewport: ViewportSnapshot;
+  /**
+   * Bumps when what the halo outlines may have moved WITHOUT the camera or the
+   * peer's selection changing — an annotation edit, a canvas re-render. It used
+   * to be implicit: the halo re-measured on every awareness change (30 Hz per
+   * moving peer), which was the #131 cost. Now it is this, and nothing else.
+   */
+  tick?: number;
 }
 
-export const PeerAnnotationSelection = memo(function PeerAnnotationSelection({
-  peer,
-}: PeerAnnotationSelectionProps): JSX.Element | null {
-  if (!peer.annotationSelection || peer.annotationSelection.length === 0) return null;
-  if (typeof document === 'undefined') return null;
-  const rects: { id: string; x: number; y: number; w: number; h: number }[] = [];
-  for (const id of peer.annotationSelection) {
-    try {
-      const el = document.querySelector(`[data-id="${CSS.escape(id)}"]`);
-      if (!el) continue;
-      const r = (el as Element).getBoundingClientRect();
-      if (r.width <= 0 || r.height <= 0) continue;
-      // Pad by 3px so the halo sits OUTSIDE the stroke instead of clipping it.
-      rects.push({ id, x: r.left - 3, y: r.top - 3, w: r.width + 6, h: r.height + 6 });
-    } catch {
-      /* invalid id token — skip */
+export const PeerAnnotationSelection = memo(
+  function PeerAnnotationSelection({ peer }: PeerAnnotationSelectionProps): JSX.Element | null {
+    if (!peer.annotationSelection || peer.annotationSelection.length === 0) return null;
+    if (typeof document === 'undefined') return null;
+    const rects: { id: string; x: number; y: number; w: number; h: number }[] = [];
+    for (const id of peer.annotationSelection) {
+      try {
+        const el = document.querySelector(`[data-id="${CSS.escape(id)}"]`);
+        if (!el) continue;
+        const r = (el as Element).getBoundingClientRect();
+        if (r.width <= 0 || r.height <= 0) continue;
+        // Pad by 3px so the halo sits OUTSIDE the stroke instead of clipping it.
+        rects.push({ id, x: r.left - 3, y: r.top - 3, w: r.width + 6, h: r.height + 6 });
+      } catch {
+        /* invalid id token — skip */
+      }
     }
-  }
-  if (rects.length === 0) return null;
-  return (
-    <>
-      {rects.map((r, i) => (
-        <div
-          key={r.id}
-          className="dc-peer-selection"
-          style={{
-            transform: `translate(${r.x}px, ${r.y}px)`,
-            width: r.w,
-            height: r.h,
-            borderColor: peer.color,
-          }}
-        >
-          {i === 0 && (
-            <div className="dc-peer-selection__label" style={{ background: peer.color }}>
-              {peer.name}
-            </div>
-          )}
-        </div>
-      ))}
-    </>
-  );
-});
+    if (rects.length === 0) return null;
+    return (
+      <>
+        {rects.map((r, i) => (
+          <div
+            key={r.id}
+            className="dc-peer-selection"
+            style={{
+              transform: `translate(${r.x}px, ${r.y}px)`,
+              width: r.w,
+              height: r.h,
+              borderColor: peer.color,
+            }}
+          >
+            {i === 0 && (
+              <div className="dc-peer-selection__label" style={{ background: peer.color }}>
+                {peer.name}
+              </div>
+            )}
+          </div>
+        ))}
+      </>
+    );
+  },
+  (a, b) =>
+    sameViewport(a.viewport, b.viewport) &&
+    a.tick === b.tick &&
+    sameLabel(a.peer, b.peer) &&
+    sameIds(a.peer.annotationSelection, b.peer.annotationSelection)
+);
 
 /**
  * Foreign-selection halo for canvas-shell elements (cdId-based selSet).
@@ -229,46 +280,53 @@ interface PeerSelectionProps {
   peer: ForeignAwareness;
   /** See PeerAnnotationSelectionProps.viewport — the memo-invalidation tick. */
   viewport: ViewportSnapshot;
+  /** See PeerAnnotationSelectionProps.tick. */
+  tick?: number;
 }
 
-export const PeerSelection = memo(function PeerSelection({
-  peer,
-}: PeerSelectionProps): JSX.Element | null {
-  if (!peer.selection) return null;
-  const { cssPath, bounds } = peer.selection;
+export const PeerSelection = memo(
+  function PeerSelection({ peer }: PeerSelectionProps): JSX.Element | null {
+    if (!peer.selection) return null;
+    const { cssPath, bounds } = peer.selection;
 
-  let rect: { x: number; y: number; w: number; h: number } | null = bounds ?? null;
-  if (cssPath && typeof document !== 'undefined') {
-    try {
-      const el = document.querySelector(cssPath);
-      if (el && el instanceof Element) {
-        const r = el.getBoundingClientRect();
-        if (r.width > 0 && r.height > 0) {
-          rect = { x: r.left, y: r.top, w: r.width, h: r.height };
+    let rect: { x: number; y: number; w: number; h: number } | null = bounds ?? null;
+    if (cssPath && typeof document !== 'undefined') {
+      try {
+        const el = document.querySelector(cssPath);
+        if (el && el instanceof Element) {
+          const r = el.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            rect = { x: r.left, y: r.top, w: r.width, h: r.height };
+          }
         }
+      } catch {
+        /* invalid selector — fall through to published bounds */
       }
-    } catch {
-      /* invalid selector — fall through to published bounds */
     }
-  }
-  if (!rect) return null;
+    if (!rect) return null;
 
-  return (
-    <div
-      className="dc-peer-selection"
-      style={{
-        transform: `translate(${rect.x}px, ${rect.y}px)`,
-        width: rect.w,
-        height: rect.h,
-        borderColor: peer.color,
-      }}
-    >
-      <div className="dc-peer-selection__label" style={{ background: peer.color }}>
-        {peer.name}
+    return (
+      <div
+        className="dc-peer-selection"
+        style={{
+          transform: `translate(${rect.x}px, ${rect.y}px)`,
+          width: rect.w,
+          height: rect.h,
+          borderColor: peer.color,
+        }}
+      >
+        <div className="dc-peer-selection__label" style={{ background: peer.color }}>
+          {peer.name}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+  (a, b) =>
+    sameViewport(a.viewport, b.viewport) &&
+    a.tick === b.tick &&
+    sameLabel(a.peer, b.peer) &&
+    sameSelection(a.peer.selection, b.peer.selection)
+);
 
 /**
  * Subscribes to foreign awareness + the local viewport. Renders one Cursor per
@@ -294,11 +352,11 @@ export function CursorsOverlay(): JSX.Element {
   // sibling CursorsOverlay wouldn't re-render, so the annotation halo would
   // sit on the OLD bounds until awareness independently changed.
   const collab = useCollab();
-  const [, bumpAnnotTick] = useState(0);
+  const [tick, bumpTick] = useState(0);
   useEffect(() => {
     if (!collab) return;
     const map = collab.doc.getMap('annotations');
-    const onChange = () => bumpAnnotTick((n) => n + 1);
+    const onChange = () => bumpTick((n) => n + 1);
     map.observe(onChange);
     return () => {
       try {
@@ -308,13 +366,29 @@ export function CursorsOverlay(): JSX.Element {
       }
     };
   }, [collab]);
+  // A peer's selected element can change size or move with no camera or
+  // selection change (they edit its text; the canvas re-renders). The halos
+  // used to catch that for free by re-measuring on every awareness change —
+  // up to 30× a second per moving peer (#131). A slow refresh while somebody
+  // has something selected keeps the halo honest for a tiny fraction of that.
+  const anySelection = peers.some((p) => !!p.selection || (p.annotationSelection?.length ?? 0) > 0);
+  useEffect(() => {
+    if (!anySelection) return;
+    const id = setInterval(() => bumpTick((n) => n + 1), HALO_REFRESH_MS);
+    return () => clearInterval(id);
+  }, [anySelection]);
   return (
     <div className="dc-cursor-overlay" aria-hidden="true">
       {peers.map((peer) => (
-        <PeerSelection key={`sel-${peer.clientID}`} peer={peer} viewport={vp} />
+        <PeerSelection key={`sel-${peer.clientID}`} peer={peer} viewport={vp} tick={tick} />
       ))}
       {peers.map((peer) => (
-        <PeerAnnotationSelection key={`asel-${peer.clientID}`} peer={peer} viewport={vp} />
+        <PeerAnnotationSelection
+          key={`asel-${peer.clientID}`}
+          peer={peer}
+          viewport={vp}
+          tick={tick}
+        />
       ))}
       {peers.map((peer) => (
         <Cursor key={peer.clientID} peer={peer} viewport={vp} />