From c3fe83b9e01617550fbe425af6d776131aae387f Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 12:41:52 -0700
Subject: [PATCH 01/10] feat: Add text box editor for mokuro files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements a dedicated editing interface for modifying text box positions,
sizes, text content, and font sizes with automatic optimization.

Core Features:
- Dedicated edit page route (/[manga]/[volume]/edit/[pageIndex])
- Visual manipulation with 5 handles per selected box:
  - Move handle (top-left): Drag to reposition
  - Delete handle (top-right): Remove box
  - Clone handle (bottom-left): Duplicate and place
  - Resize handle (bottom-right): Adjust dimensions
  - Auto-size handle (right side): Automatically optimize font size

Versioning System:
- Added edited_pages field to VolumeData for non-destructive editing
- Original mokuro data preserved in pages field
- Reader automatically uses edited version via getCurrentPages() utility
- Save edits to IndexedDB, export .mokuro JSON file

UI/UX:
- Zoom modes: Fit to Screen, Fit to Width, Original Size
- Page navigation with unsaved changes warning
- Real-time font size preview
- Auto-size algorithm: increases until overflow, then decreases to fit
- Text editing: Click selected box to edit content inline

Entry Point:
- Edit button added to QuickActions floating menu
- Page selector modal for dual-page view
- Seamless navigation between reader and editor

Closes #145

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/catalog/pages.ts                      |  23 +
 src/lib/components/Editor/EditCanvas.svelte   | 130 ++++++
 src/lib/components/Editor/EditToolbar.svelte  | 101 +++++
 src/lib/components/Editor/EditableBox.svelte  | 393 ++++++++++++++++++
 src/lib/components/Reader/QuickActions.svelte |  51 ++-
 src/lib/components/Reader/Reader.svelte       |   5 +-
 src/lib/types/index.ts                        |   1 +
 .../[volume]/edit/[pageIndex]/+page.svelte    | 246 +++++++++++
 8 files changed, 946 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/catalog/pages.ts
 create mode 100644 src/lib/components/Editor/EditCanvas.svelte
 create mode 100644 src/lib/components/Editor/EditToolbar.svelte
 create mode 100644 src/lib/components/Editor/EditableBox.svelte
 create mode 100644 src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte

