@hyperframes/inspector 0.8.156 → 0.8.158

package/dist/live.js

@@ -4,6 +4,263 @@ import { createRequire } from "node:module"; const require = createRequire(impor
 import { randomUUID } from "node:crypto";
 import { readFileSync as readFileSync2, realpathSync } from "node:fs";
 
+// src/authoredState.ts
+var PLAIN_CLASS = /^[a-zA-Z_-][\w-]*$/;
+function withAuthoredState(snapshot, sources) {
+  const byHfId = group(sources.htmlTags, (tag) => tag.hfId);
+  const byId = group(sources.htmlTags, (tag) => tag.id);
+  const live = snapshot.nodes;
+  const matched = live.map((node) => sourceTag(node, byHfId, byId));
+  const generated = generatedInsideText(live, matched, sources);
+  const nodes = live.map(
+    (node, index) => generated.has(index) ? steadyGenerated(node, live, generated) : authoredNode(node, matched[index], sources, live)
+  );
+  return { ...snapshot, nodes };
+}
+function authoredNode(node, tag, sources, live) {
+  if (!tag) return node;
+  const text = directText(sources, tag) ?? node.text;
+  const id = node.id || tag.id || "";
+  const classes = authoredClasses(node, tag, live);
+  const next = { ...node, text, id };
+  return classes ? { ...next, ...classes } : next;
+}
+function generatedInsideText(live, matched, sources) {
+  const generated = /* @__PURE__ */ new Set();
+  for (const [index, tag] of matched.entries()) {
+    if (!tag || !directText(sources, tag)) continue;
+    for (const child of live[index].children)
+      if (!matched[child]) markGenerated(child, live, matched, generated);
+  }
+  return generated;
+}
+function markGenerated(index, live, matched, generated) {
+  if (generated.has(index) || matched[index]) return;
+  generated.add(index);
+  for (const child of live[index].children) markGenerated(child, live, matched, generated);
+}
+function steadyGenerated(node, live, generated) {
+  const siblings = node.parent === null ? [node] : live[node.parent].children.map((index) => live[index]);
+  const siblingMatchCount = siblings.filter(
+    (other) => generated.has(other.index) && other.tag === node.tag
+  ).length;
+  return {
+    ...node,
+    id: "",
+    classes: [],
+    text: "",
+    generated: true,
+    groupSelector: node.tag,
+    relative: `${node.tag}:nth-child(${node.position})`,
+    siblingMatchCount
+  };
+}
+function group(tags, key) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const tag of tags) {
+    const value = key(tag);
+    if (value) groups.set(value, [...groups.get(value) ?? [], tag]);
+  }
+  return groups;
+}
+function sourceTag(node, byHfId, byId) {
+  const named = node.hfId && byHfId.get(node.hfId) || node.id && byId.get(node.id) || [];
+  const matches = named.filter((tag) => tag.tag === node.tag);
+  return matches.length === 1 ? matches[0] : void 0;
+}
+var RAW_TEXT = /* @__PURE__ */ new Set(["script", "style", "textarea", "title", "xmp", "noembed", "noframes"]);
+var VOID = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function directText(sources, tag) {
+  const text = sources.files.get(tag.file)?.text;
+  if (text === void 0) return null;
+  if (VOID.has(tag.tag)) return "";
+  return normalizedInner(text, tag);
+}
+function normalizedInner(text, tag) {
+  const inner = sliceUntilClose(text, tag.end, tag.tag);
+  if (inner === null) return null;
+  return decodeEntities(textNodes(inner)).replace(/\s+/g, " ").trim();
+}
+function sliceUntilClose(html, from, tag) {
+  const end = closeOffset(html, from, tag, 1);
+  return end === null ? null : html.slice(from, end);
+}
+function closeOffset(html, from, tag, depth) {
+  let cursor = from;
+  let level = depth;
+  for (; ; ) {
+    const step = closeStep(html, cursor, tag, level);
+    if (!step) return null;
+    if (step.done) return step.at;
+    cursor = step.at;
+    level = step.depth;
+  }
+}
+function closeStep(html, from, tag, depth) {
+  const found = nextMarkup(html, from);
+  if (!found) return null;
+  if (found.kind !== "tag") return { at: found.end, depth, done: false };
+  if (isRawOpen(found)) return rawStep(html, found, depth);
+  return tagStep(found, tag, depth);
+}
+function isRawOpen(found) {
+  return !found.closing && RAW_TEXT.has(found.name);
+}
+function rawStep(html, found, depth) {
+  const rawEnd = rawElementEnd(html.toLowerCase(), found.name, found.bracket);
+  if (rawEnd < 0) return null;
+  return { at: rawEnd, depth, done: false };
+}
+function tagStep(found, tag, depth) {
+  const same = found.name === tag && !VOID.has(found.name);
+  if (!same || !found.closing) return openStep(found, depth, same);
+  return closingStep(found, depth);
+}
+function closingStep(found, depth) {
+  if (depth === 1) return { at: found.start, depth, done: true };
+  return { at: found.bracket + 1, depth: depth - 1, done: false };
+}
+function openStep(found, depth, same) {
+  const nextDepth = same ? depth + 1 : depth;
+  return { at: found.bracket + 1, depth: nextDepth, done: false };
+}
+function textNodes(inner) {
+  const found = nextMarkup(inner, 0);
+  if (!found) return inner;
+  return inner.slice(0, found.start) + textAfter(inner, found);
+}
+function textAfter(inner, found) {
+  if (found.kind !== "tag") return textNodes(inner.slice(found.end));
+  return textAfterTag(inner, found);
+}
+function textAfterTag(inner, found) {
+  if (skipsTag(found)) return textNodes(inner.slice(found.bracket + 1));
+  if (RAW_TEXT.has(found.name)) return textAfterRaw(inner, found);
+  return textAfterChild(inner, found);
+}
+function skipsTag(found) {
+  return found.closing || VOID.has(found.name);
+}
+function textAfterRaw(inner, found) {
+  const rawEnd = rawElementEnd(inner.toLowerCase(), found.name, found.bracket);
+  return textNodes(inner.slice(rawEnd < 0 ? inner.length : rawEnd));
+}
+function textAfterChild(inner, found) {
+  const child = sliceUntilClose(inner, found.bracket + 1, found.name);
+  if (child === null) return "";
+  const closeBracket = inner.indexOf(">", found.bracket + 1 + child.length);
+  return textNodes(inner.slice(closeBracket < 0 ? inner.length : closeBracket + 1));
+}
+function nextMarkup(html, from) {
+  const start = html.indexOf("<", from);
+  if (start < 0) return null;
+  return markupAt(html, start);
+}
+function markupAt(html, start) {
+  const skipped = skippedMarkup(html, start);
+  if (skipped) return skipped;
+  return tagMarkup(html, start);
+}
+function skippedMarkup(html, start) {
+  if (html.startsWith("<!--", start)) return boundedSkip(html, start, "-->", 4);
+  if (html.startsWith("<!", start) || html.startsWith("<?", start))
+    return boundedSkip(html, start, ">", 1);
+  return null;
+}
+function boundedSkip(html, start, marker, from) {
+  const end = html.indexOf(marker, start + from);
+  return end < 0 ? null : { kind: "skip", start, end: end + marker.length };
+}
+function tagMarkup(html, start) {
+  const name = /^<\/?([a-zA-Z][^\s/>]*)/.exec(html.slice(start, start + 128));
+  if (!name) return { kind: "skip", start, end: start + 1 };
+  const bracket = closingBracket(html, start + name[0].length);
+  if (bracket < 0) return null;
+  return {
+    kind: "tag",
+    start,
+    name: name[1].toLowerCase(),
+    closing: html[start + 1] === "/",
+    bracket
+  };
+}
+function rawElementEnd(lower, tag, openBracket) {
+  const marker = `</${tag}`;
+  const at2 = nextRawClose(lower, marker, openBracket + 1);
+  if (at2 < 0) return -1;
+  const bracket = lower.indexOf(">", at2 + marker.length);
+  return bracket < 0 ? -1 : bracket + 1;
+}
+function nextRawClose(lower, marker, from) {
+  const at2 = lower.indexOf(marker, from);
+  if (at2 < 0) return -1;
+  const next = lower[at2 + marker.length];
+  if (closesRawText(next)) return at2;
+  return nextRawClose(lower, marker, at2 + marker.length);
+}
+function closesRawText(next) {
+  return next !== void 0 && /[\s/>]/.test(next);
+}
+function closingBracket(html, from) {
+  let quote = "";
+  for (let i = from; i < html.length; i++) {
+    const c = html[i];
+    if (quote) quote = c === quote ? "" : quote;
+    else if (c === '"' || c === "'") quote = c;
+    else if (c === ">") return i;
+  }
+  return -1;
+}
+function decodeEntities(value) {
+  return value.replace(
+    /&(#x[0-9a-f]+|#\d+|amp|lt|gt|quot|apos|nbsp);/gi,
+    (entity, body) => {
+      const named = {
+        amp: "&",
+        lt: "<",
+        gt: ">",
+        quot: '"',
+        apos: "'",
+        nbsp: " "
+      };
+      const lower = body.toLowerCase();
+      if (lower in named) return named[lower];
+      const code = Number.parseInt(
+        lower.slice(lower.startsWith("#x") ? 2 : 1),
+        lower.startsWith("#x") ? 16 : 10
+      );
+      return Number.isInteger(code) && code >= 0 && code <= 1114111 ? String.fromCodePoint(code) : entity;
+    }
+  );
+}
+function authoredClasses(node, tag, live) {
+  const classes = [...tag.classes];
+  if (classes.join(" ") === node.classes.join(" ")) return null;
+  if (!classes.every((c) => PLAIN_CLASS.test(c) && node.classes.includes(c))) return null;
+  const simple = `${node.tag}${classes.map((c) => `.${c}`).join("")}`;
+  const siblings = node.parent === null ? [node] : live[node.parent].children.map((i) => live[i]);
+  const siblingMatchCount = siblings.filter(
+    (other) => other.tag === node.tag && classes.every((c) => other.classes.includes(c))
+  ).length;
+  const relative2 = node.relative.startsWith("#") ? node.relative : siblingMatchCount === 1 ? simple : `${node.tag}:nth-child(${node.position})`;
+  return { classes, groupSelector: simple, siblingMatchCount, relative: relative2 };
+}
+
 // src/elementMap.js
 import { createHash } from "node:crypto";
 function collectElementDom() {
@@ -63,6 +320,7 @@ function collectElementDom() {
       text: [...element.childNodes].filter((child) => child.nodeType === 3).map((child) => child.textContent).join("").replace(/\s+/g, " ").trim(),
       media: ["img", "video", "audio", "source", "iframe"].includes(tag) ? element.getAttribute("src") : null,
       relative: element.id && document.querySelectorAll(`#${CSS.escape(element.id)}`).length === 1 ? `#${CSS.escape(element.id)}` : siblingCount(element, simple) === 1 ? simple : `${CSS.escape(tag)}:nth-child(${siblings.indexOf(element) + 1})`,
+      position: siblings.indexOf(element) + 1,
       groupSelector: simple,
       siblingMatchCount: siblingCount(element, simple),
       children: []
@@ -106,10 +364,26 @@ function mediaIdentifier(source) {
   if (source.startsWith("blob:")) return "blob:runtime";
   return source;
 }
-function describe(node, selector, count) {
+function childPlaces(members) {
+  const runs = [];
+  let start = members[0].position;
+  let previous = start;
+  for (const member of members.slice(1)) {
+    if (member.position === previous + 1) {
+      previous = member.position;
+      continue;
+    }
+    runs.push(start === previous ? `${start}` : `${start}-${previous}`);
+    start = previous = member.position;
+  }
+  runs.push(start === previous ? `${start}` : `${start}-${previous}`);
+  return runs.join(",");
+}
+function describe(node, selector, count, places = "") {
   const fields = [selector];
   if (!selector.startsWith(node.tag)) fields.push(node.tag);
-  if (count > 1) fields.push(`\xD7${count}`);
+  if (count > 1) fields.push(`\xD7${count}${places ? ` @${places}` : ""}`);
+  if (node.generated) fields.push("(generated)");
   if (node.id && selector !== `#${node.id}`) fields.push(`id=${JSON.stringify(node.id)}`);
   if (node.classes.length && !selector.includes("."))
     fields.push(`class=${JSON.stringify(node.classes.join(" "))}`);
@@ -132,8 +406,8 @@ function formatElementMap(snapshot, { file = "index.html" } = {}) {
       if (!node.id && previous?.key === key) previous.indices.push(index);
       else groups.push({ key, indices: [index] });
     }
-    for (const group of groups) {
-      const members = group.indices.map((index) => nodes[index]);
+    for (const group2 of groups) {
+      const members = group2.indices.map((index) => nodes[index]);
       const node = members[0];
       const exactGroup = members.length > 1 && node.siblingMatchCount === members.length;
       if (members.length > 1 && !exactGroup) {
@@ -144,7 +418,8 @@ function formatElementMap(snapshot, { file = "index.html" } = {}) {
   function emit(members, depth, repeatedParents = false) {
     const node = members[0];
     const selector = members.length > 1 && !repeatedParents ? node.groupSelector : node.relative;
-    lines.push(`${"  ".repeat(depth)}${describe(node, selector, members.length)}`);
+    const places = members.length > 1 && !repeatedParents ? childPlaces(members) : "";
+    lines.push(`${"  ".repeat(depth)}${describe(node, selector, members.length, places)}`);
     entries.push({
       line: lines.length,
       selectors: members.map((member) => member.selector),
@@ -371,6 +646,36 @@ function rawTextElements(text, tag) {
   }
   return elements;
 }
+function htmlTagsOf(file, text) {
+  return [...text.matchAll(/<([a-z][\w-]*)\b[^>]*>/gi)].map((m) => {
+    const attr = (name) => {
+      const quoted = new RegExp(`\\s${name}\\s*=\\s*["']([^"']*)["']`, "i").exec(m[0]);
+      if (quoted) return quoted[1];
+      return new RegExp(`\\s${name}\\s*=\\s*([^\\s"'=<>]+)`, "i").exec(m[0])?.[1];
+    };
+    return {
+      file,
+      start: m.index,
+      end: m.index + m[0].length,
+      tag: m[1].toLowerCase(),
+      id: attr("id"),
+      hfId: attr("data-hf-id"),
+      classes: (attr("class") ?? "").split(/\s+/).filter(Boolean)
+    };
+  });
+}
+function authoredHtml(project) {
+  const html = { files: /* @__PURE__ */ new Map(), htmlTags: [] };
+  for (const path of sourceFiles(project)) {
+    const file = relative(project, path);
+    if (!file.endsWith(".html") || /(?:^|\/)(?:vendor|lib)\//.test(file)) continue;
+    const text = readFileSync(path, "utf8");
+    if (text.length > 2e6) continue;
+    html.files.set(file, { text });
+    html.htmlTags.push(...htmlTagsOf(file, text));
+  }
+  return html;
+}
 var Sources = class {
   constructor(project) {
     this.project = project;
@@ -394,18 +699,7 @@ var Sources = class {
             this.addChunk(file, script.content, script.contentStart);
         for (const style of rawTextElements(text, "style"))
           this.addCss(file, style.content, style.contentStart);
-        for (const m of text.matchAll(/<([a-z][\w-]*)\b[^>]*>/gi)) {
-          const attr = (name) => new RegExp(`\\s${name}\\s*=\\s*["']([^"']*)["']`, "i").exec(m[0])?.[1];
-          this.htmlTags.push({
-            file,
-            start: m.index,
-            end: m.index + m[0].length,
-            tag: m[1].toLowerCase(),
-            id: attr("id"),
-            hfId: attr("data-hf-id"),
-            classes: (attr("class") ?? "").split(/\s+/).filter(Boolean)
-          });
-        }
+        this.htmlTags.push(...htmlTagsOf(file, text));
       }
     }
   }
@@ -470,8 +764,10 @@ var Sources = class {
     };
   }
   markup(element, target) {
-    const tags = this.htmlTags.filter(
-      (tag) => tag.tag === element.tag && (element.hfId ? tag.hfId === element.hfId : element.id ? tag.id === element.id : element.classes.length > 0 && element.classes.every((c) => tag.classes.includes(c)))
+    const sameTag = this.htmlTags.filter((tag) => tag.tag === element.tag);
+    const byHfId = element.hfId ? sameTag.filter((tag) => tag.hfId === element.hfId) : [];
+    const tags = byHfId.length ? byHfId : sameTag.filter(
+      (tag) => element.id ? tag.id === element.id : element.classes.length > 0 && element.classes.every((c) => tag.classes.includes(c))
     );
     return tags.length === 1 ? this.slice(tags[0].file, tags[0].start, tags[0].end, "html opening tag", target) : null;
   }
@@ -616,8 +912,8 @@ function mapInspection(raw, request, context) {
     return {
       target: index,
       status: result.status,
-      candidates: result.candidates.slice(0, 5),
-      candidatesOmitted: Math.max(0, result.candidates.length - 5),
+      candidates: result.candidates,
+      candidatesOmitted: 0,
       animations: result.animations.length,
       coTargets: [
         ...new Map(
@@ -656,22 +952,30 @@ function mapInspection(raw, request, context) {
   const offset = request.offset ?? 0;
   if (!Number.isInteger(offset) || offset < 0)
     throw new Error("offset must be a non-negative integer");
+  const size = () => Buffer.byteLength(JSON.stringify(response));
+  const trimCandidates = (limit, keep) => {
+    while (size() > limit) {
+      const longest = response.results.reduce(
+        (a, b) => b.candidates.length > a.candidates.length ? b : a
+      );
+      if (longest.candidates.length <= keep) return;
+      longest.candidates.pop();
+      longest.candidatesOmitted++;
+    }
+  };
+  trimCandidates(maxBytes / 2, 5);
   for (let i = offset; i < selected.length; i++) {
-    const snippet = selected[i];
-    response.snippets.push(snippet);
-    if (Buffer.byteLength(JSON.stringify(response)) > maxBytes - 700) {
+    response.snippets.push(selected[i]);
+    if (size() > maxBytes - 700) {
       response.snippets.pop();
       response.omittedCount = selected.length - i;
       response.omitted = selected.slice(i, i + 8).map((item) => ({ id: item.id, bytes: Buffer.byteLength(item.code) }));
-      response.nextOffset = i;
+      const nothingFit = response.snippets.length === 0;
+      response.nextOffset = nothingFit ? i + 1 < selected.length ? i + 1 : null : i;
       break;
     }
   }
-  while (Buffer.byteLength(JSON.stringify(response)) > maxBytes && response.results.some((r) => r.candidates.length)) {
-    const r = response.results.find((r2) => r2.candidates.length);
-    r.candidates.pop();
-    r.candidatesOmitted++;
-  }
+  trimCandidates(maxBytes, 0);
   if (Buffer.byteLength(JSON.stringify(response)) > maxBytes)
     throw new Error("metadata_exceeds_budget: use fewer targets or increase maxBytes");
   if (request.debug) return { ...response, debug: raw };
@@ -695,7 +999,8 @@ function timelinePage(request) {
   const result = inspection.timeline(request);
   const following = [];
   const generation = inspected.__hfLiveInspection?.generation ?? null;
-  if (request.boundary === void 0) return { ...result, following, generation };
+  const duration = inspected.__player?.getDuration();
+  if (request.boundary === void 0) return { ...result, following, generation, duration };
   const boundary = request.boundary;
   const schedule = inspection.timeline({ ...request, boundary: void 0 });
   for (const crossing of result.events) {
@@ -707,7 +1012,7 @@ function timelinePage(request) {
       if (next && !following.includes(next)) following.push(next);
     }
   }
-  return { ...result, following, generation };
+  return { ...result, following, generation, duration };
 }
 function liveGenerationPage() {
   return window.__hfLiveInspection?.generation ?? null;
@@ -722,13 +1027,13 @@ var COVERAGE_NOTE = "Observed DOM-target GSAP and explicit HF items only; callba
 var BOUNDARY_NOTE = "only actions crossing, starting, ending or instantaneous here. Later stagger members are excluded, not absent. Group spans do not imply simultaneous starts. Target labels T1, T2, ... identify the same element within this response, not DOM order.";
 function formatTimeline(raw, request, view) {
   const offset = request.offset ?? 0;
-  const allGroups = groupEvents(raw.events);
+  const allGroups = byComponent(groupEvents(raw.events));
   const groups = allGroups.slice(offset, offset + GROUPS_PER_PAGE);
   const label = labeler();
   const events = groups.flat().map((event, index) => ({
     ...event,
     stack: void 0,
-    sources: (event.stack ? view.map(event.stack, index) : []).map((s) => ({
+    sources: onePerSourceLine(event.stack ? view.map(event.stack, index) : []).map((s) => ({
       file: s.file,
       line: s.startLine
     }))
@@ -737,11 +1042,14 @@ function formatTimeline(raw, request, view) {
   const lines = [
     `Timeline \xB7 global seconds \xB7 ${raw.status}`,
     `generation: ${view.generation}`,
-    ...raw.status !== "found" ? raw.candidates.map((c) => `${c.ref} #${c.id} ${c.tag}`) : [],
+    ...raw.status !== "found" ? raw.candidates.map(
+      (c) => `${c.ref} ${targetSummary([c])[0]} ${c.tag}${c.composition ? ` in ${c.composition}` : ""}`
+    ) : [],
+    ...pastTheEnd(request, raw.duration),
     ...request.boundary !== void 0 ? [`Boundary ${request.boundary}s: ${BOUNDARY_NOTE}`] : [],
     ...describeGroups(groups, request, view.map, label),
     ...describeFollowing(raw, view.map, label),
-    ...describeRelations(events),
+    ...describeRelations(groups),
     ...nextOffset !== null ? [`More groups: repeat with offset=${nextOffset} and generation.`] : [],
     ...raw.warnings.map((w) => `Coverage: ${w}`),
     ...events.some((e) => e.values) ? [
@@ -777,6 +1085,21 @@ function groupEvents(events) {
   }
   return [...groups.values()];
 }
+var headingOf = (event) => event.component?.id ? `#${event.component.id}` : event.component?.composition ?? "unassigned";
+function byComponent(groups) {
+  const owners = /* @__PURE__ */ new Map();
+  for (const group2 of groups) {
+    const heading = headingOf(group2[0]);
+    owners.set(heading, [...owners.get(heading) ?? [], group2]);
+  }
+  return [...owners.values()].flat();
+}
+function pastTheEnd(request, duration) {
+  const from = request.range?.[0] ?? request.at ?? request.boundary;
+  const filmLength = duration !== void 0 && duration > 0 ? duration : void 0;
+  if (filmLength === void 0 || from === void 0 || from < filmLength) return [];
+  return [`Requested time is past the end: the film is ${Number(filmLength.toFixed(4))}s long.`];
+}
 function labeler() {
   const labels = /* @__PURE__ */ new Map();
   return (ref) => {
@@ -785,10 +1108,15 @@ function labeler() {
   };
 }
 var at = (seconds) => seconds.toFixed(4);
-var located = (sources) => sources.map((s) => `${s.file}:${s.startLine}`).join(", ");
+function onePerSourceLine(sources) {
+  return [...new Map(sources.map((s) => [`${s.file}:${s.startLine}`, s])).values()];
+}
+var located = (sources) => onePerSourceLine(sources).map((s) => `${s.file}:${s.startLine}`).join(", ");
 function describeValue(value) {
   if (value.kind === "unknown") return "?";
-  return `${value.value}${value.kind === "literal" ? "" : ` (${value.kind})`}`;
+  if (value.kind === "expression" && value.value === "custom function") return "custom function";
+  const shown = typeof value.value === "number" ? Number(value.value.toFixed(4)) : value.value;
+  return `${shown}${value.kind === "literal" ? "" : ` (${value.kind})`}`;
 }
 function describeValues(values) {
   return `    authored: ${values.properties.map((p) => `${p.property}: ${describeValue(p.from)} \u2192 ${describeValue(p.to)}`).join("; ")}; ease: ${describeValue(values.ease)}`;
@@ -805,7 +1133,7 @@ function describeGroups(groups, request, map, label) {
       targets: [...new Map(members.flatMap((e) => e.targets).map((t) => [t.ref, t])).values()]
     };
     const component = event.component;
-    const heading = component?.id ? `#${component.id}` : component?.composition ?? "unassigned";
+    const heading = headingOf(event);
     if (owner !== heading) {
       lines.push(`
 ${heading}${component ? ` [${component.ref}]` : ""}`);
@@ -835,7 +1163,8 @@ ${heading}${component ? ` [${component.ref}]` : ""}`);
 function targetSummary(targets) {
   const counts = /* @__PURE__ */ new Map();
   for (const target of targets) {
-    const name = target.id ? `#${target.id}` : target.hfId ?? (target.classes.length ? `.${target.classes.join(".")}` : target.tag);
+    const own = target.id ? `#${target.id}` : target.hfId ?? (target.classes.length ? `.${target.classes.join(".")}` : target.tag);
+    const name = !target.id && target.withinId ? `${own} in #${target.withinId}` : own;
     counts.set(name, (counts.get(name) ?? 0) + 1);
   }
   return [...counts].map(([name, count]) => count > 1 ? `${name} \xD7${count}` : name);
@@ -882,18 +1211,23 @@ function describeFollowing(raw, map, label) {
     lines.push(`  ${raw.following.length - FOLLOWING_SHOWN} additional following actions omitted.`);
   return lines;
 }
-function describeRelations(events) {
+function describeRelations(groups) {
   const lines = [];
+  const events = groups.flatMap((members, group2) => members.map((event) => ({ event, group: group2 })));
+  const described = /* @__PURE__ */ new Set();
   for (let a = 0; a < events.length; a++)
     for (let b = a + 1; b < events.length; b++) {
-      const left = events[a];
-      const right = events[b];
+      const left = events[a].event;
+      const right = events[b].event;
+      const pair = `${events[a].group}:${events[b].group}`;
+      if (described.has(pair)) continue;
       if (left.kind !== "animation" || right.kind !== "animation") continue;
       if (left.end < right.start || right.end < left.start) continue;
       const shared = left.targets.some((t) => right.targets.some((r) => r.ref === t.ref));
       const properties = left.properties.filter((p) => right.properties.includes(p));
       if (!shared || !properties.length || lines.length >= RELATIONS_SHOWN) continue;
       const kind = left.start === left.end || right.start === right.end ? "instantaneous action touches or occurs inside the other interval" : Math.min(left.end, right.end) > Math.max(left.start, right.start) ? "intervals overlap" : "touch at an endpoint only, no positive-duration overlap";
+      described.add(pair);
       lines.push(
         `Relation: ${at(left.start)}\u2013${at(left.end)} and ${at(right.start)}\u2013${at(right.end)} share targets and ${properties.join(",")}; ${kind}; not necessarily an error.`
       );
@@ -936,7 +1270,10 @@ async function inspectTimeline(runner, view, request, reused) {
 async function inspectElementMap(runner, view, file = "index.html") {
   const snapshot = await runner.run(collectElementDom, void 0);
   assertPageGeneration(view, snapshot.generation);
-  const map = formatElementMap(snapshot, { file });
+  const authored = view.authoredHtml?.();
+  const map = formatElementMap(authored ? withAuthoredState(snapshot, authored) : snapshot, {
+    file
+  });
   await view.assertCurrent();
   return { ...map, sourceVersion: view.sourceVersion, generation: view.generation };
 }
@@ -1005,6 +1342,7 @@ ${runtime()}`.replace(/<\/script/gi, "<\\/script");
   const prepared = html.replace(/<head\b[^>]*>/i, (head) => `${head}<script>${script}</script>`);
   let document2 = prepared;
   let context;
+  let authored;
   const catalog = /* @__PURE__ */ new Map();
   const view = {
     generation,
@@ -1017,6 +1355,9 @@ ${runtime()}`.replace(/<\/script/gi, "<\\/script");
       }
       return context;
     },
+    authoredHtml() {
+      return authored ??= authoredHtml(project);
+    },
     async assertCurrent() {
       if (fingerprint(project) !== sourceVersion)
         throw new Error("stale_preview: the project changed; query again once the preview reloads");