feat(studio): address review — group-aware off-canvas indicators + fixes

miguel-heygen · claude · miguel-heygen · commit 441f841941e8 · 2026-06-24T17:07:44.000-04:00
- Off-canvas indicator suppression now skips every selected element (primary
  AND marquee group members), not just the primary, so group members no longer
  render a doubled overlay (group rect + dashed indicator).
- Drop selection from the off-canvas layout effect deps; the selected-element
  filter runs at render time. Avoids re-walking geometry on each selection change.
- applyMarqueeSelection now honors STUDIO_INSPECTOR_PANELS_ENABLED.
- Restore the stale-selection clear in useDomEditPreviewSync when the selected
  element no longer resolves after a re-sync. Drag-release stays handled by
  suppressNextBoxClickRef.
- Off-canvas indicator is keyboard-accessible; canvas cursor driven by marquee
  rect state, not a render-time ref read.
- Rename partiallyOutside -&gt; extendsOutsideComp + comment the clip-path hit-test.
- Extract OffCanvasIndicators into its own component (DomEditOverlay was already
  over the 600-LOC cap on this branch; extraction brings it under).
- Declare onUpdateKeyframeEase on PropertyPanelProps so this branch typechecks
  standalone (handler + wiring already here; only the type had leaked upstack).

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/studio/src/components/editor/DomEditOverlay.tsx b/packages/studio/src/components/editor/DomEditOverlay.tsx
@@ -14,6 +14,7 @@ import {
   focusDomEditOverlayElement,
 } from "./domEditOverlayGestures";
 import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
+import { OffCanvasIndicators, type OffCanvasRect } from "./OffCanvasIndicators";
 import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
 import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
 import { GridOverlay } from "./GridOverlay";
@@ -224,9 +225,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   // Off-canvas element indicators — dashed outlines for elements positioned
   // outside the composition bounds so users can find them.
   const offCanvasElementsRef = useRef<Map<string, HTMLElement>>(new Map());
-  const [offCanvasRects, setOffCanvasRects] = useState<
-    { key: string; left: number; top: number; width: number; height: number }[]
-  >([]);
+  const [offCanvasRects, setOffCanvasRects] = useState<OffCanvasRect[]>([]);
   useEffect(() => {
     const iframe = iframeRef.current;
     const overlay = overlayRef.current;
@@ -248,19 +247,24 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       if (!isElementComputedVisible(item.element)) continue;
       const r = toOverlayRect(overlay, iframe, item.element);
       if (!r) continue;
-      const partiallyOutside =
+      // Any edge crossing the composition border → gray-zone indicator (the
+      // in-canvas portion is clipped away below, so only the sliver shows).
+      const extendsOutsideComp =
         r.left < compRect.left ||
         r.left + r.width > compRect.left + compRect.width ||
         r.top < compRect.top ||
         r.top + r.height > compRect.top + compRect.height;
-      if (partiallyOutside) {
+      if (extendsOutsideComp) {
         rects.push({ key: item.key, left: r.left, top: r.top, width: r.width, height: r.height });
         elMap.set(item.key, item.element);
       }
     }
     offCanvasElementsRef.current = elMap;
     setOffCanvasRects(rects);
-  }, [iframeRef, compRect, activeCompositionPath, selection]);
+    // Positions depend on layout, not selection — the selected-element
+    // suppression is a render-time filter, so selection/groupSelections stay
+    // out of the deps to avoid re-walking geometry on each selection change.
+  }, [iframeRef, compRect, activeCompositionPath]);
 
   const gestures = createDomEditOverlayGestureHandlers({
     overlayRef,
@@ -407,7 +411,8 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       className="absolute inset-0 z-10 pointer-events-auto outline-none"
       tabIndex={-1}
       aria-label="Composition canvas"
-      style={marquee.marqueeRef.current?.pastThreshold ? { cursor: "crosshair" } : undefined}
+      // Cursor follows marquee rect *state* (re-renders), not the mutable ref.
+      style={marquee.marqueeRect ? { cursor: "crosshair" } : undefined}
       onPointerDownCapture={(event) =>
         focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay)
       }
@@ -554,52 +559,15 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             }}
           />
         ))}