diff --git a/src/lib/catalog/pages.ts b/src/lib/catalog/pages.ts
new file mode 100644
index 00000000..53dab9ff
--- /dev/null
+++ b/src/lib/catalog/pages.ts
@@ -0,0 +1,23 @@
+import type { VolumeData, Page } from '$lib/types';
+
+/**
+ * Get the current working version of pages.
+ * Returns edited version if it exists, otherwise original.
+ */
+export function getCurrentPages(volumeData: VolumeData): Page[] {
+	return volumeData.edited_pages ?? volumeData.pages;
+}
+
+/**
+ * Check if volume has edits
+ */
+export function hasEdits(volumeData: VolumeData): boolean {
+	return volumeData.edited_pages !== undefined;
+}
+
+/**
+ * Get original pages (for reference in editor)
+ */
+export function getOriginalPages(volumeData: VolumeData): Page[] {
+	return volumeData.pages;
+}
diff --git a/src/lib/components/Editor/EditCanvas.svelte b/src/lib/components/Editor/EditCanvas.svelte
new file mode 100644
index 00000000..9a37c7ce
--- /dev/null
+++ b/src/lib/components/Editor/EditCanvas.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { Page, Block } from '$lib/types';
+	import EditableBox from './EditableBox.svelte';
+	import { onMount } from 'svelte';
+
+	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+	interface Props {
+		pageData: Page;
+		pageImage: string;
+		workingBlocks: Block[];
+		selectedIndex: number | null;
+		zoomMode: ZoomMode;
+		updateBlock: (index: number, block: Block) => void;
+		deleteBlock: (index: number) => void;
+		cloneBlock: (index: number) => number;
+	}
+
+	let {
+		pageData,
+		pageImage,
+		workingBlocks = $bindable(),
+		selectedIndex = $bindable(),
+		zoomMode,
+		updateBlock,
+		deleteBlock,
+		cloneBlock
+	}: Props = $props();
+
+	let containerRef: HTMLDivElement;
+	let scale = $state(1);
+
+	function handleSelect(index: number) {
+		selectedIndex = index;
+	}
+
+	function handleDeselect() {
+		selectedIndex = null;
+	}
+
+	function calculateZoom() {
+		if (!containerRef) return;
+
+		const container = containerRef;
+		const padding = 64; // 8 * 2 (p-8 on each side)
+		const containerWidth = container.clientWidth - padding;
+		const containerHeight = container.clientHeight - padding;
+		const pageWidth = pageData.img_width;
+		const pageHeight = pageData.img_height;
+
+		let newScale = 1;
+
+		switch (zoomMode) {
+			case 'fit-screen': {
+				const scaleX = containerWidth / pageWidth;
+				const scaleY = containerHeight / pageHeight;
+				newScale = Math.min(scaleX, scaleY);
+				break;
+			}
+			case 'fit-width': {
+				newScale = containerWidth / pageWidth;
+				break;
+			}
+			case 'original': {
+				newScale = 1;
+				break;
+			}
+		}
+
+		scale = newScale;
+	}
+
+	onMount(() => {
+		calculateZoom();
+		window.addEventListener('resize', calculateZoom);
+		return () => {
+			window.removeEventListener('resize', calculateZoom);
+		};
+	});
+
+	$effect(() => {
+		// Recalculate when zoom mode changes
+		zoomMode;
+		calculateZoom();
+	});
+</script>
+
+<div
+	bind:this={containerRef}
+	class="fixed top-16 left-0 right-0 bottom-0 overflow-auto bg-gray-900 flex items-center justify-center p-8"
+>
+	<div
+		class="relative"
+		style:width="{pageData.img_width}px"
+		style:height="{pageData.img_height}px"
+		style:transform="scale({scale})"
+		style:transform-origin="center center"
+	>
+		<!-- Page Image -->
+		<img
+			src={pageImage}
+			alt="Manga page"
+			class="absolute top-0 left-0 w-full h-full object-contain pointer-events-none select-none"
+			draggable="false"
+		/>
+
+		<!-- Editable Text Boxes -->
+		{#each workingBlocks as block, index (index)}
+			<EditableBox
+				{block}
+				{index}
+				isSelected={selectedIndex === index}
+				imgWidth={pageData.img_width}
+				imgHeight={pageData.img_height}
+				onSelect={() => handleSelect(index)}
+				onUpdate={(updatedBlock) => updateBlock(index, updatedBlock)}
+				onDelete={() => deleteBlock(index)}
+				onClone={() => cloneBlock(index)}
+				bind:selectedIndex
+			/>
+		{/each}
+
+		<!-- Click outside to deselect -->
+		<button
+			class="absolute inset-0 -z-10"
+			onclick={handleDeselect}
+			aria-label="Deselect box"
+		></button>
+	</div>
+</div>
diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
new file mode 100644
index 00000000..23fb13e9
--- /dev/null
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { Button, Toolbar, ToolbarGroup, Select } from 'flowbite-svelte';
+	import {
+		CaretLeftSolid,
+		CaretRightSolid,
+		FloppyDiskSolid,
+		DownloadSolid,
+		XSolid
+	} from 'flowbite-svelte-icons';
+
+	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+	interface Props {
+		pageIndex: number;
+		totalPages: number;
+		hasUnsavedChanges: boolean;
+		zoomMode: ZoomMode;
+		onPrev: () => void;
+		onNext: () => void;
+		onSave: () => void;
+		onExport: () => void;
+		onExit: () => void;
+		onZoomChange: (mode: ZoomMode) => void;
+	}
+
+	let {
+		pageIndex,
+		totalPages,
+		hasUnsavedChanges,
+		zoomMode = $bindable(),
+		onPrev,
+		onNext,
+		onSave,
+		onExport,
+		onExit,
+		onZoomChange
+	}: Props = $props();
+
+	const zoomOptions = [
+		{ value: 'fit-screen', name: 'Fit to Screen' },
+		{ value: 'fit-width', name: 'Fit to Width' },
+		{ value: 'original', name: 'Original Size' }
+	];
+
+	function handleZoomChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		onZoomChange(target.value as ZoomMode);
+	}
+</script>
+
+<Toolbar
+	color="dark"
+	class="fixed top-0 left-0 right-0 z-50 px-4 py-2 flex items-center justify-between"
+>
+	<ToolbarGroup class="flex items-center gap-2">
+		<Button size="sm" color="alternative" onclick={onExit}>
+			<XSolid class="w-4 h-4 mr-2" />
+			Exit
+		</Button>
+
+		<div class="mx-4 text-white font-medium">
+			Page {pageIndex + 1} / {totalPages}
+		</div>
+
+		<Button size="sm" color="alternative" disabled={pageIndex <= 0} onclick={onPrev}>
+			<CaretLeftSolid class="w-4 h-4 mr-2" />
+			Previous
+		</Button>
+
+		<Button size="sm" color="alternative" disabled={pageIndex >= totalPages - 1} onclick={onNext}>
+			Next
+			<CaretRightSolid class="w-4 h-4 ml-2" />
+		</Button>
+
+		<div class="ml-4">
+			<Select
+				size="sm"
+				class="w-40"
+				value={zoomMode}
+				on:change={handleZoomChange}
+				items={zoomOptions}
+			/>
+		</div>
+	</ToolbarGroup>
+
+	<ToolbarGroup class="flex items-center gap-2">
+		{#if hasUnsavedChanges}
+			<span class="text-yellow-400 text-sm mr-2">Unsaved changes</span>
+		{/if}
+
+		<Button size="sm" color="green" onclick={onSave} disabled={!hasUnsavedChanges}>
+			<FloppyDiskSolid class="w-4 h-4 mr-2" />
+			Save
+		</Button>
+
+		<Button size="sm" color="blue" onclick={onExport}>
+			<DownloadSolid class="w-4 h-4 mr-2" />
+			Export .mokuro
+		</Button>
+	</ToolbarGroup>
+</Toolbar>
diff --git a/src/lib/components/Editor/EditableBox.svelte b/src/lib/components/Editor/EditableBox.svelte
new file mode 100644
index 00000000..a5e6a847
--- /dev/null
+++ b/src/lib/components/Editor/EditableBox.svelte
@@ -0,0 +1,393 @@
+<script lang="ts">
+	import type { Block } from '$lib/types';
+	import { TrashBinSolid, FileCopySolid, ExpandOutline, ArrowUpRightDownLeftOutline, TextSizeOutline } from 'flowbite-svelte-icons';
+	import { clamp } from '$lib/util';
+
+	interface Props {
+		block: Block;
+		index: number;
+		isSelected: boolean;
+		imgWidth: number;
+		imgHeight: number;
+		selectedIndex: number | null;
+		onSelect: () => void;
+		onUpdate: (block: Block) => void;
+		onDelete: () => void;
+		onClone: () => number;
+	}
+
+	let {
+		block,
+		index,
+		isSelected,
+		imgWidth,
+		imgHeight,
+		selectedIndex = $bindable(),
+		onSelect,
+		onUpdate,
+		onDelete,
+		onClone
+	}: Props = $props();
+
+	let isDraggingMove = $state(false);
+	let isDraggingResize = $state(false);
+	let dragStartX = $state(0);
+	let dragStartY = $state(0);
+	let isEditingText = $state(false);
+	let textContent = $state('');
+
+	// Derived values
+	let [xmin, ymin, xmax, ymax] = $derived(block.box);
+	let width = $derived(xmax - xmin);
+	let height = $derived(ymax - ymin);
+
+	// Initialize text content when block changes
+	$effect(() => {
+		textContent = block.lines.join('\n');
+	});
+
+	function handleSelect(e: MouseEvent) {
+		e.stopPropagation();
+		if (!isSelected) {
+			onSelect();
+		}
+	}
+
+	function handleMoveStart(e: MouseEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+		isDraggingMove = true;
+		dragStartX = e.clientX;
+		dragStartY = e.clientY;
+
+		document.addEventListener('mousemove', handleMove);
+		document.addEventListener('mouseup', handleMoveEnd);
+	}
+
+	function handleMove(e: MouseEvent) {
+		if (!isDraggingMove) return;
+
+		const deltaX = e.clientX - dragStartX;
+		const deltaY = e.clientY - dragStartY;
+
+		// Calculate new position
+		const newXmin = clamp(xmin + deltaX, 0, imgWidth - width);
+		const newYmin = clamp(ymin + deltaY, 0, imgHeight - height);
+
+		onUpdate({
+			...block,
+			box: [newXmin, newYmin, newXmin + width, newYmin + height]
+		});
+
+		dragStartX = e.clientX;
+		dragStartY = e.clientY;
+	}
+
+	function handleMoveEnd() {
+		isDraggingMove = false;
+		document.removeEventListener('mousemove', handleMove);
+		document.removeEventListener('mouseup', handleMoveEnd);
+	}
+
+	function handleResizeStart(e: MouseEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+		isDraggingResize = true;
+		dragStartX = e.clientX;
+		dragStartY = e.clientY;
+
+		document.addEventListener('mousemove', handleResize);
+		document.addEventListener('mouseup', handleResizeEnd);
+	}
+
+	function handleResize(e: MouseEvent) {
+		if (!isDraggingResize) return;
+
+		const deltaX = e.clientX - dragStartX;
+		const deltaY = e.clientY - dragStartY;
+
+		// Calculate new bottom-right corner (top-left stays anchored)
+		const newXmax = clamp(xmax + deltaX, xmin + 20, imgWidth);
+		const newYmax = clamp(ymax + deltaY, ymin + 20, imgHeight);
+
+		onUpdate({
+			...block,
+			box: [xmin, ymin, newXmax, newYmax]
+		});
+
+		dragStartX = e.clientX;
+		dragStartY = e.clientY;
+	}
+
+	function handleResizeEnd() {
+		isDraggingResize = false;
+		document.removeEventListener('mousemove', handleResize);
+		document.removeEventListener('mouseup', handleResizeEnd);
+	}
+
+	function handleClone(e: MouseEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+
+		// Create the clone and get new index
+		const newIndex = onClone();
+
+		// Select the new box
+		selectedIndex = newIndex;
+
+		// Immediately start move mode on the cloned box
+		isDraggingMove = true;
+		dragStartX = e.clientX;
+		dragStartY = e.clientY;
+
+		document.addEventListener('mousemove', handleMove);
+		document.addEventListener('mouseup', handleMoveEnd);
+	}
+
+	function handleDelete(e: MouseEvent) {
+		e.stopPropagation();
+		onDelete();
+	}
+
+	function handleTextClick(e: MouseEvent) {
+		if (isSelected) {
+			e.stopPropagation();
+			isEditingText = true;
+		}
+	}
+
+	function handleTextBlur() {
+		isEditingText = false;
+		// Update lines from text content
+		const newLines = textContent.split('\n').filter((line) => line.trim() !== '');
+		onUpdate({
+			...block,
+			lines: newLines.length > 0 ? newLines : ['']
+		});
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			isEditingText = false;
+			textContent = block.lines.join('\n'); // Revert changes
+		} else if (e.key === 'Delete' && !isEditingText && isSelected) {
+			onDelete();
+		}
+	}
+
+	async function autoSizeFontSize(e: MouseEvent) {
+		e.stopPropagation();
+
+		// Get the text container element
+		const container = (e.currentTarget as HTMLElement).parentElement?.querySelector('.w-full.h-full') as HTMLElement;
+		if (!container) return;
+
+		const maxSize = 100;
+		const minSize = 6;
+
+		// Helper to check if content overflows
+		const isOverflowing = () => {
+			return container.scrollHeight > container.clientHeight || container.scrollWidth > container.clientWidth;
+		};
+
+		// Helper to wait for next frame
+		const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
+
+		let testSize = block.font_size;
+
+		// Phase 1: Increase size until overflow
+		while (testSize < maxSize) {
+			testSize++;
+			onUpdate({
+				...block,
+				font_size: testSize
+			});
+			await nextFrame();
+
+			if (isOverflowing()) {
+				// Found overflow! Now reduce until it fits
+				// Phase 2: Decrease size until it fits
+				while (testSize > minSize && isOverflowing()) {
+					testSize--;
+					onUpdate({
+						...block,
+						font_size: testSize
+					});
+					await nextFrame();
+				}
+				return; // Done!
+			}
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<div
+	class="absolute border-2 transition-all"
+	class:border-dashed={!isSelected}
+	class:border-solid={isSelected}
+	class:border-gray-400={!isSelected}
+	class:border-blue-500={isSelected}
+	class:opacity-60={!isSelected}
+	class:opacity-100={isSelected}
+	class:z-10={!isSelected}
+	class:z-50={isSelected}
+	class:cursor-move={isDraggingMove}
+	class:cursor-nwse-resize={isDraggingResize}
+	style:left="{xmin}px"
+	style:top="{ymin}px"
+	style:width="{width}px"
+	style:height="{height}px"
+	style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+	onclick={handleSelect}
+	role="button"
+	tabindex="0"
+>
+	<!-- Text Content -->
+	{#if isEditingText}
+		<textarea
+			bind:value={textContent}
+			onblur={handleTextBlur}
+			class="w-full h-full p-1 bg-white border-none outline-none resize-none text-black"
+			style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+			style:font-size="{block.font_size}px"
+			style:line-height="1.1em"
+			style:font-family="'Noto Sans JP', sans-serif"
+			autofocus
+		></textarea>
+	{:else}
+		<div
+			class="w-full h-full p-1 overflow-hidden cursor-text text-black"
+			class:bg-white={isSelected}
+			class:bg-opacity-80={isSelected}
+			onclick={handleTextClick}
+			role="button"
+			tabindex="-1"
+			style:font-size="{block.font_size}px"
+			style:line-height="1.1em"
+			style:font-family="'Noto Sans JP', sans-serif"
+		>
+			{#each block.lines as line}
+				<p class="m-0 leading-tight">{line}</p>
+			{/each}
+		</div>
+	{/if}
+
+	{#if isSelected}
+		<!-- Move Handle (Top-Left) -->
+		<button
+			class="handle handle-move"
+			onmousedown={handleMoveStart}
+			title="Move"
+			aria-label="Move box"
+		>
+			<ExpandOutline class="w-4 h-4 rotate-45" />
+		</button>
+
+		<!-- Delete Handle (Top-Right) -->
+		<button
+			class="handle handle-delete"
+			onclick={handleDelete}
+			title="Delete"
+			aria-label="Delete box"
+		>
+			<TrashBinSolid class="w-3 h-3" />
+		</button>
+
+		<!-- Clone Handle (Bottom-Left) -->
+		<button
+			class="handle handle-clone"
+			onmousedown={handleClone}
+			title="Clone (drag to place)"
+			aria-label="Clone box"
+		>
+			<FileCopySolid class="w-3 h-3" />
+		</button>
+
+		<!-- Resize Handle (Bottom-Right) -->
+		<button
+			class="handle handle-resize"
+			onmousedown={handleResizeStart}
+			title="Resize"
+			aria-label="Resize box"
+		>
+			<ArrowUpRightDownLeftOutline class="w-4 h-4 rotate-90" />
+		</button>
+
+		<!-- Auto Size Font (Right side) -->
+		<button
+			class="handle handle-font-auto"
+			onclick={autoSizeFontSize}
+			title="Auto-size font to fit"
+			aria-label="Auto-size font"
+		>
+			<TextSizeOutline class="w-4 h-4" />
+		</button>
+	{/if}
+</div>
+
+<style>
+	.handle {
+		position: absolute;
+		width: 28px;
+		height: 28px;
+		background: white;
+		border: 2px solid #3b82f6;
+		border-radius: 6px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 14px;
+		transition: all 0.2s;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	}
+
+	.handle:hover {
+		transform: scale(1.1);
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+	}
+
+	.handle-move {
+		top: -14px;
+		left: -14px;
+		cursor: move;
+		color: #3b82f6;
+	}
+
+	.handle-delete {
+		top: -14px;
+		right: -14px;
+		cursor: pointer;
+		background: #ef4444;
+		color: white;
+		border-color: #dc2626;
+	}
+
+	.handle-clone {
+		bottom: -14px;
+		left: -14px;
+		cursor: copy;
+		background: #10b981;
+		color: white;
+		border-color: #059669;
+	}
+
+	.handle-resize {
+		bottom: -14px;
+		right: -14px;
+		cursor: nwse-resize;
+		color: #3b82f6;
+	}
+
+	.handle-font-auto {
+		top: 50%;
+		right: -14px;
+		transform: translateY(-50%);
+		cursor: pointer;
+		background: #f59e0b;
+		color: white;
+		border-color: #d97706;
+	}
+</style>
diff --git a/src/lib/components/Reader/QuickActions.svelte b/src/lib/components/Reader/QuickActions.svelte
index d30e4bcb..2abd258f 100644
--- a/src/lib/components/Reader/QuickActions.svelte
+++ b/src/lib/components/Reader/QuickActions.svelte
@@ -2,14 +2,15 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { toggleFullScreen, zoomFitToScreen } from '$lib/panzoom';
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { SpeedDial, SpeedDialButton, Modal, Button } from 'flowbite-svelte';
   import { settings } from '$lib/settings';
   import {
     ArrowLeftOutline,
     ArrowRightOutline,
     CompressOutline,
     ImageOutline,
-    ZoomOutOutline
+    ZoomOutOutline,
+    EditOutline
   } from 'flowbite-svelte-icons';
   import { imageToWebp, showCropper, updateLastCard } from '$lib/anki-connect';
   import { promptConfirmation } from '$lib/util';
@@ -19,11 +20,14 @@
     right: (_e: any, ingoreTimeOut?: boolean) => void;
     src1: File | undefined;
     src2: File | undefined;
+    currentPage: number;
+    showSecondPage: boolean;
   }
 
-  let { left, right, src1, src2 }: Props = $props();
+  let { left, right, src1, src2, currentPage, showSecondPage }: Props = $props();
 
   let open = $state(false);
+  let showPageSelector = $state(false);
 
   function handleZoom() {
     zoomFitToScreen();
@@ -40,6 +44,25 @@
     open = false;
   }
 
+  function handleEditPage() {
+    open = false;
+
+    if (showSecondPage) {
+      // Show modal to select which page to edit
+      showPageSelector = true;
+    } else {
+      // Navigate directly to edit the current page
+      navigateToEditPage(currentPage - 1); // Convert to 0-based index
+    }
+  }
+
+  function navigateToEditPage(pageIndex: number) {
+    const manga = $page.params.manga;
+    const volume = $page.params.volume;
+    goto(`/${manga}/${volume}/edit/${pageIndex}`);
+    showPageSelector = false;
+  }
+
   async function onUpdateCard(src: File | undefined) {
     if ($settings.ankiConnectSettings.enabled && src) {
       if ($settings.ankiConnectSettings.cropImage) {
@@ -85,5 +108,27 @@
     <SpeedDialButton on:click={handleLeft}>
       <ArrowLeftOutline />
     </SpeedDialButton>
+    <SpeedDialButton on:click={handleEditPage}>
+      <EditOutline />
+    </SpeedDialButton>
   </SpeedDial>
 {/if}
+
+<Modal bind:open={showPageSelector} size="xs" autoclose={false}>
+  <div class="text-center">
+    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+      Which page do you want to edit?
+    </h3>
+    <div class="flex justify-center gap-4">
+      <Button color="blue" on:click={() => navigateToEditPage(currentPage - 1)}>
+        Left Page ({currentPage})
+      </Button>
+      <Button color="blue" on:click={() => navigateToEditPage(currentPage)}>
+        Right Page ({currentPage + 1})
+      </Button>
+    </div>
+    <div class="mt-4">
+      <Button color="alternative" on:click={() => (showPageSelector = false)}>Cancel</Button>
+    </div>
+  </div>
+</Modal>
diff --git a/src/lib/components/Reader/Reader.svelte b/src/lib/components/Reader/Reader.svelte
index 13474f40..b0c77cdd 100644
--- a/src/lib/components/Reader/Reader.svelte
+++ b/src/lib/components/Reader/Reader.svelte
@@ -2,6 +2,7 @@
   import { run } from 'svelte/legacy';
 
   import { currentSeries, currentVolume, currentVolumeData } from '$lib/catalog';
+  import { getCurrentPages } from '$lib/catalog/pages';
   import {
     Panzoom,
     panzoomStore,
@@ -360,7 +361,7 @@
     }
   });
 
-  let pages = $derived(volumeData?.pages || []);
+  let pages = $derived(volumeData ? getCurrentPages(volumeData) : []);
   let page = $derived($progress?.[volume?.volume_uuid || 0] || 1);
   let index = $derived(page - 1);
 
@@ -543,6 +544,8 @@
     {right}
     src1={volumeData.files ? Object.values(volumeData.files)[index] : undefined}
     src2={!useSinglePage && volumeData.files ? Object.values(volumeData.files)[index + 1] : undefined}
+    currentPage={page}
+    showSecondPage={showSecondPage()}
   />
   <SettingsButton />
   <Cropper />
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index edc1e34c..4075489c 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -42,5 +42,6 @@ export interface VolumeMetadata {
 export interface VolumeData {
   volume_uuid: string;
   pages: Page[];
+  edited_pages?: Page[];
   files?: Record<string, File>;
 }
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
new file mode 100644
index 00000000..2f0d8852
--- /dev/null
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -0,0 +1,246 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { db } from '$lib/catalog/db';
+	import { getCurrentPages, getOriginalPages } from '$lib/catalog/pages';
+	import type { VolumeData, Page, Block } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { Button, Modal, Spinner } from 'flowbite-svelte';
+	import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
+	import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
+
+	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+	let volumeUuid = $derived($page.params.volume || '');
+	let pageIndexParam = $derived($page.params.pageIndex || '0');
+	let pageIndex = $derived(parseInt(pageIndexParam, 10));
+
+	let volumeData = $state<VolumeData | undefined>(undefined);
+	let workingBlocks = $state<Block[]>([]);
+	let selectedIndex = $state<number | null>(null);
+	let hasUnsavedChanges = $state(false);
+	let isLoading = $state(true);
+	let showUnsavedWarning = $state(false);
+	let pendingNavigation: (() => void) | null = null;
+	let zoomMode = $state<ZoomMode>('fit-screen');
+
+	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
+	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
+	let pageImage = $derived(
+		volumeData?.files && Object.values(volumeData.files)[pageIndex]
+			? URL.createObjectURL(Object.values(volumeData.files)[pageIndex])
+			: ''
+	);
+
+	onMount(async () => {
+		await loadVolumeData();
+	});
+
+	async function loadVolumeData() {
+		isLoading = true;
+		try {
+			const data = await db.volumes_data.get(volumeUuid);
+			if (data) {
+				volumeData = data;
+				// Initialize working blocks with current page's blocks (edited or original)
+				const currentPages = getCurrentPages(data);
+				workingBlocks = structuredClone(currentPages[pageIndex]?.blocks || []);
+			}
+		} catch (error) {
+			console.error('Failed to load volume data:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function updateBlock(index: number, updatedBlock: Block) {
+		workingBlocks[index] = updatedBlock;
+		hasUnsavedChanges = true;
+		workingBlocks = [...workingBlocks]; // Trigger reactivity
+	}
+
+	function deleteBlock(index: number) {
+		workingBlocks.splice(index, 1);
+		hasUnsavedChanges = true;
+		selectedIndex = null;
+		workingBlocks = [...workingBlocks]; // Trigger reactivity
+	}
+
+	function cloneBlock(index: number): number {
+		const clonedBlock = structuredClone(workingBlocks[index]);
+		// Offset the cloned box slightly
+		const offset = 20;
+		clonedBlock.box = [
+			clonedBlock.box[0] + offset,
+			clonedBlock.box[1] + offset,
+			clonedBlock.box[2] + offset,
+			clonedBlock.box[3] + offset
+		];
+		workingBlocks.push(clonedBlock);
+		hasUnsavedChanges = true;
+		workingBlocks = [...workingBlocks]; // Trigger reactivity
+		return workingBlocks.length - 1; // Return new index
+	}
+
+	async function saveEdits() {
+		if (!volumeData) return;
+
+		try {
+			// Get current pages (edited or original)
+			const currentPages = getCurrentPages(volumeData);
+
+			// Create a copy and update the current page's blocks
+			const updatedPages = structuredClone(currentPages);
+			updatedPages[pageIndex].blocks = workingBlocks;
+
+			// Save to edited_pages field
+			await db.volumes_data.update(volumeUuid, {
+				edited_pages: updatedPages
+			});
+
+			// Update local volumeData
+			volumeData.edited_pages = updatedPages;
+			hasUnsavedChanges = false;
+
+			console.log('Edits saved successfully');
+		} catch (error) {
+			console.error('Failed to save edits:', error);
+		}
+	}
+
+	function navigatePage(newPageIndex: number) {
+		if (newPageIndex < 0 || newPageIndex >= totalPages) return;
+
+		if (hasUnsavedChanges) {
+			showUnsavedWarning = true;
+			pendingNavigation = () => {
+				goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
+			};
+		} else {
+			goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
+		}
+	}
+
+	function exitToReader() {
+		if (hasUnsavedChanges) {
+			showUnsavedWarning = true;
+			pendingNavigation = () => {
+				goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
+			};
+		} else {
+			goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
+		}
+	}
+
+	async function saveAndNavigate() {
+		await saveEdits();
+		showUnsavedWarning = false;
+		if (pendingNavigation) {
+			pendingNavigation();
+			pendingNavigation = null;
+		}
+	}
+
+	function discardAndNavigate() {
+		hasUnsavedChanges = false;
+		showUnsavedWarning = false;
+		if (pendingNavigation) {
+			pendingNavigation();
+			pendingNavigation = null;
+		}
+	}
+
+	function cancelNavigation() {
+		showUnsavedWarning = false;
+		pendingNavigation = null;
+	}
+
+	async function exportMokuro() {
+		if (!volumeData) return;
+
+		try {
+			const metadata = await db.volumes.get(volumeUuid);
+			if (!metadata) return;
+
+			const currentPages = getCurrentPages(volumeData);
+
+			const mokuroData = {
+				version: metadata.mokuro_version,
+				title: metadata.series_title,
+				title_uuid: metadata.series_uuid,
+				volume: metadata.volume_title,
+				volume_uuid: metadata.volume_uuid,
+				pages: currentPages,
+				chars: currentPages.reduce(
+					(total, page) =>
+						total +
+						page.blocks.reduce((pageTotal, block) => pageTotal + block.lines.join('').length, 0),
+					0
+				)
+			};
+
+			const blob = new Blob([JSON.stringify(mokuroData, null, 2)], {
+				type: 'application/json'
+			});
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `${metadata.volume_title}_edited.mokuro`;
+			a.click();
+			URL.revokeObjectURL(url);
+		} catch (error) {
+			console.error('Failed to export .mokuro file:', error);
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Edit Page {pageIndex + 1}</title>
+</svelte:head>
+
+{#if isLoading}
+	<div class="flex items-center justify-center w-screen h-screen">
+		<Spinner size="12" />
+	</div>
+{:else if volumeData && pageData}
+	<EditToolbar
+		{pageIndex}
+		{totalPages}
+		{hasUnsavedChanges}
+		bind:zoomMode
+		onPrev={() => navigatePage(pageIndex - 1)}
+		onNext={() => navigatePage(pageIndex + 1)}
+		onSave={saveEdits}
+		onExport={exportMokuro}
+		onExit={exitToReader}
+		onZoomChange={(mode) => (zoomMode = mode)}
+	/>
+
+	<EditCanvas
+		{pageData}
+		{pageImage}
+		{zoomMode}
+		bind:workingBlocks
+		bind:selectedIndex
+		{updateBlock}
+		{deleteBlock}
+		{cloneBlock}
+	/>
+
+	<Modal bind:open={showUnsavedWarning} size="xs" autoclose={false}>
+		<div class="text-center">
+			<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+				You have unsaved changes. Save before leaving?
+			</h3>
+			<div class="flex justify-center gap-4">
+				<Button color="green" on:click={saveAndNavigate}>Save & Continue</Button>
+				<Button color="red" on:click={discardAndNavigate}>Discard</Button>
+				<Button color="alternative" on:click={cancelNavigation}>Cancel</Button>
+			</div>
+		</div>
+	</Modal>
+{:else}
+	<div class="flex items-center justify-center w-screen h-screen">
+		<p class="text-xl">Failed to load page data</p>
+	</div>
+{/if}

From 3f5666df1119339e834355825ed1ab8403536398 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 12:55:16 -0700
Subject: [PATCH 02/10] fix: Resolve DataCloneError when saving edits by
 serializing Svelte state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed DataCloneError that occurred when saving text box edits to IndexedDB. The issue was caused by attempting to store Svelte $state proxies and Dexie IndexedDB objects directly, which cannot be cloned by the structured clone algorithm.

## Changes
- Changed from `structuredClone()` to `JSON.parse(JSON.stringify())` for cloning pages
- Added serialization of `workingBlocks` before assignment to strip Svelte reactivity
- Updated comments to clarify the serialization is needed for both IndexedDB objects and Svelte proxies

## Technical Details
The error occurred in two places:
1. `currentPages` from Dexie had properties that couldn't be cloned
2. `workingBlocks` as a `$state` variable was wrapped in Svelte proxies

JSON serialization strips all non-serializable properties and proxies, leaving only plain data that IndexedDB can store.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../[volume]/edit/[pageIndex]/+page.svelte    | 50 +++++++++++++++++--
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index 2f0d8852..e008a2d7 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -5,7 +5,8 @@
 	import { getCurrentPages, getOriginalPages } from '$lib/catalog/pages';
 	import type { VolumeData, Page, Block } from '$lib/types';
 	import { onMount } from 'svelte';
-	import { Button, Modal, Spinner } from 'flowbite-svelte';
+	import { Button, Modal, Spinner, Toast } from 'flowbite-svelte';
+	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
 	import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
 	import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
 
@@ -23,6 +24,9 @@
 	let showUnsavedWarning = $state(false);
 	let pendingNavigation: (() => void) | null = null;
 	let zoomMode = $state<ZoomMode>('fit-screen');
+	let showSaveSuccess = $state(false);
+	let showSaveError = $state(false);
+	let saveErrorMessage = $state('');
 
 	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
 	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
@@ -90,8 +94,9 @@
 			const currentPages = getCurrentPages(volumeData);
 
 			// Create a copy and update the current page's blocks
-			const updatedPages = structuredClone(currentPages);
-			updatedPages[pageIndex].blocks = workingBlocks;
+			// Use JSON parse/stringify to avoid cloning issues with IndexedDB objects and Svelte proxies
+			const updatedPages = JSON.parse(JSON.stringify(currentPages));
+			updatedPages[pageIndex].blocks = JSON.parse(JSON.stringify(workingBlocks));
 
 			// Save to edited_pages field
 			await db.volumes_data.update(volumeUuid, {
@@ -102,9 +107,22 @@
 			volumeData.edited_pages = updatedPages;
 			hasUnsavedChanges = false;
 
+			// Show success toast
+			showSaveSuccess = true;
+			setTimeout(() => {
+				showSaveSuccess = false;
+			}, 3000);
+
 			console.log('Edits saved successfully');
 		} catch (error) {
 			console.error('Failed to save edits:', error);
+
+			// Show error toast
+			saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
+			showSaveError = true;
+			setTimeout(() => {
+				showSaveError = false;
+			}, 5000);
 		}
 	}
 
@@ -239,6 +257,32 @@
 			</div>
 		</div>
 	</Modal>
+
+	<!-- Success Toast -->
+	<Toast
+		color="green"
+		position="top-right"
+		open={showSaveSuccess}
+		class="fixed top-20 right-4 z-50"
+	>
+		<svelte:fragment slot="icon">
+			<CheckCircleSolid class="w-5 h-5" />
+		</svelte:fragment>
+		Edits saved successfully
+	</Toast>
+
+	<!-- Error Toast -->
+	<Toast
+		color="red"
+		position="top-right"
+		open={showSaveError}
+		class="fixed top-20 right-4 z-50"
+	>
+		<svelte:fragment slot="icon">
+			<CloseCircleSolid class="w-5 h-5" />
+		</svelte:fragment>
+		Failed to save: {saveErrorMessage}
+	</Toast>
 {:else}
 	<div class="flex items-center justify-center w-screen h-screen">
 		<p class="text-xl">Failed to load page data</p>

From b315dd15c5121107c22e96e1c9a4206f13a9f9f4 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 12:58:36 -0700
Subject: [PATCH 03/10] feat: Add edit indicators and revert functionality
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added visual indicators and the ability to revert edits to original mokuro data.

## Changes

**Visual Indicators:**
- Added yellow pencil badge to VolumeItem component (both list and grid views)
- Badge appears when a volume has edited pages
- Uses `hasEdits()` utility to check for `edited_pages` field

**Revert Functionality:**
- Added "Revert to Original" button in EditToolbar
- Button only appears when volume has edits
- Shows confirmation dialog before reverting
- Removes `edited_pages` field from database
- Reloads page data to show original content
- Shows success/error toasts

**Component Updates:**
- VolumeItem.svelte: Added `volumeHasEdits` state and pencil badge
- EditToolbar.svelte: Added `hasEdits` prop and revert button
- edit/+page.svelte: Added `volumeHasEdits` derived, `revertToOriginal()` function

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Editor/EditToolbar.svelte  | 14 ++++++-
 src/lib/components/VolumeItem.svelte          | 24 ++++++++++--
 .../[volume]/edit/[pageIndex]/+page.svelte    | 38 ++++++++++++++++++-
 3 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
index 23fb13e9..292dd80f 100644
--- a/src/lib/components/Editor/EditToolbar.svelte
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -5,7 +5,8 @@
 		CaretRightSolid,
 		FloppyDiskSolid,
 		DownloadSolid,
-		XSolid
+		XSolid,
+		ArrowRotateBackwardSolid
 	} from 'flowbite-svelte-icons';
 
 	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
@@ -14,12 +15,14 @@
 		pageIndex: number;
 		totalPages: number;
 		hasUnsavedChanges: boolean;
+		hasEdits: boolean;
 		zoomMode: ZoomMode;
 		onPrev: () => void;
 		onNext: () => void;
 		onSave: () => void;
 		onExport: () => void;
 		onExit: () => void;
+		onRevert: () => void;
 		onZoomChange: (mode: ZoomMode) => void;
 	}
 
@@ -27,12 +30,14 @@
 		pageIndex,
 		totalPages,
 		hasUnsavedChanges,
+		hasEdits,
 		zoomMode = $bindable(),
 		onPrev,
 		onNext,
 		onSave,
 		onExport,
 		onExit,
+		onRevert,
 		onZoomChange
 	}: Props = $props();
 
@@ -93,6 +98,13 @@
 			Save
 		</Button>
 
+		{#if hasEdits}
+			<Button size="sm" color="red" onclick={onRevert}>
+				<ArrowRotateBackwardSolid class="w-4 h-4 mr-2" />
+				Revert to Original
+			</Button>
+		{/if}
+
 		<Button size="sm" color="blue" onclick={onExport}>
 			<DownloadSolid class="w-4 h-4 mr-2" />
 			Export .mokuro
diff --git a/src/lib/components/VolumeItem.svelte b/src/lib/components/VolumeItem.svelte
index 12aabdae..da7b3278 100644
--- a/src/lib/components/VolumeItem.svelte
+++ b/src/lib/components/VolumeItem.svelte
@@ -5,8 +5,8 @@
   import type { VolumeMetadata, Page } from '$lib/types';
   import { promptConfirmation, showSnackbar } from '$lib/util';
   import { getCurrentPage, getProgressDisplay, isVolumeComplete } from '$lib/util/volume-helpers';
-  import { Frame, ListgroupItem, Dropdown, DropdownItem } from 'flowbite-svelte';
-  import { CheckCircleSolid, TrashBinSolid, FileLinesOutline, DotsVerticalOutline, CloudArrowUpOutline } from 'flowbite-svelte-icons';
+  import { Frame, ListgroupItem, Dropdown, DropdownItem, Badge } from 'flowbite-svelte';
+  import { CheckCircleSolid, TrashBinSolid, FileLinesOutline, DotsVerticalOutline, CloudArrowUpOutline, PenSolid } from 'flowbite-svelte-icons';
   import { goto } from '$app/navigation';
   import { db } from '$lib/catalog/db';
   import BackupButton from './BackupButton.svelte';
@@ -15,6 +15,7 @@
   import { backupQueue } from '$lib/util/backup-queue';
   import type { CloudVolumeWithProvider } from '$lib/util/sync/unified-cloud-manager';
   import { getCharCount } from '$lib/util/count-chars';
+  import { hasEdits } from '$lib/catalog/pages';
 
   interface Props {
     volume: VolumeMetadata;
@@ -58,8 +59,10 @@
   let timeReadMinutes = $derived(volumeData?.timeReadInMinutes || 0);
   let charsRead = $derived(volumeData?.chars || 0);
   let totalChars = $state<number | undefined>(undefined);
+  let volumeHasEdits = $state(false);
 
   // Calculate Japanese character count from pages data (matches reading tracker)
+  // Also check if volume has edits
   $effect(() => {
     db.volumes_data.get(volume.volume_uuid).then(data => {
       if (data?.pages) {
@@ -68,6 +71,9 @@
           totalChars = charCount;
         }
       }
+      if (data) {
+        volumeHasEdits = hasEdits(data);
+      }
     });
   });
 
@@ -245,7 +251,14 @@
           class="flex flex-row gap-5 items-center justify-between w-full"
         >
           <div>
-            <p class="font-semibold" class:text-white={!isComplete}>{volName}</p>
+            <div class="flex items-center gap-2">
+              <p class="font-semibold" class:text-white={!isComplete}>{volName}</p>
+              {#if volumeHasEdits}
+                <Badge color="yellow" class="!px-1.5 !py-0.5">
+                  <PenSolid class="w-3 h-3" />
+                </Badge>
+              {/if}
+            </div>
             <div class="flex flex-wrap gap-x-3 items-center">
               <p>{progressDisplay}</p>
               {#if statsDisplay}
@@ -329,6 +342,11 @@
           >
             {volName}
           </div>
+          {#if volumeHasEdits}
+            <Badge color="yellow" class="!px-1.5 !py-0.5 flex-shrink-0">
+              <PenSolid class="w-3 h-3" />
+            </Badge>
+          {/if}
           {#if isComplete}
             <CheckCircleSolid class="w-5 h-5 text-green-400 flex-shrink-0" />
           {/if}
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index e008a2d7..76767639 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -2,13 +2,14 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { db } from '$lib/catalog/db';
-	import { getCurrentPages, getOriginalPages } from '$lib/catalog/pages';
+	import { getCurrentPages, getOriginalPages, hasEdits } from '$lib/catalog/pages';
 	import type { VolumeData, Page, Block } from '$lib/types';
 	import { onMount } from 'svelte';
 	import { Button, Modal, Spinner, Toast } from 'flowbite-svelte';
 	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
 	import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
 	import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
+	import { promptConfirmation } from '$lib/util';
 
 	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
 
@@ -30,6 +31,7 @@
 
 	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
 	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
+	let volumeHasEdits = $derived(volumeData ? hasEdits(volumeData) : false);
 	let pageImage = $derived(
 		volumeData?.files && Object.values(volumeData.files)[pageIndex]
 			? URL.createObjectURL(Object.values(volumeData.files)[pageIndex])
@@ -173,6 +175,38 @@
 		pendingNavigation = null;
 	}
 
+	async function revertToOriginal() {
+		if (!volumeData) return;
+
+		promptConfirmation(
+			'Revert all edits to original? This cannot be undone.',
+			async () => {
+				try {
+					// Remove edited_pages field from database
+					await db.volumes_data.update(volumeUuid, {
+						edited_pages: undefined
+					});
+
+					// Reload the page to show original data
+					await loadVolumeData();
+
+					// Show success toast
+					showSaveSuccess = true;
+					setTimeout(() => {
+						showSaveSuccess = false;
+					}, 3000);
+				} catch (error) {
+					console.error('Failed to revert edits:', error);
+					saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
+					showSaveError = true;
+					setTimeout(() => {
+						showSaveError = false;
+					}, 5000);
+				}
+			}
+		);
+	}
+
 	async function exportMokuro() {
 		if (!volumeData) return;
 
@@ -225,12 +259,14 @@
 		{pageIndex}
 		{totalPages}
 		{hasUnsavedChanges}
+		hasEdits={volumeHasEdits}
 		bind:zoomMode
 		onPrev={() => navigatePage(pageIndex - 1)}
 		onNext={() => navigatePage(pageIndex + 1)}
 		onSave={saveEdits}
 		onExport={exportMokuro}
 		onExit={exitToReader}
+		onRevert={revertToOriginal}
 		onZoomChange={(mode) => (zoomMode = mode)}
 	/>
 

From 77f82d2ddf32bd00ff94a676b08eb4018cc36fa3 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 13:00:23 -0700
Subject: [PATCH 04/10] feat: Add comparison view for original vs edited pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a comparison modal that displays original and edited versions side-by-side.

## Changes

**Comparison Modal:**
- Added "Compare" button in EditToolbar (purple, appears when volume has edits)
- Modal shows original (left) and edited (right) versions side-by-side
- Color-coded borders: blue for original boxes, green for edited boxes
- Full-size view with scrollable containers
- Maximum width set to 90vw for better visibility

**Technical Details:**
- Added `originalPageData` derived value using `getOriginalPages()`
- Added `showCompareModal` state for modal visibility
- Modal renders both versions with identical styling to editor
- Shows text boxes with proper font sizes, writing modes, and line breaks

**Component Updates:**
- EditToolbar.svelte: Added Compare button and onCompare prop
- edit/+page.svelte: Added comparison modal with side-by-side layout

This helps users visualize their changes before saving or reverting.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Editor/EditToolbar.svelte  | 10 ++-
 .../[volume]/edit/[pageIndex]/+page.svelte    | 84 +++++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
index 292dd80f..48592966 100644
--- a/src/lib/components/Editor/EditToolbar.svelte
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -6,7 +6,8 @@
 		FloppyDiskSolid,
 		DownloadSolid,
 		XSolid,
-		ArrowRotateBackwardSolid
+		ArrowRotateBackwardSolid,
+		EyeSolid
 	} from 'flowbite-svelte-icons';
 
 	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
@@ -23,6 +24,7 @@
 		onExport: () => void;
 		onExit: () => void;
 		onRevert: () => void;
+		onCompare: () => void;
 		onZoomChange: (mode: ZoomMode) => void;
 	}
 
@@ -38,6 +40,7 @@
 		onExport,
 		onExit,
 		onRevert,
+		onCompare,
 		onZoomChange
 	}: Props = $props();
 
@@ -99,6 +102,11 @@
 		</Button>
 
 		{#if hasEdits}
+			<Button size="sm" color="purple" onclick={onCompare}>
+				<EyeSolid class="w-4 h-4 mr-2" />
+				Compare
+			</Button>
+
 			<Button size="sm" color="red" onclick={onRevert}>
 				<ArrowRotateBackwardSolid class="w-4 h-4 mr-2" />
 				Revert to Original
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index 76767639..828144a8 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -28,8 +28,10 @@
 	let showSaveSuccess = $state(false);
 	let showSaveError = $state(false);
 	let saveErrorMessage = $state('');
+	let showCompareModal = $state(false);
 
 	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
+	let originalPageData = $derived(volumeData ? getOriginalPages(volumeData)[pageIndex] : undefined);
 	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
 	let volumeHasEdits = $derived(volumeData ? hasEdits(volumeData) : false);
 	let pageImage = $derived(
@@ -175,6 +177,10 @@
 		pendingNavigation = null;
 	}
 
+	function showCompare() {
+		showCompareModal = true;
+	}
+
 	async function revertToOriginal() {
 		if (!volumeData) return;
 
@@ -267,6 +273,7 @@
 		onExport={exportMokuro}
 		onExit={exitToReader}
 		onRevert={revertToOriginal}
+		onCompare={showCompare}
 		onZoomChange={(mode) => (zoomMode = mode)}
 	/>
 
@@ -319,6 +326,83 @@
 		</svelte:fragment>
 		Failed to save: {saveErrorMessage}
 	</Toast>
+
+	<!-- Compare Modal -->
+	{#if volumeHasEdits && originalPageData}
+		<Modal bind:open={showCompareModal} size="xl" autoclose={false} class="!max-w-[90vw]">
+			<div class="space-y-4">
+				<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+					Compare Original vs Edited
+				</h3>
+
+				<div class="grid grid-cols-2 gap-4">
+					<!-- Original Version -->
+					<div class="space-y-2">
+						<h4 class="text-lg font-medium text-gray-700 dark:text-gray-300">Original</h4>
+						<div class="relative border-2 border-gray-300 dark:border-gray-600 rounded overflow-auto max-h-[70vh]">
+							<img
+								src={pageImage}
+								alt="Original page"
+								class="w-full h-auto"
+							/>
+							{#each originalPageData.blocks as block}
+								<div
+									class="absolute border-2 border-blue-500 bg-white bg-opacity-60 p-1 overflow-hidden"
+									style:left="{block.box[0]}px"
+									style:top="{block.box[1]}px"
+									style:width="{block.box[2] - block.box[0]}px"
+									style:height="{block.box[3] - block.box[1]}px"
+									style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+									style:font-size="{block.font_size}px"
+									style:line-height="1.1em"
+									style:font-family="'Noto Sans JP', sans-serif"
+								>
+									{#each block.lines as line}
+										<p class="m-0 leading-tight text-black">{line}</p>
+									{/each}
+								</div>
+							{/each}
+						</div>
+					</div>
+
+					<!-- Edited Version -->
+					<div class="space-y-2">
+						<h4 class="text-lg font-medium text-gray-700 dark:text-gray-300">Edited</h4>
+						<div class="relative border-2 border-gray-300 dark:border-gray-600 rounded overflow-auto max-h-[70vh]">
+							<img
+								src={pageImage}
+								alt="Edited page"
+								class="w-full h-auto"
+							/>
+							{#each pageData.blocks as block}
+								<div
+									class="absolute border-2 border-green-500 bg-white bg-opacity-60 p-1 overflow-hidden"
+									style:left="{block.box[0]}px"
+									style:top="{block.box[1]}px"
+									style:width="{block.box[2] - block.box[0]}px"
+									style:height="{block.box[3] - block.box[1]}px"
+									style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+									style:font-size="{block.font_size}px"
+									style:line-height="1.1em"
+									style:font-family="'Noto Sans JP', sans-serif"
+								>
+									{#each block.lines as line}
+										<p class="m-0 leading-tight text-black">{line}</p>
+									{/each}
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+
+				<div class="flex justify-end">
+					<Button color="alternative" on:click={() => showCompareModal = false}>
+						Close
+					</Button>
+				</div>
+			</div>
+		</Modal>
+	{/if}
 {:else}
 	<div class="flex items-center justify-center w-screen h-screen">
 		<p class="text-xl">Failed to load page data</p>

From 79f956c54f568357858e7fc4dd0170dae0defa04 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 13:02:37 -0700
Subject: [PATCH 05/10] fix: Use correct Flowbite icon for revert button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed from ArrowRotateBackwardSolid (doesn't exist) to UndoOutline.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Editor/EditToolbar.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
index 48592966..e952fb8c 100644
--- a/src/lib/components/Editor/EditToolbar.svelte
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -6,7 +6,7 @@
 		FloppyDiskSolid,
 		DownloadSolid,
 		XSolid,
-		ArrowRotateBackwardSolid,
+		UndoOutline,
 		EyeSolid
 	} from 'flowbite-svelte-icons';
 
@@ -108,7 +108,7 @@
 			</Button>
 
 			<Button size="sm" color="red" onclick={onRevert}>
-				<ArrowRotateBackwardSolid class="w-4 h-4 mr-2" />
+				<UndoOutline class="w-4 h-4 mr-2" />
 				Revert to Original
 			</Button>
 		{/if}

From 3106b590cfa8d3d80ce4e278f9ee1bd7a21d4a1f Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 13:06:08 -0700
Subject: [PATCH 06/10] feat: Replace comparison view with add textbox feature
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed the comparison modal and added the ability to create new text boxes.

## Changes

**Add Textbox Button:**
- Added purple "Add Textbox" button in EditToolbar
- Creates new empty text box in center of page
- Default size: 200x100px, font size 20px
- Auto-selects new box for immediate editing
- Marks page as having unsaved changes

**Removed Features:**
- Removed comparison modal (original vs edited view)
- Removed onCompare callback and related code
- Removed unused imports (getOriginalPages, Modal)

**Component Updates:**
- EditToolbar.svelte: Replaced Compare button with Add Textbox
- edit/+page.svelte: Added addTextbox() function, removed compare modal

This makes it easier to add custom text annotations to manga pages.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Editor/EditToolbar.svelte  |  16 +--
 .../[volume]/edit/[pageIndex]/+page.svelte    | 114 +++++-------------
 2 files changed, 38 insertions(+), 92 deletions(-)

diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
index e952fb8c..c4d8ddf2 100644
--- a/src/lib/components/Editor/EditToolbar.svelte
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -7,7 +7,7 @@
 		DownloadSolid,
 		XSolid,
 		UndoOutline,
-		EyeSolid
+		PlusSolid
 	} from 'flowbite-svelte-icons';
 
 	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
@@ -24,7 +24,7 @@
 		onExport: () => void;
 		onExit: () => void;
 		onRevert: () => void;
-		onCompare: () => void;
+		onAddBox: () => void;
 		onZoomChange: (mode: ZoomMode) => void;
 	}
 
@@ -40,7 +40,7 @@
 		onExport,
 		onExit,
 		onRevert,
-		onCompare,
+		onAddBox,
 		onZoomChange
 	}: Props = $props();
 
@@ -101,12 +101,12 @@
 			Save
 		</Button>
 
-		{#if hasEdits}
-			<Button size="sm" color="purple" onclick={onCompare}>
-				<EyeSolid class="w-4 h-4 mr-2" />
-				Compare
-			</Button>
+		<Button size="sm" color="purple" onclick={onAddBox}>
+			<PlusSolid class="w-4 h-4 mr-2" />
+			Add Textbox
+		</Button>
 
+		{#if hasEdits}
 			<Button size="sm" color="red" onclick={onRevert}>
 				<UndoOutline class="w-4 h-4 mr-2" />
 				Revert to Original
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index 828144a8..9ad4aff6 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -2,10 +2,10 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { db } from '$lib/catalog/db';
-	import { getCurrentPages, getOriginalPages, hasEdits } from '$lib/catalog/pages';
+	import { getCurrentPages, hasEdits } from '$lib/catalog/pages';
 	import type { VolumeData, Page, Block } from '$lib/types';
 	import { onMount } from 'svelte';
-	import { Button, Modal, Spinner, Toast } from 'flowbite-svelte';
+	import { Button, Spinner, Toast } from 'flowbite-svelte';
 	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
 	import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
 	import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
@@ -28,10 +28,8 @@
 	let showSaveSuccess = $state(false);
 	let showSaveError = $state(false);
 	let saveErrorMessage = $state('');
-	let showCompareModal = $state(false);
 
 	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
-	let originalPageData = $derived(volumeData ? getOriginalPages(volumeData)[pageIndex] : undefined);
 	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
 	let volumeHasEdits = $derived(volumeData ? hasEdits(volumeData) : false);
 	let pageImage = $derived(
@@ -177,8 +175,33 @@
 		pendingNavigation = null;
 	}
 
-	function showCompare() {
-		showCompareModal = true;
+	function addTextbox() {
+		if (!pageData) return;
+
+		// Create a new empty textbox in the center of the page
+		const centerX = pageData.img_width / 2;
+		const centerY = pageData.img_height / 2;
+		const defaultWidth = 200;
+		const defaultHeight = 100;
+
+		const newBlock: Block = {
+			box: [
+				centerX - defaultWidth / 2,
+				centerY - defaultHeight / 2,
+				centerX + defaultWidth / 2,
+				centerY + defaultHeight / 2
+			],
+			vertical: false,
+			font_size: 20,
+			lines: ['']
+		};
+
+		workingBlocks.push(newBlock);
+		workingBlocks = [...workingBlocks]; // Trigger reactivity
+		hasUnsavedChanges = true;
+
+		// Auto-select the new box
+		selectedIndex = workingBlocks.length - 1;
 	}
 
 	async function revertToOriginal() {
@@ -273,7 +296,7 @@
 		onExport={exportMokuro}
 		onExit={exitToReader}
 		onRevert={revertToOriginal}
-		onCompare={showCompare}
+		onAddBox={addTextbox}
 		onZoomChange={(mode) => (zoomMode = mode)}
 	/>
 
@@ -326,83 +349,6 @@
 		</svelte:fragment>
 		Failed to save: {saveErrorMessage}
 	</Toast>
-
-	<!-- Compare Modal -->
-	{#if volumeHasEdits && originalPageData}
-		<Modal bind:open={showCompareModal} size="xl" autoclose={false} class="!max-w-[90vw]">
-			<div class="space-y-4">
-				<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-					Compare Original vs Edited
-				</h3>
-
-				<div class="grid grid-cols-2 gap-4">
-					<!-- Original Version -->
-					<div class="space-y-2">
-						<h4 class="text-lg font-medium text-gray-700 dark:text-gray-300">Original</h4>
-						<div class="relative border-2 border-gray-300 dark:border-gray-600 rounded overflow-auto max-h-[70vh]">
-							<img
-								src={pageImage}
-								alt="Original page"
-								class="w-full h-auto"
-							/>
-							{#each originalPageData.blocks as block}
-								<div
-									class="absolute border-2 border-blue-500 bg-white bg-opacity-60 p-1 overflow-hidden"
-									style:left="{block.box[0]}px"
-									style:top="{block.box[1]}px"
-									style:width="{block.box[2] - block.box[0]}px"
-									style:height="{block.box[3] - block.box[1]}px"
-									style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
-									style:font-size="{block.font_size}px"
-									style:line-height="1.1em"
-									style:font-family="'Noto Sans JP', sans-serif"
-								>
-									{#each block.lines as line}
-										<p class="m-0 leading-tight text-black">{line}</p>
-									{/each}
-								</div>
-							{/each}
-						</div>
-					</div>
-
-					<!-- Edited Version -->
-					<div class="space-y-2">
-						<h4 class="text-lg font-medium text-gray-700 dark:text-gray-300">Edited</h4>
-						<div class="relative border-2 border-gray-300 dark:border-gray-600 rounded overflow-auto max-h-[70vh]">
-							<img
-								src={pageImage}
-								alt="Edited page"
-								class="w-full h-auto"
-							/>
-							{#each pageData.blocks as block}
-								<div
-									class="absolute border-2 border-green-500 bg-white bg-opacity-60 p-1 overflow-hidden"
-									style:left="{block.box[0]}px"
-									style:top="{block.box[1]}px"
-									style:width="{block.box[2] - block.box[0]}px"
-									style:height="{block.box[3] - block.box[1]}px"
-									style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
-									style:font-size="{block.font_size}px"
-									style:line-height="1.1em"
-									style:font-family="'Noto Sans JP', sans-serif"
-								>
-									{#each block.lines as line}
-										<p class="m-0 leading-tight text-black">{line}</p>
-									{/each}
-								</div>
-							{/each}
-						</div>
-					</div>
-				</div>
-
-				<div class="flex justify-end">
-					<Button color="alternative" on:click={() => showCompareModal = false}>
-						Close
-					</Button>
-				</div>
-			</div>
-		</Modal>
-	{/if}
 {:else}
 	<div class="flex items-center justify-center w-screen h-screen">
 		<p class="text-xl">Failed to load page data</p>

From 88a47de7c197211819b966b28aa95efac2b9b048 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 13:08:36 -0700
Subject: [PATCH 07/10] fix: Correct icon name and separate revert toast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed two issues:
1. Changed PlusSolid to CirclePlusSolid (correct Flowbite icon name)
2. Added separate toast for revert operations to avoid confusion

## Changes
- EditToolbar.svelte: Use CirclePlusSolid instead of PlusSolid
- edit/+page.svelte: Added showRevertSuccess state and toast
- Revert now shows "Reverted to original" instead of "Edits saved successfully"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Editor/EditToolbar.svelte   |  4 ++--
 .../[volume]/edit/[pageIndex]/+page.svelte     | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
index c4d8ddf2..d5820f57 100644
--- a/src/lib/components/Editor/EditToolbar.svelte
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -7,7 +7,7 @@
 		DownloadSolid,
 		XSolid,
 		UndoOutline,
-		PlusSolid
+		CirclePlusSolid
 	} from 'flowbite-svelte-icons';
 
 	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
@@ -102,7 +102,7 @@
 		</Button>
 
 		<Button size="sm" color="purple" onclick={onAddBox}>
-			<PlusSolid class="w-4 h-4 mr-2" />
+			<CirclePlusSolid class="w-4 h-4 mr-2" />
 			Add Textbox
 		</Button>
 
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index 9ad4aff6..8d3281ee 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -28,6 +28,7 @@
 	let showSaveSuccess = $state(false);
 	let showSaveError = $state(false);
 	let saveErrorMessage = $state('');
+	let showRevertSuccess = $state(false);
 
 	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
 	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
@@ -220,9 +221,9 @@
 					await loadVolumeData();
 
 					// Show success toast
-					showSaveSuccess = true;
+					showRevertSuccess = true;
 					setTimeout(() => {
-						showSaveSuccess = false;
+						showRevertSuccess = false;
 					}, 3000);
 				} catch (error) {
 					console.error('Failed to revert edits:', error);
@@ -349,6 +350,19 @@
 		</svelte:fragment>
 		Failed to save: {saveErrorMessage}
 	</Toast>
+
+	<!-- Revert Success Toast -->
+	<Toast
+		color="green"
+		position="top-right"
+		open={showRevertSuccess}
+		class="fixed top-20 right-4 z-50"
+	>
+		<svelte:fragment slot="icon">
+			<CheckCircleSolid class="w-5 h-5" />
+		</svelte:fragment>
+		Reverted to original
+	</Toast>
 {:else}
 	<div class="flex items-center justify-center w-screen h-screen">
 		<p class="text-xl">Failed to load page data</p>

From a7c530a5c981f90556698a0f2cfd618c71762760 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Sun, 9 Nov 2025 22:38:01 -0700
Subject: [PATCH 08/10] feat: Auto-resize font during textbox resize and remove
 manual button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented automatic font sizing during resize operations and removed the redundant manual auto-size button.

## Changes

**Auto-resize during drag:**
- Font size now automatically adjusts as you resize a text box
- Throttled to every 10th frame for smooth performance
- Final auto-size runs when resize completes for perfect fitting
- Uses fast overflow detection to increase/decrease font size

**Removed manual button:**
- Removed auto-size button (now redundant)
- Removed TextSizeOutline icon import
- Removed handle-font-auto CSS styles
- Updated resize handle tooltip to indicate auto-sizing

**Bug fixes:**
- Added data-block-index attribute for DOM queries
- Added text-container class for overflow detection
- Fixed page navigation not updating text boxes
- Added $effect to reload workingBlocks on page change
- Removed transition-all for instant position updates
- Fixed Modal import that was accidentally removed
- Fixed toast showing on page load with isMounted guard

**Technical improvements:**
- Used JSON serialization instead of structuredClone for Svelte state
- Throttled auto-size to prevent blocking resize operations
- requestAnimationFrame for non-blocking font updates

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Editor/EditableBox.svelte  | 88 ++++++++++++++-----
 .../[volume]/edit/[pageIndex]/+page.svelte    | 22 ++++-
 2 files changed, 82 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/Editor/EditableBox.svelte b/src/lib/components/Editor/EditableBox.svelte
index a5e6a847..8dc63f17 100644
--- a/src/lib/components/Editor/EditableBox.svelte
+++ b/src/lib/components/Editor/EditableBox.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Block } from '$lib/types';
-	import { TrashBinSolid, FileCopySolid, ExpandOutline, ArrowUpRightDownLeftOutline, TextSizeOutline } from 'flowbite-svelte-icons';
+	import { TrashBinSolid, FileCopySolid, ExpandOutline, ArrowUpRightDownLeftOutline } from 'flowbite-svelte-icons';
 	import { clamp } from '$lib/util';
 
 	interface Props {
@@ -35,6 +35,7 @@
 	let dragStartY = $state(0);
 	let isEditingText = $state(false);
 	let textContent = $state('');
+	let resizeFrameCount = $state(0);
 
 	// Derived values
 	let [xmin, ymin, xmax, ymax] = $derived(block.box);
@@ -117,12 +118,70 @@
 
 		dragStartX = e.clientX;
 		dragStartY = e.clientY;
+
+		// Auto-size font every 10 frames during resize (throttle for performance)
+		resizeFrameCount++;
+		if (resizeFrameCount % 10 === 0) {
+			requestAnimationFrame(() => autoSizeFontDuringResize());
+		}
+	}
+
+	async function autoSizeFontDuringResize() {
+		// Get the text container element
+		const container = document.querySelector(`[data-block-index="${index}"] .text-container`) as HTMLElement;
+		if (!container) return;
+
+		const maxSize = 100;
+		const minSize = 6;
+
+		// Helper to check if content overflows
+		const isOverflowing = () => {
+			return container.scrollHeight > container.clientHeight || container.scrollWidth > container.clientWidth;
+		};
+
+		let testSize = block.font_size;
+
+		// Quick check: if overflowing, decrease; if not, try to increase
+		if (isOverflowing()) {
+			// Decrease until fits
+			while (testSize > minSize && isOverflowing()) {
+				testSize--;
+				onUpdate({
+					...block,
+					font_size: testSize
+				});
+				await new Promise(resolve => requestAnimationFrame(resolve));
+			}
+		} else {
+			// Try to increase
+			while (testSize < maxSize) {
+				testSize++;
+				onUpdate({
+					...block,
+					font_size: testSize
+				});
+				await new Promise(resolve => requestAnimationFrame(resolve));
+				if (isOverflowing()) {
+					// Went too far, go back one
+					testSize--;
+					onUpdate({
+						...block,
+						font_size: testSize
+					});
+					break;
+				}
+			}
+		}
 	}
 
 	function handleResizeEnd() {
 		isDraggingResize = false;
+		resizeFrameCount = 0;
 		document.removeEventListener('mousemove', handleResize);
 		document.removeEventListener('mouseup', handleResizeEnd);
+
+		// Do a final auto-size when resize is complete
+		requestAnimationFrame(() => autoSizeFontDuringResize());
 	}
 
 	function handleClone(e: MouseEvent) {
@@ -224,7 +283,7 @@
 <svelte:window onkeydown={handleKeyDown} />
 
 <div
-	class="absolute border-2 transition-all"
+	class="absolute border-2"
 	class:border-dashed={!isSelected}
 	class:border-solid={isSelected}
 	class:border-gray-400={!isSelected}
@@ -243,6 +302,7 @@
 	onclick={handleSelect}
 	role="button"
 	tabindex="0"
+	data-block-index={index}
 >
 	<!-- Text Content -->
 	{#if isEditingText}
@@ -258,7 +318,7 @@
 		></textarea>
 	{:else}
 		<div
-			class="w-full h-full p-1 overflow-hidden cursor-text text-black"
+			class="text-container w-full h-full p-1 overflow-hidden cursor-text text-black"
 			class:bg-white={isSelected}
 			class:bg-opacity-80={isSelected}
 			onclick={handleTextClick}
@@ -309,21 +369,11 @@
 		<button
 			class="handle handle-resize"
 			onmousedown={handleResizeStart}
-			title="Resize"
+			title="Resize (auto-sizes font)"
 			aria-label="Resize box"
 		>
 			<ArrowUpRightDownLeftOutline class="w-4 h-4 rotate-90" />
 		</button>
-
-		<!-- Auto Size Font (Right side) -->
-		<button
-			class="handle handle-font-auto"
-			onclick={autoSizeFontSize}
-			title="Auto-size font to fit"
-			aria-label="Auto-size font"
-		>
-			<TextSizeOutline class="w-4 h-4" />
-		</button>
 	{/if}
 </div>
 
@@ -380,14 +430,4 @@
 		cursor: nwse-resize;
 		color: #3b82f6;
 	}
-
-	.handle-font-auto {
-		top: 50%;
-		right: -14px;
-		transform: translateY(-50%);
-		cursor: pointer;
-		background: #f59e0b;
-		color: white;
-		border-color: #d97706;
-	}
 </style>
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index 8d3281ee..fa6f0103 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -5,7 +5,7 @@
 	import { getCurrentPages, hasEdits } from '$lib/catalog/pages';
 	import type { VolumeData, Page, Block } from '$lib/types';
 	import { onMount } from 'svelte';
-	import { Button, Spinner, Toast } from 'flowbite-svelte';
+	import { Button, Modal, Spinner, Toast } from 'flowbite-svelte';
 	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
 	import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
 	import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
@@ -29,6 +29,7 @@
 	let showSaveError = $state(false);
 	let saveErrorMessage = $state('');
 	let showRevertSuccess = $state(false);
+	let isMounted = $state(false);
 
 	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
 	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
@@ -41,6 +42,19 @@
 
 	onMount(async () => {
 		await loadVolumeData();
+		isMounted = true;
+	});
+
+	// Reload working blocks when page index changes
+	$effect(() => {
+		if (volumeData && pageIndex >= 0) {
+			const currentPages = getCurrentPages(volumeData);
+			if (currentPages[pageIndex]) {
+				workingBlocks = JSON.parse(JSON.stringify(currentPages[pageIndex].blocks || []));
+				selectedIndex = null;
+				hasUnsavedChanges = false;
+			}
+		}
 	});
 
 	async function loadVolumeData() {
@@ -329,7 +343,7 @@
 	<Toast
 		color="green"
 		position="top-right"
-		open={showSaveSuccess}
+		open={isMounted && showSaveSuccess}
 		class="fixed top-20 right-4 z-50"
 	>
 		<svelte:fragment slot="icon">
@@ -342,7 +356,7 @@
 	<Toast
 		color="red"
 		position="top-right"
-		open={showSaveError}
+		open={isMounted && showSaveError}
 		class="fixed top-20 right-4 z-50"
 	>
 		<svelte:fragment slot="icon">
@@ -355,7 +369,7 @@
 	<Toast
 		color="green"
 		position="top-right"
-		open={showRevertSuccess}
+		open={isMounted && showRevertSuccess}
 		class="fixed top-20 right-4 z-50"
 	>
 		<svelte:fragment slot="icon">

From fef44160f06118756d245bfb6a3792022506e8b3 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Mon, 24 Nov 2025 20:50:26 -0700
Subject: [PATCH 09/10] style: Fix Prettier formatting for editor components

---
 src/lib/catalog/pages.ts                      |   6 +-
 src/lib/components/Editor/EditCanvas.svelte   | 245 +++--
 src/lib/components/Editor/EditToolbar.svelte  | 202 ++--
 src/lib/components/Editor/EditableBox.svelte  | 859 +++++++++---------
 src/lib/components/Reader/QuickActions.svelte | 332 +++----
 src/lib/components/VolumeItem.svelte          |   2 +-
 .../[volume]/edit/[pageIndex]/+page.svelte    | 739 ++++++++-------
 7 files changed, 1191 insertions(+), 1194 deletions(-)

diff --git a/src/lib/catalog/pages.ts b/src/lib/catalog/pages.ts
index 53dab9ff..0fbe7061 100644
--- a/src/lib/catalog/pages.ts
+++ b/src/lib/catalog/pages.ts
@@ -5,19 +5,19 @@ import type { VolumeData, Page } from '$lib/types';
  * Returns edited version if it exists, otherwise original.
  */
 export function getCurrentPages(volumeData: VolumeData): Page[] {
-	return volumeData.edited_pages ?? volumeData.pages;
+  return volumeData.edited_pages ?? volumeData.pages;
 }
 
 /**
  * Check if volume has edits
  */
 export function hasEdits(volumeData: VolumeData): boolean {
-	return volumeData.edited_pages !== undefined;
+  return volumeData.edited_pages !== undefined;
 }
 
 /**
  * Get original pages (for reference in editor)
  */
 export function getOriginalPages(volumeData: VolumeData): Page[] {
-	return volumeData.pages;
+  return volumeData.pages;
 }
diff --git a/src/lib/components/Editor/EditCanvas.svelte b/src/lib/components/Editor/EditCanvas.svelte
index 9a37c7ce..5c0c335d 100644
--- a/src/lib/components/Editor/EditCanvas.svelte
+++ b/src/lib/components/Editor/EditCanvas.svelte
@@ -1,130 +1,127 @@
 <script lang="ts">
-	import type { Page, Block } from '$lib/types';
-	import EditableBox from './EditableBox.svelte';
-	import { onMount } from 'svelte';
-
-	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
-
-	interface Props {
-		pageData: Page;
-		pageImage: string;
-		workingBlocks: Block[];
-		selectedIndex: number | null;
-		zoomMode: ZoomMode;
-		updateBlock: (index: number, block: Block) => void;
-		deleteBlock: (index: number) => void;
-		cloneBlock: (index: number) => number;
-	}
-
-	let {
-		pageData,
-		pageImage,
-		workingBlocks = $bindable(),
-		selectedIndex = $bindable(),
-		zoomMode,
-		updateBlock,
-		deleteBlock,
-		cloneBlock
-	}: Props = $props();
-
-	let containerRef: HTMLDivElement;
-	let scale = $state(1);
-
-	function handleSelect(index: number) {
-		selectedIndex = index;
-	}
-
-	function handleDeselect() {
-		selectedIndex = null;
-	}
-
-	function calculateZoom() {
-		if (!containerRef) return;
-
-		const container = containerRef;
-		const padding = 64; // 8 * 2 (p-8 on each side)
-		const containerWidth = container.clientWidth - padding;
-		const containerHeight = container.clientHeight - padding;
-		const pageWidth = pageData.img_width;
-		const pageHeight = pageData.img_height;
-
-		let newScale = 1;
-
-		switch (zoomMode) {
-			case 'fit-screen': {
-				const scaleX = containerWidth / pageWidth;
-				const scaleY = containerHeight / pageHeight;
-				newScale = Math.min(scaleX, scaleY);
-				break;
-			}
-			case 'fit-width': {
-				newScale = containerWidth / pageWidth;
-				break;
-			}
-			case 'original': {
-				newScale = 1;
-				break;
-			}
-		}
-
-		scale = newScale;
-	}
-
-	onMount(() => {
-		calculateZoom();
-		window.addEventListener('resize', calculateZoom);
-		return () => {
-			window.removeEventListener('resize', calculateZoom);
-		};
-	});
-
-	$effect(() => {
-		// Recalculate when zoom mode changes
-		zoomMode;
-		calculateZoom();
-	});
+  import type { Page, Block } from '$lib/types';
+  import EditableBox from './EditableBox.svelte';
+  import { onMount } from 'svelte';
+
+  type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+  interface Props {
+    pageData: Page;
+    pageImage: string;
+    workingBlocks: Block[];
+    selectedIndex: number | null;
+    zoomMode: ZoomMode;
+    updateBlock: (index: number, block: Block) => void;
+    deleteBlock: (index: number) => void;
+    cloneBlock: (index: number) => number;
+  }
+
+  let {
+    pageData,
+    pageImage,
+    workingBlocks = $bindable(),
+    selectedIndex = $bindable(),
+    zoomMode,
+    updateBlock,
+    deleteBlock,
+    cloneBlock
+  }: Props = $props();
+
+  let containerRef: HTMLDivElement;
+  let scale = $state(1);
+
+  function handleSelect(index: number) {
+    selectedIndex = index;
+  }
+
+  function handleDeselect() {
+    selectedIndex = null;
+  }
+
+  function calculateZoom() {
+    if (!containerRef) return;
+
+    const container = containerRef;
+    const padding = 64; // 8 * 2 (p-8 on each side)
+    const containerWidth = container.clientWidth - padding;
+    const containerHeight = container.clientHeight - padding;
+    const pageWidth = pageData.img_width;
+    const pageHeight = pageData.img_height;
+
+    let newScale = 1;
+
+    switch (zoomMode) {
+      case 'fit-screen': {
+        const scaleX = containerWidth / pageWidth;
+        const scaleY = containerHeight / pageHeight;
+        newScale = Math.min(scaleX, scaleY);
+        break;
+      }
+      case 'fit-width': {
+        newScale = containerWidth / pageWidth;
+        break;
+      }
+      case 'original': {
+        newScale = 1;
+        break;
+      }
+    }
+
+    scale = newScale;
+  }
+
+  onMount(() => {
+    calculateZoom();
+    window.addEventListener('resize', calculateZoom);
+    return () => {
+      window.removeEventListener('resize', calculateZoom);
+    };
+  });
+
+  $effect(() => {
+    // Recalculate when zoom mode changes
+    zoomMode;
+    calculateZoom();
+  });
 </script>
 
 <div
-	bind:this={containerRef}
-	class="fixed top-16 left-0 right-0 bottom-0 overflow-auto bg-gray-900 flex items-center justify-center p-8"
+  bind:this={containerRef}
+  class="fixed top-16 right-0 bottom-0 left-0 flex items-center justify-center overflow-auto bg-gray-900 p-8"
 >
-	<div
-		class="relative"
-		style:width="{pageData.img_width}px"
-		style:height="{pageData.img_height}px"
-		style:transform="scale({scale})"
-		style:transform-origin="center center"
-	>
-		<!-- Page Image -->
-		<img
-			src={pageImage}
-			alt="Manga page"
-			class="absolute top-0 left-0 w-full h-full object-contain pointer-events-none select-none"
-			draggable="false"
-		/>
-
-		<!-- Editable Text Boxes -->
-		{#each workingBlocks as block, index (index)}
-			<EditableBox
-				{block}
-				{index}
-				isSelected={selectedIndex === index}
-				imgWidth={pageData.img_width}
-				imgHeight={pageData.img_height}
-				onSelect={() => handleSelect(index)}
-				onUpdate={(updatedBlock) => updateBlock(index, updatedBlock)}
-				onDelete={() => deleteBlock(index)}
-				onClone={() => cloneBlock(index)}
-				bind:selectedIndex
-			/>
-		{/each}
-
-		<!-- Click outside to deselect -->
-		<button
-			class="absolute inset-0 -z-10"
-			onclick={handleDeselect}
-			aria-label="Deselect box"
-		></button>
-	</div>
+  <div
+    class="relative"
+    style:width="{pageData.img_width}px"
+    style:height="{pageData.img_height}px"
+    style:transform="scale({scale})"
+    style:transform-origin="center center"
+  >
+    <!-- Page Image -->
+    <img
+      src={pageImage}
+      alt="Manga page"
+      class="pointer-events-none absolute top-0 left-0 h-full w-full object-contain select-none"
+      draggable="false"
+    />
+
+    <!-- Editable Text Boxes -->
+    {#each workingBlocks as block, index (index)}
+      <EditableBox
+        {block}
+        {index}
+        isSelected={selectedIndex === index}
+        imgWidth={pageData.img_width}
+        imgHeight={pageData.img_height}
+        onSelect={() => handleSelect(index)}
+        onUpdate={(updatedBlock) => updateBlock(index, updatedBlock)}
+        onDelete={() => deleteBlock(index)}
+        onClone={() => cloneBlock(index)}
+        bind:selectedIndex
+      />
+    {/each}
+
+    <!-- Click outside to deselect -->
+    <button class="absolute inset-0 -z-10" onclick={handleDeselect} aria-label="Deselect box"
+    ></button>
+  </div>
 </div>
diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
index ca399557..568a55f3 100644
--- a/src/lib/components/Editor/EditToolbar.svelte
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -1,121 +1,121 @@
 <script lang="ts">
-	import { Button, Toolbar, ToolbarGroup, Select } from 'flowbite-svelte';
-	import {
-		CaretLeftSolid,
-		CaretRightSolid,
-		FloppyDiskSolid,
-		DownloadSolid,
-		XSolid,
-		UndoOutline,
-		CirclePlusSolid
-	} from 'flowbite-svelte-icons';
+  import { Button, Toolbar, ToolbarGroup, Select } from 'flowbite-svelte';
+  import {
+    CaretLeftSolid,
+    CaretRightSolid,
+    FloppyDiskSolid,
+    DownloadSolid,
+    XSolid,
+    UndoOutline,
+    CirclePlusSolid
+  } from 'flowbite-svelte-icons';
 
-	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+  type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
 
-	interface Props {
-		pageIndex: number;
-		totalPages: number;
-		hasUnsavedChanges: boolean;
-		hasEdits: boolean;
-		zoomMode: ZoomMode;
-		onPrev: () => void;
-		onNext: () => void;
-		onSave: () => void;
-		onExport: () => void;
-		onExit: () => void;
-		onRevert: () => void;
-		onAddBox: () => void;
-		onZoomChange: (mode: ZoomMode) => void;
-	}
+  interface Props {
+    pageIndex: number;
+    totalPages: number;
+    hasUnsavedChanges: boolean;
+    hasEdits: boolean;
+    zoomMode: ZoomMode;
+    onPrev: () => void;
+    onNext: () => void;
+    onSave: () => void;
+    onExport: () => void;
+    onExit: () => void;
+    onRevert: () => void;
+    onAddBox: () => void;
+    onZoomChange: (mode: ZoomMode) => void;
+  }
 
-	let {
-		pageIndex,
-		totalPages,
-		hasUnsavedChanges,
-		hasEdits,
-		zoomMode = $bindable(),
-		onPrev,
-		onNext,
-		onSave,
-		onExport,
-		onExit,
-		onRevert,
-		onAddBox,
-		onZoomChange
-	}: Props = $props();
+  let {
+    pageIndex,
+    totalPages,
+    hasUnsavedChanges,
+    hasEdits,
+    zoomMode = $bindable(),
+    onPrev,
+    onNext,
+    onSave,
+    onExport,
+    onExit,
+    onRevert,
+    onAddBox,
+    onZoomChange
+  }: Props = $props();
 
-	const zoomOptions = [
-		{ value: 'fit-screen', name: 'Fit to Screen' },
-		{ value: 'fit-width', name: 'Fit to Width' },
-		{ value: 'original', name: 'Original Size' }
-	];
+  const zoomOptions = [
+    { value: 'fit-screen', name: 'Fit to Screen' },
+    { value: 'fit-width', name: 'Fit to Width' },
+    { value: 'original', name: 'Original Size' }
+  ];
 
-	function handleZoomChange(event: Event) {
-		const target = event.target as HTMLSelectElement;
-		onZoomChange(target.value as ZoomMode);
-	}
+  function handleZoomChange(event: Event) {
+    const target = event.target as HTMLSelectElement;
+    onZoomChange(target.value as ZoomMode);
+  }
 </script>
 
 <Toolbar
-	color="dark"
-	class="fixed top-0 left-0 right-0 z-50 px-4 py-2 flex items-center justify-between"
+  color="dark"
+  class="fixed top-0 right-0 left-0 z-50 flex items-center justify-between px-4 py-2"
 >
-	<ToolbarGroup class="flex items-center gap-2">
-		<Button size="sm" color="alternative" onclick={onExit}>
-			<XSolid class="w-4 h-4 mr-2" />
-			Exit
-		</Button>
+  <ToolbarGroup class="flex items-center gap-2">
+    <Button size="sm" color="alternative" onclick={onExit}>
+      <XSolid class="mr-2 h-4 w-4" />
+      Exit
+    </Button>
 
-		<div class="mx-4 text-white font-medium">
-			Page {pageIndex + 1} / {totalPages}
-		</div>
+    <div class="mx-4 font-medium text-white">
+      Page {pageIndex + 1} / {totalPages}
+    </div>
 
-		<Button size="sm" color="alternative" disabled={pageIndex <= 0} onclick={onPrev}>
-			<CaretLeftSolid class="w-4 h-4 mr-2" />
-			Previous
-		</Button>
+    <Button size="sm" color="alternative" disabled={pageIndex <= 0} onclick={onPrev}>
+      <CaretLeftSolid class="mr-2 h-4 w-4" />
+      Previous
+    </Button>
 
-		<Button size="sm" color="alternative" disabled={pageIndex >= totalPages - 1} onclick={onNext}>
-			Next
-			<CaretRightSolid class="w-4 h-4 ml-2" />
-		</Button>
+    <Button size="sm" color="alternative" disabled={pageIndex >= totalPages - 1} onclick={onNext}>
+      Next
+      <CaretRightSolid class="ml-2 h-4 w-4" />
+    </Button>
 
-		<div class="ml-4">
-			<Select
-				size="sm"
-				class="w-40"
-				value={zoomMode}
-				onchange={handleZoomChange}
-				items={zoomOptions}
-			/>
-		</div>
-	</ToolbarGroup>
+    <div class="ml-4">
+      <Select
+        size="sm"
+        class="w-40"
+        value={zoomMode}
+        onchange={handleZoomChange}
+        items={zoomOptions}
+      />
+    </div>
+  </ToolbarGroup>
 
-	<ToolbarGroup class="flex items-center gap-2">
-		{#if hasUnsavedChanges}
-			<span class="text-yellow-400 text-sm mr-2">Unsaved changes</span>
-		{/if}
+  <ToolbarGroup class="flex items-center gap-2">
+    {#if hasUnsavedChanges}
+      <span class="mr-2 text-sm text-yellow-400">Unsaved changes</span>
+    {/if}
 
-		<Button size="sm" color="green" onclick={onSave} disabled={!hasUnsavedChanges}>
-			<FloppyDiskSolid class="w-4 h-4 mr-2" />
-			Save
-		</Button>
+    <Button size="sm" color="green" onclick={onSave} disabled={!hasUnsavedChanges}>
+      <FloppyDiskSolid class="mr-2 h-4 w-4" />
+      Save
+    </Button>
 
-		<Button size="sm" color="purple" onclick={onAddBox}>
-			<CirclePlusSolid class="w-4 h-4 mr-2" />
-			Add Textbox
-		</Button>
+    <Button size="sm" color="purple" onclick={onAddBox}>
+      <CirclePlusSolid class="mr-2 h-4 w-4" />
+      Add Textbox
+    </Button>
 
-		{#if hasEdits}
-			<Button size="sm" color="red" onclick={onRevert}>
-				<UndoOutline class="w-4 h-4 mr-2" />
-				Revert to Original
-			</Button>
-		{/if}
+    {#if hasEdits}
+      <Button size="sm" color="red" onclick={onRevert}>
+        <UndoOutline class="mr-2 h-4 w-4" />
+        Revert to Original
+      </Button>
+    {/if}
 
-		<Button size="sm" color="blue" onclick={onExport}>
-			<DownloadSolid class="w-4 h-4 mr-2" />
-			Export .mokuro
-		</Button>
-	</ToolbarGroup>
+    <Button size="sm" color="blue" onclick={onExport}>
+      <DownloadSolid class="mr-2 h-4 w-4" />
+      Export .mokuro
+    </Button>
+  </ToolbarGroup>
 </Toolbar>
diff --git a/src/lib/components/Editor/EditableBox.svelte b/src/lib/components/Editor/EditableBox.svelte
index 8dc63f17..a4a349c2 100644
--- a/src/lib/components/Editor/EditableBox.svelte
+++ b/src/lib/components/Editor/EditableBox.svelte
@@ -1,433 +1,448 @@
 <script lang="ts">
-	import type { Block } from '$lib/types';
-	import { TrashBinSolid, FileCopySolid, ExpandOutline, ArrowUpRightDownLeftOutline } from 'flowbite-svelte-icons';
-	import { clamp } from '$lib/util';
-
-	interface Props {
-		block: Block;
-		index: number;
-		isSelected: boolean;
-		imgWidth: number;
-		imgHeight: number;
-		selectedIndex: number | null;
-		onSelect: () => void;
-		onUpdate: (block: Block) => void;
-		onDelete: () => void;
-		onClone: () => number;
-	}
-
-	let {
-		block,
-		index,
-		isSelected,
-		imgWidth,
-		imgHeight,
-		selectedIndex = $bindable(),
-		onSelect,
-		onUpdate,
-		onDelete,
-		onClone
-	}: Props = $props();
-
-	let isDraggingMove = $state(false);
-	let isDraggingResize = $state(false);
-	let dragStartX = $state(0);
-	let dragStartY = $state(0);
-	let isEditingText = $state(false);
-	let textContent = $state('');
-	let resizeFrameCount = $state(0);
-
-	// Derived values
-	let [xmin, ymin, xmax, ymax] = $derived(block.box);
-	let width = $derived(xmax - xmin);
-	let height = $derived(ymax - ymin);
-
-	// Initialize text content when block changes
-	$effect(() => {
-		textContent = block.lines.join('\n');
-	});
-
-	function handleSelect(e: MouseEvent) {
-		e.stopPropagation();
-		if (!isSelected) {
-			onSelect();
-		}
-	}
-
-	function handleMoveStart(e: MouseEvent) {
-		e.stopPropagation();
-		e.preventDefault();
-		isDraggingMove = true;
-		dragStartX = e.clientX;
-		dragStartY = e.clientY;
-
-		document.addEventListener('mousemove', handleMove);
-		document.addEventListener('mouseup', handleMoveEnd);
-	}
-
-	function handleMove(e: MouseEvent) {
-		if (!isDraggingMove) return;
-
-		const deltaX = e.clientX - dragStartX;
-		const deltaY = e.clientY - dragStartY;
-
-		// Calculate new position
-		const newXmin = clamp(xmin + deltaX, 0, imgWidth - width);
-		const newYmin = clamp(ymin + deltaY, 0, imgHeight - height);
-
-		onUpdate({
-			...block,
-			box: [newXmin, newYmin, newXmin + width, newYmin + height]
-		});
-
-		dragStartX = e.clientX;
-		dragStartY = e.clientY;
-	}
-
-	function handleMoveEnd() {
-		isDraggingMove = false;
-		document.removeEventListener('mousemove', handleMove);
-		document.removeEventListener('mouseup', handleMoveEnd);
-	}
-
-	function handleResizeStart(e: MouseEvent) {
-		e.stopPropagation();
-		e.preventDefault();
-		isDraggingResize = true;
-		dragStartX = e.clientX;
-		dragStartY = e.clientY;
-
-		document.addEventListener('mousemove', handleResize);
-		document.addEventListener('mouseup', handleResizeEnd);
-	}
-
-	function handleResize(e: MouseEvent) {
-		if (!isDraggingResize) return;
-
-		const deltaX = e.clientX - dragStartX;
-		const deltaY = e.clientY - dragStartY;
-
-		// Calculate new bottom-right corner (top-left stays anchored)
-		const newXmax = clamp(xmax + deltaX, xmin + 20, imgWidth);
-		const newYmax = clamp(ymax + deltaY, ymin + 20, imgHeight);
-
-		onUpdate({
-			...block,
-			box: [xmin, ymin, newXmax, newYmax]
-		});
-
-		dragStartX = e.clientX;
-		dragStartY = e.clientY;
-
-		// Auto-size font every 10 frames during resize (throttle for performance)
-		resizeFrameCount++;
-		if (resizeFrameCount % 10 === 0) {
-			requestAnimationFrame(() => autoSizeFontDuringResize());
-		}
-	}
-
-	async function autoSizeFontDuringResize() {
-		// Get the text container element
-		const container = document.querySelector(`[data-block-index="${index}"] .text-container`) as HTMLElement;
-		if (!container) return;
-
-		const maxSize = 100;
-		const minSize = 6;
-
-		// Helper to check if content overflows
-		const isOverflowing = () => {
-			return container.scrollHeight > container.clientHeight || container.scrollWidth > container.clientWidth;
-		};
-
-		let testSize = block.font_size;
-
-		// Quick check: if overflowing, decrease; if not, try to increase
-		if (isOverflowing()) {
-			// Decrease until fits
-			while (testSize > minSize && isOverflowing()) {
-				testSize--;
-				onUpdate({
-					...block,
-					font_size: testSize
-				});
-				await new Promise(resolve => requestAnimationFrame(resolve));
-			}
-		} else {
-			// Try to increase
-			while (testSize < maxSize) {
-				testSize++;
-				onUpdate({
-					...block,
-					font_size: testSize
-				});
-				await new Promise(resolve => requestAnimationFrame(resolve));
-				if (isOverflowing()) {
-					// Went too far, go back one
-					testSize--;
-					onUpdate({
-						...block,
-						font_size: testSize
-					});
-					break;
-				}
-			}
-		}
-	}
-
-	function handleResizeEnd() {
-		isDraggingResize = false;
-		resizeFrameCount = 0;
-		document.removeEventListener('mousemove', handleResize);
-		document.removeEventListener('mouseup', handleResizeEnd);
-
-		// Do a final auto-size when resize is complete
-		requestAnimationFrame(() => autoSizeFontDuringResize());
-	}
-
-	function handleClone(e: MouseEvent) {
-		e.stopPropagation();
-		e.preventDefault();
-
-		// Create the clone and get new index
-		const newIndex = onClone();
-
-		// Select the new box
-		selectedIndex = newIndex;
-
-		// Immediately start move mode on the cloned box
-		isDraggingMove = true;
-		dragStartX = e.clientX;
-		dragStartY = e.clientY;
-
-		document.addEventListener('mousemove', handleMove);
-		document.addEventListener('mouseup', handleMoveEnd);
-	}
-
-	function handleDelete(e: MouseEvent) {
-		e.stopPropagation();
-		onDelete();
-	}
-
-	function handleTextClick(e: MouseEvent) {
-		if (isSelected) {
-			e.stopPropagation();
-			isEditingText = true;
-		}
-	}
-
-	function handleTextBlur() {
-		isEditingText = false;
-		// Update lines from text content
-		const newLines = textContent.split('\n').filter((line) => line.trim() !== '');
-		onUpdate({
-			...block,
-			lines: newLines.length > 0 ? newLines : ['']
-		});
-	}
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			isEditingText = false;
-			textContent = block.lines.join('\n'); // Revert changes
-		} else if (e.key === 'Delete' && !isEditingText && isSelected) {
-			onDelete();
-		}
-	}
-
-	async function autoSizeFontSize(e: MouseEvent) {
-		e.stopPropagation();
-
-		// Get the text container element
-		const container = (e.currentTarget as HTMLElement).parentElement?.querySelector('.w-full.h-full') as HTMLElement;
-		if (!container) return;
-
-		const maxSize = 100;
-		const minSize = 6;
-
-		// Helper to check if content overflows
-		const isOverflowing = () => {
-			return container.scrollHeight > container.clientHeight || container.scrollWidth > container.clientWidth;
-		};
-
-		// Helper to wait for next frame
-		const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
-
-		let testSize = block.font_size;
-
-		// Phase 1: Increase size until overflow
-		while (testSize < maxSize) {
-			testSize++;
-			onUpdate({
-				...block,
-				font_size: testSize
-			});
-			await nextFrame();
-
-			if (isOverflowing()) {
-				// Found overflow! Now reduce until it fits
-				// Phase 2: Decrease size until it fits
-				while (testSize > minSize && isOverflowing()) {
-					testSize--;
-					onUpdate({
-						...block,
-						font_size: testSize
-					});
-					await nextFrame();
-				}
-				return; // Done!
-			}
-		}
-	}
+  import type { Block } from '$lib/types';
+  import {
+    TrashBinSolid,
+    FileCopySolid,
+    ExpandOutline,
+    ArrowUpRightDownLeftOutline
+  } from 'flowbite-svelte-icons';
+  import { clamp } from '$lib/util';
+
+  interface Props {
+    block: Block;
+    index: number;
+    isSelected: boolean;
+    imgWidth: number;
+    imgHeight: number;
+    selectedIndex: number | null;
+    onSelect: () => void;
+    onUpdate: (block: Block) => void;
+    onDelete: () => void;
+    onClone: () => number;
+  }
+
+  let {
+    block,
+    index,
+    isSelected,
+    imgWidth,
+    imgHeight,
+    selectedIndex = $bindable(),
+    onSelect,
+    onUpdate,
+    onDelete,
+    onClone
+  }: Props = $props();
+
+  let isDraggingMove = $state(false);
+  let isDraggingResize = $state(false);
+  let dragStartX = $state(0);
+  let dragStartY = $state(0);
+  let isEditingText = $state(false);
+  let textContent = $state('');
+  let resizeFrameCount = $state(0);
+
+  // Derived values
+  let [xmin, ymin, xmax, ymax] = $derived(block.box);
+  let width = $derived(xmax - xmin);
+  let height = $derived(ymax - ymin);
+
+  // Initialize text content when block changes
+  $effect(() => {
+    textContent = block.lines.join('\n');
+  });
+
+  function handleSelect(e: MouseEvent) {
+    e.stopPropagation();
+    if (!isSelected) {
+      onSelect();
+    }
+  }
+
+  function handleMoveStart(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    isDraggingMove = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleMoveEnd);
+  }
+
+  function handleMove(e: MouseEvent) {
+    if (!isDraggingMove) return;
+
+    const deltaX = e.clientX - dragStartX;
+    const deltaY = e.clientY - dragStartY;
+
+    // Calculate new position
+    const newXmin = clamp(xmin + deltaX, 0, imgWidth - width);
+    const newYmin = clamp(ymin + deltaY, 0, imgHeight - height);
+
+    onUpdate({
+      ...block,
+      box: [newXmin, newYmin, newXmin + width, newYmin + height]
+    });
+
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+  }
+
+  function handleMoveEnd() {
+    isDraggingMove = false;
+    document.removeEventListener('mousemove', handleMove);
+    document.removeEventListener('mouseup', handleMoveEnd);
+  }
+
+  function handleResizeStart(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    isDraggingResize = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', handleResizeEnd);
+  }
+
+  function handleResize(e: MouseEvent) {
+    if (!isDraggingResize) return;
+
+    const deltaX = e.clientX - dragStartX;
+    const deltaY = e.clientY - dragStartY;
+
+    // Calculate new bottom-right corner (top-left stays anchored)
+    const newXmax = clamp(xmax + deltaX, xmin + 20, imgWidth);
+    const newYmax = clamp(ymax + deltaY, ymin + 20, imgHeight);
+
+    onUpdate({
+      ...block,
+      box: [xmin, ymin, newXmax, newYmax]
+    });
+
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    // Auto-size font every 10 frames during resize (throttle for performance)
+    resizeFrameCount++;
+    if (resizeFrameCount % 10 === 0) {
+      requestAnimationFrame(() => autoSizeFontDuringResize());
+    }
+  }
+
+  async function autoSizeFontDuringResize() {
+    // Get the text container element
+    const container = document.querySelector(
+      `[data-block-index="${index}"] .text-container`
+    ) as HTMLElement;
+    if (!container) return;
+
+    const maxSize = 100;
+    const minSize = 6;
+
+    // Helper to check if content overflows
+    const isOverflowing = () => {
+      return (
+        container.scrollHeight > container.clientHeight ||
+        container.scrollWidth > container.clientWidth
+      );
+    };
+
+    let testSize = block.font_size;
+
+    // Quick check: if overflowing, decrease; if not, try to increase
+    if (isOverflowing()) {
+      // Decrease until fits
+      while (testSize > minSize && isOverflowing()) {
+        testSize--;
+        onUpdate({
+          ...block,
+          font_size: testSize
+        });
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      }
+    } else {
+      // Try to increase
+      while (testSize < maxSize) {
+        testSize++;
+        onUpdate({
+          ...block,
+          font_size: testSize
+        });
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        if (isOverflowing()) {
+          // Went too far, go back one
+          testSize--;
+          onUpdate({
+            ...block,
+            font_size: testSize
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  function handleResizeEnd() {
+    isDraggingResize = false;
+    resizeFrameCount = 0;
+    document.removeEventListener('mousemove', handleResize);
+    document.removeEventListener('mouseup', handleResizeEnd);
+
+    // Do a final auto-size when resize is complete
+    requestAnimationFrame(() => autoSizeFontDuringResize());
+  }
+
+  function handleClone(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    // Create the clone and get new index
+    const newIndex = onClone();
+
+    // Select the new box
+    selectedIndex = newIndex;
+
+    // Immediately start move mode on the cloned box
+    isDraggingMove = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleMoveEnd);
+  }
+
+  function handleDelete(e: MouseEvent) {
+    e.stopPropagation();
+    onDelete();
+  }
+
+  function handleTextClick(e: MouseEvent) {
+    if (isSelected) {
+      e.stopPropagation();
+      isEditingText = true;
+    }
+  }
+
+  function handleTextBlur() {
+    isEditingText = false;
+    // Update lines from text content
+    const newLines = textContent.split('\n').filter((line) => line.trim() !== '');
+    onUpdate({
+      ...block,
+      lines: newLines.length > 0 ? newLines : ['']
+    });
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      isEditingText = false;
+      textContent = block.lines.join('\n'); // Revert changes
+    } else if (e.key === 'Delete' && !isEditingText && isSelected) {
+      onDelete();
+    }
+  }
+
+  async function autoSizeFontSize(e: MouseEvent) {
+    e.stopPropagation();
+
+    // Get the text container element
+    const container = (e.currentTarget as HTMLElement).parentElement?.querySelector(
+      '.w-full.h-full'
+    ) as HTMLElement;
+    if (!container) return;
+
+    const maxSize = 100;
+    const minSize = 6;
+
+    // Helper to check if content overflows
+    const isOverflowing = () => {
+      return (
+        container.scrollHeight > container.clientHeight ||
+        container.scrollWidth > container.clientWidth
+      );
+    };
+
+    // Helper to wait for next frame
+    const nextFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
+    let testSize = block.font_size;
+
+    // Phase 1: Increase size until overflow
+    while (testSize < maxSize) {
+      testSize++;
+      onUpdate({
+        ...block,
+        font_size: testSize
+      });
+      await nextFrame();
+
+      if (isOverflowing()) {
+        // Found overflow! Now reduce until it fits
+        // Phase 2: Decrease size until it fits
+        while (testSize > minSize && isOverflowing()) {
+          testSize--;
+          onUpdate({
+            ...block,
+            font_size: testSize
+          });
+          await nextFrame();
+        }
+        return; // Done!
+      }
+    }
+  }
 </script>
 
 <svelte:window onkeydown={handleKeyDown} />
 
 <div
-	class="absolute border-2"
-	class:border-dashed={!isSelected}
-	class:border-solid={isSelected}
-	class:border-gray-400={!isSelected}
-	class:border-blue-500={isSelected}
-	class:opacity-60={!isSelected}
-	class:opacity-100={isSelected}
-	class:z-10={!isSelected}
-	class:z-50={isSelected}
-	class:cursor-move={isDraggingMove}
-	class:cursor-nwse-resize={isDraggingResize}
-	style:left="{xmin}px"
-	style:top="{ymin}px"
-	style:width="{width}px"
-	style:height="{height}px"
-	style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
-	onclick={handleSelect}
-	role="button"
-	tabindex="0"
-	data-block-index={index}
+  class="absolute border-2"
+  class:border-dashed={!isSelected}
+  class:border-solid={isSelected}
+  class:border-gray-400={!isSelected}
+  class:border-blue-500={isSelected}
+  class:opacity-60={!isSelected}
+  class:opacity-100={isSelected}
+  class:z-10={!isSelected}
+  class:z-50={isSelected}
+  class:cursor-move={isDraggingMove}
+  class:cursor-nwse-resize={isDraggingResize}
+  style:left="{xmin}px"
+  style:top="{ymin}px"
+  style:width="{width}px"
+  style:height="{height}px"
+  style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+  onclick={handleSelect}
+  role="button"
+  tabindex="0"
+  data-block-index={index}
 >
-	<!-- Text Content -->
-	{#if isEditingText}
-		<textarea
-			bind:value={textContent}
-			onblur={handleTextBlur}
-			class="w-full h-full p-1 bg-white border-none outline-none resize-none text-black"
-			style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
-			style:font-size="{block.font_size}px"
-			style:line-height="1.1em"
-			style:font-family="'Noto Sans JP', sans-serif"
-			autofocus
-		></textarea>
-	{:else}
-		<div
-			class="text-container w-full h-full p-1 overflow-hidden cursor-text text-black"
-			class:bg-white={isSelected}
-			class:bg-opacity-80={isSelected}
-			onclick={handleTextClick}
-			role="button"
-			tabindex="-1"
-			style:font-size="{block.font_size}px"
-			style:line-height="1.1em"
-			style:font-family="'Noto Sans JP', sans-serif"
-		>
-			{#each block.lines as line}
-				<p class="m-0 leading-tight">{line}</p>
-			{/each}
-		</div>
-	{/if}
-
-	{#if isSelected}
-		<!-- Move Handle (Top-Left) -->
-		<button
-			class="handle handle-move"
-			onmousedown={handleMoveStart}
-			title="Move"
-			aria-label="Move box"
-		>
-			<ExpandOutline class="w-4 h-4 rotate-45" />
-		</button>
-
-		<!-- Delete Handle (Top-Right) -->
-		<button
-			class="handle handle-delete"
-			onclick={handleDelete}
-			title="Delete"
-			aria-label="Delete box"
-		>
-			<TrashBinSolid class="w-3 h-3" />
-		</button>
-
-		<!-- Clone Handle (Bottom-Left) -->
-		<button
-			class="handle handle-clone"
-			onmousedown={handleClone}
-			title="Clone (drag to place)"
-			aria-label="Clone box"
-		>
-			<FileCopySolid class="w-3 h-3" />
-		</button>
-
-		<!-- Resize Handle (Bottom-Right) -->
-		<button
-			class="handle handle-resize"
-			onmousedown={handleResizeStart}
-			title="Resize (auto-sizes font)"
-			aria-label="Resize box"
-		>
-			<ArrowUpRightDownLeftOutline class="w-4 h-4 rotate-90" />
-		</button>
-	{/if}
+  <!-- Text Content -->
+  {#if isEditingText}
+    <textarea
+      bind:value={textContent}
+      onblur={handleTextBlur}
+      class="h-full w-full resize-none border-none bg-white p-1 text-black outline-none"
+      style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+      style:font-size="{block.font_size}px"
+      style:line-height="1.1em"
+      style:font-family="'Noto Sans JP', sans-serif"
+      autofocus
+    ></textarea>
+  {:else}
+    <div
+      class="text-container h-full w-full cursor-text overflow-hidden p-1 text-black"
+      class:bg-white={isSelected}
+      class:bg-opacity-80={isSelected}
+      onclick={handleTextClick}
+      role="button"
+      tabindex="-1"
+      style:font-size="{block.font_size}px"
+      style:line-height="1.1em"
+      style:font-family="'Noto Sans JP', sans-serif"
+    >
+      {#each block.lines as line}
+        <p class="m-0 leading-tight">{line}</p>
+      {/each}
+    </div>
+  {/if}
+
+  {#if isSelected}
+    <!-- Move Handle (Top-Left) -->
+    <button
+      class="handle handle-move"
+      onmousedown={handleMoveStart}
+      title="Move"
+      aria-label="Move box"
+    >
+      <ExpandOutline class="h-4 w-4 rotate-45" />
+    </button>
+
+    <!-- Delete Handle (Top-Right) -->
+    <button
+      class="handle handle-delete"
+      onclick={handleDelete}
+      title="Delete"
+      aria-label="Delete box"
+    >
+      <TrashBinSolid class="h-3 w-3" />
+    </button>
+
+    <!-- Clone Handle (Bottom-Left) -->
+    <button
+      class="handle handle-clone"
+      onmousedown={handleClone}
+      title="Clone (drag to place)"
+      aria-label="Clone box"
+    >
+      <FileCopySolid class="h-3 w-3" />
+    </button>
+
+    <!-- Resize Handle (Bottom-Right) -->
+    <button
+      class="handle handle-resize"
+      onmousedown={handleResizeStart}
+      title="Resize (auto-sizes font)"
+      aria-label="Resize box"
+    >
+      <ArrowUpRightDownLeftOutline class="h-4 w-4 rotate-90" />
+    </button>
+  {/if}
 </div>
 
 <style>
-	.handle {
-		position: absolute;
-		width: 28px;
-		height: 28px;
-		background: white;
-		border: 2px solid #3b82f6;
-		border-radius: 6px;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 14px;
-		transition: all 0.2s;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-	}
-
-	.handle:hover {
-		transform: scale(1.1);
-		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-	}
-
-	.handle-move {
-		top: -14px;
-		left: -14px;
-		cursor: move;
-		color: #3b82f6;
-	}
-
-	.handle-delete {
-		top: -14px;
-		right: -14px;
-		cursor: pointer;
-		background: #ef4444;
-		color: white;
-		border-color: #dc2626;
-	}
-
-	.handle-clone {
-		bottom: -14px;
-		left: -14px;
-		cursor: copy;
-		background: #10b981;
-		color: white;
-		border-color: #059669;
-	}
-
-	.handle-resize {
-		bottom: -14px;
-		right: -14px;
-		cursor: nwse-resize;
-		color: #3b82f6;
-	}
+  .handle {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    background: white;
+    border: 2px solid #3b82f6;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .handle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .handle-move {
+    top: -14px;
+    left: -14px;
+    cursor: move;
+    color: #3b82f6;
+  }
+
+  .handle-delete {
+    top: -14px;
+    right: -14px;
+    cursor: pointer;
+    background: #ef4444;
+    color: white;
+    border-color: #dc2626;
+  }
+
+  .handle-clone {
+    bottom: -14px;
+    left: -14px;
+    cursor: copy;
+    background: #10b981;
+    color: white;
+    border-color: #059669;
+  }
+
+  .handle-resize {
+    bottom: -14px;
+    right: -14px;
+    cursor: nwse-resize;
+    color: #3b82f6;
+  }
 </style>
diff --git a/src/lib/components/Reader/QuickActions.svelte b/src/lib/components/Reader/QuickActions.svelte
index b2f546b4..c52ccca3 100644
--- a/src/lib/components/Reader/QuickActions.svelte
+++ b/src/lib/components/Reader/QuickActions.svelte
@@ -1,186 +1,186 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { toggleFullScreen, zoomFitToScreen } from '$lib/panzoom';
-	import { Modal, Button } from 'flowbite-svelte';
-	import { settings } from '$lib/settings';
-	import {
-		ArrowLeftOutline,
-		ArrowRightOutline,
-		CompressOutline,
-		ImageOutline,
-		ZoomOutOutline,
-		PlusOutline,
-		EditOutline
-	} from 'flowbite-svelte-icons';
-	import { imageToWebp, showCropper, updateLastCard } from '$lib/anki-connect';
-	import { promptConfirmation } from '$lib/util';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { toggleFullScreen, zoomFitToScreen } from '$lib/panzoom';
+  import { Modal, Button } from 'flowbite-svelte';
+  import { settings } from '$lib/settings';
+  import {
+    ArrowLeftOutline,
+    ArrowRightOutline,
+    CompressOutline,
+    ImageOutline,
+    ZoomOutOutline,
+    PlusOutline,
+    EditOutline
+  } from 'flowbite-svelte-icons';
+  import { imageToWebp, showCropper, updateLastCard } from '$lib/anki-connect';
+  import { promptConfirmation } from '$lib/util';
 
-	interface Props {
-		left: (_e: any, ingoreTimeOut?: boolean) => void;
-		right: (_e: any, ingoreTimeOut?: boolean) => void;
-		src1: File | undefined;
-		src2: File | undefined;
-		currentPage: number;
-		showSecondPage: boolean;
-	}
+  interface Props {
+    left: (_e: any, ingoreTimeOut?: boolean) => void;
+    right: (_e: any, ingoreTimeOut?: boolean) => void;
+    src1: File | undefined;
+    src2: File | undefined;
+    currentPage: number;
+    showSecondPage: boolean;
+  }
 
-	let { left, right, src1, src2, currentPage, showSecondPage }: Props = $props();
+  let { left, right, src1, src2, currentPage, showSecondPage }: Props = $props();
 
-	let open = $state(false);
-	let showPageSelector = $state(false);
+  let open = $state(false);
+  let showPageSelector = $state(false);
 
-	function handleZoom() {
-		zoomFitToScreen();
-		open = false;
-	}
+  function handleZoom() {
+    zoomFitToScreen();
+    open = false;
+  }
 
-	function handleLeft(_e: Event) {
-		left(_e, true);
-		open = false;
-	}
+  function handleLeft(_e: Event) {
+    left(_e, true);
+    open = false;
+  }
 
-	function handleRight(_e: Event) {
-		right(_e, true);
-		open = false;
-	}
+  function handleRight(_e: Event) {
+    right(_e, true);
+    open = false;
+  }
 
-	function handleEditPage() {
-		open = false;
+  function handleEditPage() {
+    open = false;
 
-		if (showSecondPage) {
-			// Show modal to select which page to edit
-			showPageSelector = true;
-		} else {
-			// Navigate directly to edit the current page
-			navigateToEditPage(currentPage - 1); // Convert to 0-based index
-		}
-	}
+    if (showSecondPage) {
+      // Show modal to select which page to edit
+      showPageSelector = true;
+    } else {
+      // Navigate directly to edit the current page
+      navigateToEditPage(currentPage - 1); // Convert to 0-based index
+    }
+  }
 
-	function navigateToEditPage(pageIndex: number) {
-		const manga = $page.params.manga;
-		const volume = $page.params.volume;
-		goto(`/${manga}/${volume}/edit/${pageIndex}`);
-		showPageSelector = false;
-	}
+  function navigateToEditPage(pageIndex: number) {
+    const manga = $page.params.manga;
+    const volume = $page.params.volume;
+    goto(`/${manga}/${volume}/edit/${pageIndex}`);
+    showPageSelector = false;
+  }
 
-	async function onUpdateCard(src: File | undefined) {
-		if ($settings.ankiConnectSettings.enabled && src) {
-			if ($settings.ankiConnectSettings.cropImage) {
-				showCropper(URL.createObjectURL(src));
-			} else {
-				promptConfirmation('Add image to last created anki card?', async () => {
-					const imageData = await imageToWebp(src, $settings);
-					updateLastCard(imageData);
-				});
-			}
-		}
-		open = false;
-	}
+  async function onUpdateCard(src: File | undefined) {
+    if ($settings.ankiConnectSettings.enabled && src) {
+      if ($settings.ankiConnectSettings.cropImage) {
+        showCropper(URL.createObjectURL(src));
+      } else {
+        promptConfirmation('Add image to last created anki card?', async () => {
+          const imageData = await imageToWebp(src, $settings);
+          updateLastCard(imageData);
+        });
+      }
+    }
+    open = false;
+  }
 
-	function toggleMenu() {
-		open = !open;
-	}
+  function toggleMenu() {
+    open = !open;
+  }
 </script>
 
 {#if $settings.quickActions}
-	<div class="fixed end-3 bottom-3 z-50 flex flex-col items-center">
-		<!-- Action buttons (shown when open) -->
-		{#if open}
-			<div class="mb-2 flex flex-col items-center gap-2">
-				{#if $settings.ankiConnectSettings.enabled}
-					<button
-						onclick={() => onUpdateCard(src1)}
-						class="relative flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-						aria-label="Add image to Anki"
-					>
-						<ImageOutline size="xl" />
-						{#if src2}
-							<span
-								class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-xs text-white"
-								>1</span
-							>
-						{/if}
-					</button>
-				{/if}
-				{#if $settings.ankiConnectSettings.enabled && src2}
-					<button
-						onclick={() => onUpdateCard(src2)}
-						class="relative flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-						aria-label="Add image 2 to Anki"
-					>
-						<ImageOutline size="xl" />
-						<span
-							class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-xs text-white"
-							>2</span
-						>
-					</button>
-				{/if}
-				<button
-					onclick={toggleFullScreen}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-					aria-label="Toggle fullscreen"
-				>
-					<CompressOutline size="xl" />
-				</button>
-				<button
-					onclick={handleZoom}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-					aria-label="Zoom to fit"
-				>
-					<ZoomOutOutline size="xl" />
-				</button>
-				<button
-					onclick={handleRight}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-					aria-label="Next page"
-				>
-					<ArrowRightOutline size="xl" />
-				</button>
-				<button
-					onclick={handleLeft}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-					aria-label="Previous page"
-				>
-					<ArrowLeftOutline size="xl" />
-				</button>
-				<button
-					onclick={handleEditPage}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-					aria-label="Edit page"
-				>
-					<EditOutline size="xl" />
-				</button>
-			</div>
-		{/if}
+  <div class="fixed end-3 bottom-3 z-50 flex flex-col items-center">
+    <!-- Action buttons (shown when open) -->
+    {#if open}
+      <div class="mb-2 flex flex-col items-center gap-2">
+        {#if $settings.ankiConnectSettings.enabled}
+          <button
+            onclick={() => onUpdateCard(src1)}
+            class="relative flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            aria-label="Add image to Anki"
+          >
+            <ImageOutline size="xl" />
+            {#if src2}
+              <span
+                class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-xs text-white"
+                >1</span
+              >
+            {/if}
+          </button>
+        {/if}
+        {#if $settings.ankiConnectSettings.enabled && src2}
+          <button
+            onclick={() => onUpdateCard(src2)}
+            class="relative flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            aria-label="Add image 2 to Anki"
+          >
+            <ImageOutline size="xl" />
+            <span
+              class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-xs text-white"
+              >2</span
+            >
+          </button>
+        {/if}
+        <button
+          onclick={toggleFullScreen}
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          aria-label="Toggle fullscreen"
+        >
+          <CompressOutline size="xl" />
+        </button>
+        <button
+          onclick={handleZoom}
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          aria-label="Zoom to fit"
+        >
+          <ZoomOutOutline size="xl" />
+        </button>
+        <button
+          onclick={handleRight}
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          aria-label="Next page"
+        >
+          <ArrowRightOutline size="xl" />
+        </button>
+        <button
+          onclick={handleLeft}
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          aria-label="Previous page"
+        >
+          <ArrowLeftOutline size="xl" />
+        </button>
+        <button
+          onclick={handleEditPage}
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          aria-label="Edit page"
+        >
+          <EditOutline size="xl" />
+        </button>
+      </div>
+    {/if}
 
-		<!-- Main toggle button -->
-		<button
-			onclick={toggleMenu}
-			class="flex h-12 w-12 items-center justify-center rounded-full text-white focus:ring-2 focus:ring-blue-500 focus:outline-none"
-			aria-label="Quick actions menu"
-			style="transition: transform 0.3s ease; transform: rotate({open ? 45 : 0}deg);"
-		>
-			<PlusOutline size="xl" />
-		</button>
-	</div>
+    <!-- Main toggle button -->
+    <button
+      onclick={toggleMenu}
+      class="flex h-12 w-12 items-center justify-center rounded-full text-white focus:ring-2 focus:ring-blue-500 focus:outline-none"
+      aria-label="Quick actions menu"
+      style="transition: transform 0.3s ease; transform: rotate({open ? 45 : 0}deg);"
+    >
+      <PlusOutline size="xl" />
+    </button>
+  </div>
 {/if}
 
 <Modal bind:open={showPageSelector} size="xs" autoclose={false}>
-	<div class="text-center">
-		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
-			Which page do you want to edit?
-		</h3>
-		<div class="flex justify-center gap-4">
-			<Button color="blue" onclick={() => navigateToEditPage(currentPage - 1)}>
-				Left Page ({currentPage})
-			</Button>
-			<Button color="blue" onclick={() => navigateToEditPage(currentPage)}>
-				Right Page ({currentPage + 1})
-			</Button>
-		</div>
-		<div class="mt-4">
-			<Button color="alternative" onclick={() => (showPageSelector = false)}>Cancel</Button>
-		</div>
-	</div>
+  <div class="text-center">
+    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+      Which page do you want to edit?
+    </h3>
+    <div class="flex justify-center gap-4">
+      <Button color="blue" onclick={() => navigateToEditPage(currentPage - 1)}>
+        Left Page ({currentPage})
+      </Button>
+      <Button color="blue" onclick={() => navigateToEditPage(currentPage)}>
+        Right Page ({currentPage + 1})
+      </Button>
+    </div>
+    <div class="mt-4">
+      <Button color="alternative" onclick={() => (showPageSelector = false)}>Cancel</Button>
+    </div>
+  </div>
 </Modal>
diff --git a/src/lib/components/VolumeItem.svelte b/src/lib/components/VolumeItem.svelte
index 8d550a96..b36ec888 100644
--- a/src/lib/components/VolumeItem.svelte
+++ b/src/lib/components/VolumeItem.svelte
@@ -402,7 +402,7 @@
             {/if}
           </div>
           {#if volumeHasEdits}
-            <Badge color="yellow" class="!px-1.5 !py-0.5 flex-shrink-0">
+            <Badge color="yellow" class="flex-shrink-0 !px-1.5 !py-0.5">
               <PenSolid class="h-3 w-3" />
             </Badge>
           {/if}
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index 4c992416..9feb33c1 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -1,387 +1,372 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
-	import { db } from '$lib/catalog/db';
-	import { getCurrentPages, hasEdits } from '$lib/catalog/pages';
-	import type { VolumeData, Page, Block } from '$lib/types';
-	import { onMount } from 'svelte';
-	import { Button, Modal, Spinner, Toast } from 'flowbite-svelte';
-	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
-	import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
-	import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
-	import { promptConfirmation } from '$lib/util';
-
-	type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
-
-	let volumeUuid = $derived($page.params.volume || '');
-	let pageIndexParam = $derived($page.params.pageIndex || '0');
-	let pageIndex = $derived(parseInt(pageIndexParam, 10));
-
-	let volumeData = $state<VolumeData | undefined>(undefined);
-	let workingBlocks = $state<Block[]>([]);
-	let selectedIndex = $state<number | null>(null);
-	let hasUnsavedChanges = $state(false);
-	let isLoading = $state(true);
-	let showUnsavedWarning = $state(false);
-	let pendingNavigation: (() => void) | null = null;
-	let zoomMode = $state<ZoomMode>('fit-screen');
-	let showSaveSuccess = $state(false);
-	let showSaveError = $state(false);
-	let saveErrorMessage = $state('');
-	let showRevertSuccess = $state(false);
-	let isMounted = $state(false);
-
-	let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
-	let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
-	let volumeHasEdits = $derived(volumeData ? hasEdits(volumeData) : false);
-	let pageImage = $derived(
-		volumeData?.files && Object.values(volumeData.files)[pageIndex]
-			? URL.createObjectURL(Object.values(volumeData.files)[pageIndex])
-			: ''
-	);
-
-	onMount(async () => {
-		await loadVolumeData();
-		isMounted = true;
-	});
-
-	// Reload working blocks when page index changes
-	$effect(() => {
-		if (volumeData && pageIndex >= 0) {
-			const currentPages = getCurrentPages(volumeData);
-			if (currentPages[pageIndex]) {
-				workingBlocks = JSON.parse(JSON.stringify(currentPages[pageIndex].blocks || []));
-				selectedIndex = null;
-				hasUnsavedChanges = false;
-			}
-		}
-	});
-
-	async function loadVolumeData() {
-		isLoading = true;
-		try {
-			const data = await db.volumes_data.get(volumeUuid);
-			if (data) {
-				volumeData = data;
-				// Initialize working blocks with current page's blocks (edited or original)
-				const currentPages = getCurrentPages(data);
-				workingBlocks = structuredClone(currentPages[pageIndex]?.blocks || []);
-			}
-		} catch (error) {
-			console.error('Failed to load volume data:', error);
-		} finally {
-			isLoading = false;
-		}
-	}
-
-	function updateBlock(index: number, updatedBlock: Block) {
-		workingBlocks[index] = updatedBlock;
-		hasUnsavedChanges = true;
-		workingBlocks = [...workingBlocks]; // Trigger reactivity
-	}
-
-	function deleteBlock(index: number) {
-		workingBlocks.splice(index, 1);
-		hasUnsavedChanges = true;
-		selectedIndex = null;
-		workingBlocks = [...workingBlocks]; // Trigger reactivity
-	}
-
-	function cloneBlock(index: number): number {
-		const clonedBlock = structuredClone(workingBlocks[index]);
-		// Offset the cloned box slightly
-		const offset = 20;
-		clonedBlock.box = [
-			clonedBlock.box[0] + offset,
-			clonedBlock.box[1] + offset,
-			clonedBlock.box[2] + offset,
-			clonedBlock.box[3] + offset
-		];
-		workingBlocks.push(clonedBlock);
-		hasUnsavedChanges = true;
-		workingBlocks = [...workingBlocks]; // Trigger reactivity
-		return workingBlocks.length - 1; // Return new index
-	}
-
-	async function saveEdits() {
-		if (!volumeData) return;
-
-		try {
-			// Get current pages (edited or original)
-			const currentPages = getCurrentPages(volumeData);
-
-			// Create a copy and update the current page's blocks
-			// Use JSON parse/stringify to avoid cloning issues with IndexedDB objects and Svelte proxies
-			const updatedPages = JSON.parse(JSON.stringify(currentPages));
-			updatedPages[pageIndex].blocks = JSON.parse(JSON.stringify(workingBlocks));
-
-			// Save to edited_pages field
-			await db.volumes_data.update(volumeUuid, {
-				edited_pages: updatedPages
-			});
-
-			// Update local volumeData
-			volumeData.edited_pages = updatedPages;
-			hasUnsavedChanges = false;
-
-			// Show success toast
-			showSaveSuccess = true;
-			setTimeout(() => {
-				showSaveSuccess = false;
-			}, 3000);
-
-			console.log('Edits saved successfully');
-		} catch (error) {
-			console.error('Failed to save edits:', error);
-
-			// Show error toast
-			saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
-			showSaveError = true;
-			setTimeout(() => {
-				showSaveError = false;
-			}, 5000);
-		}
-	}
-
-	function navigatePage(newPageIndex: number) {
-		if (newPageIndex < 0 || newPageIndex >= totalPages) return;
-
-		if (hasUnsavedChanges) {
-			showUnsavedWarning = true;
-			pendingNavigation = () => {
-				goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
-			};
-		} else {
-			goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
-		}
-	}
-
-	function exitToReader() {
-		if (hasUnsavedChanges) {
-			showUnsavedWarning = true;
-			pendingNavigation = () => {
-				goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
-			};
-		} else {
-			goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
-		}
-	}
-
-	async function saveAndNavigate() {
-		await saveEdits();
-		showUnsavedWarning = false;
-		if (pendingNavigation) {
-			pendingNavigation();
-			pendingNavigation = null;
-		}
-	}
-
-	function discardAndNavigate() {
-		hasUnsavedChanges = false;
-		showUnsavedWarning = false;
-		if (pendingNavigation) {
-			pendingNavigation();
-			pendingNavigation = null;
-		}
-	}
-
-	function cancelNavigation() {
-		showUnsavedWarning = false;
-		pendingNavigation = null;
-	}
-
-	function addTextbox() {
-		if (!pageData) return;
-
-		// Create a new empty textbox in the center of the page
-		const centerX = pageData.img_width / 2;
-		const centerY = pageData.img_height / 2;
-		const defaultWidth = 200;
-		const defaultHeight = 100;
-
-		const newBlock: Block = {
-			box: [
-				centerX - defaultWidth / 2,
-				centerY - defaultHeight / 2,
-				centerX + defaultWidth / 2,
-				centerY + defaultHeight / 2
-			],
-			vertical: false,
-			font_size: 20,
-			lines: ['']
-		};
-
-		workingBlocks.push(newBlock);
-		workingBlocks = [...workingBlocks]; // Trigger reactivity
-		hasUnsavedChanges = true;
-
-		// Auto-select the new box
-		selectedIndex = workingBlocks.length - 1;
-	}
-
-	async function revertToOriginal() {
-		if (!volumeData) return;
-
-		promptConfirmation(
-			'Revert all edits to original? This cannot be undone.',
-			async () => {
-				try {
-					// Remove edited_pages field from database
-					await db.volumes_data.update(volumeUuid, {
-						edited_pages: undefined
-					});
-
-					// Reload the page to show original data
-					await loadVolumeData();
-
-					// Show success toast
-					showRevertSuccess = true;
-					setTimeout(() => {
-						showRevertSuccess = false;
-					}, 3000);
-				} catch (error) {
-					console.error('Failed to revert edits:', error);
-					saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
-					showSaveError = true;
-					setTimeout(() => {
-						showSaveError = false;
-					}, 5000);
-				}
-			}
-		);
-	}
-
-	async function exportMokuro() {
-		if (!volumeData) return;
-
-		try {
-			const metadata = await db.volumes.get(volumeUuid);
-			if (!metadata) return;
-
-			const currentPages = getCurrentPages(volumeData);
-
-			const mokuroData = {
-				version: metadata.mokuro_version,
-				title: metadata.series_title,
-				title_uuid: metadata.series_uuid,
-				volume: metadata.volume_title,
-				volume_uuid: metadata.volume_uuid,
-				pages: currentPages,
-				chars: currentPages.reduce(
-					(total, page) =>
-						total +
-						page.blocks.reduce((pageTotal, block) => pageTotal + block.lines.join('').length, 0),
-					0
-				)
-			};
-
-			const blob = new Blob([JSON.stringify(mokuroData, null, 2)], {
-				type: 'application/json'
-			});
-			const url = URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = `${metadata.volume_title}_edited.mokuro`;
-			a.click();
-			URL.revokeObjectURL(url);
-		} catch (error) {
-			console.error('Failed to export .mokuro file:', error);
-		}
-	}
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { db } from '$lib/catalog/db';
+  import { getCurrentPages, hasEdits } from '$lib/catalog/pages';
+  import type { VolumeData, Page, Block } from '$lib/types';
+  import { onMount } from 'svelte';
+  import { Button, Modal, Spinner, Toast } from 'flowbite-svelte';
+  import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
+  import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
+  import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
+  import { promptConfirmation } from '$lib/util';
+
+  type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+  let volumeUuid = $derived($page.params.volume || '');
+  let pageIndexParam = $derived($page.params.pageIndex || '0');
+  let pageIndex = $derived(parseInt(pageIndexParam, 10));
+
+  let volumeData = $state<VolumeData | undefined>(undefined);
+  let workingBlocks = $state<Block[]>([]);
+  let selectedIndex = $state<number | null>(null);
+  let hasUnsavedChanges = $state(false);
+  let isLoading = $state(true);
+  let showUnsavedWarning = $state(false);
+  let pendingNavigation: (() => void) | null = null;
+  let zoomMode = $state<ZoomMode>('fit-screen');
+  let showSaveSuccess = $state(false);
+  let showSaveError = $state(false);
+  let saveErrorMessage = $state('');
+  let showRevertSuccess = $state(false);
+  let isMounted = $state(false);
+
+  let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
+  let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
+  let volumeHasEdits = $derived(volumeData ? hasEdits(volumeData) : false);
+  let pageImage = $derived(
+    volumeData?.files && Object.values(volumeData.files)[pageIndex]
+      ? URL.createObjectURL(Object.values(volumeData.files)[pageIndex])
+      : ''
+  );
+
+  onMount(async () => {
+    await loadVolumeData();
+    isMounted = true;
+  });
+
+  // Reload working blocks when page index changes
+  $effect(() => {
+    if (volumeData && pageIndex >= 0) {
+      const currentPages = getCurrentPages(volumeData);
+      if (currentPages[pageIndex]) {
+        workingBlocks = JSON.parse(JSON.stringify(currentPages[pageIndex].blocks || []));
+        selectedIndex = null;
+        hasUnsavedChanges = false;
+      }
+    }
+  });
+
+  async function loadVolumeData() {
+    isLoading = true;
+    try {
+      const data = await db.volumes_data.get(volumeUuid);
+      if (data) {
+        volumeData = data;
+        // Initialize working blocks with current page's blocks (edited or original)
+        const currentPages = getCurrentPages(data);
+        workingBlocks = structuredClone(currentPages[pageIndex]?.blocks || []);
+      }
+    } catch (error) {
+      console.error('Failed to load volume data:', error);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function updateBlock(index: number, updatedBlock: Block) {
+    workingBlocks[index] = updatedBlock;
+    hasUnsavedChanges = true;
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+  }
+
+  function deleteBlock(index: number) {
+    workingBlocks.splice(index, 1);
+    hasUnsavedChanges = true;
+    selectedIndex = null;
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+  }
+
+  function cloneBlock(index: number): number {
+    const clonedBlock = structuredClone(workingBlocks[index]);
+    // Offset the cloned box slightly
+    const offset = 20;
+    clonedBlock.box = [
+      clonedBlock.box[0] + offset,
+      clonedBlock.box[1] + offset,
+      clonedBlock.box[2] + offset,
+      clonedBlock.box[3] + offset
+    ];
+    workingBlocks.push(clonedBlock);
+    hasUnsavedChanges = true;
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+    return workingBlocks.length - 1; // Return new index
+  }
+
+  async function saveEdits() {
+    if (!volumeData) return;
+
+    try {
+      // Get current pages (edited or original)
+      const currentPages = getCurrentPages(volumeData);
+
+      // Create a copy and update the current page's blocks
+      // Use JSON parse/stringify to avoid cloning issues with IndexedDB objects and Svelte proxies
+      const updatedPages = JSON.parse(JSON.stringify(currentPages));
+      updatedPages[pageIndex].blocks = JSON.parse(JSON.stringify(workingBlocks));
+
+      // Save to edited_pages field
+      await db.volumes_data.update(volumeUuid, {
+        edited_pages: updatedPages
+      });
+
+      // Update local volumeData
+      volumeData.edited_pages = updatedPages;
+      hasUnsavedChanges = false;
+
+      // Show success toast
+      showSaveSuccess = true;
+      setTimeout(() => {
+        showSaveSuccess = false;
+      }, 3000);
+
+      console.log('Edits saved successfully');
+    } catch (error) {
+      console.error('Failed to save edits:', error);
+
+      // Show error toast
+      saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
+      showSaveError = true;
+      setTimeout(() => {
+        showSaveError = false;
+      }, 5000);
+    }
+  }
+
+  function navigatePage(newPageIndex: number) {
+    if (newPageIndex < 0 || newPageIndex >= totalPages) return;
+
+    if (hasUnsavedChanges) {
+      showUnsavedWarning = true;
+      pendingNavigation = () => {
+        goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
+      };
+    } else {
+      goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
+    }
+  }
+
+  function exitToReader() {
+    if (hasUnsavedChanges) {
+      showUnsavedWarning = true;
+      pendingNavigation = () => {
+        goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
+      };
+    } else {
+      goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
+    }
+  }
+
+  async function saveAndNavigate() {
+    await saveEdits();
+    showUnsavedWarning = false;
+    if (pendingNavigation) {
+      pendingNavigation();
+      pendingNavigation = null;
+    }
+  }
+
+  function discardAndNavigate() {
+    hasUnsavedChanges = false;
+    showUnsavedWarning = false;
+    if (pendingNavigation) {
+      pendingNavigation();
+      pendingNavigation = null;
+    }
+  }
+
+  function cancelNavigation() {
+    showUnsavedWarning = false;
+    pendingNavigation = null;
+  }
+
+  function addTextbox() {
+    if (!pageData) return;
+
+    // Create a new empty textbox in the center of the page
+    const centerX = pageData.img_width / 2;
+    const centerY = pageData.img_height / 2;
+    const defaultWidth = 200;
+    const defaultHeight = 100;
+
+    const newBlock: Block = {
+      box: [
+        centerX - defaultWidth / 2,
+        centerY - defaultHeight / 2,
+        centerX + defaultWidth / 2,
+        centerY + defaultHeight / 2
+      ],
+      vertical: false,
+      font_size: 20,
+      lines: ['']
+    };
+
+    workingBlocks.push(newBlock);
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+    hasUnsavedChanges = true;
+
+    // Auto-select the new box
+    selectedIndex = workingBlocks.length - 1;
+  }
+
+  async function revertToOriginal() {
+    if (!volumeData) return;
+
+    promptConfirmation('Revert all edits to original? This cannot be undone.', async () => {
+      try {
+        // Remove edited_pages field from database
+        await db.volumes_data.update(volumeUuid, {
+          edited_pages: undefined
+        });
+
+        // Reload the page to show original data
+        await loadVolumeData();
+
+        // Show success toast
+        showRevertSuccess = true;
+        setTimeout(() => {
+          showRevertSuccess = false;
+        }, 3000);
+      } catch (error) {
+        console.error('Failed to revert edits:', error);
+        saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
+        showSaveError = true;
+        setTimeout(() => {
+          showSaveError = false;
+        }, 5000);
+      }
+    });
+  }
+
+  async function exportMokuro() {
+    if (!volumeData) return;
+
+    try {
+      const metadata = await db.volumes.get(volumeUuid);
+      if (!metadata) return;
+
+      const currentPages = getCurrentPages(volumeData);
+
+      const mokuroData = {
+        version: metadata.mokuro_version,
+        title: metadata.series_title,
+        title_uuid: metadata.series_uuid,
+        volume: metadata.volume_title,
+        volume_uuid: metadata.volume_uuid,
+        pages: currentPages,
+        chars: currentPages.reduce(
+          (total, page) =>
+            total +
+            page.blocks.reduce((pageTotal, block) => pageTotal + block.lines.join('').length, 0),
+          0
+        )
+      };
+
+      const blob = new Blob([JSON.stringify(mokuroData, null, 2)], {
+        type: 'application/json'
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${metadata.volume_title}_edited.mokuro`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Failed to export .mokuro file:', error);
+    }
+  }
 </script>
 
 <svelte:head>
-	<title>Edit Page {pageIndex + 1}</title>
+  <title>Edit Page {pageIndex + 1}</title>
 </svelte:head>
 
 {#if isLoading}
-	<div class="flex items-center justify-center w-screen h-screen">
-		<Spinner size="12" />
-	</div>
+  <div class="flex h-screen w-screen items-center justify-center">
+    <Spinner size="12" />
+  </div>
 {:else if volumeData && pageData}
-	<EditToolbar
-		{pageIndex}
-		{totalPages}
-		{hasUnsavedChanges}
-		hasEdits={volumeHasEdits}
-		bind:zoomMode
-		onPrev={() => navigatePage(pageIndex - 1)}
-		onNext={() => navigatePage(pageIndex + 1)}
-		onSave={saveEdits}
-		onExport={exportMokuro}
-		onExit={exitToReader}
-		onRevert={revertToOriginal}
-		onAddBox={addTextbox}
-		onZoomChange={(mode) => (zoomMode = mode)}
-	/>
-
-	<EditCanvas
-		{pageData}
-		{pageImage}
-		{zoomMode}
-		bind:workingBlocks
-		bind:selectedIndex
-		{updateBlock}
-		{deleteBlock}
-		{cloneBlock}
-	/>
-
-	<Modal bind:open={showUnsavedWarning} size="xs" autoclose={false}>
-		<div class="text-center">
-			<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
-				You have unsaved changes. Save before leaving?
-			</h3>
-			<div class="flex justify-center gap-4">
-				<Button color="green" onclick={saveAndNavigate}>Save & Continue</Button>
-				<Button color="red" onclick={discardAndNavigate}>Discard</Button>
-				<Button color="alternative" onclick={cancelNavigation}>Cancel</Button>
-			</div>
-		</div>
-	</Modal>
-
-	<!-- Success Toast -->
-	{#if isMounted && showSaveSuccess}
-		<Toast
-			color="green"
-			position="top-right"
-			class="fixed top-20 right-4 z-50"
-		>
-			{#snippet icon()}
-				<CheckCircleSolid class="w-5 h-5" />
-			{/snippet}
-			Edits saved successfully
-		</Toast>
-	{/if}
-
-	<!-- Error Toast -->
-	{#if isMounted && showSaveError}
-		<Toast
-			color="red"
-			position="top-right"
-			class="fixed top-20 right-4 z-50"
-		>
-			{#snippet icon()}
-				<CloseCircleSolid class="w-5 h-5" />
-			{/snippet}
-			Failed to save: {saveErrorMessage}
-		</Toast>
-	{/if}
-
-	<!-- Revert Success Toast -->
-	{#if isMounted && showRevertSuccess}
-		<Toast
-			color="green"
-			position="top-right"
-			class="fixed top-20 right-4 z-50"
-		>
-			{#snippet icon()}
-				<CheckCircleSolid class="w-5 h-5" />
-			{/snippet}
-			Reverted to original
-		</Toast>
-	{/if}
+  <EditToolbar
+    {pageIndex}
+    {totalPages}
+    {hasUnsavedChanges}
+    hasEdits={volumeHasEdits}
+    bind:zoomMode
+    onPrev={() => navigatePage(pageIndex - 1)}
+    onNext={() => navigatePage(pageIndex + 1)}
+    onSave={saveEdits}
+    onExport={exportMokuro}
+    onExit={exitToReader}
+    onRevert={revertToOriginal}
+    onAddBox={addTextbox}
+    onZoomChange={(mode) => (zoomMode = mode)}
+  />
+
+  <EditCanvas
+    {pageData}
+    {pageImage}
+    {zoomMode}
+    bind:workingBlocks
+    bind:selectedIndex
+    {updateBlock}
+    {deleteBlock}
+    {cloneBlock}
+  />
+
+  <Modal bind:open={showUnsavedWarning} size="xs" autoclose={false}>
+    <div class="text-center">
+      <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+        You have unsaved changes. Save before leaving?
+      </h3>
+      <div class="flex justify-center gap-4">
+        <Button color="green" onclick={saveAndNavigate}>Save & Continue</Button>
+        <Button color="red" onclick={discardAndNavigate}>Discard</Button>
+        <Button color="alternative" onclick={cancelNavigation}>Cancel</Button>
+      </div>
+    </div>
+  </Modal>
+
+  <!-- Success Toast -->
+  {#if isMounted && showSaveSuccess}
+    <Toast color="green" position="top-right" class="fixed top-20 right-4 z-50">
+      {#snippet icon()}
+        <CheckCircleSolid class="h-5 w-5" />
+      {/snippet}
+      Edits saved successfully
+    </Toast>
+  {/if}
+
+  <!-- Error Toast -->
+  {#if isMounted && showSaveError}
+    <Toast color="red" position="top-right" class="fixed top-20 right-4 z-50">
+      {#snippet icon()}
+        <CloseCircleSolid class="h-5 w-5" />
+      {/snippet}
+      Failed to save: {saveErrorMessage}
+    </Toast>
+  {/if}
+
+  <!-- Revert Success Toast -->
+  {#if isMounted && showRevertSuccess}
+    <Toast color="green" position="top-right" class="fixed top-20 right-4 z-50">
+      {#snippet icon()}
+        <CheckCircleSolid class="h-5 w-5" />
+      {/snippet}
+      Reverted to original
+    </Toast>
+  {/if}
 {:else}
-	<div class="flex items-center justify-center w-screen h-screen">
-		<p class="text-xl">Failed to load page data</p>
-	</div>
+  <div class="flex h-screen w-screen items-center justify-center">
+    <p class="text-xl">Failed to load page data</p>
+  </div>
 {/if}

From 362aa0273b6fc85dca7dab69a3e7f57bb7ecdf5c Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Mon, 24 Nov 2025 20:52:13 -0700
Subject: [PATCH 10/10] fix: Replace structuredClone with JSON parse/stringify
 for ESLint compatibility

---
 src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
index 9feb33c1..aa61792c 100644
--- a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -65,7 +65,7 @@
         volumeData = data;
         // Initialize working blocks with current page's blocks (edited or original)
         const currentPages = getCurrentPages(data);
-        workingBlocks = structuredClone(currentPages[pageIndex]?.blocks || []);
+        workingBlocks = JSON.parse(JSON.stringify(currentPages[pageIndex]?.blocks || []));
       }
     } catch (error) {
       console.error('Failed to load volume data:', error);
@@ -88,7 +88,7 @@
   }
 
   function cloneBlock(index: number): number {
-    const clonedBlock = structuredClone(workingBlocks[index]);
+    const clonedBlock = JSON.parse(JSON.stringify(workingBlocks[index]));
     // Offset the cloned box slightly
     const offset = 20;
     clonedBlock.box = [