@fy-/fws-vue-core 3.0.4 → 3.0.5

package/src/components/ui/DefaultGallery.vue

@@ -0,0 +1,1056 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { APIPaging } from '../../composables/rest'
+import {
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  InformationCircleIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/solid'
+import {
+  useDebounceFn,
+  useElementSize,
+  useEventListener,
+  useFullscreen,
+  useResizeObserver,
+  useWindowSize,
+} from '@vueuse/core'
+import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import { ClientOnly } from '../ssr/ClientOnly'
+import DefaultPaging from './DefaultPaging.vue'
+
+// Core state
+const isGalleryOpen = ref(false)
+const eventBus = useEventBus()
+const sidePanel = ref(true)
+const showControls = ref(true)
+const isFullscreen = ref(false)
+const infoPanel = ref(true)
+const direction = ref<'next' | 'prev'>('next')
+
+// DOM refs
+const galleryRef = shallowRef<HTMLElement | null>(null)
+const galleryContentRef = shallowRef<HTMLElement | null>(null)
+const imageContainerRef = shallowRef<HTMLElement | null>(null)
+const infoPanelRef = shallowRef<HTMLElement | null>(null)
+const sidePanelRef = shallowRef<HTMLElement | null>(null)
+const topControlsRef = shallowRef<HTMLElement | null>(null)
+
+// Sizing via VueUse
+const { width: galleryWidth, height: galleryHeight } = useElementSize(galleryRef)
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+const { height: topControlsHeight } = useElementSize(topControlsRef)
+const { height: infoPanelHeight } = useElementSize(infoPanelRef)
+const { isFullscreen: isElementFullscreen, enter: enterFullscreen, exit: exitFullscreen } = useFullscreen(galleryRef)
+
+watch(isElementFullscreen, (v) => { isFullscreen.value = v })
+
+// Touch state
+const touchStartTime = ref(0)
+const start = reactive({ x: 0, y: 0 })
+const isKeyPressed = ref(false)
+let controlsTimeout: number | null = null
+let fullscreenResizeTimeout: number | null = null
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    images: Array<any>
+    title?: string
+    getImageUrl?: Function
+    getThumbnailUrl?: Function
+    onOpen?: Function
+    onClose?: Function
+    closeIcon?: object
+    gridHeight?: number
+    mode: 'mason' | 'grid' | 'button' | 'hidden' | 'custom'
+    paging?: APIPaging | undefined
+    buttonText?: string
+    buttonType?: string
+    modelValue: number
+    borderColor?: Function
+    imageLoader: string
+    videoComponent?: Component | string
+    imageComponent?: Component | string
+    isVideo?: Function
+    ranking?: boolean
+    editEnabled?: boolean
+    editMode?: boolean
+    selectedItems?: Set<string>
+    onBulkAction?: Function
+    getItemId?: Function
+    editButtonText?: string
+    cancelButtonText?: string
+    bulkActionText?: string
+    selectAllText?: string
+    clearSelectionText?: string
+    selectedCountText?: string
+    saveOrderText?: string
+    reorderButtonText?: string
+    onSaveOrder?: Function
+    showSaveOrder?: boolean
+    getItemPosition?: Function
+    onPositionChange?: Function
+  }>(),
+  {
+    modelValue: 0,
+    imageComponent: 'img',
+    mode: 'grid',
+    gridHeight: 4,
+    closeIcon: () => h(XMarkIcon),
+    images: () => [],
+    isVideo: () => false,
+    getImageUrl: (image: any) => image.image_url,
+    getThumbnailUrl: (image: any) => `${image.image_url}?s=250x250&m=autocrop`,
+    paging: undefined,
+    borderColor: undefined,
+    ranking: false,
+    editEnabled: false,
+    editMode: false,
+    selectedItems: () => new Set(),
+    onBulkAction: undefined,
+    getItemId: (item: any, index: number) => item.id || item.UUID || index.toString(),
+    editButtonText: 'Edit',
+    cancelButtonText: 'Cancel',
+    bulkActionText: 'Delete Selected',
+    selectAllText: 'Select All',
+    clearSelectionText: 'Clear',
+    selectedCountText: 'selected',
+    saveOrderText: 'Save Order',
+    reorderButtonText: 'Reorder',
+    onSaveOrder: undefined,
+    showSaveOrder: false,
+    getItemPosition: (item: any, index: number) => item.UserIndex ?? index,
+    onPositionChange: undefined,
+  },
+)
+
+const emit = defineEmits(['update:modelValue', 'update:editMode', 'update:selectedItems'])
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (i) => { emit('update:modelValue', i) },
+})
+
+// Edit mode
+const localEditMode = computed({
+  get: () => props.editMode,
+  set: value => emit('update:editMode', value),
+})
+
+const localReorderMode = ref(false)
+
+function toggleReorderMode() {
+  localReorderMode.value = !localReorderMode.value
+  if (localReorderMode.value) {
+    localEditMode.value = false
+    localSelectedItems.value = new Set()
+  }
+}
+
+function exitReorderMode() { localReorderMode.value = false }
+
+const localSelectedItems = computed({
+  get: () => props.selectedItems,
+  set: value => emit('update:selectedItems', value),
+})
+
+function toggleEditMode() {
+  localEditMode.value = !localEditMode.value
+  if (localEditMode.value) localReorderMode.value = false
+  if (!localEditMode.value) localSelectedItems.value = new Set()
+}
+
+function toggleItemSelection(item: any, index: number) {
+  const id = props.getItemId(item, index)
+  const s = new Set(localSelectedItems.value)
+  s.has(id) ? s.delete(id) : s.add(id)
+  localSelectedItems.value = s
+}
+
+function selectAll() {
+  const s = new Set<string>()
+  props.images.forEach((item, i) => s.add(props.getItemId(item, i)))
+  localSelectedItems.value = s
+}
+
+function clearSelection() { localSelectedItems.value = new Set() }
+
+function handleBulkAction() {
+  if (props.onBulkAction && localSelectedItems.value.size > 0) {
+    props.onBulkAction(Array.from(localSelectedItems.value))
+  }
+}
+
+function isItemSelected(item: any, index: number): boolean {
+  return localSelectedItems.value.has(props.getItemId(item, index))
+}
+
+function handleThumbnailClick(item: any, index: number) {
+  if (props.editMode) toggleItemSelection(item, index)
+  else eventBus.emit(`${props.id}GalleryImage`, index)
+}
+
+// Computed
+const modelValueSrc = computed(() => {
+  if (!props.images.length || !props.images[modelValue.value]) return false
+  return props.getImageUrl(props.images[modelValue.value])
+})
+
+const currentImage = computed(() => props.images.length ? props.images[modelValue.value] : null)
+const imageCount = computed(() => props.images.length)
+const currentIndex = computed(() => modelValue.value + 1)
+
+// Dynamic image sizing
+const updateImageSizes = useDebounceFn(() => {
+  if (!isGalleryOpen.value) return
+  const container = document.querySelector('.fv-gallery__display') as HTMLDivElement
+  if (!container) return
+  const media = container.querySelector('img, video') as HTMLElement | null
+  if (!media) return
+
+  const padding = 24
+  const sidebarW = sidePanel.value ? 256 : 0
+  const availW = windowWidth.value - sidebarW - padding * 2
+  media.style.maxWidth = windowWidth.value <= 768 ? '90vw' : `${availW}px`
+  media.style.height = 'auto'
+
+  const topH = topControlsHeight.value || 0
+  const infoH = infoPanel.value ? (infoPanelHeight.value || 0) : 0
+  media.style.maxHeight = `${windowHeight.value - topH - infoH - padding * 2}px`
+}, 50)
+
+// Modal
+function setModal(value: boolean) {
+  if (value) {
+    props.onOpen?.()
+    document.body.style.overflow = 'hidden'
+    if (!import.meta.env.SSR) {
+      useEventListener(document, 'keydown', handleKeyboardInput)
+      useEventListener(document, 'keyup', handleKeyboardRelease)
+    }
+  } else {
+    props.onClose?.()
+    document.body.style.overflow = ''
+    if (isFullscreen.value) { exitFullscreen(); isFullscreen.value = false }
+    if (controlsTimeout) { clearTimeout(controlsTimeout); controlsTimeout = null }
+  }
+  isGalleryOpen.value = value
+  showControls.value = true
+}
+
+const openGalleryImage = useDebounceFn((index: number | undefined) => {
+  modelValue.value = index !== undefined ? Number.parseInt(index.toString()) : 0
+  setModal(true)
+  nextTick(() => updateImageSizes())
+}, 50)
+
+function goNextImage() {
+  direction.value = 'next'
+  modelValue.value = modelValue.value < props.images.length - 1 ? modelValue.value + 1 : 0
+  resetControlsTimer()
+  nextTick(() => updateImageSizes())
+}
+
+function goPrevImage() {
+  direction.value = 'prev'
+  modelValue.value = modelValue.value > 0 ? modelValue.value - 1 : Math.max(0, props.images.length - 1)
+  resetControlsTimer()
+  nextTick(() => updateImageSizes())
+}
+
+function resetControlsTimer() { showControls.value = true }
+
+function toggleInfoPanel() {
+  infoPanel.value = !infoPanel.value
+  resetControlsTimer()
+  updateImageSizes()
+  nextTick(() => { updateImageSizes(); setTimeout(() => updateImageSizes(), 300) })
+}
+
+function toggleSidePanel() {
+  sidePanel.value = !sidePanel.value
+  resetControlsTimer()
+  nextTick(() => updateImageSizes())
+}
+
+function toggleFullscreen() {
+  const action = isFullscreen.value ? exitFullscreen : enterFullscreen
+  if (!isFullscreen.value && galleryRef.value) {
+    action().then(() => {
+      isFullscreen.value = !isFullscreen.value
+      if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
+      fullscreenResizeTimeout = window.setTimeout(() => updateImageSizes(), 50)
+    }).catch(() => {})
+  } else {
+    action().then(() => {
+      isFullscreen.value = false
+      if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
+      fullscreenResizeTimeout = window.setTimeout(() => updateImageSizes(), 50)
+    }).catch(() => {})
+  }
+  resetControlsTimer()
+}
+
+// Touch
+const touchStart = useDebounceFn((e: TouchEvent) => {
+  const t = e.touches[0]
+  if ((t.target as HTMLElement).closest('button, a, input, textarea, select')) return
+  touchStartTime.value = Date.now()
+  start.x = t.screenX
+  start.y = t.screenY
+}, 50)
+
+const touchEnd = useDebounceFn((e: TouchEvent) => {
+  const t = e.changedTouches[0]
+  if ((t.target as HTMLElement).closest('button, a, input, textarea, select')) return
+  const dx = start.x - t.screenX
+  const dy = start.y - t.screenY
+  const dur = Date.now() - touchStartTime.value
+  if (Math.abs(dx) < 10 && Math.abs(dy) < 10 && dur < 300) return
+  if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
+    dx > 0 ? goNextImage() : goPrevImage()
+  }
+}, 50)
+
+function getBorderColor(i: any) { return props.borderColor?.(i) || '' }
+
+// Keyboard
+function handleKeyboardInput(e: KeyboardEvent) {
+  if (!isGalleryOpen.value || isKeyPressed.value) return
+  switch (e.key) {
+    case 'Escape': e.preventDefault(); setModal(false); break
+    case 'ArrowRight': isKeyPressed.value = true; goNextImage(); break
+    case 'ArrowLeft': isKeyPressed.value = true; goPrevImage(); break
+    case 'f': toggleFullscreen(); break
+    case 'i': toggleInfoPanel(); break
+  }
+}
+
+function handleKeyboardRelease(e: KeyboardEvent) {
+  if (['ArrowRight', 'ArrowLeft'].includes(e.key)) isKeyPressed.value = false
+}
+
+function closeGallery() { setModal(false) }
+
+const handleBackdropClick = useDebounceFn((e: MouseEvent) => {
+  if (e.target === e.currentTarget) setModal(false)
+}, 200)
+
+// Watchers
+watch(
+  [currentImage, isFullscreen, infoPanel, sidePanel, windowWidth, windowHeight, galleryWidth, galleryHeight, topControlsHeight, infoPanelHeight, modelValue],
+  () => updateImageSizes(),
+)
+
+// Lifecycle
+onMounted(() => {
+  eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
+  eventBus.on(`${props.id}Gallery`, openGalleryImage)
+  eventBus.on(`${props.id}GalleryClose`, closeGallery)
+  if (topControlsRef.value) useResizeObserver(topControlsRef.value, updateImageSizes)
+  if (infoPanelRef.value) useResizeObserver(infoPanelRef.value, updateImageSizes)
+  if (sidePanelRef.value) useResizeObserver(sidePanelRef.value, updateImageSizes)
+  useEventListener(document, 'fullscreenchange', () => {
+    isFullscreen.value = !!document.fullscreenElement
+    nextTick(() => updateImageSizes())
+  })
+})
+
+onUnmounted(() => {
+  eventBus.off(`${props.id}Gallery`, openGalleryImage)
+  eventBus.off(`${props.id}GalleryImage`, openGalleryImage)
+  eventBus.off(`${props.id}GalleryClose`, closeGallery)
+  if (!import.meta.env.SSR) document.body.style.overflow = ''
+  if (controlsTimeout) clearTimeout(controlsTimeout)
+  if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
+  if (isFullscreen.value) exitFullscreen().catch(() => {})
+})
+</script>
+
+<template>
+  <div>
+    <!-- ═══ LIGHTBOX VIEWER ═══ -->
+    <Transition
+      enter-active-class="fv-gallery-enter-active"
+      enter-from-class="fv-gallery-enter-from"
+      leave-active-class="fv-gallery-leave-active"
+      leave-to-class="fv-gallery-leave-to"
+    >
+      <div
+        v-if="isGalleryOpen"
+        ref="galleryRef"
+        class="fv-gallery"
+        role="dialog"
+        aria-modal="true"
+        @click="handleBackdropClick"
+      >
+        <!-- Top Controls — glass bar -->
+        <Transition
+          enter-active-class="fv-gallery__fade-enter"
+          enter-from-class="fv-gallery__fade-from"
+          leave-active-class="fv-gallery__fade-leave"
+          leave-to-class="fv-gallery__fade-from"
+        >
+          <div v-if="showControls" ref="topControlsRef" class="fv-gallery__topbar">
+            <div class="fv-gallery__topbar-left">
+              <span v-if="title" class="fv-gallery__title">{{ title }}</span>
+              <span class="fv-gallery__counter">{{ currentIndex }} / {{ imageCount }}</span>
+            </div>
+            <div class="fv-gallery__topbar-right">
+              <button
+                :class="['fv-gallery__ctrl-btn', { 'fv-gallery__ctrl-btn--active': infoPanel }]"
+                :title="infoPanel ? 'Hide info' : 'Show info'"
+                @click="toggleInfoPanel"
+              >
+                <InformationCircleIcon class="w-5 h-5" />
+              </button>
+              <button
+                class="fv-gallery__ctrl-btn"
+                :title="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
+                @click="toggleSidePanel"
+              >
+                <ChevronDoubleRightIcon v-if="sidePanel" class="w-5 h-5" />
+                <ChevronDoubleLeftIcon v-else class="w-5 h-5" />
+              </button>
+              <button class="fv-gallery__ctrl-btn" aria-label="Close gallery" @click="setModal(false)">
+                <component :is="closeIcon" class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </Transition>
+
+        <!-- Main Content -->
+        <div ref="galleryContentRef" class="fv-gallery__content">
+          <!-- Image Area -->
+          <div
+            class="fv-gallery__main"
+            :style="{ paddingTop: `${topControlsHeight}px` }"
+            :class="{ 'fv-gallery__main--with-sidebar': sidePanel }"
+          >
+            <!-- Prev Arrow -->
+            <Transition enter-active-class="fv-gallery__fade-enter" enter-from-class="fv-gallery__fade-from" leave-active-class="fv-gallery__fade-leave" leave-to-class="fv-gallery__fade-from">
+              <div v-if="showControls && images.length > 1" class="fv-gallery__nav fv-gallery__nav--prev">
+                <button class="fv-gallery__nav-btn" aria-label="Previous image" @click="goPrevImage()">
+                  <ChevronLeftIcon class="w-6 h-6 md:w-8 md:h-8" />
+                </button>
+              </div>
+            </Transition>
+
+            <!-- Image/Video -->
+            <div ref="imageContainerRef" class="fv-gallery__viewport" @touchstart="touchStart" @touchend="touchEnd">
+              <Transition :name="direction === 'next' ? 'slide-next' : 'slide-prev'" mode="out-in" @before-enter="updateImageSizes" @after-leave="updateImageSizes">
+                <div :key="`img-${modelValue}`" class="fv-gallery__display">
+                  <template v-if="videoComponent && isVideo(images[modelValue])">
+                    <ClientOnly>
+                      <component :is="videoComponent" :src="isVideo(images[modelValue])" class="fv-gallery__media" @loadedmetadata="updateImageSizes" @loadeddata="updateImageSizes" />
+                    </ClientOnly>
+                  </template>
+                  <template v-else>
+                    <img v-if="modelValueSrc && imageComponent === 'img'" class="fv-gallery__media" :src="modelValueSrc" :alt="`Gallery image ${modelValue + 1}`" @load="updateImageSizes">
+                    <component :is="imageComponent" v-else-if="modelValueSrc && imageComponent" :image="modelValueSrc.image" :variant="modelValueSrc.variant" :alt="modelValueSrc.alt" class="fv-gallery__media" />
+                  </template>
+                </div>
+              </Transition>
+            </div>
+
+            <!-- Next Arrow -->
+            <Transition enter-active-class="fv-gallery__fade-enter" enter-from-class="fv-gallery__fade-from" leave-active-class="fv-gallery__fade-leave" leave-to-class="fv-gallery__fade-from">
+              <div v-if="showControls && images.length > 1" class="fv-gallery__nav fv-gallery__nav--next" :class="{ 'fv-gallery__nav--sidebar-offset': sidePanel }">
+                <button class="fv-gallery__nav-btn" aria-label="Next image" @click="goNextImage()">
+                  <ChevronRightIcon class="w-6 h-6 md:w-8 md:h-8" />
+                </button>
+              </div>
+            </Transition>
+
+            <!-- Info Panel -->
+            <Transition enter-active-class="fv-gallery__slide-up-enter" enter-from-class="fv-gallery__slide-up-from" leave-active-class="fv-gallery__slide-up-leave" leave-to-class="fv-gallery__slide-up-from">
+              <div v-if="infoPanel && images[modelValue]" ref="infoPanelRef" class="fv-gallery__info">
+                <slot :value="images[modelValue]" />
+              </div>
+            </Transition>
+          </div>
+
+          <!-- Side Thumbnails (Desktop) -->
+          <Transition enter-active-class="fv-gallery__slide-right-enter" enter-from-class="fv-gallery__slide-right-from" leave-active-class="fv-gallery__slide-right-leave" leave-to-class="fv-gallery__slide-right-from">
+            <div v-if="sidePanel" ref="sidePanelRef" class="fv-gallery__sidebar" :style="{ paddingTop: `${topControlsHeight + 8}px` }">
+              <div v-if="paging" class="fv-gallery__sidebar-paging">
+                <DefaultPaging :id="id" :items="paging" />
+              </div>
+              <div class="fv-gallery__sidebar-grid">
+                <div v-for="i in images.length" :key="`bg_${id}_${i}`" class="fv-gallery__thumb-wrap">
+                  <div class="fv-gallery__thumb-highlight" :class="{ 'fv-gallery__thumb-highlight--active': i - 1 === modelValue }" />
+                  <img
+                    v-if="imageComponent === 'img'"
+                    :class="['fv-gallery__thumb', getBorderColor(images[i - 1])]"
+                    :style="{ filter: i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.6)' }"
+                    :src="getThumbnailUrl(images[i - 1])"
+                    :alt="`Thumbnail ${i}`"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                  >
+                  <component
+                    :is="imageComponent"
+                    v-else
+                    :image="getThumbnailUrl(images[i - 1]).image"
+                    :variant="getThumbnailUrl(images[i - 1]).variant"
+                    :alt="getThumbnailUrl(images[i - 1]).alt"
+                    :class="['fv-gallery__thumb', getBorderColor(images[i - 1])]"
+                    :style="{ filter: i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.6)' }"
+                    :likes="getThumbnailUrl(images[i - 1]).likes"
+                    :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
+                    :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
+                    :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                  />
+                </div>
+              </div>
+            </div>
+          </Transition>
+
+          <!-- Mobile Thumbnails (Bottom) -->
+          <Transition enter-active-class="fv-gallery__slide-up-enter" enter-from-class="fv-gallery__slide-up-from" leave-active-class="fv-gallery__slide-up-leave" leave-to-class="fv-gallery__slide-up-from">
+            <div v-if="showControls && images.length > 1 && !sidePanel" class="fv-gallery__mobile-thumbs" @touchstart.stop @touchmove.stop @touchend.stop>
+              <div class="fv-gallery__mobile-thumbs-scroll">
+                <div
+                  v-for="(image, idx) in images"
+                  :key="`mt_${id}_${idx}`"
+                  :class="['fv-gallery__mobile-thumb', { 'fv-gallery__mobile-thumb--active': idx === modelValue }]"
+                  @click="$eventBus.emit(`${id}GalleryImage`, idx)"
+                >
+                  <img v-if="imageComponent === 'img'" class="fv-gallery__mobile-thumb-img" :style="{ filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.6)' }" :src="getThumbnailUrl(image)" :alt="`Thumbnail ${idx + 1}`">
+                  <component :is="imageComponent" v-else :image="getThumbnailUrl(image).image" :variant="getThumbnailUrl(image).variant" :alt="getThumbnailUrl(image).alt" class="fv-gallery__mobile-thumb-img" :style="{ filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.6)' }" />
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- ═══ EDIT MODE CONTROLS ═══ -->
+    <div v-if="editEnabled && images.length > 0 && (mode === 'grid' || mode === 'mason' || mode === 'custom')">
+      <div v-if="!localEditMode && !localReorderMode" class="fv-gallery__edit-toggle">
+        <button class="fv-gallery__edit-btn" @click="toggleEditMode">{{ editButtonText }}</button>
+        <button v-if="showSaveOrder" class="fv-gallery__edit-btn fv-gallery__edit-btn--primary" @click="toggleReorderMode">{{ reorderButtonText }}</button>
+      </div>
+
+      <div v-if="localEditMode" class="fv-gallery__bulk-bar">
+        <div class="fv-gallery__bulk-left">
+          <span class="fv-gallery__bulk-count">{{ localSelectedItems.size }} {{ selectedCountText }}</span>
+          <button class="fv-gallery__bulk-action" @click="selectAll">{{ selectAllText }}</button>
+          <button class="fv-gallery__bulk-action" @click="clearSelection">{{ clearSelectionText }}</button>
+        </div>
+        <div class="fv-gallery__bulk-right">
+          <button class="fv-gallery__bulk-action fv-gallery__bulk-action--cancel" @click="toggleEditMode">{{ cancelButtonText }}</button>
+          <button class="fv-gallery__bulk-action fv-gallery__bulk-action--danger" :disabled="localSelectedItems.size === 0" @click="handleBulkAction">{{ bulkActionText }}</button>
+        </div>
+      </div>
+
+      <div v-if="localReorderMode" class="fv-gallery__reorder-bar">
+        <span class="fv-gallery__reorder-label">Set position numbers (lower = earlier)</span>
+        <div class="fv-gallery__bulk-right">
+          <button class="fv-gallery__bulk-action fv-gallery__bulk-action--cancel" @click="exitReorderMode">{{ cancelButtonText }}</button>
+          <button v-if="onSaveOrder" class="fv-gallery__bulk-action fv-gallery__bulk-action--primary" @click="onSaveOrder()">{{ saveOrderText }}</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ GRID / MASON / CUSTOM ═══ -->
+    <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="fv-gallery-grid">
+      <div :class="{ 'fv-masonry': mode === 'mason', 'fv-standard-grid': mode === 'grid', 'fv-custom-grid': mode === 'custom' }">
+        <slot name="thumbnail" />
+        <template v-for="i in images.length" :key="`g_${id}_${i}`">
+          <template v-if="mode === 'mason'">
+            <div v-if="i + (1 % gridHeight) === 0" class="fv-masonry__col">
+              <div v-if="ranking" class="fv-gallery__ranking">{{ i }}</div>
+              <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
+                <div v-if="i + j - 2 < images.length" class="fv-masonry__item" :class="{ 'fv-gallery__item--selected': localEditMode && isItemSelected(images[i + j - 2], i + j - 2) }">
+                  <div v-if="localEditMode" class="fv-gallery__checkbox-overlay">
+                    <div :class="['fv-gallery__checkbox', { 'fv-gallery__checkbox--checked': isItemSelected(images[i + j - 2], i + j - 2) }]">
+                      <svg v-if="isItemSelected(images[i + j - 2], i + j - 2)" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>
+                    </div>
+                  </div>
+                  <div v-if="localEditMode && isItemSelected(images[i + j - 2], i + j - 2)" class="fv-gallery__select-overlay" />
+                  <img v-if="imageComponent === 'img'" class="fv-gallery__grid-img" :src="getThumbnailUrl(images[i + j - 2])" :alt="`Gallery image ${i + j - 1}`" @click="handleThumbnailClick(images[i + j - 2], i + j - 2)">
+                  <component :is="imageComponent" v-else-if="i + j - 2 < images.length" :image="getThumbnailUrl(images[i + j - 2]).image" :variant="getThumbnailUrl(images[i + j - 2]).variant" :alt="getThumbnailUrl(images[i + j - 2]).alt" :class="['fv-gallery__grid-img', getBorderColor(images[i + j - 2])]" :likes="getThumbnailUrl(images[i + j - 2]).likes" :show-likes="getThumbnailUrl(images[i + j - 2]).showLikes" :is-author="getThumbnailUrl(images[i + j - 2]).isAuthor" :user-uuid="getThumbnailUrl(images[i + j - 2]).userUUID" @click="handleThumbnailClick(images[i + j - 2], i + j - 2)" />
+                </div>
+              </template>
+            </div>
+          </template>
+          <div v-else class="fv-grid__item group">
+            <div v-if="ranking" class="fv-gallery__ranking">{{ i }}</div>
+            <div class="fv-grid__item-inner" :class="{ 'fv-gallery__item--selected': localEditMode && isItemSelected(images[i - 1], i - 1) }">
+              <div v-if="localEditMode" class="fv-gallery__checkbox-overlay">
+                <div :class="['fv-gallery__checkbox', { 'fv-gallery__checkbox--checked': isItemSelected(images[i - 1], i - 1) }]">
+                  <svg v-if="isItemSelected(images[i - 1], i - 1)" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>
+                </div>
+              </div>
+              <div v-if="localReorderMode && onPositionChange" class="fv-gallery__position-input">
+                <input type="number" min="-1" :value="getItemPosition(images[i - 1], i - 1)" class="fv-gallery__position-field" @blur="(e: Event) => onPositionChange ? onPositionChange(images[i - 1], parseInt((e.target as HTMLInputElement).value)) : () => {}" @click.stop @keydown.enter="(e: Event) => { (e.target as HTMLInputElement).blur() }">
+              </div>
+              <div v-if="localEditMode && isItemSelected(images[i - 1], i - 1)" class="fv-gallery__select-overlay" />
+              <img v-if="imageComponent === 'img'" class="fv-gallery__grid-img" :src="getThumbnailUrl(images[i - 1])" :alt="`Gallery image ${i}`" @click="handleThumbnailClick(images[i - 1], i - 1)">
+              <component :is="imageComponent" v-else-if="imageComponent" :image="getThumbnailUrl(images[i - 1]).image" :variant="getThumbnailUrl(images[i - 1]).variant" :alt="getThumbnailUrl(images[i - 1]).alt" :class="['fv-gallery__grid-img', getBorderColor(images[i - 1])]" :likes="getThumbnailUrl(images[i - 1]).likes" :show-likes="getThumbnailUrl(images[i - 1]).showLikes" :is-author="getThumbnailUrl(images[i - 1]).isAuthor" :user-uuid="getThumbnailUrl(images[i - 1]).userUUID" @click="handleThumbnailClick(images[i - 1], i - 1)" />
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Bottom edit bars (duplicated for scroll convenience) -->
+    <div v-if="editEnabled && localEditMode && images.length > 0 && (mode === 'grid' || mode === 'mason' || mode === 'custom')" class="fv-gallery__bulk-bar" style="margin-top: 0.75rem;">
+      <div class="fv-gallery__bulk-left">
+        <span class="fv-gallery__bulk-count">{{ localSelectedItems.size }} {{ selectedCountText }}</span>
+        <button class="fv-gallery__bulk-action" @click="selectAll">{{ selectAllText }}</button>
+        <button class="fv-gallery__bulk-action" @click="clearSelection">{{ clearSelectionText }}</button>
+      </div>
+      <div class="fv-gallery__bulk-right">
+        <button class="fv-gallery__bulk-action fv-gallery__bulk-action--cancel" @click="toggleEditMode">{{ cancelButtonText }}</button>
+        <button class="fv-gallery__bulk-action fv-gallery__bulk-action--danger" :disabled="localSelectedItems.size === 0" @click="handleBulkAction">{{ bulkActionText }}</button>
+      </div>
+    </div>
+    <div v-if="editEnabled && localReorderMode && images.length > 0 && (mode === 'grid' || mode === 'mason' || mode === 'custom')" class="fv-gallery__reorder-bar" style="margin-top: 0.75rem;">
+      <span class="fv-gallery__reorder-label">Set position numbers (lower = earlier)</span>
+      <div class="fv-gallery__bulk-right">
+        <button class="fv-gallery__bulk-action fv-gallery__bulk-action--cancel" @click="exitReorderMode">{{ cancelButtonText }}</button>
+        <button v-if="onSaveOrder" class="fv-gallery__bulk-action fv-gallery__bulk-action--primary" @click="onSaveOrder()">{{ saveOrderText }}</button>
+      </div>
+    </div>
+
+    <!-- Button Mode -->
+    <button v-if="mode === 'button'" :class="`btn ${buttonType || 'primary'} defaults`" @click="openGalleryImage(0)">
+      {{ buttonText || $t("open_gallery_cta") || 'Open Gallery' }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+/* ═══ Lightbox — Linear near-opaque dark + glass controls ═══ */
+.fv-gallery {
+  position: fixed;
+  inset: 0;
+  z-index: 37;
+  max-width: 100vw;
+  max-height: 100vh;
+  overflow: hidden;
+  background: #0a0a0a;
+  color: white;
+}
+
+/* Top controls — glass bar */
+.fv-gallery__topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  z-index: 50;
+  background: rgba(10, 10, 10, 0.85);
+  backdrop-filter: blur(12px) saturate(1.2);
+  -webkit-backdrop-filter: blur(12px) saturate(1.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+.fv-gallery__topbar-left { display: flex; align-items: center; gap: 0.5rem; }
+.fv-gallery__topbar-right { display: flex; align-items: center; gap: 0.375rem; }
+.fv-gallery__title { font-weight: 500; font-size: 1rem; }
+.fv-gallery__counter { font-size: 0.8125rem; opacity: 0.7; }
+
+/* Apple-style circular glass control buttons */
+.fv-gallery__ctrl-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.08);
+  transition: background-color 150ms, color 150ms, transform 150ms;
+}
+.fv-gallery__ctrl-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  transform: scale(1.08);
+}
+.fv-gallery__ctrl-btn--active {
+  background: rgba(124, 58, 237, 0.4);
+  color: white;
+}
+.fv-gallery__ctrl-btn:focus-visible {
+  outline: 2px solid rgba(124, 58, 237, 0.6);
+  outline-offset: 2px;
+}
+
+/* Content layout */
+.fv-gallery__content { width: 100%; height: 100%; display: flex; flex-direction: column; }
+@media (min-width: 1024px) { .fv-gallery__content { flex-direction: row; } }
+
+.fv-gallery__main {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+}
+.fv-gallery__main--with-sidebar {
+  padding-right: 0;
+}
+@media (min-width: 1024px) {
+  .fv-gallery__main--with-sidebar {
+    padding-right: 16rem;
+    max-width: calc(100% - 16rem);
+  }
+}
+
+/* Navigation arrows — Apple circular glass */
+.fv-gallery__nav {
+  position: absolute;
+  z-index: 40;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+}
+@media (min-width: 768px) { .fv-gallery__nav { padding: 0 1rem; } }
+.fv-gallery__nav--prev { left: 0; }
+.fv-gallery__nav--next { right: 0; }
+@media (min-width: 1024px) {
+  .fv-gallery__nav--sidebar-offset { right: 16rem; }
+}
+
+.fv-gallery__nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: background-color 150ms, transform 150ms;
+}
+.fv-gallery__nav-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: scale(1.1);
+}
+.fv-gallery__nav-btn:focus-visible {
+  outline: 2px solid rgba(124, 58, 237, 0.6);
+  outline-offset: 2px;
+}
+
+/* Viewport */
+.fv-gallery__viewport {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fv-gallery__display {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.fv-gallery__media {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+/* Info panel — glass bottom bar */
+.fv-gallery__info {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background: rgba(10, 10, 10, 0.85);
+  backdrop-filter: blur(12px) saturate(1.2);
+  -webkit-backdrop-filter: blur(12px) saturate(1.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Side panel — glass sidebar with luminance border */
+.fv-gallery__sidebar {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 16rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 40;
+  background: rgba(10, 10, 10, 0.7);
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  border-left: 1px solid rgba(255, 255, 255, 0.06);
+}
+@media (min-width: 1024px) { .fv-gallery__sidebar { display: block; } }
+
+.fv-gallery__sidebar-paging { display: flex; align-items: center; justify-content: center; padding-top: 0.5rem; }
+.fv-gallery__sidebar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 0.5rem; }
+
+.fv-gallery__thumb-wrap { position: relative; }
+.fv-gallery__thumb-highlight {
+  position: absolute;
+  inset: 0;
+  border-radius: 0.5rem;
+  transition: background-color 200ms;
+}
+.fv-gallery__thumb-wrap:hover .fv-gallery__thumb-highlight { background: rgba(255, 255, 255, 0.08); }
+.fv-gallery__thumb-highlight--active { background: rgba(124, 58, 237, 0.3); }
+
+.fv-gallery__thumb {
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: filter 200ms, transform 200ms;
+}
+.fv-gallery__thumb:hover { transform: scale(1.02); }
+
+/* Mobile thumbnails */
+.fv-gallery__mobile-thumbs {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0.25rem;
+  z-index: 45;
+  background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+@media (min-width: 1024px) { .fv-gallery__mobile-thumbs { display: none; } }
+
+.fv-gallery__mobile-thumbs-scroll {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0.25rem;
+  scrollbar-width: none;
+}
+.fv-gallery__mobile-thumbs-scroll::-webkit-scrollbar { display: none; }
+
+.fv-gallery__mobile-thumb {
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  cursor: pointer;
+}
+.fv-gallery__mobile-thumb--active {
+  box-shadow: 0 0 0 2px var(--color-fv-primary-500, #8b5cf6), 0 0 0 3px rgba(10, 10, 10, 0.9);
+}
+.fv-gallery__mobile-thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0.5rem;
+  transition: filter 200ms;
+}
+
+/* ═══ Transitions ═══ */
+.fv-gallery-enter-active { transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1); }
+.fv-gallery-leave-active { transition: opacity 150ms ease-in; }
+.fv-gallery-enter-from, .fv-gallery-leave-to { opacity: 0; }
+
+.fv-gallery__fade-enter { transition: opacity 200ms; }
+.fv-gallery__fade-leave { transition: opacity 200ms; }
+.fv-gallery__fade-from { opacity: 0; }
+
+.fv-gallery__slide-up-enter { transition: all 250ms ease-out; }
+.fv-gallery__slide-up-leave { transition: all 200ms ease-in; }
+.fv-gallery__slide-up-from { opacity: 0; transform: translateY(1rem); }
+
+.fv-gallery__slide-right-enter { transition: transform 250ms ease-in-out; }
+.fv-gallery__slide-right-leave { transition: transform 250ms ease-in-out; }
+.fv-gallery__slide-right-from { transform: translateX(100%); }
+
+/* Image slide transitions */
+.slide-next-enter-active, .slide-next-leave-active,
+.slide-prev-enter-active, .slide-prev-leave-active {
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
+}
+.slide-next-enter-from { opacity: 0; transform: translateX(30px); }
+.slide-next-leave-to { opacity: 0; transform: translateX(-30px); }
+.slide-prev-enter-from { opacity: 0; transform: translateX(-30px); }
+.slide-prev-leave-to { opacity: 0; transform: translateX(30px); }
+
+/* ═══ Grid Layouts ═══ */
+.fv-gallery-grid { min-height: 200px; }
+
+.fv-standard-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 0.75rem; }
+@media (min-width: 480px) { .fv-standard-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 768px) { .fv-standard-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
+@media (min-width: 1024px) { .fv-standard-grid { grid-template-columns: repeat(4, 1fr); } }
+@media (min-width: 1280px) { .fv-standard-grid { grid-template-columns: repeat(5, 1fr); } }
+@media (min-width: 1536px) { .fv-standard-grid { grid-template-columns: repeat(6, 1fr); } }
+
+.fv-masonry { display: grid; grid-template-columns: repeat(1, 1fr); gap: 0.75rem; }
+@media (min-width: 480px) { .fv-masonry { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 768px) { .fv-masonry { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
+@media (min-width: 1024px) { .fv-masonry { grid-template-columns: repeat(4, 1fr); } }
+
+.fv-masonry__col { display: grid; gap: 0.75rem; }
+.fv-masonry__item { break-inside: avoid; margin-bottom: 0.75rem; position: relative; }
+.fv-grid__item { break-inside: avoid; margin-bottom: 0.75rem; position: relative; }
+.fv-grid__item-inner { overflow: hidden; border-radius: 0.5rem; position: relative; }
+
+.fv-gallery__grid-img {
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: transform 250ms, filter 250ms;
+}
+.fv-grid__item:hover .fv-gallery__grid-img,
+.fv-masonry__item:hover .fv-gallery__grid-img {
+  transform: scale(1.02);
+  filter: brightness(1.05);
+}
+
+/* Edit mode overlays */
+.fv-gallery__item--selected { box-shadow: 0 0 0 3px #3b82f6; border-radius: 0.5rem; }
+.fv-gallery__checkbox-overlay { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 20; }
+.fv-gallery__checkbox {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  border: 2px solid #9ca3af;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+:is(.dark) .fv-gallery__checkbox { background: rgba(0, 0, 0, 0.9); }
+.fv-gallery__checkbox--checked { background: #3b82f6; border-color: #3b82f6; color: white; }
+.fv-gallery__select-overlay { position: absolute; inset: 0; background: rgba(59, 130, 246, 0.15); pointer-events: none; z-index: 10; border-radius: 0.5rem; }
+
+.fv-gallery__position-input { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 20; }
+.fv-gallery__position-field {
+  width: 5rem;
+  height: 2.25rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  border-radius: 0.375rem;
+  border: 2px solid #60a5fa;
+  background: rgba(255, 255, 255, 0.95);
+  font-weight: 600;
+  color: #171717;
+}
+:is(.dark) .fv-gallery__position-field { background: rgba(0, 0, 0, 0.95); color: white; }
+
+.fv-gallery__ranking {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+}
+
+/* ═══ Edit/Bulk/Reorder Bars ═══ */
+.fv-gallery__edit-toggle { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; gap: 0.5rem; }
+.fv-gallery__edit-btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms;
+  background: #e5e5e5;
+  color: #404040;
+}
+:is(.dark) .fv-gallery__edit-btn { background: rgba(255, 255, 255, 0.08); color: #d4d4d4; }
+.fv-gallery__edit-btn:hover { background: #d4d4d4; }
+:is(.dark) .fv-gallery__edit-btn:hover { background: rgba(255, 255, 255, 0.12); }
+.fv-gallery__edit-btn--primary { background: var(--color-fv-primary-600, #7c3aed); color: white; }
+.fv-gallery__edit-btn--primary:hover { background: var(--color-fv-primary-700, #6d28d9); }
+
+.fv-gallery__bulk-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  border-radius: 0.5rem;
+  background: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+:is(.dark) .fv-gallery__bulk-bar { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); }
+
+.fv-gallery__bulk-left, .fv-gallery__bulk-right { display: flex; align-items: center; gap: 0.5rem; }
+.fv-gallery__bulk-count { font-size: 0.8125rem; font-weight: 500; }
+
+.fv-gallery__bulk-action {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+  border-radius: 0.375rem;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms;
+  background: #e5e5e5;
+  color: #404040;
+}
+:is(.dark) .fv-gallery__bulk-action { background: rgba(255, 255, 255, 0.08); color: #d4d4d4; }
+.fv-gallery__bulk-action:hover { background: #d4d4d4; }
+.fv-gallery__bulk-action--cancel { background: #525252; color: white; }
+.fv-gallery__bulk-action--cancel:hover { background: #404040; }
+.fv-gallery__bulk-action--danger { background: #cf2d56; color: white; }
+.fv-gallery__bulk-action--danger:hover { background: #b82750; }
+.fv-gallery__bulk-action--danger:disabled { opacity: 0.5; cursor: not-allowed; }
+.fv-gallery__bulk-action--primary { background: var(--color-fv-primary-600, #7c3aed); color: white; }
+.fv-gallery__bulk-action--primary:hover { background: var(--color-fv-primary-700, #6d28d9); }
+
+.fv-gallery__reorder-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  border-radius: 0.5rem;
+  background: rgba(59, 130, 246, 0.06);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+:is(.dark) .fv-gallery__reorder-bar { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); }
+.fv-gallery__reorder-label { font-size: 0.8125rem; font-weight: 500; color: #1e40af; }
+:is(.dark) .fv-gallery__reorder-label { color: #93c5fd; }
+
+@media (prefers-reduced-motion: reduce) {
+  .fv-gallery-enter-active, .fv-gallery-leave-active { transition: opacity 100ms; }
+  .slide-next-enter-active, .slide-next-leave-active,
+  .slide-prev-enter-active, .slide-prev-leave-active { transition: opacity 100ms; }
+  .slide-next-enter-from, .slide-next-leave-to,
+  .slide-prev-enter-from, .slide-prev-leave-to { transform: none; }
+}
+</style>