@bagelink/vue 1.16.0 → 1.17.6

package/src/components/form/inputs/SelectInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { IconType, Option } from '../../../index'
-import type { AlignedPlacement } from '../../Dropdown.vue'
+import type { AlignedPlacement } from '../../Dropdown.types'
 import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch, useI18n, resolveI18n } from '../../../index'
 import { computed, onMounted, ref, useId, watch } from 'vue'
 import { getOptionIcon, getOptionLabel, getOptionSubtitle, getOptionValue } from '../../../utils/options'

package/src/components/form/inputs/Upload/AssetUploadInput.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, onScopeDispose, ref } from 'vue'
+import { Btn, Image, Card, Loading } from '../../../../index'
+import { useAssetUpload, type AssetReference } from '../../../../assets'
+import { useFileUpload } from './useFileUpload'
+import { useFileDropzone } from '../../../file-drop/useFileDropzone'
+import type { UploadInputProps } from '../../../../types/BagelForm'
+
+const props = defineProps<UploadInputProps>()
+const emit = defineEmits<{
+	'update:modelValue': [value: AssetReference | AssetReference[] | undefined]
+	addFileStart: []
+}>()
+const { upload, uploading, cancel } = useAssetUpload()
+const failure = ref('')
+const values = computed<AssetReference[]>(() => [props.modelValue].flat().filter(
+	(value): value is AssetReference => !!value && typeof value === 'object' && 'asset_id' in value,
+))
+const disabled = computed(() => props.disabled || props.readonly || uploading.value)
+function output(items: AssetReference[]) {
+	emit('update:modelValue', props.multiple ? items : items[0])
+}
+const { browse, addFile, fileQueue } = useFileUpload({
+	multiple: props.multiple, accept: props.accept, capture: props.capture,
+	onFileQueued: async queued => {
+		if (disabled.value) {
+			for (const item of queued) if (item.url) URL.revokeObjectURL(item.url)
+			fileQueue.value = []
+			return
+		}
+		failure.value = ''
+		emit('addFileStart')
+		const next = props.multiple ? [...values.value] : []
+		try {
+			for (const item of props.multiple ? queued : queued.slice(0, 1)) {
+				next.push(await upload(item.file, { visibility: props.assetVisibility }))
+				output([...next])
+			}
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === 'AbortError')) failure.value = 'Upload failed. Please try again.'
+		} finally {
+			for (const item of queued) if (item.url) URL.revokeObjectURL(item.url)
+			fileQueue.value = []
+		}
+	},
+})
+const { handlers } = useFileDropzone({ disabled, onDrop: files => addFile(files) })
+onScopeDispose(() => {
+	for (const item of fileQueue.value) if (item.url) URL.revokeObjectURL(item.url)
+})
+</script>
+
+<template>
+	<Card outline class="flex column gap-1 p-1" v-on="handlers">
+		<label v-if="label">{{ label }}</label>
+		<div v-for="(value, index) in values" :key="value.asset_id" class="flex gap-1 align-items-center">
+			<Image v-if="accept?.startsWith('image/')" :src="value" width="80" height="80" />
+			<span class="ellipsis-1">{{ value.asset_id }}</span>
+			<Btn v-if="!readonly" flat icon="close" :disabled="disabled" aria-label="Remove attachment"
+				@click="output(values.filter((_, i) => i !== index))" />
+		</div>
+		<Loading v-if="uploading" />
+		<Btn v-if="!readonly" :disabled="disabled" icon="upload" :value="btnPlaceholder || 'Upload file'" @click="browse()" />
+		<Btn v-if="uploading" flat value="Cancel" @click="cancel" />
+		<p v-if="failure || error" role="alert">{{ failure || error }}</p>
+	</Card>
+</template>

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -5,6 +5,7 @@ import { watch, computed, ref, useSlots } from 'vue'
 import { useFileDropzone } from '../../../file-drop/useFileDropzone'
 import { useFileUpload } from './useFileUpload'
 import { useBagelInputShell } from '../bagelInputShell'
