feat(web): show ocr text boxes in panoramas

chore(mise): add monorepo configuration with multiple config roots

e2e/src/web/specs/search/search-gallery.ui-spec.ts

@@ -0,0 +1,116 @@
+import { faker } from '@faker-js/faker';
+import { expect, test } from '@playwright/test';
+import {
+  Changes,
+  createDefaultTimelineConfig,
+  generateTimelineData,
+  TimelineAssetConfig,
+  TimelineData,
+} from 'src/generators/timeline';
+import { setupBaseMockApiRoutes } from 'src/mock-network/base-network';
+import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/mock-network/timeline-network';
+import { assetViewerUtils } from 'src/web/specs/timeline/utils';
+
+const buildSearchUrl = (assetId: string) => {
+  const searchQuery = encodeURIComponent(JSON.stringify({ originalFileName: 'test' }));
+  return `/search/photos/${assetId}?query=${searchQuery}`;
+};
+
+test.describe.configure({ mode: 'parallel' });
+test.describe('search gallery-viewer', () => {
+  let adminUserId: string;
+  let timelineRestData: TimelineData;
+  const assets: TimelineAssetConfig[] = [];
+  const testContext = new TimelineTestContext();
+  const changes: Changes = {
+    albumAdditions: [],
+    assetDeletions: [],
+    assetArchivals: [],
+    assetFavorites: [],
+  };
+
+  test.beforeAll(async () => {
+    adminUserId = faker.string.uuid();
+    testContext.adminId = adminUserId;
+    timelineRestData = generateTimelineData({ ...createDefaultTimelineConfig(), ownerId: adminUserId });
+    for (const timeBucket of timelineRestData.buckets.values()) {
+      assets.push(...timeBucket);
+    }
+  });
+
+  test.beforeEach(async ({ context }) => {
+    await setupBaseMockApiRoutes(context, adminUserId);
+    await setupTimelineMockApiRoutes(context, timelineRestData, changes, testContext);
+
+    await context.route('**/api/search/metadata', async (route, request) => {
+      if (request.method() === 'POST') {
+        const searchAssets = assets.slice(0, 5).filter((asset) => !changes.assetDeletions.includes(asset.id));
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          json: {
+            albums: { total: 0, count: 0, items: [], facets: [] },
+            assets: {
+              total: searchAssets.length,
+              count: searchAssets.length,
+              items: searchAssets,
+              facets: [],
+              nextPage: null,
+            },
+          },
+        });
+      }
+      await route.fallback();
+    });
+  });
+
+  test.afterEach(() => {
+    testContext.slowBucket = false;
+    changes.albumAdditions = [];
+    changes.assetDeletions = [];
+    changes.assetArchivals = [];
+    changes.assetFavorites = [];
+  });
+
+  test.describe('/search/photos/:id', () => {
+    test('Deleting a photo advances to the next photo', async ({ page }) => {
+      const asset = assets[0];
+      await page.goto(buildSearchUrl(asset.id));
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[1]);
+    });
+
+    test('Deleting two photos in a row advances to the next photo each time', async ({ page }) => {
+      const asset = assets[0];
+      await page.goto(buildSearchUrl(asset.id));
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[1]);
+      await page.getByLabel('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[2]);
+    });
+
+    test('Navigating backward then deleting advances to the next photo', async ({ page }) => {
+      const asset = assets[1];
+      await page.goto(buildSearchUrl(asset.id));
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('View previous asset').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[0]);
+      await page.getByLabel('View next asset').click();
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[2]);
+    });
+
+    test('Deleting the last photo advances to the previous photo', async ({ page }) => {
+      const lastAsset = assets[4];
+      await page.goto(buildSearchUrl(lastAsset.id));
+      await assetViewerUtils.waitForViewerLoad(page, lastAsset);
+      await expect(page.getByLabel('View next asset')).toHaveCount(0);
+      await page.getByLabel('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[3]);
+      await expect(page.getByLabel('View previous asset')).toBeVisible();
+    });
+  });
+});

misc/release/pump-version.sh

@@ -75,7 +75,7 @@ if [ "$CURRENT_SERVER" != "$NEXT_SERVER" ]; then
   pnpm --prefix server run build
   ( cd ./open-api && bash ./bin/generate-open-api.sh )
 
-  uvx --from=toml-cli toml set --toml-path=machine-learning/pyproject.toml project.version "$NEXT_SERVER"
+  uv version --directory machine-learning "$NEXT_SERVER"
 
   ./misc/release/archive-version.js "$NEXT_SERVER"
 fi

mise.toml

@@ -1,5 +1,18 @@
 experimental_monorepo_root = true
 
+[monorepo]
+config_roots = [
+  "plugins",
+  "server",
+  "cli",
+  "deployment",
+  "mobile",
+  "e2e",
+  "web",
+  "docs",
+  ".github",
+]
+
 [tools]
 node = "24.13.0"
 flutter = "3.35.7"

mobile/ios/Runner.xcodeproj/project.pbxproj

@@ -741,7 +741,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/RunnerProfile.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				CUSTOM_GROUP_ID = group.app.immich.share;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
@@ -885,7 +885,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				CUSTOM_GROUP_ID = group.app.immich.share;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
@@ -915,7 +915,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				CUSTOM_GROUP_ID = group.app.immich.share;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
@@ -949,7 +949,7 @@
 				CODE_SIGN_ENTITLEMENTS = WidgetExtension/WidgetExtension.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu17;
@@ -992,7 +992,7 @@
 				CODE_SIGN_ENTITLEMENTS = WidgetExtension/WidgetExtension.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu17;
@@ -1032,7 +1032,7 @@
 				CODE_SIGN_ENTITLEMENTS = WidgetExtension/WidgetExtension.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu17;
@@ -1071,7 +1071,7 @@
 				CODE_SIGN_ENTITLEMENTS = ShareExtension/ShareExtension.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				CUSTOM_GROUP_ID = group.app.immich.share;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
