retake-dev 0.4.0

package/src/runtime/65-timeline.js

@@ -0,0 +1,289 @@
+// What the dock draws: markers (things you did) and clips (things that
+// animated), derived from the recording and the animation log. See
+// CONTRACT.md ("Runtime API").
+
+// ---- describing elements ------------------------------------------------------
+
+function cssEscape(s) {
+  return W.CSS && CSS.escape ? CSS.escape(s) : String(s).replace(/[^\w-]/g, (c) => "\\" + c)
+}
+
+// A readable, valid selector: an id if there is one, else tag.class chains
+// with :nth-of-type where needed, up to <body>.
+function selectorOf(el) {
+  if (!el || el.nodeType !== 1) return null
+  const parts = []
+  for (let n = el; n && n.nodeType === 1 && n.tagName !== "HTML"; n = n.parentElement) {
+    if (n.id) {
+      parts.unshift(`#${cssEscape(n.id)}`)
+      break
+    }
+    let part = n.tagName.toLowerCase()
+    const cls = [...n.classList].filter((c) => /^[a-z][\w-]*$/i.test(c)).slice(0, 2)
+    if (cls.length) part += "." + cls.map(cssEscape).join(".")
+    const same = n.parentElement ? [...n.parentElement.children].filter((c) => c.tagName === n.tagName) : []
+    if (same.length > 1) part += `:nth-of-type(${same.indexOf(n) + 1})`
+    parts.unshift(part)
+    if (n.tagName === "BODY") break
+  }
+  return parts.join(" > ")
+}
+
+// Nearest named React component, unwrapping memo/forwardRef.
+function componentOf(el) {
+  try {
+    const key = el && Object.keys(el).find((k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$"))
+    for (let f = key && el[key]; f; f = f.return) {
+      let t = f.type
+      if (t && typeof t === "object") t = t.render || t.type || null
+      if (t && typeof t === "object") t = t.render || null
+      const name = typeof t === "function" ? t.displayName || t.name : null
+      if (name && /^[A-Z]/.test(name)) return name
+    }
+  } catch {}
+  return null
+}
+
+function labelOf(el) {
+  if (!el || el.nodeType !== 1) return ""
+  const aria = el.getAttribute("aria-label") || el.getAttribute("title") || el.getAttribute("placeholder")
+  const text = aria || (el.innerText || el.textContent || "").trim().replace(/\s+/g, " ")
+  const tag = el.tagName.toLowerCase()
+  return text ? text.slice(0, 40) : tag + (el.id ? "#" + el.id : "")
+}
+
+// ---- markers ------------------------------------------------------------------
+
+// Markers are the user's actions only (causes, not effects): clicks,
+// submits, route changes, focus into a field, and typing, one marker per
+// burst (keystrokes under 800ms apart in one field) with an end.
+const TYPE_GAP = 800
+let markerCache = null
+function markersOf() {
+  const key = rec.events.length + ":" + (rec.routes ? rec.routes.length : 0) + ":" + (rec.start || 0)
+  if (markerCache && markerCache.key === key) return markerCache.value
+  const out = []
+  let burst = null
+  const start = rec.start || 0
+  for (const ev of rec.events) {
+    if (ev.t < start) continue
+    if (ev.type === "click") {
+      // Clicking into a field focused it first (on mousedown): one marker, the click.
+      const prev = out[out.length - 1]
+      if (prev && prev.kind === "focus" && prev.selector === ev.css && ev.t - prev.t < 1000) out.pop()
+      out.push({ t: ev.t, kind: "click", label: ev.label || "click", selector: ev.css || undefined })
+    }
+    else if (ev.type === "submit") out.push({ t: ev.t, kind: "submit", label: ev.label || "submit", selector: ev.css || undefined })
+    else if (ev.type === "focusin" && ev.editable) {
+      // Clicking into a field already made a click marker there.
+      const prev = out[out.length - 1]
+      if (!(prev && prev.kind === "click" && prev.selector === ev.css && ev.t - prev.t < 50)) out.push({ t: ev.t, kind: "focus", label: ev.label || "field", selector: ev.css || undefined })
+    } else if (ev.type === "input") {
+      const typed = /^insert/.test(ev.inputType || "insertText") ? (ev.data ? ev.data.length : 1) : 0
+      if (burst && burst.selector === (ev.css || undefined) && ev.t - burst.end < TYPE_GAP) {
+        burst.end = ev.t
+        burst.chars += typed
+      } else {
+        burst = { t: ev.t, end: ev.t, kind: "type", chars: typed, selector: ev.css || undefined }
+        out.push(burst)
+      }
+    }
+  }
+  for (const m of out) {
+    if (m.kind === "type") {
+      m.label = `typed ${m.chars} char${m.chars === 1 ? "" : "s"}`
+      delete m.chars
+    }
+  }
+  for (const r of rec.routes || []) if (r.t >= start) out.push({ t: r.t, kind: "route", label: r.path })
+  out.sort((a, b) => a.t - b.t)
+  markerCache = { key, value: out }
+  return out
+}
+
+// ---- clips --------------------------------------------------------------------
+
+function clipKind(a) {
+  if (typeof CSSTransition !== "undefined" && a instanceof CSSTransition) return "transition"
+  if (typeof CSSAnimation !== "undefined" && a instanceof CSSAnimation) return "css-animation"
+  return "waapi"
+}
+
+function clipEnd(e) {
+  if (e.vEnd != null) return e.vEnd
+  const t = e.timing || {}
+  const total = (Number(t.delay) || 0) + (Number(t.duration) || 0) * (t.iterations == null ? 1 : t.iterations) + (Number(t.endDelay) || 0)
+  return Number.isFinite(total) ? e.vStart + total / (e.rate || 1) : null
+}
+
+// Clips live in the recording (rec.clips), so a rebuilt frame still knows
+// the whole timeline's clips, including the ones after the playhead. They're
+// described once, when the animation starts at the live edge.
+const clipOfEntry = new WeakMap()
+function describeClip(e) {
+  const a = e.anim
+  const kind = clipKind(a)
+  const props = [...new Set((e.keyframes || []).flatMap((k) => Object.keys(k).filter((p) => !["offset", "easing", "composite", "computedOffset"].includes(p))))]
+  const property = kind === "transition" ? a.transitionProperty : props.join(", ") || undefined
+  const label = kind === "css-animation" ? a.animationName : kind === "transition" ? `${a.transitionProperty} transition` : props.length ? props.join(", ") : "animation"
+  const pseudo = (a.effect && a.effect.pseudoElement) || null
+  return { kind, label, selector: selectorOf(e.target) + (pseudo || ""), component: componentOf(e.target) || undefined, property, pseudoElement: pseudo }
+}
+// The recorded start of the clip a new animation replays, if there is one:
+// same element, kind and property/name, not yet claimed, started near now.
+const claimedClips = new WeakSet()
+function recordedStart(a) {
+  const target = a.effect && a.effect.target
+  if (!target || !rec || !rec.clips) return null
+  const path = pathOf(target)
+  if (!path || !Array.isArray(path)) return null
+  const key = path.join(",")
+  const kind = clipKind(a)
+  const pseudo = (a.effect && a.effect.pseudoElement) || null
+  const name = kind === "transition" ? a.transitionProperty : kind === "css-animation" ? a.animationName : null
+  let best = null
+  for (const c of rec.clips) {
+    if (claimedClips.has(c) || c.kind !== kind || (c.pseudoElement || null) !== pseudo || !c.path) continue
+    if (c.start > clock.now + 250 || c.start < clock.now - 250) continue
+    if (name != null && (kind === "transition" ? c.property : c.label) !== name) continue
+    if (c.path.join(",") !== key) continue
+    if (!best || Math.abs(c.start - clock.now) < Math.abs(best.start - clock.now)) best = c
+  }
+  if (!best) return null
+  claimedClips.add(best)
+  return best.start
+}
+
+function recordClip(e) {
+  if (!rec || hasFuture() || clock.seeking) return // replaying: rec.clips already has it
+  const clips = rec.clips || (rec.clips = [])
+  /** @type {Record<string, any>} */
+  const c = { id: `c${clips.length + 1}`, start: e.vStart, end: clipEnd(e), ...describeClip(e), path: pathOf(e.target) }
+  const iters = e.timing && e.timing.iterations
+  if (iters === Infinity) c.iterations = "infinite"
+  else if (iters > 1) c.iterations = iters
+  if (c.property === undefined) delete c.property
+  if (c.component === undefined) delete c.component
+  clips.push(c)
+  clipOfEntry.set(e, c)
+}
+function endClip(e) {
+  const c = clipOfEntry.get(e)
+  if (c && (c.end == null || e.vEnd < c.end)) c.end = e.vEnd
+}
+function clipsOf() {
+  const start = rec.start || 0
+  return (rec.clips || []).filter((c) => c.start >= start || (c.end != null && c.end >= start))
+}
+
+function timeline() {
+  return {
+    now: clock.now,
+    end: Math.max(rec.end, clock.now),
+    viewport: rec.viewport || { w: innerWidth, h: innerHeight },
+    markers: markersOf(),
+    clips: clipsOf(),
+    activity: activitySamples(),
+  }
+}
+
+// Clips on an element and everything inside it (for the dock's ⌘-hover
+// lens). Clips carry the DOM path of their element from when they were
+// recorded, so this is a prefix match, in any frame (or, for a path that
+// starts at an id inside the element, where it leads).
+const clipKeys = new WeakMap()
+function clipsFor(target) {
+  let el = target
+  if (typeof target === "string") {
+    try {
+      el = document.querySelector(target)
+    } catch {
+      el = null
+    }
+  }
+  const path = el && pathOf(el)
+  if (!path || !Array.isArray(path)) return []
+  const key = path.join(",")
+  const out = []
+  for (const c of clipsOf()) {
+    if (!c.path) continue
+    let k = clipKeys.get(c)
+    if (k == null) clipKeys.set(c, (k = c.path.join(",")))
+    if (k === key || k.startsWith(key + ",")) out.push(c)
+    else if (pathV2()) {
+      // Paths start at the nearest id (F51): one inside el can start below it.
+      const node = resolvePath(c.path)
+      if (node && node !== el && el.contains(node)) out.push(c)
+    }
+  }
+  return out
+}
+
+function clipAt(t, selector) {
+  let best = null
+  for (const c of clipsOf()) {
+    const end = c.end == null ? Math.max(rec.end, clock.now) : c.end
+    if (c.start > t || t > end) continue
+    if (selector) {
+      if (c.selector !== selector) {
+        let el = null
+        try {
+          el = document.querySelector(selector)
+        } catch {}
+        const target = c.selector && document.querySelector(c.selector)
+        if (!el || !target || !(el === target || el.contains(target))) continue
+      }
+    }
+    if (!best || c.start > best.start) best = c
+  }
+  return best ? { clip: best, offset: t - best.start } : null
+}
+
+// ---- interaction model -------------------------------------------------------
+// At the live edge the app is live and recorded. In the past (rewound,
+// previewing, rebuilding, or playing back recorded future) it's view-only.
+
+let toolActive = false
+function setToolActive(on) {
+  toolActive = !!on
+}
+// Live = playing at the live edge. Paused or in the past it's view-only.
+function isInteractive() {
+  return !!rec && clock.playing && !hasFuture() && !previewing && !clock.seeking && !(shell && shell.rebuilding) && !toolActive
+}
+
+// ---- routes (for markers) ---------------------------------------------------------
+
+const cleanRoute = (path) => path.replace(/([?&])__wb=app&?/, "$1").replace(/[?&]$/, "")
+function noteRoute() {
+  if (!rec || clock.seeking || hasFuture()) return
+  const routes = rec.routes || (rec.routes = [])
+  const clean = cleanRoute(location.pathname + location.search + location.hash)
+  if (routes.length && routes[routes.length - 1].path === clean) return
+  routes.push({ t: clock.now, path: clean })
+}
+// The app's route at t on this document's page: its last pushState/replaceState
+// (or popstate) by then, else the URL the page loaded at. A preview shows the
+// DOM of t without touching history, so the dock's address bar asks this.
+function routeAt(t) {
+  const seg = segmentAt(t)
+  let path = null
+  for (const r of rec.routes || []) if (r.t >= seg.t && r.t <= t) path = r.path
+  if (path) return path
+  try {
+    const u = new URL(seg.url)
+    return cleanRoute(u.pathname + u.search + u.hash)
+  } catch {
+    return null
+  }
+}
+for (const m of ["pushState", "replaceState"]) {
+  const orig = history[m]
+  history[m] = function (...args) {
+    const r = orig.apply(this, args)
+    noteRoute()
+    return r
+  }
+}
+W.addEventListener("popstate", noteRoute)
+W.addEventListener("hashchange", noteRoute)

package/src/runtime/66-activity.js

@@ -0,0 +1,114 @@
+// How much of the screen changed, over time: a cheap waveform for the dock.
+// Every 100ms of virtual time while recording, the on-screen boxes of running
+// finite animations and of elements the DOM changed are painted onto a coarse
+// grid over the viewport (so overlaps count once); the covered share is the
+// raw value. A rolling median over the last ~5s is subtracted, so constant
+// ambient motion (spinners, pulsing dots) trends to 0 and real changes spike.
+// No screenshots, no pixel diffs. Samples live in the recording
+// (rec.activity), so replays and seeks never recompute them.
+
+const ACT_STEP = 100
+const ACT_BASE = 50 // samples in the rolling median (~5s)
+const GRID_W = 32
+const GRID_H = 20
+const ACT_MAX_ELS = 150
+const actGrid = new Uint8Array(GRID_W * GRID_H)
+let actDomAt = 0
+let actRaw = [] // recent raw values, for the baseline
+const actStats = { samples: 0, ms: 0, max: 0 }
+
+function markRect(r, vw, vh) {
+  if (!r || r.width <= 0 || r.height <= 0) return
+  const x0 = Math.max(0, Math.floor((r.left / vw) * GRID_W))
+  const x1 = Math.min(GRID_W - 1, Math.floor(((r.right - 0.01) / vw) * GRID_W))
+  const y0 = Math.max(0, Math.floor((r.top / vh) * GRID_H))
+  const y1 = Math.min(GRID_H - 1, Math.floor(((r.bottom - 0.01) / vh) * GRID_H))
+  for (let y = y0; y <= y1; y++) for (let x = x0; x <= x1; x++) actGrid[y * GRID_W + x] = 1
+}
+
+function rawActivity() {
+  const vw = W.innerWidth || 1
+  const vh = W.innerHeight || 1
+  actGrid.fill(0)
+  const els = new Set()
+  // (a) running, finite animations and transitions
+  for (const [a, st] of managed) {
+    if (st.done || st.userPaused) continue
+    const timing = a.effect && a.effect.getTiming ? a.effect.getTiming() : null
+    if (!timing || timing.iterations === Infinity) continue
+    const t = a.effect.target
+    if (t && t.nodeType === 1) els.add(t)
+  }
+  // (b) elements the DOM changed since the last sample
+  if (observer && !previewing) logMutations(observer.takeRecords())
+  let removedFrom = null
+  for (let i = actDomAt; i < domLog.length && els.size < ACT_MAX_ELS; i++) {
+    const e = domLog[i]
+    if (e.kind === "attr" || e.kind === "value") els.add(e.node)
+    else if (e.kind === "text") e.node.parentElement && els.add(e.node.parentElement)
+    else {
+      for (const n of e.added) if (n.nodeType === 1) els.add(n)
+      else if (n.parentElement) els.add(n.parentElement)
+      // Something left: the space it took was its container's.
+      if (e.removed.length) (removedFrom || (removedFrom = new Set())).add(e.node)
+    }
+  }
+  actDomAt = domLog.length
+  if (removedFrom) for (const n of removedFrom) if (n.nodeType === 1 && n !== document.body && n !== document.documentElement) els.add(n)
+  for (const el of els) {
+    if (!el.isConnected || el.nodeType !== 1) continue
+    markRect(el.getBoundingClientRect(), vw, vh)
+  }
+  let covered = 0
+  for (let i = 0; i < actGrid.length; i++) covered += actGrid[i]
+  return covered / actGrid.length
+}
+
+function median(arr) {
+  if (!arr.length) return 0
+  const s = arr.slice().sort((a, b) => a - b)
+  return s[s.length >> 1]
+}
+
+// Called at each frame boundary. Takes a sample for every 100ms window the
+// clock has passed through, while recording at the live edge.
+function sampleActivity() {
+  if (!rec || clock.seeking || hasFuture() || previewing) {
+    actDomAt = domLog.length // what a replay does isn't new activity
+    return
+  }
+  const a = rec.activity || (rec.activity = { start: Math.floor(clock.now / ACT_STEP) * ACT_STEP, step: ACT_STEP, v: [] })
+  const due = Math.floor((clock.now - a.start) / ACT_STEP)
+  if (a.v.length >= due) return
+  const t0 = real.perfNow()
+  const raw = rawActivity()
+  actRaw.push(raw)
+  if (actRaw.length > ACT_BASE) actRaw = actRaw.slice(-ACT_BASE)
+  const v = Math.max(0, raw - median(actRaw))
+  a.v.push(Math.round(v * 100))
+  while (a.v.length < due) a.v.push(0) // windows skipped in one jump
+  const ms = real.perfNow() - t0
+  actStats.samples++
+  actStats.ms += ms
+  if (ms > actStats.max) actStats.max = ms
+}
+
+let activityOut = null
+function activitySamples() {
+  const a = rec.activity
+  if (!a) return []
+  if (activityOut && activityOut.n === a.v.length && activityOut.start === a.start) return activityOut.value
+  const value = a.v.map((v, i) => ({ t: a.start + i * a.step, v: v / 100 }))
+  // The same data as { step, values, t0 } too (the dock's waveform reads that).
+  value.step = a.step
+  value.t0 = a.start
+  value.values = a.v.map((v) => v / 100)
+  activityOut = { n: a.v.length, start: a.start, value }
+  return value
+}
+
+// Cutting the future at a fork drops its samples too.
+function cutActivity(t) {
+  const a = rec.activity
+  if (a) a.v.length = Math.max(0, Math.min(a.v.length, Math.floor((t - a.start) / a.step)))
+}

package/src/runtime/67-csssource.js

@@ -0,0 +1,226 @@
+// Where a CSS animation or transition comes from: the rule that sets it on
+// the element (or its ::before/::after), and the @keyframes it runs, as
+// file:line in the project's own source. Vite injects each CSS file as a
+// <style data-vite-dev-id="/abs/file.css"> with an inline source map
+// (css.devSourcemap, which the plugin turns on), so rules map back to the
+// original .css/.scss/module file. Tailwind utilities come back as the
+// utility class plus where Tailwind is configured.
+
+const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+const B64I = Object.fromEntries([...B64].map((c, i) => [c, i]))
+
+// Source map "mappings" → per generated line, segments [col, src, line, col].
+function decodeMappings(str) {
+  const lines = []
+  let src = 0
+  let sLine = 0
+  let sCol = 0
+  for (const lineStr of str.split(";")) {
+    const segs = []
+    let col = 0
+    for (const seg of lineStr.split(",")) {
+      if (!seg) continue
+      const vals = []
+      let v = 0
+      let shift = 0
+      for (const ch of seg) {
+        const d = B64I[ch]
+        v += (d & 31) << shift
+        if (d & 32) shift += 5
+        else {
+          vals.push(v & 1 ? -(v >> 1) : v >> 1)
+          v = 0
+          shift = 0
+        }
+      }
+      col += vals[0]
+      if (vals.length >= 4) {
+        src += vals[1]
+        sLine += vals[2]
+        sCol += vals[3]
+        segs.push([col, src, sLine, sCol])
+      }
+    }
+    lines.push(segs)
+  }
+  return lines
+}
+
+const mapCache = new WeakMap() // style element -> { map, lines } | null
+function sourceMapOf(styleEl) {
+  if (mapCache.has(styleEl)) return mapCache.get(styleEl)
+  let out = null
+  try {
+    const m = /\/\*# sourceMappingURL=data:application\/json;(?:charset=[^;]+;)?base64,([A-Za-z0-9+/=]+)\s*\*\//.exec(styleEl.textContent || "")
+    if (m) {
+      const map = JSON.parse(new TextDecoder().decode(fromB64(m[1])))
+      out = { map, lines: decodeMappings(map.mappings || "") }
+    }
+  } catch {}
+  mapCache.set(styleEl, out)
+  return out
+}
+
+function walkRules(list, visit) {
+  for (const r of list) {
+    visit(r)
+    if (r.cssRules) walkRules(r.cssRules, visit)
+  }
+}
+
+// The element part and the pseudo-element part of a selector list entry.
+function splitPseudo(sel) {
+  const m = /::?(before|after)\s*$/i.exec(sel)
+  return m ? { base: sel.slice(0, m.index) || "*", pseudo: "::" + m[1].toLowerCase() } : { base: sel, pseudo: null }
+}
+
+// The full selector of a (possibly nested) style rule.
+function fullSelector(rule) {
+  let sel = rule.selectorText
+  for (let p = rule.parentRule; p; p = p.parentRule) {
+    if (p.selectorText) sel = sel.includes("&") ? sel.replace(/&/g, p.selectorText) : `${p.selectorText} ${sel}`
+  }
+  return sel
+}
+
+// Last rule (in document order) that matches the element/pseudo and sets the property.
+function findRule(el, pseudo, test) {
+  let found = null
+  for (const sheet of document.styleSheets) {
+    let rules
+    try {
+      rules = sheet.cssRules
+    } catch {
+      continue
+    }
+    walkRules(rules, (r) => {
+      if (!r.selectorText || !r.style || !test(r.style)) return
+      const sel = fullSelector(r)
+      for (const part of sel.split(",")) {
+        const { base, pseudo: p } = splitPseudo(part.trim())
+        if ((p || null) !== (pseudo || null)) continue
+        try {
+          if (el.matches(base.replace(/\[data-rt-hover\]/g, ":hover"))) {
+            found = { rule: r, sheet, selector: part.trim() }
+            return
+          }
+        } catch {}
+      }
+    })
+  }
+  return found
+}
+
+function findKeyframes(name) {
+  let found = null
+  for (const sheet of document.styleSheets) {
+    let rules
+    try {
+      rules = sheet.cssRules
+    } catch {
+      continue
+    }
+    walkRules(rules, (r) => {
+      if (typeof CSSKeyframesRule !== "undefined" && r instanceof CSSKeyframesRule && r.name === name) found = { rule: r, sheet, selector: `@keyframes ${name}` }
+    })
+  }
+  return found
+}
+
+// file:line of a rule in its <style>, mapped to the original source if a map exists.
+function locate(hit) {
+  const owner = hit.sheet.ownerNode
+  const devId = owner && owner.getAttribute && owner.getAttribute("data-vite-dev-id")
+  const href = hit.sheet.href
+  const text = (owner && owner.textContent) || ""
+  // Where the rule's header sits in the served CSS (first match).
+  const head = hit.rule instanceof CSSKeyframesRule ? `@keyframes ${hit.rule.name}` : hit.rule.selectorText
+  let idx = text.indexOf(head)
+  if (idx < 0) idx = text.indexOf(head.split(",")[0].trim())
+  const out = { file: devId || href || null, line: null, selector: hit.selector }
+  if (idx < 0) return out
+  const before = text.slice(0, idx)
+  const genLine = before.split("\n").length - 1
+  const genCol = idx - before.lastIndexOf("\n") - 1
+  out.line = genLine + 1
+  const sm = owner && sourceMapOf(owner)
+  if (sm && sm.lines[genLine]) {
+    let seg = null
+    for (const s of sm.lines[genLine]) if (s[0] <= genCol) seg = s
+    if (!seg) seg = sm.lines[genLine][0]
+    if (seg) {
+      const srcName = sm.map.sources[seg[1]]
+      out.line = seg[2] + 1
+      if (srcName) {
+        try {
+          out.file = srcName.startsWith("/") ? srcName : new URL(srcName, "file://" + (devId || "/")).pathname
+        } catch {
+          out.file = srcName
+        }
+      }
+    }
+  }
+  return out
+}
+
+// A Tailwind utility (e.g. .animate-pulse) from Tailwind's generated CSS?
+function tailwindUtility(hit) {
+  const sel = hit.selector.replace(/\\/g, "")
+  const m = /^\.([\w:/[\]().%-]+?)(?::[\w-]+)*(?:::?(?:before|after))?$/.exec(sel)
+  if (!m) return null
+  const text = (hit.sheet.ownerNode && hit.sheet.ownerNode.textContent) || ""
+  if (!/tailwindcss|--tw-/.test(text)) return null
+  return m[1]
+}
+
+let tailwindConfig
+function tailwindConfigFile() {
+  if (tailwindConfig !== undefined) return Promise.resolve(tailwindConfig)
+  return real
+    .fetch("/__retake/tailwind")
+    .then((r) => (r.ok ? r.json() : {}))
+    .then((j) => (tailwindConfig = j.config || null))
+    .catch(() => (tailwindConfig = null))
+}
+
+// What the caller has in hand: an Animation, a clip (from timeline()/clipsFor()), or a clip id.
+function resolveAnimationTarget(x) {
+  if (typeof x === "string") x = (rec.clips || []).find((c) => c.id === x) || x
+  if (x && typeof Animation !== "undefined" && x instanceof Animation) {
+    const kind = clipKind(x)
+    const fx = /** @type {KeyframeEffect | null} */ (x.effect)
+    const css = /** @type {any} */ (x) // a CSSAnimation or a CSSTransition
+    return { el: fx && fx.target, pseudo: (fx && fx.pseudoElement) || null, kind, name: kind === "css-animation" ? css.animationName : null, prop: kind === "transition" ? css.transitionProperty : null }
+  }
+  if (x && x.path) {
+    const el = resolvePath(x.path)
+    return { el, pseudo: x.pseudoElement || null, kind: x.kind, name: x.kind === "css-animation" ? x.label : null, prop: x.kind === "transition" ? x.property : null }
+  }
+  return null
+}
+
+async function cssSourceFor(x) {
+  const t = resolveAnimationTarget(x)
+  if (!t || !t.el || t.el.nodeType !== 1) return null
+  let hit = null
+  if (t.kind === "css-animation" && t.name) {
+    hit = findRule(t.el, t.pseudo, (st) => (st.animationName || "").split(",").map((s) => s.trim()).includes(t.name))
+  } else if (t.kind === "transition" && t.prop) {
+    hit = findRule(t.el, t.pseudo, (st) => {
+      const props = (st.transitionProperty || "").split(",").map((s) => s.trim())
+      return props.includes(t.prop) || props.includes("all") || (!!st.transition && !st.transitionProperty)
+    })
+  }
+  if (!hit) return null
+  const out = locate(hit)
+  if (t.kind === "css-animation" && t.name) {
+    const kf = findKeyframes(t.name)
+    if (kf) out.keyframes = { name: t.name, ...locate(kf) }
+  }
+  const utility = tailwindUtility(hit)
+  if (utility) {
+    out.utility = utility
+    out.config = await tailwindConfigFile()
+  }
+  return out
+}