+import AssetUploadInput from './AssetUploadInput.vue'
 
 const props = withDefaults(defineProps<UploadInputProps>(), {
 	height: '215px',
@@ -32,7 +33,7 @@ const {
 	pk,
 } = useFileUpload({
 	disabled: props.disabled,
-	dirPath: props.dirPath,
+	dirPath: props.assetMode ? undefined : props.dirPath,
 	multiple: props.multiple,
 	accept: props.accept,
 	capture: props.capture,
@@ -121,7 +122,10 @@ function fileName(pathKey: string) {
 </script>
 
 <template>
+	<AssetUploadInput v-if="assetMode" v-bind="props"
+		@update:model-value="emit('update:modelValue', $event)" @add-file-start="emit('addFileStart')" />
 	<div
+		v-else
 		class="bagel-input" :class="[shellClass, { 'has-error': !!error, 'has-value': hasValue }]"
 		:style="shellStyle" :data-field="name || id"
 	>

package/src/components/index.ts

@@ -19,6 +19,8 @@ export { default as DragOver } from './DragOver.vue'
 export { useFileDropzone } from './file-drop/useFileDropzone'
 export type { UseFileDropzoneOptions } from './file-drop/useFileDropzone'
 export { default as Dropdown } from './Dropdown.vue'
+export type { AlignedPlacement, AnchorPoint, DropdownItem } from './Dropdown.types'
+export { default as ContextMenu } from './ContextMenu.vue'
 export { default as EmptyState } from './EmptyState.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as KanbanBoard } from './kanban/KanbanBoard.vue'
@@ -30,7 +32,7 @@ export { default as FlipBook } from './FlipBook.vue'
 export { default as FloatingPanel } from './FloatingPanel.vue'
 export * from './form'
 export { default as Icon } from './Icon/Icon.vue'
-export { FONT_AWESOME_ICONS, FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from './Icon/constants'
+export { FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from './Icon/constants'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
 export * from './layout'

package/src/components/lightbox/AssetPreview.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useAssetDelivery, type AssetReference } from '../../assets'
+import { Btn, Image } from '../../index'
+const props = defineProps<{ asset: AssetReference, type: string, name?: string }>()
+const { url, error, onError } = useAssetDelivery(() => props.asset)
+</script>
+
+<template>
+	<div class="flex column gap-1">
+		<Image v-if="type === 'image'" :src="asset" />
+		<video v-else-if="type === 'video' && url" :src="url" controls @error="onError" />
+		<iframe v-else-if="type === 'pdf' && url" :src="url" :title="name || 'PDF preview'" referrerpolicy="no-referrer" />
+		<Btn v-if="url" :href="url" target="_blank" rel="noopener noreferrer" value="Open / download" />
+		<p v-if="error" role="alert">File preview unavailable.</p>
+	</div>
+</template>

package/src/components/lightbox/Lightbox.vue

@@ -4,6 +4,7 @@ import type { LightboxItem } from './lightbox.types'
 import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile, useEscapeKey } from '../../index'
 import { computed, nextTick, ref, watch } from 'vue'
 import LightboxImage from './LightboxImage.vue'
+import AssetPreview from './AssetPreview.vue'
 
 const isOpen = ref(false)
 const dialogRef = ref<HTMLDialogElement | null>(null)
@@ -29,7 +30,10 @@ function open(item: LightboxItem, groupItems?: LightboxItem[]) {
 			&& groupItem.src === item.src
 		const hasPathMatch = item.pathKey !== undefined && item.pathKey !== null && item.pathKey !== ''
 			&& groupItem.pathKey === item.pathKey
-		return hasSrcMatch || hasPathMatch
+		const hasAssetMatch = item.asset && groupItem.asset
+			&& item.asset.asset_id === groupItem.asset.asset_id
+			&& item.asset.version_id === groupItem.asset.version_id
+		return hasSrcMatch || hasPathMatch || hasAssetMatch
 	})
 	if (currentIndex.value === -1) currentIndex.value = 0
 	zoom.value = 1
@@ -98,9 +102,10 @@ defineExpose({ open, close })
 						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom"
 							:mouse-wheel-to-zoom="false" :double-click-to-zoom="true" :max-scale="5" :min-scale="1"
 							:aspect-ratio="0" :limit-translation="true" @click.stop>
-							<LightboxImage :src="item?.src" />
+							<LightboxImage :src="item?.asset ?? item?.src ?? item?.pathKey" />
 						</Zoomer>
 
+						<AssetPreview v-else-if="item.asset" :asset="item.asset" :type="item.type" :name="item.name" />
 						<BglVideo v-else-if="item?.type === 'video' && item?.src" :src="item?.src" autoplay controls
 							class="lightbox-video" />
 
@@ -143,7 +148,7 @@ defineExpose({ open, close })
 
 			<div v-if="group && group.length > 1" class="lightbox-thumbnails" @click.stop>
 				<template v-for="(item, index) in group" :key="index">
-					<Image v-if="item.type === 'image'" class="thumbnail" :src="item.src" alt=""
+					<Image v-if="item.type === 'image'" class="thumbnail" :src="item.asset ?? item.src ?? item.pathKey" alt=""
 						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)" />
 					<Icon v-else class="thumbnail thumbnail-icon" icon="description"
 						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)" />

package/src/components/lightbox/LightboxImage.vue

@@ -4,11 +4,12 @@
 // so the natural dimensions drive layout — <Image>'s framed mode renders an
 // absolute-fill img that collapses the zoomer to 0×0.
 import { useImageSrc } from '../../index'
+import type { AssetReference } from '../../assets'
 
-const props = defineProps<{ src?: string }>()
-const { imageSrc } = useImageSrc(() => props.src)
+const props = defineProps<{ src?: string | AssetReference }>()
+const { imageSrc, onError } = useImageSrc(() => props.src)
 </script>
 
 <template>
-	<img :draggable="false" :src="imageSrc" alt="Preview" class="lightbox-image">
+	<img :draggable="false" :src="imageSrc" alt="Preview" class="lightbox-image" @error="onError">
 </template>

package/src/components/lightbox/index.ts

@@ -1,8 +1,9 @@
 import type { App, Directive, DirectiveBinding, Plugin } from 'vue'
+import { ASSET_CLIENT_KEY, type AssetClient } from '../../assets'
 
 import type { LightboxItem } from './lightbox.types'
 import { IMAGE_FORMATS_REGEXP, pathKeyToURL, VIDEO_FORMATS_REGEXP } from '../../index'
-import { createApp } from 'vue'
+import { createApp, inject } from 'vue'
 import Lightbox from './Lightbox.vue'
 
 type OpenFunction = (item: LightboxItem, groupItems?: LightboxItem[]) => void
@@ -36,7 +37,9 @@ const lightboxDirective: Directive = {
 function groupHandler(item: LightboxItem) {
 	if (item.group) {
 		if (!groups[item.group]) { groups[item.group] = [] }
-		const currentIndex = groups[item.group].findIndex(i => i.src === item.src)
+		const currentIndex = groups[item.group].findIndex(i => item.asset
+			? i.asset?.asset_id === item.asset.asset_id && i.asset?.version_id === item.asset.version_id
+			: i.src === item.src)
 		if (currentIndex === -1) { groups[item.group].push(item) }
 	}
 }
@@ -44,7 +47,7 @@ function groupHandler(item: LightboxItem) {
 function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBinding) {
 	e.stopPropagation()
 	const item = bindingToItem(binding, el)
-	const lightboxInstance = getLightboxInstance()
+	const lightboxInstance = getLightboxInstance(binding)
 	if (!lightboxInstance || !lightboxInstance.open) { return }
 	const open = lightboxInstance.open as OpenFunction
 	const group = item && item.group ? groups[item.group] : undefined
@@ -52,6 +55,9 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 }
 
 function bindingToItem(binding: DirectiveBinding, el: HTMLElement): LightboxItem {
+	if (binding.value?.asset) {
+		return { ...binding.value, src: undefined, pathKey: undefined, type: binding.value.type || 'image', name: binding.value.name || '' }
+	}
 	let { group, src, type, name, thumbnail, enableZoom, openFile, download, pathKey } = binding.value || {}
 	src = pathKeyToURL(src || pathKey) || binding.value || el.getAttribute('src') || ''
 	type = type || determineFileType(src)
@@ -82,10 +88,25 @@ function determineFileType(url: any): string {
 	return extension ?? 'unknown'
 }
 
+const instances = new WeakMap<App, InstanceType<typeof Lightbox>>()
 let lightboxInstance: InstanceType<typeof Lightbox> | undefined
 
-function getLightboxInstance(): InstanceType<typeof Lightbox> | undefined {
+function getLightboxInstance(binding: DirectiveBinding): InstanceType<typeof Lightbox> | undefined {
 	if (typeof document === 'undefined') { return undefined }
+	const owner = binding.instance?.$?.appContext.app
+	if (owner) {
+		const existing = instances.get(owner)
+		if (existing) return existing
+		const element = document.createElement('div')
+		document.body.prepend(element)
+		const child = createApp(Lightbox)
+		const client = owner.runWithContext(() => injectAssetClient())
+		if (client) child.provide(ASSET_CLIENT_KEY, client)
+		const instance = child.mount(element) as InstanceType<typeof Lightbox>
+		instances.set(owner, instance)
+		owner.onUnmount(() => { child.unmount(); element.remove(); instances.delete(owner) })
+		return instance
+	}
 	if (!lightboxInstance) {
 		const lightboxEl = document.createElement('div')
 		document.body.prepend(lightboxEl)
@@ -95,6 +116,10 @@ function getLightboxInstance(): InstanceType<typeof Lightbox> | undefined {
 	return lightboxInstance
 }
 
+function injectAssetClient(): AssetClient | undefined {
+	return inject(ASSET_CLIENT_KEY, undefined)
+}
+
 const lightboxPlugin: Plugin = {
 	install(app: App) {
 		app.directive('lightbox', lightboxDirective)

package/src/components/lightbox/lightbox.types.ts

@@ -1,4 +1,8 @@
-export type XORSrcPath = { src: string, pathKey?: never } | { src?: never, pathKey: string }
+import type { AssetReference } from '../../assets'
+
+export type XORSrcPath = { src: string, pathKey?: never, asset?: never }
+	| { src?: never, pathKey: string, asset?: never }
+	| { src?: never, pathKey?: never, asset: AssetReference }
 
 export type LightboxItem = XORSrcPath & {
 	type: string

package/src/composables/index.ts

@@ -16,7 +16,7 @@ export { useImageSrc } from './useImageSrc'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
 export { createPointerSession, usePointerSession } from './usePointerSession'
-export type { PointerSessionOptions } from './usePointerSession'
+export type { PointerSessionMovePayload, PointerSessionOptions } from './usePointerSession'
 export { resizeRect, snapGridDelta } from './resizeGeometry'
 export type { ResizeRect } from './resizeGeometry'
 export { usePrefersReducedMotion } from './usePrefersReducedMotion'

package/src/composables/useBoundedRectDrag.ts

@@ -29,18 +29,14 @@ export function useBoundedRectDrag() {
 		if (!Number.isFinite(scale) || scale <= 0) return false
 		const initial = { ...options.rect }
 		const bounds = { ...options.bounds }
-		const startX = event.clientX
-		const startY = event.clientY
 		let moved = false
 		let previewed = false
-		function move(next: PointerEvent) {
-			const clientDx = next.clientX - startX
-			const clientDy = next.clientY - startY
-			if (!moved && Math.hypot(clientDx, clientDy) < (options.threshold ?? 0)) return
-			if (!moved && clientDx === 0 && clientDy === 0) return
+		function applyMove(dxClient: number, dyClient: number) {
+			if (!moved && Math.hypot(dxClient, dyClient) < (options.threshold ?? 0)) return
+			if (!moved && dxClient === 0 && dyClient === 0) return
 			moved = true
-			const dx = clientDx / scale
-			const dy = clientDy / scale
+			const dx = dxClient / scale
+			const dy = dyClient / scale
 			const rect = options.mode === 'resize'
 				? resizeRect(initial, { x: dx, y: dy }, 'se', bounds, { width: options.minWidth ?? 0, height: options.minHeight ?? 0 })
 				: {
@@ -52,9 +48,10 @@ export function useBoundedRectDrag() {
 			options.onUpdate(rect)
 		}
 		const started = session.start(event, {
-			onMove: move,
-			onEnd: next => {
-				try { move(next); options.onCommit?.(moved) } finally { active.value = false }
+			threshold: options.threshold,
+			onMove: (_next, { dx, dy }) => applyMove(dx, dy),
+			onEnd: (_next, { dx, dy }) => {
+				try { applyMove(dx, dy); options.onCommit?.(moved) } finally { active.value = false }
 			},
 			onCancel: () => {
 				active.value = false

package/src/composables/useImageSrc.ts

@@ -1,6 +1,7 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { appendScript, awaitGlobal, normalizeURL, pathKeyToURL } from '../index'
-import { ref, toValue, watch } from 'vue'
+import { computed, onScopeDispose, ref, toValue, watch } from 'vue'
+import { useAssetDelivery, type AssetDeliveryRequest } from '../assets'
 
 declare global {
 	interface Window {
@@ -8,74 +9,76 @@ declare global {
 	}
 }
 
-async function getCachedImage(url: string): Promise<string | undefined> {
-	if (!('caches' in window)) { return undefined }
-	try {
-		const imgCache = await window.caches.open('img-cache')
-		const cachedResponse = await imgCache.match(url)
-		if (cachedResponse) {
-			return URL.createObjectURL(await cachedResponse.blob())
-		}
-	} catch (error) {
-		console.warn('Cache access error:', error)
-	}
-	return undefined
-}
-
-async function cacheImage(url: string, blob: Blob) {
-	if (!('caches' in window)) { return }
-	try {
-		const imgCache = await window.caches.open('img-cache')
-		await imgCache.put(url, new Response(blob))
-	} catch (error) {
-		console.warn('Cache write error:', error)
-	}
+let legacyCacheCleanup: Promise<boolean> | undefined
+/** Remove only the retired sensitive image cache, once per browser session. */
+export function clearLegacyImageCache() {
+	if (typeof window === 'undefined' || !('caches' in window)) return
+	legacyCacheCleanup ??= window.caches.delete('img-cache').catch(() => false)
+	return legacyCacheCleanup
 }
 
-async function convertHeicImage(url: string): Promise<string> {
+async function convertHeicImage(url: string, signal: AbortSignal): Promise<string> {
 	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
 	const heic2any = await awaitGlobal<(opts: { blob: Blob }) => Promise<Blob>>('heic2any')
-	const response = await fetch(normalizeURL(url))
+	const response = await fetch(normalizeURL(url), { signal, cache: 'no-store' })
+	if (!response.ok) throw new Error('Image request failed')
 	const blob = await response.blob()
 	const convertedBlob = await heic2any({ blob })
-	await cacheImage(url, convertedBlob)
 	return URL.createObjectURL(convertedBlob)
 }
 
 /**
  * Resolve an image source for display: turns a pathKey/URL into a usable URL via
  * `pathKeyToURL`, and transparently converts `.heic` files to a displayable blob
- * (with a cache) since browsers can't render HEIC in <img>. Shared by <Image>
+ * (in memory only) since browsers can't render HEIC in <img>. Shared by <Image>
  * and the lightbox so both get the same resolution + HEIC handling.
  *
  * @param source ref/getter of the raw src or pathKey
  * @returns `{ imageSrc, loadingError }` reactive refs
  */
-export function useImageSrc(source: MaybeRefOrGetter<string | undefined>) {
+export function useImageSrc(source: MaybeRefOrGetter<string | AssetDeliveryRequest | undefined>) {
+	void clearLegacyImageCache()
+	const asset = useAssetDelivery(() => {
+		const value = toValue(source)
+		return typeof value === 'object' ? { ...value, representation: value.representation ?? 'preview' } : undefined
+	})
 	const imageSrc = ref<string | undefined>(undefined)
 	const loadingError = ref(false)
+	let controller: AbortController | undefined
+	let generation = 0
+	let objectUrl: string | undefined
+	function cleanup() {
+		controller?.abort()
+		if (objectUrl) URL.revokeObjectURL(objectUrl)
+		objectUrl = undefined
+	}
 
 	async function load() {
+		const current = ++generation
+		cleanup()
 		loadingError.value = false
-		const url = pathKeyToURL(toValue(source))
+		imageSrc.value = undefined
+		const value = toValue(source)
+		if (typeof value === 'object') return
+		const url = pathKeyToURL(value)
 		if (url === undefined || url === '') {
 			imageSrc.value = undefined
 			return
 		}
 
 		try {
+			controller = new AbortController()
 			const ext = url.split('.').pop()?.toLowerCase().split('?')[0]
 			if (ext === 'heic') {
-				const cachedSrc = await getCachedImage(url)
-				if (cachedSrc !== undefined && cachedSrc !== '') {
-					imageSrc.value = cachedSrc
-					return
-				}
-				imageSrc.value = await convertHeicImage(url)
+				const converted = await convertHeicImage(url, controller.signal)
+				if (current !== generation) { URL.revokeObjectURL(converted); return }
+				objectUrl = converted
+				imageSrc.value = converted
 			} else {
 				imageSrc.value = url
 			}
 		} catch (error) {
+			if (current !== generation) return
 			console.error('Image loading error:', error)
 			loadingError.value = true
 			imageSrc.value = undefined
@@ -83,6 +86,13 @@ export function useImageSrc(source: MaybeRefOrGetter<string | undefined>) {
 	}
 
 	watch(() => toValue(source), load, { immediate: true })
-
-	return { imageSrc, loadingError }
+	onScopeDispose(() => { generation++; cleanup() })
+	return {
+		imageSrc: computed(() => typeof toValue(source) === 'object' ? asset.url.value : imageSrc.value),
+		loadingError: computed(() => typeof toValue(source) === 'object' ? asset.error.value : loadingError.value),
+		onError: () => {
+			if (typeof toValue(source) === 'object') asset.onError()
+			else loadingError.value = true
+		},
+	}
 }

package/src/composables/usePointerSession.ts

@@ -1,10 +1,22 @@
 import { getCurrentScope, onScopeDispose } from 'vue'
 
+export interface PointerSessionMovePayload {
+	dx: number
+	dy: number
+	distance: number
+	exceededThreshold: boolean
+}
+
 export interface PointerSessionOptions {
 	cursor?: string
-	onMove: (event: PointerEvent) => void
-	/** Commit receives the release coordinates, even when no move event preceded it. */
-	onEnd?: (event: PointerEvent) => void
+	/** Optional distance in client pixels before `exceededThreshold` becomes true. */
+	threshold?: number
+	/** Override the target element or document when starting from a delegated listener. */
+	target?: Element | Document | null
+	onThreshold?: (event: PointerEvent, payload: PointerSessionMovePayload) => void
+	onMove: (event: PointerEvent, payload: PointerSessionMovePayload) => void
+	/** Commit receives the release coordinates and movement summary, even when no move event preceded it. */
+	onEnd?: (event: PointerEvent, payload: PointerSessionMovePayload) => void
 	onCancel?: () => void
 }
 
@@ -14,17 +26,46 @@ export function createPointerSession() {
 	function cancel() { finish?.() }
 	function start(event: PointerEvent, options: PointerSessionOptions): boolean {
 		if (finish || event.button !== 0 || event.isPrimary === false) return false
-		const target = event.currentTarget as Element | null
-		const doc = target?.ownerDocument
+		const rawTarget = (options.target ?? event.currentTarget ?? event.target) as Element | Document | null
+		const doc = rawTarget && 'ownerDocument' in rawTarget
+			? (rawTarget.ownerDocument ?? (rawTarget as unknown as Document))
+			: (rawTarget as Document | null)
+		const targetEl = rawTarget && 'ownerDocument' in rawTarget && rawTarget.ownerDocument
+			? (rawTarget as Element)
+			: null
 		const view = doc?.defaultView
 		if (!view) return false
+
 		const id = event.pointerId
+		const startX = event.clientX
+		const startY = event.clientY
+		const threshold = options.threshold ?? 0
+		let exceededThreshold = threshold <= 0
+
 		const style = doc.body?.style
 		const cursor = style?.cursor ?? ''
 		const selection = style?.userSelect ?? ''
+
+		function buildPayload(next: PointerEvent): PointerSessionMovePayload {
+			const dx = (next.clientX ?? startX) - startX
+			const dy = (next.clientY ?? startY) - startY
+			const distance = Math.hypot(dx, dy)
+			if (!exceededThreshold && distance > threshold) {
+				exceededThreshold = true
+				options.onThreshold?.(next, { dx, dy, distance, exceededThreshold: true })
+			}
+			return { dx, dy, distance, exceededThreshold }
+		}
+
 		function move(next: PointerEvent) {
 			if (next.pointerId !== id) return
-			try { options.onMove(next) } catch (error) { cancel(); throw error }
+			try {
+				const payload = buildPayload(next)
+				options.onMove(next, payload)
+			} catch (error) {
+				cancel()
+				throw error
+			}
 		}
 		function up(next: PointerEvent) { if (next.pointerId === id) finish?.(next) }
 		function interrupted(next: PointerEvent) { if (next.pointerId === id) cancel() }
@@ -38,13 +79,17 @@ export function createPointerSession() {
 			view!.removeEventListener('pointercancel', interrupted)
 			view!.removeEventListener('blur', cancel)
 			view!.removeEventListener('keydown', keydown)
-			target?.removeEventListener('lostpointercapture', interrupted as EventListener)
+			targetEl?.removeEventListener('lostpointercapture', interrupted as EventListener)
 			try {
-				if (target?.hasPointerCapture?.(id)) target.releasePointerCapture(id)
+				if (targetEl?.hasPointerCapture?.(id)) targetEl.releasePointerCapture(id)
 			} catch { /* Detached targets may already have lost capture. */ }
 			if (style) { style.cursor = cursor; style.userSelect = selection }
-			if (next) options.onEnd?.(next)
-			else options.onCancel?.()
+			if (next) {
+				const payload = buildPayload(next)
+				options.onEnd?.(next, payload)
+			} else {
+				options.onCancel?.()
+			}
 		}
 		event.preventDefault()
 		if (style) {
@@ -56,8 +101,8 @@ export function createPointerSession() {
 		view.addEventListener('pointercancel', interrupted)
 		view.addEventListener('blur', cancel)
 		view.addEventListener('keydown', keydown)
-		target?.addEventListener('lostpointercapture', interrupted as EventListener)
-		try { target?.setPointerCapture?.(id) } catch { /* Window listeners remain a capture fallback. */ }
+		targetEl?.addEventListener('lostpointercapture', interrupted as EventListener)
+		try { targetEl?.setPointerCapture?.(id) } catch { /* Window listeners remain a capture fallback. */ }
 		return true
 	}
 	return { start, cancel }

package/src/directives/vResize.ts

@@ -47,8 +47,8 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 	if (options.maxHeight !== undefined) target.setAttribute('aria-valuemax', String(options.maxHeight))
 	target.setAttribute('aria-valuenow', String(el.offsetHeight))
 
-	function update(clientY: number, startY: number, initialHeight: number): ResizeEvent {
-		const event = { clientY, deltaY: clientY - startY, initialHeight }
+	function update(clientY: number, deltaY: number, initialHeight: number): ResizeEvent {
+		const event = { clientY, deltaY, initialHeight }
 		const proposed = initialHeight + event.deltaY
 		const snapped = options.gridSize && options.gridSize > 0 ? Math.round(proposed / options.gridSize) * options.gridSize : proposed
 		const height = Math.min(options.maxHeight ?? Infinity, Math.max(options.minHeight ?? 0, snapped))
@@ -61,16 +61,15 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 	function handleStart(event: PointerEvent) {
 		if (event.button !== 0 || event.isPrimary === false) return
 		pointer.cancel()
-		const startY = event.clientY
 		const initialHeight = el.offsetHeight
 		const originalHeight = el.style.height
 		const originalValue = target.getAttribute('aria-valuenow')
 		options.onStart?.(event)
 		pointer.start(event, {
 			cursor: 'ns-resize',
-			onMove: e => update(e.clientY, startY, initialHeight),
-			onEnd(e) {
-				const result = update(e.clientY, startY, initialHeight)
+			onMove: (e, { dy }) => update(e.clientY, dy, initialHeight),
+			onEnd(e, { dy }) {
+				const result = update(e.clientY, dy, initialHeight)
 				options.onEnd?.(result)
 			},
 			onCancel() {
@@ -92,7 +91,7 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 			: event.key === 'End' ? options.maxHeight!
 				: initialHeight + (event.key === 'ArrowUp' ? -step : step)
 		options.onStart?.(event)
-		const result = update(height - initialHeight, 0, initialHeight)
+		const result = update(height - initialHeight, height - initialHeight, initialHeight)
 		options.onEnd?.(result)
 	}