feat(instance-sync): screenshots sync (#7218)

* pnpm prepr

* feat(instance-sync): screenshots sync

* fix: prepr + fmt

* fix: qa

* feat: screenshit editor

* feat: screenshot* editor qa

* fix: qa

* fix: lint

* fix: aecsocket rev

* qa: a11y tab navigation focus is cut off

* qa: Change “Edited” badge to be bg-highlight-green

* qa: friends list input style wrong

* qa: toolbar width + labels

* qa: multiselect changes

* qa: anim changes

* qa: card hover colors

* qa: copy feedback

* qa: hide date

* qa: instance icon in overflow/contextmenu

* qa: spacing

* qa: group empty state text

* qa: drag preview badge

* qa: group deletion skip warning if no screenshots

* qa: redesign editor

* qa: remove screenshot parent/edited badge stuff

* qa: control font size consistency

* qa: viewer copy control

* qa: editor fixes

* qa: redirect on disable screenshot sync

* qa: margin police

* fix: crop

* fix: qa

* feat: initial start on basic instance file syncing (#7220)

* qa: final

* qa: final 2

* fix: lint + prepr

* fix: copy

* fix: screenshot editing outside of app causing ghost files in db + sync fail rollback impl

* chore: split up

* fix: fmt

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

packages/ui/package.json

@@ -78,6 +78,7 @@
 		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
 		"flatpickr": "^4.6.13",
+		"fabric": "^7.4.0",
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",

packages/ui/src/components/base/buttons/CheckCircleButton.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { CheckIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import ButtonFrame from './ButtonFrame.vue'
+import type { ButtonNativeType } from './types'
+
+withDefaults(
+	defineProps<{
+		checked: boolean
+		disabled?: boolean
+		nativeType?: ButtonNativeType
+	}>(),
+	{
+		disabled: false,
+		nativeType: 'button',
+	},
+)
+
+const frame = ref<InstanceType<typeof ButtonFrame> | null>(null)
+const element = computed(() => frame.value?.element ?? null)
+
+defineExpose({ element })
+</script>
+
+<template>
+	<ButtonFrame
+		ref="frame"
+		as="button"
+		type="quiet"
+		size="lg"
+		interaction="none"
+		:disabled="disabled"
+		:native-type="nativeType"
+		role="radio"
+		:aria-checked="checked"
+		class="w-full !justify-between !gap-4 !whitespace-normal !border !border-solid !px-2 !text-left !transition-colors"
+		:class="
+			checked
+				? '!border-brand !bg-brand-highlight !text-contrast'
+				: '!border-transparent !bg-transparent !text-contrast enabled:hover:!bg-surface-3'
+		"
+	>
+		<span class="flex min-w-0 flex-1 items-center gap-2">
+			<slot />
+		</span>
+		<span
+			v-if="checked"
+			class="flex size-6 shrink-0 items-center justify-center rounded-full bg-brand text-brand-inverted"
+		>
+			<CheckIcon class="size-4" aria-hidden="true" />
+		</span>
+		<span v-else class="size-6 shrink-0 rounded-full border border-solid border-surface-5" />
+	</ButtonFrame>
+</template>

packages/ui/src/components/base/buttons/index.ts

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.vue'
 export { default as ButtonGroup } from './ButtonGroup.vue'
 export { default as ButtonLink } from './ButtonLink.vue'
+export { default as CheckCircleButton } from './CheckCircleButton.vue'
 export { default as ContextMenu } from './ContextMenu.vue'
 export { default as FileButton } from './FileButton.vue'
 export { default as IconButton } from './IconButton.vue'

packages/ui/src/components/base/index.ts

@@ -13,6 +13,7 @@ export { default as BulletDivider } from './BulletDivider.vue'
 export { default as Button } from './buttons/Button.vue'
 export { default as ButtonGroup } from './buttons/ButtonGroup.vue'
 export { default as ButtonLink } from './buttons/ButtonLink.vue'
+export { default as CheckCircleButton } from './buttons/CheckCircleButton.vue'
 export { default as ContextMenu } from './buttons/ContextMenu.vue'
 export { default as FileButton } from './buttons/FileButton.vue'
 export { default as IconButton } from './buttons/IconButton.vue'

packages/ui/src/components/image-viewer-editor/controls.vue

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import {
+	RedoIcon,
+	SaveIcon,
+	TrashIcon,
+	UndoIcon,
+	XIcon,
+	ZoomInIcon,
+	ZoomOutIcon,
+} from '@modrinth/assets'
+import { computed } from 'vue'
+
+import Button from '#ui/components/base/buttons/Button.vue'
+import IconButton from '#ui/components/base/buttons/IconButton.vue'
+import SplitButton from '#ui/components/base/buttons/SplitButton.vue'
+import type { OverflowMenuOption } from '#ui/components/base/buttons/types'
+import Chips from '#ui/components/base/Chips.vue'
+import { useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { imageViewerEditorMessages as messages } from './image-viewer-editor-messages'
+import type { ScreenshotCensorMode, ScreenshotEraserMode } from './image-viewer-editor-types'
+import type { useImageEditor } from './use-image-editor'
+
+const props = defineProps<{
+	editor: ReturnType<typeof useImageEditor>
+	busy: boolean
+}>()
+
+const emit = defineEmits<{
+	cancel: []
+	save: [mode: 'create_copy' | 'replace_edit']
+}>()
+
+const { formatMessage } = useVIntl()
+const {
+	color,
+	strokeWidth,
+	fontSize,
+	censorMode,
+	eraserMode,
+	zoom,
+	isFit,
+	canUndo,
+	canRedo,
+	canDelete,
+	canZoomOut,
+	canZoomIn,
+	hasColorProperty,
+	propertyValueKind,
+	showCensorMode,
+	showEraserMode,
+	showCropControls,
+	cropWidth,
+	cropHeight,
+	canResetCrop,
+	updateColor,
+	updateStrokeWidth,
+	updateFontSize,
+	beginPropertyEdit,
+	commitPropertyEdit,
+	deleteSelection,
+	resetCrop,
+	undo,
+	redo,
+	setZoom,
+	setFit,
+} = props.editor
+
+const propertyValue = computed(() =>
+	propertyValueKind.value === 'size' ? fontSize.value : strokeWidth.value,
+)
+const propertyMin = computed(() => (propertyValueKind.value === 'size' ? 12 : 1))
+const propertyMax = computed(() => (propertyValueKind.value === 'size' ? 120 : 40))
+const propertyProgress = computed(
+	() => ((propertyValue.value - propertyMin.value) / (propertyMax.value - propertyMin.value)) * 100,
+)
+const hasPropertyControls = computed(
+	() =>
+		showCropControls.value ||
+		showEraserMode.value ||
+		showCensorMode.value ||
+		hasColorProperty.value ||
+		Boolean(propertyValueKind.value),
+)
+const censorModes: ScreenshotCensorMode[] = ['blur', 'solid']
+const eraserModes: ScreenshotEraserMode[] = ['element', 'area']
+const saveOptions = computed<OverflowMenuOption[]>(() => [
+	{
+		id: 'overwrite',
+		label: formatMessage(messages.overwrite),
+		icon: SaveIcon,
+		action: () => emit('save', 'replace_edit'),
+	},
+])
+
+function updatePropertyValue(nextValue: number) {
+	if (!Number.isFinite(nextValue)) return
+	const normalizedValue = Math.min(
+		propertyMax.value,
+		Math.max(propertyMin.value, Math.round(nextValue)),
+	)
+	if (propertyValueKind.value === 'size') updateFontSize(normalizedValue)
+	else updateStrokeWidth(normalizedValue)
+}
+
+function handlePropertyInput(event: Event) {
+	updatePropertyValue(Number((event.target as HTMLInputElement).value))
+}
+
+function handleColorInput(event: Event) {
+	updateColor((event.target as HTMLInputElement).value)
+}
+
+function formatCensorMode(value: ScreenshotCensorMode) {
+	return formatMessage(value === 'blur' ? messages.blur : messages.solid)
+}
+
+function formatEraserMode(value: ScreenshotEraserMode) {
+	return formatMessage(value === 'element' ? messages.element : messages.area)
+}
+</script>
+
+<template>
+	<div
+		class="absolute bottom-6 left-1/2 z-10 flex w-max max-w-[calc(100%_-_3rem)] -translate-x-1/2 items-center gap-2 rounded-[20px] border border-solid border-white/10 bg-surface-3 p-2 shadow-[0_1rem_3rem_rgb(0_0_0_/_32%)] max-[900px]:flex-wrap max-[900px]:justify-center"
+		@click.stop
+	>
+		<div v-if="hasPropertyControls" class="flex min-w-0 items-center gap-2">
+			<div v-if="showCropControls" class="flex items-center gap-2">
+				<span class="shrink-0 text-base font-semibold leading-5 tabular-nums text-white/60">
+					{{ formatMessage(messages.cropDimensions, { width: cropWidth, height: cropHeight }) }}
+				</span>
+				<Button type="quiet" :disabled="!canResetCrop" @click="resetCrop">
+					{{ formatMessage(messages.resetCrop) }}
+				</Button>
+			</div>
+			<Chips
+				v-if="showEraserMode"
+				v-model="eraserMode"
+				:items="eraserModes"
+				:format-label="formatEraserMode"
+				:aria-label="formatMessage(messages.eraserMode)"
+				size="small"
+				hide-checkmark-icon
+			/>
+			<Chips
+				v-if="showCensorMode"
+				v-model="censorMode"
+				:items="censorModes"
+				:format-label="formatCensorMode"
+				:aria-label="formatMessage(messages.censorMode)"
+				size="small"
+				hide-checkmark-icon
+			/>
+			<label
+				v-if="hasColorProperty"
+				v-tooltip="formatMessage(messages.colour)"
+				class="relative flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-xl transition-[filter,box-shadow] hover:brightness-125 focus-within:ring-4 focus-within:ring-brand-shadow"
+			>
+				<span
+					class="size-full rounded-xl border border-solid border-surface-5"
+					:style="{ backgroundColor: color }"
+				/>
+				<input
+					:value="color"
+					type="color"
+					:aria-label="formatMessage(messages.colour)"
+					class="absolute inset-0 cursor-pointer opacity-0"
+					@focus="beginPropertyEdit"
+					@pointerdown="beginPropertyEdit"
+					@input="handleColorInput"
+					@change="commitPropertyEdit"
+					@blur="commitPropertyEdit"
+				/>
+			</label>
+			<div
+				v-if="propertyValueKind"
+				class="flex w-52 min-w-0 items-center gap-2"
+				@focusin="beginPropertyEdit"
+				@pointerdown.capture="beginPropertyEdit"
+				@change.capture="commitPropertyEdit"
+				@focusout="commitPropertyEdit"
+			>
+				<span class="shrink-0 text-base font-semibold leading-5 text-white/60">
+					{{ formatMessage(propertyValueKind === 'size' ? messages.size : messages.width) }}
+				</span>
+				<input
+					type="range"
+					:value="propertyValue"
+					:min="propertyMin"
+					:max="propertyMax"
+					step="1"
+					:aria-label="formatMessage(propertyValueKind === 'size' ? messages.size : messages.width)"
+					class="editor-property-range min-w-0 flex-1"
+					:style="{ '--property-progress': `${propertyProgress}%` }"
+					@input="handlePropertyInput"
+				/>
+				<input
+					type="number"
+					:value="propertyValue"
+					:min="propertyMin"
+					:max="propertyMax"
+					step="1"
+					:aria-label="formatMessage(propertyValueKind === 'size' ? messages.size : messages.width)"
+					class="editor-property-value h-9 w-12 shrink-0 rounded-xl border border-solid border-surface-5 bg-surface-4 px-1 text-center text-base font-semibold leading-5 tabular-nums text-white outline-none focus:ring-4 focus:ring-brand-shadow"
+					@input="handlePropertyInput"
+				/>
+			</div>
+		</div>
+
+		<div v-if="hasPropertyControls" class="h-6 w-px bg-white/10" />
+		<div class="flex items-center gap-2">
+			<IconButton
+				v-if="canDelete"
+				v-tooltip="formatMessage(messages.deleteSelection)"
+				:label="formatMessage(messages.deleteSelection)"
+				type="quiet"
+				@click="deleteSelection"
+			>
+				<TrashIcon />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(messages.undo)"
+				:label="formatMessage(messages.undo)"
+				type="quiet"
+				:disabled="!canUndo"
+				@click="undo"
+			>
+				<UndoIcon />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(messages.redo)"
+				:label="formatMessage(messages.redo)"
+				type="quiet"
+				:disabled="!canRedo"
+				@click="redo"
+			>
+				<RedoIcon />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomOut)"
+				:label="formatMessage(messages.zoomOut)"
+				type="quiet"
+				:disabled="!canZoomOut"
+				@click="setZoom(zoom - 0.1)"
+			>
+				<ZoomOutIcon />
+			</IconButton>
+			<Button
+				v-tooltip="formatMessage(messages.fitToWorkspace)"
+				type="quiet"
+				class="w-16 px-2 tabular-nums text-white/60"
+				@click="setFit"
+			>
+				{{ isFit ? formatMessage(messages.fit) : `${Math.round(zoom * 100)}%` }}
+			</Button>
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomIn)"
+				:label="formatMessage(messages.zoomIn)"
+				type="quiet"
+				:disabled="!canZoomIn"
+				@click="setZoom(zoom + 0.1)"
+			>
+				<ZoomInIcon />
+			</IconButton>
+		</div>
+
+		<div class="h-6 w-px bg-white/10" />
+		<Button type="quiet" :disabled="busy" @click="emit('cancel')">
+			<XIcon aria-hidden="true" />
+			{{ formatMessage(commonMessages.cancelButton) }}
+		</Button>
+		<SplitButton
+			type="colored"
+			color="green"
+			:disabled="busy"
+			:options="saveOptions"
+			:menu-label="formatMessage(messages.moreSaveOptions)"
+			:group-label="formatMessage(messages.saveImage)"
+			@click="emit('save', 'create_copy')"
+		>
+			<SaveIcon aria-hidden="true" />
+			{{ formatMessage(messages.saveAsCopy) }}
+		</SplitButton>
+	</div>
+</template>
+
+<style scoped>
+.editor-property-range {
+	height: 1rem;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	background: transparent;
+	outline: none;
+	appearance: none;
+
+	&::-webkit-slider-runnable-track {
+		height: 0.25rem;
+		border-radius: 999px;
+		background: linear-gradient(
+			to right,
+			var(--color-brand) 0%,
+			var(--color-brand) var(--property-progress),
+			var(--surface-5) var(--property-progress),
+			var(--surface-5) 100%
+		);
+	}
+
+	&::-webkit-slider-thumb {
+		width: 0.875rem;
+		height: 0.875rem;
+		margin-top: -0.3125rem;
+		border: 2px solid var(--surface-1);
+		border-radius: 999px;
+		background: var(--color-brand);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
+		appearance: none;
+	}
+
+	&:focus-visible::-webkit-slider-thumb {
+		box-shadow: 0 0 0 0.25rem var(--color-brand-shadow);
+	}
+
+	&::-moz-range-track {
+		height: 0.25rem;
+		border-radius: 999px;
+		background: var(--surface-5);
+	}
+
+	&::-moz-range-progress {
+		height: 0.25rem;
+		border-radius: 999px;
+		background: var(--color-brand);
+	}
+
+	&::-moz-range-thumb {
+		width: 0.75rem;
+		height: 0.75rem;
+		border: 2px solid var(--surface-1);
+		border-radius: 999px;
+		background: var(--color-brand);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
+	}
+}
+
+.editor-property-value {
+	appearance: textfield;
+
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button {
+		margin: 0;
+		appearance: none;
+	}
+}
+</style>

packages/ui/src/components/image-viewer-editor/editor.vue

@@ -0,0 +1,597 @@
+<script setup lang="ts">
+import {
+	EditIcon,
+	LeftArrowIcon,
+	RightArrowIcon,
+	XIcon,
+	ZoomInIcon,
+	ZoomOutIcon,
+} from '@modrinth/assets'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import Button from '#ui/components/base/buttons/Button.vue'
+import IconButton from '#ui/components/base/buttons/IconButton.vue'
+import { useVIntl } from '#ui/composables/i18n'
+import { injectNotificationManager } from '#ui/providers'
+
+import Controls from './controls.vue'
+import { imageViewerEditorMessages as messages } from './image-viewer-editor-messages'
+import type { ImageViewerEditorMode } from './image-viewer-editor-types'
+import Toolbar from './toolbar.vue'
+import type {
+	ImageViewerEditorData,
+	ImageViewerEditorItem,
+	ImageViewerEditorSavePayload,
+} from './types'
+import { useImageEditor } from './use-image-editor'
+
+const CLICK_ZOOM = 2
+const MAX_VIEW_ZOOM = 5
+const ZOOM_STEP = 1.25
+
+const props = defineProps<{
+	item: ImageViewerEditorItem
+	mode: ImageViewerEditorMode
+	index: number
+	count: number
+	canEdit: boolean
+	saving: boolean
+	loadData: (item: ImageViewerEditorItem) => Promise<ImageViewerEditorData>
+}>()
+
+const emit = defineEmits<{
+	cancel: []
+	close: []
+	edit: []
+	imageReady: []
+	next: []
+	previous: []
+	save: [payload: ImageViewerEditorSavePayload]
+}>()
+
+const canvasElement = ref<HTMLCanvasElement>()
+const viewport = ref<HTMLElement>()
+const fitBounds = ref<HTMLElement>()
+const exporting = ref(false)
+const discarding = ref(false)
+const loadingEditorData = ref(true)
+const spacePressed = ref(false)
+const panning = ref<{
+	x: number
+	y: number
+	scrollLeft: number
+	scrollTop: number
+	moved: boolean
+}>()
+const brushPointer = ref({ x: 0, y: 0, visible: false })
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const editor = useImageEditor()
+const {
+	loading,
+	tool,
+	color,
+	strokeWidth,
+	eraserMode,
+	zoom,
+	fitScale,
+	isFit,
+	canZoomIn,
+	initialize,
+	dispose,
+	setTool,
+	setInteractionEnabled,
+	discardChanges,
+	fitToViewport,
+	setZoom,
+	setFit,
+	exportPng,
+	handleKeyboardShortcut,
+	isTextEditing,
+	resetHistory,
+} = editor
+
+const busy = computed(
+	() =>
+		props.saving || exporting.value || discarding.value || loadingEditorData.value || loading.value,
+)
+const hasBrushPointer = computed(
+	() =>
+		props.mode === 'edit' &&
+		(tool.value === 'pen' ||
+			tool.value === 'highlight' ||
+			(tool.value === 'eraser' && eraserMode.value === 'area')),
+)
+const brushPointerSize = computed(() => Math.max(2, strokeWidth.value * zoom.value))
+const brushPointerColor = computed(() => (tool.value === 'eraser' ? '#ffffff' : color.value))
+const viewZoom = computed(() => zoom.value / Math.max(fitScale.value, Number.EPSILON))
+const viewZoomPercent = computed(() => Math.round(viewZoom.value * 100))
+const viewZoomed = computed(() => viewZoom.value > 1.001)
+const canViewZoomIn = computed(() => canZoomIn.value && viewZoom.value < MAX_VIEW_ZOOM)
+
+let resizeObserver: ResizeObserver | undefined
+let initializationGeneration = 0
+let initializationChain = Promise.resolve()
+let imageReadyFrame: number | undefined
+
+function queueInitialization() {
+	const generation = ++initializationGeneration
+	loadingEditorData.value = true
+	const editorDataPromise = props.loadData(props.item)
+	initializationChain = initializationChain.then(async () => {
+		if (generation !== initializationGeneration) return
+		let initialized = false
+		try {
+			const editorData = await editorDataPromise
+			if (generation !== initializationGeneration || !canvasElement.value) return
+			await initialize(canvasElement.value, editorData, getViewportSize())
+			if (generation !== initializationGeneration) return
+			setInteractionEnabled(props.mode === 'edit')
+			observeViewport()
+			initialized = true
+		} catch (error) {
+			if (generation !== initializationGeneration) return
+			handleError(error)
+			emit('close')
+		} finally {
+			if (generation === initializationGeneration) {
+				loadingEditorData.value = false
+				if (initialized) notifyImageReady()
+			}
+		}
+	})
+}
+
+function notifyImageReady() {
+	if (imageReadyFrame !== undefined) cancelAnimationFrame(imageReadyFrame)
+	imageReadyFrame = requestAnimationFrame(() => {
+		imageReadyFrame = undefined
+		emit('imageReady')
+	})
+}
+
+function observeViewport() {
+	resizeObserver?.disconnect()
+	if (!viewport.value || !fitBounds.value) return
+	resizeObserver = new ResizeObserver(fitEditorToViewport)
+	resizeObserver.observe(viewport.value)
+	resizeObserver.observe(fitBounds.value)
+	fitEditorToViewport()
+}
+
+function fitEditorToViewport() {
+	const viewportSize = getViewportSize()
+	if (!viewportSize) return
+	fitToViewport(viewportSize.width, viewportSize.height)
+	if (isFit.value) centerViewport()
+	else notifyImageReady()
+}
+
+function getViewportSize() {
+	if (!fitBounds.value) return undefined
+	return {
+		width: fitBounds.value.clientWidth,
+		height: fitBounds.value.clientHeight,
+	}
+}
+
+function centerViewport() {
+	requestAnimationFrame(() => {
+		if (!viewport.value) return
+		viewport.value.scrollLeft = Math.max(
+			0,
+			(viewport.value.scrollWidth - viewport.value.clientWidth) / 2,
+		)
+		viewport.value.scrollTop = Math.max(
+			0,
+			(viewport.value.scrollHeight - viewport.value.clientHeight) / 2,
+		)
+		notifyImageReady()
+	})
+}
+
+function getTextContrast(target: HTMLElement): 'dark' | 'light' {
+	const renderedCanvas = viewport.value?.querySelector<HTMLCanvasElement>('canvas.lower-canvas')
+	const context = renderedCanvas?.getContext('2d', { willReadFrequently: true })
+	if (!renderedCanvas || !context) return 'light'
+
+	const targetBounds = target.getBoundingClientRect()
+	const canvasBounds = renderedCanvas.getBoundingClientRect()
+	const intersection = {
+		left: Math.max(targetBounds.left, canvasBounds.left),
+		top: Math.max(targetBounds.top, canvasBounds.top),
+		right: Math.min(targetBounds.right, canvasBounds.right),
+		bottom: Math.min(targetBounds.bottom, canvasBounds.bottom),
+	}
+	if (intersection.right <= intersection.left || intersection.bottom <= intersection.top)
+		return 'light'
+
+	const scaleX = renderedCanvas.width / canvasBounds.width
+	const scaleY = renderedCanvas.height / canvasBounds.height
+	const sourceX = Math.max(0, Math.floor((intersection.left - canvasBounds.left) * scaleX))
+	const sourceY = Math.max(0, Math.floor((intersection.top - canvasBounds.top) * scaleY))
+	const sourceWidth = Math.min(
+		renderedCanvas.width - sourceX,
+		Math.max(1, Math.ceil((intersection.right - intersection.left) * scaleX)),
+	)
+	const sourceHeight = Math.min(
+		renderedCanvas.height - sourceY,
+		Math.max(1, Math.ceil((intersection.bottom - intersection.top) * scaleY)),
+	)
+
+	try {
+		const pixels = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight).data
+		const sampleStride = Math.max(1, Math.floor(Math.sqrt((sourceWidth * sourceHeight) / 4096)))
+		let luminanceTotal = 0
+		let sampleCount = 0
+		for (let y = 0; y < sourceHeight; y += sampleStride) {
+			for (let x = 0; x < sourceWidth; x += sampleStride) {
+				const offset = (y * sourceWidth + x) * 4
+				const red = srgbToLinear(pixels[offset] / 255)
+				const green = srgbToLinear(pixels[offset + 1] / 255)
+				const blue = srgbToLinear(pixels[offset + 2] / 255)
+				const alpha = pixels[offset + 3] / 255
+				luminanceTotal += (0.2126 * red + 0.7152 * green + 0.0722 * blue) * alpha
+				sampleCount++
+			}
+		}
+
+		const targetArea = targetBounds.width * targetBounds.height
+		const intersectionArea =
+			(intersection.right - intersection.left) * (intersection.bottom - intersection.top)
+		const coverage = targetArea > 0 ? intersectionArea / targetArea : 0
+		if (coverage < 0.9) return 'light'
+		const averageLuminance = sampleCount > 0 ? luminanceTotal / sampleCount : 0
+		return averageLuminance > 0.179 ? 'dark' : 'light'
+	} catch {
+		return 'light'
+	}
+}
+
+function srgbToLinear(value: number) {
+	return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
+}
+
+function resetView() {
+	setFit()
+	centerViewport()
+}
+
+function setViewZoom(nextZoom: number) {
+	if (nextZoom <= 1.001) {
+		resetView()
+		return
+	}
+	setZoom(fitScale.value * Math.min(MAX_VIEW_ZOOM, nextZoom))
+	centerViewport()
+}
+
+async function requestSave(mode: 'create_copy' | 'replace_edit') {
+	if (busy.value) return
+	exporting.value = true
+	try {
+		emit('save', {
+			item: props.item,
+			pngBytes: await exportPng(),
+			mode,
+		})
+	} catch (error) {
+		handleError(error)
+	} finally {
+		exporting.value = false
+	}
+}
+
+async function cancel() {
+	if (busy.value) return
+	discarding.value = true
+	try {
+		await discardChanges()
+		emit('cancel')
+	} catch (error) {
+		handleError(error)
+	} finally {
+		discarding.value = false
+	}
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (props.mode !== 'edit' || document.querySelector('.modal-root')) return
+	if (handleKeyboardShortcut(event)) return
+	if (event.code === 'Space' && !isTextEditing() && !isTypingTarget(event.target)) {
+		spacePressed.value = true
+	}
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		void cancel()
+	}
+}
+
+function handleKeyup(event: KeyboardEvent) {
+	if (event.code === 'Space') spacePressed.value = false
+}
+
+function handleEditMenuUndo(event: Event) {
+	if (props.mode !== 'edit' || isTextEditing() || isTypingTarget(document.activeElement)) return
+	event.preventDefault()
+	void editor.undo()
+}
+
+function handleEditMenuRedo(event: Event) {
+	if (props.mode !== 'edit' || isTextEditing() || isTypingTarget(document.activeElement)) return
+	event.preventDefault()
+	void editor.redo()
+}
+
+function handlePointerDown(event: PointerEvent) {
+	if (!viewport.value) return
+	const target = event.target
+	if (props.mode === 'view' && event.button === 0 && target === event.currentTarget) {
+		emit('close')
+		return
+	}
+	const isCanvasTarget = target instanceof Element && Boolean(target.closest('.editor-canvas'))
+	const isViewPan = props.mode === 'view' && event.button === 0 && isCanvasTarget
+	const isEditPan =
+		props.mode === 'edit' && (event.button === 1 || (event.button === 0 && spacePressed.value))
+	if (!isViewPan && !isEditPan) return
+	event.preventDefault()
+	event.stopPropagation()
+	panning.value = {
+		x: event.clientX,
+		y: event.clientY,
+		scrollLeft: viewport.value.scrollLeft,
+		scrollTop: viewport.value.scrollTop,
+		moved: false,
+	}
+	viewport.value.setPointerCapture(event.pointerId)
+}
+
+function movePan(event: PointerEvent) {
+	if (!viewport.value || !panning.value) return
+	const deltaX = event.clientX - panning.value.x
+	const deltaY = event.clientY - panning.value.y
+	if (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2) panning.value.moved = true
+	viewport.value.scrollLeft = panning.value.scrollLeft - deltaX
+	viewport.value.scrollTop = panning.value.scrollTop - deltaY
+}
+
+function stopPan() {
+	const pan = panning.value
+	panning.value = undefined
+	if (!pan || props.mode !== 'view') return
+	if (pan.moved) {
+		notifyImageReady()
+		return
+	}
+	if (viewZoomed.value) resetView()
+	else setViewZoom(CLICK_ZOOM)
+}
+
+function updateBrushPointer(event: PointerEvent) {
+	if (!hasBrushPointer.value || panning.value) {
+		brushPointer.value.visible = false
+		return
+	}
+	const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect()
+	brushPointer.value = {
+		x: event.clientX - bounds.left,
+		y: event.clientY - bounds.top,
+		visible: true,
+	}
+}
+
+function handleWheel(event: WheelEvent) {
+	if (props.mode === 'view') {
+		event.preventDefault()
+		setViewZoom(viewZoom.value * (event.deltaY < 0 ? 1.1 : 1 / 1.1))
+		return
+	}
+	if (!event.ctrlKey && !event.metaKey) return
+	event.preventDefault()
+	setZoom(zoom.value + (event.deltaY < 0 ? 0.1 : -0.1))
+}
+
+function isTypingTarget(target: EventTarget | null) {
+	return (
+		target instanceof HTMLInputElement ||
+		target instanceof HTMLTextAreaElement ||
+		target instanceof HTMLSelectElement ||
+		(target instanceof HTMLElement && target.isContentEditable)
+	)
+}
+
+function markSaved() {
+	resetHistory()
+}
+
+watch(() => [props.item.id, props.item.src], queueInitialization)
+watch(
+	() => props.mode,
+	(mode) => {
+		spacePressed.value = false
+		panning.value = undefined
+		brushPointer.value.visible = false
+		setInteractionEnabled(mode === 'edit')
+	},
+)
+
+onMounted(async () => {
+	document.addEventListener('keydown', handleKeydown)
+	document.addEventListener('keyup', handleKeyup)
+	document.addEventListener('edit-menu:undo', handleEditMenuUndo)
+	document.addEventListener('edit-menu:redo', handleEditMenuRedo)
+	await nextTick()
+	queueInitialization()
+})
+
+onBeforeUnmount(() => {
+	initializationGeneration++
+	if (imageReadyFrame !== undefined) cancelAnimationFrame(imageReadyFrame)
+	document.removeEventListener('keydown', handleKeydown)
+	document.removeEventListener('keyup', handleKeyup)
+	document.removeEventListener('edit-menu:undo', handleEditMenuUndo)
+	document.removeEventListener('edit-menu:redo', handleEditMenuRedo)
+	resizeObserver?.disconnect()
+	void dispose()
+})
+
+defineExpose({ getTextContrast, markSaved })
+</script>
+
+<template>
+	<div
+		ref="viewport"
+		class="editor-viewport absolute inset-0 flex min-h-0 min-w-0 select-none overflow-auto px-6 pb-[5.75rem] pt-[4.75rem] max-[900px]:px-4 max-[900px]:pb-[8.5rem] max-[900px]:pt-[4.5rem]"
+		:class="{
+			'is-view': mode === 'view',
+			'is-view-zoomed': mode === 'view' && viewZoomed,
+			'is-panning': panning,
+			'is-pan-ready': mode === 'edit' && spacePressed && !panning,
+		}"
+		@pointerdown.capture="handlePointerDown"
+		@pointermove="movePan"
+		@pointerup="stopPan"
+		@pointercancel="panning = undefined"
+		@wheel="handleWheel"
+	>
+		<img
+			v-if="mode === 'view' && loadingEditorData"
+			:src="item.src"
+			:alt="item.alt"
+			class="pointer-events-none relative z-[2] m-auto block max-h-full max-w-full shrink-0 object-contain"
+			draggable="false"
+		/>
+		<div
+			v-show="!loadingEditorData"
+			class="editor-canvas relative z-[2] m-auto shrink-0"
+			@pointerenter="updateBrushPointer"
+			@pointermove="updateBrushPointer"
+			@pointerleave="brushPointer.visible = false"
+		>
+			<canvas ref="canvasElement" :aria-label="item.alt" role="img" />
+			<div
+				v-if="hasBrushPointer && brushPointer.visible"
+				class="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border border-solid shadow-[0_0_0_1px_rgb(0_0_0_/_80%),inset_0_0_0_1px_rgb(255_255_255_/_35%)]"
+				:style="{
+					left: `${brushPointer.x}px`,
+					top: `${brushPointer.y}px`,
+					width: `${brushPointerSize}px`,
+					height: `${brushPointerSize}px`,
+					borderColor: brushPointerColor,
+				}"
+			>
+				<div
+					v-if="tool !== 'eraser'"
+					class="absolute inset-0 rounded-full opacity-[0.15]"
+					:style="{ backgroundColor: color }"
+				/>
+			</div>
+		</div>
+	</div>
+	<div
+		ref="fitBounds"
+		class="pointer-events-none absolute inset-x-6 bottom-[5.75rem] top-[4.75rem] z-[3] flex items-center justify-center max-[900px]:inset-x-4 max-[900px]:bottom-[8.5rem] max-[900px]:top-[4.5rem]"
+		aria-hidden="true"
+	/>
+
+	<template v-if="mode === 'edit'">
+		<Toolbar :tool="tool" @select="setTool" />
+		<Controls :editor="editor" :busy="busy" @cancel="cancel" @save="requestSave" />
+	</template>
+	<div
+		v-else
+		class="absolute bottom-6 left-1/2 z-10 flex max-w-[calc(100%_-_3rem)] -translate-x-1/2 items-center gap-2 rounded-[20px] border border-solid border-white/10 bg-surface-3 p-2 shadow-[0_1rem_3rem_rgb(0_0_0_/_32%)]"
+		@click.stop
+	>
+		<div v-if="count > 1" class="flex items-center gap-2">
+			<IconButton :label="formatMessage(messages.previous)" type="quiet" @click="emit('previous')">
+				<LeftArrowIcon aria-hidden="true" />
+			</IconButton>
+			<span
+				class="flex min-w-14 justify-center gap-1 text-base font-semibold leading-5 tabular-nums text-white/50"
+				aria-live="polite"
+			>
+				<strong class="font-semibold text-white">{{ index + 1 }}</strong>
+				<span>/ {{ count }}</span>
+			</span>
+			<IconButton :label="formatMessage(messages.next)" type="quiet" @click="emit('next')">
+				<RightArrowIcon aria-hidden="true" />
+			</IconButton>
+		</div>
+		<div v-if="count > 1" class="h-6 w-px bg-white/10" />
+		<div class="flex items-center gap-2">
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomOut)"
+				:label="formatMessage(messages.zoomOut)"
+				type="quiet"
+				:disabled="!viewZoomed"
+				@click="setViewZoom(viewZoom / ZOOM_STEP)"
+			>
+				<ZoomOutIcon aria-hidden="true" />
+			</IconButton>
+			<Button
+				v-tooltip="formatMessage(messages.fitToWorkspace)"
+				type="quiet"
+				class="w-16 px-2 tabular-nums text-white/60"
+				@click="resetView"
+			>
+				{{ viewZoomPercent }}%
+			</Button>
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomIn)"
+				:label="formatMessage(messages.zoomIn)"
+				type="quiet"
+				:disabled="!canViewZoomIn"
+				@click="setViewZoom(viewZoom * ZOOM_STEP)"
+			>
+				<ZoomInIcon aria-hidden="true" />
+			</IconButton>
+		</div>
+		<div class="h-6 w-px bg-white/10" />
+		<IconButton
+			v-if="canEdit"
+			v-tooltip="formatMessage(messages.edit)"
+			:label="formatMessage(messages.edit)"
+			type="quiet"
+			@click="emit('edit')"
+		>
+			<EditIcon aria-hidden="true" />
+		</IconButton>
+		<div class="flex items-center gap-2">
+			<slot name="actions" />
+		</div>
+		<div class="h-6 w-px bg-white/10" />
+		<IconButton :label="formatMessage(messages.close)" type="quiet" @click="emit('close')">
+			<XIcon aria-hidden="true" />
+		</IconButton>
+	</div>
+</template>
+
+<style scoped>
+.editor-viewport {
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.editor-canvas :deep(.canvas-container) {
+	flex: none;
+	box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
+}
+
+.editor-viewport.is-view :deep(.upper-canvas) {
+	cursor: zoom-in !important;
+}
+
+.editor-viewport.is-view-zoomed :deep(.upper-canvas),
+.editor-viewport.is-pan-ready :deep(.upper-canvas) {
+	cursor: grab !important;
+}
+
+.editor-viewport.is-panning :deep(.upper-canvas) {
+	cursor: grabbing !important;
+}
+</style>

packages/ui/src/components/image-viewer-editor/image-viewer-editor-censor-object.ts

@@ -0,0 +1,136 @@
+import type { ScreenshotCensorMode, ScreenshotEditorSourceRect } from './image-viewer-editor-types'
+
+const BLUR_DOWNSAMPLE = 0.25
+const BLUR_SIGMA = 12
+const BLUR_RADIUS = Math.ceil(BLUR_SIGMA * 3)
+const BLUR_KERNEL = createGaussianKernel()
+
+type CensorTransform = readonly [number, number, number, number, number, number]
+
+export function renderCensorRegion(
+	source: CanvasImageSource,
+	sourceRect: ScreenshotEditorSourceRect,
+	mode: ScreenshotCensorMode,
+	solidColor: string,
+	transform?: CensorTransform,
+) {
+	const width = Math.max(1, Math.round(sourceRect.width))
+	const height = Math.max(1, Math.round(sourceRect.height))
+	const output = document.createElement('canvas')
+	output.width = width
+	output.height = height
+	const outputContext = output.getContext('2d')
+	if (!outputContext) throw new Error('Could not create censor canvas')
+
+	if (mode === 'solid') {
+		outputContext.fillStyle = solidColor
+		outputContext.fillRect(0, 0, width, height)
+		return output
+	}
+
+	const sampleWidth = Math.max(1, Math.round(width * BLUR_DOWNSAMPLE))
+	const sampleHeight = Math.max(1, Math.round(height * BLUR_DOWNSAMPLE))
+	const sample = document.createElement('canvas')
+	sample.width = sampleWidth
+	sample.height = sampleHeight
+	const sampleContext = sample.getContext('2d')
+	if (!sampleContext) throw new Error('Could not create blur canvas')
+
+	if (transform) {
+		const inverse = invertTransform(transform)
+		const scaleX = sampleWidth / width
+		const scaleY = sampleHeight / height
+		sampleContext.setTransform(
+			inverse[0] * scaleX,
+			inverse[1] * scaleY,
+			inverse[2] * scaleX,
+			inverse[3] * scaleY,
+			(inverse[4] + width / 2) * scaleX,
+			(inverse[5] + height / 2) * scaleY,
+		)
+		sampleContext.drawImage(source, 0, 0)
+		sampleContext.resetTransform()
+	} else {
+		sampleContext.drawImage(
+			source,
+			sourceRect.left,
+			sourceRect.top,
+			sourceRect.width,
+			sourceRect.height,
+			0,
+			0,
+			sampleWidth,
+			sampleHeight,
+		)
+	}
+	const blurredPixels = gaussianBlur(
+		sampleContext.getImageData(0, 0, sampleWidth, sampleHeight),
+		sampleWidth,
+		sampleHeight,
+	)
+	sampleContext.putImageData(blurredPixels, 0, 0)
+	outputContext.imageSmoothingEnabled = true
+	outputContext.imageSmoothingQuality = 'high'
+	outputContext.drawImage(sample, 0, 0, sampleWidth, sampleHeight, 0, 0, width, height)
+	return output
+}
+
+function invertTransform(transform: CensorTransform): CensorTransform {
+	const [a, b, c, d, e, f] = transform
+	const determinant = a * d - b * c
+	if (Math.abs(determinant) < Number.EPSILON) return [1, 0, 0, 1, 0, 0]
+	return [
+		d / determinant,
+		-b / determinant,
+		-c / determinant,
+		a / determinant,
+		(c * f - d * e) / determinant,
+		(b * e - a * f) / determinant,
+	]
+}
+
+function createGaussianKernel() {
+	const kernel = new Float32Array(BLUR_RADIUS * 2 + 1)
+	let total = 0
+	for (let index = -BLUR_RADIUS; index <= BLUR_RADIUS; index++) {
+		const weight = Math.exp(-(index * index) / (2 * BLUR_SIGMA * BLUR_SIGMA))
+		kernel[index + BLUR_RADIUS] = weight
+		total += weight
+	}
+	for (let index = 0; index < kernel.length; index++) kernel[index] /= total
+	return kernel
+}
+
+function gaussianBlur(imageData: ImageData, width: number, height: number) {
+	const horizontal = new Float32Array(imageData.data.length)
+	const output = new ImageData(width, height)
+
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			for (let offset = -BLUR_RADIUS; offset <= BLUR_RADIUS; offset++) {
+				const sampleX = Math.max(0, Math.min(width - 1, x + offset))
+				const sourceIndex = (y * width + sampleX) * 4
+				const weight = BLUR_KERNEL[offset + BLUR_RADIUS]!
+				for (let channel = 0; channel < 4; channel++) {
+					horizontal[(y * width + x) * 4 + channel] +=
+						imageData.data[sourceIndex + channel]! * weight
+				}
+			}
+		}
+	}
+
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			for (let offset = -BLUR_RADIUS; offset <= BLUR_RADIUS; offset++) {
+				const sampleY = Math.max(0, Math.min(height - 1, y + offset))
+				const sourceIndex = (sampleY * width + x) * 4
+				const weight = BLUR_KERNEL[offset + BLUR_RADIUS]!
+				for (let channel = 0; channel < 4; channel++) {
+					output.data[(y * width + x) * 4 + channel] += horizontal[sourceIndex + channel]! * weight
+				}
+			}
+		}
+	}
+
+	return output
+}

