retake-dev 0.5.0 → 0.5.1

package/src/server/sourcemap.js

@@ -0,0 +1,192 @@
+// A compiled bundle's line → the original file:line, through the bundle's
+// source map. For notes whose source is a served chunk (Next/Turbopack and
+// webpack chunks, Vite's optimized deps, a production-style bundle) rather
+// than the app's own file. No dependencies: a VLQ decoder, and index maps
+// (`sections`, as Turbopack writes them) read section by section.
+// The dock has the same logic in src/shell/30-notes.js (it can't import).
+
+const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+
+/** "mappings" → per generated line, segments [genCol, sourceIndex, origLine, origCol] (0-based). */
+export function decodeMappings(mappings) {
+  const lines = []
+  let src = 0, oLine = 0, oCol = 0
+  for (const text of String(mappings || "").split(";")) {
+    const segs = []
+    let gCol = 0
+    for (const seg of text.split(",")) {
+      if (!seg) continue
+      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 {
+          v.push(acc & 1 ? -(acc >> 1) : acc >> 1)
+          acc = shift = 0
+        }
+      }
+      gCol += v[0] || 0
+      if (v.length >= 4) {
+        src += v[1]
+        oLine += v[2]
+        oCol += v[3]
+        segs.push([gCol, src, oLine, oCol])
+      }
+    }
+    lines.push(segs)
+  }
+  return lines
+}
+
+const decoded = new WeakMap()
+/**
+ * Where generated line/column (1-based; col may be null) came from.
+ * @returns {{ source: string, line: number, sources: string[] } | null}
+ */
+export 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
+    /** @type {any} */
+    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 }
+    const c = C == null ? null : (L === o.line ? C - o.column : C) + 1
+    const pos = originalPosition(hit.map, L - o.line + 1, c)
+    return pos && { ...pos, sources: map.sections.flatMap((x) => (x.map && x.map.sources) || []) }
+  }
+  let lines = decoded.get(map)
+  if (!lines) decoded.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
+  const sources = (map.sources || []).map((s) => (map.sourceRoot && s && !/^[a-z]+:/i.test(s) && !s.startsWith("/") ? map.sourceRoot.replace(/\/?$/, "/") + s : s))
+  const source = sources[best[1]]
+  return source ? { source, line: best[2] + 1, sources } : null
+}
+
+/** Library code (not where the app's own element was written). */
+export const isLibrary = (file) => /(^|\/)node_modules\/|\/\.vite\/deps\/|react-dom|jsx-dev-runtime|jsx-runtime|\[turbopack\]|turbopack\/|webpack\/(bootstrap|runtime)/.test(String(file || ""))
+
+/**
+ * A served bundle rather than a source file: Next's /_next/static chunks,
+ * webpack/Turbopack chunk names, Vite's deps, hashed build assets.
+ */
+export function isCompiled(file) {
+  const f = String(file || "").replace(/[?#].*$/, "")
+  return (
+    /\/_next\/static\/|\/\.vite\/deps\/|\/node_modules\/\.vite\//.test(f) ||
+    /\._\.js$|[-_.](?=[0-9a-z]*\d)[0-9a-z]{6,}\.(m?js|cjs)$/i.test(f.split("/").pop() || "") ||
+    /\/assets\/[^/]+-[\w-]{8}\.js$/.test(f)
+  )
+}
+
+/**
+ * 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:///x/y` → `/x/y`,
+ * then relative to `root` when it's inside it. Without a root, an absolute path
+ * is made relative to the project the map's own node_modules sources sit in.
+ * @param {string} name
+ * @param {{ root?: string | null, sources?: string[] }} [options]
+ */
+export function cleanSource(name, { root = null, sources = [] } = {}) {
+  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 = p.replace(/^\.\//, "")
+  if (p.startsWith("/")) {
+    const roots = []
+    if (root) roots.push(String(root).replace(/\/$/, ""), "/private" + String(root).replace(/\/$/, ""))
+    for (const s of sources) {
+      const m = /^(?:file:\/\/)?(\/.*?)\/node_modules\//.exec(String(s || ""))
+      if (m) roots.push(m[1])
+    }
+    for (const r of roots) if (r && p.startsWith(r + "/")) return p.slice(r.length + 1)
+  }
+  return p
+}
+
+/** The map's URL for a bundle: a SourceMap header, its last sourceMappingURL comment, else `<url>.map`. */
+export function mapUrlOf(code, url, headers) {
+  const h = headers && (headers.get("sourcemap") || headers.get("x-sourcemap"))
+  if (h) return new URL(h, url).href
+  const all = [...String(code).matchAll(/\/\/[#@] sourceMappingURL=(\S+)/g)]
+  if (all.length) {
+    const ref = all[all.length - 1][1]
+    return ref.startsWith("data:") ? ref : new URL(ref, url).href
+  }
+  return null
+}
+
+function parseDataUrl(ref) {
+  const comma = ref.indexOf(",")
+  const body = ref.slice(comma + 1)
+  return /;base64/.test(ref.slice(0, comma)) ? Buffer.from(body, "base64").toString("utf8") : decodeURIComponent(body)
+}
+
+/**
+ * Loads `url`'s source map. Resolves to the parsed map, or null.
+ * @param {string} url
+ * @param {{ fetch?: typeof fetch, timeoutMs?: number }} [options]
+ */
+export async function loadSourceMap(url, { fetch: get = fetch, timeoutMs = 5000 } = {}) {
+  const ac = new AbortController()
+  const timer = setTimeout(() => ac.abort(), timeoutMs)
+  try {
+    const res = await get(url, { signal: ac.signal })
+    if (!res.ok) return null
+    const code = await res.text()
+    let ref = mapUrlOf(code, url, res.headers)
+    const tries = ref ? [ref] : [url.replace(/[?#].*$/, "") + ".map"]
+    for (const r of tries) {
+      try {
+        if (r.startsWith("data:")) return JSON.parse(parseDataUrl(r))
+        const m = await get(r, { signal: ac.signal })
+        if (m.ok) return JSON.parse(await m.text())
+      } catch {}
+    }
+    return null
+  } catch {
+    return null
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+/**
+ * A compiled source { file, line, col? } → { file, line, from } in the app's
+ * own code, or { library } when the line is library code, or null.
+ * @param {{ file: string, line?: number | null, col?: number | null, url?: string }} src
+ * @param {{ base: string, root?: string | null, fetch?: typeof fetch }} options
+ */
+export async function resolveSource(src, { base, root = null, fetch: get = fetch }) {
+  if (!src || !src.file || !((src.line ?? 0) > 0)) return null
+  let url
+  try {
+    url = src.url && /^https?:/.test(src.url) ? new URL(new URL(src.url).pathname + new URL(src.url).search, base.replace(/\/?$/, "/")).href : new URL(src.file, base.replace(/\/?$/, "/")).href
+  } catch {
+    return null
+  }
+  const map = await loadSourceMap(url, { fetch: get })
+  if (!map) return null
+  const pos = originalPosition(map, src.line, src.col || null)
+  if (!pos) return null
+  const file = cleanSource(pos.source, { root, sources: pos.sources })
+  if (isLibrary(file)) return { library: file, line: pos.line }
+  return { file, line: pos.line, from: `${src.file}:${src.line}` }
+}

package/src/shell/10-dock.js

@@ -90,6 +90,10 @@ function swapIn(b) {
   } catch {}
   f.className = "live"
   f.removeAttribute("aria-hidden")
+  // The new frame is the one on show before the old one goes: the old one
+  // blurs as it's removed, which must not read as ⌘ let go (F99).
+  D.frame = f
+  D.PT = pt
   if (old) {
     let canvas = false
     try {
@@ -102,14 +106,14 @@ function swapIn(b) {
       setTimeout(() => delete f.dataset.enter, 200)
     } else old.remove()
   }
-  D.frame = f
-  D.PT = pt
   D.frameBranch = b.branchId != null ? b.branchId : D.activeId
   D.building = null
   window.__retakeShell.rebuilding = false
   D.scopeEl = null // an element of the old frame
   noteBuilt(b)
   hookFrameKeys(f.contentWindow)
+  // A tool that's on stays on, in the new frame, over what's under the pointer.
+  syncPicking()
   if (b.fork) forkNow()
   else if (b.play) pt.play()
 }
@@ -568,6 +572,7 @@ function render() {
   renderShield(s)
   if (s.started) renderTimeline(s, shownT)
   renderExtras(s)
+  renderFocusOverlay(s)
   if (D.collapsed && fab.dataset.phase !== readoutPhase.dataset.phase) fab.dataset.phase = readoutPhase.dataset.phase
 }
 
@@ -688,8 +693,12 @@ const refocus = () => D.frame && D.frame.contentWindow && D.frame.contentWindow.
 document.addEventListener("click", (e) => {
   const target = /** @type {Element} */ (e.target)
   const b = /** @type {HTMLButtonElement | null} */ (target.closest("button, [data-branch], [data-note]"))
+  // A press on the track while writing a note (the element row, a range, the
+  // playhead) keeps the note open.
+  const held = D.focusHold
+  D.focusHold = false
   if (!b) {
-    if (!target.closest(".card")) closeCard()
+    if (!target.closest(".card") && !(held && target.closest(".track"))) closeCard()
     return
   }
   const a = b.dataset.a
@@ -896,7 +905,14 @@ window.addEventListener("keydown", (e) => {
     e.preventDefault()
     return setCollapsed(!D.collapsed)
   }
+  // Tab with the dock's window focused cycles what's under the pointer, as in the app.
+  if (e.key === "Tab" && !e.metaKey && mode() && !typing(e.target) && layers.length > 1) {
+    e.preventDefault()
+    return cycleLayer(e.shiftKey ? -1 : 1)
+  }
   if (e.key === "Escape") {
+    // An open clip closes first, then a selected range, then the note.
+    if (closeFocusClip() || clearRange()) return
     setPicking(null)
     closeCard()
     return
@@ -923,5 +939,11 @@ function hookFrameKeys(win) {
     )
   } catch {}
 }
-window.addEventListener("keyup", (e) => e.key === "Meta" && window.__retakeShell.meta(false))
-window.addEventListener("blur", () => window.__retakeShell.meta(false))
+window.addEventListener("keyup", (e) => e.key === "Meta" && setMeta(false))
+// The dock's window losing focus lets go of ⌘, unless the focus only went
+// into the app's frame (whose own blur, if it goes, says so).
+window.addEventListener("blur", () => {
+  const a = document.activeElement
+  if (a && a.tagName === "IFRAME") return
+  window.__retakeShell.meta(false)
+})

package/src/shell/15-session.js

@@ -16,15 +16,21 @@ const net = {
   activeSavedAt: 0,
 }
 
+const GZIP_OVER = 1 << 20
+
 async function api(method, path, body) {
   const headers = {}
   if (method !== "GET") headers["x-retake-token"] = TOKEN
   if (body !== undefined) headers["content-type"] = "application/json"
-  const res = await fetch("/__retake/" + path, {
-    method,
-    headers,
-    body: body === undefined ? undefined : typeof body === "string" ? body : JSON.stringify(body),
-  })
+  /** @type {string | Blob | undefined} */
+  let data = body === undefined ? undefined : typeof body === "string" ? body : JSON.stringify(body)
+  // A large upload goes gzipped (JSON shrinks ~10x): a Next.js middleware
+  // (retake-dev/next) gets 10 MB of a request body at most.
+  if (typeof data === "string" && data.length > GZIP_OVER && typeof CompressionStream === "function") {
+    data = await new Response(new Blob([data]).stream().pipeThrough(new CompressionStream("gzip"))).blob()
+    headers["content-encoding"] = "gzip"
+  }
+  const res = await fetch("/__retake/" + path, { method, headers, body: data })
   if (res.status === 404) return { missing: true }
   if (!res.ok) throw new Error(`${method} /__retake/${path}: ${res.status}`)
   const text = await res.text()

package/src/shell/20-timeline.js

@@ -198,7 +198,9 @@ function treeOrder() {
 }
 
 function layoutLanes(g) {
-  const avail = g.h - RULER - 4
+  // The focused element's row (32-anims.js) takes its height first.
+  const fh = focusHeight(g)
+  const avail = g.h - RULER - 4 - fh
   const order = treeOrder()
   const n = order.length
   const compact = n * LANE > avail
@@ -212,6 +214,7 @@ function layoutLanes(g) {
     y += pitch
   })
   D.rowOrder = order.map((b) => b.id)
+  D.focusRow = fh ? { y0: Math.min(Math.round(y) + 2, g.h - fh), h: fh } : null
   return lanes
 }
 
@@ -479,6 +482,7 @@ function renderTimeline(s, shownT) {
     D.branches.map((b) => `${b.id}.${b.end.toFixed(0)}.${b.forkAt}`).join(","),
     tl.markers.length, act ? act.values.length : -1, D.notes.map((n) => `${n.id}.${n.status}.${n.branchId}`).join(","),
     D.markers.length, lensClips ? D.lens.key : "", D.branchT, D.snapT, D.dragT, growing || bandFading ? performance.now() : 0, D.hoverRow,
+    focusKey(), D.range ? `${D.range.from}-${D.range.to}` : "",
   ].join("|")
   if (key === sceneKey) return
   sceneKey = key
@@ -532,6 +536,9 @@ function renderTimeline(s, shownT) {
   scene.lanes.push({ id: active.id, y: p.y, x0: p.x0, x1: p.x1, color, active: true, empty: p.empty })
   scene.actions = drawActions(g, tl.markers, A.y, lo, activeEnd, dim)
   if (lensClips) scene.capsules = drawLens(g, lensClips, A.y)
+  // The focused element's own row, and a range of recording time (Shift+drag).
+  if (D.focus) scene.focus = drawFocusRow(g, s)
+  if (D.range) scene.range = drawRecordingRange(g)
 
   // Bookmarks, on the ruler.
   ctx.fillStyle = "#f2f2f5"
@@ -602,6 +609,12 @@ function renderTimeline(s, shownT) {
       scene.notes.push({ id: n.id, x, y: L.y, r: 5 })
       return
     }
+    // A range note: a thin bracket from its start to its end.
+    if (n.range && n.range.to > n.range.from) {
+      const x1 = xOf(n.range.to, g)
+      ctx.fillRect(x, L.y - 12, Math.max(1, x1 - x), 1)
+      ctx.fillRect(x1 - 0.5, L.y - 14, 1, 5)
+    }
     const label = String(i + 1)
     const w = 8 + label.length * 5
     roundRect(x - w / 2, L.y - 17, w, 12, 6)
@@ -627,6 +640,8 @@ function hitAt(clientX, clientY) {
   const sc = D.scene
   if (!sc) return null
   for (const n of sc.notes) if (Math.abs(x - n.x) <= n.r && Math.abs(y - n.y) <= n.r) return { kind: "note", id: n.id }
+  const fh = focusHit(x, y)
+  if (fh) return fh
   for (const c of sc.capsules) if (x >= c.x0 - 2 && x <= c.x1 + 2 && Math.abs(y - c.y) <= 8) return { kind: "capsule", clip: c.clip }
   if (y < RULER) for (const b of sc.bookmarks) if (Math.abs(x - b.x) <= 5) return { kind: "bookmark", id: b.id }
   let best = null
@@ -642,7 +657,8 @@ let gutterKey = ""
 const invalidateGutter = () => (gutterKey = "")
 function renderGutter(lanes) {
   if (gutter.querySelector("input")) return // renaming
-  const key = D.compact + ":" + D.rowPitch + D.branches.map((b) => `${b.id}:${b.name}:${lanes.get(b.id).y}:${b.id === D.activeId}`).join("|")
+  const fr = D.focus && D.focusRow ? `${D.focus.label}@${D.focusRow.y0}:${D.focusRow.h}` : ""
+  const key = D.compact + ":" + D.rowPitch + D.branches.map((b) => `${b.id}:${b.name}:${lanes.get(b.id).y}:${b.id === D.activeId}`).join("|") + fr
   if (key === gutterKey) return
   gutterKey = key
   // Short dock: just the colour dots (the name shows on hover).
@@ -655,7 +671,7 @@ function renderGutter(lanes) {
       const title = D.compact ? ` title="${esc(b.name)}"` : ""
       return `<div class="${cls}" data-lane="${b.id}" style="top:${L.y}px;height:${D.rowPitch}px;margin-top:${-D.rowPitch / 2}px;--c:${colorOf(b)}"${title}><i></i><span>${esc(b.name)}</span></div>`
     })
-    .join("")
+    .join("") + (fr ? `<div class="focus-name" style="top:${D.focusRow.y0}px;height:${Math.min(D.focusRow.h, 26)}px" title="${esc(D.focus.label)}">${esc(D.focus.label)}</div>` : "")
 }
 
 // ---- the header ---------------------------------------------------------------------
@@ -700,16 +716,25 @@ function renderHead(s, shownT) {
   const playing = (!!s.playing || !!(D.building && D.building.play)) && D.dragT == null
   playBtn.classList.toggle("playing", playing)
   playBtn.setAttribute("aria-label", playing ? "Pause" : "Play")
-  // The hint area is only for a short warning (see flash()).
+  // The hint area is only for a short warning (see flash()), or, while a
+  // clip of the focused element is open, where the playhead is on its clock.
   if (performance.now() < flashUntil) return
+  const ro = focusReadout(s, shownT)
+  if (ro) {
+    if (hintEl.textContent !== ro) hintEl.textContent = ro
+    hintEl.classList.add("show", "readout")
+    hintEl.classList.remove("warn")
+    return
+  }
   if (hintEl.textContent) hintEl.textContent = ""
-  hintEl.classList.remove("show", "warn")
+  hintEl.classList.remove("show", "warn", "readout")
 }
 
 // A short message in the hint's place: a warning (a refused checkout, say),
 // or with `warn: false` news ("Timeline 2 started").
 function flash(msg, { warn = true } = {}) {
   flashUntil = performance.now() + (warn ? 3500 : 2500)
+  hintEl.classList.remove("readout")
   hintEl.textContent = msg
   hintEl.classList.add("show")
   hintEl.classList.toggle("warn", warn)

package/src/shell/25-input.js

@@ -289,6 +289,12 @@ track.addEventListener("pointerdown", (e) => {
   }
   const hit = hitAt(e.clientX, e.clientY)
   if (hit && hit.kind === "note") return goToNoteId(hit.id)
+  // The focused element's row (32-anims.js): open a clip, pin a point, drag a range.
+  if (hit && (hit.kind.startsWith("focus") || hit.kind === "range-edge") && focusPointerDown(e, hit)) return
+  // A press on the track while writing a note moves the note's moment with it.
+  if (D.focus) (D.focusHold = true), (D.focus.touched = true)
+  // Shift+drag: a range of recording time, for the next element picked.
+  if (e.shiftKey) return rangePointerDown(e, s)
   if (hit && hit.kind === "capsule") {
     // ⌘ held on one of the element's animations: fit it, go to its start.
     const c = hit.clip
@@ -334,6 +340,13 @@ track.addEventListener("pointermove", (e) => {
   if (!s || !s.started) return
   const g = geom()
   overTrack = e
+  if (D.focusDrag && focusPointerMove(e)) return
+  if (D.rangeDrag && rangePointerMove(e)) return
+  if (D.focus) {
+    const fh = focusHit(e.clientX - g.left, e.clientY - g.top)
+    D.focus.hoverT = fh && fh.kind === "focus-row" && D.dragT == null ? fh.t : null
+    D.focus.hoverClip = fh && fh.kind === "focus-clip" ? fh.clip : null
+  }
   if (D.dragT != null) {
     if (!D.dragMoved && Math.abs(e.clientX - D.dragX0) < DEAD_PX) return
     D.dragMoved = true
@@ -352,9 +365,11 @@ track.addEventListener("pointermove", (e) => {
   if (e.ctrlKey) return
   hover(e, s, g)
 })
-track.addEventListener("pointerup", endScrub)
-track.addEventListener("pointercancel", endScrub)
+const endPress = () => focusPointerUp() || rangePointerUp() || endScrub()
+track.addEventListener("pointerup", endPress)
+track.addEventListener("pointercancel", endPress)
 track.addEventListener("pointerleave", () => {
+  if (D.focus) D.focus.hoverT = D.focus.hoverClip = null
   overTrack = null
   setBranchGuide(false)
   D.hoverRow = null
@@ -512,11 +527,19 @@ function dockKey(e, fromApp) {
   if (e.metaKey || e.ctrlKey || (!fromApp && typing(e.target))) return false
   const s = D.last
   if (!s || !s.started) return false
+  // Esc in a view-only app: an open clip closes, then a selected range goes, then the note.
+  if (e.key === "Escape" && (closeFocusClip() || clearRange())) return true
+  if (e.key === "Escape" && fromApp && !card.hidden) {
+    closeCard()
+    return true
+  }
   if (e.code === "Space" || (e.altKey && e.code === "KeyP")) {
     togglePlay()
     return true
   }
   if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+    // An open clip of the focused element: its own frames and keyframes.
+    if (focusStep(e.key === "ArrowRight" ? 1 : -1, e.shiftKey)) return true
     stepBy(e.key === "ArrowRight" ? 1 : -1, e.shiftKey)
     return true
   }