@bagelink/vue 1.17.2 → 1.17.6

package/src/assets.ts

@@ -1,132 +1,75 @@
 import { inject, onScopeDispose, ref, toValue, watch, type InjectionKey, type MaybeRefOrGetter } from 'vue'
 
-/** Persist this reference, never an AssetDelivery. Version pins are immutable. */
+/**
+ * Persist this reference, never a delivery URL. Assets are public-by-default;
+ * the id alone addresses the bytes. ``version_id`` is accepted for backward
+ * compatibility with callers that still emit it, but it is ignored: it no
+ * longer selects a version and never appears in a URL.
+ */
 export interface AssetReference {
 	asset_id: string
 	version_id?: string
 }
 
-export interface AssetDelivery {
-	url: string
-	expires_at: string
-	version_id: string
+export type AssetVisibility = 'protected' | 'public'
+
+export interface AssetUploadOptions {
+	/** Protected is the safe default. Website/media callers must opt into public. */
+	visibility?: AssetVisibility
 }
 
+/** Display purpose → on-demand transform query params (mirrors common/blox). */
 export type AssetPurpose = 'original' | 'preview' | 'thumbnail' | 'website' | 'social'
 
+const PURPOSE_PARAMS: Record<AssetPurpose, string> = {
+	original: '',
+	preview: 'fmt=webp',
+	thumbnail: 'fmt=webp&w=256',
+	website: 'fmt=webp',
+	social: 'w=1200&h=630&fmt=jpeg&fit=cover',
+}
+
+/** A display intent: a pinned asset plus an optional purpose/preset. */
 export interface AssetDeliveryRequest extends AssetReference {
-	/** Backend-approved preset, e.g. an image preview; never arbitrary transforms. */
 	representation?: AssetPurpose
 }
 
-/** A separate facade: generated SDK namespaces remain unchanged. */
+/** Separate facade: generated SDK namespaces remain unchanged. */
 export interface AssetTransport {
-	/** Return deliveries in request order; adapt the SDK's `{items}` envelope here. */
-	resolve(references: readonly AssetDeliveryRequest[], signal: AbortSignal): Promise<AssetDelivery[]>
-	upload(file: File, signal: AbortSignal): Promise<AssetReference>
+	upload(file: File, signal: AbortSignal, options?: AssetUploadOptions): Promise<AssetReference>
 }
 
-interface Pending {
-	reference: AssetDeliveryRequest
-	signal?: AbortSignal
-	resolve: (delivery: AssetDelivery) => void
-	reject: (reason: unknown) => void
+export interface AssetClient {
+	/** Upload original bytes; protected unless the caller explicitly opts into public. */
+	upload(file: File, signal?: AbortSignal, options?: AssetUploadOptions): Promise<AssetReference>
+	/** Build the public CDN URL for a reference + optional purpose. */
+	assetUrl(reference: AssetReference, purpose?: AssetPurpose): string
+	/** Abort in-flight uploads (logout / tenant / account switch). */
+	clearSession(): void
+	/** Monotonic counter bumped on clearSession; watchers can subscribe. */
+	revision: number
 }
 
 const abortError = () => new DOMException('Asset request cancelled', 'AbortError')
 
-/** App/session scoped, with no persistent storage or delivery cache. */
-export function createAssetClient(transport: AssetTransport) {
-	const revision = ref(0)
+/** App/session scoped; no persistent storage or delivery cache (URLs are public). */
+export function createAssetClient(
+	transport: AssetTransport,
+	deliveryBaseUrl: string,
+): AssetClient {
 	const controllers = new Set<AbortController>()
-	let pending: Pending[] = []
-	let scheduled = false
-	const inFlight = new Map<string, { controller: AbortController; promise: Promise<AssetDelivery>; users: number }>()
-
-	async function flush() {
-		scheduled = false
-		const batch = pending
-		pending = []
-		const active = batch.filter(item => !item.signal?.aborted)
-		for (const item of batch) if (item.signal?.aborted) item.reject(abortError())
-		if (!active.length) return
-		const controller = new AbortController()
-		controllers.add(controller)
-		const cancelIfUnused = () => {
-			for (const item of active) if (item.signal?.aborted) item.reject(abortError())
-			if (active.every(item => item.signal?.aborted)) controller.abort()
-		}
-		const rejectAborted = () => {
-			for (const item of active) item.reject(abortError())
-		}
-		controller.signal.addEventListener('abort', rejectAborted, { once: true })
-		for (const item of active) item.signal?.addEventListener('abort', cancelIfUnused)
-		try {
-			const deliveries = await transport.resolve(active.map(item => item.reference), controller.signal)
-			if (controller.signal.aborted) throw abortError()
-			if (deliveries.length !== active.length) throw new Error('Incomplete asset delivery batch')
-			active.forEach((item, index) => {
-				const delivery = deliveries[index]!
-				if (item.signal?.aborted) item.reject(abortError())
-				else if (!Number.isFinite(Date.parse(delivery.expires_at))
-					|| Date.parse(delivery.expires_at) <= Date.now()
-					|| !/^https?:\/\//.test(delivery.url)
-					|| !delivery.version_id
-					|| (item.reference.version_id && item.reference.version_id !== delivery.version_id)) {
-					item.reject(new Error('Invalid asset delivery'))
-				} else item.resolve(delivery)
-			})
-		} catch (error) {
-			for (const item of active) item.reject(error)
-		} finally {
-			controllers.delete(controller)
-			controller.signal.removeEventListener('abort', rejectAborted)
-			for (const item of active) item.signal?.removeEventListener('abort', cancelIfUnused)
-		}
+	let revision = 0
+
+	function assetUrl(reference: AssetReference, purpose: AssetPurpose = 'original'): string {
+		const query = PURPOSE_PARAMS[purpose] ?? ''
+		const base = deliveryBaseUrl.replace(/\/+$/, '')
+		return query ? `${base}/${reference.asset_id}?${query}` : `${base}/${reference.asset_id}`
 	}
 
 	return {
-		revision,
-		resolve(reference: AssetDeliveryRequest, signal?: AbortSignal): Promise<AssetDelivery> {
-			if (signal?.aborted) return Promise.reject(abortError())
-			const key = JSON.stringify([reference.asset_id, reference.version_id ?? null, reference.representation ?? 'original'])
-			let entry = inFlight.get(key)
-			if (!entry) {
-				const controller = new AbortController()
-				const promise = new Promise<AssetDelivery>((resolve, reject) => {
-					pending.push({ reference: { ...reference }, signal: controller.signal, resolve, reject })
-					if (!scheduled) { scheduled = true; queueMicrotask(() => { void flush() }) }
-				})
-				entry = { controller, promise, users: 0 }
-				inFlight.set(key, entry)
-				const current = entry
-				void promise.then(() => {
-					if (inFlight.get(key) === current) inFlight.delete(key)
-				}, () => {
-					if (inFlight.get(key) === current) inFlight.delete(key)
-				})
-			}
-			const shared = entry
-			shared.users++
-			return new Promise((resolve, reject) => {
-				let settled = false
-				const finish = () => {
-					if (settled) return false
-					settled = true
-					signal?.removeEventListener('abort', abort)
-					shared.users--
-					if (!shared.users) {
-						if (inFlight.get(key) === shared) inFlight.delete(key)
-						shared.controller.abort()
-					}
-					return true
-				}
-				const abort = () => { if (finish()) reject(abortError()) }
-				signal?.addEventListener('abort', abort, { once: true })
-				void shared.promise.then(value => { if (finish()) resolve(value) }, error => { if (finish()) reject(error) })
-			})
-		},
-		async upload(file: File, signal?: AbortSignal): Promise<AssetReference> {
+		get revision() { return revision },
+		assetUrl,
+		async upload(file: File, signal?: AbortSignal, options?: AssetUploadOptions): Promise<AssetReference> {
 			const controller = new AbortController()
 			const abort = () => controller.abort()
 			signal?.addEventListener('abort', abort, { once: true })
@@ -134,26 +77,22 @@ export function createAssetClient(transport: AssetTransport) {
 			try {
 				if (signal?.aborted) controller.abort()
 				if (controller.signal.aborted) throw abortError()
-				const reference = await transport.upload(file, controller.signal)
+				const reference = await transport.upload(file, controller.signal, options)
 				if (controller.signal.aborted) throw abortError()
-				return { asset_id: reference.asset_id, version_id: reference.version_id }
+				return { asset_id: reference.asset_id }
 			} finally {
 				controllers.delete(controller)
 				signal?.removeEventListener('abort', abort)
 			}
 		},
-		/** Call synchronously before logout/tenant/account transitions. */
 		clearSession() {
-			inFlight.clear()
 			for (const controller of controllers) controller.abort()
-			for (const item of pending) item.reject(abortError())
-			pending = []
-			revision.value++
+			controllers.clear()
+			revision++
 		},
 	}
 }
 
-export type AssetClient = ReturnType<typeof createAssetClient>
 export const ASSET_CLIENT_KEY: InjectionKey<AssetClient> = Symbol('bagel:assets')
 
 /** Opt-in upload state; original bytes are handed unchanged to the transport. */
@@ -169,14 +108,14 @@ export function useAssetUpload() {
 		uploading.value = false
 		reference.value = undefined
 	}
-	async function upload(file: File): Promise<AssetReference> {
+	async function upload(file: File, options?: AssetUploadOptions): Promise<AssetReference> {
 		cancel()
 		if (!client) throw new Error('Asset client is not configured')
 		const current = generation
 		controller = new AbortController()
 		uploading.value = true
 		try {
-			const result = await client.upload(file, controller.signal)
+			const result = await client.upload(file, controller.signal, options)
 			if (current !== generation) throw abortError()
 			reference.value = result
 			return result
@@ -184,62 +123,40 @@ export function useAssetUpload() {
 			if (current === generation) uploading.value = false
 		}
 	}
-	const stop = client ? watch(client.revision, cancel, { flush: 'sync' }) : undefined
+	const stop = client ? watch(() => client.revision, cancel, { flush: 'sync' }) : undefined
 	onScopeDispose(() => { cancel(); stop?.() })
 	return { upload, cancel, uploading, reference }
 }
 
-/** Private resolution stays inside display primitives, not persisted domain data. */
-export function useAssetDelivery(source: MaybeRefOrGetter<AssetDeliveryRequest | undefined>) {
+/**
+ * Resolve an asset reference to a public display URL. Public-by-default means
+ * no server round-trip and no expiry: the URL is deterministic from the asset id.
+ */
+export function useAssetUrl(source: MaybeRefOrGetter<AssetDeliveryRequest | undefined>) {
 	const client = inject(ASSET_CLIENT_KEY, undefined)
 	const url = ref<string>()
 	const error = ref(false)
-	let controller: AbortController | undefined
-	let timer: ReturnType<typeof setTimeout> | undefined
-	let generation = 0
-	let retried = false
-	let invalidated = false
 
-	function cancel(keepUrl = false) {
-		generation++
-		controller?.abort()
-		clearTimeout(timer)
-		if (!keepUrl) url.value = undefined
-	}
-	async function load(refresh = false) {
-		cancel(refresh)
-		error.value = false
-		if (invalidated) return
+	watch(() => {
 		const reference = toValue(source)
-		if (!reference) return
-		if (!client) { error.value = true; return }
-		const current = generation
-		controller = new AbortController()
-		try {
-			const delivery = await client.resolve(reference, controller.signal)
-			if (current !== generation) return
-			url.value = delivery.url
-			const remaining = Date.parse(delivery.expires_at) - Date.now()
-			timer = setTimeout(() => { void load(true) }, Math.min(2_147_483_647, Math.max(1, remaining * 0.8)))
-		} catch {
-			if (current === generation) { error.value = true; url.value = undefined }
-		}
-	}
-	function onError() {
-		if (retried) { cancel(); error.value = true; return }
-		retried = true
-		void load()
-	}
-	watch(() => [toValue(source)?.asset_id, toValue(source)?.version_id, toValue(source)?.representation], () => {
-		retried = false
-		invalidated = false
-		void load()
+		return reference ? `${reference.asset_id}:${reference.representation ?? 'original'}` : ''
+	}, () => {
+		const reference = toValue(source)
+		if (!reference) { url.value = undefined; error.value = false; return }
+		if (!client) { url.value = undefined; error.value = true; return }
+		url.value = client.assetUrl(reference, reference.representation)
+		error.value = false
 	}, { immediate: true })
-	// Never automatically reauthorize old references under a different session.
-	const stop = client ? watch(client.revision, () => {
-		invalidated = true
-		cancel()
-	}, { flush: 'sync' }) : undefined
-	onScopeDispose(() => { cancel(); stop?.() })
-	return { url, error, onError }
+
+	return { url, error }
+}
+
+/**
+ * @deprecated Backward-compatible alias for ``useAssetUrl``. Public assets have
+ * no expiry, so the returned URL never needs refreshing; ``onError`` is a no-op
+ * retry hook kept for callers that expected the old grant-refresh contract.
+ */
+export function useAssetDelivery(source: MaybeRefOrGetter<AssetDeliveryRequest | undefined>) {
+	const { url, error } = useAssetUrl(source)
+	return { url, error, onError: () => { error.value = true } }
 }

package/src/components/ContextMenu.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { VirtualElement } from '@floating-ui/dom'
+import type { AlignedPlacement, AnchorPoint, DropdownItem } from './Dropdown.types'
+import { computed, ref, useSlots } from 'vue'
+import Dropdown from './Dropdown.vue'
+
+defineOptions({ inheritAttrs: false, name: 'BglContextMenu' })
+
+const props = withDefaults(defineProps<{
+	/** Declarative menu items. */
+	items?: DropdownItem[]
+	/** Optional header title shown at the top of the context menu. */
+	title?: string
+	/** Explicit viewport anchor `{ x, y, width?, height? }` for controlled mode. */
+	anchorPoint?: AnchorPoint | null
+	/** External reference element or VirtualElement. */
+	referenceEl?: Element | VirtualElement | null
+	placement?: AlignedPlacement
+	popupClass?: string
+	autoHide?: boolean
+	disabled?: boolean
+}>(), {
+	placement: 'bottom-start',
+	autoHide: true,
+	disabled: false,
+})
+
+const emit = defineEmits<{
+	show: []
+	hide: []
+	select: [value: string | number | DropdownItem, item: DropdownItem]
+}>()
+
+const shown = defineModel('shown', { type: Boolean, default: false })
+const slots = useSlots()
+const dropdownRef = ref<InstanceType<typeof Dropdown> | null>(null)
+const internalPoint = ref<AnchorPoint>({ x: 0, y: 0 })
+
+const hasTargetSlot = computed(() => Boolean(slots.target))
+const effectiveAnchorPoint = computed<AnchorPoint | null>(() => {
+	if (props.anchorPoint) return props.anchorPoint
+	if (props.referenceEl) return null
+	return internalPoint.value
+})
+
+const effectiveItems = computed<DropdownItem[]>(() => {
+	if (!props.items?.length) return []
+	if (props.title) {
+		return [{ header: props.title }, ...props.items]
+	}
+	return props.items
+})
+
+function openAt(target: AnchorPoint | MouseEvent) {
+	if (props.disabled) return
+	if ('clientX' in target && 'clientY' in target) {
+		internalPoint.value = { x: target.clientX, y: target.clientY, width: 0, height: 0 }
+	} else {
+		internalPoint.value = { ...target }
+	}
+	dropdownRef.value?.openAt(internalPoint.value)
+}
+
+function onTargetContextMenu(e: MouseEvent) {
+	if (props.disabled) return
+	e.preventDefault()
+	openAt(e)
+}
+
+function show() {
+	dropdownRef.value?.show()
+}
+
+function hide() {
+	dropdownRef.value?.hide()
+}
+
+defineExpose({ openAt, show, hide, shown })
+</script>
+
+<template>
+	<div
+		v-if="hasTargetSlot"
+		v-bind="$attrs"
+		style="display: contents"
+		@contextmenu="onTargetContextMenu"
+	>
+		<slot name="target" :open-at="openAt" :hide="hide" :shown="shown" />
+	</div>
+
+	<Dropdown
+		ref="dropdownRef"
+		v-model:shown="shown"
+		:anchor-point="effectiveAnchorPoint"
+		:reference-el="referenceEl"
+		:placement="placement"
+		:items="effectiveItems"
+		:popup-class="popupClass"
+		:auto-hide="autoHide"
+		:disabled="disabled"
+		:triggers="[]"
+		@show="emit('show')"
+		@hide="emit('hide')"
+		@select="(val, item) => emit('select', val, item)"
+	>
+		<template #default="slotProps">
+			<div v-if="title && !effectiveItems.length" class="px-05 py-025 txt11 semi opacity-5 uppercase">
+				{{ title }}
+			</div>
+			<slot v-bind="slotProps" />
+		</template>
+	</Dropdown>
+</template>

package/src/components/Dropdown.types.ts

@@ -0,0 +1,27 @@
+import type { IconType, ThemeType } from '../types'
+
+export type Side = 'top' | 'right' | 'bottom' | 'left'
+export type Alignment = 'start' | 'end'
+export type AlignedPlacement = 'auto' | Side | `${Side}-${Alignment}`
+export type TriggerEvent = 'click' | 'hover'
+
+export interface AnchorPoint {
+	x: number
+	y: number
+	width?: number
+	height?: number
+}
+
+export interface DropdownItem {
+	label?: string
+	value?: string | number
+	icon?: IconType
+	color?: ThemeType
+	danger?: boolean
+	disabled?: boolean
+	active?: boolean
+	divider?: boolean
+	header?: string
+	class?: string
+	action?: () => void
+}