@fabrika/annotations 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Contember Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @fabrika/annotations
+
+React annotation state, text/block/image-region locators, editors, popovers and
+markdown serialization. No Bun runtime, canvas compiler, revision store or
+question/response state is required. Preact hosts can map React imports to
+`preact/compat`.
+
+## State and persistence
+
+```tsx
+import {
+	AnnotationHostContext,
+	AnnotationProvider,
+	useAnnotations,
+} from '@fabrika/annotations'
+import type { AnnotationState } from '@fabrika/annotations'
+
+const drafts = new Map<string, AnnotationState>()
+const loadState = async (scope: string) => drafts.get(scope) ?? null
+const saveState = (scope: string, state: AnnotationState) => {
+	drafts.set(scope, state)
+}
+
+function Notes() {
+	const { generalNote, setGeneralNote } = useAnnotations()
+	return (
+		<textarea
+			value={generalNote}
+			onChange={(event) => setGeneralNote(event.currentTarget.value)}
+		/>
+	)
+}
+
+export function Review() {
+	return (
+		<AnnotationHostContext.Provider
+			value={{
+				sessionId: 'review',
+				isShared: false,
+				fsAvailable: false,
+				uploadUrl: null,
+			}}
+		>
+			<AnnotationProvider
+				scope="review:image-1"
+				loadState={loadState}
+				saveState={saveState}
+			>
+				<Notes />
+			</AnnotationProvider>
+		</AnnotationHostContext.Provider>
+	)
+}
+```
+
+`scope` identifies one draft. Changing it resets the draft and cancels stale loads.
+The host supplies stable `loadState` and `saveState` callbacks. Persisted state
+contains only `annotations` and `generalNote`; remote annotations are merged for
+display but are not saved as local annotations.
+
+Hosts with their own persistence coordinator can use `useAnnotationState` with
+controlled state and provide its result through `AnnotationCtx.Provider`.
+
+`AnnotationHost` declares upload and file capabilities. It does not load canvas
+modules. `findAnnotationElement(annotation, root)` accepts a host-selected DOM
+root. The optional `canvasFile` annotation metadata is retained for existing
+serialized records; this package does not interpret canvas navigation or revisions.
+
+## Bundling and styles
+
+An annotation locator implements `AnnotationTarget<L>`: `parse`, `format` and
+`find`, with optional `restore` and `describe`. Text, document blocks and image
+regions are included. Creation and lookup must use the same selector.
+
+For one browser bundle, import the package normally. For multiple independently
+built bundles, externalize `@fabrika/annotations/runtime` in **all** of them and
+map it to one shared runtime bundle. That module owns annotation, session and host
+contexts. Never inline a second copy into the components bundle.
+
+Import `@fabrika/annotations/styles.css` into a Tailwind v4 stylesheet to scan the
+surface classes. The host supplies theme tokens; the canvas kernel provides its
+own theme through `@fabrika/canvas-kernel/styles.css`.

package/index.ts

@@ -0,0 +1,55 @@
+export { AnnotationCtx, AnnotationHostContext, SessionContext, useAnnotationHost, useAnnotations } from '@fabrika/annotations/runtime'
+export { extractContext, formatSnippetInContext } from './src/annotationContext'
+export {
+	ANNOTATABLE_SELECTOR,
+	ANNOTATION_TARGETS,
+	BLOCK_SELECTOR,
+	describeSnippet,
+	findAnnotationElement,
+	findSnippetElement,
+	getBlockSnippet,
+	restoreAnnotationTargets,
+} from './src/annotationDom'
+export { AnnotationDraftFooter } from './src/AnnotationDraftFooter'
+export type { AnnotationDraftFooterProps } from './src/AnnotationDraftFooter'
+export { AnnotationEditor, AttachButton, ImageThumbnails, imageToUrl } from './src/AnnotationEditor'
+export { AnnotationList } from './src/AnnotationList'
+export type { AnnotationListProps } from './src/AnnotationList'
+export { renderAnnotation } from './src/annotationMarkdown'
+export type { RenderableAnnotation } from './src/annotationMarkdown'
+export { AnnotationProvider } from './src/AnnotationProvider'
+export type { AnnotationProviderProps } from './src/AnnotationProvider'
+export { sealTarget } from './src/annotationTarget'
+export type { AnnotationTarget, SealedAnnotationTarget, TargetAnnotation } from './src/annotationTarget'
+export { blockTarget } from './src/blockTarget'
+export type { BlockLocator } from './src/blockTarget'
+export { renameMarkId, restoreMarks, setMarkActive, unwrapMarks, updateAllMarkStates, wrapRangeWithMark } from './src/highlightRange'
+export { AnnotationCreatePopover, AnnotationEditPopover, AnnotationPopover, Popover } from './src/Popover'
+export {
+	createRegionOverlay,
+	describeRegion,
+	findRegionHost,
+	isDrawableRegion,
+	REGION_HOST_ATTR,
+	REGION_UNITS,
+	regionBetween,
+	regionPointIn,
+	regionStyle,
+	regionTarget,
+} from './src/regionTarget'
+export type { RegionBox, RegionLocator, RegionPoint, RegionShape } from './src/regionTarget'
+export type {
+	Annotation,
+	AnnotationAttachment,
+	AnnotationAuthor,
+	AnnotationContext,
+	AnnotationContextValue,
+	AnnotationHost,
+	AnnotationState,
+} from './src/runtime'
+export { textTarget } from './src/textTarget'
+export type { TextLocator } from './src/textTarget'
+export { useAnnotationState } from './src/useAnnotationState'
+export { useRegionAnnotation } from './src/useRegionAnnotation'
+export { useTextAnnotation } from './src/useTextAnnotation'
+export { autoResizeTextarea, fileAnnotationPath, generateAnnotationId, hostAcceptsUploads, RESPONSE_ANNOTATION_PATH } from './src/utils'