packages/ui/src/components/image-viewer-editor/image-viewer-editor-messages.ts

@@ -0,0 +1,56 @@
+import { defineMessages } from '#ui/composables/i18n'
+
+export const imageViewerEditorMessages = defineMessages({
+	close: { id: 'image-viewer.close', defaultMessage: 'Close' },
+	previous: { id: 'image-viewer.previous', defaultMessage: 'Previous image' },
+	next: { id: 'image-viewer.next', defaultMessage: 'Next image' },
+	edit: { id: 'image-viewer.edit', defaultMessage: 'Edit' },
+	saveAsCopy: { id: 'image-viewer.editor.save-as-new', defaultMessage: 'Save copy' },
+	overwrite: { id: 'image-viewer.editor.overwrite', defaultMessage: 'Overwrite' },
+	moreSaveOptions: {
+		id: 'image-viewer.editor.more-save-options',
+		defaultMessage: 'More save options',
+	},
+	saveImage: { id: 'image-viewer.editor.save-image', defaultMessage: 'Save image' },
+	select: { id: 'image-viewer.editor.tool.select', defaultMessage: 'Select' },
+	pen: { id: 'image-viewer.editor.tool.pen', defaultMessage: 'Pen' },
+	highlight: { id: 'image-viewer.editor.tool.highlight', defaultMessage: 'Highlight' },
+	eraser: { id: 'image-viewer.editor.tool.eraser', defaultMessage: 'Eraser' },
+	crop: { id: 'image-viewer.editor.tool.crop', defaultMessage: 'Crop' },
+	text: { id: 'image-viewer.editor.tool.text', defaultMessage: 'Text' },
+	arrow: { id: 'image-viewer.editor.tool.arrow', defaultMessage: 'Arrow' },
+	rectangle: { id: 'image-viewer.editor.tool.rectangle', defaultMessage: 'Rectangle' },
+	ellipse: { id: 'image-viewer.editor.tool.ellipse', defaultMessage: 'Ellipse' },
+	censor: { id: 'image-viewer.editor.tool.censor', defaultMessage: 'Censor' },
+	blur: { id: 'image-viewer.editor.censor.blur', defaultMessage: 'Blur' },
+	solid: { id: 'image-viewer.editor.censor.solid', defaultMessage: 'Solid' },
+	censorMode: { id: 'image-viewer.editor.censor.mode', defaultMessage: 'Censor type' },
+	eraserMode: { id: 'image-viewer.editor.eraser.mode', defaultMessage: 'Eraser mode' },
+	element: { id: 'image-viewer.editor.eraser.element', defaultMessage: 'Element' },
+	area: { id: 'image-viewer.editor.eraser.area', defaultMessage: 'Area' },
+	cropDimensions: {
+		id: 'image-viewer.editor.crop.dimensions',
+		defaultMessage: '{width} × {height} px',
+	},
+	resetCrop: { id: 'image-viewer.editor.crop.reset', defaultMessage: 'Reset crop' },
+	colour: { id: 'image-viewer.editor.colour', defaultMessage: 'Colour' },
+	width: { id: 'image-viewer.editor.width', defaultMessage: 'Width' },
+	size: { id: 'image-viewer.editor.size', defaultMessage: 'Size' },
+	undo: { id: 'image-viewer.editor.undo', defaultMessage: 'Undo' },
+	redo: { id: 'image-viewer.editor.redo', defaultMessage: 'Redo' },
+	deleteSelection: {
+		id: 'image-viewer.editor.delete-selection',
+		defaultMessage: 'Delete selected annotation',
+	},
+	zoomIn: { id: 'image-viewer.editor.zoom-in', defaultMessage: 'Zoom in' },
+	zoomOut: { id: 'image-viewer.editor.zoom-out', defaultMessage: 'Zoom out' },
+	fit: { id: 'image-viewer.editor.zoom-fit', defaultMessage: 'Fit' },
+	fitToWorkspace: {
+		id: 'image-viewer.editor.zoom-fit-workspace',
+		defaultMessage: 'Fit to workspace',
+	},
+	annotationTools: {
+		id: 'image-viewer.editor.image-editing-tools',
+		defaultMessage: 'Image editing tools',
+	},
+})