@@ -1115,7 +1115,7 @@
 				CODE_SIGN_ENTITLEMENTS = ShareExtension/ShareExtension.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				CUSTOM_GROUP_ID = group.app.immich.share;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
@@ -1156,7 +1156,7 @@
 				CODE_SIGN_ENTITLEMENTS = ShareExtension/ShareExtension.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 233;
+				CURRENT_PROJECT_VERSION = 240;
 				CUSTOM_GROUP_ID = group.app.immich.share;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;

mobile/ios/Runner/Info.plist

@@ -107,7 +107,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>233</string>
+	<string>240</string>
 	<key>FLTEnableImpeller</key>
 	<true/>
 	<key>ITSAppUsesNonExemptEncryption</key>

mobile/ios/fastlane/README.md

@@ -39,6 +39,14 @@ iOS Release to TestFlight
 
 iOS Manual Release
 
+### ios gha_build_only
+
+```sh
+[bundle exec] fastlane ios gha_build_only
+```
+
+iOS Build Only (no TestFlight upload)
+
 ----
 
 This README.md is auto-generated and will be re-generated every time [_fastlane_](https://fastlane.tools) is run.

mobile/lib/presentation/pages/dev/ui_showcase.page.dart

@@ -91,18 +91,6 @@ class ImmichUIShowcasePage extends StatelessWidget {
                   children: [ImmichTextInput(label: "Title", hintText: "Enter a title")],
                 ),
               ),
-              const _ComponentTitle("HtmlText"),
-              ImmichHtmlText(
-                'This is an <b>example</b> of <test-link>HTML text</test-link> with <b>bold</b> and <link>links</link>.',
-                linkHandlers: {
-                  'link': () {
-                    context.showSnackBar(const SnackBar(content: Text('Link tapped!')));
-                  },
-                  'test-link': () {
-                    context.showSnackBar(const SnackBar(content: Text('Test-link tapped!')));
-                  },
-                },
-              ),
             ],
           ),
         ),

mobile/packages/ui/.gitignore

@@ -1,12 +0,0 @@
-# Build artifacts
-build/
-
-# Platform-specific files are not needed as this is a Flutter UI package
-android/
-ios/
-
-# Test cache and generated files
-.dart_tool/
-.packages
-.flutter-plugins
-.flutter-plugins-dependencies

mobile/packages/ui/lib/immich_ui.dart

@@ -1,6 +1,5 @@
 export 'src/components/close_button.dart';
 export 'src/components/form.dart';
-export 'src/components/html_text.dart';
 export 'src/components/icon_button.dart';
 export 'src/components/password_input.dart';
 export 'src/components/text_button.dart';

mobile/packages/ui/lib/src/components/html_text.dart

@@ -1,189 +0,0 @@
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-import 'package:html/dom.dart' as dom;
-import 'package:html/parser.dart' as html_parser;
-
-enum _HtmlTagType {
-  bold,
-  link,
-  unsupported,
-}
-
-class _HtmlTag {
-  final _HtmlTagType type;
-  final String tagName;
-
-  const _HtmlTag._({required this.type, required this.tagName});
-
-  static const unsupported = _HtmlTag._(type: _HtmlTagType.unsupported, tagName: 'unsupported');
-
-  static _HtmlTag? fromString(dom.Node node) {
-    final tagName = (node is dom.Element) ? node.localName : null;
-    if (tagName == null) {
-      return null;
-    }
-
-    final tag = tagName.toLowerCase();
-    return switch (tag) {
-      'b' || 'strong' => _HtmlTag._(type: _HtmlTagType.bold, tagName: tag),
-      // Convert <a> back to 'link' for handler lookup
-      'a' => const _HtmlTag._(type: _HtmlTagType.link, tagName: 'link'),
-      _ when tag.endsWith('-link') => _HtmlTag._(type: _HtmlTagType.link, tagName: tag),
-      _ => _HtmlTag.unsupported,
-    };
-  }
-}
-
-/// A widget that renders text with optional HTML-style formatting.
-///
-/// Supports the following tags:
-/// - `<b>` or `<strong>` for bold text
-/// - `<link>` or any tag ending with `-link` for tappable links
-///
-/// Example:
-/// ```dart
-/// ImmichHtmlText(
-///   'Refer to <link>docs</link> and <other-link>other</other-link>',
-///   linkHandlers: {
-///     'link': () => launchUrl(docsUrl),
-///     'other-link': () => launchUrl(otherUrl),
-///   },
-/// )
-/// ```
-class ImmichHtmlText extends StatefulWidget {
-  final String text;
-  final TextStyle? style;
-  final TextAlign? textAlign;
-  final TextOverflow? overflow;
-  final int? maxLines;
-  final bool? softWrap;
-  final Map<String, VoidCallback>? linkHandlers;
-  final TextStyle? linkStyle;
-
-  const ImmichHtmlText(
-    this.text, {
-    super.key,
-    this.style,
-    this.textAlign,
-    this.overflow,
-    this.maxLines,
-    this.softWrap,
-    this.linkHandlers,
-    this.linkStyle,
-  });
-
-  @override
-  State<ImmichHtmlText> createState() => _ImmichHtmlTextState();
-}
-
-class _ImmichHtmlTextState extends State<ImmichHtmlText> {
-  final _recognizers = <GestureRecognizer>[];
-  dom.DocumentFragment _document = dom.DocumentFragment();
-
-  @override
-  void initState() {
-    super.initState();
-    _document = html_parser.parseFragment(_preprocessHtml(widget.text));
-  }
-
-  @override
-  void didUpdateWidget(covariant ImmichHtmlText oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.text != widget.text) {
-      _document = html_parser.parseFragment(_preprocessHtml(widget.text));
-    }
-  }
-
-  /// `<link>` tags are preprocessed to `<a>` tags because `<link>` is a
-  /// void element in HTML5 and cannot have children. The linkHandlers still use
-  /// 'link' as the key.
-  String _preprocessHtml(String html) {
-    return html
-        .replaceAllMapped(
-          RegExp(r'<(link)>(.*?)</\1>', caseSensitive: false),
-          (match) => '<a>${match.group(2)}</a>',
-        )
-        .replaceAllMapped(
-          RegExp(r'<(link)\s*/>', caseSensitive: false),
-          (match) => '<a></a>',
-        );
-  }
-
-  @override
-  void dispose() {
-    _disposeRecognizers();
-    super.dispose();
-  }
-
-  void _disposeRecognizers() {
-    for (final recognizer in _recognizers) {
-      recognizer.dispose();
-    }
-    _recognizers.clear();
-  }
-
-  List<InlineSpan> _buildSpans() {
-    _disposeRecognizers();
-
-    return _document.nodes.expand((node) => _buildNode(node, null, null)).toList();
-  }
-
-  Iterable<InlineSpan> _buildNode(
-    dom.Node node,
-    TextStyle? style,
-    _HtmlTag? parentTag,
-  ) sync* {
-    if (node is dom.Text) {
-      if (node.text.isEmpty) {
-        return;
-      }
-
-      GestureRecognizer? recognizer;
-      if (parentTag?.type == _HtmlTagType.link) {
-        final handler = widget.linkHandlers?[parentTag?.tagName];
-        if (handler != null) {
-          recognizer = TapGestureRecognizer()..onTap = handler;
-          _recognizers.add(recognizer);
-        }
-      }
-
-      yield TextSpan(text: node.text, style: style, recognizer: recognizer);
-    } else if (node is dom.Element) {
-      final htmlTag = _HtmlTag.fromString(node);
-      final tagStyle = _styleForTag(htmlTag);
-      final mergedStyle = style?.merge(tagStyle) ?? tagStyle;
-      final newParentTag = htmlTag?.type == _HtmlTagType.link ? htmlTag : parentTag;
-
-      for (final child in node.nodes) {
-        yield* _buildNode(child, mergedStyle, newParentTag);
-      }
-    }
-  }
-
-  TextStyle? _styleForTag(_HtmlTag? tag) {
-    if (tag == null) {
-      return null;
-    }
-
-    return switch (tag.type) {
-      _HtmlTagType.bold => const TextStyle(fontWeight: FontWeight.bold),
-      _HtmlTagType.link => widget.linkStyle ??
-          TextStyle(
-            color: Theme.of(context).colorScheme.primary,
-            decoration: TextDecoration.underline,
-          ),
-      _HtmlTagType.unsupported => null,
-    };
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Text.rich(
-      TextSpan(style: widget.style, children: _buildSpans()),
-      textAlign: widget.textAlign,
-      overflow: widget.overflow,
-      maxLines: widget.maxLines,
-      softWrap: widget.softWrap,
-    );
-  }
-}