package/package.json

@@ -0,0 +1,53 @@
+{
+	"name": "@fabrika/annotations",
+	"version": "0.2.0",
+	"type": "module",
+	"description": "React annotation state, text/block/region locators, editor and feedback surface.",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/contember/fabrika-platform.git",
+		"directory": "packages/annotations"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"index.ts",
+		"src",
+		"!src/**/*.test.ts",
+		"!src/**/*.test.tsx"
+	],
+	"exports": {
+		".": {
+			"bun": "./index.ts",
+			"types": "./index.ts",
+			"default": "./index.ts"
+		},
+		"./runtime": {
+			"bun": "./src/runtime.ts",
+			"types": "./src/runtime.ts",
+			"default": "./src/runtime.ts"
+		},
+		"./styles.css": "./src/styles.css",
+		"./testing/dom.ts": {
+			"bun": "./src/testing/dom.ts",
+			"types": "./src/testing/dom.ts",
+			"default": "./src/testing/dom.ts"
+		}
+	},
+	"scripts": {
+		"typecheck": "tsc --noEmit",
+		"test": "bun test"
+	},
+	"peerDependencies": {
+		"@happy-dom/global-registrator": "^20.11.2",
+		"react": ">=18",
+		"react-dom": ">=18"
+	},
+	"peerDependenciesMeta": {
+		"@happy-dom/global-registrator": {
+			"optional": true
+		}
+	}
+}

package/src/AnnotationDraftFooter.tsx

