fix(canvas): show prompt composer on hover

Author: erickkkyt

src/components/beatcanvas/beatcanvas-composer-shell.tsx

@@ -32,6 +32,8 @@ export function BeatCanvasComposerShell({
   isPromptComposing,
   labels,
   onActiveComposerCardIdChange,
+  onComposerFocusChange,
+  onComposerPointerChange,
   onPromptChange,
   onPromptCommit,
   onGenerateDraft,
@@ -54,6 +56,8 @@ export function BeatCanvasComposerShell({
   isPromptComposing: boolean;
   labels: CanvasLabels;
   onActiveComposerCardIdChange: (cardId: string | null) => void;
+  onComposerFocusChange?: (isFocusWithinComposer: boolean) => void;
+  onComposerPointerChange?: (isPointerWithinComposer: boolean) => void;
   onPromptChange: (nextPrompt: string) => void;
   onPromptCommit: (nextPrompt: string) => void;
   onGenerateDraft: (draftId: string) => void;
@@ -121,14 +125,27 @@ export function BeatCanvasComposerShell({
     <section
       ref={composerRef}
       className={cn(
-        'beat-composer pointer-events-auto absolute z-[60] isolate',
+        'beat-composer beat-pop-in pointer-events-auto absolute z-[60] isolate',
         composerCardClassName,
         'w-[min(560px,calc(100vw-32px))]',
         position ? '' : 'bottom-[98px] left-1/2 -translate-x-1/2'
       )}
       style={position ? { left: position.left, top: position.top } : undefined}
       onPointerDown={stopComposerEvent}
       onPointerDownCapture={stopComposerEvent}
+      onPointerEnter={() => onComposerPointerChange?.(true)}
+      onPointerLeave={() => onComposerPointerChange?.(false)}
+      onFocusCapture={() => onComposerFocusChange?.(true)}
+      onBlurCapture={(event) => {
+        const nextFocusedElement = event.relatedTarget;
+        if (
+          nextFocusedElement instanceof Node &&
+          event.currentTarget.contains(nextFocusedElement)
+        ) {
+          return;
+        }
+        onComposerFocusChange?.(false);
+      }}
       onKeyDownCapture={stopComposerKeyboardEvent}
       onKeyUpCapture={stopComposerKeyboardEvent}
     >

src/components/beatcanvas/beatcanvas-composer-utils.test.ts

@@ -26,6 +26,18 @@ test('keeps the anchored composer inside the canvas horizontally', () => {
   );
 });
 
+test('places the hover composer above a card when it would overflow below', () => {
+  assert.deepEqual(
+    resolveAnchoredComposerPosition({
+      frame: { left: 300, top: 520, width: 240, height: 220 },
+      viewportWidth: 1200,
+      viewportHeight: 800,
+      composerHeight: 240,
+    }),
+    { left: 140, top: 266 }
+  );
+});
+
 test('reduces zoom only when the frame and composer do not fit vertically', () => {
   assert.deepEqual(
     resolveComposerFocusLayout({

src/components/beatcanvas/beatcanvas-composer-utils.ts

@@ -121,12 +121,16 @@ export const stopComposerKeyboardEvent = <
 export const resolveAnchoredComposerPosition = ({
   frame,
   viewportWidth,
+  viewportHeight,
+  composerHeight,
   preferredWidth = 560,
   edgeInset = 16,
   gap = 14,
 }: {
   frame: { left: number; top: number; width: number; height: number };
   viewportWidth: number;
+  viewportHeight?: number;
+  composerHeight?: number;
   preferredWidth?: number;
   edgeInset?: number;
   gap?: number;
@@ -138,10 +142,31 @@ export const resolveAnchoredComposerPosition = ({
     edgeInset,
     viewportWidth - edgeInset - composerWidth
   );
+  const preferredBelowTop = frame.top + frame.height + gap;
+  let top = preferredBelowTop;
+
+  if (
+    typeof viewportHeight === 'number' &&
+    typeof composerHeight === 'number'
+  ) {
+    const maximumTop = Math.max(
+      edgeInset,
+      viewportHeight - edgeInset - composerHeight
+    );
+    const preferredAboveTop = frame.top - gap - composerHeight;
+
+    if (preferredBelowTop + composerHeight <= viewportHeight - edgeInset) {
+      top = preferredBelowTop;
+    } else if (preferredAboveTop >= edgeInset) {
+      top = preferredAboveTop;
+    } else {
+      top = Math.min(Math.max(preferredBelowTop, edgeInset), maximumTop);
+    }
+  }
 
   return {
     left: Math.min(Math.max(preferredLeft, edgeInset), maximumLeft),
-    top: frame.top + frame.height + gap,
+    top,
   };
 };
 

src/components/beatcanvas/beatcanvas-front-layer-toolbar.test.ts

@@ -17,3 +17,13 @@ test('canvas toolbar stays at the bottom and hides while the composer is open',
     /activeComposerCardId \? 'top-4' : 'bottom-4'/
   );
 });
+
+test('canvas composer opens from generation-card hover intent instead of selection', () => {
+  assert.match(source, /registerGenerationCardHoverCallback/);
+  assert.match(source, /COMPOSER_HOVER_OPEN_DELAY_MS = 140/);
+  assert.match(source, /COMPOSER_HOVER_CLOSE_DELAY_MS = 220/);
+  assert.match(source, /hoveredComposerCardId/);
+  assert.match(source, /onComposerPointerChange=\{handleComposerPointerChange\}/);
+  assert.match(source, /onComposerFocusChange=\{handleComposerFocusChange\}/);
+  assert.doesNotMatch(source, /resolveComposerFocusLayout/);
+});