@for-the-people-initiative/design-system 1.3.2 → 1.3.4

package/dist/css/tokens.css

@@ -1169,6 +1169,25 @@
   --knob-focus-ringColor: #f97316; /* Focus ring color */
   --knob-focus-ringOffset: 2px; /* Focus ring offset */
   --knob-transition-duration: 100ms; /* Value change transition */
+  --lightbox-overlay-background: rgba(0, 0, 0, 0.92); /* Lightbox overlay backdrop color */
+  --lightbox-zIndex-overlay: 2000; /* Overlay z-index (above dialogs) */
+  --lightbox-nav-size: 48px; /* Navigation button size */
+  --lightbox-nav-iconSize: 24px; /* Navigation icon size */
+  --lightbox-nav-color-default: rgba(255, 255, 255, 0.8); /* Nav button color */
+  --lightbox-nav-color-hover: #ffffff; /* Nav button hover color */
+  --lightbox-nav-background-default: rgba(255, 255, 255, 0.1); /* Nav button background */
+  --lightbox-nav-background-hover: rgba(255, 255, 255, 0.2); /* Nav button hover background */
+  --lightbox-nav-radius: 9999px; /* Nav button border radius */
+  --lightbox-closeButton-size: 40px; /* Close button size */
+  --lightbox-closeButton-iconSize: 20px; /* Close icon size */
+  --lightbox-counter-color: rgba(255, 255, 255, 0.7); /* Counter text color */
+  --lightbox-counter-fontSize: 14px; /* Counter font size */
+  --lightbox-thumbnail-size: 64px; /* Thumbnail width/height */
+  --lightbox-thumbnail-gap: 6px; /* Gap between thumbnails */
+  --lightbox-thumbnail-radius: 5px; /* Thumbnail border radius */
+  --lightbox-thumbnail-border-active: #ffffff; /* Active thumbnail border color */
+  --lightbox-thumbnail-opacity-default: 0.5; /* Inactive thumbnail opacity */
+  --lightbox-thumbnail-opacity-active: 1; /* Active thumbnail opacity */
   --listbox-padding: 6px; /* Container padding */
   --listbox-radius: 5px; /* Container border radius */
   --listbox-border-width: 1px;

package/dist/scss/_tokens.scss

@@ -1283,6 +1283,27 @@ $knob-focus-ringColor: var(--knob-focus-ringColor); // Focus ring color
 $knob-focus-ringOffset: var(--knob-focus-ringOffset); // Focus ring offset
 $knob-transition-duration: var(--knob-transition-duration); // Value change transition
 
+// Lightbox
+$lightbox-overlay-background: var(--lightbox-overlay-background); // Lightbox overlay backdrop color
+$lightbox-zIndex-overlay: var(--lightbox-zIndex-overlay); // Overlay z-index (above dialogs)
+$lightbox-nav-size: var(--lightbox-nav-size); // Navigation button size
+$lightbox-nav-iconSize: var(--lightbox-nav-iconSize); // Navigation icon size
+$lightbox-nav-color-default: var(--lightbox-nav-color-default); // Nav button color
+$lightbox-nav-color-hover: var(--lightbox-nav-color-hover); // Nav button hover color
+$lightbox-nav-background-default: var(--lightbox-nav-background-default); // Nav button background
+$lightbox-nav-background-hover: var(--lightbox-nav-background-hover); // Nav button hover background
+$lightbox-nav-radius: var(--lightbox-nav-radius); // Nav button border radius
+$lightbox-closeButton-size: var(--lightbox-closeButton-size); // Close button size
+$lightbox-closeButton-iconSize: var(--lightbox-closeButton-iconSize); // Close icon size
+$lightbox-counter-color: var(--lightbox-counter-color); // Counter text color
+$lightbox-counter-fontSize: var(--lightbox-counter-fontSize); // Counter font size
+$lightbox-thumbnail-size: var(--lightbox-thumbnail-size); // Thumbnail width/height
+$lightbox-thumbnail-gap: var(--lightbox-thumbnail-gap); // Gap between thumbnails
+$lightbox-thumbnail-radius: var(--lightbox-thumbnail-radius); // Thumbnail border radius
+$lightbox-thumbnail-border-active: var(--lightbox-thumbnail-border-active); // Active thumbnail border color
+$lightbox-thumbnail-opacity-default: var(--lightbox-thumbnail-opacity-default); // Inactive thumbnail opacity
+$lightbox-thumbnail-opacity-active: var(--lightbox-thumbnail-opacity-active); // Active thumbnail opacity
+
 // Listbox
 $listbox-padding: var(--listbox-padding); // Container padding
 $listbox-radius: var(--listbox-radius); // Container border radius