@@ -0,0 +1,84 @@
+import type React from 'react'
+import { useAnnotations } from './AnnotationProvider'
+import { autoResizeTextarea } from './utils'
+
+/**
+ * The foot of a draft: the note that belongs to no one annotation, and the
+ * action that sends the draft off.
+ *
+ * What counts as content, and what the payload looks like, is the host's —
+ * hence `hasContent` and a bare `onSubmit`. The two slots are where a host
+ * hangs whatever else its submit step needs (a preview button, a validation
+ * notice) without this component learning about it.
+ */
+export interface AnnotationDraftFooterProps {
+	/** Whether the draft says anything. Hosts count more than annotations and
+	 *  the general note, so they decide. */
+	hasContent: boolean
+	onSubmit: () => void
+	/** Submitting an empty draft — an explicit "nothing to say", not a no-op. */
+	onSubmitEmpty: () => void
+	/** Sits between the note and the actions: validation, status, a warning. */
+	notice?: React.ReactNode
+	/** Sits left of the submit button, sharing the row. */
+	secondaryAction?: React.ReactNode
+	placeholder?: string
+	submitLabel?: string
+	emptyLabel?: string
+}
+
+export function AnnotationDraftFooter({
+	hasContent,
+	onSubmit,
+	onSubmitEmpty,
+	notice,
+	secondaryAction,
+	placeholder = 'General notes...',
+	submitLabel = 'Submit',
+	emptyLabel = 'Submit without feedback',
+}: AnnotationDraftFooterProps) {
+	const { generalNote, setGeneralNote } = useAnnotations()
+
+	return (
+		<>
+			{/* General note — seamless */}
+			<div className="border-t border-border-subtle px-4 py-3 flex-shrink-0">
+				<textarea
+					value={generalNote}
+					onChange={(e) => setGeneralNote(e.currentTarget.value)}
+					className="w-full bg-transparent text-[13px] font-body text-text-primary resize-none leading-relaxed p-0 border-none ring-0 shadow-none outline-none focus:outline-none focus:ring-0 focus:border-none placeholder:text-text-disabled min-h-[40px]"
+					placeholder={placeholder}
+					onInput={(e) => autoResizeTextarea(e.currentTarget, 40)}
+					ref={(el) => {
+						if (el) autoResizeTextarea(el, 40)
+					}}
+				/>
+			</div>
+
+			{notice}
+
+			<div className="px-4 py-3 border-t border-border-subtle flex-shrink-0">
+				{hasContent
+					? (
+						<div className="flex gap-2">
+							{secondaryAction}
+							<button
+								onClick={onSubmit}
+								className="flex-1 py-2 rounded-lg font-body text-[13px] font-medium transition-all bg-btn-primary text-btn-primary-text hover:opacity-90 hover:-translate-y-px shadow-sm"
+							>
+								{submitLabel}
+							</button>
+						</div>
+					)
+					: (
+						<button
+							onClick={onSubmitEmpty}
+							className="w-full py-2 rounded-lg font-body text-[13px] font-medium border border-border-medium text-text-secondary hover:text-text-primary hover:border-border-hover hover:bg-bg-input transition-all"
+						>
+							{emptyLabel}
+						</button>
+					)}
+			</div>
+		</>
+	)
+}

package/src/AnnotationEditor.tsx