packages/ui/src/components/image-viewer-editor/image-viewer-editor-types.ts

@@ -0,0 +1,52 @@
+export type ImageViewerEditorMode = 'view' | 'edit'
+
+export type ScreenshotEditorTool =
+	| 'select'
+	| 'pen'
+	| 'highlight'
+	| 'eraser'
+	| 'crop'
+	| 'text'
+	| 'arrow'
+	| 'rectangle'
+	| 'ellipse'
+	| 'censor'
+
+export type ScreenshotCensorMode = 'blur' | 'solid'
+
+export type ScreenshotEraserMode = 'element' | 'area'
+
+export type ScreenshotEditorObjectKind =
+	| 'annotation'
+	| 'arrow'
+	| 'background'
+	| 'censor'
+	| 'ellipse'
+	| 'highlight'
+	| 'pen'
+	| 'rectangle'
+	| 'text'
+
+export type ScreenshotEditorPropertyKind = Exclude<
+	ScreenshotEditorObjectKind,
+	'annotation' | 'background'
+>
+
+export type ScreenshotEditorSourceRect = {
+	left: number
+	top: number
+	width: number
+	height: number
+}
+
+export type ScreenshotEditorObjectState = Record<string, unknown> & {
+	editorKind?: ScreenshotEditorObjectKind
+	sourceRect?: ScreenshotEditorSourceRect
+	censorMode?: ScreenshotCensorMode
+	censorColor?: string
+}
+
+export type EditorHistoryEntry = {
+	objects: ScreenshotEditorObjectState[]
+	crop: ScreenshotEditorSourceRect
+}

