@hyperframes/studio 0.7.17 → 0.7.19

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -18,6 +18,8 @@ interface KeyframeDiamondContextMenuProps {
   onDeleteAll: (elementId: string) => void;
   onChangeEase?: (elementId: string, percentage: number, ease: string) => void;
   onCopyProperties?: (elementId: string, percentage: number) => void;
+  /** Retime the keyframe to the current playhead, preserving its value + ease. */
+  onMoveToPlayhead?: (elementId: string, fromPercentage: number) => void;
 }
 
 export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
@@ -25,11 +27,12 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
   onClose,
   onDelete,
   onDeleteAll,
+  onMoveToPlayhead,
 }: KeyframeDiamondContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
 
   const menuWidth = 200;
-  const menuHeight = 70;
+  const menuHeight = onMoveToPlayhead ? 100 : 70;
   const overflowY = state.y + menuHeight - window.innerHeight;
   const adjustedX = state.x + menuWidth > window.innerWidth ? state.x - menuWidth : state.x;
   const adjustedY = overflowY > 0 ? state.y - overflowY - 8 : state.y;
@@ -40,12 +43,28 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
       className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
+      {onMoveToPlayhead && (
+        <button
+          type="button"
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 cursor-pointer text-left"
+          onClick={() => {
+            // Pass clip-% — resolveKeyframeTarget keys the cache lookup on clip-%
+            // and returns the tween-% for the mutation. Passing tween-% here would
+            // miss the lookup on any tween whose window is shorter than the clip.
+            onMoveToPlayhead(state.elementId, state.percentage);
+            onClose();
+          }}
+        >
+          Move to Playhead
+        </button>
+      )}
+
       {/* Delete */}
       <button
         type="button"
         className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
         onClick={() => {
-          onDelete(state.elementId, state.tweenPercentage ?? state.percentage);
+          onDelete(state.elementId, state.percentage);
           onClose();
         }}
       >

package/src/player/components/PlayerControls.tsx

@@ -1,4 +1,6 @@
 import { useRef, useCallback, useEffect, memo } from "react";
+import gsap from "gsap";
+import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
 import { formatFrameTime, formatTime, stepFrameTime } from "../lib/time";
 import { shouldMutePreviewAudio } from "../lib/timelineIframeHelpers";
 import { usePlayerStore } from "../store/playerStore";
@@ -14,20 +16,45 @@ type TimeDisplayMode = "time" | "frame";
 
 /* ── Icon sub-components ─────────────────────────────────────────── */
 
-function PlayIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
-      <polygon points="6,3 20,12 6,21" />
-    </svg>
-  );
-}
+gsap.registerPlugin(MorphSVGPlugin);
 
-function PauseIcon() {
+// Play glyph: the right-hand blade from the HyperFrames favicon (points right).
+// Pause glyph: two bars centred in the same coordinate space so MorphSVG can
+// tween one `d` into the other. Both shapes live in the favicon's 0-100 space
+// and the svg viewBox frames the blade's bounding box.
+const PLAY_BLADE_D =
+  "M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z";
+const PAUSE_BARS_D = "M56 28H67V71H56Z M73 28H84V71H73Z";
+
+// Morph the play blade <-> pause bars on toggle via GSAP MorphSVG. Both glyphs
+// are one path whose `d` tweens; the initial render matches `playing` with no
+// animation, and prefers-reduced-motion snaps instead of tweening.
+function PlayPauseMorphIcon({ playing }: { playing: boolean }) {
+  const pathRef = useRef<SVGPathElement>(null);
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    const el = pathRef.current;
+    if (!el) return;
+    const target = playing ? PAUSE_BARS_D : PLAY_BLADE_D;
+    const reduceMotion =
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (isFirstRun.current || reduceMotion) {
+      isFirstRun.current = false;
+      gsap.set(el, { morphSVG: target });
+      return;
+    }
+    const tween = gsap.to(el, { duration: 0.28, ease: "power2.inOut", morphSVG: target });
+    return () => {
+      tween.kill();
+    };
+  }, [playing]);
   return (
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
-      <rect x="6" y="4" width="4" height="16" rx="1" />
-      <rect x="14" y="4" width="4" height="16" rx="1" />
-    </svg>
+    <span className="relative inline-flex h-3 w-3 items-center justify-center" aria-hidden="true">
+      <svg width="12" height="12" viewBox="46 21 54 56" fill="#FAFAFA">
+        <path ref={pathRef} d={playing ? PAUSE_BARS_D : PLAY_BLADE_D} />
+      </svg>
+    </span>
   );
 }
 