-      {offCanvasRects
-        .filter((r) => {
-          const selEl = selection?.element;
-          return !selEl || offCanvasElementsRef.current.get(r.key) !== selEl;
-        })
-        .map((r) => {
-          const pos = { left: r.left, top: r.top, width: r.width, height: r.height };
-          const cL = Math.max(0, compRect.left - r.left);
-          const cT = Math.max(0, compRect.top - r.top);
-          const cR = Math.min(r.width, compRect.left + compRect.width - r.left);
-          const cB = Math.min(r.height, compRect.top + compRect.height - r.top);
-          const hasInside = cL < cR && cT < cB;
-          const clipOutside = hasInside
-            ? `polygon(evenodd, 0 0, ${r.width}px 0, ${r.width}px ${r.height}px, 0 ${r.height}px, 0 0, ${cL}px ${cT}px, ${cR}px ${cT}px, ${cR}px ${cB}px, ${cL}px ${cB}px, ${cL}px ${cT}px)`
-            : undefined;
-          const clipInside = `inset(${cT}px ${Math.max(0, r.width - cR)}px ${Math.max(0, r.height - cB)}px ${cL}px round 6px)`;
-          const handleClick = async (e: React.MouseEvent) => {
-            e.stopPropagation();
-            const el = offCanvasElementsRef.current.get(r.key);
-            if (!el) return;
-            const { resolveDomEditSelection } = await import("./domEditingLayers");
-            const acp = activeCompositionPathRef.current ?? "index.html";
-            const sel = await resolveDomEditSelection(el, {
-              activeCompositionPath: acp,
-              isMasterView: !acp || acp === "index.html",
-              skipSourceProbe: true,
-            });
-            if (sel) onSelectionChangeRef.current(sel, { revealPanel: true });
-          };
-          return (
-            <div key={`offcanvas-${r.key}`} className="pointer-events-none absolute" style={pos}>
-              {/* Dashed layer — clipped to exclude canvas area */}
-              <div
-                className="pointer-events-auto absolute inset-0 border-2 border-dashed border-studio-accent/60 rounded-md cursor-pointer hover:border-studio-accent hover:bg-studio-accent/10 transition-colors"
-                style={clipOutside ? { clipPath: clipOutside } : undefined}
-                title={`Off-canvas: ${r.key} — click to select`}
-                onClick={handleClick}
-              />
-              {/* Solid layer — clipped to canvas bounds, covers inside portion */}
-              <div
-                className="pointer-events-none absolute inset-0 border border-studio-accent/80 rounded-md bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-                style={{ clipPath: clipInside }}
-              />
-            </div>
-          );
-        })}
+      <OffCanvasIndicators
+        rects={offCanvasRects}
+        elements={offCanvasElementsRef}
+        compRect={compRect}
+        selection={selection}
+        groupSelections={groupSelections}
+        activeCompositionPathRef={activeCompositionPathRef}
+        onSelectionChangeRef={onSelectionChangeRef}
+      />
       {marquee.marqueeRect && (
         <div
           aria-hidden="true"
diff --git a/packages/studio/src/components/editor/OffCanvasIndicators.tsx b/packages/studio/src/components/editor/OffCanvasIndicators.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { type DomEditSelection } from "./domEditing";
+
+export interface OffCanvasRect {
+  key: string;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface OffCanvasIndicatorsProps {
+  rects: OffCanvasRect[];
+  elements: React.MutableRefObject<Map<string, HTMLElement>>;
+  compRect: { left: number; top: number; width: number; height: number };
+  selection: DomEditSelection | null;
+  groupSelections: DomEditSelection[];
+  activeCompositionPathRef: React.MutableRefObject<string | null>;
+  onSelectionChangeRef: React.MutableRefObject<
+    (selection: DomEditSelection, options?: { revealPanel?: boolean; additive?: boolean }) => void
+  >;
+}
+
+/**
+ * Dashed teal indicators for elements whose bounds extend past the composition
+ * (the "gray zone"). The in-canvas portion is clipped away so only the
+ * protruding sliver is dashed; the inside portion gets a solid outline.
+ * Extracted from DomEditOverlay to keep that file under the 600-LOC cap.
+ */
+export function OffCanvasIndicators({
+  rects,
+  elements,
+  compRect,
+  selection,
+  groupSelections,
+  activeCompositionPathRef,
+  onSelectionChangeRef,
+}: OffCanvasIndicatorsProps): React.ReactElement {
+  return (
+    <>
+      {rects
+        .filter((r) => {
+          // Suppress the indicator for any currently-selected element (primary
+          // OR a marquee group member) — those already render a selection box.
+          const el = elements.current.get(r.key);
+          if (!el) return true;
+          if (selection?.element === el) return false;
+          return !groupSelections.some((g) => g.element === el);
+        })
+        .map((r) => {
+          const pos = { left: r.left, top: r.top, width: r.width, height: r.height };
+          const cL = Math.max(0, compRect.left - r.left);
+          const cT = Math.max(0, compRect.top - r.top);
+          const cR = Math.min(r.width, compRect.left + compRect.width - r.left);
+          const cB = Math.min(r.height, compRect.top + compRect.height - r.top);
+          const hasInside = cL < cR && cT < cB;
+          const clipOutside = hasInside
+            ? `polygon(evenodd, 0 0, ${r.width}px 0, ${r.width}px ${r.height}px, 0 ${r.height}px, 0 0, ${cL}px ${cT}px, ${cR}px ${cT}px, ${cR}px ${cB}px, ${cL}px ${cB}px, ${cL}px ${cT}px)`
+            : undefined;
+          const clipInside = `inset(${cT}px ${Math.max(0, r.width - cR)}px ${Math.max(0, r.height - cB)}px ${cL}px round 6px)`;
+          const selectOffCanvas = async () => {
+            const el = elements.current.get(r.key);
+            if (!el) return;
+            const { resolveDomEditSelection } = await import("./domEditingLayers");
+            const acp = activeCompositionPathRef.current ?? "index.html";
+            const sel = await resolveDomEditSelection(el, {
+              activeCompositionPath: acp,
+              isMasterView: !acp || acp === "index.html",
+              skipSourceProbe: true,
+            });
+            if (sel) onSelectionChangeRef.current(sel, { revealPanel: true });
+          };
+          const handleClick = (e: React.MouseEvent) => {
+            e.stopPropagation();
+            void selectOffCanvas();
+          };
+          return (
+            <div key={`offcanvas-${r.key}`} className="pointer-events-none absolute" style={pos}>
+              {/* Dashed layer — clipped to exclude canvas area.
+                  Note: clip-path is visual only — hit-testing still covers the
+                  full bounding rect, so clicking the in-canvas portion selects
+                  via this handler. That's acceptable: it resolves the same
+                  element the normal canvas path would, just with
+                  skipSourceProbe (the element is already known here). */}
+              <div
+                role="button"
+                tabIndex={0}
+                aria-label={`Select off-canvas element ${r.key}`}
+                className="pointer-events-auto absolute inset-0 border-2 border-dashed border-studio-accent/60 rounded-md cursor-pointer hover:border-studio-accent hover:bg-studio-accent/10 transition-colors"
+                style={clipOutside ? { clipPath: clipOutside } : undefined}
+                title={`Off-canvas: ${r.key} — click to select`}
+                onClick={handleClick}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    void selectOffCanvas();
+                  }
+                }}
+              />
+              {/* Solid layer — clipped to canvas bounds, covers inside portion */}
+              <div
+                className="pointer-events-none absolute inset-0 border border-studio-accent/80 rounded-md bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+                style={{ clipPath: clipInside }}
+              />
+            </div>
+          );
+        })}
+    </>
+  );
+}
diff --git a/packages/studio/src/components/editor/propertyPanelHelpers.ts b/packages/studio/src/components/editor/propertyPanelHelpers.ts
@@ -66,6 +66,7 @@ export interface PropertyPanelProps {
     value: number | string,
   ) => void;
   onRemoveKeyframe?: (animationId: string, percentage: number) => void;