packages/ui/src/components/image-viewer-editor/index.vue

@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { injectImageViewerEditor } from '#ui/providers/image-viewer-editor'
+
+import Editor from './editor.vue'
+import type { ImageViewerEditorMode } from './image-viewer-editor-types'
+import type {
+	ImageViewerEditorData,
+	ImageViewerEditorItem,
+	ImageViewerEditorSavePayload,
+} from './types'
+
+const MAX_CACHED_ITEMS = 5
+
+const props = withDefaults(
+	defineProps<{
+		items: ImageViewerEditorItem[]
+		editor?: 'enabled' | 'disabled'
+		saving?: boolean
+	}>(),
+	{
+		editor: 'disabled',
+		saving: false,
+	},
+)
+
+const emit = defineEmits<{
+	show: [item: ImageViewerEditorItem, index: number]
+	hide: []
+	navigate: [item: ImageViewerEditorItem, index: number, direction: 'next' | 'previous']
+	save: [payload: ImageViewerEditorSavePayload]
+}>()
+
+const activeId = ref<string | null>(null)
+const mode = ref<ImageViewerEditorMode>('view')
+const titleContrast = ref<'dark' | 'light'>('light')
+const descriptionContrast = ref<'dark' | 'light'>('light')
+const closeAfterEditing = ref(false)
+const editorComponent = ref<InstanceType<typeof Editor>>()
+const titleElement = ref<HTMLElement>()
+const descriptionElement = ref<HTMLElement>()
+const context = injectImageViewerEditor(null)
+const itemDataCache = new Map<string, Promise<ImageViewerEditorData>>()
+const itemImageCache = new Map<string, HTMLImageElement>()
+let headingContrastTimer: ReturnType<typeof setTimeout> | undefined
+
+const activeIndex = computed(() => props.items.findIndex((item) => item.id === activeId.value))
+const activeItem = computed(() => props.items[activeIndex.value] ?? null)
+const canEdit = computed(
+	() =>
+		props.editor === 'enabled' &&
+		Boolean(context?.loadEditorData) &&
+		Boolean(activeItem.value?.editorSource),
+)
+
+watch(activeItem, (item) => {
+	if (!item && activeId.value !== null) hide()
+})
+
+function getItemCacheKey(item: ImageViewerEditorItem) {
+	return [item.id, item.src, item.editorSource?.id, item.editorSource?.path].join('\0')
+}
+
+function loadItemData(item: ImageViewerEditorItem): Promise<ImageViewerEditorData> {
+	const key = getItemCacheKey(item)
+	const cached = itemDataCache.get(key)
+	if (cached) {
+		itemDataCache.delete(key)
+		itemDataCache.set(key, cached)
+		return cached
+	}
+
+	const promise = (async () => {
+		if (item.editorSource && context) return await context.loadEditorData(item.editorSource)
+		const response = await fetch(item.src)
+		if (!response.ok) throw new Error(`Could not load image: ${response.statusText}`)
+		return { source: await response.blob() }
+	})()
+
+	itemDataCache.set(key, promise)
+	while (itemDataCache.size > MAX_CACHED_ITEMS) {
+		const oldestKey = itemDataCache.keys().next().value
+		if (oldestKey === undefined) break
+		itemDataCache.delete(oldestKey)
+	}
+	void promise.catch(() => {
+		if (itemDataCache.get(key) === promise) itemDataCache.delete(key)
+	})
+	return promise
+}
+
+function preloadItemImage(item: ImageViewerEditorItem) {
+	const key = getItemCacheKey(item)
+	const cached = itemImageCache.get(key)
+	if (cached) {
+		itemImageCache.delete(key)
+		itemImageCache.set(key, cached)
+		return
+	}
+
+	const image = new Image()
+	image.src = item.src
+	itemImageCache.set(key, image)
+	while (itemImageCache.size > MAX_CACHED_ITEMS) {
+		const oldestKey = itemImageCache.keys().next().value
+		if (oldestKey === undefined) break
+		itemImageCache.delete(oldestKey)
+	}
+	void image.decode().catch(() => undefined)
+}
+
+function preloadItemsAround(index: number) {
+	if (!props.items.length) return
+	const indexes = new Set([
+		index,
+		(index - 1 + props.items.length) % props.items.length,
+		(index + 1) % props.items.length,
+	])
+	for (const itemIndex of indexes) {
+		const item = props.items[itemIndex]
+		if (item) {
+			preloadItemImage(item)
+			void loadItemData(item).catch(() => undefined)
+		}
+	}
+}
+
+function show(index: number) {
+	const item = props.items[index]
+	if (!item) return
+	cancelHeadingContrastUpdate()
+	preloadItemsAround(index)
+	if (activeId.value === null) {
+		titleContrast.value = 'light'
+		descriptionContrast.value = 'light'
+		context?.onShow?.()
+	}
+	activeId.value = item.id
+	mode.value = 'view'
+	closeAfterEditing.value = false
+	emit('show', item, index)
+}
+
+async function edit(index: number) {
+	show(index)
+	await beginEditing(true)
+}
+
+async function beginEditing(closeOnCancel = false) {
+	if (!canEdit.value || props.saving) return
+	closeAfterEditing.value = closeOnCancel
+	mode.value = 'edit'
+	await nextTick()
+}
+
+function finishEditing() {
+	if (props.saving) return
+	if (closeAfterEditing.value) {
+		hide()
+	} else {
+		mode.value = 'view'
+	}
+}
+
+function hide() {
+	if (activeId.value === null || props.saving) return
+	cancelHeadingContrastUpdate()
+	activeId.value = null
+	mode.value = 'view'
+	closeAfterEditing.value = false
+	itemDataCache.clear()
+	itemImageCache.clear()
+	context?.onHide?.()
+	emit('hide')
+}
+
+function navigate(offset: number, direction: 'next' | 'previous') {
+	if (mode.value !== 'view' || props.items.length < 2) return
+	cancelHeadingContrastUpdate()
+	const index = (activeIndex.value + offset + props.items.length) % props.items.length
+	preloadItemsAround(index)
+	activeId.value = props.items[index].id
+	emit('navigate', props.items[index], index, direction)
+}
+
+function updateHeadingContrast() {
+	cancelHeadingContrastUpdate()
+	headingContrastTimer = setTimeout(() => {
+		headingContrastTimer = undefined
+		if (titleElement.value) {
+			titleContrast.value = editorComponent.value?.getTextContrast(titleElement.value) ?? 'light'
+		}
+		if (descriptionElement.value) {
+			descriptionContrast.value =
+				editorComponent.value?.getTextContrast(descriptionElement.value) ?? 'light'
+		}
+	}, 120)
+}
+
+function cancelHeadingContrastUpdate() {
+	if (headingContrastTimer === undefined) return
+	clearTimeout(headingContrastTimer)
+	headingContrastTimer = undefined
+}
+
+function next() {
+	navigate(1, 'next')
+}
+
+function previous() {
+	navigate(-1, 'previous')
+}
+
+async function markSavedAndView(itemId?: string) {
+	editorComponent.value?.markSaved()
+	mode.value = 'view'
+	closeAfterEditing.value = false
+	await nextTick()
+	if (itemId && props.items.some((item) => item.id === itemId)) activeId.value = itemId
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (!activeItem.value || mode.value === 'edit' || document.querySelector('.modal-root')) return
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		hide()
+	} else if (event.key === 'ArrowLeft') {
+		event.preventDefault()
+		previous()
+	} else if (event.key === 'ArrowRight') {
+		event.preventDefault()
+		next()
+	}
+}
+
+onMounted(() => document.addEventListener('keydown', handleKeydown))
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', handleKeydown)
+	cancelHeadingContrastUpdate()
+	itemDataCache.clear()
+	itemImageCache.clear()
+	if (activeId.value !== null) context?.onHide?.()
+})
+
+defineExpose({ show, edit, hide, next, previous, markSavedAndView })
+</script>
+
+<template>
+	<Teleport to="body">
+		<div
+			v-if="activeItem"
+			class="fixed inset-0 z-[110] overflow-hidden bg-black/95 text-white"
+			role="dialog"
+			aria-modal="true"
+			:aria-label="activeItem.title || activeItem.alt"
+			@click.self="mode === 'view' && hide()"
+		>
+			<header
+				v-if="activeItem.title || activeItem.description"
+				class="absolute inset-x-6 top-[calc(var(--top-bar-height,3rem)_+_1.5rem)] z-10 min-w-0"
+				@click.stop
+			>
+				<div class="w-fit min-w-0 max-w-full">
+					<h2
+						v-if="activeItem.title"
+						ref="titleElement"
+						class="m-0 max-w-[min(42rem,70vw)] truncate text-base font-semibold leading-snug transition-colors duration-200 ease-out"
+						:class="titleContrast === 'dark' ? 'text-gray-950' : 'text-white'"
+					>
+						{{ activeItem.title }}
+					</h2>
+					<p
+						v-if="activeItem.description"
+						ref="descriptionElement"
+						class="mb-0 mt-1 max-w-[min(42rem,70vw)] truncate text-xs leading-snug opacity-70 transition-colors duration-200 ease-out"
+						:class="descriptionContrast === 'dark' ? 'text-gray-950' : 'text-white'"
+					>
+						{{ activeItem.description }}
+					</p>
+				</div>
+			</header>
+
+			<Editor
+				ref="editorComponent"
+				:item="activeItem"
+				:mode="mode"
+				:index="activeIndex"
+				:count="items.length"
+				:can-edit="canEdit"
+				:saving="saving"
+				:load-data="loadItemData"
+				@close="hide"
+				@edit="beginEditing"
+				@next="next"
+				@previous="previous"
+				@cancel="finishEditing"
+				@save="emit('save', $event)"
+				@image-ready="updateHeadingContrast"
+			>
+				<template #actions>
+					<slot name="actions" :item="activeItem" :index="activeIndex" :hide="hide" />
+				</template>
+			</Editor>
+		</div>
+	</Teleport>
+</template>