package/dist/ts/tokens.ts

@@ -1172,6 +1172,25 @@ export const tokenNames = [
   'knob-focus-ringColor',
   'knob-focus-ringOffset',
   'knob-transition-duration',
+  'lightbox-overlay-background',
+  'lightbox-zIndex-overlay',
+  'lightbox-nav-size',
+  'lightbox-nav-iconSize',
+  'lightbox-nav-color-default',
+  'lightbox-nav-color-hover',
+  'lightbox-nav-background-default',
+  'lightbox-nav-background-hover',
+  'lightbox-nav-radius',
+  'lightbox-closeButton-size',
+  'lightbox-closeButton-iconSize',
+  'lightbox-counter-color',
+  'lightbox-counter-fontSize',
+  'lightbox-thumbnail-size',
+  'lightbox-thumbnail-gap',
+  'lightbox-thumbnail-radius',
+  'lightbox-thumbnail-border-active',
+  'lightbox-thumbnail-opacity-default',
+  'lightbox-thumbnail-opacity-active',
   'listbox-padding',
   'listbox-radius',
   'listbox-border-width',
@@ -2391,6 +2410,7 @@ export const tokenCategories = {
   inputSwitch: ['inputSwitch-width-sm', 'inputSwitch-width-md', 'inputSwitch-width-lg', 'inputSwitch-height-sm', 'inputSwitch-height-md', 'inputSwitch-height-lg', 'inputSwitch-thumb-size-sm', 'inputSwitch-thumb-size-md', 'inputSwitch-thumb-size-lg', 'inputSwitch-thumb-offset', 'inputSwitch-thumb-color-default', 'inputSwitch-thumb-shadow', 'inputSwitch-track-background-off', 'inputSwitch-track-background-on', 'inputSwitch-track-background-disabled', 'inputSwitch-label-gap', 'inputSwitch-label-color-default', 'inputSwitch-label-color-disabled', 'inputSwitch-focus-ringWidth', 'inputSwitch-focus-ringColor', 'inputSwitch-focus-ringOffset'] as const,
   input-text: ['input-text-height-sm', 'input-text-height-md', 'input-text-height-lg', 'input-text-padding-x', 'input-text-padding-y', 'input-text-fontSize-sm', 'input-text-fontSize-md', 'input-text-fontSize-lg', 'input-text-radius', 'input-text-border-width', 'input-text-border-color-default', 'input-text-border-color-hover', 'input-text-border-color-focus', 'input-text-border-color-disabled', 'input-text-border-color-error', 'input-text-background-default', 'input-text-background-disabled', 'input-text-background-hover', 'input-text-text-default', 'input-text-text-placeholder', 'input-text-text-disabled', 'input-text-focus-ringWidth', 'input-text-focus-ringColor', 'input-text-focus-ringOffset'] as const,
   knob: ['knob-size-sm', 'knob-size-md', 'knob-size-lg', 'knob-strokeWidth-sm', 'knob-strokeWidth-md', 'knob-strokeWidth-lg', 'knob-track-color', 'knob-fill-color-default', 'knob-fill-color-disabled', 'knob-valueText-fontSize-sm', 'knob-valueText-fontSize-md', 'knob-valueText-fontSize-lg', 'knob-valueText-fontWeight', 'knob-valueText-color-default', 'knob-valueText-color-disabled', 'knob-focus-ringWidth', 'knob-focus-ringColor', 'knob-focus-ringOffset', 'knob-transition-duration'] as const,
+  lightbox: ['lightbox-overlay-background', 'lightbox-zIndex-overlay', 'lightbox-nav-size', 'lightbox-nav-iconSize', 'lightbox-nav-color-default', 'lightbox-nav-color-hover', 'lightbox-nav-background-default', 'lightbox-nav-background-hover', 'lightbox-nav-radius', 'lightbox-closeButton-size', 'lightbox-closeButton-iconSize', 'lightbox-counter-color', 'lightbox-counter-fontSize', 'lightbox-thumbnail-size', 'lightbox-thumbnail-gap', 'lightbox-thumbnail-radius', 'lightbox-thumbnail-border-active', 'lightbox-thumbnail-opacity-default', 'lightbox-thumbnail-opacity-active'] as const,
   listbox: ['listbox-padding', 'listbox-radius', 'listbox-border-width', 'listbox-border-color-default', 'listbox-border-color-focus', 'listbox-border-color-disabled', 'listbox-background-default', 'listbox-background-disabled', 'listbox-maxHeight', 'listbox-filter-height', 'listbox-filter-padding-x', 'listbox-filter-background', 'listbox-filter-border', 'listbox-filter-radius', 'listbox-filter-text', 'listbox-filter-placeholder', 'listbox-filter-marginBottom', 'listbox-option-padding-x', 'listbox-option-padding-y', 'listbox-option-radius', 'listbox-option-background-default', 'listbox-option-background-hover', 'listbox-option-background-selected', 'listbox-option-background-focus', 'listbox-option-text-default', 'listbox-option-text-selected', 'listbox-option-text-disabled', 'listbox-option-fontSize', 'listbox-focus-ringWidth', 'listbox-focus-ringColor', 'listbox-focus-ringOffset', 'listbox-checkbox-size', 'listbox-checkbox-marginRight'] as const,
   mega-menu: ['mega-menu-root-background', 'mega-menu-root-padding-x', 'mega-menu-root-padding-y', 'mega-menu-root-gap', 'mega-menu-rootItem-padding-x', 'mega-menu-rootItem-padding-y', 'mega-menu-rootItem-text-color-default', 'mega-menu-rootItem-text-color-hover', 'mega-menu-rootItem-text-color-active', 'mega-menu-rootItem-text-fontSize', 'mega-menu-rootItem-text-fontWeight-default', 'mega-menu-rootItem-text-fontWeight-active', 'mega-menu-rootItem-background-default', 'mega-menu-rootItem-background-hover', 'mega-menu-rootItem-background-active', 'mega-menu-rootItem-radius', 'mega-menu-rootItem-indicator-height', 'mega-menu-rootItem-indicator-color', 'mega-menu-panel-background', 'mega-menu-panel-border-color', 'mega-menu-panel-border-width', 'mega-menu-panel-radius', 'mega-menu-panel-shadow', 'mega-menu-panel-padding', 'mega-menu-panel-gap', 'mega-menu-panel-maxWidth', 'mega-menu-panel-zIndex', 'mega-menu-column-minWidth', 'mega-menu-column-gap', 'mega-menu-category-text-color', 'mega-menu-category-text-fontSize', 'mega-menu-category-text-fontWeight', 'mega-menu-category-text-textTransform', 'mega-menu-category-text-letterSpacing', 'mega-menu-category-margin-bottom', 'mega-menu-item-padding-x', 'mega-menu-item-padding-y', 'mega-menu-item-text-color-default', 'mega-menu-item-text-color-hover', 'mega-menu-item-text-fontSize', 'mega-menu-item-background-hover', 'mega-menu-item-radius', 'mega-menu-item-icon-size', 'mega-menu-item-icon-color', 'mega-menu-item-icon-gap', 'mega-menu-item-description-color', 'mega-menu-item-description-fontSize'] as const,
   menu: ['menu-background', 'menu-border-width', 'menu-border-color', 'menu-radius', 'menu-shadow', 'menu-padding', 'menu-minWidth', 'menu-maxHeight', 'menu-zIndex', 'menu-item-padding-x', 'menu-item-padding-y', 'menu-item-gap', 'menu-item-radius', 'menu-item-background-default', 'menu-item-background-hover', 'menu-item-background-active', 'menu-item-background-disabled', 'menu-item-text-default', 'menu-item-text-disabled', 'menu-item-icon-size', 'menu-item-icon-color-default', 'menu-item-icon-color-disabled', 'menu-item-fontSize', 'menu-separator-color', 'menu-separator-margin'] as const,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@for-the-people-initiative/design-system",
   "private": false,
-  "version": "1.3.2",
+  "version": "1.3.4",
   "type": "module",
   "description": "Design system with design tokens, SCSS utilities, and Vue 3 components",
   "author": "For The People",
@@ -18,6 +18,7 @@
     "dist",
     "src/scss",
     "src/components",
+    "src/types",
     "tokens"
   ],
   "exports": {

package/src/components/Galleria/Galleria.scss

@@ -283,7 +283,139 @@ $c: galleria;
   right: 16px;
 }
 
-// Transition animations
+// Counter
+.#{$c}__counter {
+  position: absolute;
+  bottom: var(--galleria-counter-bottom, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--galleria-counter-padding, 6px 16px);
+  background: var(--galleria-counter-background, rgba(0, 0, 0, 0.6));
+  color: var(--galleria-counter-color, #fff);
+  font-size: var(--galleria-counter-fontSize, 14px);
+  border-radius: var(--galleria-counter-radius, 20px);
+  pointer-events: none;
+  z-index: 2;
+  font-variant-numeric: tabular-nums;
+}
+
+// Fullscreen thumbnails
+.#{$c}__fullscreen-thumbnails {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--galleria-fullscreen-thumbnails-padding, 12px 16px);
+  background: var(--galleria-fullscreen-thumbnails-background, rgba(0, 0, 0, 0.5));
+  overflow-x: auto;
+  z-index: 2;
+
+  .#{$c}__thumbnail-container {
+    justify-content: center;
+  }
+}
+
+.#{$c}__thumbnail--fullscreen {
+  width: var(--galleria-fullscreen-thumbnail-width, 64px);
+  height: var(--galleria-fullscreen-thumbnail-height, 40px);
+  border-color: rgba(255, 255, 255, 0.3);
+
+  &.#{$c}__thumbnail--active {
+    border-color: #fff;
+  }
+}
+
+// When fullscreen has thumbnails, shift counter up above them
+.#{$c}__fullscreen:has(.#{$c}__fullscreen-thumbnails) > .#{$c}__counter {
+  bottom: 80px;
+}
+
+// Loading spinner
+.#{$c}__loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.#{$c}__loader--fullscreen {
+  position: absolute;
+  z-index: 3;
+}
+
+.#{$c}__spinner {
+  width: var(--galleria-spinner-size, 40px);
+  height: var(--galleria-spinner-size, 40px);
+  color: var(--galleria-spinner-color, rgba(255, 255, 255, 0.7));
+  animation: galleria-spin 1s linear infinite;
+}
+
+@keyframes galleria-spin {
+  to { transform: rotate(360deg); }
+}
+
+// Zoom
+.#{$c}__fullscreen--zoomed {
+  cursor: default;
+}
+
+.#{$c}__fullscreen-image {
+  transition: transform 300ms ease;
+  cursor: zoom-in;
+}
+
+.#{$c}__fullscreen-image--zoomed {
+  cursor: zoom-out;
+  z-index: 1;
+}
+
+// Fade transition
+.galleria-fade-enter-active,
+.galleria-fade-leave-active {
+  transition: opacity var(--galleria-transition-duration, 300ms) ease;
+}
+
+.galleria-fade-enter-from,
+.galleria-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide left transition (next)
+.galleria-slide-left-enter-active,
+.galleria-slide-left-leave-active {
+  transition: transform var(--galleria-transition-duration, 300ms) ease, opacity var(--galleria-transition-duration, 300ms) ease;
+}
+
+.galleria-slide-left-enter-from {
+  transform: translateX(30px);
+  opacity: 0;
+}
+
+.galleria-slide-left-leave-to {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+// Slide right transition (prev)
+.galleria-slide-right-enter-active,
+.galleria-slide-right-leave-active {
+  transition: transform var(--galleria-transition-duration, 300ms) ease, opacity var(--galleria-transition-duration, 300ms) ease;
+}
+
+.galleria-slide-right-enter-from {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+.galleria-slide-right-leave-to {
+  transform: translateX(30px);
+  opacity: 0;
+}
+
+// Fullscreen open/close transition
 .galleria-fullscreen-enter-active,
 .galleria-fullscreen-leave-active {
   transition: opacity 200ms ease;

package/src/components/Galleria/Galleria.vue

@@ -2,13 +2,31 @@
   <div class="galleria" :class="additionalClasses">
     <div class="galleria__main">
       <!-- Preview area -->
-      <div class="galleria__preview" @click="onPreviewClick">
-        <img
-          v-if="activeItem"
-          :src="activeItem.src || activeItem"
-          :alt="activeItem.alt || `Image ${activeIndex + 1}`"
-          class="galleria__preview-image"
-        />
+      <div
+        class="galleria__preview"
+        @click="onPreviewClick"
+        @touchstart.passive="onTouchStart"
+        @touchmove.passive="onTouchMove"
+        @touchend="onTouchEnd"
+      >
+        <!-- Loading spinner -->
+        <div v-if="imageLoading" class="galleria__loader">
+          <svg class="galleria__spinner" viewBox="0 0 50 50">
+            <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="80" stroke-linecap="round" />
+          </svg>
+        </div>
+
+        <Transition :name="transitionName" mode="out-in">
+          <img
+            v-if="activeItem"
+            :key="activeIndex"
+            :src="activeItem.src || activeItem"
+            :alt="activeItem.alt || `Image ${activeIndex + 1}`"
+            class="galleria__preview-image"
+            @load="onImageLoad"
+            @error="onImageLoad"
+          />
+        </Transition>
 
         <!-- Navigation buttons -->
         <button
@@ -83,11 +101,17 @@
       <Transition name="galleria-fullscreen">
         <div
           v-if="fullscreenVisible"
+          ref="fullscreenRef"
           class="galleria__fullscreen"
-          @click="closeFullscreen"
+          :class="{ 'galleria__fullscreen--zoomed': isZoomed }"
+          tabindex="0"
+          @click="onFullscreenClick"
           @keydown.escape="closeFullscreen"
           @keydown.left="prev"
           @keydown.right="next"
+          @touchstart.passive="onTouchStart"
+          @touchmove.passive="onTouchMove"
+          @touchend="onTouchEnd"
         >
           <button
             type="button"
@@ -113,13 +137,28 @@
             </svg>
           </button>
 
-          <img
-            v-if="activeItem"
-            :src="activeItem.src || activeItem"
-            :alt="activeItem.alt || `Image ${activeIndex + 1}`"
-            class="galleria__fullscreen-image"
-            @click.stop
-          />
+          <!-- Loading spinner in fullscreen -->
+          <div v-if="imageLoading" class="galleria__loader galleria__loader--fullscreen">
+            <svg class="galleria__spinner" viewBox="0 0 50 50">
+              <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="80" stroke-linecap="round" />
+            </svg>
+          </div>
+
+          <Transition :name="transitionName" mode="out-in">
+            <img
+              v-if="activeItem"
+              :key="activeIndex"
+              :src="activeItem.src || activeItem"
+              :alt="activeItem.alt || `Image ${activeIndex + 1}`"
+              class="galleria__fullscreen-image"
+              :class="{ 'galleria__fullscreen-image--zoomed': isZoomed }"
+              :style="zoomStyle"
+              @click.stop="onImageClick"
+              @dblclick.stop="toggleZoom"
+              @load="onImageLoad"
+              @error="onImageLoad"
+            />
+          </Transition>
 
           <button
             v-if="items.length > 1"
@@ -132,6 +171,31 @@
               <polyline points="9 18 15 12 9 6" />
             </svg>
           </button>
+
+          <!-- Counter -->
+          <div v-if="showCounter && items.length > 1" class="galleria__counter">
+            {{ activeIndex + 1 }} / {{ items.length }}
+          </div>
+
+          <!-- Fullscreen thumbnails -->
+          <div v-if="showFullscreenThumbnails && items.length > 1" class="galleria__fullscreen-thumbnails">
+            <div class="galleria__thumbnail-container">
+              <button
+                v-for="(item, index) in items"
+                :key="index"
+                type="button"
+                class="galleria__thumbnail galleria__thumbnail--fullscreen"
+                :class="{ 'galleria__thumbnail--active': index === activeIndex }"
+                :aria-label="`View image ${index + 1}`"
+                @click.stop="goTo(index)"
+              >
+                <img
+                  :src="item.thumbnail || item.src || item"
+                  :alt="item.alt || `Thumbnail ${index + 1}`"
+                />
+              </button>
+            </div>
+          </div>
         </div>
       </Transition>
     </Teleport>
@@ -142,7 +206,7 @@
 
 <script setup lang="ts">
 import type { GalleriaProps, GalleriaEmits } from '../../types';
-import { computed, ref, watch, onMounted, onUnmounted } from "vue";
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
 
 defineOptions({ name: 'FtpGalleria' });
 
@@ -153,17 +217,34 @@ const props = withDefaults(defineProps<GalleriaProps>(), {
   showThumbnails: true,
   showItemNavigators: true,
   showIndicators: false,
+  showCounter: true,
+  showFullscreenThumbnails: true,
+  enableZoom: true,
   circular: false,
   autoplay: false,
   autoplayInterval: 4000,
   thumbnailsPosition: "bottom",
+  transition: "fade",
 });
 
 const emit = defineEmits(["update:activeIndex", "show", "hide"]);
 
 const internalIndex = ref(props.activeIndex);
 const fullscreenVisible = ref(false);
+const fullscreenRef = ref<HTMLElement | null>(null);
 const autoplayTimer = ref<ReturnType<typeof setInterval> | null>(null);
+const imageLoading = ref(false);
+const isZoomed = ref(false);
+const zoomScale = ref(1);
+const zoomOrigin = ref({ x: 50, y: 50 });
+const slideDirection = ref<'left' | 'right'>('left');
+
+// Touch tracking
+const touchStartX = ref(0);
+const touchStartY = ref(0);
+const touchDeltaX = ref(0);
+// Pinch zoom
+const initialPinchDistance = ref(0);
 
 const activeIndex = computed({
   get: () => internalIndex.value,
@@ -175,6 +256,12 @@ const activeIndex = computed({
 
 const activeItem = computed(() => props.items[activeIndex.value]);
 
+const transitionName = computed(() => {
+  if (props.transition === 'none') return '';
+  if (props.transition === 'slide') return slideDirection.value === 'left' ? 'galleria-slide-left' : 'galleria-slide-right';
+  return 'galleria-fade';
+});
+
 const additionalClasses = computed(() =>
   [
     `galleria--thumbnails-${props.thumbnailsPosition}`,
@@ -184,11 +271,53 @@ const additionalClasses = computed(() =>
     .join(" ")
 );
 
+const zoomStyle = computed(() => {
+  if (!isZoomed.value) return {};
+  return {
+    transform: `scale(${zoomScale.value})`,
+    transformOrigin: `${zoomOrigin.value.x}% ${zoomOrigin.value.y}%`,
+    cursor: 'zoom-out',
+  };
+});
+
 watch(() => props.activeIndex, (newValue) => {
   internalIndex.value = newValue;
 });
 
+// Reset zoom on image change
+watch(() => activeIndex.value, () => {
+  isZoomed.value = false;
+  zoomScale.value = 1;
+  imageLoading.value = true;
+});
+
+// Preload adjacent images
+watch(() => activeIndex.value, () => {
+  preloadAdjacent();
+}, { immediate: true });
+
+const preloadAdjacent = () => {
+  const preloadIndex = (i: number) => {
+    const item = props.items[i];
+    if (!item) return;
+    const img = new Image();
+    img.src = item.src || item;
+  };
+  if (activeIndex.value > 0) preloadIndex(activeIndex.value - 1);
+  if (activeIndex.value < props.items.length - 1) preloadIndex(activeIndex.value + 1);
+  // Also preload circular edges
+  if (props.circular && props.items.length > 1) {
+    if (activeIndex.value === 0) preloadIndex(props.items.length - 1);
+    if (activeIndex.value === props.items.length - 1) preloadIndex(0);
+  }
+};
+
+const onImageLoad = () => {
+  imageLoading.value = false;
+};
+
 const prev = () => {
+  slideDirection.value = 'right';
   if (activeIndex.value > 0) {
     activeIndex.value--;
   } else if (props.circular && props.items.length > 0) {
@@ -197,6 +326,7 @@ const prev = () => {
 };
 
 const next = () => {
+  slideDirection.value = 'left';
   if (activeIndex.value < props.items.length - 1) {
     activeIndex.value++;
   } else if (props.circular) {
@@ -205,6 +335,7 @@ const next = () => {
 };
 
 const goTo = (index: any) => {
+  slideDirection.value = index > activeIndex.value ? 'left' : 'right';
   activeIndex.value = index;
 };
 
@@ -217,15 +348,96 @@ const onPreviewClick = () => {
 const openFullscreen = () => {
   fullscreenVisible.value = true;
   document.body.style.overflow = "hidden";
+  nextTick(() => fullscreenRef.value?.focus());
   emit("show");
 };
 
 const closeFullscreen = () => {
   fullscreenVisible.value = false;
+  isZoomed.value = false;
+  zoomScale.value = 1;
   document.body.style.overflow = "";
   emit("hide");
 };
 
+const onFullscreenClick = (e: MouseEvent) => {
+  // Only close if clicking the backdrop itself
+  if (e.target === fullscreenRef.value) {
+    closeFullscreen();
+  }
+};
+
+const onImageClick = () => {
+  // Single click on image in fullscreen — do nothing (dblclick handles zoom)
+};
+
+// Zoom
+const toggleZoom = (e?: MouseEvent) => {
+  if (!props.enableZoom || !fullscreenVisible.value) return;
+  if (isZoomed.value) {
+    isZoomed.value = false;
+    zoomScale.value = 1;
+  } else {
+    isZoomed.value = true;
+    zoomScale.value = 2.5;
+    if (e) {
+      const rect = (e.target as HTMLElement).getBoundingClientRect();
+      zoomOrigin.value = {
+        x: ((e.clientX - rect.left) / rect.width) * 100,
+        y: ((e.clientY - rect.top) / rect.height) * 100,
+      };
+    }
+  }
+};
+
+// Touch/swipe
+const onTouchStart = (e: TouchEvent) => {
+  if (e.touches.length === 2 && fullscreenVisible.value && props.enableZoom) {
+    // Pinch start
+    initialPinchDistance.value = getPinchDistance(e);
+    return;
+  }
+  touchStartX.value = e.touches[0].clientX;
+  touchStartY.value = e.touches[0].clientY;
+  touchDeltaX.value = 0;
+};
+
+const onTouchMove = (e: TouchEvent) => {
+  if (e.touches.length === 2 && fullscreenVisible.value && props.enableZoom) {
+    // Pinch zoom
+    const dist = getPinchDistance(e);
+    const ratio = dist / initialPinchDistance.value;
+    if (ratio > 1.3 && !isZoomed.value) {
+      isZoomed.value = true;
+      zoomScale.value = 2.5;
+      zoomOrigin.value = { x: 50, y: 50 };
+    } else if (ratio < 0.7 && isZoomed.value) {
+      isZoomed.value = false;
+      zoomScale.value = 1;
+    }
+    return;
+  }
+  touchDeltaX.value = e.touches[0].clientX - touchStartX.value;
+};
+
+const onTouchEnd = () => {
+  if (isZoomed.value) return; // Don't swipe when zoomed
+  if (Math.abs(touchDeltaX.value) > 50) {
+    if (touchDeltaX.value > 0) {
+      prev();
+    } else {
+      next();
+    }
+  }
+  touchDeltaX.value = 0;
+};
+
+const getPinchDistance = (e: TouchEvent): number => {
+  const dx = e.touches[0].clientX - e.touches[1].clientX;
+  const dy = e.touches[0].clientY - e.touches[1].clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
 const startAutoplay = () => {
   if (typeof window === 'undefined') return;
   if (props.autoplay && props.items.length > 1) {