@bagelink/vue 1.16.0 → 1.17.6

package/src/components/Icon/types.ts

@@ -1,7 +1,6 @@
-import type { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
+import type { MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
 
-export type FontAwesomeIcons = (typeof FONT_AWESOME_ICONS)[number]
 export type FontAwesomeBrandsIcons = (typeof FONT_AWESOME_BRANDS_ICONS)[number]
 export type MaterialIcons = (typeof MATERIAL_ICONS)[number]
 
-export type IconType = MaterialIcons | FontAwesomeIcons | FontAwesomeBrandsIcons
+export type IconType = MaterialIcons | FontAwesomeBrandsIcons

package/src/components/Image.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglImage', inheritAttrs: false })
 import { Skeleton, normalizeDimension, Icon, useImageSrc } from '../index'
+import type { AssetDeliveryRequest, AssetPurpose } from '../assets'
 import { Comment, computed, ref, useSlots, watch, type StyleValue, type VNode } from 'vue'
 
 interface ImageProps {
-	src?: string
+	src?: string | AssetDeliveryRequest
+	/** Stable asset UUID; requires an injected asset client. */
+	assetId?: string
+	versionId?: string
+	/** Server preset; width/height below control layout only. */
+	purpose?: AssetPurpose
 	pathKey?: string
 	alt?: string
 	width?: string | number
@@ -25,10 +31,17 @@ interface ImageProps {
 
 const props = defineProps<ImageProps>()
 
-const { imageSrc, loadingError } = useImageSrc(() => props.src ?? props.pathKey ?? props.modelValue)
+const { imageSrc, loadingError, onError } = useImageSrc(() => props.assetId
+	? { asset_id: props.assetId, version_id: props.versionId, representation: props.purpose }
+	: typeof props.src === 'object'
+		? { ...props.src, representation: props.purpose ?? props.src.representation }
+		: props.src ?? props.pathKey ?? props.modelValue)
 const imageLoaded = ref(false)
 
-watch(imageSrc, () => {
+watch(imageSrc, value => {
+	if (!value) imageLoaded.value = false
+})
+watch(() => [props.assetId, props.versionId, props.purpose, props.src, props.pathKey, props.modelValue], () => {
 	imageLoaded.value = false
 })
 
@@ -101,6 +114,7 @@ const imgFit = computed(() => props.fit ?? 'cover')
 			:class="[frameHasHeight ? 'absolute-fill' : 'bgl-image-frame-img--flow', { 'opacity-0': !imageLoaded }]"
 			:style="{ objectFit: imgFit, mixBlendMode: blend } as StyleValue"
 			@load="onImageLoad"
+			@error="onError"
 		>
 		<Skeleton v-if="!imageLoaded && !loadingError" class="absolute-fill" />
 		<div v-else-if="loadingError && !gradientCss" class="flex-center absolute-fill error-image">
@@ -120,6 +134,7 @@ const imgFit = computed(() => props.fit ?? 'cover')
 			:height="normalizeDimension(height)"
 				:class="{ 'opacity-0': !imageLoaded }"
 				@load="onImageLoad"
+				@error="onError"
 		>
 		<Skeleton
 				v-if="!imageLoaded && !loadingError"
@@ -144,6 +159,7 @@ const imgFit = computed(() => props.fit ?? 'cover')
 			:class="{ 'opacity-0': !imageLoaded }"
 			:style="{ objectFit: imgFit }"
 			@load="onImageLoad"
+			@error="onError"
 		>
 		<div v-if="loadingError" class="flex-center absolute-fill error-image">
 			<Icon name="broken_image" />

package/src/components/draggable/useDraggable.ts

@@ -1,4 +1,5 @@
 import { ref, computed, toValue, getCurrentInstance, onUnmounted, type MaybeRefOrGetter } from 'vue'
+import { createPointerSession } from '../../composables/usePointerSession'
 import { insertionIndexToFinalIndex } from './reorder'
 
 export interface DraggableEvent extends MouseEvent {
@@ -37,10 +38,9 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 	const dropIndicator = ref<HTMLElement | null>(null)
 	const dropTarget = ref<DraggableElement | null>(null)
 
-	// Only run in browser environment
 	const isBrowser = typeof window !== 'undefined'
+	const pointerSession = createPointerSession()
 
-	// Move style injection into setup
 	if (isBrowser) {
 		const existingStyle = document.getElementById('draggable-style')
 		if (!existingStyle) {
@@ -83,8 +83,6 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 	function appendToTopLayer(element: HTMLElement) {
 		document.body.appendChild(element)
 		element.setAttribute('popover', 'manual')
-		// The browser's popover UA styles use `inset: 0; margin: auto`, which
-		// recentres fixed-position drag helpers and offsets them from the cursor.
 		element.style.inset = 'auto'
 		element.style.margin = '0'
 		element.style.padding = '0'
@@ -128,9 +126,8 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		line.style.background = 'var(--primary-color, #0066ff)'
 		line.style.boxShadow = '0 0 4px rgba(0, 102, 255, 0.5)'
 		line.style.transition = 'all 0.15s ease'
-		line.style.display = 'none' // Start hidden
+		line.style.display = 'none'
 
-		// Add the dot indicator
 		const dot = document.createElement('div')
 		dot.style.position = 'absolute'
 		dot.style.left = '-4px'
@@ -153,7 +150,6 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		dropIndicator.value.style.width = `${rect.width}px`
 		dropIndicator.value.style.left = `${rect.left}px`
 
-		// Move indicator to match the actual drop position
 		if (isAfter) {
 			dropIndicator.value.style.top = `${rect.bottom}px`
 		} else {
@@ -180,15 +176,6 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		return 2
 	}
 
-	// function resetDragStyles(dragEl: DraggableElement) {
-	// 	if (defaultOptions.value.mode === 'ghost') {
-	// 		dragEl.style.opacity = ''
-	// 		dragEl.style.transform = ''
-	// 	} else {
-	// 		dragEl.style.opacity = ''
-	// 	}
-	// }
-
 	function cacheElementPositions(draggedList: DraggableElement[]) {
 		POSITION_CACHE.clear()
 		draggedList.forEach((el, index) => {
@@ -203,11 +190,9 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 	function calculateDropIndex(e: MouseEvent, draggedList: DraggableElement[], dragIndex: number, newDropTarget: DraggableElement) {
 		const now = Date.now()
 		if (now - lastUpdateTime < UPDATE_THRESHOLD) {
-			// Return last calculated index if we're within threshold
 			return lastDropIndex !== -1 ? lastDropIndex : dragIndex
 		}
 
-		// Use cached positions if available, otherwise calculate new ones
 		if (POSITION_CACHE.size === 0) {
 			cacheElementPositions(draggedList)
 		}
@@ -221,18 +206,14 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		const elementHeight = targetPos.bottom - targetPos.top
 		const relativeY = mouseY - targetPos.top
 
-		// Calculate sticky zones
 		const upperSticky = elementHeight * 0.3
 		const lowerSticky = elementHeight * 0.7
 
 		let dropIndex = targetIndex
 
-		// Different behavior based on context
 		if (targetIndex === dragIndex) {
-			// On original element - require significant movement
 			if (relativeY > lowerSticky) { dropIndex += 1 }
 		} else if (targetIndex === lastDropIndex) {
-			// On previously targeted element - use sticky zones
 			if (targetIndex > dragIndex) {
 				if (relativeY < upperSticky) { dropIndex = targetIndex }
 				else { dropIndex = targetIndex + 1 }
@@ -241,18 +222,16 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 				else { dropIndex = targetIndex }
 			}
 		} else {
-			// On new element - use 60/40 split
 			if (relativeY > elementHeight * 0.6) { dropIndex += 1 }
 		}
 
-		// Update state
 		lastDropIndex = dropIndex
 		lastUpdateTime = now
 
 		return dropIndex
 	}
 
-	function cleanup() {
+	function resetVisualState() {
 		if (!isBrowser) { return }
 
 		document.removeEventListener('mousemove', onDragMove)
@@ -268,7 +247,6 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		ghostElement.value = null
 		dropIndicator.value = null
 
-		// Reset all elements
 		if (dragElement.value) {
 			const list = dragElement.value.__drag_list
 			list?.forEach((el) => {
@@ -299,58 +277,85 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		POSITION_CACHE.clear()
 	}
 
+	function cleanup() {
+		pointerSession.cancel()
+		resetVisualState()
+	}
+
 	function onKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape' && isDragging.value) {
 			cleanup()
 		}
 	}
 
-	function onDragStart(e: MouseEvent) {
-		if (!isBrowser || isDragging.value || defaultOptions.value.disabled) { return }
-		if (e.button !== 0) { return } // Only left mouse button
-		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) { return }
-
-		const dragEl = findDraggableParent(e.target as Element)
-		if (!dragEl || dragEl.dataset.draggable === 'false' || e.currentTarget !== dragEl) { return }
-
-		// If handle is specified, check if clicked element matches
-		if (defaultOptions.value.handle) {
-			const handleEl = (e.target as Element).closest(defaultOptions.value.handle)
-			if (!handleEl || !dragEl.contains(handleEl)) { return }
-		}
-
-		e.preventDefault()
+	function beginDrag(dragEl: DraggableElement, clientX: number, clientY: number, rawEvent: MouseEvent) {
 		isDragging.value = true
 		dragElement.value = dragEl
 
-		// Store initial positions
-		startX = e.clientX
-		startY = e.clientY
+		startX = clientX
+		startY = clientY
 		const rect = dragEl.getBoundingClientRect()
 		initialX = rect.left
 		initialY = rect.top
 
-		// Create ghost element that follows mouse
 		ghostElement.value = createGhost(dragEl)
 		if (ghostElement.value) {
 			ghostElement.value.style.left = `${initialX}px`
 			ghostElement.value.style.top = `${initialY}px`
 		}
 
-		// Only create drop indicator in line mode
 		if (defaultOptions.value.mode === 'line') {
 			dropIndicator.value = createDropIndicator()
 		}
 
-		// Apply mode-specific styles and get shift amount
 		dragEl.classList.add(defaultOptions.value.dragClass!)
 		shiftAmount = defaultOptions.value.mode === 'ghost'
 			? handleGhostMode(dragEl)
 			: handleLineMode(dragEl)
 
-		defaultOptions.value.onStart?.(e)
+		defaultOptions.value.onStart?.(rawEvent)
+	}
+
+	function onPointerStart(e: PointerEvent) {
+		if (!isBrowser || isDragging.value || defaultOptions.value.disabled) { return }
+		if (e.button !== 0 || e.isPrimary === false) { return }
+		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) { return }
+
+		const dragEl = findDraggableParent(e.target as Element)
+		if (!dragEl || dragEl.dataset.draggable === 'false' || e.currentTarget !== dragEl) { return }
+
+		if (defaultOptions.value.handle) {
+			const handleEl = (e.target as Element).closest(defaultOptions.value.handle)
+			if (!handleEl || !dragEl.contains(handleEl)) { return }
+		}
+
+		beginDrag(dragEl, e.clientX, e.clientY, e)
+
+		pointerSession.start(e, {
+			cursor: 'grabbing',
+			target: dragEl,
+			onMove: next => onDragMove(next),
+			onEnd: next => onDragEnd(next),
+			onCancel: () => resetVisualState(),
+		})
+	}
+
+	function onDragStart(e: MouseEvent) {
+		if (!isBrowser || isDragging.value || defaultOptions.value.disabled) { return }
+		if (e.button !== 0) { return }
+		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) { return }
+
+		const dragEl = findDraggableParent(e.target as Element)
+		if (!dragEl || dragEl.dataset.draggable === 'false' || e.currentTarget !== dragEl) { return }
+
+		if (defaultOptions.value.handle) {
+			const handleEl = (e.target as Element).closest(defaultOptions.value.handle)
+			if (!handleEl || !dragEl.contains(handleEl)) { return }
+		}
+
+		e.preventDefault()
+		beginDrag(dragEl, e.clientX, e.clientY, e)
 
-		// Prevent text selection during drag
 		if (isBrowser) {
 			document.body.style.userSelect = 'none'
 			document.body.style.webkitUserSelect = 'none'
@@ -383,18 +388,15 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 			const scrollParent = findScrollParent(dragElement.value!) as HTMLElement
 			const rect = scrollParent.getBoundingClientRect()
 			const margin = 50
-			const speed = Math.min(20, rect.height * 0.1) // Adjust speed based on container height
+			const speed = Math.min(20, rect.height * 0.1)
 
 			const { scrollTop } = scrollParent
 			const maxScroll = scrollParent.scrollHeight - scrollParent.clientHeight
 
-			// Use requestAnimationFrame for smoother scrolling
 			if (e.clientY - rect.top < margin) {
-				const newScroll = Math.max(0, scrollTop - speed)
-				scrollParent.scrollTop = newScroll
+				scrollParent.scrollTop = Math.max(0, scrollTop - speed)
 			} else if (rect.bottom - e.clientY < margin) {
-				const newScroll = Math.min(maxScroll, scrollTop + speed)
-				scrollParent.scrollTop = newScroll
+				scrollParent.scrollTop = Math.min(maxScroll, scrollTop + speed)
 			}
 		})
 	}
@@ -402,23 +404,19 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 	function onDragMove(e: MouseEvent) {
 		if (!isDragging.value || !dragElement.value) { return }
 
-		// Move ghost element with cursor
 		if (ghostElement.value) {
 			const dx = e.clientX - startX
 			const dy = e.clientY - startY
 			ghostElement.value.style.transform = `translate3d(${dx}px, ${dy}px, 0)`
 		}
 
-		// Get the draggable list and current positions
 		const list = dragElement.value.__drag_list!
 		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
 		const dragIndex = draggedList.indexOf(dragElement.value)
 
-		// Find the element at cursor position
 		const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY)
 		const newDropTarget = findDraggableParent(elementAtPoint)
 
-		// Validate drop target
 		if (!newDropTarget || !draggedList.includes(newDropTarget)) {
 			dropTarget.value = null
 			if (dropIndicator.value) {
@@ -429,23 +427,19 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 
 		const dropIndex = calculateDropIndex(e, draggedList, dragIndex, newDropTarget)
 
-		// Only update if position actually changed
 		if (dropTarget.value !== newDropTarget || dropTarget.value.__intended_index !== dropIndex) {
 			dropTarget.value = newDropTarget
 			dropTarget.value.__intended_index = dropIndex
 
-			// Update line indicator
 			if (dropIndicator.value && defaultOptions.value.mode === 'line') {
 				const targetIndex = draggedList.indexOf(newDropTarget)
 				const isAfter = dropIndex > targetIndex
 				updateDropIndicator(newDropTarget, isAfter)
 			}
 
-			// Update element positions
 			const finalIndex = insertionIndexToFinalIndex(dragIndex, dropIndex, draggedList.length)
 			const shift = shiftAmount
 			draggedList.forEach((el) => {
-				// Use transform3d for better performance
 				el.style.transition = `transform ${defaultOptions.value.animation}ms cubic-bezier(0.2, 0, 0, 1)`
 				el.style.transform = 'translate3d(0, 0, 0)'
 
@@ -473,19 +467,19 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 	}
 
 	function onDragEnd(e: MouseEvent) {
-		if (defaultOptions.value.disabled) { cleanup(); return }
+		if (defaultOptions.value.disabled) { resetVisualState(); return }
 		if (isDragging.value) {
 			lastUpdateTime = 0
 			onDragMove(e)
 		}
 		if (!isDragging.value || !dragElement.value || !dropTarget.value) {
-			cleanup()
+			resetVisualState()
 			return
 		}
 
 		const list = dragElement.value.__drag_list
 		if (!list || !list.length) {
-			cleanup()
+			resetVisualState()
 			return
 		}
 
@@ -506,12 +500,12 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 			dragEvent.newIndex = actualDropIndex
 			dragEvent.item = defaultOptions.value.items?.[actualDragIndex] ?? dragElement.value.__drag_data
 
-			cleanup()
+			resetVisualState()
 			defaultOptions.value.onEnd?.(dragEvent)
 			return
 		}
 
-		cleanup()
+		resetVisualState()
 	}
 
 	function onTouchStart(e: TouchEvent) {
@@ -528,38 +522,10 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		const { handle } = defaultOptions.value
 		if (handle && !target.closest(handle)) { return }
 
-		e.preventDefault() // Prevent scrolling
-		isDragging.value = true
-		dragElement.value = draggableParent
-
-		startX = touch.clientX
-		startY = touch.clientY
-		const rect = draggableParent.getBoundingClientRect()
-		initialX = rect.left
-		initialY = rect.top
-
-		// Rest of the setup same as onDragStart...
-		ghostElement.value = createGhost(draggableParent)
-		if (ghostElement.value) {
-			ghostElement.value.style.left = `${initialX}px`
-			ghostElement.value.style.top = `${initialY}px`
-		}
-
-		// Only create drop indicator in line mode
-		if (defaultOptions.value.mode === 'line') {
-			dropIndicator.value = createDropIndicator()
-		}
-
-		// Apply mode-specific styles and get shift amount
-		dragElement.value.classList.add(defaultOptions.value.dragClass!)
-		shiftAmount = defaultOptions.value.mode === 'ghost'
-			? handleGhostMode(dragElement.value)
-			: handleLineMode(dragElement.value)
-
-		defaultOptions.value.onStart?.(e as unknown as MouseEvent)
+		e.preventDefault()
+		beginDrag(draggableParent, touch.clientX, touch.clientY, e as unknown as MouseEvent)
 
 		if (isBrowser) {
-			// Prevent text selection during drag
 			document.body.style.userSelect = 'none'
 			document.body.style.webkitUserSelect = 'none'
 			document.body.style.cursor = 'grabbing'
@@ -573,7 +539,7 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 	}
 
 	function onTouchMove(e: TouchEvent) {
-		e.preventDefault() // Prevent scrolling
+		e.preventDefault()
 		const touch = e.touches[0]
 		if (!touch) { return }
 
@@ -607,7 +573,6 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		if (!isBrowser) { return }
 		cleanupFn?.()
 
-		// Reset state
 		isDragging.value = false
 		dragElement.value = null
 		ghostElement.value = null
@@ -633,6 +598,7 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 
 				el.__drag_data = defaultOptions.value.items?.[el.__drag_index]
 
+				el.addEventListener('pointerdown', onPointerStart as EventListener)
 				el.addEventListener('mousedown', onDragStart)
 				el.addEventListener('touchstart', onTouchStart)
 			}
@@ -641,6 +607,7 @@ export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 		cleanupFn = () => {
 			cleanup()
 			elements.forEach((el) => {
+				el.removeEventListener('pointerdown', onPointerStart as EventListener)
 				el.removeEventListener('mousedown', onDragStart)
 				el.removeEventListener('touchstart', onTouchStart)
 				delete el.__drag_group

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

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { Dropdown, EmptyState, Icon, TabsNav, TextInput } from '../../../index'
-import { FONT_AWESOME_BRANDS_ICONS, FONT_AWESOME_ICONS, MATERIAL_ICONS } from '../../Icon/constants'
+import { FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from '../../Icon/constants'
 
-defineProps<{
+withDefaults(defineProps<{
 	modelValue?: string
 	label?: string
 	placeholder?: string
-}>()
+	emptyLabel?: string
+	searchPlaceholder?: string
+	noResultsText?: string
+}>(), {
+	emptyLabel: 'Choose an icon',
+	searchPlaceholder: 'Search icons',
+	noResultsText: 'No icons found',
+})
 
 const emit = defineEmits<{
 	'update:modelValue': [value: string | undefined]
@@ -15,20 +22,18 @@ const emit = defineEmits<{
 
 const dropdown = ref<InstanceType<typeof Dropdown> | null>(null)
 const search = ref('')
-const activeTab = ref<'material' | 'fa' | 'brands'>('material')
+const activeTab = ref<'material' | 'brands'>('material')
 const visibleCount = ref(80)
 const tabsGroup = `icon-picker-${Math.random().toString(36).slice(2)}`
 let batchTimer: ReturnType<typeof setTimeout> | undefined
 
 const tabs = [
 	{ label: 'Material', value: 'material' },
-	{ label: 'FA', value: 'fa' },
 	{ label: 'Brands', value: 'brands' },
 ]
 
 const iconSets = {
 	material: MATERIAL_ICONS,
-	fa: FONT_AWESOME_ICONS,
 	brands: FONT_AWESOME_BRANDS_ICONS,
 }
 
@@ -86,7 +91,7 @@ onBeforeUnmount(() => {
 						<Icon v-if="modelValue" :icon="modelValue" :size="1.1" />
 						<span v-else class="txt11 opacity-4">—</span>
 					</span>
-					<span class="txt12 flex-grow opacity-6 ellipsis-1">{{ modelValue || placeholder || 'Choose an icon' }}</span>
+					<span class="txt12 flex-grow opacity-6 ellipsis-1">{{ modelValue || placeholder || emptyLabel }}</span>
 					<Icon v-if="modelValue" icon="close" :size="0.9" class="opacity-5 hover-opacity-10" @click.stop="clear" />
 					<Icon :icon="shown ? 'expand_less' : 'expand_more'" :size="1" class="opacity-4" />
 				</div>
@@ -94,7 +99,7 @@ onBeforeUnmount(() => {
 
 			<div class="w-300px overflow-hidden">
 				<TabsNav v-model="activeTab" :tabs="tabs" :group="tabsGroup" flat class="round-none w-100p mx-0 txt-center" />
-				<TextInput v-model="search" icon-start="search" placeholder="Search icons" class="mb-0" />
+				<TextInput v-model="search" icon-start="search" :placeholder="searchPlaceholder" class="mb-0" />
 				<div class="grid grid-wrap-7 gap-025 p-05 overflow max-h-300px">
 					<div
 						v-for="icon in visibleIcons"
@@ -107,7 +112,7 @@ onBeforeUnmount(() => {
 						<Icon :icon="icon" :size="1.2" />
 					</div>
 				</div>
-				<EmptyState v-if="visibleIcons.length === 0" compact icon="none" description="No icons found" />
+				<EmptyState v-if="visibleIcons.length === 0" compact icon="none" :description="noResultsText" />
 			</div>
 		</Dropdown>
 	</div>