packages/ui/src/components/image-viewer-editor/toolbar.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+	CircleIcon,
+	CropIcon,
+	EraserIcon,
+	EyeOffIcon,
+	HighlighterIcon,
+	MousePointer2Icon,
+	MoveUpRightIcon,
+	PencilIcon,
+	SquareIcon,
+	TypeIcon,
+} from '@modrinth/assets'
+
+import IconButton from '#ui/components/base/buttons/IconButton.vue'
+import { useVIntl } from '#ui/composables/i18n'
+
+import { imageViewerEditorMessages as messages } from './image-viewer-editor-messages'
+import type { ScreenshotEditorTool } from './image-viewer-editor-types'
+
+const props = defineProps<{
+	tool: ScreenshotEditorTool
+}>()
+
+const emit = defineEmits<{
+	select: [tool: ScreenshotEditorTool]
+}>()
+
+const { formatMessage } = useVIntl()
+
+const toolGroups = [
+	[
+		{ id: 'select', message: messages.select, icon: MousePointer2Icon, shortcut: 'V' },
+		{ id: 'crop', message: messages.crop, icon: CropIcon, shortcut: 'K' },
+	],
+	[
+		{ id: 'pen', message: messages.pen, icon: PencilIcon, shortcut: 'P' },
+		{ id: 'highlight', message: messages.highlight, icon: HighlighterIcon, shortcut: 'H' },
+		{ id: 'eraser', message: messages.eraser, icon: EraserIcon, shortcut: 'E' },
+	],
+	[
+		{ id: 'arrow', message: messages.arrow, icon: MoveUpRightIcon, shortcut: 'A' },
+		{ id: 'rectangle', message: messages.rectangle, icon: SquareIcon, shortcut: 'R' },
+		{ id: 'ellipse', message: messages.ellipse, icon: CircleIcon, shortcut: 'O' },
+	],
+	[
+		{ id: 'text', message: messages.text, icon: TypeIcon, shortcut: 'T' },
+		{ id: 'censor', message: messages.censor, icon: EyeOffIcon, shortcut: 'C' },
+	],
+] satisfies Array<
+	Array<{
+		id: ScreenshotEditorTool
+		message: (typeof messages)[keyof typeof messages]
+		icon: typeof MousePointer2Icon
+		shortcut: string
+	}>
+>
+
+function tooltip(groupIndex: number, toolIndex: number) {
+	const option = toolGroups[groupIndex]?.[toolIndex]
+	return option ? `${formatMessage(option.message)} (${option.shortcut})` : ''
+}
+</script>
+
+<template>
+	<div
+		class="absolute left-6 top-1/2 z-10 flex -translate-y-1/2 flex-col items-center gap-2 rounded-[20px] border border-solid border-white/10 bg-surface-3 px-3 py-2.5 shadow-[0_1rem_3rem_rgb(0_0_0_/_32%)] max-[900px]:bottom-[5.25rem] max-[900px]:left-1/2 max-[900px]:top-auto max-[900px]:-translate-x-1/2 max-[900px]:translate-y-0 max-[900px]:flex-row"
+		role="toolbar"
+		:aria-label="formatMessage(messages.annotationTools)"
+		@click.stop
+	>
+		<template v-for="(group, groupIndex) in toolGroups" :key="group[0]?.id">
+			<div v-if="groupIndex > 0" class="h-px w-6 bg-white/10 max-[900px]:h-6 max-[900px]:w-px" />
+			<IconButton
+				v-for="(option, toolIndex) in group"
+				:key="option.id"
+				v-tooltip="tooltip(groupIndex, toolIndex)"
+				:label="formatMessage(option.message)"
+				type="quiet"
+				:color="props.tool === option.id ? 'green' : undefined"
+				:class="{
+					'!bg-highlight-green shadow-[inset_0_0_0_1px_var(--color-green)]':
+						props.tool === option.id,
+				}"
+				:aria-pressed="props.tool === option.id"
+				@click="emit('select', option.id)"
+			>
+				<component :is="option.icon" />
+			</IconButton>
+		</template>
+	</div>
+</template>

