@1agh/maude 1.4.4 → 1.4.6

package/apps/studio/annotations-model.ts

@@ -654,6 +654,37 @@ export function rid(): string {
   return `s_${Math.random().toString(36).slice(2, 10)}`;
 }
 
+/**
+ * The id of an annotation element that was written WITHOUT a `data-id` (a
+ * hand-edited or externally generated SVG). It used to be `rid()` — a new
+ * random id on every parse — so the same element had a different id in every
+ * tab, on every peer and after every reload, and nothing could point at it: a
+ * comment anchored to it (#134/#136), a peer's selection halo, an agent's
+ * `annotate update`. Now it is derived from the element's own markup, plus its
+ * occurrence among identical elements, so every parse of the same SVG gives
+ * every element the same id everywhere. The first edit writes it back as a real
+ * `data-id` (strokesToSvg always emits one), after which it never changes.
+ *
+ * Contract for the annotations-v2 element model
+ * (.ai/plans/feature-annotations-v2-element-model.md): an annotation's id is
+ * stable for the life of the element — across edits, moves, undo/redo, sync
+ * and reload — and is what external references (comments' `annotationId`)
+ * hold. A migration must carry ids over unchanged.
+ */
+export function stableAnnotationId(el: Element, seen: Map<string, number>): string {
+  const content = el.outerHTML;
+  const n = seen.get(content) ?? 0;
+  seen.set(content, n + 1);
+  // FNV-1a, 32-bit — deterministic, dependency-free, plenty for a per-board id.
+  let h = 0x811c9dc5;
+  const key = `${content}#${n}`;
+  for (let i = 0; i < key.length; i++) {
+    h ^= key.charCodeAt(i);
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return `s_h${h.toString(36)}`;
+}
+
 /** FigJam v3 — group ids mirror the stroke id scheme (`g_` prefix). */
 export function gid(): string {
   return `g_${Math.random().toString(36).slice(2, 10)}`;
@@ -1424,9 +1455,10 @@ export function svgToStrokes(svgText: string): Stroke[] {
     const doc = new DOMParser().parseFromString(text, 'image/svg+xml');
     if (doc.querySelector('parsererror')) return [];
     const out: Stroke[] = [];
+    const seenContent = new Map<string, number>();
     for (const el of Array.from(doc.querySelectorAll('[data-tool]'))) {
       const tool = el.getAttribute('data-tool');
-      const id = el.getAttribute('data-id') || rid();
+      const id = el.getAttribute('data-id') || stableAnnotationId(el, seenContent);
       const color = el.getAttribute('stroke') || el.getAttribute('fill') || DEFAULT_COLOR;
       const width = Number.parseFloat(el.getAttribute('stroke-width') || '2') || 2;
       // FigJam v3 — every branch funnels through push() so the shared attrs

package/apps/studio/api.ts

@@ -19,6 +19,7 @@ import { canvasArtifacts, locatorKeyFor, relocatedName } from './canvas-artifact
 import { renderBriefBoard, validateCanvasName, validateFolderName } from './canvas-create.ts';
 import { rewriteRelativeImports } from './canvas-imports.ts';
 import { canvasSlugFromRel } from './canvas-slug.ts';
+import { isAnnotationId, isWorldPoint } from './comment-anchor.ts';
 import { atomicWrite } from './sync/atomic-write.ts';
 import { dedupeCommentsById } from './sync/comment-identity.ts';
 import { isRuntimeStateRel } from './sync/file-membership.ts';
@@ -323,6 +324,12 @@ export interface Comment {
    *  text is untrusted user/peer text (DDR-054) — rendered as text, never
    *  into TSX. */
   timeline?: { clipStableId?: string; frameOffset?: number; frame?: number; lane?: string };
+  /** #134/#136 — anchor on an annotation (`data-id` in `*.annotations.svg`).
+   *  Absent on element and floating comments. See comment-anchor.ts. */
+  annotationId?: string;
+  /** World point of the comment: the anchor of a floating comment, the last
+   *  known place of an anchored one. Absent on legacy comments. */
+  world?: { x: number; y: number };
 }
 
 export interface GitCommitter {
@@ -1247,6 +1254,11 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       thread: Array.isArray(c.thread) ? c.thread : [],
       mentions: Array.isArray(c.mentions) ? c.mentions : [],
       ...(timeline ? { timeline } : { timeline: undefined }),
+      // Same trust boundary for the #134/#136 anchors: a peer-synced comment
+      // never passed commentsAdd, so an anchor that fails its shape is dropped
+      // (the comment then renders from `bounds`, detached — never deleted).
+      annotationId: isAnnotationId(c.annotationId) ? c.annotationId : undefined,
+      world: isWorldPoint(c.world) ? { x: c.world.x, y: c.world.y } : undefined,
     };
   }
 
@@ -1462,6 +1474,9 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       }
       if (anchor.clipStableId != null || anchor.frame != null) c.timeline = anchor;
     }
+    // #134/#136 — annotation / world anchors (peer-supplied: shape-checked).
+    if (isAnnotationId(payload.annotationId)) c.annotationId = payload.annotationId;
+    if (isWorldPoint(payload.world)) c.world = { x: payload.world.x, y: payload.world.y };
     list.push(c);
     await publishComments(payload.file, list, base);
     return c;
@@ -4234,6 +4249,10 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       }
       const after = await Bun.file(abs).text();
       const seq = after !== before ? logUndo(abs, before, after) : undefined;