@@ -420,7 +447,7 @@ export const PlayerControls = memo(function PlayerControls({
           className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-colors"
           style={{ background: "rgba(255,255,255,0.06)" }}
         >
-          {isPlaying ? <PauseIcon /> : <PlayIcon />}
+          <PlayPauseMorphIcon playing={isPlaying} />
         </button>
       </Tooltip>
 

package/src/player/components/Timeline.tsx

@@ -86,6 +86,8 @@ export const Timeline = memo(function Timeline({
     onDeleteKeyframe,
     onDeleteAllKeyframes,
     onChangeKeyframeEase,
+    onMoveKeyframeToPlayhead,
+    onMoveKeyframe,
   } = useResolvedTimelineEditCallbacks({
     onMoveElement: onMoveElementOverride,
     onResizeElement: onResizeElementOverride,
@@ -479,6 +481,7 @@ export const Timeline = memo(function Timeline({
           onShiftClickKeyframe={(elId, pct) => {
             toggleSelectedKeyframe(`${elId}:${pct}`);
           }}
+          onMoveKeyframe={onMoveKeyframe}
           onContextMenuKeyframe={(e, elId, pct) => {
             const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
             if (el) {
@@ -556,6 +559,11 @@ export const Timeline = memo(function Timeline({
           onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)}
           onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)}
           onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)}
+          onMoveToPlayhead={
+            onMoveKeyframeToPlayhead
+              ? (elId, pct) => onMoveKeyframeToPlayhead(elId, pct)
+              : undefined
+          }
           onCopyProperties={(elId, pct) => {
             const kfData = keyframeCache.get(elId);
             const kf = kfData?.keyframes.find((k) => k.percentage === pct);

package/src/player/components/TimelineCanvas.tsx

@@ -92,6 +92,11 @@ interface TimelineCanvasProps {
   onClickKeyframe?: (element: TimelineElement, percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
+  onMoveKeyframe?: (
+    elementId: string,
+    fromClipPercentage: number,
+    toClipPercentage: number,
+  ) => void;
   onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
   beatAnalysis?: MusicBeatAnalysis | null;
 }
@@ -139,6 +144,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   onClickKeyframe,
   onShiftClickKeyframe,
   onContextMenuKeyframe,
+  onMoveKeyframe,
   onContextMenuClip,
   beatAnalysis,
 }: TimelineCanvasProps) {
@@ -439,6 +445,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                         onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
                         onShiftClickKeyframe={onShiftClickKeyframe}
                         onContextMenuKeyframe={onContextMenuKeyframe}
+                        onMoveKeyframe={onMoveKeyframe}
                       />
                     )}
                   </TimelineClip>

package/src/player/components/TimelineClipDiamonds.tsx

@@ -1,8 +1,15 @@
-import { memo } from "react";
+import { memo, useRef, useState } from "react";
 import { BEAT_BAND_H } from "./BeatStrip";
+import {
+  KEYFRAME_DRAG_THRESHOLD_PX,
+  previewClipPct,
+  resolveKeyframeDrag,
+} from "../../components/editor/keyframeDrag";
 
 interface KeyframeEntry {
   percentage: number;
+  /** Tween-relative percentage (the retime mutation keys on this, not clip %). */
+  tweenPercentage?: number;
   properties: Record<string, number | string>;
   ease?: string;
 }
@@ -29,6 +36,15 @@ interface TimelineClipDiamondsProps {
   onClickKeyframe?: (percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
+  /** Drag-to-retime: move a keyframe to a new time, preserving its value + ease.
+   *  Both percentages are clip-relative: `fromClipPercentage` identifies the
+   *  dragged keyframe, `toClipPercentage` is the neighbour-clamped drop position.
+   *  The handler decides move (within the tween) vs resize (past its boundary). */
+  onMoveKeyframe?: (
+    elementId: string,
+    fromClipPercentage: number,
+    toClipPercentage: number,
+  ) => void;
 }
 
 const DIAMOND_RATIO = 0.8;
@@ -39,6 +55,13 @@ const DIAMOND_RATIO = 0.8;
 const KF_MIN_PCT = -5;
 const KF_MAX_PCT = 105;
 
+type DragState = {
+  kfKey: string;
+  startX: number;
+  fromClipPct: number;
+  moved: boolean;
+};
+
 export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   keyframesData,
   clipWidthPx,
@@ -52,7 +75,15 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   onClickKeyframe,
   onShiftClickKeyframe,
   onContextMenuKeyframe,
+  onMoveKeyframe,
 }: TimelineClipDiamondsProps) {
+  // Hooks must run before the early return below.
+  const dragRef = useRef<DragState | null>(null);
+  // Visual-only preview of the dragged diamond's clip-% — no runtime/GSAP hold
+  // (that optimistic hold was the #1763 flake). The atomic move-keyframe commit
+  // on drop re-keys the diamond from source.
+  const [preview, setPreview] = useState<{ kfKey: string; clipPct: number } | null>(null);
+
   if (clipWidthPx < 20) return null;
 
   // When the beat strip occupies the top band, shrink the diamonds and center
@@ -63,17 +94,12 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   const sorted = keyframesData.keyframes
     .filter((kf) => kf.percentage >= KF_MIN_PCT && kf.percentage <= KF_MAX_PCT)
     .sort((a, b) => a.percentage - b.percentage);
+  // Clip-%s of the sorted keyframes — the neighbour clamp (preview + drop) needs
+  // the whole row to bound the dragged diamond between its immediate siblings.
+  const sortedClipPcts = sorted.map((k) => k.percentage);
   const baseColor = isSelected ? accentColor : "#a3a3a3";
   const baseOpacity = isSelected ? 0.4 : 0.25;
-
-  const handleClick = (e: React.MouseEvent, pct: number) => {
-    e.stopPropagation();
-    if (e.shiftKey) {
-      onShiftClickKeyframe?.(elementId, pct);
-    } else {
-      onClickKeyframe?.(pct);
-    }
-  };
+  const canDrag = isSelected && !!onMoveKeyframe;
 
   return (
     <div className="absolute inset-0" style={{ zIndex: 3, pointerEvents: "none" }}>
@@ -102,17 +128,80 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
       })}
 
       {sorted.map((kf, i) => {
+        const kfKey = `${elementId}:${kf.percentage}`;
+        // While dragging this diamond, render it at the live preview clip-%.
+        const renderPct = preview?.kfKey === kfKey ? preview.clipPct : kf.percentage;
         // Center the diamond ON its keyframe %: left = (% · width) − half so the
         // diamond's midpoint sits exactly at the percentage. At 0% the midpoint
-        // is the clip's left edge (the diamond's left half overflows, which the
-        // overflow-visible clip shows) — NOT shifted fully inside. No clamp, or
-        // boundary keyframes (0% / 100%) would render off-center.
-        const leftPx = (kf.percentage / 100) * clipWidthPx - half;
-        const kfKey = `${elementId}:${kf.percentage}`;
+        // is the clip's left edge (the left half overflows, which the
+        // overflow-visible clip shows) — NOT shifted fully inside.
+        const leftPx = (renderPct / 100) * clipWidthPx - half;
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
         const isHighlighted = isKfSelected || atPlayhead;
         const color = isHighlighted ? accentColor : "#a3a3a3";
+
+        const onPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
+          if (e.button !== 0) return;
+          e.stopPropagation();
+          if (canDrag) {
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            dragRef.current = {
+              kfKey,
+              startX: e.clientX,
+              fromClipPct: kf.percentage,
+              moved: false,
+            };
+          }
+        };
+        const onPointerMove = (e: React.PointerEvent<HTMLButtonElement>) => {
+          const d = dragRef.current;
+          if (!d || d.kfKey !== kfKey) return;
+          if (!d.moved && Math.abs(e.clientX - d.startX) >= KEYFRAME_DRAG_THRESHOLD_PX) {
+            d.moved = true;
+          }
+          if (d.moved) {
+            setPreview({
+              kfKey,
+              clipPct: previewClipPct({
+                pointerDownX: d.startX,
+                pointerMoveX: e.clientX,
+                clipWidthPx,
+                draggedClipPct: d.fromClipPct,
+                draggedIndex: i,
+                sortedClipPcts,
+              }),
+            });
+          }
+        };
+        const onPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {
+          const d = dragRef.current;
+          // No drag armed (canDrag false / non-primary press) → treat as a click.
+          if (!d || d.kfKey !== kfKey) {
+            if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+            else onClickKeyframe?.(kf.percentage);
+            return;
+          }
+          e.stopPropagation();
+          dragRef.current = null;
+          setPreview(null);
+          e.currentTarget.releasePointerCapture?.(e.pointerId);
+          const res = resolveKeyframeDrag({
+            pointerDownX: d.startX,
+            pointerUpX: e.clientX,
+            clipWidthPx,
+            draggedClipPct: d.fromClipPct,
+            draggedIndex: i,
+            sortedClipPcts,
+          });
+          if (res.kind === "click") {
+            if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+            else onClickKeyframe?.(kf.percentage);
+          } else if (res.kind === "move" && res.toClipPct != null) {
+            onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct);
+          }
+        };
+
         return (
           <button
             key={`${i}-${kf.percentage}`}
@@ -128,10 +217,13 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
               pointerEvents: "auto",
               background: "none",
               border: "none",
-              cursor: "pointer",
+              cursor: canDrag ? "ew-resize" : "pointer",
               padding: 0,
+              touchAction: "none",
             }}
-            onClick={(e) => handleClick(e, kf.percentage)}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
             onContextMenu={(e) => {
               e.preventDefault();
               e.stopPropagation();

package/src/player/components/timelineCallbacks.ts

@@ -39,5 +39,11 @@ export interface TimelineEditCallbacks {
   onDeleteKeyframe?: (elementId: string, percentage: number) => void;
   onDeleteAllKeyframes?: (elementId: string) => void;
   onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onMoveKeyframeToPlayhead?: (elementId: string, percentage: number) => void;
+  onMoveKeyframe?: (
+    elementId: string,
+    fromClipPercentage: number,
+    toClipPercentage: number,
+  ) => void;
   onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
 }

package/src/utils/gsapSoftReload.test.ts

@@ -100,6 +100,35 @@ describe("applySoftReload", () => {
     expect(contentWindow.__hfStudioManualEditsApply).toHaveBeenCalled();
   });
 
+  it("strips a stale inline transform from an orphaned (non-timeline-child) element", () => {
+    // Repro: an element dragged via gsap.set whose keyframes were then removed is
+    // no longer a timeline child, so the timeline-children sweep misses it. Its
+    // stale inline transform must still be cleared so it snaps back to its source
+    // (overlay) position instead of rendering offset.
+    const orphan = document.createElement("div");
+    orphan.style.cssText = "left: 1240px; top: 200px; transform: translate(449px, 0px)";
+    Object.assign(orphan, { _gsap: {} }); // GSAP cache marker (set by gsap.set)
+
+    const scriptEl = document.createElement("script");
+    scriptEl.textContent = 'const tl = gsap.timeline({ paused: true }); tl.to("#x", { x: 1 });';
+    const container = document.createElement("div");
+    container.appendChild(scriptEl);
+
+    const { iframe } = buildMockIframe({ gsap: { timeline: vi.fn(), set: vi.fn() } });
+    (iframe as unknown as { contentDocument: unknown }).contentDocument = {
+      querySelectorAll: (sel: string) =>
+        sel === "script:not([src])" ? [scriptEl] : sel === "[style*='transform']" ? [orphan] : [],
+      createElement: (tag: string) => document.createElement(tag),
+      body: container,
+      head: document.createElement("div"),
+    };
+
+    applySoftReload(iframe, SCRIPT_TEXT);
+
+    expect(orphan.style.transform).toBe(""); // stale GSAP transform stripped
+    expect(orphan.style.left).toBe("1240px"); // authored CSS base preserved
+  });
+
   it("wraps execution in __hfSuppressSceneMutations when available", () => {
     let suppressionCalled = false;
     const { iframe } = buildMockIframe({

package/src/utils/gsapSoftReload.ts

@@ -251,6 +251,25 @@ export function applySoftReload(
       }
     }
 
+    // Also reset elements carrying a GSAP-applied inline `transform` that the
+    // timeline-children sweep above missed — a dragged element whose position
+    // was a standalone `gsap.set` (never a timeline child), or one whose
+    // keyframes were just removed (no longer in any timeline). Their last
+    // `gsap.set` transform is otherwise orphaned: the re-run won't re-set it
+    // and the sweep above can't see it, so the element renders offset from its
+    // source position (matching the overlay) until a full reload. The clear
+    // below runs BEFORE the re-run, which re-applies the transform for any
+    // element the new script still animates.
+    const seenTargets = new Set<Element>(allTargets);
+    for (const el of doc.querySelectorAll<HTMLElement>("[style*='transform']")) {
+      // Gate on the GSAP cache (`_gsap`) so we only reset transforms GSAP owns —
+      // never strip an authored, non-GSAP inline transform.
+      if (el.style.transform && "_gsap" in el && !seenTargets.has(el)) {
+        seenTargets.add(el);
+        allTargets.push(el);
+      }
+    }
+
     // Reset GSAP's internal transform cache so from() tweens don't read stale
     // end values. `clearProps: "all"` is needed to flush the cache, but it also
     // nukes the element's CSS base (position, width, height, etc.) from the

package/src/utils/studioSelectionSnapshot.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import { buildStudioSelectionSnapshot } from "./studioSelectionSnapshot";
+import type { DomEditSelection } from "../components/editor/domEditing";
+
+describe("buildStudioSelectionSnapshot", () => {
+  it("serializes a DOM edit selection without the live HTMLElement", () => {
+    const selection = {
+      element: { tagName: "H1" } as HTMLElement,
+      id: null,
+      hfId: "hero-title",
+      selector: ".title",
+      selectorIndex: 0,
+      label: "Hero title",
+      tagName: "h1",
+      sourceFile: "index.html",
+      compositionPath: "index.html",
+      isCompositionHost: false,
+      isInsideLockedComposition: false,
+      boundingBox: { x: 10, y: 20, width: 300, height: 64 },
+      textContent: "Launch faster",
+      dataAttributes: { "data-hf-id": "hero-title" },
+      inlineStyles: { color: "white" },
+      computedStyles: { "font-size": "48px" },
+      textFields: [],
+      capabilities: { canSelect: true, canEditStyles: true },
+    } as DomEditSelection;
+
+    const snapshot = buildStudioSelectionSnapshot({
+      projectId: "demo",
+      selection,
+      currentTime: 1.25,
+    });
+
+    expect(snapshot).toMatchObject({
+      schemaVersion: 1,
+      projectId: "demo",
+      compositionPath: "index.html",
+      sourceFile: "index.html",
+      currentTime: 1.25,
+      target: { hfId: "hero-title", selector: ".title", selectorIndex: 0 },
+      thumbnailUrl:
+        "/api/projects/demo/thumbnail/index.html?t=1.25&format=png&selector=.title&selectorIndex=0",
+    });
+    expect(JSON.stringify(snapshot)).not.toContain("HTMLElement");
+    expect(snapshot).not.toHaveProperty("element");
+  });
+});

package/src/utils/studioSelectionSnapshot.ts

@@ -0,0 +1,72 @@
+import type { StudioSelectionSnapshot } from "@hyperframes/studio-server";
+import type { DomEditSelection } from "../components/editor/domEditing";
+
+function round3(value: number): number {
+  return Math.round(value * 1000) / 1000;
+}
+
+function thumbnailUrl({
+  projectId,
+  selection,
+  currentTime,
+}: {
+  projectId: string;
+  selection: DomEditSelection;
+  currentTime: number;
+}): string {
+  const compPath = encodeURIComponent(
+    selection.compositionPath || selection.sourceFile || "index.html",
+  );
+  const params = new URLSearchParams({
+    t: String(round3(currentTime)),
+    format: "png",
+  });
+  if (selection.selector) params.set("selector", selection.selector);
+  if (selection.selectorIndex != null) params.set("selectorIndex", String(selection.selectorIndex));
+  return `/api/projects/${encodeURIComponent(projectId)}/thumbnail/${compPath}?${params.toString()}`;
+}
+
+export function buildStudioSelectionSnapshot({
+  projectId,
+  selection,
+  currentTime,
+}: {
+  projectId: string;
+  selection: DomEditSelection;
+  currentTime: number;
+}): StudioSelectionSnapshot {
+  return {
+    schemaVersion: 1,
+    projectId,
+    compositionPath: selection.compositionPath,
+    sourceFile: selection.sourceFile,
+    currentTime: round3(currentTime),
+    target: {
+      id: selection.id,
+      hfId: selection.hfId,
+      selector: selection.selector,
+      selectorIndex: selection.selectorIndex,
+    },
+    label: selection.label,
+    tagName: selection.tagName,
+    boundingBox: {
+      x: round3(selection.boundingBox.x),
+      y: round3(selection.boundingBox.y),
+      width: round3(selection.boundingBox.width),
+      height: round3(selection.boundingBox.height),
+    },
+    textContent: selection.textContent,
+    dataAttributes: { ...selection.dataAttributes },
+    inlineStyles: { ...selection.inlineStyles },
+    computedStyles: { ...selection.computedStyles },
+    textFields: selection.textFields.map((field) => ({
+      key: field.key,
+      label: field.label,
+      value: field.value,
+      tagName: field.tagName,
+      source: field.source,
+    })),
+    capabilities: { ...selection.capabilities },
+    thumbnailUrl: thumbnailUrl({ projectId, selection, currentTime }),
+  };
+}