packages/ui/src/components/image-viewer-editor/types.ts

@@ -0,0 +1,23 @@
+export type ImageViewerEditorSource = {
+	id: string
+	path: string
+}
+
+export type ImageViewerEditorItem = {
+	id: string
+	src: string
+	alt: string
+	title?: string
+	description?: string
+	editorSource?: ImageViewerEditorSource
+}
+
+export type ImageViewerEditorData = {
+	source: Blob
+}
+
+export type ImageViewerEditorSavePayload = {
+	item: ImageViewerEditorItem
+	pngBytes: Uint8Array
+	mode: 'create_copy' | 'replace_edit'
+}

packages/ui/src/components/index.ts

@@ -6,6 +6,13 @@ export * from './changelog'
 export * from './chart'
 export * from './content'
 export * from './external_files'
+export { default as ImageViewerEditor } from './image-viewer-editor/index.vue'
+export type {
+	ImageViewerEditorData,
+	ImageViewerEditorItem,
+	ImageViewerEditorSavePayload,
+	ImageViewerEditorSource,
+} from './image-viewer-editor/types'
 export * from './modal'
 export * from './nav'
 export * from './notifications'

packages/ui/src/components/modal/NewModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<Teleport to="body">
-		<div v-if="open" class="modal-root">
+		<div v-if="open" class="modal-root" data-modal-root :data-modal-id="modalId">
 			<div
 				:class="{ shown: visible }"
 				class="tauri-overlay"