mobile/packages/ui/pubspec.lock

@@ -1,22 +1,6 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
-  async:
-    dependency: transitive
-    description:
-      name: async
-      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.13.0"
-  boolean_selector:
-    dependency: transitive
-    description:
-      name: boolean_selector
-      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.1.2"
   characters:
     dependency: transitive
     description:
@@ -25,14 +9,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
-  clock:
-    dependency: transitive
-    description:
-      name: clock
-      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.1.2"
   collection:
     dependency: transitive
     description:
@@ -41,72 +17,11 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.19.1"
-  csslib:
-    dependency: transitive
-    description:
-      name: csslib
-      sha256: "09bad715f418841f976c77db72d5398dc1253c21fb9c0c7f0b0b985860b2d58e"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.2"
-  fake_async:
-    dependency: transitive
-    description:
-      name: fake_async
-      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.3.3"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
-  flutter_test:
-    dependency: "direct dev"
-    description: flutter
-    source: sdk
-    version: "0.0.0"
-  html:
-    dependency: "direct main"
-    description:
-      name: html
-      sha256: "6d1264f2dffa1b1101c25a91dff0dc2daee4c18e87cd8538729773c073dbf602"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.15.6"
-  leak_tracker:
-    dependency: transitive
-    description:
-      name: leak_tracker
-      sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
-      url: "https://pub.dev"
-    source: hosted
-    version: "11.0.2"
-  leak_tracker_flutter_testing:
-    dependency: transitive
-    description:
-      name: leak_tracker_flutter_testing
-      sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.0.10"
-  leak_tracker_testing:
-    dependency: transitive
-    description:
-      name: leak_tracker_testing
-      sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.0.2"
-  matcher:
-    dependency: transitive
-    description:
-      name: matcher
-      sha256: dc58c723c3c24bf8d3e2d3ad3f2f9d7bd9cf43ec6feaa64181775e60190153f2
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.12.17"
   material_color_utilities:
     dependency: transitive
     description:
@@ -119,71 +34,15 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
+      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
       url: "https://pub.dev"
     source: hosted
-    version: "1.16.0"
-  path:
-    dependency: transitive
-    description:
-      name: path
-      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.9.1"
+    version: "1.17.0"
   sky_engine:
     dependency: transitive
     description: flutter
     source: sdk
     version: "0.0.0"
-  source_span:
-    dependency: transitive
-    description:
-      name: source_span
-      sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.10.1"
-  stack_trace:
-    dependency: transitive
-    description:
-      name: stack_trace
-      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.12.1"
-  stream_channel:
-    dependency: transitive
-    description:
-      name: stream_channel
-      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.1.4"
-  string_scanner:
-    dependency: transitive
-    description:
-      name: string_scanner
-      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.4.1"
-  term_glyph:
-    dependency: transitive
-    description:
-      name: term_glyph
-      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.2.2"
-  test_api:
-    dependency: transitive
-    description:
-      name: test_api
-      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.7.6"
   vector_math:
     dependency: transitive
     description:
@@ -192,14 +51,5 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.2.0"
-  vm_service:
-    dependency: transitive
-    description:
-      name: vm_service
-      sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60"
-      url: "https://pub.dev"
-    source: hosted
-    version: "15.0.2"
 sdks:
   dart: ">=3.8.0-0 <4.0.0"
