fix: scope hover/focus controls to image container only

Move mouseenter/mouseleave and focusin/focusout from root div to the
image container (single mode) and grid container (grid mode). This
prevents nav button clicks from triggering the dimmed hover state via
focusin. Add cursor-pointer to image areas in both DisplayCarousel and
ImagePreview. Add thumbnail carousel edge fade effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: dante01yoon

src/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -7,7 +7,7 @@
     <!-- Image Wrapper -->
     <div
       ref="imageWrapperEl"
-      class="relative flex min-h-0 w-full flex-1 overflow-hidden rounded-[5px] bg-transparent"
+      class="relative flex min-h-0 w-full flex-1 cursor-pointer overflow-hidden rounded-[5px] bg-transparent"
       tabindex="0"
       role="img"
       :aria-label="$t('g.imagePreview')"

src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.test.ts

@@ -100,6 +100,10 @@ function findThumbnailButtons(wrapper: ReturnType<typeof mount>) {
   return wrapper.findAll('button').filter((btn) => btn.find('img').exists())
 }
 
+function findImageContainer(wrapper: ReturnType<typeof mount>) {
+  return wrapper.find('[tabindex="0"]')
+}
+
 describe('DisplayCarousel Single Mode', () => {
   describe('Component Rendering', () => {
     it('renders main image', () => {
@@ -276,7 +280,7 @@ describe('DisplayCarousel Accessibility', () => {
   it('shows controls on focusin for keyboard users', async () => {
     const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-    await wrapper.find('div').trigger('focusin')
+    await findImageContainer(wrapper).trigger('focusin')
     await nextTick()
 
     expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
@@ -290,11 +294,13 @@ describe('DisplayCarousel Accessibility', () => {
   it('hides controls on focusout when focus leaves component', async () => {
     const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-    await wrapper.find('div').trigger('focusin')
+    await findImageContainer(wrapper).trigger('focusin')
     await nextTick()
 
-    // Focus leaves the component entirely
-    await wrapper.find('div').trigger('focusout', { relatedTarget: null })
+    // Focus leaves the image container entirely
+    await findImageContainer(wrapper).trigger('focusout', {
+      relatedTarget: null
+    })
     await nextTick()
 
     expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
@@ -307,8 +313,8 @@ describe('DisplayCarousel Grid Mode', () => {
   it('switches to grid mode via toggle button on hover', async () => {
     const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-    // Trigger hover to reveal toggle button
-    await wrapper.find('div').trigger('mouseenter')
+    // Trigger focus on image container to reveal toggle button
+    await findImageContainer(wrapper).trigger('focusin')
     await nextTick()
 
     const toggleBtn = wrapper.find('[aria-label="Switch to grid view"]')
@@ -325,7 +331,7 @@ describe('DisplayCarousel Grid Mode', () => {
   it('does not show grid toggle for single image', async () => {
     const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
 
-    await wrapper.find('div').trigger('mouseenter')
+    await findImageContainer(wrapper).trigger('focusin')
     await nextTick()
 
     expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
@@ -336,12 +342,16 @@ describe('DisplayCarousel Grid Mode', () => {
   it('switches back to single mode via toggle button', async () => {
     const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-    // Switch to grid
-    await wrapper.find('div').trigger('mouseenter')
+    // Switch to grid via focus on image container
+    await findImageContainer(wrapper).trigger('focusin')
     await nextTick()
     await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
     await nextTick()
 
+    // Focus the grid container to reveal toggle
+    await findImageContainer(wrapper).trigger('focusin')
+    await nextTick()
+
     // Switch back to single
     const singleToggle = wrapper.find('[aria-label="Switch to single view"]')
     expect(singleToggle.exists()).toBe(true)
@@ -356,8 +366,8 @@ describe('DisplayCarousel Grid Mode', () => {
   it('clicking grid image switches to single mode focused on that image', async () => {
     const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-    // Switch to grid
-    await wrapper.find('div').trigger('mouseenter')
+    // Switch to grid via focus on image container
+    await findImageContainer(wrapper).trigger('focusin')
     await nextTick()
     await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
     await nextTick()
@@ -382,8 +392,8 @@ describe('DisplayCarousel Grid Mode', () => {
       props: { widget, modelValue: images.value }
     })
 
-    // Switch to grid
-    await wrapper.find('div').trigger('mouseenter')
+    // Switch to grid via focus on image container
+    await findImageContainer(wrapper).trigger('focusin')
     await nextTick()
     await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
     await nextTick()

src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.vue

@@ -1,17 +1,20 @@
 <template>
   <div
-    ref="rootEl"
     class="flex max-w-full flex-col rounded-lg bg-component-node-widget-background"
-    @mouseenter="isHovered = true"
-    @mouseleave="isHovered = false"
-    @focusin="isFocused = true"
-    @focusout="handleFocusOut"
   >
     <!-- Single Mode -->
     <template v-if="displayMode === 'single'">
       <div class="flex flex-col gap-2 p-4">
         <!-- Main Image Container -->
-        <div class="relative flex items-center justify-center">
+        <div
+          ref="imageContainerEl"
+          class="relative flex cursor-pointer items-center justify-center"
+          tabindex="0"
+          @mouseenter="isHovered = true"
+          @mouseleave="isHovered = false"
+          @focusin="isFocused = true"
+          @focusout="handleFocusOut"
+        >
           <img
             v-if="activeItem"
             :src="getItemSrc(activeItem)"
@@ -31,7 +34,10 @@
             :class="toggleButtonClass"
             class="absolute top-2 left-2"
             :aria-label="t('g.switchToGridView')"
-            @click="displayMode = 'grid'"
+            @click="
+              isHovered = false
+              displayMode = 'grid'
+            "
           >
             <i class="icon-[lucide--layout-grid] size-4" />
           </button>
@@ -95,15 +101,24 @@
           <!-- Thumbnails -->
           <div
             v-if="showThumbnails"
-            class="flex items-center gap-2 overflow-x-hidden scroll-smooth"
+            class="flex items-center gap-1 overflow-x-hidden scroll-smooth"
+            style="
+              mask-image: linear-gradient(
+                to right,
+                transparent,
+                black 20px,
+                black calc(100% - 20px),
+                transparent
+              );
+            "
           >
             <button
               v-for="(item, index) in galleryImages"
               :key="getItemSrc(item)"
               :ref="(el) => setThumbnailRef(el as HTMLElement | null, index)"
               :class="
                 cn(
-                  'size-10 shrink-0 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent transition-colors',
+                  'shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 border-transparent p-1 transition-colors',
                   index === activeIndex && 'border-base-foreground'
                 )
               "
@@ -113,7 +128,7 @@
               <img
                 :src="getItemThumbnail(item)"
                 :alt="getItemAlt(item, index)"
-                class="size-full object-cover"
+                class="size-10 rounded-sm object-cover"
               />
             </button>
           </div>
@@ -137,14 +152,22 @@
         <div
           ref="gridContainerEl"
           class="relative h-[296px] overflow-clip rounded-sm bg-component-node-background"
+          tabindex="0"
+          @mouseenter="isHovered = true"
+          @mouseleave="isHovered = false"
+          @focusin="isFocused = true"
+          @focusout="handleFocusOut"
         >
           <!-- Toggle to Single (hover, top-left) -->
           <button
             v-if="showControls"
             :class="toggleButtonClass"
             class="absolute top-2 left-2 z-10"
             :aria-label="t('g.switchToSingleView')"
-            @click="displayMode = 'single'"
+            @click="
+              isHovered = false
+              displayMode = 'single'
+            "
           >
             <i class="icon-[lucide--square] size-4" />
           </button>
@@ -226,7 +249,7 @@ const isFocused = ref(false)
 const hoveredGridIndex = ref(-1)
 const imageDimensions = ref<string | null>(null)
 const thumbnailRefs = ref<(HTMLElement | null)[]>([])
-const rootEl = ref<HTMLDivElement>()
+const imageContainerEl = ref<HTMLDivElement>()
 const gridContainerEl = ref<HTMLDivElement>()
 
 const showControls = computed(() => isHovered.value || isFocused.value)
@@ -325,7 +348,11 @@ function getItemAlt(item: GalleryImage, index: number): string {
 }
 
 function handleFocusOut(event: FocusEvent) {
-  if (!rootEl.value?.contains(event.relatedTarget as Node)) {
+  const container =
+    displayMode.value === 'single'
+      ? imageContainerEl.value
+      : gridContainerEl.value
+  if (!container?.contains(event.relatedTarget as Node)) {
     isFocused.value = false
   }
 }
@@ -382,6 +409,7 @@ function goToNext() {
 function selectFromGrid(index: number) {
   activeIndex.value = index
   imageDimensions.value = null
+  isHovered.value = false
   displayMode.value = 'single'
 }