@bagelink/vue 1.15.668 → 1.17.2

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/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/form-flow/form-flow.ts

@@ -17,6 +17,10 @@ import {
 	isCustomFormFieldType,
 	warnMissingCustomFormField,
 } from './custom-field-registry'
+import type {
+	JSONSchemaObject as FormJSONSchemaObject,
+	JSONSchemaProperty as FormJSONSchemaProperty,
+} from './schema-fields'
 
 // ============================================================================
 // Core Types
@@ -412,6 +416,8 @@ export const $ = {
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
 			style?: string
+			/** Upload to the immutable assets catalog and persist a `{asset_id, version_id}` pin. */
+			assetMode?: boolean
 		}),
 		config?: BaseFieldConfig & {
 			multiple?: boolean
@@ -428,6 +434,8 @@ export const $ = {
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
 			style?: string
+			/** Upload to the immutable assets catalog and persist a `{asset_id, version_id}` pin. */
+			assetMode?: boolean
 		}
 	): FieldBuilder<string | string[]> {
 		return new Field('upload', parseArgs(labelOrConfig, config))
@@ -806,8 +814,10 @@ export function multiStepSchema<T extends Record<string, any> = Record<string, a
 // JSONSchema Import
 // ============================================================================
 
-interface JSONSchemaProperty {
-	'type'?: string
+type JSONSchemaProperty = Omit<
+	FormJSONSchemaProperty,
+	'items' | 'properties' | 'x-field-type'
+> & {
 	'title'?: string
 	'description'?: string
 	'default'?: any
@@ -855,6 +865,7 @@ interface JSONSchemaProperty {
 	'x-placeholder'?: string
 	'x-select-multiselect'?: boolean
 	'x-select-searchable'?: boolean
+	'x-asset'?: boolean
 	'x-radio-inline'?: boolean
 	'x-radio-align'?: 'start' | 'center' | 'end'
 	'x-radio-text-align'?: 'left' | 'center' | 'right'
@@ -929,8 +940,8 @@ function normalizeOptionsSourceResponse(
 	})
 }
 
-interface JSONSchemaObject {
-	'type'?: string
+type JSONSchemaObject = Omit<FormJSONSchemaObject, 'properties'> & {
+	'type': 'object'
 	'title'?: string
 	'properties'?: Record<string, JSONSchemaProperty>
 	'required'?: string[]
@@ -1039,8 +1050,8 @@ function resolveUnionType(prop: JSONSchemaProperty, _rootSchema: JSONSchemaObjec
 	// Prefer object > array > string > number > boolean
 	const typeOrder = ['object', 'array', 'string', 'number', 'integer', 'boolean']
 	const sorted = nonNullTypes.sort((a, b) => {
-		const aIdx = typeOrder.indexOf(a.type || 'string')
-		const bIdx = typeOrder.indexOf(b.type || 'string')
+		const aIdx = typeOrder.indexOf(Array.isArray(a.type) ? (a.type[0] ?? 'string') : (a.type ?? 'string'))
+		const bIdx = typeOrder.indexOf(Array.isArray(b.type) ? (b.type[0] ?? 'string') : (b.type ?? 'string'))
 		return aIdx - bIdx
 	})
 
@@ -1092,8 +1103,12 @@ function createFieldFromProperty(
 	const xUi = resolvedProp['x-ui'] || {}
 	// Field type may be declared either as `x-ui.fieldType` (this module's own
 	// round-trip) or the flat `x-field-type` (FormBuilder designer). Multiselect
-	// is a `select` flagged multi.
+	// is a `select` flagged multi. `x-asset` is an immutable-assets file field
+	// whose JSON-schema type is `object` (the pin), not `string`.
 	let fieldType = xUi.fieldType || resolvedProp['x-field-type'] || inferFieldType(resolvedProp)
+	if (resolvedProp['x-asset'] === true && fieldType !== 'file' && fieldType !== 'upload') {
+		fieldType = 'file'
+	}
 	if (fieldType === 'select' && resolvedProp['x-select-multiselect']) fieldType = 'multiselect'
 
 	// Designer-authored options: [{label,value}] pairs preserve labels (raw
@@ -1232,6 +1247,10 @@ function createFieldFromProperty(
 			break
 		case 'file':
 		case 'upload':
+			// `x-asset` marks a field as managed by the immutable assets catalog:
+			// the widget uploads and persists a `{asset_id, version_id}` pin, and
+			// the JSON-schema type is `object`, not `string`.
+			if (resolvedProp['x-asset'] === true) config.assetMode = true
 			field = $.upload(config)
 			break
 		case 'array': {

package/src/form-flow/schema-fields.ts

@@ -95,6 +95,8 @@ export interface FormField {
 	fileTheme?: 'dropzone' | 'basic'
 	fileShowIcon?: boolean
 	fileIcon?: string
+	/** Upload to the immutable assets catalog; persist a `{asset_id, version_id}` pin. */
+	assetMode?: boolean
 	dateEnableTime?: boolean
 	dateMin?: string
 	dateMax?: string
@@ -163,6 +165,7 @@ export interface JSONSchemaProperty {
 	'x-file-theme'?: 'dropzone' | 'basic'
 	'x-file-show-icon'?: boolean
 	'x-file-icon'?: string
+	'x-asset'?: boolean
 	'x-date-enable-time'?: boolean
 	'x-date-min'?: string
 	'x-date-max'?: string
@@ -351,7 +354,26 @@ export function fieldsToSchema(
 					prop.type = 'string'
 					break
 				case 'file':
-					if (field.fileMultiple === true) {
+					if (field.assetMode === true) {
+						// Immutable assets catalog: persist a `{asset_id, version_id}` pin.
+						// The JSON-schema type is `object` (the pin), and `x-asset` is the
+						// authoritative marker — never a `string` URL.
+						const assetRef = {
+							type: 'object',
+							properties: {
+								asset_id: { type: 'string', format: 'uuid' },
+								version_id: { type: 'string', format: 'uuid' },
+							},
+							required: ['asset_id', 'version_id'],
+						}
+						if (field.fileMultiple === true) {
+							prop.type = 'array'
+							prop.items = assetRef
+						} else {
+							Object.assign(prop, assetRef)
+						}
+						prop['x-asset'] = true
+					} else if (field.fileMultiple === true) {
 						prop.type = 'array'
 						prop.items = { type: 'string' }
 					} else {

package/src/index.ts

@@ -1,4 +1,7 @@
 export * from './components'
+export * from './assets'
+export * from './assetTransport'
+export { default as AssetPreview } from './components/lightbox/AssetPreview.vue'
 export * from './composables'
 // Dialog (native <dialog> based)
 export * from './dialog'

package/src/types/BagelForm.ts

@@ -192,6 +192,8 @@ export interface UploadInputValueObject {
 }
 
 export interface UploadInputProps extends BagelInputShellProps {
+	/** Opt-in stable reference output; defaults to legacy path-key behavior. */
+	assetMode?: boolean
 	id?: string
 	name?: string
 	label?: string
@@ -200,7 +202,7 @@ export interface UploadInputProps extends BagelInputShellProps {
 	 * Path-key string(s). Legacy/migrated records may also provide an image object
 	 * (e.g. `{ imageURL, imageName, extension, altText }`); it is normalized internally.
 	 */
-	modelValue?: string | string[] | UploadInputValueObject | (string | UploadInputValueObject)[]
+	modelValue?: string | string[] | UploadInputValueObject | import('../assets').AssetReference | (string | UploadInputValueObject | import('../assets').AssetReference)[]
 	/** Optional upload handler. When omitted, the shared file-storage uploader is used. */
 	upload?: (file: File) => Promise<string>
 	width?: string