-  flutter: ">=3.18.0-18.0.pre.54"

mobile/packages/ui/pubspec.yaml

@@ -7,11 +7,6 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  html: ^0.15.6
-
-dev_dependencies:
-  flutter_test:
-    sdk: flutter
 
 flutter:
   uses-material-design: true

mobile/packages/ui/test/html_test.dart

@@ -1,266 +0,0 @@
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:immich_ui/src/components/html_text.dart';
-
-import 'test_utils.dart';
-
-/// Text.rich creates a nested structure: root -> wrapper -> actual children
-List<InlineSpan> _getContentSpans(WidgetTester tester) {
-  final richText = tester.widget<RichText>(find.byType(RichText));
-  final root = richText.text as TextSpan;
-
-  if (root.children?.isNotEmpty ?? false) {
-    final wrapper = root.children!.first;
-    if (wrapper is TextSpan && wrapper.children != null) {
-      return wrapper.children!;
-    }
-  }
-  return [];
-}
-
-TextSpan _findSpan(List<InlineSpan> spans, String text) {
-  return spans.firstWhere(
-    (span) => span is TextSpan && span.text == text,
-    orElse: () => throw StateError('No span found with text: "$text"'),
-  ) as TextSpan;
-}
-
-String _concatenateText(List<InlineSpan> spans) {
-  return spans.whereType<TextSpan>().map((s) => s.text ?? '').join();
-}
-
-void _triggerTap(TextSpan span) {
-  final recognizer = span.recognizer;
-  if (recognizer is TapGestureRecognizer) {
-    recognizer.onTap?.call();
-  }
-}
-
-void main() {
-  group('ImmichHtmlText', () {
-    testWidgets('renders plain text without HTML tags', (tester) async {
-      await tester.pumpTestWidget(
-        const ImmichHtmlText('This is plain text'),
-      );
-
-      expect(find.text('This is plain text'), findsOneWidget);
-    });
-
-    testWidgets('handles mixed content with bold and links', (tester) async {
-      await tester.pumpTestWidget(
-        ImmichHtmlText(
-          'This is an <b>example</b> of <b><link>HTML text</link></b> with <b>bold</b>.',
-          linkHandlers: {'link': () {}},
-        ),
-      );
-
-      final spans = _getContentSpans(tester);
-
-      final exampleSpan = _findSpan(spans, 'example');
-      expect(exampleSpan.style?.fontWeight, FontWeight.bold);
-
-      final boldSpan = _findSpan(spans, 'bold');
-      expect(boldSpan.style?.fontWeight, FontWeight.bold);
-
-      final linkSpan = _findSpan(spans, 'HTML text');
-      expect(linkSpan.style?.decoration, TextDecoration.underline);
-      expect(linkSpan.style?.fontWeight, FontWeight.bold);
-      expect(linkSpan.recognizer, isA<TapGestureRecognizer>());
-
-      expect(_concatenateText(spans), 'This is an example of HTML text with bold.');
-    });
-
-    testWidgets('applies text style properties', (tester) async {
-      await tester.pumpTestWidget(
-        const ImmichHtmlText(
-          'Test text',
-          style: TextStyle(
-            fontSize: 16,
-            color: Colors.purple,
-          ),
-          textAlign: TextAlign.center,
-          maxLines: 2,
-          overflow: TextOverflow.ellipsis,
-        ),
-      );
-
-      final text = tester.widget<Text>(find.byType(Text));
-      final richText = text.textSpan as TextSpan;
-
-      expect(richText.style?.fontSize, 16);
-      expect(richText.style?.color, Colors.purple);
-      expect(text.textAlign, TextAlign.center);
-      expect(text.maxLines, 2);
-      expect(text.overflow, TextOverflow.ellipsis);
-    });
-
-    testWidgets('handles text with special characters', (tester) async {
-      await tester.pumpTestWidget(
-        const ImmichHtmlText('Text with & < > " \' characters'),
-      );
-
-      expect(find.byType(RichText), findsOneWidget);
-
-      final spans = _getContentSpans(tester);
-      expect(_concatenateText(spans), 'Text with & < > " \' characters');
-    });
-
-    group('bold', () {
-      testWidgets('renders bold text with <b> tag', (tester) async {
-        await tester.pumpTestWidget(
-          const ImmichHtmlText('This is <b>bold</b> text'),
-        );
-
-        final spans = _getContentSpans(tester);
-        final boldSpan = _findSpan(spans, 'bold');
-
-        expect(boldSpan.style?.fontWeight, FontWeight.bold);
-        expect(_concatenateText(spans), 'This is bold text');
-      });
-
-      testWidgets('renders bold text with <strong> tag', (tester) async {
-        await tester.pumpTestWidget(
-          const ImmichHtmlText('This is <strong>strong</strong> text'),
-        );
-
-        final spans = _getContentSpans(tester);
-        final strongSpan = _findSpan(spans, 'strong');
-
-        expect(strongSpan.style?.fontWeight, FontWeight.bold);
-      });
-
-      testWidgets('handles nested bold tags', (tester) async {
-        await tester.pumpTestWidget(
-          const ImmichHtmlText('Text with <b>bold and <strong>nested</strong></b>'),
-        );
-
-        final spans = _getContentSpans(tester);
-
-        final nestedSpan = _findSpan(spans, 'nested');
-        expect(nestedSpan.style?.fontWeight, FontWeight.bold);
-
-        final boldSpan = _findSpan(spans, 'bold and ');
-        expect(boldSpan.style?.fontWeight, FontWeight.bold);
-
-        expect(_concatenateText(spans), 'Text with bold and nested');
-      });
-    });
-
-    group('link', () {
-      testWidgets('renders link text with <link> tag', (tester) async {
-        await tester.pumpTestWidget(
-          ImmichHtmlText(
-            'This is a <link>custom link</link> text',
-            linkHandlers: {'link': () {}},
-          ),
-        );
-
-        final spans = _getContentSpans(tester);
-        final linkSpan = _findSpan(spans, 'custom link');
-
-        expect(linkSpan.style?.decoration, TextDecoration.underline);
-        expect(linkSpan.recognizer, isA<TapGestureRecognizer>());
-      });
-
-      testWidgets('handles link tap with callback', (tester) async {
-        var linkTapped = false;
-
-        await tester.pumpTestWidget(
-          ImmichHtmlText(
-            'Tap <link>here</link>',
-            linkHandlers: {'link': () => linkTapped = true},
-          ),
-        );
-
-        final spans = _getContentSpans(tester);
-        final linkSpan = _findSpan(spans, 'here');
-        expect(linkSpan.recognizer, isA<TapGestureRecognizer>());
-
-        _triggerTap(linkSpan);
-        expect(linkTapped, isTrue);
-      });
-
-      testWidgets('handles custom prefixed link tags', (tester) async {
-        await tester.pumpTestWidget(
-          ImmichHtmlText(
-            'Refer to <docs-link>docs</docs-link> and <other-link>other</other-link>',
-            linkHandlers: {
-              'docs-link': () {},
-              'other-link': () {},
-            },
-          ),
-        );
-
-        final spans = _getContentSpans(tester);
-        final docsSpan = _findSpan(spans, 'docs');
-        final otherSpan = _findSpan(spans, 'other');
-
-        expect(docsSpan.style?.decoration, TextDecoration.underline);
-        expect(otherSpan.style?.decoration, TextDecoration.underline);
-      });
-
-      testWidgets('applies custom link style', (tester) async {
-        const customLinkStyle = TextStyle(
-          color: Colors.red,
-          decoration: TextDecoration.overline,
-        );
-
-        await tester.pumpTestWidget(
-          ImmichHtmlText(
-            'Click <link>here</link>',
-            linkStyle: customLinkStyle,
-            linkHandlers: {'link': () {}},
-          ),
-        );
-
-        final spans = _getContentSpans(tester);
-        final linkSpan = _findSpan(spans, 'here');
-
-        expect(linkSpan.style?.color, Colors.red);
-        expect(linkSpan.style?.decoration, TextDecoration.overline);
-      });
-
-      testWidgets('link without handler renders but is not tappable', (tester) async {
-        await tester.pumpTestWidget(
-          ImmichHtmlText(
-            'Link without handler: <link>click me</link>',
-            linkHandlers: {'other-link': () {}},
-          ),
-        );
-
-        final spans = _getContentSpans(tester);
-        final linkSpan = _findSpan(spans, 'click me');
-
-        expect(linkSpan.style?.decoration, TextDecoration.underline);
-        expect(linkSpan.recognizer, isNull);
-      });
-
-      testWidgets('handles multiple links with different handlers', (tester) async {
-        var firstLinkTapped = false;
-        var secondLinkTapped = false;
-
-        await tester.pumpTestWidget(
-          ImmichHtmlText(
-            'Go to <docs-link>docs</docs-link> or <help-link>help</help-link>',
-            linkHandlers: {
-              'docs-link': () => firstLinkTapped = true,
-              'help-link': () => secondLinkTapped = true,
-            },
-          ),
-        );
-
-        final spans = _getContentSpans(tester);
-        final docsSpan = _findSpan(spans, 'docs');
-        final helpSpan = _findSpan(spans, 'help');
-
-        _triggerTap(docsSpan);
-        expect(firstLinkTapped, isTrue);
-        expect(secondLinkTapped, isFalse);
-
-        _triggerTap(helpSpan);
-        expect(secondLinkTapped, isTrue);
-      });
-    });
-  });
-}