+  onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
   onConvertToKeyframes?: (animationId: string) => void;
   onCommitAnimatedProperty?: (
     selection: DomEditSelection,
diff --git a/packages/studio/src/hooks/useDomEditPreviewSync.ts b/packages/studio/src/hooks/useDomEditPreviewSync.ts
@@ -68,6 +68,12 @@ export function useDomEditPreviewSync({
 
       const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
       if (!nextElement) {
+        // The selected element no longer resolves in the (re-synced) document
+        // — comp/hot reload, activeCompPath swap, or post-save replacement.
+        // Clear so overlay geometry isn't computed on a stale, detached node.
+        // (Drag-release-in-gray-zone is handled separately by
+        // suppressNextBoxClickRef; the dragged element still resolves here.)
+        applyDomSelection(null, { revealPanel: false });
         return;
       }
 
diff --git a/packages/studio/src/hooks/useDomSelection.ts b/packages/studio/src/hooks/useDomSelection.ts
@@ -423,6 +423,15 @@ export function useDomSelection({
   const applyMarqueeSelection = useCallback(
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
+      // Honor the inspector-panels kill switch like applyDomSelection does, so
+      // marquee can't land selections while the inspector UI is suppressed.
+      if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
+        domEditSelectionRef.current = null;
+        domEditGroupSelectionsRef.current = [];
+        setDomEditSelection(null);
+        setDomEditGroupSelections([]);
+        return;
+      }
       if (selections.length === 0) {
         if (!additive) applyDomSelection(null, { revealPanel: false });
         return;
