retake-dev 0.5.0 → 0.5.1

package/src/shell/30-notes.js

@@ -28,16 +28,30 @@ const noClick = (el) => {
     return false
   }
 }
+// The element an event is really about: inside an open shadow root, the
+// element clicked (the event's target is retargeted to the host).
+const innerTarget = (e) => {
+  try {
+    const p = e.composedPath && e.composedPath()
+    if (p && p[0] && p[0].nodeType) return p[0].nodeType === 1 ? p[0] : p[0].parentElement
+  } catch {}
+  return e.target && (e.target.nodeType === 1 ? e.target : e.target.parentElement)
+}
 shell.inspect = (e) => {
-  const el = e.target.nodeType === 1 ? e.target : e.target.parentElement
+  const el = innerTarget(e)
   if (e.type === "pointermove" || e.type === "pointerover") {
+    lastPointer = { x: e.clientX, y: e.clientY }
     buildLayers(e.clientX, e.clientY, usable(el))
   } else if (e.type === "wheel") {
     if (Math.abs(e.deltaY) >= 4) cycleLayer(e.deltaY > 0 ? 1 : -1)
   } else if (e.type === "keydown" && e.key === "Tab") {
     cycleLayer(e.shiftKey ? -1 : 1)
   } else if ((e.type === "click" || (e.type === "pointerup" && noClick(el))) && usable(el)) {
+    // The list the highlight showed, unless it was built somewhere else (F90):
+    // then the one at the click.
+    if (!layersAt || layersAt.x !== e.clientX || layersAt.y !== e.clientY) buildLayers(e.clientX, e.clientY, usable(el))
     const p = pick()
+    if (p) p.picked = pickedInfo(p)
     if (mode() === "select") setScope(p ? p.el : usable(el))
     else openComposer(p ? p.el : usable(el), { x: e.clientX, y: e.clientY }, p)
   } else if (e.type === "keydown" && e.key === "Escape") {
@@ -50,27 +64,43 @@ shell.inspect = (e) => {
 shell.appPointerDown = () => {
   if (!card.hidden && !draft) closeCard()
 }
+// ⌘ held over the live app: the note tools work on a paused moment (said
+// once per press).
+let liveHinted = false
 shell.pointer = (x, y, meta) => {
   lastPointer = { x, y }
-  if (meta !== undefined && meta !== D.metaHeld) shell.meta(meta)
+  if (meta !== undefined && meta !== D.metaHeld) setMeta(meta)
+  if (meta && !liveHinted && D.last && D.last.started && D.last.playing && !isStill()) {
+    liveHinted = true
+    flash("Pause (Space) to comment", { warn: false })
+  }
 }
-shell.meta = (down) => {
+// From a frame's runtime: ⌘ down or up, or the window on show lost focus
+// (a frame built behind or being swapped out doesn't say so, F99).
+shell.meta = (down) => setMeta(down)
+function setMeta(down) {
   if (D.metaHeld === down) return
   D.metaHeld = down
+  if (!down) liveHinted = false
   syncPicking()
 }
 
 // ---- the layer picker: what's under the pointer, including pseudo-elements ----------
-// ⌘ over the app lists the layers at that point, topmost first: each element,
-// and after it any animation running on its ::before/::after (a shimmer on a
-// skeleton, say). Wheel or Tab moves through them; a click picks the
-// highlighted one.
+// ⌘ over the app lists the layers at that point: each element, and after it
+// any animation running on its ::before/::after (a shimmer on a skeleton,
+// say). What the user can see comes first: an element with its own text,
+// media or a control, or that paints something; then the rest in z-order;
+// then decorative layers (an empty overlay: a glow, a stretched link, a
+// scrim) and invisible ones (opacity 0, a closed menu sheet). Wheel or Tab
+// moves through them; a click picks the highlighted one.
 
-let layers = [] // [{ el, pseudo, anim, name, label }]
+let layers = [] // [{ el, pseudo, anim, name, label, rank, why, z }]
 let layerIdx = 0
 let layersKey = ""
+let layersAt = null // the point the list was built at
 const layersEl = $("#wb-layers")
 const pick = () => layers[layerIdx] || null
+const MAX_LAYERS = 8
 
 const shortLabel = (el) => {
   const tag = el.tagName.toLowerCase()
@@ -90,19 +120,128 @@ function animTiming(a) {
 }
 const animName = (a) => a.animationName || (a.transitionProperty ? `${a.transitionProperty} transition` : "animation")
 
-function buildLayers(x, y, fallback) {
+const MEDIA = "img, svg, video, canvas, picture, iframe, object, embed"
+const CONTROL = "button, a[href], input, select, textarea, summary, label, [role=button], [role=link], [role=checkbox], [role=switch], [role=tab], [role=menuitem], [contenteditable=true]"
+const isSvg = (el) => !!el && el instanceof el.ownerDocument.defaultView.SVGElement
+const svgRootOf = (el) => (el.tagName.toLowerCase() === "svg" && !el.ownerSVGElement ? el : el.closest("svg:not(svg svg)") || el.ownerSVGElement || el)
+// The control an svg is the icon of: within two levels above it.
+function svgControl(svg) {
+  for (let n = svg.parentElement, i = 0; n && i < 2; n = n.parentElement, i++) if (n.matches(CONTROL.replace("a[href]", "a"))) return n
+  return null
+}
+const ownText = (el) => [...el.childNodes].some((n) => n.nodeType === 3 && /\S/.test(n.data))
+const textOf = (el) => (el.innerText || el.textContent || "").trim()
+function painted(cs) {
+  const bg = cs.backgroundColor
+  if (bg && !/rgba\(.*,\s*0\)$/.test(bg) && bg !== "transparent") return true
+  if (cs.backgroundImage && cs.backgroundImage !== "none") return true
+  if (cs.boxShadow && cs.boxShadow !== "none") return true
+  return bordered(cs)
+}
+const bordered = (cs) => ["Top", "Right", "Bottom", "Left"].some((s) => parseFloat(cs[`border${s}Width`]) > 0 && cs[`border${s}Style`] !== "none" && cs[`border${s}Style`] !== "hidden")
+// Is it on screen at all (opacity 0 on it or an ancestor, visibility hidden)?
+function seen(el) {
+  try {
+    if (typeof el.checkVisibility === "function") return el.checkVisibility({ opacityProperty: true, visibilityProperty: true })
+    for (let n = el; n && n.nodeType === 1; n = n.parentElement) if (el.ownerDocument.defaultView.getComputedStyle(n).opacity === "0") return false
+  } catch {}
+  return true
+}
+
+// Everything at the point, topmost first: inside open shadow roots (before
+// their host), and embedded iframes (out of hit testing while the app is
+// view-only: no click reaches them) on top.
+function hitList(doc, x, y) {
   let els = []
   try {
-    els = D.frame.contentDocument.elementsFromPoint(x, y)
+    els = doc.elementsFromPoint(x, y)
   } catch {}
-  const seen = new Set()
   const out = []
-  for (const raw of els) {
-    const el = usable(raw)
-    if (!el || seen.has(el)) continue
-    seen.add(el)
-    if (seen.size > 4) break
-    out.push({ el, pseudo: null, anim: null, name: null, label: shortLabel(el) })
+  const walk = (list, depth) => {
+    for (const el of list) {
+      const root = el.shadowRoot
+      if (root && depth < 3) {
+        let inner = []
+        try {
+          inner = root.elementsFromPoint(x, y).filter((n) => n.getRootNode() === root)
+        } catch {}
+        walk(inner, depth + 1)
+      }
+      out.push(el)
+    }
+  }
+  walk(els, 0)
+  try {
+    for (const f of doc.querySelectorAll("iframe")) {
+      const r = f.getBoundingClientRect()
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom && r.width && r.height && !out.includes(f)) out.unshift(f)
+    }
+  } catch {}
+  return out
+}
+
+// The elements an element at the point stands for: itself; for a shape inside
+// an svg, the shape (stroke animations live there), the whole <svg>, and the
+// control the svg is the icon of.
+function candidates(raw) {
+  if (!raw || raw.tagName === "HTML" || raw.tagName === "BODY") return []
+  if (!isSvg(raw)) return [raw]
+  const svg = svgRootOf(raw)
+  const list = raw === svg ? [svg] : [raw, svg]
+  const control = svgControl(svg)
+  if (control) list.push(control)
+  return list
+}
+
+// 0 content (text, media, a control, or it paints something), 1 an empty box,
+// 2 decorative, 3 invisible.
+function rankOf(el, below) {
+  if (el.tagName === "IFRAME") return { rank: 0 }
+  if (!seen(el)) return { rank: 3, why: "hidden" }
+  let cs = null
+  try {
+    cs = el.ownerDocument.defaultView.getComputedStyle(el)
+  } catch {}
+  const media = isSvg(el) || el.matches(MEDIA) || !!el.querySelector(MEDIA)
+  const text = !!textOf(el)
+  if (!media && !text && el.getAttribute("aria-hidden") === "true") return { rank: 2, why: "decorative" }
+  if (!media && !text && cs && (cs.position === "absolute" || cs.position === "fixed") && !bordered(cs)) {
+    const r = el.getBoundingClientRect()
+    const W = el.ownerDocument.defaultView
+    const big = r.width * r.height > 0.5 * W.innerWidth * W.innerHeight
+    const covers = below.some((b) => {
+      const q = b.getBoundingClientRect()
+      return q.left >= r.left - 1 && q.top >= r.top - 1 && q.right <= r.right + 1 && q.bottom <= r.bottom + 1
+    })
+    if (big || covers) return { rank: 2, why: "decorative" }
+  }
+  if (text || media || el.matches(CONTROL) || (cs && painted(cs))) return { rank: 0 }
+  return { rank: 1 }
+}
+
+function buildLayers(x, y, fallback) {
+  let doc = null
+  try {
+    doc = D.frame.contentDocument
+  } catch {}
+  const els = []
+  const seenEls = new Set()
+  for (const raw of doc ? hitList(doc, x, y) : []) {
+    for (const el of candidates(raw)) {
+      if (seenEls.has(el)) continue
+      seenEls.add(el)
+      els.push(el)
+    }
+    if (els.length >= MAX_LAYERS) break
+  }
+  els.length = Math.min(els.length, MAX_LAYERS)
+  // Each element's rank, knowing what's under it (an empty overlay that
+  // covers the content under it is decorative).
+  const groups = els.map((el, z) => {
+    const below = els.slice(z + 1).filter((b) => b.tagName !== "IFRAME" && (ownText(b) || b.matches(MEDIA)) && !b.contains(el))
+    const { rank, why } = rankOf(el, below)
+    const host = { el, pseudo: null, anim: null, name: null, label: layerLabel(el), rank, why: why || null, z }
+    const pseudos = []
     let anims = []
     try {
       anims = el.getAnimations({ subtree: true })
@@ -114,33 +253,67 @@ function buildLayers(x, y, fallback) {
       const name = animName(a)
       if (names.has(pe + name)) continue
       names.add(pe + name)
-      out.push({ el, pseudo: pe, anim: a, name, label: `${pe} · ${name} · ${animTiming(a)}` })
+      pseudos.push({ el, pseudo: pe, anim: a, name, label: `${pe} · ${name} · ${animTiming(a)}`, rank, why: null, z })
     }
-  }
-  if (!out.length && fallback) out.push({ el: fallback, pseudo: null, anim: null, name: null, label: shortLabel(fallback) })
+    return [host, ...pseudos]
+  })
+  const order = groups.map((g, i) => ({ g, i })).sort((a, b) => a.g[0].rank - b.g[0].rank || a.i - b.i)
+  const out = order.flatMap((o) => o.g)
+  if (!out.length && fallback) out.push({ el: fallback, pseudo: null, anim: null, name: null, label: layerLabel(fallback), rank: 0, why: null, z: 0 })
   const key = out.map((l) => l.label).join("|")
   if (key !== layersKey) {
     layersKey = key
-    layerIdx = 0
+    layerIdx = defaultLayer(out)
   }
   layers = out
+  layersAt = { x, y }
   hovered = pick() ? pick().el : null
 }
 
+// The first content layer; for a shape in an svg, the svg itself, or the
+// control it's the icon of.
+function defaultLayer(list) {
+  let i = list.findIndex((l) => l.rank === 0)
+  if (i < 0) i = list.findIndex((l) => l.rank < 2)
+  if (i < 0) return 0
+  const l = list[i]
+  if (isSvg(l.el)) {
+    const svg = svgRootOf(l.el)
+    const control = svgControl(svg)
+    const want = control || svg
+    const j = list.findIndex((x) => x.el === want && !x.pseudo)
+    if (j >= 0) return j
+  }
+  return i
+}
+
+// "button.inner in <fancy-card>'s shadow root"
+function layerLabel(el) {
+  const root = el.getRootNode && el.getRootNode()
+  const host = root && root.host
+  return host ? `${shortLabel(el)} in <${host.tagName.toLowerCase()}>'s shadow root` : shortLabel(el)
+}
+
 function cycleLayer(dir) {
   if (layers.length < 2) return
   layerIdx = (layerIdx + dir + layers.length) % layers.length
   hovered = pick().el
 }
 
-// The chip beside the pointer: the top layers, the pick highlighted.
+// The chip beside the pointer: the top layers, the pick highlighted, a
+// layer that's skipped dimmed with why (so it's clear the wheel reaches it).
 let layersHtml = ""
 function renderLayers() {
   const show = mode() === "comment" && layers.length > 0 && lastPointer
   layersEl.hidden = !show
   if (!show) return
-  const top = layers.slice(0, 4)
-  const html = top.map((l, i) => `<div class="layer${i === layerIdx ? " on" : ""}${l.pseudo ? " pseudo" : ""}">${esc(l.label)}</div>`).join("") + (layers.length > 4 ? `<div class="more">+${layers.length - 4}</div>` : "")
+  const shown = layers.map((l, i) => ({ l, i })).filter((x) => x.l.rank < 2 || x.i === layerIdx)
+  const skipped = layers.map((l, i) => ({ l, i })).filter((x) => x.l.rank >= 2 && x.i !== layerIdx)
+  const top = shown.slice(0, skipped.length ? 3 : 4).concat(skipped.slice(0, 1))
+  const rest = layers.length - top.length
+  const html =
+    top.map(({ l, i }) => `<div class="layer${i === layerIdx ? " on" : ""}${l.pseudo ? " pseudo" : ""}${l.rank >= 2 ? " skipped" : ""}">${esc(l.label)}${l.rank >= 2 && l.why ? ` · ${esc(l.why)}` : ""}</div>`).join("") +
+    (rest > 0 ? `<div class="more">+${rest}</div>` : "")
   if (html !== layersHtml) {
     layersHtml = html
     layersEl.innerHTML = html
@@ -152,15 +325,22 @@ function renderLayers() {
   layersEl.style.top = clamp(f.top + lastPointer.y + 16, 8, dock.getBoundingClientRect().top - h - 8) + "px"
 }
 
-// The page itself isn't a thing to comment on.
-// Inside an SVG icon, the thing you mean is the icon's control (a button or
-// link), or at least the whole <svg>, not one of its paths.
+// How the pick was made, for the note: on top, or a layer down, and what was
+// skipped above it.
+function pickedInfo(p) {
+  if (!p) return { via: "topmost", skipped: [] }
+  const above = layers.filter((l) => !l.pseudo && l.z < p.z)
+  return { via: p.z === 0 ? "topmost" : `layer ${p.z + 1}`, skipped: above.map((l) => `${l.label}${l.why ? ` (${l.why})` : ""}`) }
+}
+
+// The page itself isn't a thing to comment on. Inside an SVG icon, the thing
+// you mean is the icon's control (a button or link, within two levels), or
+// at least the whole <svg>.
 function usable(el) {
   if (!el || el.tagName === "HTML" || el.tagName === "BODY") return null
-  if (el instanceof el.ownerDocument.defaultView.SVGElement) {
-    const svgRoot = el.ownerSVGElement ? el.closest("svg:not(svg svg)") || el.ownerSVGElement : el
-    const control = svgRoot.parentElement && svgRoot.parentElement.closest("button, a, [role=button], [role=link], label, [id]")
-    return control && control.tagName !== "BODY" ? control : svgRoot
+  if (isSvg(el)) {
+    const svg = svgRootOf(el)
+    return svgControl(svg) || svg
   }
   return el
 }
@@ -172,14 +352,47 @@ function setPicking(m) {
   syncPicking()
 }
 
+// The layer list is always the one at the pointer (F90): rebuilt when a tool
+// turns on, dropped when it turns off.
 function syncPicking() {
   shell.inspecting = !!mode()
   setToolActive(!!mode())
+  // Picking, a click on a pinned spot is a new note there (F108): pins let it through.
+  document.body.classList.toggle("picking-notes", mode() === "comment")
   hovered = null
   try {
     const doc = D.frame.contentDocument
     doc.documentElement.style.cursor = mode() ? "crosshair" : ""
-    if (mode() && lastPointer) hovered = usable(doc.elementFromPoint(lastPointer.x, lastPointer.y))
+  } catch {}
+  if (mode() && lastPointer) buildLayers(lastPointer.x, lastPointer.y, null)
+  else if (!mode()) {
+    layers = []
+    layersKey = ""
+    layersAt = null
+  }
+}
+
+// Embedded iframes get no input while the app is view-only (F97): a sheet
+// adopted by the frame on show (no DOM change, nothing recorded).
+let embedSheet = null // { doc, sheet }
+function syncEmbeds() {
+  let doc = null
+  try {
+    doc = D.frame && D.frame.contentDocument
+  } catch {}
+  const want = !!doc && isStill()
+  if (embedSheet && (embedSheet.doc !== doc || !want)) {
+    try {
+      embedSheet.doc.adoptedStyleSheets = embedSheet.doc.adoptedStyleSheets.filter((x) => x !== embedSheet.sheet)
+    } catch {}
+    embedSheet = null
+  }
+  if (!want || embedSheet) return
+  try {
+    const sheet = new doc.defaultView.CSSStyleSheet()
+    sheet.replaceSync("iframe { pointer-events: none !important; }")
+    doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet]
+    embedSheet = { doc, sheet }
   } catch {}
 }
 
@@ -193,8 +406,8 @@ function setScope(el) {
 
 const cssEsc = (v) => (window.CSS && CSS.escape ? CSS.escape(v) : String(v).replace(/[^\w-]/g, (c) => "\\" + c))
 
-// A valid selector for the element (ids like React's ":r1:" or "1st" are
-// escaped): an id if there is one, else tag.class chains with :nth-of-type.
+// The runtime's own selector for an element (the old way: an id, else
+// tag.class chains with :nth-of-type), which older clips carry.
 function cssPath(el) {
   const parts = []
   for (let n = el; n && n.nodeType === 1 && n.tagName !== "HTML"; n = n.parentElement) {
@@ -213,9 +426,150 @@ function cssPath(el) {
   return parts.join(" > ")
 }
 
+// ---- stable selectors (F96) ----------------------------------------------------------
+// A selector that still finds the element on a fresh load of the page: no
+// generated ids, no classes the recording saw come and go (`in`, `go`,
+// `is-open`, `opacity-100`), no Tailwind state variants; test ids, labels,
+// hrefs and names where they're unique; :nth-of-type only where needed.
+
+// Class names added or removed on any element while the dock watched (every
+// frame it has shown or built: the recording, its replays and previews).
+const toggledClasses = new Set()
+const watchedDocs = new WeakSet()
+const classSet = (v) => new Set(String(v || "").split(/\s+/).filter(Boolean))
+function watchClasses(frame) {
+  let doc = null
+  try {
+    doc = frame && frame.contentDocument
+  } catch {}
+  if (!doc || !doc.documentElement || watchedDocs.has(doc)) return
+  watchedDocs.add(doc)
+  try {
+    new MutationObserver((records) => {
+      for (const r of records) {
+        const was = classSet(r.oldValue)
+        const now = classSet(/** @type {Element} */ (r.target).getAttribute("class"))
+        for (const c of was) if (!now.has(c)) toggledClasses.add(c)
+        for (const c of now) if (!was.has(c)) toggledClasses.add(c)
+      }
+    }).observe(doc, { subtree: true, attributes: true, attributeFilter: ["class"], attributeOldValue: true })
+  } catch {}
+}
+
+const GENERATED_ID = /^(:r|«r|:R|radix-|headlessui-|react-aria|mui-|rc-|ember\d)|\d{5,}$|:/
+const goodId = (id) => !!id && !GENERATED_ID.test(id)
+const stableClass = (c) => !toggledClasses.has(c) && !c.includes(":") && /^-?[_a-zA-Z][\w-]*$|^[\w-]*\[[^\]]+\][\w-]*$/.test(c)
+// "_title_18lyj_1" (a CSS module's hashed class) → "title".
+const moduleClass = (c) => {
+  const m = /^_?([A-Za-z][\w-]*?)_[a-z0-9]{5}(_\d+)?$/.exec(c)
+  return m ? m[1] : null
+}
+
+const attrEsc = (v) => String(v).replace(/["\\]/g, "\\$&")
+// One step of a selector for n, the most specific stable thing it has.
+function selectorStep(n, unique) {
+  const tag = n.tagName.toLowerCase()
+  if (goodId(n.id)) return { sel: `#${cssEsc(n.id)}`, anchor: true }
+  for (const a of ["data-testid", "data-test", "data-cy"]) {
+    const v = n.getAttribute(a)
+    if (v) return { sel: `${tag}[${a}="${attrEsc(v)}"]`, anchor: true }
+  }
+  const tries = []
+  const label = n.getAttribute("aria-label")
+  if (label) tries.push(`${tag}[aria-label="${attrEsc(label)}"]`)
+  if (tag === "a" && n.getAttribute("href")) tries.push(`a[href="${attrEsc(n.getAttribute("href"))}"]`)
+  if (/^(input|select|textarea|button)$/.test(tag) && n.getAttribute("name")) tries.push(`${tag}[name="${attrEsc(n.getAttribute("name"))}"]`)
+  for (const t of tries) if (unique(t)) return { sel: t, anchor: true }
+  const cls = [...n.classList].filter(stableClass).slice(0, 3)
+  return { sel: tag + cls.map((c) => "." + cssEsc(c)).join(""), anchor: false, bare: !cls.length }
+}
+
+// { selector, matches, hint } for an element. In a shadow root: the host's
+// selector, " >>> ", and the selector inside it.
+function stableSelector(el) {
+  const root = el.getRootNode ? el.getRootNode() : el.ownerDocument
+  const all = (s) => {
+    try {
+      return root.querySelectorAll(s)
+    } catch {
+      return []
+    }
+  }
+  const unique = (s) => {
+    const m = all(s)
+    return m.length === 1 && m[0] === el
+  }
+  let sel = ""
+  for (let n = el, depth = 0; n && n.nodeType === 1 && n.tagName !== "HTML" && depth < 10; n = n.parentElement, depth++) {
+    const step = selectorStep(n, (s) => all(sel ? `${s} > ${sel}` : s).length === 1)
+    let part = step.sel
+    let cand = sel ? `${part} > ${sel}` : part
+    if (unique(cand) && (!step.bare || depth > 0)) return finish(cand)
+    if (!step.anchor && n.parentElement) {
+      const same = [...n.parentElement.children].filter((c) => c.tagName === n.tagName)
+      if (same.length > 1) {
+        const nth = `${part}:nth-of-type(${same.indexOf(n) + 1})`
+        const withNth = sel ? `${nth} > ${sel}` : nth
+        if (unique(withNth) && (!step.bare || depth > 0)) return finish(withNth)
+        // Kept only where it narrows things down.
+        if (all(withNth).length < all(cand).length) cand = withNth
+      }
+    }
+    sel = cand
+    if (step.anchor || n.tagName === "BODY") break
+  }
+  return finish(sel || el.tagName.toLowerCase())
+  function finish(s) {
+    const host = root && /** @type {any} */ (root).host
+    if (host) {
+      const outer = stableSelector(host)
+      return { selector: `${outer.selector} >>> ${s}`, matches: all(s).length, shadowHost: outer.selector }
+    }
+    return { selector: s, matches: all(s).length }
+  }
+}
+
+// The runtime's selectorOf (shared with clips) when it has one.
+function selectorInfo(el) {
+  const pt = D.PT
+  const inShadow = el.getRootNode && el.getRootNode() !== el.ownerDocument
+  if (pt && typeof pt.selectorOf === "function" && !inShadow) {
+    try {
+      const r = pt.selectorOf(el)
+      if (r && typeof r === "object" && r.selector) return { selector: r.selector, matches: r.matches || 1, hint: r.hint || null }
+      if (typeof r === "string" && r) return { selector: r, matches: findAll(r, el.ownerDocument).length || 1 }
+    } catch {}
+  }
+  return stableSelector(el)
+}
+
+// Elements a selector finds, through " >>> " into open shadow roots.
+function findAll(selector, doc) {
+  try {
+    const parts = String(selector).split(" >>> ")
+    let scope = [doc]
+    for (let i = 0; i < parts.length; i++) {
+      const found = scope.flatMap((r) => [...r.querySelectorAll(parts[i])])
+      scope = i < parts.length - 1 ? found.map((n) => n.shadowRoot).filter(Boolean) : found
+    }
+    return /** @type {Element[]} */ (scope)
+  } catch {
+    return []
+  }
+}
+const findEl = (selector, doc) => (selector ? findAll(selector, doc)[0] || null : null)
+
+// The element's fiber in the tree on screen: the node keeps the fiber it was
+// created with, which after an update may be the stale one of the pair (its
+// props, and its parents' props, from an earlier render). The current props
+// sit on the node (__reactProps$), so the fiber holding them is the current one.
 const fiberOf = (el) => {
-  const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$"))
-  return key ? el[key] : null
+  const keys = Object.keys(el)
+  const key = keys.find((k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$"))
+  const f = key ? el[key] : null
+  const pk = keys.find((k) => k.startsWith("__reactProps$"))
+  if (f && pk && f.alternate && f.memoizedProps !== el[pk] && f.alternate.memoizedProps === el[pk]) return f.alternate
+  return f
 }
 
 // A component's name, through memo() and forwardRef() wrappers.
@@ -231,7 +585,7 @@ function componentName(type) {
 
 // Library wrappers that sit between an element and the component that wrote
 // it (framer-motion presence, Radix slots, providers). Not what a note means.
-const INTERNAL = /^(PopChild|PopChildMeasure|PresenceChild|AnimatePresence|MotionComponent|MotionDOMComponent|LayoutGroup|LazyMotion|MotionConfig|Slot|SlotClone|Slottable|Primitive\b.*|Presence|Portal|DismissableLayer|FocusScope|RemoveScroll|Suspense|StrictMode|Fragment|.*Provider|.*Consumer|.*Context)$/
+const INTERNAL = /^(SegmentViewNode|InnerLayoutRouter|OuterLayoutRouter|RenderFromTemplateContext|ScrollAndFocusHandler|InnerScrollAndFocusHandler|RedirectBoundary|RedirectErrorBoundary|NotFoundBoundary|HTTPAccessFallbackBoundary|HTTPAccessFallbackErrorBoundary|ErrorBoundary|ErrorBoundaryHandler|LoadingBoundary|ClientPageRoot|ClientSegmentRoot|AppRouter|ServerRoot|HotReload|DevRootHTTPAccessFallbackBoundary|Router|PopChild|PopChildMeasure|PresenceChild|AnimatePresence|MotionComponent|MotionDOMComponent|LayoutGroup|LazyMotion|MotionConfig|Slot|SlotClone|Slottable|Primitive\b.*|Presence|Portal|DismissableLayer|FocusScope|RemoveScroll|Suspense|StrictMode|Fragment|.*Provider|.*Consumer|.*Context)$/
 
 // Nearest components, innermost first: the components that rendered the
 // element (React's owner chain), which skips wrappers it was merely passed
@@ -247,44 +601,104 @@ function reactComponents(el) {
 
 // Where the element was written: React's debug info. React 18 and older keep
 // _debugSource (already source lines). React 19 keeps a stack (_debugStack)
-// whose first app frame is the JSX; those are lines of the file as served
-// (types stripped, JSX compiled), which mapSource() turns back into source
-// lines with the module's own source map.
+// whose app frames lead to the JSX; those are lines of the file as served
+// (types stripped, JSX compiled; or a whole bundle, as Next's Turbopack and
+// webpack chunks are), which mapSource() turns back into source lines with
+// the served file's source map. Frames that map into library code (the JSX
+// runtime bundled into the same chunk) are skipped. With no map at all the
+// source stays unmapped (mapped: false) and says it's a compiled bundle.
+// (Vite's pre-bundled deps carry a ?v= hash wherever its cacheDir is.)
+const LIB_URL = /node_modules|\/\.vite\/deps\/|\/deps\/[^/?]+\.js\?v=[0-9a-f]+|react-dom|react\.development|jsx-dev-runtime/
+const LIB_FN = /\bat (?:exports\.|Object\.)?(?:jsxDEV|jsxs?|createElement|jsxWithValidation\w*)\b/
 function sourceOf(el) {
   for (let f = fiberOf(el), i = 0; f && i < 12; f = f.return, i++) {
+    // The element's own JSX (exact), or a parent's, where it was passed in (owner).
+    const confidence = i === 0 ? "exact" : "owner"
     const src = f._debugSource
-    if (src && src.fileName) return { file: shortPath(src.fileName), line: src.lineNumber || null, mapped: true }
+    if (src && src.fileName) return { file: shortPath(src.fileName), line: src.lineNumber || null, mapped: true, confidence }
     const stack = f._debugStack && (f._debugStack.stack || String(f._debugStack))
     if (stack) {
+      const frames = []
+      let server = null
       for (const line of stack.split("\n").slice(1)) {
         const m = line.match(/(\S+?):(\d+):(\d+)\)?\s*$/)
-        if (!m || /node_modules|\/\.vite\/deps\/|react-dom|react\.development|jsx-dev-runtime/.test(m[1])) continue
+        if (!m || LIB_FN.test(line)) continue
         const url = m[1].replace(/^.*?\(/, "")
+        if (LIB_URL.test(url)) continue
+        // webpack's eval'd modules (Next on webpack): the module's own path, its line is the compiled one.
+        if (/^webpack-internal:/.test(url)) {
+          frames.push({ file: cleanSource(url.replace(/^webpack-internal:\/\/\/(\([^)]*\)\/)?/, "")), line: null })
+          continue
+        }
         // A server component's frame (React 19 dev: about://React/Server/file:///…/.next/…chunk.js)
-        // is a compiled chunk on the server: nothing the dock can fetch or map (F76).
-        if (!/^https?:\/\//.test(url)) continue
-        const src = { file: shortPath(url), line: Number(m[2]), col: Number(m[3]), url, mapped: false }
-        mapSource(src)
+        // is a compiled chunk on the server: the dev server maps it (F95, /__retake/map).
+        if (!/^https?:\/\//.test(url)) {
+          if (!server) server = { chunk: url.replace(/^about:\/\/React\/Server\//, ""), line: Number(m[2]), col: Number(m[3]) }
+          continue
+        }
+        frames.push({ url, line: Number(m[2]), col: Number(m[3]) })
+        if (frames.length >= 8) break
+      }
+      const first = frames[0]
+      if (first && !first.url) return { file: first.file, line: null, mapped: true, confidence }
+      if (first) {
+        const src = { file: shortPath(first.url), line: first.line, col: first.col, url: first.url, mapped: false, confidence }
+        mapSource(src, frames)
+        return src
+      }
+      // Written by a server component: its line, never the client parent's.
+      if (server && i === 0) {
+        const src = { file: null, line: null, server: true, chunk: server.chunk, col: server.col, chunkLine: server.line, confidence: "unknown" }
+        mapServerSource(src)
         return src
       }
     }
   }
   return null
 }
+
+// The dev server reads the chunk's source map from disk: fills in the file
+// and line of a server component's element, in place.
+async function mapServerSource(src) {
+  if (!net.on) return
+  try {
+    const q = new URLSearchParams({ url: src.chunk, line: String(src.chunkLine), col: String(src.col || 0) })
+    const r = await api("GET", `map?${q}`)
+    const v = r && r.value && typeof r.value === "object" ? r.value : null
+    if (v && v.file) {
+      src.file = v.file
+      src.line = v.line || null
+      src.mapped = true
+      src.confidence = "exact"
+    }
+  } catch {}
+}
 function shortPath(p) {
   try {
-    if (/^https?:/.test(p)) p = new URL(p).pathname
+    // A dev server's URL path is from the project's root (Vite's /@fs/ is an absolute path).
+    if (/^https?:/.test(p)) {
+      p = new URL(p).pathname
+      if (!p.startsWith("/@fs/")) return p.replace(/^\/+/, "")
+    }
   } catch {}
-  return p.replace(/\?.*$/, "").replace(/^\/@fs/, "")
+  return projectPath(p.replace(/\?.*$/, "").replace(/^\/@fs/, ""))
+}
+// An absolute path inside the project, relative to it (macOS's /var is /private/var).
+function projectPath(p) {
+  const root = String((window.__retakeConfig && window.__retakeConfig.root) || "").replace(/\/+$/, "")
+  if (!root || !p || p[0] !== "/") return p
+  for (const r of new Set([root, root.replace(/^\/private\//, "/"), root.startsWith("/private/") ? root : "/private" + root])) if (p.startsWith(r + "/")) return p.slice(r.length + 1)
+  return p
 }
 
 // ---- source maps: served line → source line ----------------------------------------
+// (server/sourcemap.js does the same for the MCP server.)
 
 const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
 function decodeMappings(mappings) {
   const lines = []
   let src = 0, oLine = 0, oCol = 0
-  for (const text of mappings.split(";")) {
+  for (const text of String(mappings || "").split(";")) {
     const segs = []
     let gCol = 0
     for (const seg of text.split(",")) {
@@ -292,6 +706,7 @@ function decodeMappings(mappings) {
       const v = []
       for (let i = 0, shift = 0, acc = 0; i < seg.length; i++) {
         const d = B64.indexOf(seg[i])
+        if (d < 0) break
         acc += (d & 31) << shift
         if (d & 32) shift += 5
         else {
@@ -299,7 +714,7 @@ function decodeMappings(mappings) {
           acc = shift = 0
         }
       }
-      gCol += v[0]
+      gCol += v[0] || 0
       if (v.length >= 4) {
         src += v[1]
         oLine += v[2]
@@ -312,7 +727,61 @@ function decodeMappings(mappings) {
   return lines
 }
 
-const sourceMaps = new Map() // module url (without query) → Promise<{ map, lines } | null>
+// Where a served line/column (1-based) came from: { source, line } or null.
+// Index maps (`sections`, Turbopack's) are read section by section.
+const decodedMaps = new WeakMap()
+function originalPosition(map, line, col) {
+  if (!map || !(line > 0)) return null
+  if (Array.isArray(map.sections)) {
+    const L = line - 1
+    const C = col > 0 ? col - 1 : null
+    let hit = null
+    for (const s of map.sections) {
+      const o = s.offset || { line: 0, column: 0 }
+      if (o.line < L || (o.line === L && (C == null || o.column <= C))) hit = s
+      else break
+    }
+    if (!hit || !hit.map) return null
+    const o = hit.offset || { line: 0, column: 0 }
+    return originalPosition(hit.map, L - o.line + 1, C == null ? null : (L === o.line ? C - o.column : C) + 1)
+  }
+  let lines = decodedMaps.get(map)
+  if (!lines) decodedMaps.set(map, (lines = decodeMappings(map.mappings)))
+  const segs = lines[line - 1]
+  if (!segs || !segs.length) return null
+  let best = segs[0]
+  if (col > 0) for (const s of segs) if (s[0] <= col - 1) best = s
+  let source = map.sources && map.sources[best[1]]
+  if (source && map.sourceRoot && !/^[a-z]+:/i.test(source) && !source.startsWith("/")) source = map.sourceRoot.replace(/\/?$/, "/") + source
+  return source ? { source, line: best[2] + 1 } : null
+}
+
+// A map's source name as a path (webpack://app/./src/a.tsx → src/a.tsx,
+// turbopack:///[project]/app/page.tsx → app/page.tsx, file:///… → /…),
+// relative to the project when the map's node_modules sources show where it is.
+function cleanSource(name, map) {
+  let p = String(name || "").replace(/[?#].*$/, "")
+  p = p.replace(/^webpack:\/\/[^/]*\//, "").replace(/^turbopack:\/\/\/?(\[project\]\/)?/, "").replace(/^\[project\]\//, "")
+  if (p.startsWith("file://")) {
+    try {
+      p = decodeURIComponent(new URL(p).pathname)
+    } catch {
+      p = p.slice(7)
+    }
+  }
+  p = projectPath(p.replace(/^\.\//, ""))
+  if (p.startsWith("/") && map) {
+    const all = Array.isArray(map.sections) ? map.sections.flatMap((s) => (s.map && s.map.sources) || []) : map.sources || []
+    for (const s of all) {
+      const m = /^(?:file:\/\/)?(\/.*?)\/node_modules\//.exec(String(s || ""))
+      if (m && p.startsWith(m[1] + "/")) return p.slice(m[1].length + 1)
+    }
+  }
+  return p
+}
+const libraryFile = (f) => /(^|\/)node_modules\/|\/\.vite\/deps\/|react-dom|jsx-dev-runtime|jsx-runtime|\[turbopack\]|turbopack\/|webpack\/(bootstrap|runtime)/.test(f)
+
+const sourceMaps = new Map() // served url (without query) → Promise<map | null>
 function loadMap(url) {
   const key = url.replace(/\?.*$/, "")
   if (!sourceMaps.has(key))
@@ -321,16 +790,22 @@ function loadMap(url) {
       (async () => {
         try {
           if (!/^https?:\/\//.test(url)) return null
-          const code = await (await fetch(url)).text()
-          const m = code.match(/\/\/[#@] sourceMappingURL=(\S+)\s*$/)
-          if (!m) return null
+          const res = await fetch(url)
+          if (!res.ok) return null
+          const code = await res.text()
+          const header = res.headers.get("sourcemap") || res.headers.get("x-sourcemap")
+          const refs = [...code.matchAll(/\/\/[#@] sourceMappingURL=(\S+)/g)]
+          const ref = header || (refs.length ? refs[refs.length - 1][1] : null)
           let json
-          if (m[1].startsWith("data:")) {
-            const b64 = m[1].slice(m[1].indexOf(",") + 1)
-            json = /;base64/.test(m[1].slice(0, m[1].indexOf(","))) ? new TextDecoder().decode(Uint8Array.from(atob(b64), (c) => c.charCodeAt(0))) : decodeURIComponent(b64)
-          } else json = await (await fetch(new URL(m[1], url))).text()
-          const map = JSON.parse(json)
-          return { map, lines: decodeMappings(map.mappings || "") }
+          if (ref && ref.startsWith("data:")) {
+            const b64 = ref.slice(ref.indexOf(",") + 1)
+            json = /;base64/.test(ref.slice(0, ref.indexOf(","))) ? new TextDecoder().decode(Uint8Array.from(atob(b64), (c) => c.charCodeAt(0))) : decodeURIComponent(b64)
+          } else {
+            const r = await fetch(ref ? new URL(ref, url) : key + ".map")
+            if (!r.ok) return null
+            json = await r.text()
+          }
+          return JSON.parse(json)
         } catch {
           return null
         }
@@ -339,21 +814,37 @@ function loadMap(url) {
   return sourceMaps.get(key)
 }
 
-// Rewrites src.line (and file, if the map names another) in place, so the
-// note that holds it is saved with the source line.
-async function mapSource(src) {
-  const m = await loadMap(src.url)
-  const segs = m && m.lines[src.line - 1]
-  if (segs && segs.length) {
-    let best = segs[0]
-    for (const s of segs) if (s[0] <= src.col - 1) best = s
-    src.line = best[2] + 1
-    const name = m.map.sources && m.map.sources[best[1]]
-    if (name && !name.startsWith("\0") && shortPath(name).split("/").pop() !== src.file.split("/").pop()) src.file = shortPath(name)
+// Rewrites src (file, line) in place from the first frame that maps into the
+// app's own code, so the note that holds it is saved with the source line.
+async function mapSource(src, frames = [src]) {
+  for (const fr of frames) {
+    if (!fr.url) {
+      Object.assign(src, { file: fr.file, line: null, mapped: true })
+      delete src.col
+      delete src.url
+      return
+    }
+    const map = await loadMap(fr.url)
+    if (!map) {
+      if (fr === frames[0]) break // nothing to read this one with: unmapped
+      continue
+    }
+    const pos = originalPosition(map, fr.line, fr.col)
+    if (!pos) continue
+    const file = cleanSource(pos.source, map)
+    if (libraryFile(file)) continue
+    // A module served as itself (Vite) keeps its served path; a bundle names the source.
+    const served = shortPath(fr.url)
+    src.file = file.split("/").pop() === served.split("/").pop() ? served : file
+    src.line = pos.line
+    src.mapped = true
+    delete src.col
+    delete src.url
+    delete src.compiled
+    return
   }
-  src.mapped = true
-  delete src.col
-  delete src.url
+  // No map: a compiled bundle's line is no use to anyone; say so (the component and selector still are).
+  if (/\/_next\/static\/|\.vite\/deps|\._\.js$|[-_.](?=[0-9a-z]*\d)[0-9a-z]{6,}\.m?js$/i.test(src.file)) src.compiled = true
 }
 
 // The computed styles an agent would ask about first. Defaults are left out.
@@ -398,10 +889,14 @@ function describe(el) {
     u.searchParams.delete("__wb")
     page = u.pathname + u.search
   } catch {}
+  const sel = selectorInfo(el)
   return {
     label: `<${tag}${id}${cls}>`,
     text,
-    selector: cssPath(el),
+    selector: sel.selector,
+    matches: sel.matches || 1,
+    shadowHost: sel.shadowHost || undefined,
+    hint: selectorHint(el, text),
     components: reactComponents(el),
     source: sourceOf(el),
     classes: [...el.classList],
@@ -411,42 +906,83 @@ function describe(el) {
   }
 }
 
-// What was moving on the element at t: on it or inside it, else on one of its
-// nearest ancestors (a label inside a sliding button). Never a clip from
-// elsewhere on the page: a note on a still element says nothing is animating.
+// What grep finds the element by: its text, the CSS-module classes it has
+// (`_title_18lyj_1` is `.title` in a *.module.css), its component.
+function selectorHint(el, text) {
+  const parts = []
+  if (text) parts.push(`text "${text.length > 40 ? text.slice(0, 40) + "…" : text}"`)
+  const mods = [...el.classList].map((c) => [c, moduleClass(c)]).filter(([, m]) => m)
+  if (mods.length) parts.push(mods.map(([c, m]) => `${c} = .${m} in a CSS module`).join(", "))
+  const comp = reactComponents(el)[0]
+  if (comp) parts.push(`in <${comp}>`)
+  return parts.join("; ") || null
+}
+
+// What was moving on the element at t, by the clip's exact element (never a
+// selector match, F91): on it, else on one of its nearest ancestors, and then
+// only if what that animates moves the element (a label inside a sliding
+// button). A note on a still element says nothing is animating.
 const CLIP_ANCESTORS = 4
+const MOVES_IT = /^(all|transform|translate|scale|rotate|opacity|filter|clip-?path|top|left|right|bottom|inset|width|height|offset)/i
 function clipFor(t, selector, el) {
-  let hit = clipAt(t, selector)
-  for (let n = el && el.parentElement, i = 0; !hit && n && n.tagName !== "BODY" && i < CLIP_ANCESTORS; n = n.parentElement, i++) hit = clipAt(t, cssPath(n))
-  if (!hit || !hit.clip) return null
-  const c = hit.clip
+  if (!el) {
+    try {
+      el = findEl(selector, D.frame.contentDocument)
+    } catch {}
+  }
+  if (!el) return null
+  const at = (c) => c.start <= t + 0.5 && (c.end == null || t <= c.end + 0.5)
+  const latest = (list) => list.filter(at).sort((a, b) => b.start - a.start)[0] || null
+  let node = el
+  let c = latest(clipsOn(el).filter((x) => !x.pseudoElement))
+  for (let n = el.parentElement, i = 0; !c && n && n.tagName !== "BODY" && n.tagName !== "HTML" && i < CLIP_ANCESTORS; n = n.parentElement, i++) {
+    c = latest(clipsOn(n).filter((x) => !x.pseudoElement && clipMoves(x)))
+    node = n
+  }
+  if (!c) return null
   const end = c.end == null ? null : c.end
-  return { id: c.id, offset: Math.round(hit.offset), duration: end == null ? null : Math.round(end - c.start), label: c.label || c.property || c.kind, kind: c.kind, property: c.property || null, selector: c.selector || null }
+  return { id: c.id, offset: Math.round(t - c.start), duration: end == null ? null : Math.round(end - c.start), start: Math.round(c.start), end: end == null ? null : Math.round(end), label: c.label || c.property || c.kind, kind: c.kind, property: c.property || null, selector: selectorInfo(node).selector || c.selector || null }
+}
+// The clips on the element itself: in its subtree (clipsFor, by recorded
+// path), and not in any child's.
+function clipsOn(el) {
+  const all = clipsOfElement(el)
+  if (!all.length) return []
+  const inKids = new Set()
+  for (const k of el.children) for (const c of clipsOfElement(k)) inKids.add(c)
+  return all.filter((c) => !inKids.has(c))
 }
+const clipMoves = (c) => [c.property, ...Object.keys(c.from || {}), ...Object.keys(c.to || {})].filter(Boolean).flatMap((p) => String(p).split(/,\s*/)).some((p) => MOVES_IT.test(p))
 const clipPhrase = (c) =>
   `${c.offset}ms into ${c.duration != null ? `a ${c.duration}ms` : "a running"} ${c.property ? `${c.property} ` : ""}${c.kind === "transition" ? "transition" : c.kind === "css-animation" ? `animation (${c.label})` : c.kind === "waapi" ? "animation" : c.label || "animation"}${c.selector ? ` on ${c.selector}` : ""}`
 
+// Where the element was written, or why that isn't known.
+const sourceText = (s) =>
+  s.compiled ? "not mapped (only a compiled bundle, no source map): find it by the component and selector" : `${s.file}${s.line ? `:${s.line}` : ""}`
+
 // The note as a prompt for a coding agent: what to change, where it is in
-// the code, and the moment it's about.
+// the code, the moment and, for an animation, the exact point or range on its
+// own clock. One formatter for this and `retake mcp` (src/note-text.js, NT).
 function prompt(n) {
   const b = branchById(n.branchId)
-  const start = D.last ? D.last.start : 0
   const parent = b && branchById(b.parentId)
   const el = n.el
-  const lines = [`## ${n.text}`, "", `Page: ${el.page}`, `Element: ${el.label}${el.text ? ` "${el.text}"` : ""}`, `Selector: ${el.selector}`]
-  if (el.components.length) lines.push(`Component: ${el.components.join(" < ")}`)
-  if (el.pseudo) lines.push(`Animation: ${pseudoSentence(el)}`)
-  if (el.cssSource) lines.push(`CSS: ${el.cssSource.file}${el.cssSource.line ? `:${el.cssSource.line}` : ""}${el.cssSource.keyframes && el.cssSource.keyframes.line ? ` (@keyframes ${el.cssSource.keyframes.name} at ${el.cssSource.keyframes.file}:${el.cssSource.keyframes.line})` : ""}`)
-  if (el.source) lines.push(`Source: ${el.source.file}${el.source.line ? `:${el.source.line}` : ""}`)
-  if (el.classes && el.classes.length) lines.push(`Classes: ${el.classes.join(" ")}`)
   const st = el.styles || {}
-  if (Object.keys(st).length) lines.push(`Computed: ${Object.entries(st).map(([k, v]) => `${k}: ${v}`).join("; ")}`)
-  lines.push(`Size: ${el.rect.w}×${el.rect.h} at (${el.rect.x}, ${el.rect.y})`)
-  lines.push(`Moment: ${fmt(n.t - start)} into the recording${n.clip ? `, ${clipPhrase(n.clip)}` : ", nothing animating"}`)
-  lines.push(`Timeline: "${b ? b.name : "Timeline"}"${parent ? `, branched from "${parent.name}" at ${fmt(b.forkAt - start)}` : ""}`)
-  const agent = (n.replies || []).filter((r) => r.from === "agent")
-  if (agent.length) lines.push("", "Earlier replies:", ...agent.map((r) => `- ${r.text}`))
-  return lines.join("\n")
+  const extra = []
+  if (el.pseudo) extra.push(`Animation: ${pseudoSentence(el)}`)
+  // What an animation changes is given at the note's own point below; the
+  // styles read when the composer opened would only contradict it.
+  const moving = n.anims && n.anims.length ? /^(transform|opacity|animation-name|transition)$/ : null
+  const shown = Object.entries(st).filter(([k]) => !moving || !moving.test(k))
+  if (shown.length) extra.push(`Computed: ${shown.map(([k, v]) => `${k}: ${v}`).join("; ")}`)
+  return NT.noteText(noteForServer(n), {
+    start: D.last ? D.last.start : 0,
+    timeline: b ? b.name : "Timeline",
+    parent: parent ? parent.name : null,
+    forkAt: b ? b.forkAt : null,
+    sourceLine: el.source ? `Source: ${sourceText(el.source)}` : undefined,
+    computed: extra.join("\n") || undefined,
+  })
 }
 
 async function copy(text, btn) {
@@ -486,6 +1022,11 @@ function noteForServer(n) {
     status: n.status || "pending",
     replies: n.replies || [],
     el: n.el,
+    range: n.range || null,
+    target: n.target || null,
+    anims: n.anims || null,
+    inside: n.inside || [],
+    asked: n.asked || null,
   }
 }
 
@@ -500,7 +1041,7 @@ function noteFromServer(n) {
     classes: n.classes || [],
     source: n.source || null,
   }
-  return { id: n.id, branchId: n.branchId, t: n.t, text: n.text || "", el, clip: n.clip || null, status: n.status || "pending", replies: n.replies || [] }
+  return { id: n.id, branchId: n.branchId, t: n.t, text: n.text || "", el, clip: n.clip || null, status: n.status || "pending", replies: n.replies || [], range: n.range || null, target: n.target || null, anims: n.anims || null, inside: n.inside || [], asked: n.asked || null }
 }
 
 // A change from outside (an agent replied, or marked it resolved).
@@ -525,7 +1066,7 @@ function anchorOf(el) {
   const f = D.frame.getBoundingClientRect()
   let r = null
   try {
-    const node = el.selector && D.frame.contentDocument.querySelector(el.selector)
+    const node = findEl(el.selector, D.frame.contentDocument)
     if (node) r = node.getBoundingClientRect()
   } catch {}
   if (!r || (!r.width && !r.height)) r = { x: el.rect.x, y: el.rect.y, width: el.rect.w, height: el.rect.h }
@@ -585,9 +1126,24 @@ function pseudoInfo(layer) {
 function pseudoClip(t, desc) {
   const want = (c) => (c.pseudoElement || null) === desc.pseudo.pseudoElement
   const clips = timeline().clips.filter((c) => want(c) && c.start <= t && (c.end == null || c.end >= t))
-  const c = clips.find((c) => c.selector === desc.selector + desc.pseudo.pseudoElement) || clips[0]
+  let host = null
+  try {
+    host = findEl(desc.selector, D.frame.contentDocument)
+  } catch {}
+  const onHost = (c) => !!host && (c.selector === cssPath(host) + desc.pseudo.pseudoElement || nodeOfPseudoClip(c) === host)
+  const c = clips.find((c) => c.selector === desc.selector + desc.pseudo.pseudoElement) || clips.find(onHost) || clips[0]
   if (!c) return null
-  return { id: c.id, offset: Math.round(t - c.start), duration: c.end == null ? null : Math.round(c.end - c.start), label: c.label || desc.pseudo.animationName, kind: c.kind, property: c.property || null, selector: c.selector || null }
+  return { id: c.id, offset: Math.round(t - c.start), duration: c.end == null ? null : Math.round(c.end - c.start), start: Math.round(c.start), end: c.end == null ? null : Math.round(c.end), label: c.label || desc.pseudo.animationName, kind: c.kind, property: c.property || null, selector: c.selector || null }
+}
+// The element a ::before/::after clip is on (its selector without the pseudo-element).
+function nodeOfPseudoClip(c) {
+  const pe = c.pseudoElement || ""
+  const sel = c.selector && pe && c.selector.endsWith(pe) ? c.selector.slice(0, -pe.length) : c.selector
+  try {
+    return findEl(sel, D.frame.contentDocument)
+  } catch {
+    return null
+  }
 }
 // Where the animation is written in the CSS (the runtime reads Vite's
 // source maps); filled in when it answers.
@@ -628,13 +1184,14 @@ function shortClip(c) {
 }
 
 // Everything else about the element, folded away.
-function details(el) {
+function details(el, geo = null) {
   const rows = [["Selector", el.selector]]
   if (el.components && el.components.length) rows.push(["Component", el.components.join(" < ")])
-  if (el.source) rows.push(["Source", `${el.source.file}${el.source.line ? ":" + el.source.line : ""}`])
+  if (el.source) rows.push(["Source", sourceText(el.source)])
   if (el.pseudo) rows.push(["Animation", pseudoSentence(el)])
   if (el.cssSource) rows.push(["CSS", `${el.cssSource.file}${el.cssSource.line ? ":" + el.cssSource.line : ""}`])
   if (el.classes && el.classes.length) rows.push(["Classes", el.classes.join(" ")])
+  if (geo && geo.page) rows.push(["Box", `x ${Math.round(geo.page.x)} y ${Math.round(geo.page.y)} · ${Math.round(geo.page.w)}×${Math.round(geo.page.h)} (page)${geo.decomposed && (geo.decomposed.tx || geo.decomposed.ty) ? ` · translate ${geo.decomposed.tx}, ${geo.decomposed.ty}` : ""}${geo.opacity != null && geo.opacity !== 1 ? ` · opacity ${+Number(geo.opacity).toFixed(2)}` : ""}`])
   return `<details class="details"><summary>Details</summary><dl>${rows.map(([k, v]) => `<dt>${k}</dt><dd>${esc(v)}</dd>`).join("")}</dl></details>`
 }
 
@@ -653,27 +1210,48 @@ function openComposer(el, point, layer) {
     lookUpCss(desc, layer.anim)
   }
   const clip = desc.pseudo ? pseudoClip(t, desc) : clipFor(t, desc.selector, el)
-  draft = { el: desc, t, clip }
+  draft = { el: desc, t, clip, picked: layer && layer.picked ? layer.picked : null, asked: null, askedReading: null }
   openNote = null
-  card.innerHTML = `${meta(t, draft.el)}<textarea rows="3" placeholder="What should change here?"></textarea>
+  // The element becomes the dock's focus: its own animations get a row on the track (32-anims.js).
+  focusOn(el, layer, t)
+  card.innerHTML = `${meta(t, draft.el)}<div class="note-at" hidden></div><textarea rows="3" placeholder="What should change here?"></textarea>
+    <button class="note-asked" data-note-a="asked" hidden></button>
     <div class="note-actions"><button data-note-a="cancel">Cancel</button><button data-note-a="save" class="primary">Add note</button></div>`
   card.hidden = false
+  refreshComposer()
   placeCard(anchorOf(draft.el))
   const ta = card.querySelector("textarea")
   setTimeout(() => ta.focus())
+  ta.addEventListener("input", updateAsked)
   // Enter saves and folds the note down to its pin; Shift+Enter is a new line.
   ta.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault()
       saveDraft()
     }
-    if (e.key === "Escape") closeCard()
+    if (e.key === "Escape") {
+      e.stopPropagation()
+      if (!closeFocusClip()) closeCard()
+    }
   })
 }
 
 function saveDraft() {
   const text = card.querySelector("textarea").value.trim()
-  if (draft && text) D.notes.push({ id: newNoteId(), t: draft.t, branchId: D.activeId, text, el: draft.el, clip: draft.clip, status: "pending", replies: [] })
+  if (draft && text) {
+    updateAsked()
+    let extra = { t: draft.t, range: null, target: null, anims: null, inside: [], asked: null }
+    try {
+      extra = notePayload(draft)
+    } catch (err) {
+      console.error("[retake] couldn't describe the note's animations", err)
+    }
+    // A note moved to another moment on the element's row: its clip summary follows.
+    const clip = extra.t !== draft.t && !draft.el.pseudo ? clipFor(extra.t, draft.el.selector, D.focus && D.focus.el) : draft.clip
+    // A dragged range wins over numbers typed in the note.
+    const asked = extra.range && D.focus && D.focus.open ? null : extra.asked
+    D.notes.push({ id: newNoteId(), t: extra.t, branchId: D.activeId, text, el: draft.el, clip, status: "pending", replies: [], range: extra.range, target: extra.target, anims: extra.anims, inside: extra.inside, asked })
+  }
   closeCard()
   // Back to the Hand so the next click is on the prototype, not another note.
   setPicking(null)
@@ -688,9 +1266,11 @@ function showNote(n) {
     .map((r) => `<div class="reply ${r.from === "agent" ? "agent" : "user"}"><span class="who">${r.from === "agent" ? "Agent" : "You"}</span>${esc(r.text)}</div>`)
     .join("")
   const status = n.status || "pending"
+  const at = n.anims ? NT.atPhrase(noteForServer(n)) : null
+  const clipLine = at || (n.clip ? shortClip(n.clip) : "")
   card.innerHTML = `${meta(n.t, n.el, n.branchId)}<p class="note-text">${esc(n.text)}</p>
-    ${n.clip ? `<div class="note-clip">${esc(shortClip(n.clip))}</div>` : ""}
-    ${details(n.el)}
+    ${clipLine ? `<div class="note-clip">${esc(clipLine)}</div>` : ""}
+    ${details(n.el, n.target && n.target.geometry)}
     ${replies ? `<div class="replies">${replies}</div>` : ""}
     <div class="note-actions"><span class="status s-${esc(status)}">${esc(status[0].toUpperCase() + status.slice(1))}</span>
       <button data-note-a="delete" class="quiet">Delete</button>
@@ -699,6 +1279,11 @@ function showNote(n) {
   if (keepOpen) card.querySelector(".details").open = true
   card.hidden = false
   placeCard(anchorOf(n.el))
+  // Its element row, opened clip and range come back with it.
+  if (n.anims && n.anims.length && (!D.focus || D.focus.note !== n)) {
+    focusFromNote(n)
+    if (D.focus) D.focus.note = n
+  }
 }
 
 // Tell the server about a status change (the session save carries it too).
@@ -711,6 +1296,7 @@ function closeCard() {
   card.hidden = true
   draft = null
   openNote = null
+  clearFocus()
 }
 
 // Returns true when the click was one of ours.
@@ -718,6 +1304,10 @@ function handleNoteClick(b) {
   const act = b.dataset.noteA
   if (act === "save") saveDraft()
   if (act === "cancel") closeCard()
+  if (act === "asked" && draft) {
+    draft.askedReading = draft.askedReading === "recording" ? null : "recording"
+    updateAsked()
+  }
   if (act === "copy" && openNote) {
     copy(prompt(openNote), b)
     // Copied: fold the note back to its pin.
@@ -805,6 +1395,10 @@ function renderExtras(s) {
     t.classList.toggle("on", t.dataset.tool === tool)
     t.setAttribute("aria-selected", String(t.dataset.tool === tool))
   }
+  syncEmbeds()
+  watchClasses(D.frame)
+  if (D.building) watchClasses(D.building.frame)
+  document.body.classList.toggle("picking-notes", mode() === "comment")
 
   updateLens()
   renderLayers()