@@ -267,6 +267,12 @@ function getFocusableElements(): HTMLElement[] {
 	return Array.from(modalBodyRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
 }
 
+function renderedModalDepth(): number {
+	return Array.from(document.querySelectorAll<HTMLElement>('[data-modal-root]')).filter(
+		(root) => root.dataset.modalId !== modalId,
+	).length
+}
+
 function show(event?: MouseEvent) {
 	if (hideTimeout) {
 		clearTimeout(hideTimeout)
@@ -274,7 +280,7 @@ function show(event?: MouseEvent) {
 	}
 	props.onShow?.()
 	const wasEmpty = modalStackSize() === 0
-	stackDepth.value = modalStackSize()
+	stackDepth.value = Math.max(modalStackSize(), renderedModalDepth())
 	open.value = true
 	previousFocusEl = document.activeElement
 	pushModal()

packages/ui/src/composables/modal-stack.ts

@@ -1,8 +1,23 @@
 import { computed, type Ref, ref } from 'vue'
 
 const isClient = typeof window !== 'undefined'
-const stack: symbol[] = []
-const stackSizeRef = ref(0)
+
+type ModalStackState = {
+	stack: symbol[]
+	stackSizeRef: Ref<number>
+}
+
+const MODAL_STACK_STATE_KEY = '__modrinth_ui_modal_stack_state__' as const
+const globalScope = globalThis as typeof globalThis & {
+	[MODAL_STACK_STATE_KEY]?: ModalStackState
+}
+const modalStackState: ModalStackState = globalScope[MODAL_STACK_STATE_KEY] ?? {
+	stack: [],
+	stackSizeRef: ref(0),
+}
+globalScope[MODAL_STACK_STATE_KEY] = modalStackState
+
+const { stack, stackSizeRef } = modalStackState
 
 export function useModalStack() {
 	const id = Symbol()

packages/ui/src/layouts/shared/browse-tab/layout.vue

@@ -255,7 +255,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		:provided-message="lockedMessages?.providedBy"
 	/>
 
-	<div class="search [overflow-anchor:none]">
+	<div class="search mt-1 [overflow-anchor:none]">
 		<section v-if="ctx.loading.value" class="offline">
 			<component :is="ctx.loadingComponent ?? LoadingIndicator" />
 		</section>

packages/ui/src/layouts/shared/console/layout.vue

@@ -14,49 +14,51 @@
 			@dismiss="ctx.onDismissCrash?.()"
 		/>
 
-		<div class="flex items-center gap-2">
-			<Input
-				v-model="searchQuery"
-				:icon="SearchIcon"
-				placeholder="Search logs"
-				wrapper-class="flex-1"
-				size="medium"
-				clearable
-			/>
-			<div v-if="ctx.logSources?.value && ctx.activeLogSourceIndex" class="w-[220px]">
-				<Combobox
-					:model-value="ctx.activeLogSourceIndex.value"
-					:options="logSourceOptions"
-					trigger-size="lg"
-					@update:model-value="(v) => (ctx.activeLogSourceIndex!.value = v)"
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2">
+				<Input
+					v-model="searchQuery"
+					:icon="SearchIcon"
+					placeholder="Search logs"
+					wrapper-class="flex-1"
+					size="medium"
+					clearable
+				/>
+				<div v-if="ctx.logSources?.value && ctx.activeLogSourceIndex" class="w-[220px]">
+					<Combobox
+						:model-value="ctx.activeLogSourceIndex.value"
+						:options="logSourceOptions"
+						trigger-size="lg"
+						@update:model-value="(v) => (ctx.activeLogSourceIndex!.value = v)"
+					/>
+				</div>
+			</div>
+
+			<div class="flex items-center justify-between">
+				<ConsoleFilterPills
+					v-model="activeFilters"
+					:present-levels="presentLevels"
+					@toggle="handleFilterToggle"
+				/>
+				<ConsoleActionButtons
+					:show-clear="isLiveSource"
+					:has-logs="hasLogs"
+					:share-disabled="resolvedShareDisabled"
+					:sharing="isSharing"
+					:fullscreen="isFullscreen"
+					:clear-disabled="resolvedClearDisabled"
+					:clear-disabled-tooltip="resolvedClearDisabledTooltip"
+					:show-delete="showDelete"
+					:delete-disabled="resolvedDeleteDisabled"
+					:delete-disabled-tooltip="ctx.deleteDisabledTooltip"
+					@clear="handleClear"
+					@share="handleShare"
+					@toggle-fullscreen="toggleFullscreen"
+					@delete="handleDelete"
 				/>
 			</div>
 		</div>
 
-		<div class="flex items-center justify-between">
-			<ConsoleFilterPills
-				v-model="activeFilters"
-				:present-levels="presentLevels"
-				@toggle="handleFilterToggle"
-			/>
-			<ConsoleActionButtons
-				:show-clear="isLiveSource"
-				:has-logs="hasLogs"
-				:share-disabled="resolvedShareDisabled"
-				:sharing="isSharing"
-				:fullscreen="isFullscreen"
-				:clear-disabled="resolvedClearDisabled"
-				:clear-disabled-tooltip="resolvedClearDisabledTooltip"
-				:show-delete="showDelete"
-				:delete-disabled="resolvedDeleteDisabled"
-				:delete-disabled-tooltip="ctx.deleteDisabledTooltip"
-				@clear="handleClear"
-				@share="handleShare"
-				@toggle-fullscreen="toggleFullscreen"
-				@delete="handleDelete"
-			/>
-		</div>
-
 		<BaseTerminal
 			ref="terminalRef"
 			class="min-h-0 flex-1"

packages/ui/src/layouts/shared/content-tab/layout.vue

@@ -936,8 +936,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 				/>
 
 				<template v-if="ctx.items.value.length > 0">
-					<div class="flex flex-col gap-4">
-						<span v-if="ctx.managedContent.value" class="text-xl font-semibold text-contrast">
+					<div class="flex flex-col gap-2">
+						<span v-if="ctx.managedContent.value" class="mb-2 text-xl font-semibold text-contrast">
 							{{ formatMessage(messages.additionalContent) }}
 						</span>
 
@@ -1217,6 +1217,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 
 						<ContentCardTable
 							v-model:selected-ids="selectedIds"
+							class="mt-2"
 							:items="tableItems"
 							:show-selection="true"
 							@update:enabled="handleToggleEnabledById"

packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { SearchIcon } from '@modrinth/assets'
 import Fuse from 'fuse.js/dist/fuse.basic'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
-import Button from '#ui/components/base/buttons/Button.vue'
+import CheckCircleButton from '#ui/components/base/buttons/CheckCircleButton.vue'
 import Input from '#ui/components/base/inputs/Input.vue'
 import {
 	buildLocaleMessages,
@@ -71,7 +71,7 @@ type LocaleInfo = {
 	category: Category
 	tag: string
 	displayName: string
-	browserDisplayName: string
+	translatedName: string
 	flagUrl?: string
 	searchTerms?: string[]
 	coverage?: LanguageCoverageStats
@@ -82,34 +82,6 @@ const localeFlagRegions: Record<string, string> = {
 	'sr-CS': 'rs',
 }
 
-const $browserLocales = ref([props.currentLocale])
-
-onMounted(() => {
-	$browserLocales.value = navigator.languages.length
-		? [...navigator.languages]
-		: [navigator.language]
-})
-
-const $browserDisplayNames = computed(() => {
-	try {
-		return new Intl.DisplayNames($browserLocales.value, { type: 'language' })
-	} catch {
-		return undefined
-	}
-})
-
-function getBrowserDisplayName(tag: string, fallback: string): string {
-	try {
-		return $browserDisplayNames.value?.of(tag) ?? fallback
-	} catch {
-		try {
-			return $browserDisplayNames.value?.of(tag.split('-')[0]) ?? fallback
-		} catch {
-			return fallback
-		}
-	}
-}
-
 function getFlagUrl(tag: string): string | undefined {
 	const region = localeFlagRegions[tag] ?? tag.split('-').at(-1)
 	if (!region || !/^[a-z]{2}$/i.test(region)) return undefined
@@ -125,14 +97,13 @@ const $locales = computed(() => {
 		const meta = localeMetas[tag] ?? null
 		const displayName = meta?.displayName ?? loc.name
 		const translatedName = formatMessage(loc.translatedName)
-		const browserDisplayName = getBrowserDisplayName(tag, translatedName)
 		const searchTerms = meta?.searchTerms === '-' ? undefined : meta?.searchTerms?.split('\n')
 
 		result.push({
 			tag,
 			category: 'default',
 			displayName,
-			browserDisplayName,
+			translatedName,
 			flagUrl: getFlagUrl(tag),
 			searchTerms,
 			coverage: props.coverageByLocale?.[tag],
@@ -149,7 +120,7 @@ const isQueryEmpty = () => $query.value.trim().length === 0
 const fuse = computed(
 	() =>
 		new Fuse<LocaleInfo>($locales.value, {
-			keys: ['tag', 'displayName', 'browserDisplayName', 'searchTerms'],
+			keys: ['tag', 'displayName', 'translatedName', 'searchTerms'],
 			threshold: 0.4,
 			distance: 100,
 		}),
@@ -215,18 +186,16 @@ function onItemClick(e: MouseEvent, loc: LocaleInfo) {
 	changeLocale(loc.tag)
 }
 
-function showBrowserDisplayName(loc: LocaleInfo): boolean {
-	return (
-		loc.browserDisplayName.localeCompare(loc.displayName, undefined, { sensitivity: 'base' }) !== 0
-	)
+function showTranslatedName(loc: LocaleInfo): boolean {
+	return loc.translatedName.localeCompare(loc.displayName, undefined, { sensitivity: 'base' }) !== 0
 }
 
 function getItemLabel(loc: LocaleInfo) {
 	const coverageLabel = loc.coverage
 		? `. ${formatMessage(messages.coverageLabel, { percentage: loc.coverage.percentage })}`
 		: ''
-	const browserDisplayName = showBrowserDisplayName(loc) ? `. ${loc.browserDisplayName}` : ''
-	return `${loc.displayName}${browserDisplayName}${coverageLabel}`
+	const translatedName = showTranslatedName(loc) ? `. ${loc.translatedName}` : ''
+	return `${loc.displayName}${translatedName}${coverageLabel}`
 }
 
 function getCoverageTooltip(coverage: LanguageCoverageStats): string {
@@ -272,7 +241,12 @@ function getCategoryName(category: Category): string {
 			</div>
 		</div>
 
-		<div ref="$languagesList" class="flex flex-col gap-2.5">
+		<div
+			ref="$languagesList"
+			role="radiogroup"
+			:aria-label="getCategoryName(isQueryEmpty() ? 'default' : 'searchResult')"
+			class="flex flex-col gap-1"
+		>
 			<template v-for="[category, categoryLocales] in $displayCategories" :key="category">
 				<strong class="mt-4 font-semibold text-contrast">
 					{{ getCategoryName(category) }}
@@ -287,18 +261,10 @@ function getCategoryName(category: Category): string {
 				</div>
 
 				<template v-for="loc in categoryLocales" :key="loc.tag">
-					<Button
-						:type="$activeLocale === loc.tag ? 'colored' : 'base'"
-						:color="$activeLocale === loc.tag ? 'green' : undefined"
-						:aria-pressed="$activeLocale === loc.tag"
+					<CheckCircleButton
+						:checked="$activeLocale === loc.tag"
 						:disabled="isChangingLocale() && $changingTo !== loc.tag"
 						:aria-label="getItemLabel(loc)"
-						class="w-full !justify-start !gap-2 !text-left sm:!h-10"
-						:class="
-							$activeLocale === loc.tag
-								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)]'
-								: ''
-						"
 						@click="(e) => onItemClick(e, loc)"
 					>
 						<img
@@ -313,10 +279,10 @@ function getCategoryName(category: Category): string {
 						<span class="flex min-w-0 flex-1 items-baseline gap-2 overflow-hidden">
 							<span class="truncate text-sm sm:text-base">{{ loc.displayName }}</span>
 							<span
-								v-if="showBrowserDisplayName(loc)"
+								v-if="showTranslatedName(loc)"
 								class="truncate text-xs font-normal text-secondary sm:text-sm"
 							>
-								{{ loc.browserDisplayName }}
+								{{ loc.translatedName }}
 							</span>
 						</span>
 
@@ -327,7 +293,7 @@ function getCategoryName(category: Category): string {
 						>
 							{{ loc.coverage.percentage }}%
 						</span>
-					</Button>
+					</CheckCircleButton>
 				</template>
 			</template>
 		</div>

packages/ui/src/locales/en-US/index.json

@@ -2018,6 +2018,117 @@
   "icon-select.select": {
     "defaultMessage": "Select icon"
   },
+  "image-viewer.close": {
+    "defaultMessage": "Close"
+  },
+  "image-viewer.edit": {
+    "defaultMessage": "Edit"
+  },
+  "image-viewer.editor.censor.blur": {
+    "defaultMessage": "Blur"
+  },
+  "image-viewer.editor.censor.mode": {
+    "defaultMessage": "Censor type"
+  },
+  "image-viewer.editor.censor.solid": {
+    "defaultMessage": "Solid"
+  },
+  "image-viewer.editor.colour": {
+    "defaultMessage": "Colour"
+  },
+  "image-viewer.editor.crop.dimensions": {
+    "defaultMessage": "{width} × {height} px"
+  },
+  "image-viewer.editor.crop.reset": {
+    "defaultMessage": "Reset crop"
+  },
+  "image-viewer.editor.delete-selection": {
+    "defaultMessage": "Delete selected annotation"
+  },
+  "image-viewer.editor.eraser.area": {
+    "defaultMessage": "Area"
+  },
+  "image-viewer.editor.eraser.element": {
+    "defaultMessage": "Element"
+  },
+  "image-viewer.editor.eraser.mode": {
+    "defaultMessage": "Eraser mode"
+  },
+  "image-viewer.editor.image-editing-tools": {
+    "defaultMessage": "Image editing tools"
+  },
+  "image-viewer.editor.more-save-options": {
+    "defaultMessage": "More save options"
+  },
+  "image-viewer.editor.overwrite": {
+    "defaultMessage": "Overwrite"
+  },
+  "image-viewer.editor.redo": {
+    "defaultMessage": "Redo"
+  },
+  "image-viewer.editor.save-as-new": {
+    "defaultMessage": "Save copy"
+  },
+  "image-viewer.editor.save-image": {
+    "defaultMessage": "Save image"
+  },
+  "image-viewer.editor.size": {
+    "defaultMessage": "Size"
+  },
+  "image-viewer.editor.tool.arrow": {
+    "defaultMessage": "Arrow"
+  },
+  "image-viewer.editor.tool.censor": {
+    "defaultMessage": "Censor"
+  },
+  "image-viewer.editor.tool.crop": {
+    "defaultMessage": "Crop"
+  },
+  "image-viewer.editor.tool.ellipse": {
+    "defaultMessage": "Ellipse"
+  },
+  "image-viewer.editor.tool.eraser": {
+    "defaultMessage": "Eraser"
+  },
+  "image-viewer.editor.tool.highlight": {
+    "defaultMessage": "Highlight"
+  },
+  "image-viewer.editor.tool.pen": {
+    "defaultMessage": "Pen"
+  },
+  "image-viewer.editor.tool.rectangle": {
+    "defaultMessage": "Rectangle"
+  },
+  "image-viewer.editor.tool.select": {
+    "defaultMessage": "Select"
+  },
+  "image-viewer.editor.tool.text": {
+    "defaultMessage": "Text"
+  },
+  "image-viewer.editor.undo": {
+    "defaultMessage": "Undo"
+  },
+  "image-viewer.editor.width": {
+    "defaultMessage": "Width"
+  },
+  "image-viewer.editor.zoom-fit": {
+    "defaultMessage": "Fit"
+  },
+  "image-viewer.editor.zoom-fit-workspace": {
+    "defaultMessage": "Fit to workspace"
+  },
+  "image-viewer.editor.zoom-in": {
+    "defaultMessage": "Zoom in"
+  },
+  "image-viewer.editor.zoom-out": {
+    "defaultMessage": "Zoom out"
+  },
+  "image-viewer.next": {
+    "defaultMessage": "Next image"
+  },
+  "image-viewer.previous": {
+    "defaultMessage": "Previous image"
+  },
   "input.search-version.placeholder": {
     "defaultMessage": "Search version..."
   },

packages/ui/src/providers/image-viewer-editor.ts

@@ -0,0 +1,15 @@
+import type {
+	ImageViewerEditorData,
+	ImageViewerEditorSource,
+} from '#ui/components/image-viewer-editor/types'
+
+import { createContext } from '.'
+
+export interface ImageViewerEditorContext {
+	loadEditorData: (source: ImageViewerEditorSource) => Promise<ImageViewerEditorData>
+	onShow?: () => void
+	onHide?: () => void
+}
+
+export const [injectImageViewerEditor, provideImageViewerEditor] =
+	createContext<ImageViewerEditorContext>('ImageViewerEditor')

packages/ui/src/providers/index.ts

@@ -8,6 +8,7 @@ export * from './file-drop'
 export * from './file-picker'
 export * from './hosting-purchase-intent'
 export * from './i18n'
+export * from './image-viewer-editor'
 export * from './instance-import'
 export * from './loading-state'
 export * from './modal-behavior'

packages/ui/src/stories/base/ImageViewerEditor.stories.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import { Button } from '../../components/base/buttons'
+import ImageViewerEditor from '../../components/image-viewer-editor/index.vue'
+import type { ImageViewerEditorItem } from '../../components/image-viewer-editor/types'
+import { provideImageViewerEditor } from '../../providers'
+
+const IMAGE_SVG = `
+	<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+		<defs>
+			<linearGradient id="sky" x1="0" y1="0" x2="1" y2="1">
+				<stop stop-color="#172554" />
+				<stop offset="1" stop-color="#14532d" />
+			</linearGradient>
+		</defs>
+		<rect width="1600" height="900" fill="url(#sky)" />
+		<circle cx="1260" cy="210" r="110" fill="#fde68a" opacity="0.9" />
+		<path d="M0 720 360 390 680 690 1040 330 1600 760V900H0Z" fill="#0f172a" />
+		<path d="M0 790 390 560 720 780 1110 510 1600 800V900H0Z" fill="#166534" />
+	</svg>
+`
+const IMAGE_URL = `data:image/svg+xml,${encodeURIComponent(IMAGE_SVG)}`
+const items: ImageViewerEditorItem[] = [
+	{
+		id: 'mountains',
+		src: IMAGE_URL,
+		alt: 'Stylised mountain landscape',
+		title: 'Mountain base at sunset',
+		description: 'Survival world · August 24 at 4:12 PM',
+		editorSource: { id: 'mountains', path: 'mountains.svg' },
+	},
+	{
+		id: 'valley',
+		src: IMAGE_URL,
+		alt: 'Stylised valley landscape',
+		title: 'View from the valley',
+		description: 'Survival world · August 24 at 4:18 PM',
+		editorSource: { id: 'valley', path: 'valley.svg' },
+	},
+]
+
+const meta = {
+	title: 'Base/ImageViewerEditor',
+	component: ImageViewerEditor,
+} satisfies Meta<typeof ImageViewerEditor>
+
+export default meta
+type Story = StoryObj<typeof ImageViewerEditor>
+
+function render(editor: 'enabled' | 'disabled') {
+	return () => ({
+		components: { Button, ImageViewerEditor },
+		setup() {
+			const viewer = ref<InstanceType<typeof ImageViewerEditor>>()
+			provideImageViewerEditor({
+				loadEditorData: async () => ({
+					source: new Blob([IMAGE_SVG], { type: 'image/svg+xml' }),
+				}),
+			})
+			return {
+				editor,
+				items,
+				open: () => viewer.value?.show(0),
+				openEditor: () => viewer.value?.edit(0),
+				viewer,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex gap-2">
+				<Button type="colored" color="brand" @click="open">Open image viewer</Button>
+				<Button v-if="editor === 'enabled'" type="outlined" @click="openEditor">
+					Open image editor
+				</Button>
+			</div>
+			<ImageViewerEditor ref="viewer" :items="items" :editor="editor" />
+		`,
+	})
+}
+
+export const ViewerOnly: Story = {
+	render: render('disabled'),
+}
+
+export const Editable: Story = {
+	render: render('enabled'),
+}

packages/ui/src/stories/buttons/CheckCircleButton.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CheckCircleButton from '../../components/base/buttons/CheckCircleButton.vue'
+
+const meta = {
+	title: 'Buttons/CheckCircleButton',
+	component: CheckCircleButton,
+	args: {
+		checked: false,
+		disabled: false,
+	},
+	render: (args) => ({
+		components: { CheckCircleButton },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<div class="w-96">
+				<CheckCircleButton v-bind="args">Fabric 26.2</CheckCircleButton>
+			</div>
+		`,
+	}),
+} satisfies Meta<typeof CheckCircleButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const States: Story = {
+	render: () => ({
+		components: { CheckCircleButton },
+		template: /*html*/ `
+			<div class="flex w-96 flex-col gap-1" role="radiogroup" aria-label="Example choices">
+				<CheckCircleButton :checked="true">Selected choice</CheckCircleButton>
+				<CheckCircleButton :checked="false">Unselected choice</CheckCircleButton>
+				<CheckCircleButton :checked="false" disabled>Disabled choice</CheckCircleButton>
+			</div>
+		`,
+	}),
+}

packages/ui/src/stories/modal/NewModal.stories.ts

@@ -57,6 +57,31 @@ export const WithActions: Story = {
 	}),
 }
 
+export const Stacked: Story = {
+	render: () => ({
+		components: { NewModal, Button },
+		setup() {
+			const parentModalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const childModalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const openParentModal = () => parentModalRef.value?.show()
+			const openChildModal = () => childModalRef.value?.show()
+			return { parentModalRef, childModalRef, openParentModal, openChildModal }
+		},
+		template: `
+			<div>
+				<Button type="colored" color="brand" @click="openParentModal">Open Parent Modal</Button>
+				<NewModal ref="parentModalRef" header="Parent Modal">
+					<p>The child modal should appear above this surface and backdrop.</p>
+					<Button type="colored" color="brand" @click="openChildModal">Open Child Modal</Button>
+				</NewModal>
+				<NewModal ref="childModalRef" header="Child Modal" max-width="500px">
+					<p>This modal is the topmost layer.</p>
+				</NewModal>
+			</div>
+		`,
+	}),
+}
+
 export const DangerFade: Story = {
 	render: () => ({
 		components: { NewModal, Button },

packages/ui/src/utils/ace-mode-mcfunction.ts

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ace from 'ace-builds'
+
+ace['define'](
+	'ace/mode/mcfunction_highlight_rules',
+	['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
+	function (require: any, exports: any) {
+		const oop = require('ace/lib/oop')
+		const TextHighlightRules = require('ace/mode/text_highlight_rules').TextHighlightRules
+
+		const McfunctionHighlightRules = function (this: any) {
+			this.$rules = {
+				start: [
+					{
+						token: 'comment.doc',
+						regex: /^\s*#>.*$/.source,
+					},
+					{
+						token: 'comment',
+						regex: /^\s*#!.*$/.source,
+					},
+					{
+						token: 'comment',
+						regex: /^\s*##.*$/.source,
+					},
+					{
+						token: 'comment',
+						regex: /^\s*#(?![a-z0-9_.]+:).*$/i.source,
+					},
+					{
+						token: 'string',
+						regex: /"(?:\\.|[^"\\])*"/.source,
+					},
+					{
+						token: 'string',
+						regex: /'(?:\\.|[^'\\])*'/.source,
+					},
+					{
+						token: 'variable',
+						regex: /\$\([a-zA-Z0-9_]+\)/.source,
+					},
+					{
+						token: 'constant.language',
+						regex: /@[apers]\b/i.source,
+					},
+					{
+						token: 'constant.language',
+						regex: /\b[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\b/i.source,
+					},
+					{
+						token: 'support.constant',
+						regex: /#?[a-z0-9_.]+:[a-z0-9_./-]+/i.source,
+					},
+					{
+						token: 'keyword',
+						regex: /\brun\s+\/?[a-z][a-z0-9_]*/i.source,
+					},
+					{
+						token: 'constant.numeric',
+						regex: /[~^]-?(?:\d*\.)?\d+/.source,
+					},
+					{
+						token: 'keyword.operator',
+						regex: /[~^]/.source,
+					},
+					{
+						token: 'constant.numeric',
+						regex: /-?(?:\d*\.)?\d+[bdfils]?\b/i.source,
+					},
+					{
+						token: 'constant.language',
+						regex: /\.\.|\b(?:true|false)\b/i.source,
+					},
+					{
+						token: 'keyword',
+						regex: /^\s*\/?[a-z][a-z0-9_]*/i.source,
+					},
+				],
+			}
+			this.normalizeRules()
+		}
+
+		oop.inherits(McfunctionHighlightRules, TextHighlightRules)
+		exports.McfunctionHighlightRules = McfunctionHighlightRules
+	},
+)
+
+ace['define'](
+	'ace/mode/mcfunction',
+	['require', 'exports', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/mcfunction_highlight_rules'],
+	function (require: any, exports: any) {
+		const oop = require('ace/lib/oop')
+		const TextMode = require('ace/mode/text').Mode
+		const McfunctionHighlightRules =
+			require('ace/mode/mcfunction_highlight_rules').McfunctionHighlightRules
+
+		const Mode = function (this: any) {
+			this.HighlightRules = McfunctionHighlightRules
+			this.$id = 'ace/mode/mcfunction'
+		}
+
+		oop.inherits(Mode, TextMode)
+		exports.Mode = Mode
+	},
+)