mobile/packages/ui/test/test_utils.dart

@@ -1,9 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-extension WidgetTesterExtension on WidgetTester {
-  /// Pumps a widget wrapped in MaterialApp and Scaffold for testing.
-  Future<void> pumpTestWidget(Widget widget) {
-    return pumpWidget(MaterialApp(home: Scaffold(body: widget)));
-  }
-}

server/src/maintenance/maintenance-worker.service.ts

@@ -79,7 +79,7 @@ export class MaintenanceWorkerService {
     this.#secret = state.secret;
     this.#status = {
       active: true,
-      action: state.action.action,
+      action: state.action?.action ?? MaintenanceAction.Start,
     };
 
     StorageCore.setMediaLocation(this.detectMediaLocation());
@@ -88,7 +88,10 @@ export class MaintenanceWorkerService {
     this.maintenanceWebsocketRepository.setStatusUpdateFn((status) => (this.#status = status));
 
     await this.logSecret();
-    void this.runAction(state.action);
+
+    if (state.action) {
+      void this.runAction(state.action);
+    }
   }
 
   /**

server/src/types.ts

@@ -490,7 +490,7 @@ export interface MemoryData {
 export type VersionCheckMetadata = { checkedAt: string; releaseVersion: string };
 export type SystemFlags = { mountChecks: Record<StorageFolder, boolean> };
 export type MaintenanceModeState =
-  | { isMaintenanceMode: true; secret: string; action: SetMaintenanceModeDto }
+  | { isMaintenanceMode: true; secret: string; action?: SetMaintenanceModeDto }
   | { isMaintenanceMode: false };
 export type MemoriesState = {
   /** memories have already been created through this date */

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -424,7 +424,6 @@
   const showOcrButton = $derived(
     $slideshowState === SlideshowState.None &&
       asset.type === AssetTypeEnum.Image &&
-      !(asset.exifInfo?.projectionType === 'EQUIRECTANGULAR') &&
       !assetViewerManager.isShowEditor &&
       ocrManager.hasOcrData,
   );

web/src/lib/components/asset-viewer/ocr-bounding-box.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { OcrBox } from '$lib/utils/ocr-utils';
-  import { calculateBoundingBoxDimensions } from '$lib/utils/ocr-utils';
+  import { calculateBoundingBoxMatrix } from '$lib/utils/ocr-utils';
 
   type Props = {
     ocrBox: OcrBox;
@@ -8,28 +8,19 @@
 
   let { ocrBox }: Props = $props();
 
-  const dimensions = $derived(calculateBoundingBoxDimensions(ocrBox.points));
+  const dimensions = $derived(calculateBoundingBoxMatrix(ocrBox.points));
 
-  const transform = $derived(
-    `translate(${dimensions.minX}px, ${dimensions.minY}px) rotate(${dimensions.rotation}deg) skew(${dimensions.skewX}deg, ${dimensions.skewY}deg)`,
-  );
-
-  const transformOrigin = $derived(
-    `${dimensions.centerX - dimensions.minX}px ${dimensions.centerY - dimensions.minY}px`,
+  const transform = $derived(`matrix3d(${dimensions.matrix.join(',')})`);
+  // Fits almost all strings within the box, depends on font family
+  const fontSize = $derived(
+    `max(var(--text-sm), min(var(--text-6xl), ${(1.4 * dimensions.width) / ocrBox.text.length}px))`,
   );
 </script>
 
-<div class="absolute group left-0 top-0 pointer-events-none">
-  <!-- Bounding box with CSS transforms -->
+<div class="absolute left-0 top-0">
   <div
-    class="absolute border-2 border-blue-500 bg-blue-500/10 cursor-pointer pointer-events-auto transition-all group-hover:bg-blue-500/30 group-hover:border-blue-600 group-hover:border-[3px]"
-    style="width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: {transformOrigin};"
-  ></div>
-
-  <!-- Text overlay - always rendered but invisible, allows text selection and copy -->
-  <div
-    class="absolute flex items-center justify-center text-transparent text-sm px-2 py-1 pointer-events-auto cursor-text whitespace-pre-wrap wrap-break-word select-text group-hover:text-white group-hover:bg-black/75 group-hover:z-10"
-    style="width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: {transformOrigin};"
+    class="absolute flex items-center justify-center text-transparent text-sm border-2 border-blue-500 bg-blue-500/10 px-2 py-1 pointer-events-auto cursor-text whitespace-pre-wrap wrap-break-word select-text transition-all hover:text-white hover:bg-black/60 hover:border-blue-600 hover:border-3"
+    style="font-size: {fontSize}; width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: 0 0;"
   >
     {ocrBox.text}
   </div>

web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte

@@ -2,8 +2,10 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { ocrManager, type OcrBoundingBox } from '$lib/stores/ocr.svelte';
   import { boundingBoxesArray, type Faces } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
+  import { calculateBoundingBoxMatrix, getOcrBoundingBoxesAtSize, type Point } from '$lib/utils/ocr-utils';
   import {
     EquirectangularAdapter,
     Viewer,
@@ -27,6 +29,17 @@
     strokeLinejoin: 'round',
   };
 
+  // Adapted as well as possible from classlist 'border-2 border-blue-500 bg-blue-500/10 hover:border-blue-600 hover:border-3'
+  const OCR_BOX_SVG_STYLE = {
+    fill: 'var(--color-blue-500)',
+    fillOpacity: '0.1',
+    stroke: 'var(--color-blue-500)',
+    strokeWidth: '2px',
+  };
+
+  const OCR_TOOLTIP_HTML_CLASS =
+    'flex items-center justify-center text-white bg-black/50 cursor-text pointer-events-auto whitespace-pre-wrap wrap-break-word select-text';
+
   type Props = {
     panorama: string | { source: string };
     originalPanorama?: string | { source: string };
@@ -96,6 +109,59 @@
     }
   });
 
+  $effect(() => {
+    updateOcrBoxes(ocrManager.showOverlay, ocrManager.data);
+  });
+
+  /** Use updateOnly=true on zoom, pan, or resize. */
+  const updateOcrBoxes = (showOverlay: boolean, ocrData: OcrBoundingBox[], updateOnly = false) => {
+    if (!viewer || !viewer.state.textureData || !viewer.getPlugin(MarkersPlugin)) {
+      return;
+    }
+    const markersPlugin = viewer.getPlugin<MarkersPlugin>(MarkersPlugin);
+    if (!showOverlay) {
+      markersPlugin.clearMarkers();
+      return;
+    }
+    if (!updateOnly) {
+      markersPlugin.clearMarkers();
+    }
+
+    const boxes = getOcrBoundingBoxesAtSize(ocrData, {
+      width: viewer.state.textureData.panoData.croppedWidth,
+      height: viewer.state.textureData.panoData.croppedHeight,
+    });
+
+    for (const [index, box] of boxes.entries()) {
+      const points = box.points.map((p) => texturePointToViewerPoint(viewer, p));
+      const { matrix, width, height } = calculateBoundingBoxMatrix(points);
+
+      const fontSize = (1.4 * width) / box.text.length; // fits almost all strings within the box, depends on font family
+      const transform = `matrix3d(${matrix.join(',')})`;
+      const content = `<div class="${OCR_TOOLTIP_HTML_CLASS}" style="font-size: ${fontSize}px; width: ${width}px; height: ${height}px; transform: ${transform}; transform-origin: 0 0;">${box.text}</div>`;
+
+      if (updateOnly) {
+        markersPlugin.updateMarker({
+          id: `box_${index}`,
+          polygonPixels: box.points.map((b) => [b.x, b.y]),
+          tooltip: { content },
+        });
+      } else {
+        markersPlugin.addMarker({
+          id: `box_${index}`,
+          polygonPixels: box.points.map((b) => [b.x, b.y]),
+          svgStyle: OCR_BOX_SVG_STYLE,
+          tooltip: { content, trigger: 'click' },
+        });
+      }
+    }
+  };
+
+  const texturePointToViewerPoint = (viewer: Viewer, point: Point) => {
+    const spherical = viewer.dataHelper.textureCoordsToSphericalCoords({ textureX: point.x, textureY: point.y });
+    return viewer.dataHelper.sphericalCoordsToViewerCoords(spherical);
+  };
+
   const onZoom = () => {
     viewer?.animate({ zoom: assetViewerManager.zoom > 1 ? 50 : 83.3, speed: 250 });
   };
@@ -160,7 +226,20 @@
       viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler, { passive: true });
     }
 
