@cloudron/pankow 4.4.11 → 4.4.13

package/components/DirectoryViewGridItem.vue

@@ -291,7 +291,7 @@ defineExpose({
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-top: 4px;
-  font-size: 0.85rem;
+  font-size: 1rem;
   padding: 0 2px;
 }
 

package/components/FormGroup.vue

@@ -23,8 +23,7 @@ const props = defineProps({
   align-content: stretch;
 }
 
-/* spacing between adjacent FormGroups */
-.pankow-form-group + .pankow-form-group {
+.pankow-form-group {
   margin: 6px 0;
 }
 

package/components/ResizeHandle.vue

@@ -0,0 +1,118 @@
+<script setup>
+
+defineProps({
+  orientation: {
+    type: String,
+    default: 'horizontal'
+  },
+  opaque: {
+    type: Boolean,
+    default: false
+  },
+  dragging: {
+    type: Boolean,
+    default: false
+  },
+  contrast: {
+    type: String,
+    default: 'auto'
+  }
+});
+
+</script>
+
+<template>
+  <div
+    class="pankow-resize-handle"
+    :class="{
+      'pankow-resize-handle-vertical': orientation === 'vertical',
+      'pankow-resize-handle-opaque': opaque,
+      'pankow-resize-handle-dragging': dragging,
+      'pankow-resize-handle-contrast-light': contrast === 'light',
+      'pankow-resize-handle-contrast-dark': contrast === 'dark'
+    }"
+  >
+    <div class="pankow-resize-handle-grip"><span></span><span></span></div>
+  </div>
+</template>
+
+<style>
+
+.pankow-resize-handle {
+  background: transparent;
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pankow-resize-handle:not(.pankow-resize-handle-vertical) {
+  width: 6px;
+  cursor: col-resize;
+}
+
+.pankow-resize-handle-vertical {
+  height: 6px;
+  cursor: row-resize;
+}
+
+.pankow-resize-handle-opaque {
+  background: var(--pankow-color-background);
+}
+
+.pankow-resize-handle:hover,
+.pankow-resize-handle-dragging {
+  background: var(--pankow-input-border-color);
+}
+
+.pankow-resize-handle-grip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+  pointer-events: none;
+}
+
+.pankow-resize-handle:not(.pankow-resize-handle-vertical) .pankow-resize-handle-grip {
+  flex-direction: column;
+}
+
+.pankow-resize-handle-vertical .pankow-resize-handle-grip {
+  flex-direction: row;
+}
+
+.pankow-resize-handle:hover .pankow-resize-handle-grip,
+.pankow-resize-handle-dragging .pankow-resize-handle-grip {
+  opacity: 0.5;
+}
+
+.pankow-resize-handle-grip span {
+  display: block;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+.pankow-resize-handle-contrast-light .pankow-resize-handle-grip span {
+  background: var(--pankow-text-color-white);
+}
+
+.pankow-resize-handle-contrast-dark .pankow-resize-handle-grip span {
+  background: var(--pankow-color-dark);
+}
+
+.pankow-resize-handle:not(.pankow-resize-handle-vertical) .pankow-resize-handle-grip span {
+  width: 2px;
+  height: 16px;
+}
+
+.pankow-resize-handle-vertical .pankow-resize-handle-grip span {
+  width: 16px;
+  height: 2px;
+}
+
+</style>

package/components/SideBar.vue

@@ -1,17 +1,35 @@
 <script setup>
 
-import { ref, useTemplateRef, onMounted } from 'vue';
-import { onSwipe } from '../gestures.js';
+import { ref, useTemplateRef, onMounted, onUnmounted, nextTick } from 'vue';
+import { onPan } from '../gestures.js';
+import ResizeHandle from './ResizeHandle.vue';
 
-defineProps({
+const props = defineProps({
   showOpenAction: {
     type: Boolean,
     default: true
   },
+  resizable: {
+    type: Boolean,
+    default: false
+  },
+  storageKey: {
+    type: String,
+    default: 'pankow-sidebar-width'
+  },
 });
 
+const container = useTemplateRef('container');
 const sideBar = useTemplateRef('sideBar');
+const backDrop = useTemplateRef('backDrop');
 const isVisible = ref(false);
+const dragging = ref(false);
+const resizing = ref(false);
+
+const SIDEBAR_MIN_WIDTH = 200;
+const SIDEBAR_MAX_WIDTH = 600;
+let resizeStartX = 0;
+let resizeStartWidth = 0;
 
 function open() {
   isVisible.value = true;
@@ -21,10 +39,199 @@ function close() {
   isVisible.value = false;
 }
 
-onMounted(() => {
-  onSwipe(sideBar.value, (direction) => {
-    if (direction === 'left') close();
+function width() {
+  return sideBar.value ? sideBar.value.offsetWidth : 0;
+}
+
+function clearPendingSettle() {
+  if (settleOnEnd && sideBar.value) sideBar.value.removeEventListener('transitionend', settleOnEnd);
+  settleOnEnd = null;
+  if (settleTimer) {
+    clearTimeout(settleTimer);
+    settleTimer = null;
+  }
+}
+
+function dragStart() {
+  clearPendingSettle();
+  dragging.value = true;
+}
+
+function dragMove({ deltaX }) {
+  const offset = Math.max(-width(), Math.min(0, deltaX));
+  sideBar.value.style.transform = `translateX(${offset}px)`;
+  if (backDrop.value) backDrop.value.style.opacity = String(1 + offset / width());
+}
+
+function settle(shouldClose) {
+  dragging.value = false;
+  isVisible.value = shouldClose ? false : true;
+
+  nextTick(() => {
+    const el = sideBar.value;
+    const bd = backDrop.value;
+    if (!el) return;
+
+    clearPendingSettle();
+
+    el.style.transform = shouldClose ? 'translateX(-100%)' : 'translateX(0)';
+    if (bd) bd.style.opacity = '';
+
+    function cleanup() {
+      if (settleTimer) {
+        clearTimeout(settleTimer);
+        settleTimer = null;
+      }
+      if (settleOnEnd) {
+        el.removeEventListener('transitionend', onEnd);
+        settleOnEnd = null;
+      }
+      el.style.transform = '';
+    }
+
+    function onEnd(event) {
+      if (event.propertyName === 'transform') cleanup();
+    }
+
+    settleOnEnd = onEnd;
+    el.addEventListener('transitionend', onEnd);
+    settleTimer = setTimeout(cleanup, 300);
   });
+}
+
+function suppressClick() {
+  suppressBackdropClick = true;
+  setTimeout(() => { suppressBackdropClick = false; }, 0);
+}
+
+function onBackdropClick() {
+  if (suppressBackdropClick) {
+    suppressBackdropClick = false;
+    return;
+  }
+  close();
+}
+
+function dragEnd({ deltaX, velocity }) {
+  suppressClick();
+  const w = width();
+  settle(deltaX < -w / 2 || velocity < -0.5);
+}
+
+function dragCancel() {
+  suppressClick();
+  settle(false);
+}
+
+function resizeStart(event) {
+  if (!props.resizable) return;
+  resizing.value = true;
+  resizeStartX = event.clientX ?? event.touches?.[0]?.clientX ?? 0;
+  resizeStartWidth = container.value ? container.value.offsetWidth : 0;
+  document.body.style.cursor = 'col-resize';
+  document.body.style.userSelect = 'none';
+  event.preventDefault();
+}
+
+function resizeMove(event) {
+  if (!resizing.value || !container.value) return;
+  const x = event.clientX ?? event.touches?.[0]?.clientX ?? 0;
+  const width = Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, resizeStartWidth + (x - resizeStartX)));
+  applyWidth(width);
+}
+
+function resizeEnd() {
+  if (!resizing.value) return;
+  resizing.value = false;
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+  saveWidth();
+}
+
+function applyWidth(width) {
+  if (!container.value) return;
+  container.value.style.width = `${width}px`;
+  container.value.style.minWidth = `${width}px`;
+}
+
+function saveWidth() {
+  if (!props.resizable || !container.value || typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(props.storageKey, String(container.value.offsetWidth));
+  } catch (e) { /* ignore */ }
+}
+
+function restoreWidth() {
+  if (!props.resizable || typeof window === 'undefined') return;
+  try {
+    const stored = window.localStorage.getItem(props.storageKey);
+    if (!stored) return;
+    const width = parseInt(stored, 10);
+    if (Number.isNaN(width)) return;
+    applyWidth(Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, width)));
+  } catch (e) { /* ignore */ }
+}
+
+function clearResizeWidth() {
+  if (container.value) {
+    container.value.style.width = '';
+    container.value.style.minWidth = '';
+  }
+}
+
+let removePans = [];
+let settleTimer = null;
+let settleOnEnd = null;
+let suppressBackdropClick = false;
+const media = typeof window !== 'undefined' ? window.matchMedia('(max-width: 576px)') : null;
+
+function setup() {
+  if (!media || !media.matches || !sideBar.value || removePans.length) return;
+  const handlers = {
+    onStart: dragStart,
+    onMove: dragMove,
+    onEnd: dragEnd,
+    onCancel: dragCancel
+  };
+  removePans.push(onPan(sideBar.value, handlers));
+  if (backDrop.value) removePans.push(onPan(backDrop.value, handlers));
+}
+
+function teardown() {
+  removePans.forEach((remove) => { remove(); });
+  removePans = [];
+  dragging.value = false;
+  clearPendingSettle();
+  if (sideBar.value) sideBar.value.style.transform = '';
+  if (backDrop.value) backDrop.value.style.opacity = '';
+}
+
+function onMediaChange() {
+  if (media && media.matches) {
+    setup();
+    clearResizeWidth();
+  } else {
+    teardown();
+  }
+}
+
+onMounted(() => {
+  setup();
+  restoreWidth();
+  document.addEventListener('mousemove', resizeMove);
+  document.addEventListener('mouseup', resizeEnd);
+  document.addEventListener('touchmove', resizeMove, { passive: false });
+  document.addEventListener('touchend', resizeEnd);
+  media && media.addEventListener('change', onMediaChange);
+});
+
+onUnmounted(() => {
+  media && media.removeEventListener('change', onMediaChange);
+  document.removeEventListener('mousemove', resizeMove);
+  document.removeEventListener('mouseup', resizeEnd);
+  document.removeEventListener('touchmove', resizeMove);
+  document.removeEventListener('touchend', resizeEnd);
+  teardown();
 });
 
 defineExpose({ open, close });
@@ -32,19 +239,26 @@ defineExpose({ open, close });
 </script>
 
 <template>
-  <div class="pankow-sidebar-container" :class="{ 'pankow-sidebar-open': isVisible }">
-    <Transition name="pankow-fade">
-      <div class="pankow-sidebar-backdrop" @click="close"></div>
+  <div class="pankow-sidebar-container" ref="container" :class="{ 'pankow-sidebar-open': isVisible, 'pankow-sidebar-dragging': dragging, 'pankow-sidebar-resizing': resizing }">
+    <div class="pankow-sidebar-backdrop" ref="backDrop" @click="onBackdropClick"></div>
+    <Transition name="pankow-scale">
+      <div class="pankow-sidebar-close-action" v-if="isVisible" tabindex="0" role="button" aria-label="Close sidebar" @click="close()" @keydown.enter="close()" @keydown.space.prevent="close()"><i class="fa-solid fa-xmark"></i></div>
+      <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" tabindex="0" role="button" aria-label="Open sidebar" @click="open()" @keydown.enter="open()" @keydown.space.prevent="open()"><i class="fa-solid fa-bars"></i></div>
     </Transition>
-    <div class="pankow-sidebar" ref="sideBar" :class="{ 'pankow-sidebar-closed': !isVisible }">
-      <Transition name="pankow-scale">
-        <div class="pankow-sidebar-close-action" v-if="isVisible" tabindex="0" role="button" aria-label="Close sidebar" @click="close()" @keydown.enter="close()" @keydown.space.prevent="close()"><i class="fa-solid fa-xmark"></i></div>
-        <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" tabindex="0" role="button" aria-label="Open sidebar" @click="open()" @keydown.enter="open()" @keydown.space.prevent="open()"><i class="fa-solid fa-bars"></i></div>
-      </Transition>
+    <div class="pankow-sidebar" ref="sideBar">
       <div class="pankow-sidebar-inner">
         <slot></slot>
       </div>
     </div>
+    <ResizeHandle
+      v-if="resizable"
+      class="pankow-sidebar-resize-handle"
+      orientation="horizontal"
+      contrast="light"
+      :dragging="resizing"
+      @mousedown="resizeStart"
+      @touchstart.prevent="resizeStart"
+    />
   </div>
 </template>
 
@@ -53,13 +267,28 @@ defineExpose({ open, close });
 .pankow-sidebar-container {
   display: block;
   height: 100%;
-  min-width: 220px;
+  min-width: 280px;
+  position: relative;
+}
+
+.pankow-sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.pankow-sidebar-resizing {
+  user-select: none;
 }
 
 .pankow-sidebar {
   display: block;
   height: 100%;
   overflow: auto;
+  background-color: #0a2e4c;
+  color: white;
 }
 
 .pankow-sidebar-inner {
@@ -91,7 +320,7 @@ defineExpose({ open, close });
 
 .pankow-sidebar-backdrop {
   display: none;
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
@@ -115,19 +344,34 @@ defineExpose({ open, close });
   }
 
   .pankow-sidebar {
-    position: absolute;
-    width: calc(70%);
+    position: fixed;
+    top: 0;
     left: 0;
-    transition: left 250ms ease-in-out;
+    bottom: 0;
+    width: calc(70%);
+    transform: translateX(-100%);
+    transition: transform 250ms ease-in-out;
   }
 
-  .pankow-sidebar-open .pankow-sidebar-backdrop {
+  .pankow-sidebar-open .pankow-sidebar {
+    transform: translateX(0);
+  }
+
+  .pankow-sidebar-dragging .pankow-sidebar,
+  .pankow-sidebar-dragging .pankow-sidebar-backdrop {
+    transition: none;
+  }
+
+  .pankow-sidebar-backdrop {
     display: block;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 250ms ease-in-out;
   }
 
-  .pankow-sidebar-closed {
-    position: fixed;
-    left: -600px;  /* depends on media query */
+  .pankow-sidebar-open .pankow-sidebar-backdrop {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   .pankow-sidebar-open-action {
@@ -141,6 +385,10 @@ defineExpose({ open, close });
   .pankow-sidebar-close-action {
     display: block;
   }
+
+  .pankow-sidebar-resize-handle {
+    display: none;
+  }
 }
 
-</style>
+</style>

package/components/SplitLayout.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted, useTemplateRef } from 'vue';
+import ResizeHandle from './ResizeHandle.vue';
 
 const props = defineProps({
     orientation: {
@@ -142,20 +143,19 @@ const firstStyle = computed(() => {
         class="pankow-split-layout"
         :class="{
             'pankow-split-layout-dragging': isDragging,
-            'pankow-split-layout-vertical': !isHorizontal,
-            'pankow-split-layout-divider-opaque': opaque
+            'pankow-split-layout-vertical': !isHorizontal
         }"
     >
         <div class="pankow-split-layout-first" :style="firstStyle">
             <slot name="left" />
         </div>
-        <div
-            class="pankow-split-layout-divider"
+        <ResizeHandle
+            :orientation="orientation"
+            :opaque="opaque"
+            :dragging="isDragging"
             @mousedown="startDrag"
             @touchstart.prevent="startDrag"
-        >
-            <div class="pankow-split-layout-handle"><span></span><span></span></div>
-        </div>
+        />
         <div class="pankow-split-layout-second">
             <slot name="right" />
         </div>
@@ -186,75 +186,6 @@ const firstStyle = computed(() => {
     min-width: 0;
 }
 
-.pankow-split-layout-divider {
-    background: transparent;
-    position: relative;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-divider {
-    width: 6px;
-    cursor: col-resize;
-}
-
-.pankow-split-layout-vertical .pankow-split-layout-divider {
-    height: 6px;
-    cursor: row-resize;
-}
-
-.pankow-split-layout-divider-opaque .pankow-split-layout-divider {
-    background: var(--pankow-color-background);
-}
-
-.pankow-split-layout-divider:hover,
-.pankow-split-layout-dragging .pankow-split-layout-divider {
-    background: var(--pankow-input-border-color);
-}
-
-.pankow-split-layout-handle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    gap: 2px;
-    opacity: 0;
-    transition: opacity 0.15s;
-    pointer-events: none;
-}
-
-.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-handle {
-    flex-direction: column;
-}
-
-.pankow-split-layout-vertical .pankow-split-layout-handle {
-    flex-direction: row;
-}
-
-.pankow-split-layout-divider:hover .pankow-split-layout-handle,
-.pankow-split-layout-dragging .pankow-split-layout-handle {
-    opacity: 0.5;
-}
-
-.pankow-split-layout-handle span {
-    display: block;
-    border-radius: 1px;
-    background: var(--pankow-color-text);
-}
-
-.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-handle span {
-    width: 2px;
-    height: 16px;
-}
-
-.pankow-split-layout-vertical .pankow-split-layout-handle span {
-    width: 16px;
-    height: 2px;
-}
-
 .pankow-split-layout-second {
     flex: 1;
     min-width: 0;

package/gestures.js

@@ -1,10 +1,11 @@
 /**
- * Swipe handler
+ * Gesture handlers
  *
  * Usage:
  * ```
- * import { onSwipe } from 'pankow/gestures';
+ * import { onSwipe, onPan } from 'pankow/gestures';
  * onSwipe(element, (direction) => {});
+ * onPan(element, { onStart, onMove, onEnd, onCancel });
  * ```
  */
 
@@ -55,10 +56,101 @@ function onSwipe(elem, callback, threshold = 50) {
   elem.addEventListener('touchcancel', touchEnd);
 }
 
+/**
+ * Registers pointer event listeners on an element for interactive dragging (pan).
+ * The drag is only "claimed" once the pointer moves past a small threshold and
+ * horizontal movement dominates vertical movement, so vertical scrolling inside
+ * the element still works as expected.
+ *
+ * Callbacks:
+ *   onStart({ x, y })                     - drag claimed (horizontal intent confirmed)
+ *   onMove({ deltaX, deltaY })            - pointer moved (called continuously while dragging)
+ *   onEnd({ deltaX, velocity })           - pointer released; velocity in px/ms (negative = leftward)
+ *   onCancel()                            - pointer cancelled
+ *
+ * @param {HTMLElement} elem
+ * @param {{ onStart?: Function, onMove?: Function, onEnd?: Function, onCancel?: Function }} handlers
+ * @param {number} [threshold=10] - Minimum pixel distance before the drag is claimed
+ */
+function onPan(elem, handlers = {}, threshold = 10) {
+  let pointerId = null;
+  let dragging = false;
+  let startX = 0;
+  let startY = 0;
+  let lastX = 0;
+  let lastTime = 0;
+  let lastVelocity = 0;
+
+  function pointerDown(event) {
+    if (dragging || !event.isPrimary) return;
+    pointerId = event.pointerId;
+    startX = event.clientX;
+    startY = event.clientY;
+    lastX = startX;
+    lastTime = event.timeStamp;
+    lastVelocity = 0;
+  }
+
+  function pointerMove(event) {
+    if (pointerId === null || event.pointerId !== pointerId) return;
+
+    const deltaX = event.clientX - startX;
+    const deltaY = event.clientY - startY;
+
+    if (!dragging) {
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
+      if (absX < threshold && absY < threshold) return;
+      if (absY > absX) return; // vertical intent, keep it for scrolling
+      dragging = true;
+      try { elem.setPointerCapture(pointerId); } catch (e) { /* noop */ }
+      if (typeof handlers.onStart === 'function') handlers.onStart({ x: startX, y: startY });
+    }
+
+    const now = event.timeStamp;
+    const dt = now - lastTime;
+    if (dt > 0) {
+      lastVelocity = (event.clientX - lastX) / dt;
+    }
+    lastX = event.clientX;
+    lastTime = now;
+
+    if (typeof handlers.onMove === 'function') handlers.onMove({ deltaX, deltaY });
+  }
+
+  function end(event) {
+    if (pointerId === null || event.pointerId !== pointerId) return;
+    pointerId = null;
+
+    if (dragging) {
+      dragging = false;
+      if (event.type === 'pointercancel') {
+        if (typeof handlers.onCancel === 'function') handlers.onCancel();
+      } else if (typeof handlers.onEnd === 'function') {
+        handlers.onEnd({ deltaX: event.clientX - startX, velocity: lastVelocity });
+      }
+    }
+  }
+
+  elem.addEventListener('pointerdown', pointerDown);
+  elem.addEventListener('pointermove', pointerMove);
+  elem.addEventListener('pointerup', end);
+  elem.addEventListener('pointercancel', end);
+
+  return function remove() {
+    elem.removeEventListener('pointerdown', pointerDown);
+    elem.removeEventListener('pointermove', pointerMove);
+    elem.removeEventListener('pointerup', end);
+    elem.removeEventListener('pointercancel', end);
+  };
+}
+
 export default {
-  onSwipe
+  onSwipe,
+  onPan
 };
 
 export {
-  onSwipe
+  onSwipe,
+  onPan
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.4.11",
+  "version": "4.4.13",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@fontsource/inter": "^5.3.0",
     "@fortawesome/fontawesome-free": "^7.3.1",
-    "filesize": "^11.0.22",
+    "filesize": "^11.0.23",
     "monaco-editor": "^0.56.0",
     "online-3d-viewer": "^0.18.0"
   },
@@ -48,14 +48,14 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^3.3.1",
+    "@unhead/vue": "^3.4.0",
     "@vitejs/plugin-vue": "^6.0.8",
-    "highlight.js": "^11.11.1",
+    "highlight.js": "^11.12.0",
     "typescript": "^7.0.2",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vite-ssg": "^28.3.0",
-    "vue": "^3.5.41",
-    "vue-router": "^5.2.0"
+    "vue": "^3.5.42",
+    "vue-router": "^5.3.1"
   },
   "allowScripts": {
     "core-js": false

package/types/gestures.d.ts

@@ -1,10 +1,11 @@
 /**
- * Swipe handler
+ * Gesture handlers
  *
  * Usage:
  * ```
- * import { onSwipe } from 'pankow/gestures';
+ * import { onSwipe, onPan } from 'pankow/gestures';
  * onSwipe(element, (direction) => {});
+ * onPan(element, { onStart, onMove, onEnd, onCancel });
  * ```
  */
 /**
@@ -14,8 +15,31 @@
  * @param {number} [threshold=50] - Minimum pixel distance to trigger a swipe
  */
 declare function onSwipe(elem: HTMLElement, callback: Function, threshold?: number): void;
+/**
+ * Registers pointer event listeners on an element for interactive dragging (pan).
+ * The drag is only "claimed" once the pointer moves past a small threshold and
+ * horizontal movement dominates vertical movement, so vertical scrolling inside
+ * the element still works as expected.
+ *
+ * Callbacks:
+ *   onStart({ x, y })                     - drag claimed (horizontal intent confirmed)
+ *   onMove({ deltaX, deltaY })            - pointer moved (called continuously while dragging)
+ *   onEnd({ deltaX, velocity })           - pointer released; velocity in px/ms (negative = leftward)
+ *   onCancel()                            - pointer cancelled
+ *
+ * @param {HTMLElement} elem
+ * @param {{ onStart?: Function, onMove?: Function, onEnd?: Function, onCancel?: Function }} handlers
+ * @param {number} [threshold=10] - Minimum pixel distance before the drag is claimed
+ */
+declare function onPan(elem: HTMLElement, handlers?: {
+    onStart?: Function;
+    onMove?: Function;
+    onEnd?: Function;
+    onCancel?: Function;
+}, threshold?: number): () => void;
 declare const _default: {
     onSwipe: typeof onSwipe;
+    onPan: typeof onPan;
 };
 export default _default;
-export { onSwipe };
+export { onSwipe, onPan };

package/viewers/ImageViewer.vue

@@ -2,10 +2,10 @@
 <template>
   <div ref="rootEl" @mousemove="onMouseMove" class="full-page" @keyup.esc.stop="onClose" @keyup.left.stop="onPrev" @keyup.right.stop="onNext" tabindex="1" :style="{ opacity: dismissDistance ? (200 - dismissDistance)/100 : 1 }">
     <div class="image-layer" ref="imageContainer" @scroll="onScroll($event)">
-      <div class="image" v-for="(entry, index) in entries" :key="entry.id" v-bind:id="`image${index}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" :style="{ marginTop: dismissDistance ? (dismissDistance + 'px') : 0 }">
-        <img :src="entry.fullFileUrl" v-if="getFileTypeGroup(entry) === 'image'" draggable="false"/>
-        <video v-if="getFileTypeGroup(entry) !== 'image'" :ref="addVideoRef" controls>
-          <source :src="entry.fullFileUrl" />
+      <div class="image" v-for="(imageEntry, index) in entries" :key="imageEntry.id" :id="`image${index}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" :style="{ marginTop: dismissDistance ? (dismissDistance + 'px') : 0 }">
+        <img :src="imageEntry.fullFileUrl" v-if="getFileTypeGroup(imageEntry) === 'image'" draggable="false" @load="onImageLoad(index)"/>
+        <video v-if="getFileTypeGroup(imageEntry) !== 'image'" :ref="addVideoRef" controls>
+          <source :src="imageEntry.fullFileUrl" />
         </video>
       </div>
     </div>
@@ -19,7 +19,7 @@
 
 <script setup>
 
-import { ref, computed, onBeforeUpdate, onMounted, useTemplateRef } from 'vue';
+import { ref, computed, onBeforeUpdate, useTemplateRef } from 'vue';
 import { getFileTypeGroup } from '../utils.js';
 import Button from '../components/Button.vue';
 
@@ -129,6 +129,18 @@ function onTouchEnd() {
   dismissDistance.value = 0;
 }
 
+function scrollToCurrent(behavior) {
+  const el = document.getElementById(`image${curIndex.value}`);
+  if (el && imageContainer.value) imageContainer.value.scrollTo({ left: el.offsetLeft, behavior });
+}
+
+function onImageLoad(index) {
+  if (lockScroll.value && index === curIndex.value) {
+    scrollToCurrent('auto');
+    lockScroll.value = false;
+  }
+}
+
 function open(e, fileList, instant = true) {
   if (!e || e.isDirectory || !canHandle(e)) return;
 
@@ -139,8 +151,8 @@ function open(e, fileList, instant = true) {
   curIndex.value = fileList.findIndex((item) => item.fileName === e.fileName);
 
   setTimeout(() => {
-    document.getElementById(`image${curIndex.value}`).scrollIntoView({ behavior: instant ? 'instant' : 'smooth' });
-    rootEl.value.focus();
+    scrollToCurrent(instant ? 'auto' : 'smooth');
+    rootEl.value.focus({ preventScroll: true });
   }, 0);
 
   setTimeout(() => {
@@ -156,7 +168,7 @@ function onDownload() {
 function onClose() {
   emit('close');
 
-  if (videoElements.value && videoElements.value.length) videoElements.value.forEach(e => e.pause());
+  if (videoElements.value && videoElements.value.length) videoElements.value.forEach((e) => { e.pause(); });
 
   setTimeout(() => {
     entry.value = {};
@@ -218,12 +230,19 @@ defineExpose({ canHandle, open });
 
 .image-layer {
   display: flex;
-  position: fixed;
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.image-layer::-webkit-scrollbar {
+  display: none;
 }
 
 .image {
@@ -237,6 +256,7 @@ defineExpose({ canHandle, open });
 }
 
 img, video {
+  display: block;
   object-fit: contain;
   width: 100%;
   height: 100%;