+      // This API write is complete: accepted sync need not wait for an
+      // external editor's quiet window. It is still only a proposal, not an
+      // acknowledgement; the normal hub validation/acceptance path owns that.
+      if (after !== before) ctx.bus.emit('source-written', { rel, content: after });
       return { ok: true, delta: res.delta, seq, ...previous };
     } catch (err) {
       ctx.bus.emit('activity:unsuppress', rel);

package/apps/studio/canvas-comment-mount.tsx

@@ -39,6 +39,7 @@ import {
 } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { annotationElement, annotationIdAt, clientToWorld } from './comment-anchor.ts';
 import { CommentsOverlay } from './comments-overlay.tsx';
 import { deriveFile, hoverTargetToSelection } from './dom-selection.ts';
 import {
@@ -394,6 +395,36 @@ function dropComment(
   file: string | undefined
 ): void {
   if (typeof document === 'undefined') return;
+  const world = clientToWorld(clientX, clientY) ?? undefined;
+
+  // A click on an annotation (sticky, shape, stroke, image, link, media card)
+  // anchors to it (#134/#136). Checked first: annotations draw above the
+  // artboards, so what the user clicked is the annotation, not the element
+  // underneath it.
+  const annotationId = annotationIdAt(clientX, clientY);
+  if (annotationId) {
+    const el = annotationElement(annotationId);
+    const r = el?.getBoundingClientRect();
+    const annotationSel: Selection = {
+      file,
+      id: undefined,
+      selector: '',
+      artboardId: null,
+      tag: el?.getAttribute('data-tool') ?? 'annotation',
+      classes: '',
+      text: '',
+      dom_path: [],
+      bounds: r
+        ? { x: r.left, y: r.top, w: r.width, h: r.height }
+        : { x: clientX - 12, y: clientY - 12, w: 24, h: 24 },
+      html: '',
+      annotationId,
+      ...(world ? { world } : {}),
+    };
+    openComposer(annotationSel, clientX, clientY);
+    return;
+  }
+
   let target = resolveHoverTarget(document, clientX, clientY, { deep: true });
   if (!target) target = resolveHoverTarget(document, clientX, clientY, { deep: false });
   // UI-canvas recovery — when both passes bail on a `pointer-events: none`
@@ -428,8 +459,9 @@ function dropComment(
 
   if (!target) {
     // Floating comment — no element anchor, just the click point (e.g. a click
-    // on empty canvas/specimen dead space). The overlay renders a pin at the
-    // stored bounds.
+    // on empty canvas/specimen dead space). The overlay renders the pin at the
+    // WORLD point, so it stays put through pan and zoom; `bounds` is the
+    // screen-space fallback for surfaces without a world plane (specimens).
     const floatingSel: Selection = {
       file,
       id: undefined,
@@ -441,6 +473,7 @@ function dropComment(
       dom_path: [],
       bounds: { x: clientX - 12, y: clientY - 12, w: 24, h: 24 },
       html: '',
+      ...(world ? { world } : {}),
     };
     openComposer(floatingSel, clientX, clientY);
     return;
@@ -636,7 +669,19 @@ function CanvasHmrRuntime({
     lastGood.current = canvasRef.current;
     // The new canvas rendered clean → drop any holding state.
     setHoldingState((h) => (h.on ? { on: false } : h));
-  }, []);
+    // A soft replacement keeps the iframe document, so inspect.ts does not
+    // repeat its initial loaded handshake. Re-announce only AFTER the new
+    // subtree commits: the shell then reselects the current element and reads
+    // fresh attributes/styles instead of retaining the pre-restore inspector.
+    // Failed renders keep the last good tree and must not claim a new load.
+    if (attempt > 0 && file) {
+      try {
+        window.parent.postMessage({ dgn: 'loaded', file }, '*');
+      } catch {
+        // The parent can detach while an imported canvas is committing.
+      }
+    }
+  }, [attempt, file]);
 
   const handleError = useCallback(() => {
     setHoldingState({ on: true, message: 'render error' });

package/apps/studio/canvas-lib.tsx

@@ -2869,11 +2869,16 @@ function buildCanvasRectsManifest(): CanvasRectsManifest {
 declare global {
   interface Window {
     __maudeCanvasRects?: () => CanvasRectsManifest;
+    /** The live camera, for layers built in another bundle (the comment
+     *  overlay mounts from canvas-comment-mount, which gets its own copy of
+     *  this module's state) — see comment-anchor.ts. */
+    __maudeViewport?: () => ViewportState | null;
   }
 }
 
 if (typeof window !== 'undefined') {
   window.__maudeCanvasRects = buildCanvasRectsManifest;
+  window.__maudeViewport = getLiveViewport;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/apps/studio/canvas-shell.tsx

@@ -1130,9 +1130,52 @@ interface DsThemeSupport {
 }
 
 let _dsThemeSupport: DsThemeSupport | null = null;
+// A NEGATIVE answer is cached too (#131). The probe below appends DOM to
+// <body> and reads getComputedStyle for every candidate, which forces a style
+// recalc of the whole document. Only a positive answer was cached, so on a
+// canvas whose DS has a single theme it re-ran on EVERY call — and the element
+// toolbar's menu asks on every render, i.e. every frame of a pan with something
+// selected. On a 160-board canvas in Safari that alone held pan at ~1.3 fps
+// (hundreds of ms per probe, two per frame). The reason a negative answer was
+// not cached — a DS stylesheet that parses after first paint — is honoured
+// precisely instead: the negative answer holds until a stylesheet is added to
+// or finishes loading in the document, then the next call probes again.
+let _dsThemeUnsupported = false;
+let _dsThemeWatch = false;
+const _unsupported: DsThemeSupport = { supported: false, wrapperClass: '' };
+
+function watchStylesheetsOnce(): void {
+  if (_dsThemeWatch || typeof document === 'undefined') return;
+  _dsThemeWatch = true;
+  const invalidate = (): void => {
+    _dsThemeUnsupported = false;
+  };
+  try {
+    new MutationObserver((records) => {
+      for (const r of records) {
+        for (const n of Array.from(r.addedNodes)) {
+          const tag = (n as Element).tagName;
+          if (tag === 'STYLE' || tag === 'LINK') return invalidate();
+        }
+      }
+    }).observe(document.head ?? document.documentElement, { childList: true, subtree: true });
+    // A <link> that was already in the DOM finishing its load (capture: load
+    // does not bubble).
+    document.addEventListener(
+      'load',
+      (e) => {
+        if ((e.target as Element | null)?.tagName === 'LINK') invalidate();
+      },
+      true
+    );
+  } catch {
+    _dsThemeWatch = false;
+  }
+}
 
-function detectDsThemeSupport(): DsThemeSupport {
+export function detectDsThemeSupport(): DsThemeSupport {
   if (_dsThemeSupport) return _dsThemeSupport;
+  if (_dsThemeUnsupported) return _unsupported;
   const fallback: DsThemeSupport = { supported: false, wrapperClass: '' };
   if (typeof document === 'undefined' || !document.body) return fallback;
   try {
@@ -1181,6 +1224,10 @@ function detectDsThemeSupport(): DsThemeSupport {
     // unsupported. Caching that would permanently disable theming; instead
     // re-probe until support is confirmed (or the DS genuinely has one theme).
     if (found.supported) _dsThemeSupport = found;
+    else {
+      _dsThemeUnsupported = true;
+      watchStylesheetsOnce();
+    }
     return found;
   } catch {
     return fallback;
@@ -2422,6 +2469,38 @@ function isLockedElement(el: Element | null, cdId: string | null): boolean {
 // ─────────────────────────────────────────────────────────────────────────────
 // Router wire-up
 
+// The shell writes an inspector edit, THEN posts `record-edit` for it. The
+// write reaches disk before the shell has its response, so a Cmd+Z pressed in
+// that window found the stack one entry short and inverted the edit BELOW the
+// one on screen — refused as "changed by someone else", or worse, applied.
+// Before undo/redo, ask the shell to answer once its recordable writes have
+// settled. Messages between two windows arrive in order, so every
+// `record-edit` those writes produce is delivered before the answer. Bounded:
+// a shell that never answers costs a short wait, not the undo.
+export function afterShellRecords(timeoutMs = 3000): Promise<void> {
+  if (typeof window === 'undefined' || window.parent === window) return Promise.resolve();
+  const requestId = `ub-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  return new Promise<void>((resolve) => {
+    const done = () => {
+      clearTimeout(timer);
+      window.removeEventListener('message', onReply);
+      resolve();
+    };
+    const onReply = (e: MessageEvent) => {
+      const d = e.data as { dgn?: string; requestId?: string } | null;
+      if (e.source === window.parent && d?.dgn === 'undo-barrier-ok' && d.requestId === requestId)
+        done();
+    };
+    const timer = setTimeout(done, timeoutMs);
+    window.addEventListener('message', onReply);
+    try {
+      window.parent.postMessage({ dgn: 'undo-barrier', requestId }, '*');
+    } catch {
+      done();
+    }
+  });
+}
+
 function CanvasRouter({
   hostRef,
   children,
@@ -2443,6 +2522,11 @@ function CanvasRouter({
   // without making them a hook dependency — avoids re-binding on every undo op.
   const undoStackRef = useRef(undoStack);
   undoStackRef.current = undoStack;
+  // Selection readback can refresh while the user is typing (e.g. the shell's
+  // post-HMR halo restore). Keep the editor's lifetime tied to its host, not
+  // the changing selection snapshot, or effect cleanup silently ends typing.
+  const textSelectionRef = useRef(selSet);
+  textSelectionRef.current = selSet;
 
   // Phase: inline-edit undo (DDR-103/104 follow-up). Wire the `editSourceApplyFn`
   // sink so an `edit-source` command's do()/undo() reaches the main-origin-only
@@ -2454,10 +2538,17 @@ function CanvasRouter({
   // or any failed write) rejects, the stack keeps the entry instead of moving
   // its cursor, and the user is told why.
   useEffect(() => {
+    // HMR replaces this React subtree, not the iframe or the parent write.
+    // Drain already-sent requests after cleanup instead of losing their ACK
+    // (and, on conflict, their user-facing refusal). Timers remain bounded.
+    let disposed = false;
     const pending = new Map<
       string,
       { resolve: () => void; reject: (err: Error) => void; timer: ReturnType<typeof setTimeout> }
     >();
+    const detachIfIdle = () => {
+      if (disposed && pending.size === 0) window.removeEventListener('message', onResult);
+    };
     const onResult = (event: MessageEvent) => {
       if (event.source !== window.parent) return;
       const data = event.data as
@@ -2468,6 +2559,7 @@ function CanvasRouter({
       if (!entry) return;
       pending.delete(data.requestId);
       clearTimeout(entry.timer);
+      detachIfIdle();
       if (data.ok === true) {
         entry.resolve();
         return;
@@ -2482,11 +2574,16 @@ function CanvasRouter({
     let sequence = 0;
     const applyFn: EditSourceApplyFn = (apply) =>
       new Promise<void>((resolve, reject) => {
+        if (disposed) {
+          reject(new Error('the canvas closed'));
+          return;
+        }
         sequence += 1;
         const requestId = `${Date.now().toString(36)}-${sequence}-${Math.random().toString(36).slice(2, 8)}`;
         // Generous: the shell serializes these writes behind any in-flight one.
         const timer = setTimeout(() => {
           pending.delete(requestId);
+          detachIfIdle();
           reject(new Error('the edit was not confirmed'));
         }, 30_000);
         pending.set(requestId, { resolve, reject, timer });
@@ -2496,17 +2593,14 @@ function CanvasRouter({
           /* detached / cross-origin teardown — nothing to apply */
           pending.delete(requestId);
           clearTimeout(timer);
+          detachIfIdle();
           reject(new Error('the canvas is detached'));
         }
       });
     undoSinks.setSink('editSourceApplyFn', applyFn);
     return () => {
-      window.removeEventListener('message', onResult);
-      for (const entry of pending.values()) {
-        clearTimeout(entry.timer);
-        entry.reject(new Error('the canvas closed'));
-      }
-      pending.clear();
+      disposed = true;
+      detachIfIdle();
       undoSinks.setSink('editSourceApplyFn', undefined);
     };
   }, [undoSinks]);
@@ -2734,11 +2828,11 @@ function CanvasRouter({
       }
       // Plan C — Edit menu (shell) bridges to the in-canvas undo stack.
       if (m.dgn === 'undo') {
-        void undoStack.undo();
+        void afterShellRecords().then(() => undoStackRef.current.undo());
         return;
       }
       if (m.dgn === 'redo') {
-        void undoStack.redo();
+        void afterShellRecords().then(() => undoStackRef.current.redo());
         return;
       }
       // Phase 12 Task 4 (DDR-103) — Layers-tree round-trip. select-by-id resolves
@@ -3144,7 +3238,7 @@ function CanvasRouter({
       // selected (the drill has reached it). Previously a dblclick on leaf
       // text jumped straight to the editor from any depth, so the drill ladder
       // never ran on text-bearing targets.
-      const sel0 = selSet.selected;
+      const sel0 = textSelectionRef.current.selected;
       const currentId = sel0.length === 1 ? sel0[0]?.id : undefined;
       const leafReached = isLeafText && currentId === stamped.getAttribute('data-cd-id');
       if (!leafReached) {
@@ -3167,7 +3261,9 @@ function CanvasRouter({
               (next.closest('[data-dc-screen]') as HTMLElement | null)?.getAttribute(
                 'data-dc-screen'
               ) ?? null;
-            selSet.replace(hoverTargetToSelection({ el: next, cdId, artboardId } as HoverTarget));
+            textSelectionRef.current.replace(
+              hoverTargetToSelection({ el: next, cdId, artboardId } as HoverTarget)
+            );
           }
         }
         return;
@@ -3228,7 +3324,7 @@ function CanvasRouter({
       document.removeEventListener('maude:enter-text-edit', onEnterTextEdit);
       if (editing) teardown(editing);
     };
-  }, [hostRef, selSet]);
+  }, [hostRef]);
 
   // Cleanup any pending rAF on unmount.
   useEffect(
@@ -3314,10 +3410,10 @@ function CanvasRouter({
       },
       onTool: ({ tool: t }) => setTool(t),
       onUndo: () => {
-        void undoStack.undo();
+        void afterShellRecords().then(() => undoStackRef.current.undo());
       },
       onRedo: () => {
-        void undoStack.redo();
+        void afterShellRecords().then(() => undoStackRef.current.redo());
       },
       onEscape: () => {
         // T21 — abort any mid-stroke draw FIRST. The annotations layer

package/apps/studio/canvas-source-memo.ts

@@ -0,0 +1,39 @@
+// The last canvas source this server BUILT, with the locator that build
+// produced, per file (F4).
+//
+// The HMR broadcaster diffs a changed canvas against it to find a text-only
+// edit it can hand straight to the open iframe (`HmrMessage.patches`). Seeded
+// by the module route after each build — so the memo is exactly the source the
+// iframe renders, and its locator names that render's `data-cd-id`s — and
+// advanced by every broadcast that carried patches. Bounded: a memo miss only
+// means the remount renders the change without the head start.
+
+import type { LocatorMap } from './locator.ts';
+
+const MAX_FILES = 256;
+const MAX_BYTES = 512 * 1024;
+
+export interface BuiltCanvas {
+  source: string;
+  locator: LocatorMap;
+}
+
+const memo = new Map<string, BuiltCanvas>();
+
+export function rememberCanvasBuild(absPath: string, built: BuiltCanvas): void {
+  memo.delete(absPath);
+  if (built.source.length > MAX_BYTES) return;
+  memo.set(absPath, built);
+  if (memo.size > MAX_FILES) {
+    const oldest = memo.keys().next().value;
+    if (oldest !== undefined) memo.delete(oldest);
+  }
+}
+
+export function recallCanvasBuild(absPath: string): BuiltCanvas | undefined {
+  return memo.get(absPath);
+}
+
+export function forgetCanvasBuilds(): void {
+  memo.clear();
+}

package/apps/studio/canvas-text-patch.ts

@@ -0,0 +1,117 @@
+// Text-only change detection for the F4 peer-render fast path.
+//
+// A teammate's text edit reaches this disk ~100 ms after they commit it, but
+// re-importing and remounting the canvas module takes several hundred more.
+// When the ONLY difference between the source the iframe renders and the new
+// source is the text between an element's opening and closing tag, the iframe
+// can show the new string at once and let the remount confirm it.
+//
+// DELIBERATELY PARSER-FREE. In a cell this runs in the process that holds the
+// tenant's credentials, where canvas source is never parsed or built (DDR-209:
+// that happens in the sandbox). So this is bounded string scanning over one
+// changed region, and the element's identity comes from the LOCATOR the
+// sandboxed build already produced for the rendered source — never from
+// parsing tenant bytes here. Anything it cannot prove is a plain text run —
+// markup, attributes, expressions, entities, several regions — returns null,
+// and the remount alone renders the change, exactly as before.
+
+import type { LocatorMap } from './locator.ts';
+
+export interface TextPatch {
+  /** The element's `data-cd-id` in the rendered (before) build. */
+  id: string;
+  /** The string React renders for the element's text child. */
+  text: string;
+}
+
+const STRUCTURAL = /[<>{}&]/;
+
+/** Babel's JSX text whitespace rule (cleanJSXElementLiteralChild). */
+export function renderedJsxText(raw: string): string {
+  const lines = raw.split(/\r\n|\n|\r/);
+  let lastNonEmpty = 0;
+  for (let i = 0; i < lines.length; i++) if (/[^ \t]/.test(lines[i] as string)) lastNonEmpty = i;
+  let out = '';
+  for (let i = 0; i < lines.length; i++) {
+    let line = (lines[i] as string).replace(/\t/g, ' ');
+    if (i !== 0) line = line.replace(/^[ ]+/, '');
+    if (i !== lines.length - 1) line = line.replace(/[ ]+$/, '');
+    if (line) {
+      if (i !== lastNonEmpty) line += ' ';
+      out += line;
+    }
+  }
+  return out;
+}
+
+/** 1-based line / 0-based column, counted the way the build's locator counts. */
+function lineCol(source: string, at: number): { line: number; col: number } {
+  let line = 1;
+  let col = 0;
+  for (let i = 0; i < at; i++) {
+    if (source.charCodeAt(i) === 10) {
+      line += 1;
+      col = 0;
+    } else col += 1;
+  }
+  return { line, col };
+}
+
+const TAG_NAME = /^[A-Za-z][\w.:-]*/;
+
+/**
+ * The single text patch that turns `before`'s render into `after`'s, [] when
+ * they are identical, or null when the change is anything but the text run of
+ * one element that `locator` (the build of `before`) names.
+ */
+export function textOnlyPatches(
+  before: string,
+  after: string,
+  locator: LocatorMap
+): TextPatch[] | null {
+  if (before === after) return [];
+  const limit = Math.min(before.length, after.length);
+  let p = 0;
+  while (p < limit && before.charCodeAt(p) === after.charCodeAt(p)) p++;
+  let s = 0;
+  while (
+    s < limit - p &&
+    before.charCodeAt(before.length - 1 - s) === after.charCodeAt(after.length - 1 - s)
+  )
+    s++;
+  if (STRUCTURAL.test(before.slice(p, before.length - s))) return null;
+  if (STRUCTURAL.test(after.slice(p, after.length - s))) return null;
+
+  // The text run around the change: from the `>` ending an opening tag to the
+  // `</` of a closing tag, with nothing structural in between (both sides).
+  let open = p - 1;
+  while (open >= 0 && !STRUCTURAL.test(before[open] as string)) open--;
+  if (open < 0 || before[open] !== '>' || before[open - 1] === '/') return null;
+  let close = before.length - s;
+  while (close < before.length && !STRUCTURAL.test(before[close] as string)) close++;
+  if (before[close] !== '<' || before[close + 1] !== '/') return null;
+  const closeAfter = close + (after.length - before.length);
+
+  // The opening tag this `>` ends: its `<`, a tag name, and a closing tag that
+  // names the same element.
+  const start = before.lastIndexOf('<', open);
+  if (start < 0) return null;
+  const name = TAG_NAME.exec(before.slice(start + 1))?.[0];
+  if (!name || before.slice(close + 2, close + 2 + name.length + 1) !== `${name}>`) return null;
+
+  const at = lineCol(before, start);
+  // The locator is the sandboxed build's output: trust its shape, not its size.
+  const ids = Object.entries(locator ?? {}).filter(
+    ([id, e]) =>
+      /^[0-9a-f]{8}$/.test(id) &&
+      e?.line === at.line &&
+      e?.col === at.col &&
+      Array.isArray(e?.jsxPath) &&
+      e.jsxPath.at(-1) === name
+  );
+  if (ids.length !== 1) return null;
+
+  const text = renderedJsxText(after.slice(open + 1, closeAfter));
+  if (!text) return null;
+  return [{ id: (ids[0] as [string, unknown])[0], text }];
+}