-    return () => viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
+    const onReadyHandler = () => updateOcrBoxes(ocrManager.showOverlay, ocrManager.data, false);
+    const updateHandler = () => updateOcrBoxes(ocrManager.showOverlay, ocrManager.data, true);
+    viewer.addEventListener(events.ReadyEvent.type, onReadyHandler);
+    viewer.addEventListener(events.PositionUpdatedEvent.type, updateHandler);
+    viewer.addEventListener(events.SizeUpdatedEvent.type, updateHandler);
+    viewer.addEventListener(events.ZoomUpdatedEvent.type, updateHandler, { passive: true });
+
+    return () => {
+      viewer.removeEventListener(events.ReadyEvent.type, onReadyHandler);
+      viewer.removeEventListener(events.PositionUpdatedEvent.type, updateHandler);
+      viewer.removeEventListener(events.SizeUpdatedEvent.type, updateHandler);
+      viewer.removeEventListener(events.ZoomUpdatedEvent.type, updateHandler);
+      viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
+    };
   });
 
   onDestroy(() => {
@@ -176,3 +255,25 @@
 
 <svelte:document use:shortcuts={[{ shortcut: { key: 'z' }, onShortcut: onZoom, preventDefault: true }]} />
 <div class="h-full w-full mb-0" bind:this={container}></div>
+
+<style>
+  /* Reset the default tooltip styling */
+  :global(.psv-tooltip) {
+    top: 0 !important;
+    left: 0 !important;
+    background: none;
+    box-shadow: none;
+    width: 0;
+    height: 0;
+  }
+
+  :global(.psv-tooltip-content) {
+    font: var(--font-normal);
+    padding: 0;
+    text-shadow: none;
+  }
+
+  :global(.psv-tooltip-arrow) {
+    display: none;
+  }
+</style>

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -302,6 +302,7 @@
       case AssetAction.ARCHIVE:
       case AssetAction.DELETE:
       case AssetAction.TRASH: {
+        const nextAsset = assetCursor.nextAsset ?? assetCursor.previousAsset;
         assets.splice(
           assets.findIndex((currentAsset) => currentAsset.id === action.asset.id),
           1,
@@ -309,10 +310,8 @@
         if (assets.length === 0) {
           return await goto(Route.photos());
         }
-        if (assetCursor.nextAsset) {
-          await navigateToAsset(assetCursor.nextAsset);
-        } else if (assetCursor.previousAsset) {
-          await navigateToAsset(assetCursor.previousAsset);
+        if (nextAsset) {
+          await navigateToAsset(nextAsset);
         }
         break;
       }

web/src/lib/modals/AlbumOptionsModal.svelte

@@ -9,7 +9,6 @@
     handleUpdateAlbum,
     handleUpdateUserAlbumRole,
   } from '$lib/services/album.service';
-  import { user } from '$lib/stores/user.store';
   import {
     AlbumUserRole,
     AssetOrder,
@@ -108,9 +107,9 @@
         <div class="ps-2">
           <div class="flex items-center gap-2 mb-2">
             <div>
-              <UserAvatar user={$user} size="md" />
+              <UserAvatar user={album.owner} size="md" />
             </div>
-            <Text class="w-full" size="small">{$user.name}</Text>
+            <Text class="w-full" size="small">{album.owner.name}</Text>
             <Field disabled class="w-32 shrink-0">
               <Select options={[{ label: $t('owner'), value: 'owner' }]} value="owner" />
             </Field>

web/src/lib/utils/ocr-utils.ts

@@ -12,70 +12,58 @@ const getContainedSize = (img: HTMLImageElement): { width: number; height: numbe
   return { width, height };
 };
 
+export type Point = {
+  x: number;
+  y: number;
+};
+
 export interface OcrBox {
   id: string;
-  points: { x: number; y: number }[];
+  points: Point[];
   text: string;
   confidence: number;
 }
 
-export interface BoundingBoxDimensions {
-  minX: number;
-  maxX: number;
-  minY: number;
-  maxY: number;
-  width: number;
-  height: number;
-  centerX: number;
-  centerY: number;
-  rotation: number;
-  skewX: number;
-  skewY: number;
-}
-
 /**
- * Calculate bounding box dimensions and properties from OCR points
+ * Calculate bounding box transform from OCR points. Result matrix can be used as input for css matrix3d.
  * @param points - Array of 4 corner points of the bounding box
- * @returns Dimensions, rotation, and skew values for the bounding box
+ * @returns 4x4 matrix to transform the div with text onto the polygon defined by the corner points, and size to set on the source div.
  */
-export const calculateBoundingBoxDimensions = (points: { x: number; y: number }[]): BoundingBoxDimensions => {
+export const calculateBoundingBoxMatrix = (points: Point[]): { matrix: number[]; width: number; height: number } => {
   const [topLeft, topRight, bottomRight, bottomLeft] = points;
-  const minX = Math.min(...points.map(({ x }) => x));
-  const maxX = Math.max(...points.map(({ x }) => x));
-  const minY = Math.min(...points.map(({ y }) => y));
-  const maxY = Math.max(...points.map(({ y }) => y));
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const centerX = (minX + maxX) / 2;
-  const centerY = (minY + maxY) / 2;
 
-  // Calculate rotation angle from the bottom edge (bottomLeft to bottomRight)
-  const rotation = Math.atan2(bottomRight.y - bottomLeft.y, bottomRight.x - bottomLeft.x) * (180 / Math.PI);
+  // Approximate width and height to prevent text distortion as much as possible
+  const distance = (p1: Point, p2: Point) => Math.hypot(p2.x - p1.x, p2.y - p1.y);
+  const width = Math.max(distance(topLeft, topRight), distance(bottomLeft, bottomRight));
+  const height = Math.max(distance(topLeft, bottomLeft), distance(topRight, bottomRight));
 
-  // Calculate skew angles to handle perspective distortion
-  // SkewX: compare left and right edges
-  const leftEdgeAngle = Math.atan2(bottomLeft.y - topLeft.y, bottomLeft.x - topLeft.x);
-  const rightEdgeAngle = Math.atan2(bottomRight.y - topRight.y, bottomRight.x - topRight.x);
-  const skewX = (rightEdgeAngle - leftEdgeAngle) * (180 / Math.PI);
+  const dx1 = topRight.x - bottomRight.x;
+  const dx2 = bottomLeft.x - bottomRight.x;
+  const dx3 = topLeft.x - topRight.x + bottomRight.x - bottomLeft.x;
 
-  // SkewY: compare top and bottom edges
-  const topEdgeAngle = Math.atan2(topRight.y - topLeft.y, topRight.x - topLeft.x);
-  const bottomEdgeAngle = Math.atan2(bottomRight.y - bottomLeft.y, bottomRight.x - bottomLeft.x);
-  const skewY = (bottomEdgeAngle - topEdgeAngle) * (180 / Math.PI);
+  const dy1 = topRight.y - bottomRight.y;
+  const dy2 = bottomLeft.y - bottomRight.y;
+  const dy3 = topLeft.y - topRight.y + bottomRight.y - bottomLeft.y;
 
-  return {
-    minX,
-    maxX,
-    minY,
-    maxY,
-    width,
-    height,
-    centerX,
-    centerY,
-    rotation,
-    skewX,
-    skewY,
-  };
+  const det = dx1 * dy2 - dx2 * dy1;
+  const a13 = (dx3 * dy2 - dx2 * dy3) / det;
+  const a23 = (dx1 * dy3 - dx3 * dy1) / det;
+
+  const a11 = (1 + a13) * topRight.x - topLeft.x;
+  const a21 = (1 + a23) * bottomLeft.x - topLeft.x;
+
+  const a12 = (1 + a13) * topRight.y - topLeft.y;
+  const a22 = (1 + a23) * bottomLeft.y - topLeft.y;
+
+  // prettier-ignore
+  const matrix = [
+    a11 / width, a12 / width, 0, a13 / width,
+    a21 / height, a22 / height, 0, a23 / height,
+    0, 0, 1, 0,
+    topLeft.x, topLeft.y, 0, 1,
+  ];
+
+  return { matrix, width, height };
 };
 
 /**
@@ -87,18 +75,32 @@ export const getOcrBoundingBoxes = (
   zoom: ZoomImageWheelState,
   photoViewer: HTMLImageElement | null,
 ): OcrBox[] => {
-  const boxes: OcrBox[] = [];
-
   if (photoViewer === null || !photoViewer.naturalWidth || !photoViewer.naturalHeight) {
-    return boxes;
+    return [];
   }
 
   const clientHeight = photoViewer.clientHeight;
   const clientWidth = photoViewer.clientWidth;
   const { width, height } = getContainedSize(photoViewer);
 
-  const imageWidth = photoViewer.naturalWidth;
-  const imageHeight = photoViewer.naturalHeight;
+  const offset = {
+    x: ((clientWidth - width) / 2) * zoom.currentZoom + zoom.currentPositionX,
+    y: ((clientHeight - height) / 2) * zoom.currentZoom + zoom.currentPositionY,
+  };
+
+  return getOcrBoundingBoxesAtSize(
+    ocrData,
+    { width: width * zoom.currentZoom, height: height * zoom.currentZoom },
+    offset,
+  );
+};
+
+export const getOcrBoundingBoxesAtSize = (
+  ocrData: OcrBoundingBox[],
+  targetSize: { width: number; height: number },
+  offset?: Point,
+) => {
+  const boxes: OcrBox[] = [];
 
   for (const ocr of ocrData) {
     // Convert normalized coordinates (0-1) to actual pixel positions
@@ -109,14 +111,8 @@ export const getOcrBoundingBoxes = (
       { x: ocr.x3, y: ocr.y3 },
       { x: ocr.x4, y: ocr.y4 },
     ].map((point) => ({
-      x:
-        (width / imageWidth) * zoom.currentZoom * point.x * imageWidth +
-        ((clientWidth - width) / 2) * zoom.currentZoom +
-        zoom.currentPositionX,
-      y:
-        (height / imageHeight) * zoom.currentZoom * point.y * imageHeight +
-        ((clientHeight - height) / 2) * zoom.currentZoom +
-        zoom.currentPositionY,
+      x: targetSize.width * point.x + (offset?.x ?? 0),
+      y: targetSize.height * point.y + (offset?.y ?? 0),
     }));
 
     boxes.push({

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { shortcut } from '$lib/actions/shortcut';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
@@ -24,7 +23,6 @@
   import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { Route } from '$lib/route';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { lang, locale } from '$lib/stores/preferences.store';
   import { preferences, user } from '$lib/stores/user.store';
   import { handlePromiseError } from '$lib/utils';
@@ -48,7 +46,6 @@
   import { tick, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  let { isViewing: showAssetViewer } = assetViewingStore;
   const viewport: Viewport = $state({ width: 0, height: 0 });
   let searchResultsElement: HTMLElement | undefined = $state();
 
@@ -82,18 +79,6 @@
     untrack(() => handlePromiseError(onSearchQueryUpdate()));
   });
 
-  const onEscape = () => {
-    if ($showAssetViewer) {
-      return;
-    }
-
-    if (assetInteraction.selectionActive) {
-      assetInteraction.selectedAssets = [];
-      return;
-    }
-    handlePromiseError(goto(previousRoute));
-  };
-
   $effect(() => {
     if (scrollY) {
       scrollYHistory = scrollY;
@@ -260,7 +245,6 @@
 </script>
 
 <svelte:window bind:scrollY />
-<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onEscape }} />
 
 {#if terms}
   <section