@@ -0,0 +1,393 @@
+import { type AnnotationHost, useAnnotationHost } from '@fabrika/annotations/runtime'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { autoResizeTextarea, hostAcceptsUploads } from './utils'
+
+interface AnnotationEditorProps {
+	note: string
+	onNoteChange: (note: string) => void
+	images: string[]
+	onAddImage: (path: string) => void
+	onRemoveImage: (path: string) => void
+	sessionId: string
+
+	placeholder?: string
+	autoFocus?: boolean
+	autoResize?: boolean
+	readOnly?: boolean
+	onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+	onTextareaClick?: (e: React.MouseEvent<HTMLTextAreaElement>) => void
+	textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null>
+	textareaClassName?: string
+	textareaStyle?: React.CSSProperties
+	minHeight?: number
+	/** "always" (default), "on-focus" (sidebar), or "none" (popover — use openFilePickerRef) */
+	attachButton?: 'always' | 'on-focus' | 'none'
+	/** Parent can store the open-file-picker function for external trigger */
+	openFilePickerRef?: React.MutableRefObject<(() => void) | null>
+}
+
+export function imageToUrl(path: string): string {
+	// Shared-mode uploads come back from the worker as absolute URLs under
+	// /s/:shareId/uploads/... — return them as-is. Local daemon uploads are
+	// stored as absolute filesystem paths; translate to the served URL.
+	if (path.startsWith('/s/') || path.startsWith('http://') || path.startsWith('https://')) {
+		return path
+	}
+	const filename = path.split('/').pop()
+	return `/api/uploads/${filename}`
+}
+
+async function uploadImage(host: AnnotationHost, file: File): Promise<string | null> {
+	const endpoint = host.uploadUrl
+	if (!endpoint) return null
+	const formData = new FormData()
+	formData.append('image', file)
+	try {
+		const resp = await fetch(endpoint(), { method: 'POST', body: formData })
+		const data = await resp.json()
+		// Local daemon returns { path }; worker returns { url }. Normalise to
+		// a single string that `imageToUrl` can resolve.
+		if (host.isShared) return data.url || null
+		return data.path || null
+	} catch {
+		return null
+	}
+}
+
+export function AnnotationEditor({
+	note,
+	onNoteChange,
+	images,
+	onAddImage,
+	onRemoveImage,
+	sessionId,
+	placeholder = 'Add your note...',
+	autoFocus = false,
+	autoResize = false,
+	readOnly = false,
+	onKeyDown,
+	onTextareaClick,
+	textareaRef: externalRef,
+	textareaClassName,
+	textareaStyle,
+	minHeight,
+	attachButton = 'always',
+	openFilePickerRef,
+}: AnnotationEditorProps) {
+	const host = useAnnotationHost()
+	// Button, paste and drop all end in the same upload; a host with no endpoint
+	// for it gets none of them rather than three ways to fail silently.
+	const canAttach = !readOnly && hostAcceptsUploads(host)
+	const [isDragging, setIsDragging] = useState(false)
+	const [isUploading, setIsUploading] = useState(false)
+	const [isFocused, setIsFocused] = useState(false)
+	const dragCounter = useRef(0)
+	const internalRef = useRef<HTMLTextAreaElement | null>(null)
+	const fileInputRef = useRef<HTMLInputElement | null>(null)
+
+	const openFilePicker = useCallback(() => fileInputRef.current?.click(), [])
+
+	// Expose file picker to parent
+	if (openFilePickerRef) openFilePickerRef.current = openFilePicker
+
+	const setRef = useCallback((el: HTMLTextAreaElement | null) => {
+		internalRef.current = el
+		if (externalRef) externalRef.current = el
+		if (el && autoResize) autoResizeTextarea(el, minHeight)
+	}, [externalRef, autoResize, minHeight])
+
+	useEffect(() => {
+		if (autoFocus && internalRef.current) {
+			const ta = internalRef.current
+			ta.focus()
+			if (ta.value) ta.setSelectionRange(ta.value.length, ta.value.length)
+		}
+	}, [autoFocus])
+
+	const doUpload = useCallback(async (file: File) => {
+		if (!file.type.startsWith('image/')) return
+		setIsUploading(true)
+		try {
+			const path = await uploadImage(host, file)
+			if (path) onAddImage(path)
+		} finally {
+			setIsUploading(false)
+		}
+	}, [host, onAddImage])
+
+	const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+		for (const item of e.clipboardData?.items ?? []) {
+			if (item.type.startsWith('image/')) {
+				e.preventDefault()
+				const file = item.getAsFile()
+				if (file) doUpload(file)
+				return
+			}
+		}
+	}, [doUpload])
+
+	const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault()
+		dragCounter.current++
+		if (dragCounter.current === 1) setIsDragging(true)
+	}, [])
+
+	const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault()
+	}, [])
+
+	const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault()
+		dragCounter.current--
+		if (dragCounter.current === 0) setIsDragging(false)
+	}, [])
+
+	const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault()
+		dragCounter.current = 0
+		setIsDragging(false)
+		for (const file of e.dataTransfer?.files ?? []) {
+			if (file.type.startsWith('image/')) doUpload(file)
+		}
+	}, [doUpload])
+
+	const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		onNoteChange(e.currentTarget.value)
+		if (autoResize) {
+			e.currentTarget.style.height = 'auto'
+			e.currentTarget.style.height = (minHeight ? Math.max(minHeight, e.currentTarget.scrollHeight) : e.currentTarget.scrollHeight) + 'px'
+		}
+	}, [onNoteChange, autoResize, minHeight])
+
+	const defaultClassName =
+		'w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none'
+	const defaultStyle: React.CSSProperties = {
+		width: '100%',
+		background: 'transparent',
+		border: 'none',
+		color: 'var(--color-text-primary)',
+		fontFamily: "'Inter', sans-serif",
+		fontSize: '13px',
+		lineHeight: '1.5',
+		outline: 'none',
+		...(autoResize ? { resize: 'none' as const, overflow: 'hidden' } : { resize: 'vertical' as const }),
+	}
+
+	const showButton = canAttach && (
+		attachButton === 'always'
+		|| (attachButton === 'on-focus' && isFocused)
+	)
+
+	return (
+		<div
+			style={{ position: 'relative' }}
+			onDragEnter={canAttach ? handleDragEnter : undefined}
+			onDragOver={canAttach ? handleDragOver : undefined}
+			onDragLeave={canAttach ? handleDragLeave : undefined}
+			onDrop={canAttach ? handleDrop : undefined}
+		>
+			<textarea
+				ref={setRef}
+				value={note}
+				onChange={readOnly ? undefined : handleChange}
+				onPaste={canAttach ? handlePaste : undefined}
+				onKeyDown={onKeyDown}
+				onClick={onTextareaClick}
+				onFocus={() => setIsFocused(true)}
+				onBlur={() => {
+					// Delay so click on attach button registers before hiding
+					setTimeout(() => setIsFocused(false), 150)
+				}}
+				readOnly={readOnly}
+				placeholder={placeholder}
+				className={textareaClassName ?? defaultClassName}
+				style={textareaStyle ?? defaultStyle}
+				rows={autoResize ? 1 : undefined}
+			/>
+
+			{/* Hidden file input — always rendered for paste/drop + external trigger */}
+			{canAttach && (
+				<input
+					ref={fileInputRef}
+					type="file"
+					accept="image/*"
+					multiple
+					style={{ display: 'none' }}
+					onChange={(e) => {
+						const files = e.currentTarget.files
+						if (files) { for (const f of files) doUpload(f) }
+						e.currentTarget.value = ''
+					}}
+				/>
+			)}
+
+			{/* Image thumbnails + inline attach button */}
+			{(images.length > 0 || showButton) && (
+				<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '6px', alignItems: 'center' }}>
+					{images.map((img) => (
+						<div
+							key={img}
+							style={{
+								position: 'relative',
+								width: '56px',
+								height: '56px',
+								borderRadius: '6px',
+								overflow: 'hidden',
+								border: '1px solid var(--color-border-subtle)',
+								flexShrink: 0,
+							}}
+						>
+							<img
+								src={imageToUrl(img)}
+								alt=""
+								style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+							/>
+							{!readOnly && (
+								<button
+									onClick={(e) => {
+										e.stopPropagation()
+										onRemoveImage(img)
+									}}
+									style={{
+										position: 'absolute',
+										top: '2px',
+										right: '2px',
+										width: '16px',
+										height: '16px',
+										borderRadius: '50%',
+										background: 'rgba(0,0,0,0.6)',
+										color: 'white',
+										border: 'none',
+										cursor: 'pointer',
+										fontSize: '11px',
+										display: 'flex',
+										alignItems: 'center',
+										justifyContent: 'center',
+										lineHeight: 1,
+										padding: 0,
+									}}
+									title="Remove image"
+								>
+									&times;
+								</button>
+							)}
+						</div>
+					))}
+					{showButton && <AttachButton onClick={openFilePicker} />}
+				</div>
+			)}
+
+			{isUploading && (
+				<div
+					style={{
+						fontSize: '11px',
+						color: 'var(--color-text-tertiary)',
+						fontFamily: "'Inter', sans-serif",
+						marginTop: '4px',
+					}}
+				>
+					Uploading...
+				</div>
+			)}
+
+			{isDragging && (
+				<div
+					style={{
+						position: 'absolute',
+						inset: 0,
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						background: 'var(--color-highlight-bg)',
+						opacity: 0.9,
+						border: '2px dashed var(--color-highlight-border)',
+						borderRadius: '6px',
+						zIndex: 10,
+						pointerEvents: 'none',
+						fontSize: '12px',
+						fontFamily: "'Inter', sans-serif",
+						color: 'var(--color-text-secondary)',
+					}}
+				>
+					Drop image
+				</div>
+			)}
+		</div>
+	)
+}
+
+/** Small attach-image button — reusable in editor and popover button bar */
+export function AttachButton({ onClick, size = 16 }: { onClick: () => void; size?: number }) {
+	return (
+		<button
+			onClick={(e) => {
+				e.stopPropagation()
+				onClick()
+			}}
+			style={{
+				width: `${size * 2}px`,
+				height: `${size * 2}px`,
+				borderRadius: '6px',
+				border: 'none',
+				background: 'transparent',
+				cursor: 'pointer',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				color: 'var(--color-text-tertiary)',
+				flexShrink: 0,
+				transition: 'color 0.15s',
+			}}
+			title="Attach image"
+			onMouseEnter={(e) => {
+				e.currentTarget.style.color = 'var(--color-text-secondary)'
+			}}
+			onMouseLeave={(e) => {
+				e.currentTarget.style.color = 'var(--color-text-tertiary)'
+			}}
+		>
+			<svg
+				width={size}
+				height={size}
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			>
+				<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+				<circle cx="8.5" cy="8.5" r="1.5" />
+				<polyline points="21 15 16 10 5 21" />
+			</svg>
+		</button>
+	)
+}
+
+/** Read-only image thumbnails for display in read-only annotations */
+export function ImageThumbnails({ images }: { images: string[] }) {
+	if (!images.length) return null
+	return (
+		<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '6px' }}>
+			{images.map((img) => (
+				<div
+					key={img}
+					style={{
+						width: '56px',
+						height: '56px',
+						borderRadius: '6px',
+						overflow: 'hidden',
+						border: '1px solid var(--color-border-subtle)',
+						flexShrink: 0,
+					}}
+				>
+					<img
+						src={imageToUrl(img)}
+						alt=""
+						style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+					/>
+				</div>
+			))}
+		</div>
+	)
+}