@hyperframes/studio 0.6.85 → 0.6.87

package/src/components/editor/LayersPanel.tsx

@@ -60,9 +60,9 @@ export const LayersPanel = memo(function LayersPanel() {
     refreshKey,
     compositionLoading,
     timelineElements,
-    currentTime,
     showToast,
   } = useStudioContext();
+  const currentTime = usePlayerStore((s) => s.currentTime);
   const {
     domEditSelection,
     applyDomSelection,
@@ -239,9 +239,9 @@ export const LayersPanel = memo(function LayersPanel() {
 
   if (layers.length === 0) {
     return (
-      <div className="flex h-full flex-col items-center justify-center bg-neutral-900 px-6 text-center">
-        <Layers size={18} className="mb-3 text-neutral-600" />
-        <p className="text-sm font-medium text-neutral-200">No layers</p>
+      <div className="flex h-full flex-col items-center justify-center bg-panel-bg px-6 text-center">
+        <Layers size={18} className="mb-3 text-panel-text-5" />
+        <p className="text-sm font-medium text-panel-text-1">No layers</p>
         <p className="mt-1 text-xs text-neutral-500">Load a composition to see its element tree</p>
       </div>
     );
@@ -249,10 +249,10 @@ export const LayersPanel = memo(function LayersPanel() {
 
   return (
     <div
-      className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900"
+      className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg"
       onPointerLeave={() => handleLayerHover(null)}
     >
-      <div className="border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500">
+      <div className="border-b border-panel-border px-3 py-2 text-[11px] text-panel-text-3">
         {layers.length} layer{layers.length === 1 ? "" : "s"}
       </div>
       <div
@@ -289,8 +289,8 @@ export const LayersPanel = memo(function LayersPanel() {
                 isDragged
                   ? "opacity-40"
                   : selected
-                    ? "bg-studio-accent/14 text-studio-accent"
-                    : "text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"
+                    ? "bg-panel-accent/14 text-panel-accent"
+                    : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"
               } ${dragKey ? "cursor-grabbing" : draggable ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
               style={{ paddingLeft: 8 + layer.depth * 16 }}
             >
@@ -316,17 +316,19 @@ export const LayersPanel = memo(function LayersPanel() {
               <span
                 className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
                   selected
-                    ? "bg-studio-accent/18 text-studio-accent"
+                    ? "bg-panel-accent/18 text-panel-accent"
                     : isCompHost
-                      ? "bg-blue-900/40 text-blue-400"
-                      : "bg-neutral-800 text-neutral-500"
+                      ? "bg-panel-accent/40 text-panel-accent"
+                      : "bg-panel-hover text-panel-text-4"
                 }`}
               >
                 {getTagBadge(layer.tagName)}
               </span>
               <span className="min-w-0 flex-1 truncate text-[11px]">{layer.label}</span>
               {hasChildren && (
-                <span className="text-[9px] tabular-nums text-neutral-600">{layer.childCount}</span>
+                <span className="text-[9px] tabular-nums text-panel-text-5">
+                  {layer.childCount}
+                </span>
               )}
             </div>
           );

package/src/components/editor/MotionPathOverlay.tsx

@@ -0,0 +1,146 @@
+import { memo, useMemo, type RefObject } from "react";
+import type { ArcPathConfig } from "@hyperframes/core/gsap-parser";
+
+interface MotionPathOverlayProps {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  arcPath: ArcPathConfig | null;
+  waypoints: Array<{ x: number; y: number }> | null;
+  elementBaseRect: { left: number; top: number; scaleX: number; scaleY: number } | null;
+}
+
+function buildSvgPath(
+  waypoints: Array<{ x: number; y: number }>,
+  segments: ArcPathConfig["segments"],
+  base: { left: number; top: number; scaleX: number; scaleY: number },
+): string {
+  if (waypoints.length < 2) return "";
+
+  const toPixel = (wp: { x: number; y: number }) => ({
+    x: base.left + wp.x * base.scaleX,
+    y: base.top + wp.y * base.scaleY,
+  });
+
+  const first = toPixel(waypoints[0]!);
+  const parts = [`M ${first.x} ${first.y}`];
+
+  for (let i = 0; i < segments.length && i < waypoints.length - 1; i++) {
+    const seg = segments[i]!;
+    const end = toPixel(waypoints[i + 1]!);
+
+    if (seg.cp1 && seg.cp2) {
+      const c1 = toPixel(seg.cp1);
+      const c2 = toPixel(seg.cp2);
+      parts.push(`C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${end.x} ${end.y}`);
+    } else {
+      const start = toPixel(waypoints[i]!);
+      const dx = end.x - start.x;
+      const dy = end.y - start.y;
+      const c = seg.curviness ?? 1;
+      const offset = c * Math.abs(dx) * 0.25;
+      const c1x = start.x + dx * 0.33;
+      const c1y = start.y + dy * 0.33 - offset;
+      const c2x = start.x + dx * 0.66;
+      const c2y = start.y + dy * 0.66 - offset;
+      parts.push(`C ${c1x} ${c1y} ${c2x} ${c2y} ${end.x} ${end.y}`);
+    }
+  }
+
+  return parts.join(" ");
+}
+
+export const MotionPathOverlay = memo(function MotionPathOverlay({
+  arcPath,
+  waypoints,
+  elementBaseRect,
+}: MotionPathOverlayProps) {
+  const pathD = useMemo(() => {
+    if (!arcPath?.enabled || !waypoints || waypoints.length < 2 || !elementBaseRect) return "";
+    return buildSvgPath(waypoints, arcPath.segments, elementBaseRect);
+  }, [arcPath, waypoints, elementBaseRect]);
+
+  const anchorPoints = useMemo(() => {
+    if (!waypoints || !elementBaseRect) return [];
+    return waypoints.map((wp) => ({
+      x: elementBaseRect.left + wp.x * elementBaseRect.scaleX,
+      y: elementBaseRect.top + wp.y * elementBaseRect.scaleY,
+    }));
+  }, [waypoints, elementBaseRect]);
+
+  const controlPoints = useMemo(() => {
+    if (!arcPath?.enabled || !elementBaseRect) return [];
+    const points: Array<{
+      segIndex: number;
+      type: "cp1" | "cp2";
+      x: number;
+      y: number;
+      anchorX: number;
+      anchorY: number;
+    }> = [];
+    for (let i = 0; i < arcPath.segments.length; i++) {
+      const seg = arcPath.segments[i]!;
+      if (seg.cp1 && seg.cp2 && waypoints) {
+        const anchor1 = waypoints[i]!;
+        const anchor2 = waypoints[i + 1]!;
+        points.push({
+          segIndex: i,
+          type: "cp1",
+          x: elementBaseRect.left + seg.cp1.x * elementBaseRect.scaleX,
+          y: elementBaseRect.top + seg.cp1.y * elementBaseRect.scaleY,
+          anchorX: elementBaseRect.left + anchor1.x * elementBaseRect.scaleX,
+          anchorY: elementBaseRect.top + anchor1.y * elementBaseRect.scaleY,
+        });
+        points.push({
+          segIndex: i,
+          type: "cp2",
+          x: elementBaseRect.left + seg.cp2.x * elementBaseRect.scaleX,
+          y: elementBaseRect.top + seg.cp2.y * elementBaseRect.scaleY,
+          anchorX: elementBaseRect.left + anchor2.x * elementBaseRect.scaleX,
+          anchorY: elementBaseRect.top + anchor2.y * elementBaseRect.scaleY,
+        });
+      }
+    }
+    return points;
+  }, [arcPath, waypoints, elementBaseRect]);
+
+  if (!pathD) return null;
+
+  return (
+    <svg className="absolute inset-0 pointer-events-none z-20 overflow-visible">
+      <path d={pathD} fill="none" stroke="rgba(45, 212, 191, 0.4)" strokeWidth={2} />
+
+      {controlPoints.map((cp) => (
+        <g key={`${cp.segIndex}-${cp.type}`}>
+          <line
+            x1={cp.anchorX}
+            y1={cp.anchorY}
+            x2={cp.x}
+            y2={cp.y}
+            stroke="rgba(167, 139, 250, 0.3)"
+            strokeWidth={1}
+            strokeDasharray="3 2"
+          />
+          <circle
+            cx={cp.x}
+            cy={cp.y}
+            r={4}
+            fill="#a78bfa"
+            className="pointer-events-auto cursor-grab"
+          />
+        </g>
+      ))}
+
+      {anchorPoints.map((pt, i) => (
+        <circle
+          key={i}
+          cx={pt.x}
+          cy={pt.y}
+          r={5}
+          fill="#3CE6AC"
+          stroke="rgba(255,255,255,0.5)"
+          strokeWidth={1}
+          className="pointer-events-auto cursor-pointer"
+        />
+      ))}
+    </svg>
+  );
+});

package/src/components/editor/PropertyPanel.tsx

@@ -1,10 +1,10 @@
-import { memo } from "react";
-import { Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
+import { memo, useRef, useState } from "react";
+import { Eye, Layers, Move, X } from "../../icons/SystemIcons";
+import { useStudioContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import {
   EMPTY_STYLES,
   formatPxMetricValue,
-  LABEL,
   parsePxMetricValue,
   RESPONSIVE_GRID,
 } from "./propertyPanelHelpers";
@@ -16,7 +16,7 @@ import { KeyframeNavigation } from "./KeyframeNavigation";
 import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
 import { usePlayerStore } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
-import { computeFitToChildrenSize, type PropertyPanelProps } from "./propertyPanelHelpers";
+import { type PropertyPanelProps } from "./propertyPanelHelpers";
 
 // Re-export helpers that external consumers import from this module
 export {
@@ -41,7 +41,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   assets,
   element,
   multiSelectCount = 0,
-  copiedAgentPrompt,
+  copiedAgentPrompt: _copiedAgentPrompt,
   onClearSelection,
   onSetStyle,
   onSetAttribute,
@@ -53,7 +53,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   onSetTextFieldStyle,
   onAddTextField,
   onRemoveTextField,
-  onAskAgent,
+  onAskAgent: _onAskAgent,
   onImportAssets,
   fontAssets = [],
   onImportFonts,
@@ -70,13 +70,22 @@ export const PropertyPanel = memo(function PropertyPanel({
   onAddGsapFromProperty,
   onRemoveGsapFromProperty,
   onAddGsapAnimation,
+  onSetArcPath,
+  onUpdateArcSegment,
   onAddKeyframe,
   onRemoveKeyframe,
   onConvertToKeyframes,
   onCommitAnimatedProperty,
   onSeekToTime,
+  recordingState,
+  recordingDuration,
+  onToggleRecording,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
+  const { showToast } = useStudioContext();
+  const [clipboardCopied, setClipboardCopied] = useState(false);
+  const clipboardTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const currentTime = usePlayerStore((s) => s.currentTime);
 
   if (!element) {
     return (
@@ -170,10 +179,8 @@ export const PropertyPanel = memo(function PropertyPanel({
     onSetManualRotation(element, { angle: parsed });
   };
 
-  // Keyframe navigation state
   const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
   const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
-  const currentTime = usePlayerStore((s) => s.currentTime);
   const currentPct = elDuration > 0 ? ((currentTime - elStart) / elDuration) * 100 : 0;
 
   const gsapKeyframes = gsapAnimations?.find((a) => a.keyframes)?.keyframes?.keyframes ?? null;
@@ -217,6 +224,34 @@ export const PropertyPanel = memo(function PropertyPanel({
     }
   })();
 
+  const gsapBorderRadius: { tl: number; tr: number; br: number; bl: number } | null = (() => {
+    if (!gsapRuntimeValues || !("borderRadius" in gsapRuntimeValues)) {
+      const hasBRProp = gsapAnimations.some(
+        (a) =>
+          "borderRadius" in a.properties ||
+          a.keyframes?.keyframes.some((kf) => "borderRadius" in kf.properties),
+      );
+      if (!hasBRProp) return null;
+    }
+    const iframe = previewIframeRef?.current;
+    const selector = element.id ? `#${element.id}` : element.selector;
+    if (!iframe?.contentDocument || !selector) return null;
+    try {
+      const el = iframe.contentDocument.querySelector(selector);
+      if (!el) return null;
+      const cs = iframe.contentWindow!.getComputedStyle(el);
+      const parse = (v: string) => Number.parseFloat(v) || 0;
+      return {
+        tl: parse(cs.borderTopLeftRadius),
+        tr: parse(cs.borderTopRightRadius),
+        br: parse(cs.borderBottomRightRadius),
+        bl: parse(cs.borderBottomLeftRadius),
+      };
+    } catch {
+      return null;
+    }
+  })();
+
   const displayX = gsapRuntimeValues?.x ?? manualOffset.x;
   const displayY = gsapRuntimeValues?.y ?? manualOffset.y;
   const displayW = gsapRuntimeValues?.width ?? resolvedWidth;
@@ -224,34 +259,100 @@ export const PropertyPanel = memo(function PropertyPanel({
   const displayR = gsapRuntimeValues?.rotation ?? manualRotation.angle;
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900 text-neutral-100">
-      <div className="border-b border-neutral-800 px-4 py-5">
-        <div className="flex items-start justify-between gap-4">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg text-panel-text-1">
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between gap-4">
           <div className="min-w-0">
-            <div className={LABEL}>Document</div>
-            <div className="mt-3 truncate text-[12px] font-semibold text-neutral-100">
+            <div className="truncate text-[13px] font-semibold text-neutral-100">
               {element.label}
             </div>
-            <div className="mt-1 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
+            <div className="mt-0.5 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => {
+                const file = element.sourceFile ?? "index.html";
+                let lineNum: number | null = null;
+                try {
+                  const src =
+                    previewIframeRef?.current?.contentDocument?.documentElement?.outerHTML ?? "";
+                  if (src && element.id) {
+                    const idx = src.indexOf(`id="${element.id}"`);
+                    if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+                  }
+                  if (!lineNum && element.selector) {
+                    const tag = element.tagName.toLowerCase();
+                    const cls = element.selector.startsWith(".")
+                      ? element.selector.slice(1).split(".")[0]
+                      : null;
+                    const search = cls ? `class="${cls}` : `<${tag}`;
+                    const idx = src.indexOf(search);
+                    if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+                  }
+                } catch {}
+                const fileLoc = lineNum ? `${file}:${lineNum}` : file;
+                const lines = [
+                  `Element: ${element.label} (${sourceLabel})`,
+                  `File: ${fileLoc}`,
+                  `Position: x=${Math.round(element.boundingBox.x)}, y=${Math.round(element.boundingBox.y)}`,
+                  `Size: ${Math.round(element.boundingBox.width)}×${Math.round(element.boundingBox.height)}`,
+                  `Tag: <${element.tagName}>`,
+                ];
+                if (
+                  element.computedStyles["z-index"] &&
+                  element.computedStyles["z-index"] !== "auto"
+                ) {
+                  lines.push(`Z-index: ${element.computedStyles["z-index"]}`);
+                }
+                if (gsapAnimations.length > 0) {
+                  const anim = gsapAnimations[0];
+                  lines.push(
+                    `Animation: ${anim.method}() ${anim.duration}s at ${anim.position}s, ease: ${anim.ease ?? "default"}`,
+                  );
+                  const props = Object.entries(anim.properties)
+                    .map(([k, v]) => `${k}: ${v}`)
+                    .join(", ");
+                  if (props) lines.push(`Properties: ${props}`);
+                }
+                const text = lines.join("\n");
+                void navigator.clipboard.writeText(text);
+                showToast(
+                  `Copied element info for ${element.label} — paste into any AI agent`,
+                  "info",
+                );
+                setClipboardCopied(true);
+                clearTimeout(clipboardTimerRef.current);
+                clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
+              }}
+              className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
+                clipboardCopied
+                  ? "text-studio-accent"
+                  : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
+              }`}
+              title={clipboardCopied ? "Copied!" : "Copy element info to clipboard"}
+            >
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              >
+                <rect x="5" y="5" width="9" height="9" rx="1.5" />
+                <path d="M11 5V3.5A1.5 1.5 0 009.5 2h-6A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              aria-label="Clear selection"
+              onClick={onClearSelection}
+              className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+            >
+              <X size={13} />
+            </button>
           </div>
-          <button
-            type="button"
-            aria-label="Clear selection"
-            onClick={onClearSelection}
-            className="flex h-9 w-9 items-center justify-center rounded-full border border-neutral-700 bg-neutral-950 text-neutral-500 shadow-[0_1px_2px_rgba(0,0,0,0.2)] transition-colors hover:border-neutral-600 hover:text-neutral-200"
-          >
-            <X size={13} />
-          </button>
-        </div>
-        <div className="mt-4 flex min-w-0 flex-wrap items-center gap-2">
-          <button
-            type="button"
-            onClick={onAskAgent}
-            className="inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-700 bg-neutral-950 px-3.5 text-[11px] font-medium text-neutral-100 transition-colors hover:border-studio-accent/40 hover:text-studio-accent"
-          >
-            <MessageSquare size={15} />
-            <span>{copiedAgentPrompt ? "Prompt copied" : "Copy prompt to AI agent"}</span>
-          </button>
         </div>
       </div>
 
@@ -384,29 +485,6 @@ export const PropertyPanel = memo(function PropertyPanel({
                 />
               )}
             </div>
-            {element.capabilities.canApplyManualSize && (
-              <button
-                type="button"
-                className="flex-shrink-0 rounded p-1 text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
-                title="Fit to children"
-                onClick={() => {
-                  const size = computeFitToChildrenSize(element);
-                  if (size) onSetManualSize(element, size);
-                }}
-              >
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 14 14"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.2"
-                >
-                  <rect x="2" y="2" width="10" height="10" strokeDasharray="2 1.5" rx="1" />
-                  <path d="M2 4.5h1m-1 5h1m8-5h1m-1 5h1M4.5 2v1m5-1v1M4.5 11v1m5-1v1" />
-                </svg>
-              </button>
-            )}
             <div className="flex items-center gap-1">
               <div className="flex-1">
                 <MetricField
@@ -467,17 +545,40 @@ export const PropertyPanel = memo(function PropertyPanel({
                     />
                   )}
                 </div>
-                <MetricField
-                  label="Scale"
-                  value={String(gsapRuntimeValues.scale ?? 1)}
-                  scrub
-                  onCommit={(next) => {
-                    const v = Number.parseFloat(next);
-                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
-                      void onCommitAnimatedProperty(element, "scale", v);
-                    }
-                  }}
-                />
+                <div className="flex items-center gap-1">
+                  <div className="flex-1">
+                    <MetricField
+                      label="Scale"
+                      value={String(gsapRuntimeValues.scale ?? 1)}
+                      scrub
+                      onCommit={(next) => {
+                        const v = Number.parseFloat(next);
+                        if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                          void onCommitAnimatedProperty(element, "scale", v);
+                        }
+                      }}
+                    />
+                  </div>
+                  {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
+                    <KeyframeNavigation
+                      property="scale"
+                      keyframes={gsapKeyframes}
+                      currentPercentage={currentPct}
+                      onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                      onAddKeyframe={() => {
+                        if (onCommitAnimatedProperty) {
+                          void onCommitAnimatedProperty(
+                            element,
+                            "scale",
+                            gsapRuntimeValues?.scale ?? 1,
+                          );
+                        }
+                      }}
+                      onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
+                      onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+                    />
+                  )}
+                </div>
                 <MetricField
                   label="RotX"
                   value={`${gsapRuntimeValues.rotationX ?? 0}°`}
@@ -533,9 +634,37 @@ export const PropertyPanel = memo(function PropertyPanel({
               onAddFromProperty={onAddGsapFromProperty}
               onRemoveFromProperty={onRemoveGsapFromProperty}
               onAddAnimation={onAddGsapAnimation}
+              onSetArcPath={onSetArcPath}
+              onUpdateArcSegment={onUpdateArcSegment}
             />
           )}
 
+        {onToggleRecording && (
+          <div className="px-4 pb-3">
+            <button
+              type="button"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={onToggleRecording}
+              className={`w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${
+                recordingState === "recording"
+                  ? "bg-red-500/15 text-red-400 border border-red-500/30 animate-pulse"
+                  : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"
+              }`}
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10">
+                {recordingState === "recording" ? (
+                  <rect x="1" y="1" width="8" height="8" rx="1" fill="currentColor" />
+                ) : (
+                  <circle cx="5" cy="5" r="4.5" fill="currentColor" />
+                )}
+              </svg>
+              {recordingState === "recording"
+                ? `Stop recording ${(recordingDuration ?? 0).toFixed(1)}s — press R`
+                : "Record gesture (R) — move pointer to capture motion"}
+            </button>
+          </div>
+        )}
+
         {showEditableSections && (
           <StyleSections
             projectId={projectId}
@@ -544,6 +673,7 @@ export const PropertyPanel = memo(function PropertyPanel({
             assets={assets}
             onSetStyle={onSetStyle}
             onImportAssets={onImportAssets}
+            gsapBorderRadius={gsapBorderRadius}
           />
         )}
       </div>

package/src/components/editor/SourceEditor.tsx

@@ -143,7 +143,6 @@ export const SourceEditor = memo(function SourceEditor({
       selection: { anchor: pos },
       effects: EditorView.scrollIntoView(pos, { y: "center" }),
     });
-    view.focus();
   }, [revealOffset]);
 
   return <div ref={mountEditor} className="h-full w-full overflow-hidden" />;

package/src/components/editor/StaggerControls.tsx

@@ -0,0 +1,61 @@
+import { memo, useState } from "react";
+import { MetricField } from "./propertyPanelPrimitives";
+
+export type StaggerOrder = "dom" | "reverse" | "center" | "edges" | "random";
+
+interface StaggerControlsProps {
+  elementCount: number;
+  onApplyStagger: (offsetMs: number, order: StaggerOrder) => void;
+}
+
+const ORDER_OPTIONS: StaggerOrder[] = ["dom", "reverse", "center", "edges", "random"];
+const ORDER_LABELS: Record<StaggerOrder, string> = {
+  dom: "DOM order",
+  reverse: "Reverse",
+  center: "Center out",
+  edges: "Edges in",
+  random: "Random",
+};
+
+export const StaggerControls = memo(function StaggerControls({
+  elementCount,
+  onApplyStagger,
+}: StaggerControlsProps) {
+  const [offsetMs, setOffsetMs] = useState(80);
+  const [order, setOrder] = useState<StaggerOrder>("dom");
+
+  if (elementCount < 2) return null;
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-neutral-800 bg-neutral-900/50 px-2 py-1.5">
+      <span className="text-[10px] font-medium text-neutral-500">Stagger</span>
+      <MetricField
+        label="Offset"
+        value={String(offsetMs)}
+        suffix="ms"
+        onCommit={(raw) => {
+          const v = Number.parseInt(raw, 10);
+          if (Number.isFinite(v) && v >= 0) setOffsetMs(v);
+        }}
+      />
+      <select
+        value={order}
+        onChange={(e) => setOrder(e.target.value as StaggerOrder)}
+        className="rounded-md border border-neutral-700 bg-neutral-900 px-1.5 py-1 text-[10px] text-neutral-200 outline-none"
+      >
+        {ORDER_OPTIONS.map((o) => (
+          <option key={o} value={o}>
+            {ORDER_LABELS[o]}
+          </option>
+        ))}
+      </select>
+      <button
+        type="button"
+        onClick={() => onApplyStagger(offsetMs, order)}
+        className="rounded-md bg-panel-accent/10 px-2 py-1 text-[10px] font-semibold text-panel-accent transition-colors hover:bg-panel-accent/20"
+      >
+        Apply ({elementCount})
+      </button>
+    </div>
+  );
+});

package/src/components/editor/domEditOverlayGeometry.test.ts

@@ -0,0 +1,13 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import { selectionCacheKey } from "./domEditOverlayGeometry";
+
+describe("selectionCacheKey — hfId collision (R7)", () => {
+  it("produces distinct keys for two elements that differ only by hfId", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const a = selectionCacheKey({ sourceFile: "index.html", hfId: "hf-111" } as any);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const b = selectionCacheKey({ sourceFile: "index.html", hfId: "hf-222" } as any);
+    expect(a).not.toBe(b);
+  });
+});

package/src/components/editor/domEditOverlayGeometry.ts

@@ -190,10 +190,11 @@ export function filterNestedDomEditGroupItems<T extends { element: HTMLElement }
 }
 
 export function selectionCacheKey(
-  selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile">,
+  selection: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex" | "sourceFile">,
 ): string {
   return [
     selection.sourceFile ?? "",
+    selection.hfId ?? "",
     selection.id ?? "",
     selection.selector ?? "",
     selection.selectorIndex ?? "",