From cdb24b77758f0151da801c2011dff2620d91bdd5 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 21 Aug 2026 10:45:05 +0000
Subject: [PATCH 1/5] chore(deps): bump the minor-and-patch group across 1
 directory with 8 updates

Bumps the minor-and-patch group with 8 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@tanstack/cli](https://github.com/TanStack/cli/tree/HEAD/packages/cli) | `0.69.6` | `0.70.2` |
| [incur](https://github.com/wevm/incur) | `0.4.26` | `0.5.1` |
| [@electric-sql/pglite](https://github.com/electric-sql/pglite/tree/HEAD/packages/pglite) | `0.5.3` | `0.5.5` |
| [@electric-sql/pglite-pgvector](https://github.com/electric-sql/pglite/tree/HEAD/packages/pglite-pgvector) | `0.0.4` | `0.0.6` |
| [@tanstack/solid-query](https://github.com/TanStack/query/tree/HEAD/packages/solid-query) | `5.99.2` | `5.101.4` |
| [@tanstack/devtools-vite](https://github.com/TanStack/devtools/tree/HEAD/packages/devtools-vite) | `0.7.2` | `0.8.3` |
| [@tanstack/db](https://github.com/TanStack/db/tree/HEAD/packages/db) | `0.6.17` | `0.7.2` |
| [@types/chrome](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/chrome) | `0.1.43` | `0.2.6` |



Updates `@tanstack/cli` from 0.69.6 to 0.70.2
- [Release notes](https://github.com/TanStack/cli/releases)
- [Changelog](https://github.com/TanStack/cli/blob/main/packages/cli/CHANGELOG.md)
- [Commits](https://github.com/TanStack/cli/commits/@tanstack/cli@0.70.2/packages/cli)

Updates `incur` from 0.4.26 to 0.5.1
- [Release notes](https://github.com/wevm/incur/releases)
- [Changelog](https://github.com/wevm/incur/blob/main/CHANGELOG.md)
- [Commits](https://github.com/wevm/incur/compare/incur@0.4.26...incur@0.5.1)

Updates `@electric-sql/pglite` from 0.5.3 to 0.5.5
- [Release notes](https://github.com/electric-sql/pglite/releases)
- [Changelog](https://github.com/electric-sql/pglite/blob/main/packages/pglite/CHANGELOG.md)
- [Commits](https://github.com/electric-sql/pglite/commits/@electric-sql/pglite@0.5.5/packages/pglite)

Updates `@electric-sql/pglite-pgvector` from 0.0.4 to 0.0.6
- [Release notes](https://github.com/electric-sql/pglite/releases)
- [Changelog](https://github.com/electric-sql/pglite/blob/main/packages/pglite-pgvector/CHANGELOG.md)
- [Commits](https://github.com/electric-sql/pglite/commits/@electric-sql/pglite-pgvector@0.0.6/packages/pglite-pgvector)

Updates `@tanstack/solid-query` from 5.99.2 to 5.101.4
- [Release notes](https://github.com/TanStack/query/releases)
- [Changelog](https://github.com/TanStack/query/blob/main/packages/solid-query/CHANGELOG.md)
- [Commits](https://github.com/TanStack/query/commits/@tanstack/solid-query@5.101.4/packages/solid-query)

Updates `@tanstack/devtools-vite` from 0.7.2 to 0.8.3
- [Release notes](https://github.com/TanStack/devtools/releases)
- [Changelog](https://github.com/TanStack/devtools/blob/main/packages/devtools-vite/CHANGELOG.md)
- [Commits](https://github.com/TanStack/devtools/commits/@tanstack/devtools-vite@0.8.3/packages/devtools-vite)

Updates `@tanstack/db` from 0.6.17 to 0.7.2
- [Release notes](https://github.com/TanStack/db/releases)
- [Changelog](https://github.com/TanStack/db/blob/main/packages/db/CHANGELOG.md)
- [Commits](https://github.com/TanStack/db/commits/@tanstack/db@0.7.2/packages/db)

Updates `@types/chrome` from 0.1.43 to 0.2.6
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/chrome)

---
updated-dependencies:
- dependency-name: "@tanstack/cli"
  dependency-version: 0.70.2
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-and-patch
- dependency-name: incur
  dependency-version: 0.5.1
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-and-patch
- dependency-name: "@electric-sql/pglite"
  dependency-version: 0.5.5
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: minor-and-patch
- dependency-name: "@electric-sql/pglite-pgvector"
  dependency-version: 0.0.6
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: minor-and-patch
- dependency-name: "@tanstack/solid-query"
  dependency-version: 5.101.4
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-and-patch
- dependency-name: "@tanstack/devtools-vite"
  dependency-version: 0.8.3
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-and-patch
- dependency-name: "@tanstack/db"
  dependency-version: 0.7.2
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-and-patch
- dependency-name: "@types/chrome"
  dependency-version: 0.2.6
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-and-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 apps/cli/package.json      | 2 +-
 apps/server/package.json   | 8 ++++----
 apps/tauri/package.json    | 4 ++--
 apps/xtracter/package.json | 2 +-
 package.json               | 2 +-
 packages/ui/package.json   | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/cli/package.json b/apps/cli/package.json
index 31818015..1dd90deb 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -17,7 +17,7 @@
     "@orpc/client": "^1.14.4",
     "@solid-imager/client": "workspace:*",
     "@solid-imager/core": "workspace:*",
-    "incur": "^0.4.8",
+    "incur": "^0.5.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {
diff --git a/apps/server/package.json b/apps/server/package.json
index 396d9727..cec03a67 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -33,8 +33,8 @@
     "docs:generate": "typedoc"
   },
   "dependencies": {
-    "@electric-sql/pglite": "0.5.3",
-    "@electric-sql/pglite-pgvector": "0.0.4",
+    "@electric-sql/pglite": "0.5.5",
+    "@electric-sql/pglite-pgvector": "0.0.6",
     "@orpc/client": "^1.14.4",
     "@orpc/contract": "^1.14.4",
     "@orpc/experimental-pino": "^1.14.4",
@@ -49,7 +49,7 @@
     "@solid-imager/ui": "workspace:*",
     "@tanstack/router-plugin": "^1.168.14",
     "@tanstack/solid-form": "^1.33.0",
-    "@tanstack/solid-query": "5.99.2",
+    "@tanstack/solid-query": "5.101.4",
     "@tanstack/solid-router": "1.170.16",
     "@tanstack/solid-router-devtools": "^1.167.0",
     "@tanstack/solid-router-ssr-query": "^1.167.1",
@@ -77,7 +77,7 @@
     "@orpc/openapi": "^1.14.4",
     "@playwright/test": "^1.60.0",
     "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/devtools-vite": "^0.7.0",
+    "@tanstack/devtools-vite": "^0.8.3",
     "@types/archiver": "^8.0.0",
     "@types/ffmpeg-static": "^5.1.0",
     "@types/fluent-ffmpeg": "^2.1.28",
diff --git a/apps/tauri/package.json b/apps/tauri/package.json
index de41cf7e..f55a20d5 100644
--- a/apps/tauri/package.json
+++ b/apps/tauri/package.json
@@ -22,10 +22,10 @@
     "@solid-imager/client": "workspace:*",
     "@solid-imager/core": "workspace:*",
     "@solid-imager/ui": "workspace:*",
-    "@tanstack/db": "^0.6.8",
+    "@tanstack/db": "^0.7.2",
     "@tanstack/query-db-collection": "^1.0.40",
     "@tanstack/solid-db": "^0.2.22",
-    "@tanstack/solid-query": "5.99.2",
+    "@tanstack/solid-query": "5.101.4",
     "@tanstack/solid-router": "latest",
     "@tanstack/tauri-db-sqlite-persistence": "^0.2.0",
     "@tauri-apps/api": "^2.11.0",
diff --git a/apps/xtracter/package.json b/apps/xtracter/package.json
index 54961593..72614d89 100644
--- a/apps/xtracter/package.json
+++ b/apps/xtracter/package.json
@@ -19,7 +19,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@types/chrome": "^0.1.43",
+    "@types/chrome": "^0.2.6",
     "@types/node": "^26.0.0",
     "solid-js": "^1.9.13",
     "typescript": "rc",
diff --git a/package.json b/package.json
index dad5a065..de745bd3 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@biomejs/biome": "^2.5.0",
     "@google/design.md": "^0.4.0",
-    "@tanstack/cli": "^0.69.4",
+    "@tanstack/cli": "^0.70.2",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "nitro": "npm:nitro-nightly@3.0.1-20260601-173724-a2597363",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 29672cd2..aa45615f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,7 +18,7 @@
     "@solid-imager/core": "workspace:*",
     "@solidjs/router": "^0.16.1",
     "@tanstack/solid-form": "^1.33.0",
-    "@tanstack/solid-query": "5.99.2",
+    "@tanstack/solid-query": "5.101.4",
     "@tanstack/solid-router": "1.170.16",
     "@tanstack/solid-virtual": "^3.13.26",
     "class-variance-authority": "^0.7.1",

From 4bb23aa0025df7413cae4d38aa8040a1772de5ba Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 24 Aug 2026 22:35:55 +0900
Subject: [PATCH 2/5] feat(v2): improve Eagle-style collection interactions

---
 .../media/legacy-media-grid-item.tsx          |   2 +
 .../src/components/media/v2-media-actions.tsx |  95 ++-
 .../components/media/v2-media-grid-item.tsx   |  70 +-
 .../server/src/components/v2/v2-app-shell.tsx |  83 ++-
 .../src/components/v2/v2-command-center.tsx   | 302 +++++++++
 .../src/components/v2/v2-mobile-header.tsx    |  18 +-
 .../src/components/v2/v2-navigation.tsx       |  23 +-
 apps/server/src/components/v2/v2-sidebar.tsx  |  44 +-
 apps/server/src/routes/__root.tsx             |  35 +-
 .../components/source-media-page.tsx          |  40 +-
 .../components/v2-source-media-page.tsx       |  17 +-
 .../v2/components/v2-search-content.tsx       |  41 +-
 ...-interface-interactions.responsive.spec.ts | 227 +++++++
 apps/tauri/src/routes/__root.tsx              |   5 +-
 bun.lock                                      |   5 +
 packages/ui/package.json                      |   1 +
 packages/ui/src/command.tsx                   |  28 +-
 .../use-media-collection-selection.test.ts    | 143 ++++
 .../hooks/use-media-collection-selection.ts   | 350 ++++++++++
 .../ui/src/hooks/use-source-media-page.ts     |  17 +-
 .../ui/src/screens/search-screen.types.ts     |   5 +
 .../src/screens/source-media-screen.types.ts  |   4 +
 packages/ui/src/screens/v2-config-screen.tsx  |  15 +
 packages/ui/src/screens/v2-search-screen.tsx  | 131 +++-
 .../ui/src/screens/v2-source-media-screen.tsx |  81 ++-
 .../ui/src/shortcuts/create-app-shortcut.ts   |  62 ++
 packages/ui/src/shortcuts/definitions.ts      | 145 +++++
 packages/ui/src/shortcuts/index.ts            |   6 +
 .../ui/src/shortcuts/preferences-provider.tsx | 222 +++++++
 .../src/shortcuts/preferences-storage.test.ts | 117 ++++
 .../ui/src/shortcuts/preferences-storage.ts   | 224 +++++++
 packages/ui/src/shortcuts/shortcut-kbd.tsx    |  61 ++
 .../src/shortcuts/shortcut-settings-panel.tsx | 374 +++++++++++
 packages/ui/src/skeleton.tsx                  |   2 +-
 packages/ui/src/source-media-grid.tsx         | 612 ++++++++++++++----
 packages/ui/src/source-media-page.tsx         |  16 +-
 packages/ui/src/styles/theme.css              |  55 --
 packages/ui/src/v2-import-review-modal.tsx    |  44 +-
 packages/ui/src/v2-media-grid-item.tsx        |   6 +-
 packages/ui/src/v2-media-viewer.tsx           | 234 ++++++-
 packages/ui/src/v2/collection-inspector.tsx   | 185 ++++--
 .../ui/src/v2/collection-navigation.test.ts   |  85 +++
 packages/ui/src/v2/collection-navigation.ts   | 103 +++
 packages/ui/src/v2/icons.tsx                  |  24 +
 packages/ui/src/v2/search-composer.tsx        |   8 +-
 packages/ui/src/v2/search-toolbar.tsx         |  42 +-
 46 files changed, 4032 insertions(+), 377 deletions(-)
 create mode 100644 apps/server/src/components/v2/v2-command-center.tsx
 create mode 100644 apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts
 create mode 100644 packages/ui/src/hooks/use-media-collection-selection.test.ts
 create mode 100644 packages/ui/src/hooks/use-media-collection-selection.ts
 create mode 100644 packages/ui/src/shortcuts/create-app-shortcut.ts
 create mode 100644 packages/ui/src/shortcuts/definitions.ts
 create mode 100644 packages/ui/src/shortcuts/index.ts
 create mode 100644 packages/ui/src/shortcuts/preferences-provider.tsx
 create mode 100644 packages/ui/src/shortcuts/preferences-storage.test.ts
 create mode 100644 packages/ui/src/shortcuts/preferences-storage.ts
 create mode 100644 packages/ui/src/shortcuts/shortcut-kbd.tsx
 create mode 100644 packages/ui/src/shortcuts/shortcut-settings-panel.tsx
 create mode 100644 packages/ui/src/v2/collection-navigation.test.ts
 create mode 100644 packages/ui/src/v2/collection-navigation.ts

diff --git a/apps/server/src/components/media/legacy-media-grid-item.tsx b/apps/server/src/components/media/legacy-media-grid-item.tsx
index 7d0c357a..807190c6 100644
--- a/apps/server/src/components/media/legacy-media-grid-item.tsx
+++ b/apps/server/src/components/media/legacy-media-grid-item.tsx
@@ -16,10 +16,12 @@ export type ServerMediaGridItemProps = {
 	priority?: boolean;
 	sourceRootPath?: string;
 	isBulkSelectMode?: boolean;
+	isPreviewSelected?: boolean;
 	isSelected?: boolean;
 	onToggleSelect?: () => void;
 	onPrepareMediaDetail?: () => void;
 	onPreviewSelect?: () => void;
+	onSelectGesture?: (event: MouseEvent | KeyboardEvent) => void;
 };
 
 export function LegacyMediaGridItem(props: ServerMediaGridItemProps) {
diff --git a/apps/server/src/components/media/v2-media-actions.tsx b/apps/server/src/components/media/v2-media-actions.tsx
index 1ec14510..92d87b57 100644
--- a/apps/server/src/components/media/v2-media-actions.tsx
+++ b/apps/server/src/components/media/v2-media-actions.tsx
@@ -1,5 +1,15 @@
 import type { MediaDetails } from "@solid-imager/core/domain/media/schemas";
 import { getErrorMessage } from "@solid-imager/core/utils";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@solid-imager/ui/alert-dialog";
 import { Button } from "@solid-imager/ui/button";
 import {
 	Popover,
@@ -11,9 +21,11 @@ import { toast } from "@solid-imager/ui/toast";
 import {
 	Binary,
 	ChevronDown,
+	Download,
 	Scan,
 	ScanSearch,
 	Sparkles,
+	Trash2,
 } from "@solid-imager/ui/v2/icons";
 import { useNavigate } from "@tanstack/solid-router";
 import { createEffect, createSignal, on, onCleanup } from "solid-js";
@@ -25,6 +37,7 @@ import {
 	getCcipVectorStatus,
 	startCcipExtraction,
 } from "~/infrastructure/api-clients/ai-api";
+import { deleteMedia } from "~/infrastructure/api-clients/media-api";
 
 type MediaActionsProps = {
 	media: MediaDetails;
@@ -41,6 +54,7 @@ export function V2MediaActions(props: MediaActionsProps) {
 		createSignal(false);
 	const [isCharacterCropModalOpen, setIsCharacterCropModalOpen] =
 		createSignal(false);
+	const [moreActionsOpen, setMoreActionsOpen] = createSignal(false);
 	const [ccipStatus, setCcipStatus] = createSignal<
 		"missing" | "processing" | "ready" | "stale" | "failed"
 	>("missing");
@@ -49,6 +63,8 @@ export function V2MediaActions(props: MediaActionsProps) {
 	);
 	const [isCcipJobPending, setIsCcipJobPending] = createSignal(false);
 	const [isExtractingCcip, setIsExtractingCcip] = createSignal(false);
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = createSignal(false);
+	const [isDeleting, setIsDeleting] = createSignal(false);
 	const [ccipMissingStatusCount, setCcipMissingStatusCount] = createSignal(0);
 	let ccipStatusRequestId = 0;
 
@@ -101,6 +117,7 @@ export function V2MediaActions(props: MediaActionsProps) {
 	);
 
 	const handleCcipExtraction = async () => {
+		setMoreActionsOpen(false);
 		setIsExtractingCcip(true);
 		const currentMediaId = props.media.id;
 		const currentMediaSourceId = props.media.mediaSourceId;
@@ -168,6 +185,31 @@ export function V2MediaActions(props: MediaActionsProps) {
 		activateVectorSearch(props.media.id, { surface: "v2" });
 		void navigate({ to: "/v2/search" });
 	};
+	const handleDownload = () => {
+		setMoreActionsOpen(false);
+		const anchor = document.createElement("a");
+		anchor.href = `/api/sources/${encodeURIComponent(props.media.mediaSourceId)}/${encodeURIComponent(props.media.id)}`;
+		anchor.download = props.media.fileName;
+		anchor.click();
+	};
+	const handleDelete = async () => {
+		if (isDeleting()) return;
+		setIsDeleting(true);
+		try {
+			await deleteMedia(props.media.mediaSourceId, props.media.id);
+			setIsDeleteDialogOpen(false);
+			toast.success("Media deleted");
+			await navigate({
+				params: { mediaSourceId: props.media.mediaSourceId },
+				replace: true,
+				to: "/v2/sources/$mediaSourceId",
+			});
+		} catch (error) {
+			toast.error(`Failed to delete media: ${getErrorMessage(error)}`);
+		} finally {
+			setIsDeleting(false);
+		}
+	};
 	const ccipActionLabel = () => {
 		if (ccipStatus() === "ready" || ccipStatus() === "stale") {
 			return "Re-extract CCIP vector";
@@ -202,7 +244,11 @@ export function V2MediaActions(props: MediaActionsProps) {
 					<ScanSearch aria-hidden="true" size={15} />
 					Find similar
 				</Button>
-				<Popover placement="bottom-end">
+				<Popover
+					onOpenChange={setMoreActionsOpen}
+					open={moreActionsOpen()}
+					placement="bottom-end"
+				>
 					<PopoverTrigger class="flex h-10 min-w-32 flex-1 items-center justify-center gap-2 rounded-md border border-input bg-white px-3 font-medium text-xs outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] md:h-9 md:flex-none">
 						More actions
 						<ChevronDown aria-hidden="true" size={14} />
@@ -242,6 +288,25 @@ export function V2MediaActions(props: MediaActionsProps) {
 						>
 							CCIP status: {ccipStatus()}
 						</p>
+						<div class="my-1 border-[var(--v2-border)] border-t" />
+						<Button
+							class="h-9 w-full justify-start px-2"
+							onClick={handleDownload}
+							size="sm"
+							variant="ghost"
+						>
+							<Download aria-hidden="true" size={14} />
+							Download original
+						</Button>
+						<Button
+							class="h-9 w-full justify-start px-2 text-destructive hover:bg-destructive/10 hover:text-destructive"
+							onClick={() => setIsDeleteDialogOpen(true)}
+							size="sm"
+							variant="ghost"
+						>
+							<Trash2 aria-hidden="true" size={14} />
+							Delete media…
+						</Button>
 					</PopoverContent>
 				</Popover>
 			</div>
@@ -264,6 +329,34 @@ export function V2MediaActions(props: MediaActionsProps) {
 				media={props.media}
 				onClose={() => setIsCharacterCropModalOpen(false)}
 			/>
+			<AlertDialog
+				onOpenChange={setIsDeleteDialogOpen}
+				open={isDeleteDialogOpen()}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete this media?</AlertDialogTitle>
+						<AlertDialogDescription>
+							{props.media.fileName} will be permanently removed from its
+							source. This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel disabled={isDeleting()}>
+							Cancel
+						</AlertDialogCancel>
+						<AlertDialogAction
+							disabled={isDeleting()}
+							onClick={(event) => {
+								event.preventDefault();
+								void handleDelete();
+							}}
+						>
+							{isDeleting() ? "Deleting…" : "Delete"}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</>
 	);
 }
diff --git a/apps/server/src/components/media/v2-media-grid-item.tsx b/apps/server/src/components/media/v2-media-grid-item.tsx
index 478211bb..45f7ef0f 100644
--- a/apps/server/src/components/media/v2-media-grid-item.tsx
+++ b/apps/server/src/components/media/v2-media-grid-item.tsx
@@ -3,7 +3,7 @@ import {
 	type MediaGridLinkProps,
 	V2MediaGridItem as SharedV2MediaGridItem,
 } from "@solid-imager/ui/v2-media-grid-item";
-import { Link, useLocation } from "@tanstack/solid-router";
+import { Link } from "@tanstack/solid-router";
 import { Show } from "solid-js";
 import type { ServerMediaGridItemProps } from "./legacy-media-grid-item";
 import { ThumbnailImage } from "./thumbnail-image";
@@ -13,35 +13,81 @@ export type V2ServerMediaGridItemProps = Omit<
 	"imageLoadPolicy"
 > & {
 	imageLoadPolicy?: MediaGridImageLoadPolicy;
+	onOpenMediaDetail?: () => void;
 };
 
 export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
-	const location = useLocation();
+	const isPlainPrimaryClick = (event: MouseEvent) =>
+		event.button === 0 &&
+		!event.metaKey &&
+		!event.ctrlKey &&
+		!event.shiftKey &&
+		!event.altKey;
+	const hasFinePointer = () => window.matchMedia("(pointer: fine)").matches;
+	const isModifiedSelectionClick = (event: MouseEvent) =>
+		event.button === 0 &&
+		!event.altKey &&
+		(event.metaKey || event.ctrlKey || event.shiftKey);
+
 	const detailLink = (linkProps: MediaGridLinkProps) => (
 		<Link
+			aria-pressed={linkProps["aria-pressed"]}
 			class={linkProps.class}
 			data-media-id={linkProps["data-media-id"]}
 			onClick={(event: MouseEvent) => {
 				if (
-					props.onPreviewSelect &&
-					window.matchMedia("(min-width: 1536px)").matches
+					props.onSelectGesture &&
+					hasFinePointer() &&
+					isModifiedSelectionClick(event)
 				) {
+					event.preventDefault();
+					props.onSelectGesture(event);
+					return;
+				}
+				if (!isPlainPrimaryClick(event)) return;
+
+				if (props.onPreviewSelect && hasFinePointer()) {
 					event.preventDefault();
 					props.onPreviewSelect();
 					return;
 				}
+
+				props.onPrepareMediaDetail?.();
+			}}
+			onContextMenu={linkProps.onContextMenu}
+			onDblClick={(event: MouseEvent) => {
 				if (
-					event.button === 0 &&
+					!isPlainPrimaryClick(event) ||
+					!hasFinePointer() ||
+					!props.onOpenMediaDetail
+				) {
+					return;
+				}
+
+				event.preventDefault();
+				props.onPrepareMediaDetail?.();
+				props.onOpenMediaDetail();
+			}}
+			onKeyDown={(event: KeyboardEvent) => {
+				if (
+					event.key === "Enter" &&
 					!event.metaKey &&
 					!event.ctrlKey &&
 					!event.shiftKey &&
-					!event.altKey
+					!event.altKey &&
+					props.onOpenMediaDetail
 				) {
+					event.preventDefault();
 					props.onPrepareMediaDetail?.();
-					sessionStorage.setItem("v2:media-return", location().href);
+					props.onOpenMediaDetail();
+					return;
+				}
+
+				if (event.key === " " && props.onPreviewSelect) {
+					event.preventDefault();
+					props.onPreviewSelect();
 				}
 			}}
-			onContextMenu={linkProps.onContextMenu}
 			params={{
 				mediaId: props.media.id,
 				mediaSourceId: props.media.mediaSourceId,
@@ -55,6 +101,7 @@ export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
 	return (
 		<SharedV2MediaGridItem
 			isBulkSelectMode={props.isBulkSelectMode}
+			isPreviewSelected={props.isPreviewSelected}
 			isSelected={props.isSelected}
 			imageLoadPolicy={props.imageLoadPolicy}
 			linkComponent={(linkProps) => (
@@ -65,6 +112,13 @@ export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
 						data-media-id={linkProps["data-media-id"]}
 						onClick={(event) => {
 							event.preventDefault();
+							if (
+								props.onSelectGesture &&
+								isModifiedSelectionClick(event)
+							) {
+								props.onSelectGesture(event);
+								return;
+							}
 							props.onToggleSelect?.();
 						}}
 						onContextMenu={linkProps.onContextMenu}
diff --git a/apps/server/src/components/v2/v2-app-shell.tsx b/apps/server/src/components/v2/v2-app-shell.tsx
index 61afa272..0f9e79bb 100644
--- a/apps/server/src/components/v2/v2-app-shell.tsx
+++ b/apps/server/src/components/v2/v2-app-shell.tsx
@@ -12,11 +12,13 @@ import {
 } from "@solid-imager/ui/dialog";
 import type { RawEventHandler } from "@solid-imager/ui/hooks/use-sources-events";
 import { useSourcesPage } from "@solid-imager/ui/hooks/use-sources-page";
+import { createAppShortcut } from "@solid-imager/ui/shortcuts/index";
 import { SourceDeleteModal } from "@solid-imager/ui/source-delete-modal";
 import { V2SourceFormModal } from "@solid-imager/ui/v2-source-form-modal";
 import { createQuery, useQueryClient } from "@tanstack/solid-query";
+import { useNavigate } from "@tanstack/solid-router";
 import type { JSX, ParentProps } from "solid-js";
-import { createSignal } from "solid-js";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
 import { createServerTransport } from "~/hooks/use-media-source-events";
 import { mediaSourcesQueryOptions } from "~/infrastructure/api-clients/queries";
 import {
@@ -25,6 +27,7 @@ import {
 	syncMediaSources,
 	updateMediaSource,
 } from "~/infrastructure/api-clients/sources-api";
+import { V2CommandCenter } from "./v2-command-center";
 import { V2MobileHeader } from "./v2-mobile-header";
 import { V2Sidebar, type V2SidebarProps } from "./v2-sidebar";
 
@@ -32,8 +35,11 @@ type V2AppShellProps = ParentProps<{
 	statusIndicator?: JSX.Element;
 }>;
 
+const SIDEBAR_PREFERENCE_KEY = "solid-imager:v2-sidebar-expanded";
+
 export function V2AppShell(props: V2AppShellProps) {
 	const queryClient = useQueryClient();
+	const navigate = useNavigate();
 	const mediaSources = createQuery(mediaSourcesQueryOptions);
 	const sourceEventTransport = createServerTransport(() => "*", {
 		onResumeFromIdle: () => {
@@ -45,7 +51,32 @@ export function V2AppShell(props: V2AppShellProps) {
 	const registerSourceEvents = (handler: RawEventHandler) =>
 		sourceEventTransport.listen(handler);
 	const [sidebarExpanded, setSidebarExpanded] = createSignal(true);
+	const [sidebarPreferenceReady, setSidebarPreferenceReady] =
+		createSignal(false);
 	const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
+	const [commandPaletteOpen, setCommandPaletteOpen] = createSignal(false);
+	const [shortcutHelpOpen, setShortcutHelpOpen] = createSignal(false);
+	let commandPaletteReturnFocus: HTMLElement | null = null;
+	let focusRestoreFrame: number | undefined;
+	const updateCommandPaletteOpen = (open: boolean) => {
+		if (open && !commandPaletteOpen()) {
+			commandPaletteReturnFocus =
+				document.activeElement instanceof HTMLElement
+					? document.activeElement
+					: null;
+		}
+		setCommandPaletteOpen(open);
+		if (open || !commandPaletteReturnFocus) return;
+		const returnFocus = commandPaletteReturnFocus;
+		commandPaletteReturnFocus = null;
+		if (focusRestoreFrame !== undefined) {
+			cancelAnimationFrame(focusRestoreFrame);
+		}
+		focusRestoreFrame = requestAnimationFrame(() => {
+			focusRestoreFrame = undefined;
+			if (returnFocus.isConnected) returnFocus.focus({ preventScroll: true });
+		});
+	};
 	const sourceData = () => mediaSources.data ?? [];
 	const sourcePage = useSourcesPage({
 		actions: {
@@ -69,8 +100,45 @@ export function V2AppShell(props: V2AppShellProps) {
 		onCollapseToggle: () => setSidebarExpanded((expanded) => !expanded),
 		onDeleteSource: sourcePage.handleDeleteSource,
 		onEditSource: sourcePage.handleEditSource,
+		onOpenCommandPalette: () => updateCommandPaletteOpen(true),
 		onSyncSource: (source) => void sourcePage.handleSyncSource(source),
 	});
+	createAppShortcut(
+		"commandPalette",
+		() => updateCommandPaletteOpen(!commandPaletteOpen()),
+		{ ignoreInputs: false },
+	);
+	createAppShortcut("shortcutHelp", () => setShortcutHelpOpen(true));
+	createAppShortcut("toggleSidebar", () =>
+		setSidebarExpanded((expanded) => !expanded),
+	);
+	createAppShortcut("goLibrary", () => {
+		void navigate({ to: "/v2/search" });
+	});
+	createAppShortcut("goManager", () => {
+		void navigate({ to: "/v2/manager" });
+	});
+	createAppShortcut("goJobs", () => {
+		void navigate({ to: "/v2/jobs" });
+	});
+	createAppShortcut("goSettings", () => {
+		void navigate({ to: "/v2/config" });
+	});
+	onMount(() => {
+		const storedPreference = localStorage.getItem(SIDEBAR_PREFERENCE_KEY);
+		if (storedPreference === "false") setSidebarExpanded(false);
+		if (storedPreference === "true") setSidebarExpanded(true);
+		setSidebarPreferenceReady(true);
+	});
+	onCleanup(() => {
+		if (focusRestoreFrame !== undefined) {
+			cancelAnimationFrame(focusRestoreFrame);
+		}
+	});
+	createEffect(() => {
+		if (!sidebarPreferenceReady()) return;
+		localStorage.setItem(SIDEBAR_PREFERENCE_KEY, String(sidebarExpanded()));
+	});
 
 	return (
 		<div
@@ -95,7 +163,10 @@ export function V2AppShell(props: V2AppShellProps) {
 			</aside>
 
 			<div class="flex min-h-0 min-w-0 flex-col">
-				<V2MobileHeader onOpenMenu={() => setMobileMenuOpen(true)} />
+				<V2MobileHeader
+					onOpenCommandPalette={() => updateCommandPaletteOpen(true)}
+					onOpenMenu={() => setMobileMenuOpen(true)}
+				/>
 				{props.statusIndicator}
 				<main
 					class="min-h-0 min-w-0 flex-1 overflow-hidden"
@@ -137,6 +208,14 @@ export function V2AppShell(props: V2AppShellProps) {
 				onConfirm={sourcePage.handleDeleteConfirm}
 				sourceToDelete={sourcePage.deletingSource()}
 			/>
+			<V2CommandCenter
+				helpOpen={shortcutHelpOpen()}
+				onAddSource={sourcePage.handleAddSource}
+				onHelpOpenChange={setShortcutHelpOpen}
+				onPaletteOpenChange={updateCommandPaletteOpen}
+				onToggleSidebar={() => setSidebarExpanded((expanded) => !expanded)}
+				paletteOpen={commandPaletteOpen()}
+			/>
 		</div>
 	);
 }
diff --git a/apps/server/src/components/v2/v2-command-center.tsx b/apps/server/src/components/v2/v2-command-center.tsx
new file mode 100644
index 00000000..22a49a1d
--- /dev/null
+++ b/apps/server/src/components/v2/v2-command-center.tsx
@@ -0,0 +1,302 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@solid-imager/ui/dialog";
+import {
+	getShortcutDefinitionsForGroup,
+	SHORTCUT_GROUPS,
+	type ShortcutId,
+	ShortcutKbd,
+} from "@solid-imager/ui/shortcuts/index";
+import {
+	BriefcaseBusiness,
+	CircleHelp,
+	Clock3,
+	Library,
+	PanelLeftClose,
+	Plus,
+	Search,
+	Settings,
+} from "@solid-imager/ui/v2/icons";
+import { useNavigate } from "@tanstack/solid-router";
+import {
+	type Component,
+	createEffect,
+	createMemo,
+	createSignal,
+	createUniqueId,
+	For,
+	Show,
+} from "solid-js";
+
+export type V2CommandCenterProps = {
+	helpOpen: boolean;
+	onAddSource: () => void;
+	onHelpOpenChange: (open: boolean) => void;
+	onPaletteOpenChange: (open: boolean) => void;
+	onToggleSidebar: () => void;
+	paletteOpen: boolean;
+};
+
+type PaletteAction = {
+	group: "Actions" | "Navigate";
+	icon: Component<{ class?: string; size?: number | string }>;
+	keywords: string;
+	label: string;
+	run: () => void;
+	shortcutId?: ShortcutId;
+};
+
+export function V2CommandCenter(props: V2CommandCenterProps) {
+	const navigate = useNavigate();
+	const listId = createUniqueId();
+	const [query, setQuery] = createSignal("");
+	const [activeIndex, setActiveIndex] = createSignal(0);
+	const actions = createMemo<PaletteAction[]>(() => [
+		{
+			group: "Navigate",
+			icon: Library,
+			keywords: "media images search browse",
+			label: "Library",
+			run: () => void navigate({ to: "/v2/search" }),
+			shortcutId: "goLibrary",
+		},
+		{
+			group: "Navigate",
+			icon: BriefcaseBusiness,
+			keywords: "projects characters ips bulk organize",
+			label: "Manager",
+			run: () => void navigate({ to: "/v2/manager" }),
+			shortcutId: "goManager",
+		},
+		{
+			group: "Navigate",
+			icon: Clock3,
+			keywords: "background activity downloads queue",
+			label: "Jobs",
+			run: () => void navigate({ to: "/v2/jobs" }),
+			shortcutId: "goJobs",
+		},
+		{
+			group: "Navigate",
+			icon: Settings,
+			keywords: "preferences keyboard key bindings",
+			label: "Settings",
+			run: () => void navigate({ to: "/v2/config" }),
+			shortcutId: "goSettings",
+		},
+		{
+			group: "Actions",
+			icon: Plus,
+			keywords: "import folder library",
+			label: "Add media source",
+			run: props.onAddSource,
+		},
+		{
+			group: "Actions",
+			icon: PanelLeftClose,
+			keywords: "collapse expand navigation",
+			label: "Toggle sidebar",
+			run: props.onToggleSidebar,
+			shortcutId: "toggleSidebar",
+		},
+		{
+			group: "Actions",
+			icon: CircleHelp,
+			keywords: "keyboard keys help reference",
+			label: "Keyboard shortcuts",
+			run: () => props.onHelpOpenChange(true),
+			shortcutId: "shortcutHelp",
+		},
+	]);
+	const filteredActions = createMemo(() => {
+		const normalizedQuery = query().trim().toLocaleLowerCase();
+		if (!normalizedQuery) return actions();
+		return actions().filter((action) =>
+			`${action.label} ${action.keywords}`
+				.toLocaleLowerCase()
+				.includes(normalizedQuery),
+		);
+	});
+	const itemId = (index: number) => `${listId}-option-${index}`;
+	const runAction = (action: PaletteAction) => {
+		props.onPaletteOpenChange(false);
+		setQuery("");
+		action.run();
+	};
+	const setPaletteOpen = (open: boolean) => {
+		if (!open) setQuery("");
+		props.onPaletteOpenChange(open);
+	};
+	const moveActive = (nextIndex: number) => {
+		const count = filteredActions().length;
+		if (count === 0) return;
+		setActiveIndex((nextIndex + count) % count);
+	};
+
+	createEffect(() => {
+		query();
+		filteredActions().length;
+		setActiveIndex(0);
+	});
+
+	return (
+		<>
+			<Dialog onOpenChange={setPaletteOpen} open={props.paletteOpen}>
+				<DialogContent class="v2-theme max-w-xl overflow-hidden p-0">
+					<DialogHeader class="sr-only">
+						<DialogTitle>Quick actions</DialogTitle>
+						<DialogDescription>
+							Search navigation and application actions.
+						</DialogDescription>
+					</DialogHeader>
+					<div class="flex h-12 items-center gap-2 border-[var(--v2-border)] border-b px-4 pr-12">
+						<Search
+							aria-hidden="true"
+							class="shrink-0 text-[var(--v2-text-muted)]"
+							size={18}
+						/>
+						<input
+							aria-activedescendant={
+								filteredActions().length > 0 ? itemId(activeIndex()) : undefined
+							}
+							aria-autocomplete="list"
+							aria-controls={listId}
+							aria-expanded="true"
+							aria-label="Search quick actions"
+							autocomplete="off"
+							autofocus
+							class="h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--v2-text-muted)]"
+							onInput={(event) => setQuery(event.currentTarget.value)}
+							onKeyDown={(event) => {
+								if (event.key === "ArrowDown") {
+									event.preventDefault();
+									moveActive(activeIndex() + 1);
+								} else if (event.key === "ArrowUp") {
+									event.preventDefault();
+									moveActive(activeIndex() - 1);
+								} else if (event.key === "Home") {
+									event.preventDefault();
+									setActiveIndex(0);
+								} else if (event.key === "End") {
+									event.preventDefault();
+									setActiveIndex(Math.max(filteredActions().length - 1, 0));
+								} else if (event.key === "Enter") {
+									const action = filteredActions()[activeIndex()];
+									if (action) {
+										event.preventDefault();
+										runAction(action);
+									}
+								}
+							}}
+							placeholder="Search actions…"
+							role="combobox"
+							value={query()}
+						/>
+					</div>
+					<div
+						class="max-h-[min(28rem,60dvh)] overflow-y-auto overscroll-contain p-2 [scrollbar-gutter:stable]"
+						id={listId}
+						role="listbox"
+					>
+						<Show
+							fallback={
+								<p class="px-3 py-8 text-center text-[var(--v2-text-muted)] text-sm">
+									No matching action.
+								</p>
+							}
+							when={filteredActions().length > 0}
+						>
+							<For each={filteredActions()}>
+								{(action, index) => {
+									const Icon = action.icon;
+									return (
+										<>
+											<Show
+												when={
+													index() === 0 ||
+													filteredActions()[index() - 1]?.group !== action.group
+												}
+											>
+												<p class="px-2 pt-2 pb-1 font-semibold text-[var(--v2-text-muted)] text-[11px] uppercase tracking-wide">
+													{action.group}
+												</p>
+											</Show>
+											<button
+												aria-selected={activeIndex() === index()}
+												class={`flex min-h-10 w-full items-center gap-3 rounded-md px-2.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] ${
+													activeIndex() === index()
+														? "bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"
+														: "hover:bg-[var(--v2-surface-muted)]"
+												}`}
+												id={itemId(index())}
+												onClick={() => runAction(action)}
+												onPointerMove={() => setActiveIndex(index())}
+												role="option"
+												tabIndex={-1}
+												type="button"
+											>
+												<Icon aria-hidden="true" class="shrink-0" size={17} />
+												<span class="min-w-0 flex-1 truncate">
+													{action.label}
+												</span>
+												<Show when={action.shortcutId}>
+													{(shortcutId) => (
+														<ShortcutKbd shortcutId={shortcutId()} />
+													)}
+												</Show>
+											</button>
+										</>
+									);
+								}}
+							</For>
+						</Show>
+					</div>
+				</DialogContent>
+			</Dialog>
+
+			<Dialog onOpenChange={props.onHelpOpenChange} open={props.helpOpen}>
+				<DialogContent class="v2-theme max-w-2xl overflow-hidden p-0">
+					<DialogHeader class="border-[var(--v2-border)] border-b px-5 py-4 pr-12">
+						<DialogTitle>Keyboard shortcuts</DialogTitle>
+						<DialogDescription>
+							Use these commands anywhere they apply. Customize them in Settings
+							→ Shortcuts.
+						</DialogDescription>
+					</DialogHeader>
+					<div class="max-h-[min(32rem,65dvh)] overflow-y-auto overscroll-contain px-5 pb-5 [scrollbar-gutter:stable]">
+						<For each={SHORTCUT_GROUPS}>
+							{(group) => (
+								<section class="pt-5">
+									<h3 class="mb-2 font-semibold text-[var(--v2-text-muted)] text-xs uppercase tracking-wide">
+										{group}
+									</h3>
+									<ul class="divide-y divide-[var(--v2-border)] rounded-lg border border-[var(--v2-border)] bg-[var(--v2-surface-subtle)]">
+										<For each={getShortcutDefinitionsForGroup(group)}>
+											{(definition) => (
+												<li class="flex min-w-0 items-center gap-4 px-3 py-2.5">
+													<div class="min-w-0 flex-1">
+														<div class="font-medium text-sm">
+															{definition.label}
+														</div>
+														<p class="truncate text-[var(--v2-text-muted)] text-xs">
+															{definition.description}
+														</p>
+													</div>
+													<ShortcutKbd shortcutId={definition.id} />
+												</li>
+											)}
+										</For>
+									</ul>
+								</section>
+							)}
+						</For>
+					</div>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+}
diff --git a/apps/server/src/components/v2/v2-mobile-header.tsx b/apps/server/src/components/v2/v2-mobile-header.tsx
index 1be8d689..73e66fbc 100644
--- a/apps/server/src/components/v2/v2-mobile-header.tsx
+++ b/apps/server/src/components/v2/v2-mobile-header.tsx
@@ -1,8 +1,11 @@
 import { Button } from "@solid-imager/ui/button";
-import { Menu } from "@solid-imager/ui/v2/icons";
+import { Menu, Search } from "@solid-imager/ui/v2/icons";
 import { V2PendingDownloadsIndicator } from "~/components/imports/v2-pending-downloads-indicator";
 
-export function V2MobileHeader(props: { onOpenMenu: () => void }) {
+export function V2MobileHeader(props: {
+	onOpenCommandPalette?: () => void;
+	onOpenMenu: () => void;
+}) {
 	return (
 		<header class="flex h-13 shrink-0 items-center gap-3 border-[var(--v2-border)] border-b bg-[var(--v2-surface-subtle)] px-3 md:hidden">
 			<Button
@@ -17,6 +20,17 @@ export function V2MobileHeader(props: { onOpenMenu: () => void }) {
 			<strong class="min-w-0 flex-1 truncate font-semibold">
 				Solid Imager
 			</strong>
+			{props.onOpenCommandPalette ? (
+				<Button
+					aria-label="Quick actions"
+					class="size-10 p-0"
+					onClick={props.onOpenCommandPalette}
+					size="icon"
+					variant="ghost"
+				>
+					<Search aria-hidden="true" size={18} />
+				</Button>
+			) : null}
 			<V2PendingDownloadsIndicator compact />
 		</header>
 	);
diff --git a/apps/server/src/components/v2/v2-navigation.tsx b/apps/server/src/components/v2/v2-navigation.tsx
index 643a8bd6..e0def02f 100644
--- a/apps/server/src/components/v2/v2-navigation.tsx
+++ b/apps/server/src/components/v2/v2-navigation.tsx
@@ -9,10 +9,25 @@ import type { JSX } from "solid-js";
 import { Show } from "solid-js";
 
 export const V2_NAVIGATION_ITEMS = [
-	{ icon: Library, label: "Library", to: "/v2/search" },
-	{ icon: BriefcaseBusiness, label: "Manager", to: "/v2/manager" },
-	{ icon: Clock3, label: "Jobs", to: "/v2/jobs" },
-	{ icon: Settings, label: "Settings", to: "/v2/config" },
+	{
+		icon: Library,
+		label: "Library",
+		shortcutId: "goLibrary",
+		to: "/v2/search",
+	},
+	{
+		icon: BriefcaseBusiness,
+		label: "Manager",
+		shortcutId: "goManager",
+		to: "/v2/manager",
+	},
+	{ icon: Clock3, label: "Jobs", shortcutId: "goJobs", to: "/v2/jobs" },
+	{
+		icon: Settings,
+		label: "Settings",
+		shortcutId: "goSettings",
+		to: "/v2/config",
+	},
 ] as const;
 
 export function V2NavigationItem(props: {
diff --git a/apps/server/src/components/v2/v2-sidebar.tsx b/apps/server/src/components/v2/v2-sidebar.tsx
index 67b52ba9..5cce2373 100644
--- a/apps/server/src/components/v2/v2-sidebar.tsx
+++ b/apps/server/src/components/v2/v2-sidebar.tsx
@@ -1,11 +1,13 @@
 import type { SafeMediaSource } from "@solid-imager/core/domain/sources/schemas";
 import { Button } from "@solid-imager/ui/button";
+import { ShortcutKbd } from "@solid-imager/ui/shortcuts/index";
 import {
 	CircleHelp,
 	FileText,
 	Image,
 	PanelLeftClose,
 	PanelLeftOpen,
+	Search,
 } from "@solid-imager/ui/v2/icons";
 import { Link } from "@tanstack/solid-router";
 import { For, Show } from "solid-js";
@@ -21,6 +23,7 @@ export type V2SidebarProps = {
 	onDeleteSource: (source: SafeMediaSource) => void;
 	onEditSource: (source: SafeMediaSource) => void;
 	onNavigate?: () => void;
+	onOpenCommandPalette?: () => void;
 	onSyncSource: (source: SafeMediaSource) => void;
 };
 
@@ -71,6 +74,29 @@ export function V2Sidebar(props: V2SidebarProps) {
 				</Show>
 			</div>
 
+			<Show when={props.onOpenCommandPalette}>
+				{(onOpenCommandPalette) => (
+					<Button
+						aria-label="Quick actions"
+						class="mb-2 h-10 w-full justify-start gap-2 border border-[var(--v2-border)] bg-[var(--v2-surface)] px-3 text-[var(--v2-text-secondary)] shadow-none hover:bg-[var(--v2-surface-muted)]"
+						onClick={onOpenCommandPalette()}
+						title="Quick actions"
+						variant="outline"
+					>
+						<Search aria-hidden="true" class="shrink-0" size={16} />
+						<Show when={props.expanded}>
+							<span class="min-w-0 flex-1 truncate text-left">
+								Quick actions
+							</span>
+							<ShortcutKbd
+								class="min-h-5 text-[10px]"
+								shortcutId="commandPalette"
+							/>
+						</Show>
+					</Button>
+				)}
+			</Show>
+
 			<nav aria-label="主要ナビゲーション" class="space-y-1">
 				<V2NavigationItem
 					expanded={props.expanded}
@@ -78,10 +104,13 @@ export function V2Sidebar(props: V2SidebarProps) {
 					label={V2_NAVIGATION_ITEMS[0].label}
 					onClick={props.onNavigate}
 					to={V2_NAVIGATION_ITEMS[0].to}
-				/>
-				<Show when={props.expanded}>
-					<V2PendingDownloadsIndicator />
-				</Show>
+				>
+					<ShortcutKbd
+						class="min-h-5 text-[10px]"
+						shortcutId={V2_NAVIGATION_ITEMS[0].shortcutId}
+					/>
+				</V2NavigationItem>
+				<V2PendingDownloadsIndicator compact={!props.expanded} />
 			</nav>
 
 			<V2SourceList
@@ -104,7 +133,12 @@ export function V2Sidebar(props: V2SidebarProps) {
 							label={item.label}
 							onClick={props.onNavigate}
 							to={item.to}
-						/>
+						>
+							<ShortcutKbd
+								class="min-h-5 text-[10px]"
+								shortcutId={item.shortcutId}
+							/>
+						</V2NavigationItem>
 					)}
 				</For>
 			</nav>
diff --git a/apps/server/src/routes/__root.tsx b/apps/server/src/routes/__root.tsx
index 3ab5579f..7bccdb48 100644
--- a/apps/server/src/routes/__root.tsx
+++ b/apps/server/src/routes/__root.tsx
@@ -1,5 +1,6 @@
 import { AppShell } from "@solid-imager/ui/layouts/app-shell";
 import { RouteTransitionIndicator } from "@solid-imager/ui/router-status";
+import { ShortcutPreferencesProvider } from "@solid-imager/ui/shortcuts/index";
 import { Toaster } from "@solid-imager/ui/toast";
 import type { QueryClient } from "@tanstack/solid-query";
 import {
@@ -54,23 +55,25 @@ function RootComponent() {
 				<HeadContent />
 			</head>
 			<body classList={{ "v2-theme": isV2Route() }}>
-				<Toaster />
-				<Show
-					fallback={<Outlet />}
-					when={
-						location().pathname !== "/design-lab" &&
-						!location().pathname.startsWith("/design-lab/") &&
-						!isV2Route()
-					}
-				>
-					<AppShell
-						nav={<Nav />}
-						statusIndicator={<RouteTransitionIndicator />}
+				<ShortcutPreferencesProvider>
+					<Toaster />
+					<Show
+						fallback={<Outlet />}
+						when={
+							location().pathname !== "/design-lab" &&
+							!location().pathname.startsWith("/design-lab/") &&
+							!isV2Route()
+						}
 					>
-						<ApiActivityIndicator />
-						<Outlet />
-					</AppShell>
-				</Show>
+						<AppShell
+							nav={<Nav />}
+							statusIndicator={<RouteTransitionIndicator />}
+						>
+							<ApiActivityIndicator />
+							<Outlet />
+						</AppShell>
+					</Show>
+				</ShortcutPreferencesProvider>
 				<Scripts />
 			</body>
 		</html>
diff --git a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
index 9443d7d2..c2e696dd 100644
--- a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
+++ b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
@@ -1,6 +1,10 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
 import { Button } from "@solid-imager/ui/button";
 import type { SearchPersistenceSurface } from "@solid-imager/ui/hooks/use-current-search-persistence";
+import {
+	type MediaCollectionSelectionMode,
+	useMediaCollectionSelection,
+} from "@solid-imager/ui/hooks/use-media-collection-selection";
 import { createPresetClient } from "@solid-imager/ui/preset-client";
 import { sourceMediaQueryKeys } from "@solid-imager/ui/query-options";
 import { RouteDataPendingScreen } from "@solid-imager/ui/router-status";
@@ -82,6 +86,9 @@ export function SourceMediaPageController(
 	const mediaSourceId = () => props.mediaSourceId?.() ?? params().mediaSourceId;
 	const queryClient = useQueryClient();
 	const [isMounted, setIsMounted] = createSignal(false);
+	const [visibleMediaIds, setVisibleMediaIds] = createSignal<readonly string[]>(
+		[],
+	);
 	const mediaSources = createQuery(mediaSourcesQueryOptions);
 	const mediaSourceName = () =>
 		mediaSources.data?.find((source) => source.id === mediaSourceId())?.name;
@@ -90,23 +97,27 @@ export function SourceMediaPageController(
 
 	// 一括選択用シグナル
 	const [isBulkSelectMode, setIsBulkSelectMode] = createSignal(false);
-	const [selectedMediaIds, setSelectedMediaIds] = createSignal<string[]>([]);
+	const selection = useMediaCollectionSelection(visibleMediaIds);
+	const selectedMediaIds = () => [...selection.selectedIds()];
 	const [isBulkActionOpen, setIsBulkActionOpen] = createSignal(false);
 
 	const handleToggleSelect = (mediaId: string) => {
 		setIsBulkSelectMode(true);
-		setSelectedMediaIds((prev) => {
-			return prev.includes(mediaId)
-				? prev.filter((id) => id !== mediaId)
-				: [...prev, mediaId];
-		});
+		selection.select(mediaId, "toggle");
+	};
+	const handleSelectionGesture = (
+		mediaId: string,
+		mode: MediaCollectionSelectionMode,
+	) => {
+		setIsBulkSelectMode(true);
+		selection.select(mediaId, mode);
 	};
 
-	const isSelected = (mediaId: string) => selectedMediaIds().includes(mediaId);
+	const isSelected = selection.isSelected;
 
 	const handleCancelSelect = () => {
 		setIsBulkSelectMode(false);
-		setSelectedMediaIds([]);
+		selection.clear();
 	};
 
 	// 一括操作成功時のコールバック
@@ -164,6 +175,8 @@ export function SourceMediaPageController(
 				charactersQueryOptions={allCharactersQueryOptions}
 				authorsQueryOptions={allAuthorsQueryOptions}
 				onToggleSelect={handleToggleSelect}
+				onSelectMedia={handleSelectionGesture}
+				onVisibleMediaIdsChange={setVisibleMediaIds}
 				isBulkSelectMode={isBulkSelectMode}
 				isSelected={isSelected}
 				onBulkAction={() => setIsBulkActionOpen(true)}
@@ -189,6 +202,17 @@ export function SourceMediaPageController(
 					<span class="w-full text-center font-medium text-sm sm:w-auto">
 						{selectedMediaIds().length} 件選択中
 					</span>
+					<Button
+						class="flex-1 sm:flex-none"
+						disabled={
+							visibleMediaIds().length === 0 ||
+							selectedMediaIds().length === visibleMediaIds().length
+						}
+						onClick={() => selection.selectAll()}
+						variant="outline"
+					>
+						表示分をすべて選択
+					</Button>
 					<Button
 						class="flex-1 sm:flex-none"
 						disabled={selectedMediaIds().length === 0}
diff --git a/apps/server/src/routes/sources/$mediaSourceId/components/v2-source-media-page.tsx b/apps/server/src/routes/sources/$mediaSourceId/components/v2-source-media-page.tsx
index 4d39c9cd..262f0a78 100644
--- a/apps/server/src/routes/sources/$mediaSourceId/components/v2-source-media-page.tsx
+++ b/apps/server/src/routes/sources/$mediaSourceId/components/v2-source-media-page.tsx
@@ -14,13 +14,21 @@ import {
 
 const SearchHistoryClient = createSearchHistoryClient(rawSearchHistoryClient);
 
+function rememberReturnPath(href: string): void {
+	try {
+		sessionStorage.setItem("v2:media-return", href);
+	} catch {
+		// Session storage is optional; media detail navigation must continue.
+	}
+}
+
 export function V2SourceMediaPage(props: { mediaSourceId?: Accessor<string> }) {
 	const location = useLocation();
 	const navigate = useNavigate();
 
 	const onOpenMediaDetail: SourceMediaPageControllerProps["onOpenMediaDetail"] =
 		(media, context) => {
-			sessionStorage.setItem("v2:media-return", location().href);
+			rememberReturnPath(location().href);
 			saveV2MediaContext(location().href, context ?? [media]);
 			void navigate({
 				params: {
@@ -32,7 +40,7 @@ export function V2SourceMediaPage(props: { mediaSourceId?: Accessor<string> }) {
 		};
 	const onPrepareMediaDetail: SourceMediaPageControllerProps["onPrepareMediaDetail"] =
 		(media, context) => {
-			sessionStorage.setItem("v2:media-return", location().href);
+			rememberReturnPath(location().href);
 			saveV2MediaContext(location().href, context ?? [media]);
 		};
 
@@ -48,11 +56,14 @@ export function V2SourceMediaPage(props: { mediaSourceId?: Accessor<string> }) {
 				<V2MediaGridItem
 					imageLoadPolicy={options.imageLoadPolicy}
 					isBulkSelectMode={options.isBulkSelectMode}
-					isSelected={options.isSelected || options.isPreviewSelected}
+					isPreviewSelected={options.isPreviewSelected}
+					isSelected={options.isSelected}
 					media={media}
 					onContextMenu={options.onContextMenu}
+					onOpenMediaDetail={options.onOpenMediaDetail}
 					onPrepareMediaDetail={options.onPrepareMediaDetail}
 					onPreviewSelect={options.onPreviewSelect}
+					onSelectGesture={options.onSelectGesture}
 					onToggleSelect={onToggleSelect}
 					priority={options.priority}
 				/>
diff --git a/apps/server/src/routes/v2/components/v2-search-content.tsx b/apps/server/src/routes/v2/components/v2-search-content.tsx
index dc44f92e..1465a454 100644
--- a/apps/server/src/routes/v2/components/v2-search-content.tsx
+++ b/apps/server/src/routes/v2/components/v2-search-content.tsx
@@ -1,10 +1,15 @@
 import { persistSearchScrollPosition } from "@solid-imager/ui/hooks/use-current-search-persistence";
+import {
+	type MediaCollectionSelectionMode,
+	useMediaCollectionSelection,
+} from "@solid-imager/ui/hooks/use-media-collection-selection";
 import { useSearchHistoryPersistence } from "@solid-imager/ui/hooks/use-search-history-persistence";
 import { useSearchPage } from "@solid-imager/ui/hooks/use-search-page";
 import { createPresetClient } from "@solid-imager/ui/preset-client";
 import { V2SearchScreen } from "@solid-imager/ui/screens/v2-search-screen";
 import { createSearchHistoryClient } from "@solid-imager/ui/search-history-client";
 import { useLocation, useNavigate } from "@tanstack/solid-router";
+import { createSignal } from "solid-js";
 import { ThumbnailImage } from "~/components/media/thumbnail-image";
 import { V2MediaGridItem } from "~/components/media/v2-media-grid-item";
 import { useMediaSourceEvents } from "~/hooks/use-media-source-events";
@@ -45,6 +50,22 @@ function rememberReturnPath(href: string): void {
 export default function V2SearchContent() {
 	const location = useLocation();
 	const navigate = useNavigate();
+	const [visibleMediaIds, setVisibleMediaIds] = createSignal<readonly string[]>(
+		[],
+	);
+	const selection = useMediaCollectionSelection(visibleMediaIds);
+	const [isBulkSelectMode, setIsBulkSelectMode] = createSignal(false);
+	const handleSelection = (
+		mediaId: string,
+		mode: MediaCollectionSelectionMode,
+	) => {
+		setIsBulkSelectMode(true);
+		selection.select(mediaId, mode);
+	};
+	const clearSelection = () => {
+		setIsBulkSelectMode(false);
+		selection.clear();
+	};
 	const searchHistory = useSearchHistoryPersistence("all", {
 		client: SearchHistoryClient,
 		surface: "v2",
@@ -100,16 +121,31 @@ export default function V2SearchContent() {
 		<V2SearchScreen
 			enableVirtualization
 			filterData={page.filterData}
+			isBulkSelectMode={isBulkSelectMode}
+			isSelected={selection.isSelected}
+			onClearSelection={clearSelection}
+			onSelectAll={() => {
+				setIsBulkSelectMode(true);
+				selection.selectAll();
+			}}
+			onSelectMedia={handleSelection}
 			onSelectSource={(id) => setSearchState("selectedSource", id)}
+			onToggleSelect={(mediaId) => handleSelection(mediaId, "toggle")}
+			onVisibleMediaIdsChange={setVisibleMediaIds}
 			page={page}
 			presetClient={PresetClient}
 			renderMediaItem={(media, options) => (
 				<V2MediaGridItem
 					imageLoadPolicy={options?.imageLoadPolicy}
-					isSelected={options?.isPreviewSelected}
+					isBulkSelectMode={options?.isBulkSelectMode}
+					isSelected={options?.isSelected}
+					isPreviewSelected={options?.isPreviewSelected}
 					media={media}
+					onOpenMediaDetail={options?.onOpenMediaDetail}
 					onPreviewSelect={options?.onPreviewSelect}
-					priority={options?.priority}
+						onSelectGesture={options?.onSelectGesture}
+						onToggleSelect={options?.onToggleSelect}
+						priority={options?.priority}
 					onPrepareMediaDetail={options?.onPrepareMediaDetail}
 				/>
 			)}
@@ -140,6 +176,7 @@ export default function V2SearchContent() {
 				/>
 			)}
 			selectedSource={searchState.selectedSource}
+			selectedCount={() => selection.selectedIds().size}
 			ssrGuard
 			sources={page.sources()}
 		/>
diff --git a/apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts b/apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts
new file mode 100644
index 00000000..5883160c
--- /dev/null
+++ b/apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts
@@ -0,0 +1,227 @@
+import type { Page } from "@playwright/test";
+import {
+	E2E_PRIMARY_FILE_NAME,
+	E2E_PRIMARY_MEDIA_ID,
+	E2E_SIMILAR_FILE_NAME,
+	E2E_SIMILAR_MEDIA_ID,
+	E2E_SOURCE_ID,
+} from "./support/fixture";
+import { expect, test, waitForAppHydration } from "./support/test";
+
+const v2SearchPath = "/v2/search";
+const v2SourcePath = `/v2/sources/${E2E_SOURCE_ID}`;
+const v2MediaPath = (mediaId: string) => `${v2SourcePath}/${mediaId}`;
+
+async function openV2Search(page: Page): Promise<void> {
+	await page.goto(v2SearchPath);
+	await waitForAppHydration(page);
+	await expect(page.locator("[data-media-id]").first()).toBeVisible();
+}
+
+test("V2 command palette opens from the keyboard and restores focus", async ({
+	page,
+}) => {
+	await openV2Search(page);
+
+	const origin = page.getByRole("button", {
+		name: "Quick actions",
+		exact: true,
+	});
+	await expect(origin).toBeVisible();
+	await origin.focus();
+	await expect(origin).toBeFocused();
+
+	await page.keyboard.press("ControlOrMeta+KeyK");
+	const palette = page.getByRole("dialog", { name: "Quick actions" });
+	await expect(palette).toBeVisible();
+	await expect(palette.getByPlaceholder("Search actions…")).toBeFocused();
+
+	await page.keyboard.press("Escape");
+	await expect(palette).toBeHidden();
+	await expect(origin).toBeFocused();
+});
+
+test("V2 slash shortcut focuses search without swallowing slash input", async ({
+	page,
+}) => {
+	await openV2Search(page);
+
+	const searchInput = page.getByRole("combobox", {
+		name: "メディアを検索",
+		exact: true,
+	});
+	const filterButton = page.getByRole("button", {
+		name: /検索フィルター、\d+件の条件/,
+	});
+	await filterButton.focus();
+	await expect(filterButton).toBeFocused();
+
+	await page.keyboard.press("/");
+	await expect(searchInput).toBeFocused();
+
+	await page.keyboard.type("e2e");
+	await page.keyboard.press("/");
+	await expect(searchInput).toHaveValue("e2e/");
+});
+
+test("V2 source search keeps URL paste in the input context", async ({
+	page,
+}) => {
+	await page.goto(v2SourcePath);
+	await waitForAppHydration(page);
+
+	const searchInput = page.getByRole("combobox", {
+		name: "メディアを検索",
+		exact: true,
+	});
+	await searchInput.focus();
+	const pastedUrl = "https://fixture.invalid/reference.png";
+	await page.context().grantPermissions(["clipboard-read", "clipboard-write"], {
+		origin: new URL(page.url()).origin,
+	});
+	await page.evaluate((url) => navigator.clipboard.writeText(url), pastedUrl);
+	await searchInput.press("ControlOrMeta+KeyV");
+
+	await expect(searchInput).toBeFocused();
+	await expect(searchInput).toHaveValue(pastedUrl);
+	await expect(
+		page.getByRole("dialog", { name: "メディアをアップロード" }),
+	).toHaveCount(0);
+});
+
+test("V2 source collection supports additive and range selection gestures", async ({
+	page,
+}, testInfo) => {
+	test.skip(
+		testInfo.project.name !== "responsive-desktop",
+		"Modifier-key collection selection is exercised with a desktop keyboard.",
+	);
+	await page.setViewportSize({ width: 1600, height: 900 });
+	await page.goto(v2SourcePath);
+	await waitForAppHydration(page);
+
+	const mediaItems = page.locator("[data-media-id]");
+	await expect(mediaItems.nth(4)).toBeVisible();
+	const bulkActions = page.getByTestId("bulk-actions-bar");
+
+	await mediaItems.nth(0).click({ modifiers: ["Control"] });
+	await expect(bulkActions).toContainText("1 件選択中");
+	await mediaItems.nth(2).click({ modifiers: ["Control"] });
+	await expect(bulkActions).toContainText("2 件選択中");
+	await mediaItems.nth(4).click({ modifiers: ["Shift"] });
+	await expect(bulkActions).toContainText("3 件選択中");
+});
+
+test("V2 global search keeps collection selection independent from preview", async ({
+	page,
+}, testInfo) => {
+	test.skip(
+		testInfo.project.name !== "responsive-desktop",
+		"Modifier-key collection selection is exercised with a desktop keyboard.",
+	);
+	await page.setViewportSize({ width: 1600, height: 900 });
+	await openV2Search(page);
+
+	const mediaItems = page.locator("[data-media-id]");
+	await expect(mediaItems.nth(1)).toBeVisible();
+	const bulkActions = page.getByTestId("search-bulk-actions-bar");
+
+	await mediaItems.nth(0).click({ modifiers: ["Control"] });
+	await expect(bulkActions).toContainText("1 件選択中");
+	await mediaItems.nth(1).click({ modifiers: ["Shift"] });
+	await expect(bulkActions).toContainText("2 件選択中");
+});
+
+test("V2 fine-pointer collection separates selection from opening detail", async ({
+	page,
+}, testInfo) => {
+	test.skip(
+		testInfo.project.name !== "responsive-desktop",
+		"The selection-preview contract is specific to a desktop fine pointer.",
+	);
+	await page.setViewportSize({ width: 1600, height: 900 });
+	await openV2Search(page);
+
+	const similarMedia = page.locator(
+		`[data-media-id="${E2E_SIMILAR_MEDIA_ID}"]`,
+	);
+	await similarMedia.click();
+	await expect(page).toHaveURL(/\/v2\/search(?:\?.*)?$/);
+	await expect(similarMedia).toHaveAttribute("aria-pressed", "true");
+	const inspector = page.getByRole("complementary", {
+		name: "選択中のメディア",
+	});
+	await expect(inspector).toContainText(E2E_SIMILAR_FILE_NAME);
+
+	await similarMedia.dblclick();
+	await expect(page).toHaveURL(v2MediaPath(E2E_SIMILAR_MEDIA_ID));
+	await expect(
+		page.locator(
+			`[data-media-viewer] img[alt="${E2E_SIMILAR_FILE_NAME}"]`,
+		),
+	).toBeVisible();
+
+	await page.goBack();
+	await expect(page).toHaveURL(/\/v2\/search(?:\?.*)?$/);
+	const primaryMedia = page.locator(
+		`[data-media-id="${E2E_PRIMARY_MEDIA_ID}"]`,
+	);
+	await expect(primaryMedia).toBeVisible();
+	await primaryMedia.focus();
+	await page.keyboard.press("Enter");
+	await expect(page).toHaveURL(v2MediaPath(E2E_PRIMARY_MEDIA_ID));
+});
+
+test("V2 detail exposes zoom controls and non-destructive action choices", async ({
+	page,
+}) => {
+	await page.goto(v2MediaPath(E2E_PRIMARY_MEDIA_ID));
+	await waitForAppHydration(page);
+	await expect(
+		page.getByRole("img", { name: E2E_PRIMARY_FILE_NAME, exact: true }),
+	).toBeVisible();
+
+	const zoomControls = page.getByRole("toolbar", {
+		name: "Image zoom controls",
+	});
+	const resetZoom = zoomControls.getByRole("button", {
+		name: "Reset zoom to fit",
+	});
+	await expect(zoomControls).toBeVisible();
+	await expect(resetZoom).toContainText("100%");
+	await zoomControls.getByRole("button", { name: "Zoom in" }).click();
+	await expect(resetZoom).toContainText("125%");
+	await resetZoom.click();
+	await expect(resetZoom).toContainText("100%");
+
+	const moreActions = page.getByRole("button", {
+		name: "More actions",
+		exact: true,
+	});
+	await moreActions.scrollIntoViewIfNeeded();
+	await moreActions.click();
+	await expect(
+		page.getByRole("button", { name: "Download original", exact: true }),
+	).toBeVisible();
+	await expect(
+		page.getByRole("button", { name: "Delete media…", exact: true }),
+	).toBeVisible();
+});
+
+test("V2 settings exposes device-local shortcut configuration", async ({
+	page,
+}) => {
+	await page.goto("/v2/config");
+	await waitForAppHydration(page);
+
+	await page.getByRole("tab", { name: /^Shortcuts\b/ }).click();
+	await expect(
+		page.getByRole("heading", { name: "Keyboard shortcuts", exact: true }),
+	).toBeVisible();
+	await expect(
+		page.getByLabel("Command palette", { exact: true }),
+	).toBeVisible();
+	await expect(
+		page.getByRole("button", { name: "Reset all", exact: true }),
+	).toBeVisible();
+});
diff --git a/apps/tauri/src/routes/__root.tsx b/apps/tauri/src/routes/__root.tsx
index 9f4270b9..75f82217 100644
--- a/apps/tauri/src/routes/__root.tsx
+++ b/apps/tauri/src/routes/__root.tsx
@@ -1,5 +1,6 @@
 import { AppShell } from "@solid-imager/ui/layouts/app-shell";
 import { RouteTransitionIndicator } from "@solid-imager/ui/router-status";
+import { ShortcutPreferencesProvider } from "@solid-imager/ui/shortcuts/index";
 import { Toaster } from "@solid-imager/ui/toast";
 import { createRootRouteWithContext, Outlet } from "@tanstack/solid-router";
 import { Nav } from "~/components/nav";
@@ -11,11 +12,11 @@ export const Route = createRootRouteWithContext<AppRouterContext>()({
 
 function RootRouteComponent() {
 	return (
-		<>
+		<ShortcutPreferencesProvider>
 			<Toaster />
 			<AppShell nav={<Nav />} statusIndicator={<RouteTransitionIndicator />}>
 				<Outlet />
 			</AppShell>
-		</>
+		</ShortcutPreferencesProvider>
 	);
 }
diff --git a/bun.lock b/bun.lock
index 772a2f89..ccc15776 100644
--- a/bun.lock
+++ b/bun.lock
@@ -222,6 +222,7 @@
         "@solid-imager/core": "workspace:*",
         "@solidjs/router": "^0.16.1",
         "@tanstack/solid-form": "^1.33.0",
+        "@tanstack/solid-hotkeys": "0.10.0",
         "@tanstack/solid-query": "5.99.2",
         "@tanstack/solid-router": "1.170.16",
         "@tanstack/solid-virtual": "^3.13.26",
@@ -761,6 +762,8 @@
 
     "@tanstack/history": ["@tanstack/history@1.162.0", "", {}, "sha512-79pf/RkhteYZTRgcR4F9kbk84P2N8rugQJswxfIqovlbRiT3yI7eBE+5QorIrZaOKktsgzRlXh1l/du/xpl4iA=="],
 
+    "@tanstack/hotkeys": ["@tanstack/hotkeys@0.8.0", "", { "dependencies": { "@tanstack/store": "^0.11.0" } }, "sha512-vqH7X9nb0MTJ/O08++dB5bP9jgj4+BIPOUu/U+6myG86lDsirZSVSobpq5UQpE7nBuk62i8eIYeOhd+OMl/UrA=="],
+
     "@tanstack/pacer-lite": ["@tanstack/pacer-lite@0.2.2", "", {}, "sha512-eQ1MyLKCHyXiH7NbdmB80W77OhiMgGBUb+qDx/8WMGbwg5Lf/NlfD0TfNYAqY77i8V3AxoDoYdICrQE5ADw4Yw=="],
 
     "@tanstack/query-core": ["@tanstack/query-core@5.99.2", "", {}, "sha512-1HunU0bXVsR1ZJMZbcOPE6VtaBJxsW809RE9xPe4Gz7MlB0GWwQvuTPhMoEmQ/hIzFKJ/DWAuttIe7BOaWx0tA=="],
@@ -783,6 +786,8 @@
 
     "@tanstack/solid-form": ["@tanstack/solid-form@1.33.0", "", { "dependencies": { "@tanstack/form-core": "1.33.0", "@tanstack/solid-store": "^0.11.0" }, "peerDependencies": { "solid-js": ">=1.9.9" } }, "sha512-+KXp+T/fD+nO5JarDj1W5GctEm4aFuz13DkHVJrdIHGo0evMXlFNWJT57n+TOyvoLoKehknKjM1o41rrKClSTQ=="],
 
+    "@tanstack/solid-hotkeys": ["@tanstack/solid-hotkeys@0.10.0", "", { "dependencies": { "@tanstack/hotkeys": "0.8.0", "@tanstack/solid-store": "^0.11.0" }, "peerDependencies": { "solid-js": ">=1.7.0" } }, "sha512-jThxkZMt1ShaQ/ynvyzHfwdbl15gTxJWXnQtbHuRHrzYFvuBB5fx4+D0jKQJ3sSq6XN3HwB3f9cVI0na5rN+Bw=="],
+
     "@tanstack/solid-query": ["@tanstack/solid-query@5.99.2", "", { "dependencies": { "@tanstack/query-core": "5.99.2" }, "peerDependencies": { "solid-js": "^1.6.0" } }, "sha512-0jvYCCedwLI/r3Gd2T/uIFrosvw9UoO0M7d81IVqNBtn8dTMu3obSqcJuOH436za3MDxodPSs45jC2qKXrbsqQ=="],
 
     "@tanstack/solid-router": ["@tanstack/solid-router@1.170.16", "", { "dependencies": { "@solid-primitives/refs": "^1.0.8", "@solidjs/meta": "^0.29.4", "@tanstack/history": "1.162.0", "@tanstack/router-core": "1.171.13", "isbot": "^5.1.22" }, "peerDependencies": { "solid-js": "^1.9.10" } }, "sha512-CH8iZbBDC9U7t3UMZPBRo+fHDHBtDWvEnGO809U54gs+CMCUXVO7DoSBWIf+5QoT80fc4+Ck4hqRPFBT+W2GwQ=="],
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 29672cd2..dba7dfcc 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,6 +18,7 @@
     "@solid-imager/core": "workspace:*",
     "@solidjs/router": "^0.16.1",
     "@tanstack/solid-form": "^1.33.0",
+    "@tanstack/solid-hotkeys": "0.10.0",
     "@tanstack/solid-query": "5.99.2",
     "@tanstack/solid-router": "1.170.16",
     "@tanstack/solid-virtual": "^3.13.26",
diff --git a/packages/ui/src/command.tsx b/packages/ui/src/command.tsx
index 3da9dffc..86758657 100644
--- a/packages/ui/src/command.tsx
+++ b/packages/ui/src/command.tsx
@@ -7,7 +7,12 @@ import type {
 	VoidProps,
 } from "solid-js";
 import { splitProps } from "solid-js";
-import { Dialog, DialogContent } from "./dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogTitle,
+} from "./dialog";
 import { cn } from "./utils/cn";
 
 const Command: Component<ParentProps<CommandPrimitive.CommandRootProps>> = (
@@ -26,12 +31,29 @@ const Command: Component<ParentProps<CommandPrimitive.CommandRootProps>> = (
 	);
 };
 
-const CommandDialog: Component<ParentProps<DialogRootProps>> = (props) => {
-	const [local, others] = splitProps(props, ["children"]);
+type CommandDialogProps = ParentProps<
+	DialogRootProps & {
+		description?: string;
+		title?: string;
+	}
+>;
+
+const CommandDialog: Component<CommandDialogProps> = (props) => {
+	const [local, others] = splitProps(props, [
+		"children",
+		"description",
+		"title",
+	]);
 
 	return (
 		<Dialog {...others}>
 			<DialogContent class="overflow-hidden p-0">
+				<DialogTitle class="sr-only">
+					{local.title ?? "Choose an action"}
+				</DialogTitle>
+				<DialogDescription class="sr-only">
+					{local.description ?? "Type to filter the available actions."}
+				</DialogDescription>
 				<Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
 					{local.children}
 				</Command>
diff --git a/packages/ui/src/hooks/use-media-collection-selection.test.ts b/packages/ui/src/hooks/use-media-collection-selection.test.ts
new file mode 100644
index 00000000..063ca43c
--- /dev/null
+++ b/packages/ui/src/hooks/use-media-collection-selection.test.ts
@@ -0,0 +1,143 @@
+import { describe, expect, it } from "vitest";
+import {
+	createEmptyMediaCollectionSelectionState,
+	type MediaCollectionSelectionMode,
+	type MediaCollectionSelectionState,
+	reduceMediaCollectionSelection,
+} from "./use-media-collection-selection";
+
+const visibleIds = ["one", "two", "three", "four", "five", "six"] as const;
+
+function select(
+	state: MediaCollectionSelectionState,
+	id: (typeof visibleIds)[number],
+	mode: MediaCollectionSelectionMode = "replace",
+): MediaCollectionSelectionState {
+	return reduceMediaCollectionSelection(
+		state,
+		{ type: "select", id, mode },
+		visibleIds,
+	);
+}
+
+function expectSelection(
+	state: MediaCollectionSelectionState,
+	ids: readonly string[],
+): void {
+	expect([...state.selectedIds]).toEqual(ids);
+}
+
+describe("media collection selection", () => {
+	it("plain selection replaces the selection and establishes every cursor", () => {
+		let state = createEmptyMediaCollectionSelectionState();
+		state = select(state, "one", "toggle");
+		state = select(state, "three");
+
+		expectSelection(state, ["three"]);
+		expect(state.activeId).toBe("three");
+		expect(state.anchorId).toBe("three");
+		expect(state.focusedId).toBe("three");
+	});
+
+	it("Mod-style toggle adds and removes without mutating an earlier Set", () => {
+		let state = select(createEmptyMediaCollectionSelectionState(), "one");
+		const earlierSelectedIds = state.selectedIds;
+
+		state = select(state, "three", "toggle");
+		expectSelection(state, ["one", "three"]);
+		expect([...earlierSelectedIds]).toEqual(["one"]);
+		expect(state.activeId).toBe("three");
+
+		state = select(state, "three", "toggle");
+		expectSelection(state, ["one"]);
+		expect(state.activeId).toBe("one");
+		expect(state.anchorId).toBe("three");
+		expect(state.focusedId).toBe("three");
+	});
+
+	it("Shift-style range replaces selection from the stable anchor", () => {
+		let state = select(createEmptyMediaCollectionSelectionState(), "two");
+		state = select(state, "five", "range");
+
+		expectSelection(state, ["two", "three", "four", "five"]);
+		expect(state.activeId).toBe("five");
+		expect(state.anchorId).toBe("two");
+		expect(state.focusedId).toBe("five");
+	});
+
+	it("Mod+Shift-style range adds to the existing selection", () => {
+		let state = select(createEmptyMediaCollectionSelectionState(), "two");
+		state = select(state, "six", "toggle");
+		state = select(state, "four", "additive-range");
+
+		expectSelection(state, ["two", "six", "four", "five"]);
+		expect(state.anchorId).toBe("six");
+		expect(state.activeId).toBe("four");
+	});
+
+	it("selects every visible ID and clears all selection cursors", () => {
+		let state = reduceMediaCollectionSelection(
+			createEmptyMediaCollectionSelectionState(),
+			{ type: "select-all" },
+			visibleIds,
+		);
+		expectSelection(state, visibleIds);
+		expect(state.activeId).toBe("one");
+
+		state = reduceMediaCollectionSelection(
+			state,
+			{ type: "clear" },
+			visibleIds,
+		);
+		expectSelection(state, []);
+		expect(state.activeId).toBeNull();
+		expect(state.anchorId).toBeNull();
+		expect(state.focusedId).toBeNull();
+	});
+
+	it("retains selection cursors when visible IDs are only reordered", () => {
+		let state = select(createEmptyMediaCollectionSelectionState(), "one");
+		state = select(state, "three", "toggle");
+		const reconciled = reduceMediaCollectionSelection(
+			state,
+			{ type: "reconcile" },
+			["three", "two", "one"],
+		);
+
+		expect(reconciled).toBe(state);
+		expectSelection(reconciled, ["one", "three"]);
+		expect(reconciled.activeId).toBe("three");
+		expect(reconciled.anchorId).toBe("three");
+		expect(reconciled.focusedId).toBe("three");
+	});
+
+	it("drops filtered-out IDs and repairs cursors from visible order", () => {
+		let state = select(createEmptyMediaCollectionSelectionState(), "one");
+		state = select(state, "three", "toggle");
+		state = reduceMediaCollectionSelection(state, { type: "reconcile" }, [
+			"two",
+			"one",
+			"four",
+		]);
+
+		expectSelection(state, ["one"]);
+		expect(state.activeId).toBe("one");
+		expect(state.anchorId).toBe("one");
+		expect(state.focusedId).toBe("one");
+	});
+
+	it("removes a deleted active item and promotes the next visible selection", () => {
+		let state = select(createEmptyMediaCollectionSelectionState(), "three");
+		state = select(state, "two", "toggle");
+		state = reduceMediaCollectionSelection(state, { type: "reconcile" }, [
+			"one",
+			"three",
+			"four",
+		]);
+
+		expectSelection(state, ["three"]);
+		expect(state.activeId).toBe("three");
+		expect(state.anchorId).toBe("three");
+		expect(state.focusedId).toBe("three");
+	});
+});
diff --git a/packages/ui/src/hooks/use-media-collection-selection.ts b/packages/ui/src/hooks/use-media-collection-selection.ts
new file mode 100644
index 00000000..b5f06e95
--- /dev/null
+++ b/packages/ui/src/hooks/use-media-collection-selection.ts
@@ -0,0 +1,350 @@
+import { type Accessor, createEffect, createSignal } from "solid-js";
+
+export type MediaCollectionSelectionState<Id extends string = string> = {
+	readonly selectedIds: ReadonlySet<Id>;
+	readonly activeId: Id | null;
+	readonly anchorId: Id | null;
+	readonly focusedId: Id | null;
+};
+
+/**
+ * A semantic selection intent. UI adapters can translate pointer or keyboard
+ * modifiers into one of these values without coupling this controller to DOM
+ * event types.
+ */
+export type MediaCollectionSelectionMode =
+	| "replace"
+	| "toggle"
+	| "range"
+	| "additive-range";
+
+export type HiddenSelectionPolicy = "remove" | "preserve";
+
+export type MediaCollectionSelectionAction<Id extends string = string> =
+	| {
+			type: "select";
+			id: Id;
+			mode?: MediaCollectionSelectionMode;
+	  }
+	| { type: "select-all" }
+	| { type: "clear" }
+	| { type: "focus"; id: Id | null }
+	| { type: "reconcile" };
+
+export type MediaCollectionSelectionReducerOptions = {
+	hiddenSelectionPolicy?: HiddenSelectionPolicy;
+};
+
+export type MediaCollectionSelectionOptions<Id extends string = string> =
+	MediaCollectionSelectionReducerOptions & {
+		initialState?: MediaCollectionSelectionState<Id>;
+	};
+
+export type MediaCollectionSelectionController<Id extends string = string> = {
+	readonly state: Accessor<MediaCollectionSelectionState<Id>>;
+	readonly selectedIds: Accessor<ReadonlySet<Id>>;
+	readonly activeId: Accessor<Id | null>;
+	readonly anchorId: Accessor<Id | null>;
+	readonly focusedId: Accessor<Id | null>;
+	readonly isSelected: (id: Id) => boolean;
+	readonly select: (id: Id, mode?: MediaCollectionSelectionMode) => void;
+	readonly selectAll: () => void;
+	readonly clear: () => void;
+	readonly setFocusedId: (id: Id | null) => void;
+	readonly reconcile: () => void;
+	readonly dispatch: (action: MediaCollectionSelectionAction<Id>) => void;
+};
+
+export function createEmptyMediaCollectionSelectionState<
+	Id extends string = string,
+>(): MediaCollectionSelectionState<Id> {
+	return {
+		selectedIds: new Set<Id>(),
+		activeId: null,
+		anchorId: null,
+		focusedId: null,
+	};
+}
+
+function getOrderedUniqueIds<Id extends string>(
+	visibleIds: readonly Id[],
+): readonly Id[] {
+	return [...new Set(visibleIds)];
+}
+
+function areSetsEqual<Id extends string>(
+	left: ReadonlySet<Id>,
+	right: ReadonlySet<Id>,
+): boolean {
+	if (left.size !== right.size) {
+		return false;
+	}
+	for (const id of left) {
+		if (!right.has(id)) {
+			return false;
+		}
+	}
+	return true;
+}
+
+function createNextState<Id extends string>(
+	previous: MediaCollectionSelectionState<Id>,
+	next: MediaCollectionSelectionState<Id>,
+): MediaCollectionSelectionState<Id> {
+	if (
+		previous.activeId === next.activeId &&
+		previous.anchorId === next.anchorId &&
+		previous.focusedId === next.focusedId &&
+		areSetsEqual(previous.selectedIds, next.selectedIds)
+	) {
+		return previous;
+	}
+	return next;
+}
+
+function getFirstSelectedId<Id extends string>(
+	visibleIds: readonly Id[],
+	selectedIds: ReadonlySet<Id>,
+): Id | null {
+	return visibleIds.find((id) => selectedIds.has(id)) ?? null;
+}
+
+function getVisibleSelection<Id extends string>(
+	selectedIds: ReadonlySet<Id>,
+	visibleIds: readonly Id[],
+): Set<Id> {
+	const visibleIdSet = new Set(visibleIds);
+	return new Set([...selectedIds].filter((id) => visibleIdSet.has(id)));
+}
+
+/**
+ * Removes selection state that no longer belongs to the current ordered
+ * collection. Reordering alone retains all four selection cursors.
+ */
+export function reconcileMediaCollectionSelection<Id extends string>(
+	state: MediaCollectionSelectionState<Id>,
+	visibleIds: readonly Id[],
+	options: MediaCollectionSelectionReducerOptions = {},
+): MediaCollectionSelectionState<Id> {
+	if (options.hiddenSelectionPolicy === "preserve") {
+		return state;
+	}
+
+	const orderedIds = getOrderedUniqueIds(visibleIds);
+	const visibleIdSet = new Set(orderedIds);
+	const selectedIds = getVisibleSelection(state.selectedIds, orderedIds);
+	const activeId =
+		state.activeId !== null && selectedIds.has(state.activeId)
+			? state.activeId
+			: getFirstSelectedId(orderedIds, selectedIds);
+	const focusedId =
+		state.focusedId !== null && visibleIdSet.has(state.focusedId)
+			? state.focusedId
+			: activeId;
+	const anchorId =
+		state.anchorId !== null && visibleIdSet.has(state.anchorId)
+			? state.anchorId
+			: activeId;
+
+	return createNextState(state, {
+		selectedIds,
+		activeId,
+		anchorId,
+		focusedId,
+	});
+}
+
+function selectRange<Id extends string>(
+	state: MediaCollectionSelectionState<Id>,
+	id: Id,
+	visibleIds: readonly Id[],
+	additive: boolean,
+	hiddenSelectionPolicy: HiddenSelectionPolicy,
+): MediaCollectionSelectionState<Id> {
+	const anchorId =
+		state.anchorId !== null && visibleIds.includes(state.anchorId)
+			? state.anchorId
+			: id;
+	const anchorIndex = visibleIds.indexOf(anchorId);
+	const targetIndex = visibleIds.indexOf(id);
+	const rangeStart = Math.min(anchorIndex, targetIndex);
+	const rangeEnd = Math.max(anchorIndex, targetIndex);
+	const rangeIds = visibleIds.slice(rangeStart, rangeEnd + 1);
+	const previousSelectedIds =
+		hiddenSelectionPolicy === "preserve"
+			? state.selectedIds
+			: getVisibleSelection(state.selectedIds, visibleIds);
+	const selectedIds = new Set(
+		additive ? [...previousSelectedIds, ...rangeIds] : rangeIds,
+	);
+
+	return createNextState(state, {
+		selectedIds,
+		activeId: id,
+		anchorId,
+		focusedId: id,
+	});
+}
+
+/** Pure selection reducer. The ordered visible IDs define range order. */
+export function reduceMediaCollectionSelection<Id extends string>(
+	state: MediaCollectionSelectionState<Id>,
+	action: MediaCollectionSelectionAction<Id>,
+	visibleIds: readonly Id[],
+	options: MediaCollectionSelectionReducerOptions = {},
+): MediaCollectionSelectionState<Id> {
+	const orderedIds = getOrderedUniqueIds(visibleIds);
+	const visibleIdSet = new Set(orderedIds);
+	const hiddenSelectionPolicy = options.hiddenSelectionPolicy ?? "remove";
+
+	switch (action.type) {
+		case "clear":
+			return createNextState(state, createEmptyMediaCollectionSelectionState());
+		case "reconcile":
+			return reconcileMediaCollectionSelection(state, orderedIds, options);
+		case "focus": {
+			const focusedId =
+				action.id !== null && visibleIdSet.has(action.id) ? action.id : null;
+			return createNextState(state, { ...state, focusedId });
+		}
+		case "select-all": {
+			if (orderedIds.length === 0) {
+				return createNextState(
+					state,
+					createEmptyMediaCollectionSelectionState(),
+				);
+			}
+			const selectedIds = new Set(
+				hiddenSelectionPolicy === "preserve"
+					? [...state.selectedIds, ...orderedIds]
+					: orderedIds,
+			);
+			const activeId =
+				state.activeId !== null && visibleIdSet.has(state.activeId)
+					? state.activeId
+					: orderedIds[0];
+			const focusedId =
+				state.focusedId !== null && visibleIdSet.has(state.focusedId)
+					? state.focusedId
+					: activeId;
+			const anchorId =
+				state.anchorId !== null && visibleIdSet.has(state.anchorId)
+					? state.anchorId
+					: activeId;
+			return createNextState(state, {
+				selectedIds,
+				activeId,
+				anchorId,
+				focusedId,
+			});
+		}
+		case "select": {
+			if (!visibleIdSet.has(action.id)) {
+				return reconcileMediaCollectionSelection(state, orderedIds, options);
+			}
+
+			const mode = action.mode ?? "replace";
+			if (mode === "range" || mode === "additive-range") {
+				return selectRange(
+					state,
+					action.id,
+					orderedIds,
+					mode === "additive-range",
+					hiddenSelectionPolicy,
+				);
+			}
+
+			if (mode === "toggle") {
+				const previousSelectedIds =
+					hiddenSelectionPolicy === "preserve"
+						? state.selectedIds
+						: getVisibleSelection(state.selectedIds, orderedIds);
+				const wasSelected = previousSelectedIds.has(action.id);
+				const selectedIds = new Set(
+					wasSelected
+						? [...previousSelectedIds].filter((id) => id !== action.id)
+						: [...previousSelectedIds, action.id],
+				);
+				const retainedActiveId =
+					state.activeId !== action.id &&
+					state.activeId !== null &&
+					selectedIds.has(state.activeId)
+						? state.activeId
+						: null;
+				const activeId = wasSelected
+					? (retainedActiveId ?? getFirstSelectedId(orderedIds, selectedIds))
+					: action.id;
+				return createNextState(state, {
+					selectedIds,
+					activeId,
+					anchorId: action.id,
+					focusedId: action.id,
+				});
+			}
+
+			return createNextState(state, {
+				selectedIds: new Set([action.id]),
+				activeId: action.id,
+				anchorId: action.id,
+				focusedId: action.id,
+			});
+		}
+	}
+}
+
+/**
+ * Solid controller around the pure reducer. It contains no browser globals,
+ * so it is safe to create during SSR.
+ */
+export function useMediaCollectionSelection<Id extends string>(
+	visibleIds: Accessor<readonly Id[]>,
+	options: MediaCollectionSelectionOptions<Id> = {},
+): MediaCollectionSelectionController<Id> {
+	const reducerOptions: MediaCollectionSelectionReducerOptions = {
+		hiddenSelectionPolicy: options.hiddenSelectionPolicy ?? "remove",
+	};
+	const initialState = reconcileMediaCollectionSelection(
+		options.initialState ?? createEmptyMediaCollectionSelectionState<Id>(),
+		visibleIds(),
+		reducerOptions,
+	);
+	const [state, setState] = createSignal(initialState);
+
+	const dispatch = (action: MediaCollectionSelectionAction<Id>): void => {
+		setState((current) =>
+			reduceMediaCollectionSelection(
+				current,
+				action,
+				visibleIds(),
+				reducerOptions,
+			),
+		);
+	};
+
+	createEffect(() => {
+		const currentVisibleIds = visibleIds();
+		setState((current) =>
+			reduceMediaCollectionSelection(
+				current,
+				{ type: "reconcile" },
+				currentVisibleIds,
+				reducerOptions,
+			),
+		);
+	});
+
+	return {
+		state,
+		selectedIds: () => state().selectedIds,
+		activeId: () => state().activeId,
+		anchorId: () => state().anchorId,
+		focusedId: () => state().focusedId,
+		isSelected: (id) => state().selectedIds.has(id),
+		select: (id, mode = "replace") => dispatch({ type: "select", id, mode }),
+		selectAll: () => dispatch({ type: "select-all" }),
+		clear: () => dispatch({ type: "clear" }),
+		setFocusedId: (id) => dispatch({ type: "focus", id }),
+		reconcile: () => dispatch({ type: "reconcile" }),
+		dispatch,
+	};
+}
diff --git a/packages/ui/src/hooks/use-source-media-page.ts b/packages/ui/src/hooks/use-source-media-page.ts
index fe75575e..66ad5237 100644
--- a/packages/ui/src/hooks/use-source-media-page.ts
+++ b/packages/ui/src/hooks/use-source-media-page.ts
@@ -798,8 +798,12 @@ export function useSourceMediaPage(
 				item.getAsString((str) => resolve(str));
 			});
 
-			if (text && z.string().url().safeParse(text).success) {
-				setPastedUrl(text);
+			const normalizedText = text?.trim();
+			if (
+				normalizedText &&
+				z.string().url().safeParse(normalizedText).success
+			) {
+				setPastedUrl(normalizedText);
 				setShowUploadModal(true);
 				e.preventDefault();
 				return true;
@@ -828,6 +832,15 @@ export function useSourceMediaPage(
 	};
 
 	const handlePaste = async (e: ClipboardEvent) => {
+		const target = e.target;
+		if (
+			e.defaultPrevented ||
+			(target instanceof Element &&
+				(target.closest("input, textarea, select, [contenteditable]") ||
+					target.closest("[role='textbox']")))
+		) {
+			return;
+		}
 		if (!e.clipboardData?.items) {
 			return;
 		}
diff --git a/packages/ui/src/screens/search-screen.types.ts b/packages/ui/src/screens/search-screen.types.ts
index 566d9b2a..ebe303d2 100644
--- a/packages/ui/src/screens/search-screen.types.ts
+++ b/packages/ui/src/screens/search-screen.types.ts
@@ -9,9 +9,14 @@ import type { MediaGridImageLoadPolicy } from "../media-grid-item";
 
 export type SearchMediaItemOptions = {
 	imageLoadPolicy?: MediaGridImageLoadPolicy;
+	isBulkSelectMode?: boolean;
+	isSelected?: boolean;
 	isPreviewSelected?: boolean;
+	onOpenMediaDetail?: () => void;
 	onPrepareMediaDetail?: () => void;
 	onPreviewSelect?: () => void;
+	onSelectGesture?: (event: MouseEvent | KeyboardEvent) => void;
+	onToggleSelect?: () => void;
 	priority?: boolean;
 };
 
diff --git a/packages/ui/src/screens/source-media-screen.types.ts b/packages/ui/src/screens/source-media-screen.types.ts
index 54f8c4b9..b6670947 100644
--- a/packages/ui/src/screens/source-media-screen.types.ts
+++ b/packages/ui/src/screens/source-media-screen.types.ts
@@ -1,5 +1,6 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
 import type { Component, JSX } from "solid-js";
+import type { MediaCollectionSelectionMode } from "../hooks/use-media-collection-selection";
 import type {
 	UploadOptions,
 	UseSourceMediaPageResult,
@@ -25,6 +26,7 @@ export type SourceMediaScreenProps = {
 	onOpenMediaDetail?: (media: Media, context?: Media[]) => void;
 	onPrepareMediaDetail?: (media: Media, context?: Media[]) => void;
 	onRetryFilters: () => void | Promise<void>;
+	onSelectMedia?: (mediaId: string, mode: MediaCollectionSelectionMode) => void;
 	onToggleSelect?: (mediaId: string) => void;
 	page: UseSourceMediaPageResult;
 	renderActions: (props: { onOpenMobileFilters: () => void }) => JSX.Element;
@@ -36,8 +38,10 @@ export type SourceMediaScreenProps = {
 			isPreviewSelected?: boolean;
 			isSelected?: boolean;
 			onContextMenu: () => void;
+			onOpenMediaDetail?: () => void;
 			onPrepareMediaDetail?: () => void;
 			onPreviewSelect?: () => void;
+			onSelectGesture?: (event: MouseEvent | KeyboardEvent) => void;
 			priority?: boolean;
 		},
 	) => JSX.Element;
diff --git a/packages/ui/src/screens/v2-config-screen.tsx b/packages/ui/src/screens/v2-config-screen.tsx
index b338d091..7e1b3765 100644
--- a/packages/ui/src/screens/v2-config-screen.tsx
+++ b/packages/ui/src/screens/v2-config-screen.tsx
@@ -9,6 +9,7 @@ import BriefcaseBusiness from "lucide-solid/icons/briefcase-business";
 import DownloadCloud from "lucide-solid/icons/cloud-download";
 import HardDrive from "lucide-solid/icons/hard-drive";
 import Image from "lucide-solid/icons/image";
+import Keyboard from "lucide-solid/icons/keyboard";
 import Logs from "lucide-solid/icons/logs";
 import { createEffect, createSignal, For, Show } from "solid-js";
 import type { z } from "zod";
@@ -31,6 +32,7 @@ import {
 import { InferenceDeviceFields } from "../inference-device-fields";
 import { Input } from "../input";
 import { Label } from "../label";
+import { ShortcutSettingsPanel } from "../shortcuts/shortcut-settings-panel";
 import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from "../switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
 import { Textarea } from "../textarea";
@@ -68,6 +70,12 @@ const SETTINGS_CATEGORIES = [
 		label: "Media",
 		value: "media",
 	},
+	{
+		description: "この端末のキー操作",
+		icon: Keyboard,
+		label: "Shortcuts",
+		value: "shortcuts",
+	},
 	{ description: "出力レベル", icon: Logs, label: "Logging", value: "logging" },
 ] as const;
 
@@ -698,6 +706,13 @@ export function V2ConfigScreen(props: V2ConfigScreenProps) {
 							</form.Field>
 						</div>
 					</TabsContent>
+
+					<TabsContent value="shortcuts">
+						<ShortcutSettingsPanel
+							description="Record a new key combination, disable an action, or restore defaults. Changes are saved immediately in this browser or desktop app and are not part of the server configuration."
+							title="Keyboard shortcuts"
+						/>
+					</TabsContent>
 				</div>
 			</Tabs>
 			<form.Subscribe
diff --git a/packages/ui/src/screens/v2-search-screen.tsx b/packages/ui/src/screens/v2-search-screen.tsx
index ba30f125..cd8fbca0 100644
--- a/packages/ui/src/screens/v2-search-screen.tsx
+++ b/packages/ui/src/screens/v2-search-screen.tsx
@@ -1,5 +1,7 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
-import { createSignal, onMount, Show } from "solid-js";
+import { createEffect, createSignal, onMount, Show } from "solid-js";
+import { Button } from "../button";
+import type { MediaCollectionSelectionMode } from "../hooks/use-media-collection-selection";
 import { FilterErrorBanner, QueryStatus } from "../async-state";
 import { LoadingRegion, MediaGridSkeleton } from "../skeleton";
 import {
@@ -7,18 +9,33 @@ import {
 	type SourceMediaViewMode,
 } from "../source-media-grid";
 import { V2CollectionInspector } from "../v2/collection-inspector";
+import { reconcileCollectionPreviewId } from "../v2/collection-navigation";
 import { V2SearchToolbar } from "../v2/search-toolbar";
 import type { SearchWorkspaceProps } from "./search-screen.types";
 
 export type V2SearchScreenProps = SearchWorkspaceProps & {
+	isBulkSelectMode?: () => boolean;
+	isSelected?: (mediaId: string) => boolean;
+	onClearSelection?: () => void;
 	onOpenMediaDetail?: (media: Media, context?: Media[]) => void;
 	onPrepareMediaDetail?: (media: Media, context?: Media[]) => void;
+	onSelectAll?: () => void;
+	onSelectMedia?: (
+		mediaId: string,
+		mode: MediaCollectionSelectionMode,
+	) => void;
+	onToggleSelect?: (mediaId: string) => void;
+	onVisibleMediaIdsChange?: (mediaIds: readonly string[]) => void;
 	renderMediaPreview?: (media: Media) => import("solid-js").JSX.Element;
+	selectedCount?: () => number;
 };
 
+const V2_SEARCH_VIEW_MODE_KEY = "solid-imager:v2:search:view-mode";
+
 export function V2SearchScreen(props: V2SearchScreenProps) {
 	const [isMounted, setIsMounted] = createSignal(false);
 	const [previewMediaId, setPreviewMediaId] = createSignal<string | null>(null);
+	const [isInspectorVisible, setIsInspectorVisible] = createSignal(true);
 	const [viewMode, setViewMode] = createSignal<SourceMediaViewMode>("grid");
 	const page = () => props.page;
 	const filterStates = () => [
@@ -42,8 +59,42 @@ export function V2SearchScreen(props: V2SearchScreenProps) {
 			?.name;
 	const openMediaDetail = (media: Media) =>
 		props.onOpenMediaDetail?.(media, page().searchResults());
+	const selectPreviewMedia = (media: Media) => {
+		setPreviewMediaId(media.id);
+		setIsInspectorVisible(true);
+	};
+	const updateViewMode = (mode: SourceMediaViewMode) => {
+		setViewMode(mode);
+		try {
+			localStorage.setItem(V2_SEARCH_VIEW_MODE_KEY, mode);
+		} catch {
+			// Storage can be unavailable in hardened browser contexts.
+		}
+	};
+	createEffect(() => {
+		props.onVisibleMediaIdsChange?.(
+			page().searchResults().map((media) => media.id),
+		);
+	});
+
+	createEffect(() => {
+		const nextId = props.renderMediaPreview
+			? reconcileCollectionPreviewId(page().searchResults(), previewMediaId())
+			: null;
+		if (nextId !== previewMediaId()) setPreviewMediaId(nextId);
+	});
 
-	onMount(() => setIsMounted(true));
+	onMount(() => {
+		setIsMounted(true);
+		try {
+			const storedMode = localStorage.getItem(V2_SEARCH_VIEW_MODE_KEY);
+			if (storedMode === "grid" || storedMode === "list") {
+				setViewMode(storedMode);
+			}
+		} catch {
+			// Keep the SSR-safe default when storage cannot be read.
+		}
+	});
 
 	return (
 		<section class="flex h-full min-h-0 min-w-0 flex-col bg-[var(--v2-canvas)]">
@@ -57,7 +108,7 @@ export function V2SearchScreen(props: V2SearchScreenProps) {
 				selectedSource={props.selectedSource ?? undefined}
 				sourceName={sourceName()}
 				sources={props.sources}
-				onViewModeChange={setViewMode}
+				onViewModeChange={updateViewMode}
 				viewMode={viewMode()}
 			/>
 			<div class="shrink-0 px-3 pt-3 sm:px-4">
@@ -87,7 +138,13 @@ export function V2SearchScreen(props: V2SearchScreenProps) {
 				class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3 sm:px-4 [scrollbar-gutter:stable]"
 				data-media-scroll="v2-search"
 			>
-				<div class="2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4">
+				<div
+					class={
+						props.renderMediaPreview && isInspectorVisible()
+							? "2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4"
+							: "2xl:grid 2xl:grid-cols-[minmax(0,1fr)] 2xl:items-start"
+					}
+				>
 					<div class="min-w-0">
 						<Show
 							fallback={
@@ -99,15 +156,19 @@ export function V2SearchScreen(props: V2SearchScreenProps) {
 						>
 							<SourceMediaGrid
 								detailBasePath="/v2/sources"
-								disableContextMenu
 								enableVirtualization={props.enableVirtualization}
 								errorTitle="検索結果を取得できませんでした"
 								hasNextPage={page().searchResultQuery.hasNextPage}
 								isFetchingNextPage={page().searchResultQuery.isFetchingNextPage}
 								itemAspectRatio={4 / 3}
+								isBulkSelectMode={props.isBulkSelectMode}
+								isSelected={props.isSelected}
 								mediaResults={page().searchResults}
 								mediaSourceId={() => undefined}
-								onOpenMediaDetail={openMediaDetail}
+								onClearSelection={props.onClearSelection}
+								onOpenMediaDetail={
+									props.onOpenMediaDetail ? openMediaDetail : undefined
+								}
 								onPrepareMediaDetail={(media) =>
 									props.onPrepareMediaDetail?.(media, page().searchResults())
 								}
@@ -115,8 +176,15 @@ export function V2SearchScreen(props: V2SearchScreenProps) {
 								onRetry={async () => {
 									await page().searchResultQuery.refetch();
 								}}
-								onPreviewSelect={(media) => setPreviewMediaId(media.id)}
-								previewSelectedMediaId={previewMediaId}
+								onSelectMedia={props.onSelectMedia}
+								onToggleSelect={props.onToggleSelect}
+								selectedCount={props.selectedCount}
+								onPreviewSelect={
+									props.renderMediaPreview ? selectPreviewMedia : undefined
+								}
+								previewSelectedMediaId={
+									props.renderMediaPreview ? previewMediaId : undefined
+								}
 								renderItem={(media, options) =>
 									props.renderMediaItem(media, options)
 								}
@@ -132,20 +200,49 @@ export function V2SearchScreen(props: V2SearchScreenProps) {
 					</div>
 					<Show when={props.renderMediaPreview}>
 						{(renderPreview) => (
-							<Show when={previewMedia()}>
-								{(media) => (
-									<V2CollectionInspector
-										media={media()}
-										onOpenDetail={openMediaDetail}
-										renderPreview={renderPreview()}
-										sourceName={previewSourceName()}
-									/>
-								)}
+							<Show when={isInspectorVisible()}>
+								<V2CollectionInspector
+									media={previewMedia()}
+									onClose={() => setIsInspectorVisible(false)}
+									onOpenDetail={
+										props.onOpenMediaDetail ? openMediaDetail : undefined
+									}
+									renderPreview={renderPreview()}
+									sourceName={previewSourceName()}
+								/>
 							</Show>
 						)}
 					</Show>
 				</div>
 			</div>
+			<Show when={props.isBulkSelectMode?.()}>
+				<div
+					class="fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 flex w-[calc(100%-2rem)] max-w-md -translate-x-1/2 flex-wrap items-center justify-center gap-2 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] px-3 py-3 shadow-lg sm:bottom-[calc(1.5rem+env(safe-area-inset-bottom))] sm:w-auto sm:max-w-none sm:flex-nowrap sm:gap-3 sm:px-4"
+					data-testid="search-bulk-actions-bar"
+				>
+					<span class="w-full text-center font-medium text-sm sm:w-auto">
+						{props.selectedCount?.() ?? 0} 件選択中
+					</span>
+					<Button
+						class="flex-1 sm:flex-none"
+						disabled={
+							page().searchResults().length === 0 ||
+							(props.selectedCount?.() ?? 0) === page().searchResults().length
+						}
+						onClick={props.onSelectAll}
+						variant="outline"
+					>
+						表示分をすべて選択
+					</Button>
+					<Button
+						class="flex-1 sm:flex-none"
+						onClick={props.onClearSelection}
+						variant="outline"
+					>
+						解除
+					</Button>
+				</div>
+			</Show>
 		</section>
 	);
 }
diff --git a/packages/ui/src/screens/v2-source-media-screen.tsx b/packages/ui/src/screens/v2-source-media-screen.tsx
index bffafb30..c5624b91 100644
--- a/packages/ui/src/screens/v2-source-media-screen.tsx
+++ b/packages/ui/src/screens/v2-source-media-screen.tsx
@@ -1,5 +1,5 @@
 import Upload from "lucide-solid/icons/upload";
-import { createSignal, onMount, Show } from "solid-js";
+import { createEffect, createSignal, onMount, Show } from "solid-js";
 import { FilterErrorBanner, QueryStatus } from "../async-state";
 import { Button } from "../button";
 import {
@@ -16,12 +16,16 @@ import {
 	type SourceMediaViewMode,
 } from "../source-media-grid";
 import { V2CollectionInspector } from "../v2/collection-inspector";
+import { reconcileCollectionPreviewId } from "../v2/collection-navigation";
 import { V2SearchToolbar } from "../v2/search-toolbar";
 import type { SourceMediaScreenProps } from "./source-media-screen.types";
 
+const V2_SOURCE_VIEW_MODE_KEY = "solid-imager:v2:source-media:view-mode";
+
 export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 	const [isMounted, setIsMounted] = createSignal(false);
 	const [previewMediaId, setPreviewMediaId] = createSignal<string | null>(null);
+	const [isInspectorVisible, setIsInspectorVisible] = createSignal(true);
 	const [viewMode, setViewMode] = createSignal<SourceMediaViewMode>("grid");
 	const page = () => props.page;
 	const filterStates = () => Object.values(page().filterStates());
@@ -36,8 +40,39 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 	const prepareMediaDetail = (
 		media: import("@solid-imager/core/domain/media/schemas").Media,
 	) => props.onPrepareMediaDetail?.(media, page().mediaResults());
+	const selectPreviewMedia = (
+		media: import("@solid-imager/core/domain/media/schemas").Media,
+	) => {
+		setPreviewMediaId(media.id);
+		setIsInspectorVisible(true);
+	};
+	const updateViewMode = (mode: SourceMediaViewMode) => {
+		setViewMode(mode);
+		try {
+			localStorage.setItem(V2_SOURCE_VIEW_MODE_KEY, mode);
+		} catch {
+			// Storage can be unavailable in hardened browser contexts.
+		}
+	};
 
-	onMount(() => setIsMounted(true));
+	createEffect(() => {
+		const nextId = props.renderMediaPreview
+			? reconcileCollectionPreviewId(page().mediaResults(), previewMediaId())
+			: null;
+		if (nextId !== previewMediaId()) setPreviewMediaId(nextId);
+	});
+
+	onMount(() => {
+		setIsMounted(true);
+		try {
+			const storedMode = localStorage.getItem(V2_SOURCE_VIEW_MODE_KEY);
+			if (storedMode === "grid" || storedMode === "list") {
+				setViewMode(storedMode);
+			}
+		} catch {
+			// Keep the SSR-safe default when storage cannot be read.
+		}
+	});
 
 	return (
 		<section
@@ -84,7 +119,7 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 				onSearch={page().handleSearch}
 				presetClient={page().presetClient}
 				sourceName={props.mediaSourceName?.() ?? "メディア一覧"}
-				onViewModeChange={setViewMode}
+				onViewModeChange={updateViewMode}
 				viewMode={viewMode()}
 			/>
 
@@ -118,7 +153,13 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 				class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3 sm:px-4 [scrollbar-gutter:stable]"
 				data-media-scroll={page().mediaSourceId() ?? "v2-source"}
 			>
-				<div class="2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4">
+				<div
+					class={
+						props.renderMediaPreview && isInspectorVisible()
+							? "2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4"
+							: "2xl:grid 2xl:grid-cols-[minmax(0,1fr)] 2xl:items-start"
+					}
+				>
 					<div class="min-w-0">
 						<Show
 							fallback={
@@ -139,21 +180,28 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 								isSelected={props.isSelected}
 								mediaResults={page().mediaResults}
 								mediaSourceId={page().mediaSourceId}
-								onOpenMediaDetail={openMediaDetail}
+								onOpenMediaDetail={
+									props.onOpenMediaDetail ? openMediaDetail : undefined
+								}
 								onPrepareMediaDetail={prepareMediaDetail}
 								onBulkAction={props.onBulkAction}
 								onClearSelection={props.onClearSelection}
 								onCopyMove={page().handleCopyMove}
 								onDelete={page().handleDelete}
 								onLoadMore={() => page().fetchNextPage()}
-								onPreviewSelect={(media) => setPreviewMediaId(media.id)}
+								onPreviewSelect={
+									props.renderMediaPreview ? selectPreviewMedia : undefined
+								}
 								onRetry={async () => {
 									await page().mediaQuery.refetch();
 								}}
+								onSelectMedia={props.onSelectMedia}
 								onSyncSingleMedia={page().handleSyncSingleMedia}
 								onToggleSelect={props.onToggleSelect}
 								renderItem={props.renderItem}
-								previewSelectedMediaId={previewMediaId}
+								previewSelectedMediaId={
+									props.renderMediaPreview ? previewMediaId : undefined
+								}
 								selectedCount={props.selectedCount}
 								setContextMenuMediaId={page().setContextMenuMediaId}
 								setLoadMoreRef={page().setLoadMoreRef}
@@ -168,15 +216,16 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 					</div>
 					<Show when={props.renderMediaPreview}>
 						{(renderPreview) => (
-							<Show when={previewMedia()}>
-								{(media) => (
-									<V2CollectionInspector
-										media={media()}
-										onOpenDetail={openMediaDetail}
-										renderPreview={renderPreview()}
-										sourceName={props.mediaSourceName?.()}
-									/>
-								)}
+							<Show when={isInspectorVisible()}>
+								<V2CollectionInspector
+									media={previewMedia()}
+									onClose={() => setIsInspectorVisible(false)}
+									onOpenDetail={
+										props.onOpenMediaDetail ? openMediaDetail : undefined
+									}
+									renderPreview={renderPreview()}
+									sourceName={props.mediaSourceName?.()}
+								/>
 							</Show>
 						)}
 					</Show>
diff --git a/packages/ui/src/shortcuts/create-app-shortcut.ts b/packages/ui/src/shortcuts/create-app-shortcut.ts
new file mode 100644
index 00000000..928172e3
--- /dev/null
+++ b/packages/ui/src/shortcuts/create-app-shortcut.ts
@@ -0,0 +1,62 @@
+import {
+	type ConflictBehavior,
+	createHotkey,
+	type HotkeyCallback,
+	type HotkeyMeta,
+} from "@tanstack/solid-hotkeys";
+
+import { getShortcutDefinition, type ShortcutId } from "./definitions";
+import { useShortcutPreferences } from "./preferences-provider";
+
+export interface AppShortcutOptions {
+	readonly conflictBehavior?: ConflictBehavior;
+	readonly enabled?: boolean;
+	readonly eventType?: "keydown" | "keyup";
+	readonly ignoreInputs?: boolean;
+	readonly platform?: "mac" | "windows" | "linux";
+	readonly preventDefault?: boolean;
+	readonly requireReset?: boolean;
+	readonly stopPropagation?: boolean;
+	readonly target?: HTMLElement | Document | Window | null;
+	readonly meta?: HotkeyMeta;
+}
+
+export type AppShortcutOptionsAccessor = () => AppShortcutOptions;
+
+export function createAppShortcut(
+	id: ShortcutId,
+	callback: HotkeyCallback,
+	options: AppShortcutOptions | AppShortcutOptionsAccessor = {},
+): void {
+	const preferences = useShortcutPreferences();
+	const definition = getShortcutDefinition(id);
+
+	createHotkey(
+		() => preferences.getBinding(id) ?? definition.defaultBinding,
+		callback,
+		() => {
+			const resolvedOptions =
+				typeof options === "function" ? options() : options;
+			const binding = preferences.getBinding(id);
+
+			return {
+				...resolvedOptions,
+				enabled:
+					resolvedOptions.enabled !== false &&
+					binding !== null &&
+					!preferences.isRecording() &&
+					!preferences.isSuspended(),
+				preventDefault: resolvedOptions.preventDefault ?? true,
+				stopPropagation: resolvedOptions.stopPropagation ?? true,
+				requireReset: resolvedOptions.requireReset ?? true,
+				ignoreInputs: resolvedOptions.ignoreInputs ?? true,
+				meta: {
+					...resolvedOptions.meta,
+					name: resolvedOptions.meta?.name ?? definition.label,
+					description:
+						resolvedOptions.meta?.description ?? definition.description,
+				},
+			};
+		},
+	);
+}
diff --git a/packages/ui/src/shortcuts/definitions.ts b/packages/ui/src/shortcuts/definitions.ts
new file mode 100644
index 00000000..0564f843
--- /dev/null
+++ b/packages/ui/src/shortcuts/definitions.ts
@@ -0,0 +1,145 @@
+import type { Hotkey } from "@tanstack/solid-hotkeys";
+
+export type ShortcutId =
+	| "commandPalette"
+	| "shortcutHelp"
+	| "focusSearch"
+	| "toggleSidebar"
+	| "goLibrary"
+	| "goManager"
+	| "goJobs"
+	| "goSettings"
+	| "viewGrid"
+	| "viewList";
+
+export type ShortcutGroup = "General" | "Navigation" | "View";
+export type ShortcutScope = "application";
+export type ShortcutBinding = Hotkey | null;
+
+export interface ShortcutDefinition {
+	readonly id: ShortcutId;
+	readonly label: string;
+	readonly description: string;
+	readonly group: ShortcutGroup;
+	readonly scope: ShortcutScope;
+	readonly defaultBinding: Hotkey;
+}
+
+export type ShortcutBindings = Readonly<Record<ShortcutId, ShortcutBinding>>;
+
+export const SHORTCUT_GROUPS: readonly ShortcutGroup[] = [
+	"General",
+	"Navigation",
+	"View",
+];
+
+export const SHORTCUT_DEFINITIONS = {
+	commandPalette: {
+		id: "commandPalette",
+		label: "Command palette",
+		description: "Find and run an action from anywhere in the app.",
+		group: "General",
+		scope: "application",
+		defaultBinding: "Mod+K",
+	},
+	shortcutHelp: {
+		id: "shortcutHelp",
+		label: "Keyboard shortcut help",
+		description: "Open the keyboard shortcut reference.",
+		group: "General",
+		scope: "application",
+		defaultBinding: "Mod+/",
+	},
+	focusSearch: {
+		id: "focusSearch",
+		label: "Focus search",
+		description: "Move focus to the primary media search field.",
+		group: "General",
+		scope: "application",
+		defaultBinding: "/",
+	},
+	toggleSidebar: {
+		id: "toggleSidebar",
+		label: "Toggle sidebar",
+		description: "Expand or collapse the application sidebar.",
+		group: "General",
+		scope: "application",
+		defaultBinding: "Mod+B",
+	},
+	goLibrary: {
+		id: "goLibrary",
+		label: "Go to Library",
+		description: "Open the media library.",
+		group: "Navigation",
+		scope: "application",
+		defaultBinding: "Mod+1",
+	},
+	goManager: {
+		id: "goManager",
+		label: "Go to Manager",
+		description: "Open media management tools.",
+		group: "Navigation",
+		scope: "application",
+		defaultBinding: "Mod+2",
+	},
+	goJobs: {
+		id: "goJobs",
+		label: "Go to Jobs",
+		description: "Open background job activity.",
+		group: "Navigation",
+		scope: "application",
+		defaultBinding: "Mod+3",
+	},
+	goSettings: {
+		id: "goSettings",
+		label: "Go to Settings",
+		description: "Open application settings.",
+		group: "Navigation",
+		scope: "application",
+		defaultBinding: "Mod+,",
+	},
+	viewGrid: {
+		id: "viewGrid",
+		label: "Grid view",
+		description: "Show media in a visual grid.",
+		group: "View",
+		scope: "application",
+		defaultBinding: "1",
+	},
+	viewList: {
+		id: "viewList",
+		label: "List view",
+		description: "Show media in a compact list.",
+		group: "View",
+		scope: "application",
+		defaultBinding: "2",
+	},
+} satisfies Record<ShortcutId, ShortcutDefinition>;
+
+export const SHORTCUT_DEFINITION_LIST: readonly ShortcutDefinition[] =
+	Object.values(SHORTCUT_DEFINITIONS);
+
+export const DEFAULT_SHORTCUT_BINDINGS: ShortcutBindings = {
+	commandPalette: SHORTCUT_DEFINITIONS.commandPalette.defaultBinding,
+	shortcutHelp: SHORTCUT_DEFINITIONS.shortcutHelp.defaultBinding,
+	focusSearch: SHORTCUT_DEFINITIONS.focusSearch.defaultBinding,
+	toggleSidebar: SHORTCUT_DEFINITIONS.toggleSidebar.defaultBinding,
+	goLibrary: SHORTCUT_DEFINITIONS.goLibrary.defaultBinding,
+	goManager: SHORTCUT_DEFINITIONS.goManager.defaultBinding,
+	goJobs: SHORTCUT_DEFINITIONS.goJobs.defaultBinding,
+	goSettings: SHORTCUT_DEFINITIONS.goSettings.defaultBinding,
+	viewGrid: SHORTCUT_DEFINITIONS.viewGrid.defaultBinding,
+	viewList: SHORTCUT_DEFINITIONS.viewList.defaultBinding,
+};
+
+export function getShortcutDefinition(id: ShortcutId): ShortcutDefinition {
+	return SHORTCUT_DEFINITIONS[id];
+}
+
+export function getShortcutDefinitionsForGroup(
+	group: ShortcutGroup,
+): readonly ShortcutDefinition[] {
+	return SHORTCUT_DEFINITION_LIST.filter(
+		(definition) => definition.group === group,
+	);
+}
diff --git a/packages/ui/src/shortcuts/index.ts b/packages/ui/src/shortcuts/index.ts
new file mode 100644
index 00000000..a197a7f7
--- /dev/null
+++ b/packages/ui/src/shortcuts/index.ts
@@ -0,0 +1,6 @@
+export * from "./create-app-shortcut";
+export * from "./definitions";
+export * from "./preferences-provider";
+export * from "./preferences-storage";
+export * from "./shortcut-kbd";
+export * from "./shortcut-settings-panel";
diff --git a/packages/ui/src/shortcuts/preferences-provider.tsx b/packages/ui/src/shortcuts/preferences-provider.tsx
new file mode 100644
index 00000000..d2d5282d
--- /dev/null
+++ b/packages/ui/src/shortcuts/preferences-provider.tsx
@@ -0,0 +1,222 @@
+import { detectPlatform } from "@tanstack/solid-hotkeys";
+import {
+	type Accessor,
+	createContext,
+	createSignal,
+	onMount,
+	type ParentComponent,
+	useContext,
+} from "solid-js";
+
+import {
+	DEFAULT_SHORTCUT_BINDINGS,
+	getShortcutDefinition,
+	type ShortcutBinding,
+	type ShortcutBindings,
+	type ShortcutId,
+} from "./definitions";
+import {
+	findShortcutConflict,
+	hasCustomShortcutBindings,
+	parseShortcutBinding,
+	parseStoredShortcutPreferences,
+	SHORTCUT_PREFERENCES_STORAGE_KEY,
+	type ShortcutBindingParseResult,
+	type ShortcutConflict,
+	type ShortcutPlatform,
+	serializeShortcutPreferences,
+} from "./preferences-storage";
+
+export type ShortcutBindingUpdateResult =
+	| {
+			readonly status: "updated";
+			readonly binding: ShortcutBinding;
+	  }
+	| {
+			readonly status: "conflict";
+			readonly conflict: ShortcutConflict;
+	  }
+	| {
+			readonly status: "invalid";
+			readonly messages: readonly string[];
+	  }
+	| {
+			readonly status: "unavailable";
+	  };
+
+export interface ShortcutPreferences {
+	readonly bindings: Accessor<ShortcutBindings>;
+	readonly getBinding: (id: ShortcutId) => ShortcutBinding;
+	readonly updateBinding: (
+		id: ShortcutId,
+		binding: ShortcutBinding,
+	) => ShortcutBindingUpdateResult;
+	readonly resetBinding: (id: ShortcutId) => ShortcutBindingUpdateResult;
+	readonly resetAllBindings: () => void;
+	readonly findConflict: (
+		id: ShortcutId,
+		binding: ShortcutBinding,
+	) => ShortcutConflict | null;
+	readonly hasCustomBindings: Accessor<boolean>;
+	readonly recordingShortcutId: Accessor<ShortcutId | null>;
+	readonly isRecording: Accessor<boolean>;
+	readonly setRecordingShortcutId: (id: ShortcutId | null) => void;
+	readonly isSuspended: Accessor<boolean>;
+	readonly setSuspended: (suspended: boolean) => void;
+}
+
+const ShortcutPreferencesContext = createContext<
+	ShortcutPreferences | undefined
+>();
+
+function unavailableUpdate(): ShortcutBindingUpdateResult {
+	return { status: "unavailable" };
+}
+
+const DEFAULT_SHORTCUT_PREFERENCES: ShortcutPreferences = {
+	bindings: () => DEFAULT_SHORTCUT_BINDINGS,
+	getBinding: (id) => DEFAULT_SHORTCUT_BINDINGS[id],
+	updateBinding: unavailableUpdate,
+	resetBinding: unavailableUpdate,
+	resetAllBindings: () => undefined,
+	findConflict: (id, binding) =>
+		findShortcutConflict(DEFAULT_SHORTCUT_BINDINGS, id, binding),
+	hasCustomBindings: () => false,
+	recordingShortcutId: () => null,
+	isRecording: () => false,
+	setRecordingShortcutId: () => undefined,
+	isSuspended: () => false,
+	setSuspended: () => undefined,
+};
+
+function getBrowserLocalStorage(): Storage | null {
+	if (typeof window === "undefined") {
+		return null;
+	}
+
+	try {
+		return window.localStorage;
+	} catch {
+		return null;
+	}
+}
+
+export const ShortcutPreferencesProvider: ParentComponent = (props) => {
+	const [bindings, setBindings] = createSignal<ShortcutBindings>(
+		DEFAULT_SHORTCUT_BINDINGS,
+	);
+	const [recordingShortcutId, setRecordingShortcutId] =
+		createSignal<ShortcutId | null>(null);
+	const [isSuspended, setSuspended] = createSignal(false);
+	let storage: Storage | null = null;
+	let platform: ShortcutPlatform = "linux";
+
+	const persist = (nextBindings: ShortcutBindings): void => {
+		if (storage === null) {
+			return;
+		}
+
+		try {
+			storage.setItem(
+				SHORTCUT_PREFERENCES_STORAGE_KEY,
+				serializeShortcutPreferences(nextBindings),
+			);
+		} catch {
+			// Preferences remain available for the current session if storage is full
+			// or unavailable in a privacy-restricted browser context.
+		}
+	};
+
+	const commitBindings = (nextBindings: ShortcutBindings): void => {
+		setBindings(nextBindings);
+		persist(nextBindings);
+	};
+
+	const updateBinding = (
+		id: ShortcutId,
+		candidate: ShortcutBinding,
+	): ShortcutBindingUpdateResult => {
+		const parsed: ShortcutBindingParseResult = parseShortcutBinding(
+			candidate,
+			platform,
+		);
+		if (!parsed.valid) {
+			return { status: "invalid", messages: parsed.messages };
+		}
+
+		const conflict = findShortcutConflict(
+			bindings(),
+			id,
+			parsed.binding,
+			platform,
+		);
+		if (conflict !== null) {
+			return { status: "conflict", conflict };
+		}
+
+		const nextBindings: ShortcutBindings = {
+			...bindings(),
+			[id]: parsed.binding,
+		};
+		commitBindings(nextBindings);
+		return { status: "updated", binding: parsed.binding };
+	};
+
+	const resetBinding = (id: ShortcutId): ShortcutBindingUpdateResult =>
+		updateBinding(id, getShortcutDefinition(id).defaultBinding);
+
+	const resetAllBindings = (): void => {
+		commitBindings(DEFAULT_SHORTCUT_BINDINGS);
+	};
+
+	const contextValue: ShortcutPreferences = {
+		bindings,
+		getBinding: (id) => bindings()[id],
+		updateBinding,
+		resetBinding,
+		resetAllBindings,
+		findConflict: (id, binding) =>
+			findShortcutConflict(bindings(), id, binding, platform),
+		hasCustomBindings: () => hasCustomShortcutBindings(bindings(), platform),
+		recordingShortcutId,
+		isRecording: () => recordingShortcutId() !== null,
+		setRecordingShortcutId,
+		isSuspended,
+		setSuspended,
+	};
+
+	onMount(() => {
+		platform = detectPlatform();
+		storage = getBrowserLocalStorage();
+		if (storage === null) {
+			return;
+		}
+
+		try {
+			setBindings(
+				parseStoredShortcutPreferences(
+					storage.getItem(SHORTCUT_PREFERENCES_STORAGE_KEY),
+					platform,
+				),
+			);
+		} catch {
+			setBindings(DEFAULT_SHORTCUT_BINDINGS);
+		}
+	});
+
+	return (
+		<ShortcutPreferencesContext.Provider value={contextValue}>
+			{props.children}
+		</ShortcutPreferencesContext.Provider>
+	);
+};
+
+export function useOptionalShortcutPreferences():
+	| ShortcutPreferences
+	| undefined {
+	return useContext(ShortcutPreferencesContext);
+}
+
+export function useShortcutPreferences(): ShortcutPreferences {
+	return useOptionalShortcutPreferences() ?? DEFAULT_SHORTCUT_PREFERENCES;
+}
diff --git a/packages/ui/src/shortcuts/preferences-storage.test.ts b/packages/ui/src/shortcuts/preferences-storage.test.ts
new file mode 100644
index 00000000..ea3bba56
--- /dev/null
+++ b/packages/ui/src/shortcuts/preferences-storage.test.ts
@@ -0,0 +1,117 @@
+import { describe, expect, it } from "vitest";
+
+import { DEFAULT_SHORTCUT_BINDINGS, SHORTCUT_DEFINITIONS } from "./definitions";
+import {
+	findShortcutConflict,
+	normalizeShortcutBinding,
+	parseShortcutBinding,
+	parseShortcutPreferencesPayload,
+	parseStoredShortcutPreferences,
+	SHORTCUT_PREFERENCES_VERSION,
+	serializeShortcutPreferences,
+} from "./preferences-storage";
+
+describe("shortcut preference storage", () => {
+	it("parses a versioned payload and merges missing defaults", () => {
+		const bindings = parseStoredShortcutPreferences(
+			JSON.stringify({
+				version: SHORTCUT_PREFERENCES_VERSION,
+				bindings: {
+					commandPalette: "ctrl+shift+p",
+					focusSearch: null,
+				},
+			}),
+			"windows",
+		);
+
+		expect(bindings.commandPalette).toBe("Mod+Shift+P");
+		expect(bindings.focusSearch).toBeNull();
+		expect(bindings.goJobs).toBe(DEFAULT_SHORTCUT_BINDINGS.goJobs);
+	});
+
+	it("migrates v0 shortcuts and unversioned binding records", () => {
+		const versionZero = parseShortcutPreferencesPayload(
+			{
+				version: 0,
+				shortcuts: { toggleSidebar: "Control+Shift+B" },
+			},
+			"windows",
+		);
+		const unversioned = parseShortcutPreferencesPayload(
+			{ viewGrid: "G" },
+			"linux",
+		);
+
+		expect(versionZero.toggleSidebar).toBe("Mod+Shift+B");
+		expect(unversioned.viewGrid).toBe("G");
+		expect(unversioned.viewList).toBe(DEFAULT_SHORTCUT_BINDINGS.viewList);
+	});
+
+	it("falls back to defaults for malformed payloads and invalid bindings", () => {
+		expect(parseStoredShortcutPreferences("{broken json")).toEqual(
+			DEFAULT_SHORTCUT_BINDINGS,
+		);
+		expect(
+			parseShortcutPreferencesPayload({
+				version: 1,
+				bindings: {
+					commandPalette: 42,
+					focusSearch: "",
+					viewGrid: "NotARealKey",
+				},
+			}),
+		).toEqual(DEFAULT_SHORTCUT_BINDINGS);
+		expect(
+			parseShortcutPreferencesPayload({ version: 999, bindings: {} }),
+		).toEqual(DEFAULT_SHORTCUT_BINDINGS);
+	});
+
+	it("serializes the current schema version", () => {
+		const serialized = serializeShortcutPreferences(DEFAULT_SHORTCUT_BINDINGS);
+		const parsed: unknown = JSON.parse(serialized);
+
+		expect(parsed).toEqual({
+			version: SHORTCUT_PREFERENCES_VERSION,
+			bindings: DEFAULT_SHORTCUT_BINDINGS,
+		});
+	});
+});
+
+describe("shortcut normalization and conflicts", () => {
+	it("normalizes aliases using the selected platform", () => {
+		expect(normalizeShortcutBinding("Control+K", "windows")).toBe("Mod+K");
+		expect(normalizeShortcutBinding("Meta+K", "mac")).toBe("Mod+K");
+		expect(parseShortcutBinding("shift+control+k", "windows")).toEqual({
+			valid: true,
+			binding: "Mod+Shift+K",
+		});
+	});
+
+	it("finds normalized conflicts in the same application scope", () => {
+		const conflict = findShortcutConflict(
+			DEFAULT_SHORTCUT_BINDINGS,
+			"commandPalette",
+			"Control+B",
+			"windows",
+		);
+
+		expect(conflict).toEqual({
+			shortcutId: "toggleSidebar",
+			label: SHORTCUT_DEFINITIONS.toggleSidebar.label,
+			binding: "Mod+B",
+		});
+	});
+
+	it("ignores the edited shortcut and disabled candidates", () => {
+		expect(
+			findShortcutConflict(
+				DEFAULT_SHORTCUT_BINDINGS,
+				"commandPalette",
+				"Mod+K",
+			),
+		).toBeNull();
+		expect(
+			findShortcutConflict(DEFAULT_SHORTCUT_BINDINGS, "commandPalette", null),
+		).toBeNull();
+	});
+});
diff --git a/packages/ui/src/shortcuts/preferences-storage.ts b/packages/ui/src/shortcuts/preferences-storage.ts
new file mode 100644
index 00000000..cc6fe482
--- /dev/null
+++ b/packages/ui/src/shortcuts/preferences-storage.ts
@@ -0,0 +1,224 @@
+import {
+	type Hotkey,
+	normalizeHotkey,
+	validateHotkey,
+} from "@tanstack/solid-hotkeys";
+
+import {
+	DEFAULT_SHORTCUT_BINDINGS,
+	getShortcutDefinition,
+	SHORTCUT_DEFINITION_LIST,
+	type ShortcutBinding,
+	type ShortcutBindings,
+	type ShortcutId,
+} from "./definitions";
+
+export const SHORTCUT_PREFERENCES_STORAGE_KEY =
+	"solid-imager:shortcut-preferences:v1";
+export const SHORTCUT_PREFERENCES_VERSION = 1;
+
+export type ShortcutPlatform = "mac" | "windows" | "linux";
+
+export interface ShortcutConflict {
+	readonly shortcutId: ShortcutId;
+	readonly label: string;
+	readonly binding: Hotkey;
+}
+
+export type ShortcutBindingParseResult =
+	| {
+			readonly valid: true;
+			readonly binding: ShortcutBinding;
+	  }
+	| {
+			readonly valid: false;
+			readonly messages: readonly string[];
+	  };
+
+interface StoredShortcutPreferencesV1 {
+	readonly version: 1;
+	readonly bindings: ShortcutBindings;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function getStoredBindingSource(
+	payload: unknown,
+): Record<string, unknown> | null {
+	if (!isRecord(payload)) {
+		return null;
+	}
+
+	if (payload.version === SHORTCUT_PREFERENCES_VERSION) {
+		return isRecord(payload.bindings) ? payload.bindings : null;
+	}
+
+	if (payload.version === 0) {
+		if (isRecord(payload.shortcuts)) {
+			return payload.shortcuts;
+		}
+		return isRecord(payload.bindings) ? payload.bindings : null;
+	}
+
+	if (Object.hasOwn(payload, "version")) {
+		return null;
+	}
+
+	if (isRecord(payload.bindings)) {
+		return payload.bindings;
+	}
+
+	return payload;
+}
+
+export function normalizeShortcutBinding(
+	binding: Hotkey,
+	platform: ShortcutPlatform = "linux",
+): Hotkey {
+	return normalizeHotkey(binding, platform);
+}
+
+export function parseShortcutBinding(
+	value: unknown,
+	platform: ShortcutPlatform = "linux",
+): ShortcutBindingParseResult {
+	if (value === null) {
+		return { valid: true, binding: null };
+	}
+
+	if (typeof value !== "string") {
+		return {
+			valid: false,
+			messages: ["Shortcut binding must be a string or null."],
+		};
+	}
+
+	const validation = validateHotkey(value);
+	if (!validation.valid || validation.warnings.length > 0) {
+		return {
+			valid: false,
+			messages: [...validation.errors, ...validation.warnings],
+		};
+	}
+
+	return {
+		valid: true,
+		binding: normalizeHotkey(value, platform),
+	};
+}
+
+function readStoredBinding(
+	source: Record<string, unknown>,
+	id: ShortcutId,
+	platform: ShortcutPlatform,
+): ShortcutBinding {
+	if (!Object.hasOwn(source, id)) {
+		return DEFAULT_SHORTCUT_BINDINGS[id];
+	}
+
+	const parsed = parseShortcutBinding(source[id], platform);
+	return parsed.valid ? parsed.binding : DEFAULT_SHORTCUT_BINDINGS[id];
+}
+
+export function parseShortcutPreferencesPayload(
+	payload: unknown,
+	platform: ShortcutPlatform = "linux",
+): ShortcutBindings {
+	const source = getStoredBindingSource(payload);
+	if (source === null) {
+		return DEFAULT_SHORTCUT_BINDINGS;
+	}
+
+	return {
+		commandPalette: readStoredBinding(source, "commandPalette", platform),
+		shortcutHelp: readStoredBinding(source, "shortcutHelp", platform),
+		focusSearch: readStoredBinding(source, "focusSearch", platform),
+		toggleSidebar: readStoredBinding(source, "toggleSidebar", platform),
+		goLibrary: readStoredBinding(source, "goLibrary", platform),
+		goManager: readStoredBinding(source, "goManager", platform),
+		goJobs: readStoredBinding(source, "goJobs", platform),
+		goSettings: readStoredBinding(source, "goSettings", platform),
+		viewGrid: readStoredBinding(source, "viewGrid", platform),
+		viewList: readStoredBinding(source, "viewList", platform),
+	};
+}
+
+export function parseStoredShortcutPreferences(
+	serialized: string | null,
+	platform: ShortcutPlatform = "linux",
+): ShortcutBindings {
+	if (serialized === null) {
+		return DEFAULT_SHORTCUT_BINDINGS;
+	}
+
+	try {
+		const payload: unknown = JSON.parse(serialized);
+		return parseShortcutPreferencesPayload(payload, platform);
+	} catch {
+		return DEFAULT_SHORTCUT_BINDINGS;
+	}
+}
+
+export function serializeShortcutPreferences(
+	bindings: ShortcutBindings,
+): string {
+	const payload: StoredShortcutPreferencesV1 = {
+		version: SHORTCUT_PREFERENCES_VERSION,
+		bindings,
+	};
+	const serialized = JSON.stringify(payload);
+	return typeof serialized === "string" ? serialized : "";
+}
+
+export function findShortcutConflict(
+	bindings: ShortcutBindings,
+	shortcutId: ShortcutId,
+	candidate: ShortcutBinding,
+	platform: ShortcutPlatform = "linux",
+): ShortcutConflict | null {
+	if (candidate === null) {
+		return null;
+	}
+
+	const definition = getShortcutDefinition(shortcutId);
+	const normalizedCandidate = normalizeShortcutBinding(candidate, platform);
+
+	for (const otherDefinition of SHORTCUT_DEFINITION_LIST) {
+		if (
+			otherDefinition.id === shortcutId ||
+			otherDefinition.scope !== definition.scope
+		) {
+			continue;
+		}
+
+		const otherBinding = bindings[otherDefinition.id];
+		if (
+			otherBinding !== null &&
+			normalizeShortcutBinding(otherBinding, platform) === normalizedCandidate
+		) {
+			return {
+				shortcutId: otherDefinition.id,
+				label: otherDefinition.label,
+				binding: normalizedCandidate,
+			};
+		}
+	}
+
+	return null;
+}
+
+export function hasCustomShortcutBindings(
+	bindings: ShortcutBindings,
+	platform: ShortcutPlatform = "linux",
+): boolean {
+	return SHORTCUT_DEFINITION_LIST.some((definition) => {
+		const binding = bindings[definition.id];
+		return (
+			binding === null ||
+			normalizeShortcutBinding(binding, platform) !==
+				normalizeShortcutBinding(definition.defaultBinding, platform)
+		);
+	});
+}
diff --git a/packages/ui/src/shortcuts/shortcut-kbd.tsx b/packages/ui/src/shortcuts/shortcut-kbd.tsx
new file mode 100644
index 00000000..b10cd91b
--- /dev/null
+++ b/packages/ui/src/shortcuts/shortcut-kbd.tsx
@@ -0,0 +1,61 @@
+import { detectPlatform, formatForDisplay } from "@tanstack/solid-hotkeys";
+import { type Accessor, createSignal, type JSX, onMount } from "solid-js";
+
+import { cn } from "../utils/cn";
+import type { ShortcutBinding, ShortcutId } from "./definitions";
+import { useShortcutPreferences } from "./preferences-provider";
+import type { ShortcutPlatform } from "./preferences-storage";
+
+export interface ShortcutKbdProps {
+	readonly shortcutId?: ShortcutId;
+	readonly binding?: ShortcutBinding;
+	readonly class?: string;
+	readonly disabledLabel?: string;
+}
+
+export function createShortcutDisplayPlatform(): Accessor<ShortcutPlatform> {
+	const [platform, setPlatform] = createSignal<ShortcutPlatform>("linux");
+	onMount(() => setPlatform(detectPlatform()));
+	return platform;
+}
+
+export function ShortcutKbd(props: ShortcutKbdProps): JSX.Element {
+	const preferences = useShortcutPreferences();
+	const platform = createShortcutDisplayPlatform();
+	const disabledLabel = (): string => props.disabledLabel ?? "Disabled";
+	const binding = (): ShortcutBinding => {
+		if (props.binding !== undefined) {
+			return props.binding;
+		}
+		return props.shortcutId === undefined
+			? null
+			: preferences.getBinding(props.shortcutId);
+	};
+	const displayValue = (): string => {
+		const currentBinding = binding();
+		return currentBinding === null
+			? "—"
+			: formatForDisplay(currentBinding, { platform: platform() });
+	};
+	const accessibleValue = (): string => {
+		const currentBinding = binding();
+		return currentBinding === null
+			? disabledLabel()
+			: formatForDisplay(currentBinding, {
+					platform: platform(),
+					useSymbols: false,
+				});
+	};
+
+	return (
+		<kbd
+			aria-label={accessibleValue()}
+			class={cn(
+				"inline-flex min-h-6 min-w-6 items-center justify-center rounded border border-border bg-muted px-1.5 font-medium font-mono text-[0.6875rem] text-muted-foreground shadow-sm",
+				props.class,
+			)}
+		>
+			{displayValue()}
+		</kbd>
+	);
+}
diff --git a/packages/ui/src/shortcuts/shortcut-settings-panel.tsx b/packages/ui/src/shortcuts/shortcut-settings-panel.tsx
new file mode 100644
index 00000000..74791038
--- /dev/null
+++ b/packages/ui/src/shortcuts/shortcut-settings-panel.tsx
@@ -0,0 +1,374 @@
+import {
+	createHotkeyRecorder,
+	formatForDisplay,
+	type Hotkey,
+} from "@tanstack/solid-hotkeys";
+import {
+	createSignal,
+	createUniqueId,
+	For,
+	type JSX,
+	onCleanup,
+} from "solid-js";
+
+import { Button } from "../button";
+import { Input } from "../input";
+import { cn } from "../utils/cn";
+import {
+	getShortcutDefinition,
+	getShortcutDefinitionsForGroup,
+	SHORTCUT_GROUPS,
+	type ShortcutBinding,
+	type ShortcutDefinition,
+	type ShortcutId,
+} from "./definitions";
+import {
+	type ShortcutBindingUpdateResult,
+	useOptionalShortcutPreferences,
+	useShortcutPreferences,
+} from "./preferences-provider";
+import { createShortcutDisplayPlatform } from "./shortcut-kbd";
+
+export interface ShortcutSettingsPanelProps {
+	readonly class?: string;
+	readonly title?: string;
+	readonly description?: string;
+}
+
+type FeedbackTone = "info" | "success" | "error";
+
+interface ShortcutFeedback {
+	readonly shortcutId: ShortcutId | null;
+	readonly message: string;
+	readonly tone: FeedbackTone;
+}
+
+export function ShortcutSettingsPanel(
+	props: ShortcutSettingsPanelProps,
+): JSX.Element {
+	const optionalPreferences = useOptionalShortcutPreferences();
+	const preferences = useShortcutPreferences();
+	const platform = createShortcutDisplayPlatform();
+	const idPrefix = createUniqueId();
+	const headingId = `${idPrefix}-heading`;
+	const statusId = `${idPrefix}-status`;
+	const [activeShortcutId, setActiveShortcutId] =
+		createSignal<ShortcutId | null>(null);
+	const [feedback, setFeedback] = createSignal<ShortcutFeedback | null>(null);
+
+	const finishRecording = (): void => {
+		setActiveShortcutId(null);
+		preferences.setRecordingShortcutId(null);
+	};
+
+	const describeUpdateResult = (
+		id: ShortcutId,
+		result: ShortcutBindingUpdateResult,
+	): void => {
+		const definition = getShortcutDefinition(id);
+		if (result.status === "conflict") {
+			const displayBinding = formatForDisplay(result.conflict.binding, {
+				platform: platform(),
+			});
+			setFeedback({
+				shortcutId: id,
+				tone: "error",
+				message: `Conflict: ${displayBinding} is already assigned to ${result.conflict.label}. The shortcut was not saved.`,
+			});
+			return;
+		}
+
+		if (result.status === "invalid") {
+			setFeedback({
+				shortcutId: id,
+				tone: "error",
+				message: `Invalid shortcut: ${result.messages.join(" ")}`,
+			});
+			return;
+		}
+
+		if (result.status === "unavailable") {
+			setFeedback({
+				shortcutId: id,
+				tone: "error",
+				message:
+					"Shortcut preferences are unavailable because the settings provider is not mounted.",
+			});
+			return;
+		}
+
+		setFeedback({
+			shortcutId: id,
+			tone: "success",
+			message:
+				result.binding === null
+					? `${definition.label} is disabled.`
+					: `${definition.label} was updated for this device.`,
+		});
+	};
+
+	const recorder = createHotkeyRecorder({
+		ignoreInputs: false,
+		onRecord: (hotkey: Hotkey) => {
+			const id = activeShortcutId();
+			if (id === null || hotkey.length === 0) {
+				return;
+			}
+
+			describeUpdateResult(id, preferences.updateBinding(id, hotkey));
+			finishRecording();
+		},
+		onClear: () => {
+			const id = activeShortcutId();
+			if (id === null) {
+				return;
+			}
+
+			describeUpdateResult(id, preferences.updateBinding(id, null));
+			finishRecording();
+		},
+		onCancel: () => {
+			const id = activeShortcutId();
+			if (id !== null) {
+				setFeedback({
+					shortcutId: id,
+					tone: "info",
+					message: `Recording for ${getShortcutDefinition(id).label} was cancelled.`,
+				});
+			}
+			finishRecording();
+		},
+	});
+
+	const startRecording = (id: ShortcutId): void => {
+		if (optionalPreferences === undefined) {
+			describeUpdateResult(id, { status: "unavailable" });
+			return;
+		}
+
+		if (recorder.isRecording()) {
+			recorder.cancelRecording();
+		}
+
+		setFeedback({
+			shortcutId: id,
+			tone: "info",
+			message:
+				"Recording. Press the new shortcut, Escape to cancel, or Backspace/Delete to disable it.",
+		});
+		setActiveShortcutId(id);
+		preferences.setRecordingShortcutId(id);
+		recorder.startRecording();
+	};
+
+	const toggleRecording = (id: ShortcutId): void => {
+		if (activeShortcutId() === id && recorder.isRecording()) {
+			recorder.cancelRecording();
+			return;
+		}
+		startRecording(id);
+	};
+
+	const stopActiveRecording = (): void => {
+		if (recorder.isRecording()) {
+			recorder.stopRecording();
+		}
+		finishRecording();
+	};
+
+	const resetBinding = (id: ShortcutId): void => {
+		stopActiveRecording();
+		const result = preferences.resetBinding(id);
+		if (result.status !== "updated") {
+			describeUpdateResult(id, result);
+			return;
+		}
+		setFeedback({
+			shortcutId: id,
+			tone: "success",
+			message: `${getShortcutDefinition(id).label} was reset to its default.`,
+		});
+	};
+
+	const resetAllBindings = (): void => {
+		stopActiveRecording();
+		preferences.resetAllBindings();
+		setFeedback({
+			shortcutId: null,
+			tone: "success",
+			message: "All keyboard shortcuts were reset to their defaults.",
+		});
+	};
+
+	const displayBinding = (binding: ShortcutBinding): string =>
+		binding === null
+			? "Disabled"
+			: formatForDisplay(binding, { platform: platform() });
+
+	const isDefaultBinding = (definition: ShortcutDefinition): boolean =>
+		preferences.getBinding(definition.id) === definition.defaultBinding;
+
+	const inputId = (id: ShortcutId): string => `${idPrefix}-${id}-binding`;
+	const descriptionId = (id: ShortcutId): string =>
+		`${idPrefix}-${id}-description`;
+	const describedBy = (id: ShortcutId): string =>
+		feedback()?.shortcutId === id
+			? `${descriptionId(id)} ${statusId}`
+			: descriptionId(id);
+
+	onCleanup(() => {
+		recorder.stopRecording();
+		if (activeShortcutId() !== null) {
+			preferences.setRecordingShortcutId(null);
+		}
+	});
+
+	return (
+		<section
+			aria-labelledby={headingId}
+			class={cn(
+				"rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+				props.class,
+			)}
+		>
+			<header class="flex flex-wrap items-start justify-between gap-3 border-border border-b px-4 py-4">
+				<div class="min-w-0 space-y-1">
+					<h2 class="font-semibold text-base" id={headingId}>
+						{props.title ?? "Keyboard shortcuts"}
+					</h2>
+					<p class="max-w-[80ch] text-muted-foreground text-sm">
+						{props.description ??
+							"Customize keyboard controls for this device. These preferences are stored locally."}
+					</p>
+				</div>
+				<Button
+					disabled={
+						optionalPreferences === undefined ||
+						!preferences.hasCustomBindings()
+					}
+					onClick={resetAllBindings}
+					size="sm"
+					type="button"
+					variant="outline"
+				>
+					Reset all
+				</Button>
+				<p
+					aria-atomic="true"
+					class={cn(
+						"basis-full text-sm",
+						feedback()?.tone === "error" && "text-destructive",
+						feedback()?.tone === "success" && "text-primary",
+						feedback()?.tone === "info" && "text-muted-foreground",
+					)}
+					id={statusId}
+					role="status"
+				>
+					{feedback()?.message ?? ""}
+				</p>
+			</header>
+
+			<div class="divide-y divide-border">
+				<For each={SHORTCUT_GROUPS}>
+					{(group) => (
+						<section aria-labelledby={`${idPrefix}-${group}-heading`}>
+							<h3
+								class="bg-muted px-4 py-2 font-medium text-muted-foreground text-xs"
+								id={`${idPrefix}-${group}-heading`}
+							>
+								{group}
+							</h3>
+							{/* biome-ignore lint/a11y/noRedundantRoles: Tailwind removes list markers, so Safari needs the explicit list role. */}
+							<ul class="divide-y divide-border" role="list">
+								<For each={getShortcutDefinitionsForGroup(group)}>
+									{(definition) => {
+										const currentBinding = (): ShortcutBinding =>
+											preferences.getBinding(definition.id);
+										const isActive = (): boolean =>
+											activeShortcutId() === definition.id &&
+											recorder.isRecording();
+
+										return (
+											<li class="grid gap-3 px-4 py-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
+												<div class="min-w-0">
+													<label
+														class="font-medium text-sm"
+														for={inputId(definition.id)}
+													>
+														{definition.label}
+													</label>
+													<p
+														class="mt-0.5 max-w-[80ch] text-muted-foreground text-xs"
+														id={descriptionId(definition.id)}
+													>
+														{definition.description}
+													</p>
+												</div>
+
+												<div class="flex min-w-0 flex-wrap items-center gap-2 md:justify-end">
+													<Input
+														aria-describedby={describedBy(definition.id)}
+														aria-invalid={
+															feedback()?.shortcutId === definition.id &&
+															feedback()?.tone === "error"
+																? "true"
+																: undefined
+														}
+														class={cn(
+															"h-9 min-h-9 w-40 cursor-pointer select-none text-center font-mono text-xs",
+															isActive() &&
+																"border-primary ring-1 ring-primary",
+														)}
+														id={inputId(definition.id)}
+														onClick={() => startRecording(definition.id)}
+														onKeyDown={(event) => {
+															if (
+																!isActive() &&
+																(event.key === "Enter" || event.key === " ")
+															) {
+																event.preventDefault();
+																startRecording(definition.id);
+															}
+														}}
+														readOnly
+														value={
+															isActive()
+																? "Press shortcut…"
+																: displayBinding(currentBinding())
+														}
+													/>
+													<Button
+														aria-describedby={descriptionId(definition.id)}
+														aria-pressed={isActive()}
+														onClick={() => toggleRecording(definition.id)}
+														size="sm"
+														type="button"
+														variant={isActive() ? "secondary" : "outline"}
+													>
+														{isActive() ? "Cancel" : "Record"}
+													</Button>
+													<Button
+														disabled={
+															optionalPreferences === undefined ||
+															isDefaultBinding(definition)
+														}
+														onClick={() => resetBinding(definition.id)}
+														size="sm"
+														type="button"
+														variant="ghost"
+													>
+														Reset
+													</Button>
+												</div>
+											</li>
+										);
+									}}
+								</For>
+							</ul>
+						</section>
+					)}
+				</For>
+			</div>
+		</section>
+	);
+}
diff --git a/packages/ui/src/skeleton.tsx b/packages/ui/src/skeleton.tsx
index 7c47587c..f171462b 100644
--- a/packages/ui/src/skeleton.tsx
+++ b/packages/ui/src/skeleton.tsx
@@ -129,7 +129,7 @@ export function MediaGridSkeleton(props: MediaGridSkeletonProps) {
 			data-skeleton="media-grid"
 		>
 			<div class={cn(mediaGridClassName, props.class)}>
-				<For each={Array.from({ length: props.count ?? 16 })}>
+				<For each={Array.from({ length: props.count ?? 32 })}>
 					{() => (
 						<Skeleton
 							class={cn(
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 8fb80cdc..b1f5daef 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -21,10 +21,13 @@ import { EmptyState, ErrorState, OfflineState } from "./async-state";
 import {
 	ContextMenu,
 	ContextMenuContent,
+	ContextMenuGroupLabel,
 	ContextMenuItem,
 	ContextMenuSeparator,
+	ContextMenuShortcut,
 	ContextMenuTrigger,
 } from "./context-menu";
+import type { MediaCollectionSelectionMode } from "./hooks/use-media-collection-selection";
 import type { MediaGridImageLoadPolicy } from "./media-grid-item";
 import { createMediaPreviewSelectHandler } from "./media-preview-selection";
 import type { QueryUiState } from "./query-state";
@@ -34,6 +37,12 @@ import {
 	MediaGridSkeleton,
 	mediaGridClassName,
 } from "./skeleton";
+import {
+	findCollectionItemById,
+	getCollectionNavigationIndex,
+	isCollectionNavigationKey,
+	isCollectionScrollNearEnd,
+} from "./v2/collection-navigation";
 
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
@@ -47,6 +56,8 @@ const LOAD_MORE_ROWS_AHEAD = 12;
 const INITIAL_PRIORITY_ROWS = 2;
 const INITIAL_HIGH_PRIORITY_MEDIA = 2;
 const INITIAL_SKELETON_ROWS = 3;
+const LIST_LOAD_MORE_THRESHOLD_PX = 480;
+const FOCUS_RESTORE_FRAME_LIMIT = 6;
 
 export type SourceMediaViewMode = "grid" | "list";
 
@@ -93,6 +104,8 @@ type SourceMediaGridProps = {
 	onLoadMore?: () => void;
 	/** Select a media item for the wide collection inspector. */
 	onPreviewSelect?: (media: Media) => void;
+	/** Applies plain, additive, and range selection gestures. */
+	onSelectMedia?: (mediaId: string, mode: MediaCollectionSelectionMode) => void;
 	previewSelectedMediaId?: Accessor<string | null>;
 	/** Render a single media grid item. */
 	renderItem: (
@@ -100,10 +113,13 @@ type SourceMediaGridProps = {
 		options: {
 			imageLoadPolicy?: MediaGridImageLoadPolicy;
 			onContextMenu: () => void;
+			onOpenMediaDetail?: () => void;
 			priority?: boolean;
 			isBulkSelectMode?: boolean;
 			isSelected?: boolean;
 			onPreviewSelect?: () => void;
+			onSelectGesture?: (event: MouseEvent | KeyboardEvent) => void;
+			onToggleSelect?: () => void;
 			onPrepareMediaDetail?: () => void;
 			isPreviewSelected?: boolean;
 		},
@@ -137,6 +153,20 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	const enableVirtualization = () => props.enableVirtualization ?? false;
 	const disableContextMenu = () => props.disableContextMenu ?? false;
 	const totalCount = () => props.totalCount ?? props.mediaResults().length;
+	const selectionModeFromEvent = (
+		event: MouseEvent | KeyboardEvent,
+	): MediaCollectionSelectionMode => {
+		const additive = event.metaKey || event.ctrlKey;
+		if (event.shiftKey) return additive ? "additive-range" : "range";
+		return additive ? "toggle" : "replace";
+	};
+	const selectFromGesture = (
+		media: Media,
+		event: MouseEvent | KeyboardEvent,
+	) => {
+		props.onSelectMedia?.(media.id, selectionModeFromEvent(event));
+		props.onPreviewSelect?.(media);
+	};
 	const viewMode = () => props.viewMode?.() ?? "grid";
 	const errorMessage = () => {
 		const error = props.state().error;
@@ -155,9 +185,17 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		endIndex: number;
 		startIndex: number;
 	} | null>(null);
+	const [activeMediaId, setActiveMediaId] = createSignal<string | null>(null);
+	const [internalContextMenuMedia, setInternalContextMenuMedia] =
+		createSignal<Media>();
+	let collectionRootRef: HTMLDivElement | undefined;
 	let mediaGridRef: HTMLDivElement | undefined;
 	let mediaGridResizeObserver: ResizeObserver | undefined;
 	let metricsFrameId: number | undefined;
+	let focusFrameId: number | undefined;
+	let listLoadRequestPending = false;
+	let listLoadRequestCount = -1;
+	let listLoadWasFetching = false;
 
 	const columnCount = createMemo(() => {
 		const width = mediaGridWidth() || windowWidth();
@@ -322,10 +360,11 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		},
 	});
 
-	const resolveScrollElement = () =>
-		props.scrollMode === "element"
-			? (mediaGridRef?.closest("[data-media-scroll]") as HTMLElement | null)
-			: null;
+	const resolveScrollElement = () => {
+		if (props.scrollMode !== "element") return null;
+		const element = collectionRootRef?.closest("[data-media-scroll]");
+		return element instanceof HTMLElement ? element : null;
+	};
 
 	const updateMediaGridMetrics = () => {
 		if (!mediaGridRef) return;
@@ -374,6 +413,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 				cancelAnimationFrame(metricsFrameId);
 				metricsFrameId = undefined;
 			}
+			if (focusFrameId !== undefined) {
+				cancelAnimationFrame(focusFrameId);
+				focusFrameId = undefined;
+			}
 			resizeObserver.disconnect();
 			if (mediaGridResizeObserver === resizeObserver) {
 				mediaGridResizeObserver = undefined;
@@ -406,7 +449,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 
 	// Virtual scroll-based load more: trigger when user scrolls near the end
 	createEffect(() => {
-		if (!shouldVirtualize()) return;
+		if (!shouldVirtualize() || viewMode() !== "grid") return;
 		const totalRows = rowCount();
 		const handleScroll = () => {
 			if (!props.hasNextPage || props.isFetchingNextPage) return;
@@ -421,17 +464,195 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		onCleanup(() => target.removeEventListener("scroll", handleScroll));
 	});
 
-	const contextMenuMediaId = () => props.contextMenuMediaId?.() ?? null;
+	createEffect(() => {
+		const fetching = props.isFetchingNextPage;
+		const resultCount = props.mediaResults().length;
+		if (fetching) {
+			listLoadWasFetching = true;
+			return;
+		}
+		if (listLoadWasFetching || resultCount !== listLoadRequestCount) {
+			listLoadRequestPending = false;
+			listLoadWasFetching = false;
+		}
+	});
+
+	createEffect(() => {
+		if (viewMode() !== "list") return;
+		const target = props.scrollMode === "element" ? scrollElement() : window;
+		if (!target) return;
+
+		const handleScroll = () => {
+			if (
+				!props.hasNextPage ||
+				props.isFetchingNextPage ||
+				!props.onLoadMore ||
+				listLoadRequestPending
+			) {
+				return;
+			}
+
+			const metrics =
+				target instanceof HTMLElement
+					? {
+							contentSize: target.scrollHeight,
+							scrollOffset: target.scrollTop,
+							viewportSize: target.clientHeight,
+						}
+					: {
+							contentSize: document.documentElement.scrollHeight,
+							scrollOffset: window.scrollY,
+							viewportSize: window.innerHeight,
+						};
+			if (
+				!isCollectionScrollNearEnd({
+					...metrics,
+					threshold: LIST_LOAD_MORE_THRESHOLD_PX,
+				})
+			) {
+				return;
+			}
+
+			listLoadRequestPending = true;
+			listLoadRequestCount = props.mediaResults().length;
+			props.onLoadMore();
+		};
+
+		target.addEventListener("scroll", handleScroll, { passive: true });
+		const frameId = requestAnimationFrame(handleScroll);
+		onCleanup(() => {
+			cancelAnimationFrame(frameId);
+			target.removeEventListener("scroll", handleScroll);
+		});
+	});
+
+	const contextMenuMedia = () => {
+		const mediaId =
+			internalContextMenuMedia()?.id ?? props.contextMenuMediaId?.() ?? null;
+		return findCollectionItemById(props.mediaResults(), mediaId);
+	};
+
+	const clearContextMenuTarget = () => {
+		setInternalContextMenuMedia(undefined);
+		props.setContextMenuMediaId?.(null);
+	};
 
-	const onContextMenuHandler = (mediaId: string) => {
+	const setContextMenuTarget = (media: Media | undefined) => {
+		if (!media) {
+			clearContextMenuTarget();
+			return;
+		}
+		const shouldNotifyPreview = internalContextMenuMedia()?.id !== media.id;
+		setInternalContextMenuMedia(media);
+		props.setContextMenuMediaId?.(media.id);
+		setActiveMediaId(media.id);
+		if (shouldNotifyPreview) {
+			props.onPreviewSelect?.(media);
+		}
+	};
+
+	const onContextMenuHandler = (media: Media) => {
 		return () => {
-			props.setContextMenuMediaId?.(mediaId);
+			setContextMenuTarget(media);
 		};
 	};
 
+	const findMediaFromEventTarget = (target: EventTarget | null) => {
+		if (!(target instanceof Element)) return undefined;
+		const mediaId =
+			target.closest<HTMLElement>("[data-media-id]")?.dataset.mediaId;
+		return findCollectionItemById(props.mediaResults(), mediaId);
+	};
+
+	const findRenderedMediaElement = (mediaId: string) =>
+		Array.from(
+			mediaGridRef?.querySelectorAll<HTMLElement>("[data-media-id]") ?? [],
+		).find((element) => element.dataset.mediaId === mediaId);
+
+	const focusRenderedMedia = (mediaId: string, attempt = 0) => {
+		const element = findRenderedMediaElement(mediaId);
+		if (element) {
+			focusFrameId = undefined;
+			element.focus({ preventScroll: true });
+			return;
+		}
+		if (attempt >= FOCUS_RESTORE_FRAME_LIMIT) {
+			focusFrameId = undefined;
+			return;
+		}
+		focusFrameId = requestAnimationFrame(() => {
+			focusRenderedMedia(mediaId, attempt + 1);
+		});
+	};
+
+	const visiblePageRowCount = () => {
+		const viewportHeight =
+			props.scrollMode === "element"
+				? scrollElement()?.clientHeight
+				: window.innerHeight;
+		const rowHeight = mediaItemHeight() + GRID_GAP_PX;
+		if (!viewportHeight || rowHeight <= 0) return 1;
+		return Math.max(Math.floor(viewportHeight / rowHeight), 1);
+	};
+
+	const handleGridKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (
+		event,
+	) => {
+		if (!isCollectionNavigationKey(event.key)) return;
+		if (
+			event.target instanceof HTMLInputElement ||
+			event.target instanceof HTMLTextAreaElement ||
+			event.target instanceof HTMLSelectElement
+		) {
+			return;
+		}
+
+		const results = props.mediaResults();
+		if (results.length === 0) return;
+		const focusedMedia = findMediaFromEventTarget(event.target);
+		const currentMediaId =
+			focusedMedia?.id ??
+			activeMediaId() ??
+			props.previewSelectedMediaId?.() ??
+			results[0]?.id;
+		const currentIndex = Math.max(
+			results.findIndex((media) => media.id === currentMediaId),
+			0,
+		);
+		const nextIndex = getCollectionNavigationIndex({
+			columnCount: columnCount(),
+			currentIndex,
+			itemCount: results.length,
+			key: event.key,
+			pageRowCount: visiblePageRowCount(),
+		});
+		if (nextIndex === null) return;
+		const nextMedia = results[nextIndex];
+		if (!nextMedia) return;
+
+		event.preventDefault();
+		setActiveMediaId(nextMedia.id);
+		props.onPreviewSelect?.(nextMedia);
+		if (shouldVirtualize()) {
+			mediaRowVirtualizer().scrollToIndex(
+				Math.floor(nextIndex / Math.max(columnCount(), 1)),
+				{ align: "auto" },
+			);
+		}
+		if (focusFrameId !== undefined) cancelAnimationFrame(focusFrameId);
+		focusRenderedMedia(nextMedia.id);
+	};
+
 	const gridContent = (
 		<div
 			class="@container relative min-w-0 w-full"
+			aria-label="メディア一覧"
+			role="grid"
+			onFocusIn={(event) => {
+				const media = findMediaFromEventTarget(event.target);
+				if (media) setActiveMediaId(media.id);
+			}}
+			onKeyDown={handleGridKeyDown}
 			ref={(element) => {
 				if (mediaGridRef && mediaGridRef !== element) {
 					mediaGridResizeObserver?.unobserve(mediaGridRef);
@@ -481,7 +702,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 																: "lazy",
 													}
 												: undefined,
-										onContextMenu: onContextMenuHandler(media.id),
+										onContextMenu: onContextMenuHandler(media),
+										onOpenMediaDetail: props.onOpenMediaDetail
+											? () => props.onOpenMediaDetail?.(media)
+											: undefined,
 										onPrepareMediaDetail: () =>
 											props.onPrepareMediaDetail?.(media),
 										priority:
@@ -491,13 +715,19 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 										get isBulkSelectMode() {
 											return props.isBulkSelectMode?.();
 										},
-										get isSelected() {
-											return props.isSelected?.(media.id);
-										},
-										onPreviewSelect: createMediaPreviewSelectHandler(
+						get isSelected() {
+							return props.isSelected?.(media.id);
+						},
+						onToggleSelect: props.onToggleSelect
+							? () => props.onToggleSelect?.(media.id)
+							: undefined,
+						onPreviewSelect: createMediaPreviewSelectHandler(
 											media,
 											props.onPreviewSelect,
 										),
+										onSelectGesture: props.onSelectMedia
+											? (event) => selectFromGesture(media, event)
+											: undefined,
 										get isPreviewSelected() {
 											return props.previewSelectedMediaId?.() === media.id;
 										},
@@ -536,7 +766,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 																mediaIndexInRow(),
 														)
 													: undefined,
-											onContextMenu: onContextMenuHandler(media.id),
+											onContextMenu: onContextMenuHandler(media),
+											onOpenMediaDetail: props.onOpenMediaDetail
+												? () => props.onOpenMediaDetail?.(media)
+												: undefined,
 											onPrepareMediaDetail: () =>
 												props.onPrepareMediaDetail?.(media),
 											// Window virtualization keeps its established native lazy-loading
@@ -547,13 +780,19 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 											get isBulkSelectMode() {
 												return props.isBulkSelectMode?.();
 											},
-											get isSelected() {
-												return props.isSelected?.(media.id);
-											},
-											onPreviewSelect: createMediaPreviewSelectHandler(
+							get isSelected() {
+								return props.isSelected?.(media.id);
+							},
+							onToggleSelect: props.onToggleSelect
+								? () => props.onToggleSelect?.(media.id)
+								: undefined,
+							onPreviewSelect: createMediaPreviewSelectHandler(
 												media,
 												props.onPreviewSelect,
 											),
+											onSelectGesture: props.onSelectMedia
+												? (event) => selectFromGesture(media, event)
+												: undefined,
 											get isPreviewSelected() {
 												return props.previewSelectedMediaId?.() === media.id;
 											},
@@ -607,10 +846,75 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 					<For each={props.mediaResults()}>
 						{(media) => (
 							<tr
-								class={
-									props.isSelected?.(media.id)
+								aria-selected={props.previewSelectedMediaId?.() === media.id}
+								class={`outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--v2-focus)] ${
+									props.isSelected?.(media.id) ||
+									props.previewSelectedMediaId?.() === media.id
 										? "bg-[var(--v2-surface-selected)]"
 										: "hover:bg-[var(--v2-surface-muted)]"
+								}`}
+								data-media-id={media.id}
+								onClick={(event) => {
+									if (
+										event.target instanceof Element &&
+										event.target.closest("[data-collection-row-control]")
+									) {
+										return;
+									}
+									setActiveMediaId(media.id);
+									if (
+										props.onSelectMedia &&
+										(event.metaKey || event.ctrlKey || event.shiftKey)
+									) {
+										event.preventDefault();
+										selectFromGesture(media, event);
+									} else {
+										props.onPreviewSelect?.(media);
+									}
+									event.currentTarget.focus({ preventScroll: true });
+								}}
+								onContextMenu={onContextMenuHandler(media)}
+								onDblClick={(event) => {
+									if (
+										event.target instanceof Element &&
+										event.target.closest("[data-collection-row-control]")
+									) {
+										return;
+									}
+									props.onOpenMediaDetail?.(media);
+								}}
+								onKeyDown={(event) => {
+									if (event.target !== event.currentTarget) return;
+									if (event.key === "Enter" && props.onOpenMediaDetail) {
+										event.preventDefault();
+										props.onOpenMediaDetail(media);
+									}
+									if (event.key === " ") event.preventDefault();
+								}}
+								onKeyUp={(event) => {
+									if (
+										event.target !== event.currentTarget ||
+										event.key !== " "
+									) {
+										return;
+									}
+									event.preventDefault();
+									if (props.onSelectMedia) {
+										props.onSelectMedia(media.id, "toggle");
+										props.onPreviewSelect?.(media);
+									} else if (props.onToggleSelect) {
+										props.onToggleSelect(media.id);
+									} else {
+										props.onPreviewSelect?.(media);
+									}
+								}}
+								tabIndex={
+									props.onPreviewSelect ||
+									props.onOpenMediaDetail ||
+									props.onToggleSelect ||
+									props.onSelectMedia
+										? 0
+										: undefined
 								}
 							>
 								<Show when={props.isBulkSelectMode?.()}>
@@ -618,17 +922,15 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 										<input
 											aria-label={`${media.fileName}を選択`}
 											checked={props.isSelected?.(media.id) ?? false}
+											data-collection-row-control
 											onChange={() => props.onToggleSelect?.(media.id)}
+											onClick={(event) => event.stopPropagation()}
 											type="checkbox"
 										/>
 									</td>
 								</Show>
 								<th class="max-w-[28rem] px-3 py-2 font-normal" scope="row">
-									<button
-										class="block min-h-10 w-full rounded px-1 py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)]"
-										onClick={() => props.onOpenMediaDetail?.(media)}
-										type="button"
-									>
+									<div class="min-h-10 w-full px-1 py-1 text-left">
 										<span
 											class="block truncate font-medium text-[var(--v2-text)]"
 											title={media.fileName}
@@ -641,7 +943,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 										>
 											{media.filePath}
 										</span>
-									</button>
+									</div>
 								</th>
 								<td class="px-3 py-2 text-[var(--v2-text-secondary)]">
 									{media.mediaType}
@@ -662,9 +964,40 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 			</table>
 		</div>
 	);
+	const hasContextMenuActions = () =>
+		Boolean(
+			props.onOpenMediaDetail ||
+				props.onToggleSelect ||
+				props.onBulkAction ||
+				props.onClearSelection ||
+				props.onDelete ||
+				props.onCopyMove ||
+				props.onSyncSingleMedia,
+		);
+	const openMediaInNewTab = (media: Media) => {
+		window.open(
+			`${props.detailBasePath ?? "/sources"}/${media.mediaSourceId}/${media.id}`,
+			"_blank",
+			"noopener,noreferrer",
+		);
+	};
+	const collectionContent = (
+		<Show fallback={gridContent} when={viewMode() === "list"}>
+			{listContent}
+		</Show>
+	);
 
 	return (
-		<div class="min-h-0 min-w-0 space-y-4">
+		<div
+			class="min-h-0 min-w-0 space-y-4"
+			ref={(element) => {
+				collectionRootRef = element;
+				const resolvedScrollElement = resolveScrollElement();
+				if (resolvedScrollElement !== scrollElement()) {
+					setScrollElement(resolvedScrollElement);
+				}
+			}}
+		>
 			<Switch>
 				<Match when={props.state().phase === "pending"}>
 					<LoadingRegion label="メディア一覧を読み込んでいます...">
@@ -704,128 +1037,149 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 						</div>
 					</Show>
 
-					{/* Grid/list with optional context menu for the grid presentation */}
-					<Show
-						fallback={
-							<Show fallback={gridContent} when={!disableContextMenu()}>
-								<ContextMenu>
-									<ContextMenuTrigger class="block min-w-0 w-full">
-										{gridContent}
-									</ContextMenuTrigger>
-									<ContextMenuContent>
-										<Show
-											fallback={
+					{/* Grid and list share the same target-safe context menu. */}
+					<Show fallback={collectionContent} when={!disableContextMenu()}>
+						<ContextMenu
+							onOpenChange={(open) => {
+								if (!open) clearContextMenuTarget();
+							}}
+						>
+							<ContextMenuTrigger
+								class="block min-w-0 w-full"
+								onPointerDown={(event) => {
+									if (event.button === 2 || event.pointerType !== "mouse") {
+										setContextMenuTarget(
+											findMediaFromEventTarget(event.target),
+										);
+									}
+								}}
+							>
+								<div
+									class="min-w-0 w-full"
+									aria-label="メディア一覧の操作対象"
+									role="region"
+									onContextMenu={(event) => {
+										const media = findMediaFromEventTarget(event.target);
+										setContextMenuTarget(media);
+										if (!media) {
+											event.preventDefault();
+											event.stopPropagation();
+										}
+									}}
+								>
+									{collectionContent}
+								</div>
+							</ContextMenuTrigger>
+							<ContextMenuContent class="v2-theme min-w-56 max-w-80">
+								<Show
+									keyed
+									fallback={
+										<ContextMenuItem disabled>
+											メディアを選択してください
+										</ContextMenuItem>
+									}
+									when={contextMenuMedia()}
+								>
+									{(media) => (
+										<>
+											<ContextMenuGroupLabel
+												class="max-w-72 truncate text-[var(--v2-text-muted)]"
+												title={media.fileName}
+											>
+												{media.fileName}
+											</ContextMenuGroupLabel>
+											<ContextMenuSeparator />
+											<Show when={!hasContextMenuActions()}>
 												<ContextMenuItem disabled>
-													No media selected
+													利用できる操作はありません
 												</ContextMenuItem>
-											}
-											when={contextMenuMediaId()}
-										>
-											<ContextMenuItem
-												onSelect={() => {
-													const id = contextMenuMediaId();
-													if (id) props.onToggleSelect?.(id);
-												}}
+											</Show>
+											<Show when={props.onOpenMediaDetail}>
+												<ContextMenuItem
+													onSelect={() => props.onOpenMediaDetail?.(media)}
+												>
+													詳細を開く
+													<ContextMenuShortcut>Enter</ContextMenuShortcut>
+												</ContextMenuItem>
+											</Show>
+											<Show
+												when={showOpenInNewTab() && props.onOpenMediaDetail}
 											>
-												{(() => {
-													const id = contextMenuMediaId();
-													return id &&
-														props.isBulkSelectMode?.() &&
-														props.isSelected?.(id)
+												<ContextMenuItem
+													onSelect={() => openMediaInNewTab(media)}
+												>
+													新しいタブで開く
+												</ContextMenuItem>
+											</Show>
+											<Show when={props.onToggleSelect}>
+												<ContextMenuItem
+													onSelect={() => props.onToggleSelect?.(media.id)}
+												>
+													{props.isBulkSelectMode?.() &&
+													props.isSelected?.(media.id)
 														? "選択解除"
-														: "選択";
-												})()}
-											</ContextMenuItem>
-
-											<ContextMenuSeparator />
-
+														: "選択"}
+													<ContextMenuShortcut>Space</ContextMenuShortcut>
+												</ContextMenuItem>
+											</Show>
 											<Show
 												when={
 													props.isBulkSelectMode?.() &&
-													(props.selectedCount?.() ?? 0) > 0
+													(props.selectedCount?.() ?? 0) > 0 &&
+													(props.onBulkAction || props.onClearSelection)
 												}
 											>
+												<Show when={props.onBulkAction}>
+													<ContextMenuItem
+														onSelect={() => props.onBulkAction?.()}
+													>
+														一括操作を実行 ({props.selectedCount?.()}件選択中)
+													</ContextMenuItem>
+												</Show>
+												<Show when={props.onClearSelection}>
+													<ContextMenuItem
+														onSelect={() => props.onClearSelection?.()}
+													>
+														選択をクリア
+													</ContextMenuItem>
+												</Show>
+											</Show>
+											<Show when={props.onDelete}>
+												<ContextMenuSeparator />
 												<ContextMenuItem
-													onSelect={() => {
-														props.onBulkAction?.();
-													}}
+													class="text-destructive focus:text-destructive"
+													onSelect={() => props.onDelete?.(media.id)}
 												>
-													一括操作を実行 ({props.selectedCount?.()}件選択中)
+													削除
+													<ContextMenuShortcut>Delete</ContextMenuShortcut>
 												</ContextMenuItem>
+											</Show>
+											<Show when={props.onCopyMove}>
+												<ContextMenuSeparator />
 												<ContextMenuItem
-													onSelect={() => {
-														props.onClearSelection?.();
-													}}
+													onSelect={() => props.onCopyMove?.(media.id, "copy")}
 												>
-													選択をクリア
+													他のソースへコピー
+												</ContextMenuItem>
+												<ContextMenuItem
+													onSelect={() => props.onCopyMove?.(media.id, "move")}
+												>
+													他のソースへ移動
 												</ContextMenuItem>
-												<ContextMenuSeparator />
 											</Show>
-
-											<Show when={showOpenInNewTab()}>
+											<Show when={props.onSyncSingleMedia}>
+												<ContextMenuSeparator />
 												<ContextMenuItem
-													onSelect={() => {
-														const id = contextMenuMediaId();
-														const sourceId = props.mediaSourceId();
-														if (id && sourceId) {
-															window.open(
-																`${props.detailBasePath ?? "/sources"}/${sourceId}/${id}`,
-																"_blank",
-															);
-														}
-													}}
+													onSelect={() => props.onSyncSingleMedia?.(media.id)}
 												>
-													新しいタブで開く
+													メタデータを同期 (再処理)
 												</ContextMenuItem>
 											</Show>
-
-											<ContextMenuItem
-												class="text-red-600 focus:text-red-600"
-												onSelect={() => {
-													const id = contextMenuMediaId();
-													if (id) props.onDelete?.(id);
-												}}
-											>
-												削除
-											</ContextMenuItem>
-
-											<ContextMenuSeparator />
-
-											<ContextMenuItem
-												onSelect={() => {
-													const id = contextMenuMediaId();
-													if (id) props.onCopyMove?.(id, "copy");
-												}}
-											>
-												他のソースへコピー
-											</ContextMenuItem>
-											<ContextMenuItem
-												onSelect={() => {
-													const id = contextMenuMediaId();
-													if (id) props.onCopyMove?.(id, "move");
-												}}
-											>
-												他のソースへ移動
-											</ContextMenuItem>
-
-											<ContextMenuSeparator />
-
-											<ContextMenuItem
-												onSelect={() => {
-													const id = contextMenuMediaId();
-													if (id) props.onSyncSingleMedia?.(id);
-												}}
-											>
-												メタデータを同期 (再処理)
-											</ContextMenuItem>
-										</Show>
-									</ContextMenuContent>
-								</ContextMenu>
-							</Show>
-						}
-						when={viewMode() === "list"}
-					>
-						{listContent}
+										</>
+									)}
+								</Show>
+							</ContextMenuContent>
+						</ContextMenu>
 					</Show>
 
 					{/* Empty state */}
diff --git a/packages/ui/src/source-media-page.tsx b/packages/ui/src/source-media-page.tsx
index 26b9c265..3cb56a29 100644
--- a/packages/ui/src/source-media-page.tsx
+++ b/packages/ui/src/source-media-page.tsx
@@ -7,9 +7,15 @@ import type {
 import type { Project } from "@solid-imager/core/domain/projects/schemas";
 import type { TagResponse } from "@solid-imager/core/domain/tags/schemas";
 import { createQuery, useQueryClient } from "@tanstack/solid-query";
-import type { Accessor, Component, JSX } from "solid-js";
+import {
+	type Accessor,
+	type Component,
+	createEffect,
+	type JSX,
+} from "solid-js";
 import { isServer } from "solid-js/web";
 import type { SearchPersistenceSurface } from "./hooks/use-current-search-persistence";
+import type { MediaCollectionSelectionMode } from "./hooks/use-media-collection-selection";
 import type { MediaSourceEventTransport } from "./hooks/use-media-source-events";
 import { useSearchHistoryPersistence } from "./hooks/use-search-history-persistence";
 import {
@@ -56,6 +62,8 @@ export type SourceMediaPageProps = {
 	onPrepareMediaDetail?: SourceMediaScreenProps["onPrepareMediaDetail"];
 	showOpenInNewTab?: boolean;
 	onToggleSelect?: (mediaId: string) => void;
+	onSelectMedia?: (mediaId: string, mode: MediaCollectionSelectionMode) => void;
+	onVisibleMediaIdsChange?: (mediaIds: readonly string[]) => void;
 	isBulkSelectMode?: () => boolean;
 	isSelected?: (mediaId: string) => boolean;
 	onBulkAction?: () => void;
@@ -141,6 +149,11 @@ export function SourceMediaPage(props: SourceMediaPageProps): JSX.Element {
 		/>
 	);
 	const Screen = props.screenComponent;
+	createEffect(() => {
+		props.onVisibleMediaIdsChange?.(
+			page.mediaResults().map((media) => media.id),
+		);
+	});
 
 	return (
 		<Screen
@@ -165,6 +178,7 @@ export function SourceMediaPage(props: SourceMediaPageProps): JSX.Element {
 			uploadModalComponent={props.uploadModalComponent}
 			showOpenInNewTab={props.showOpenInNewTab}
 			onToggleSelect={props.onToggleSelect}
+			onSelectMedia={props.onSelectMedia}
 			isBulkSelectMode={props.isBulkSelectMode}
 			isSelected={props.isSelected}
 			onBulkAction={props.onBulkAction}
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index b9324cc7..99c6ab12 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -130,61 +130,6 @@
 }
 
 @layer utilities {
-	.media-grid-skeleton-item:nth-child(n + 5) {
-		display: none;
-	}
-
-	@container (min-width: 30rem) {
-		.media-grid-skeleton-item:nth-child(n + 5) {
-			display: block;
-		}
-		.media-grid-skeleton-item:nth-child(n + 7) {
-			display: none;
-		}
-	}
-
-	@container (min-width: 40rem) {
-		.media-grid-skeleton-item:nth-child(n + 7) {
-			display: block;
-		}
-		.media-grid-skeleton-item:nth-child(n + 9) {
-			display: none;
-		}
-	}
-
-	@container (min-width: 50rem) {
-		.media-grid-skeleton-item:nth-child(n + 9) {
-			display: block;
-		}
-		.media-grid-skeleton-item:nth-child(n + 11) {
-			display: none;
-		}
-	}
-
-	@container (min-width: 60rem) {
-		.media-grid-skeleton-item:nth-child(n + 11) {
-			display: block;
-		}
-		.media-grid-skeleton-item:nth-child(n + 13) {
-			display: none;
-		}
-	}
-
-	@container (min-width: 65rem) {
-		.media-grid-skeleton-item:nth-child(n + 13) {
-			display: block;
-		}
-		.media-grid-skeleton-item:nth-child(n + 15) {
-			display: none;
-		}
-	}
-
-	@container (min-width: 70rem) {
-		.media-grid-skeleton-item:nth-child(n + 15) {
-			display: block;
-		}
-	}
-
 	.step {
 		counter-increment: step;
 	}
diff --git a/packages/ui/src/v2-import-review-modal.tsx b/packages/ui/src/v2-import-review-modal.tsx
index 09ca42de..6e9e1aca 100644
--- a/packages/ui/src/v2-import-review-modal.tsx
+++ b/packages/ui/src/v2-import-review-modal.tsx
@@ -111,6 +111,17 @@ export function V2ImportReviewModal(props: ImportReviewModalProps) {
 		setSelectedJobIds(current);
 		setIsDirty(true);
 	};
+	const selectAll = () => {
+		const jobs = pendingJobs() ?? [];
+		if (jobs.length === 0 || selectedJobIds().size === jobs.length) return;
+		setSelectedJobIds(new Set(jobs.map((job) => job.id)));
+		setIsDirty(true);
+	};
+	const clearSelection = () => {
+		if (selectedJobIds().size === 0) return;
+		setSelectedJobIds(createEmptySelection());
+		setIsDirty(true);
+	};
 	const requestClose = () => {
 		if (activeAction() !== null) return;
 		if (isDirty()) {
@@ -202,8 +213,37 @@ export function V2ImportReviewModal(props: ImportReviewModalProps) {
 									</For>
 								</select>
 							</label>
-							<div class="text-muted-foreground text-sm" aria-live="polite">
-								{selectedJobIds().size} of {pendingJobs()?.length ?? 0} selected
+							<div class="flex flex-wrap items-center justify-between gap-2 sm:justify-end">
+								<div class="text-muted-foreground text-sm" aria-live="polite">
+									{selectedJobIds().size} of {pendingJobs()?.length ?? 0}{" "}
+									selected
+								</div>
+								<div class="flex items-center gap-1">
+									<Button
+										class="h-8 px-2 text-xs"
+										disabled={
+											activeAction() !== null ||
+											(pendingJobs()?.length ?? 0) === 0 ||
+											selectedJobIds().size === (pendingJobs()?.length ?? 0)
+										}
+										onClick={selectAll}
+										size="sm"
+										variant="ghost"
+									>
+										Select all
+									</Button>
+									<Button
+										class="h-8 px-2 text-xs"
+										disabled={
+											activeAction() !== null || selectedJobIds().size === 0
+										}
+										onClick={clearSelection}
+										size="sm"
+										variant="ghost"
+									>
+										Clear
+									</Button>
+								</div>
 							</div>
 						</div>
 
diff --git a/packages/ui/src/v2-media-grid-item.tsx b/packages/ui/src/v2-media-grid-item.tsx
index 81f9015e..4cf234c4 100644
--- a/packages/ui/src/v2-media-grid-item.tsx
+++ b/packages/ui/src/v2-media-grid-item.tsx
@@ -49,6 +49,7 @@ type MediaGridItemProps = {
 	thumbnailClass?: string;
 	overlayClass?: string;
 	isBulkSelectMode?: boolean;
+	isPreviewSelected?: boolean;
 	isSelected?: boolean;
 };
 
@@ -67,12 +68,13 @@ export function V2MediaGridItem(props: MediaGridItemProps) {
 		<LinkComponent
 			class={cn(
 				"group relative block aspect-[4/3] overflow-hidden rounded-md bg-[var(--v2-surface-muted)] outline-none ring-offset-2 ring-offset-[var(--v2-canvas)] transition focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)]",
-				props.isSelected && "ring-2 ring-[var(--v2-focus)]",
+				(props.isSelected || props.isPreviewSelected) &&
+					"ring-2 ring-[var(--v2-focus)]",
 				props.class,
 			)}
 			data-media-id={props.media.id}
 			href={href()}
-			aria-pressed={props.isSelected}
+			aria-pressed={props.isSelected || props.isPreviewSelected}
 			onClick={undefined}
 			onContextMenu={(event) => props.onContextMenu?.(event)}
 		>
diff --git a/packages/ui/src/v2-media-viewer.tsx b/packages/ui/src/v2-media-viewer.tsx
index ad15efec..27ab01f4 100644
--- a/packages/ui/src/v2-media-viewer.tsx
+++ b/packages/ui/src/v2-media-viewer.tsx
@@ -1,11 +1,15 @@
 import {
 	createEffect,
+	createMemo,
 	createSignal,
 	Match,
 	onCleanup,
+	onMount,
 	Show,
 	Switch,
 } from "solid-js";
+import { Button } from "./button";
+import { Maximize2, Minus, Plus, RotateCcw } from "./v2/icons";
 
 export interface MediaSource {
 	type: "image" | "video" | "audio";
@@ -22,12 +26,127 @@ export interface MediaViewerProps {
 
 export function V2MediaViewer(props: MediaViewerProps) {
 	const [mediaUrl, setMediaUrl] = createSignal<string | null>(null);
+	const [zoom, setZoom] = createSignal(1);
+	const [pan, setPan] = createSignal({ x: 0, y: 0 });
+	const [isPanning, setIsPanning] = createSignal(false);
+	const [isFullscreen, setIsFullscreen] = createSignal(false);
+	const pointers = new Map<number, { x: number; y: number }>();
+	let viewer: HTMLDivElement | undefined;
+	let lastPointer: { x: number; y: number } | undefined;
+	let pinchStart:
+		| { distance: number; pan: { x: number; y: number }; zoom: number }
+		| undefined;
+	const zoomPercent = createMemo(() => Math.round(zoom() * 100));
+	const clampZoom = (value: number) => Math.min(8, Math.max(1, value));
+	const resetView = () => {
+		setZoom(1);
+		setPan({ x: 0, y: 0 });
+		pointers.clear();
+		lastPointer = undefined;
+		pinchStart = undefined;
+		setIsPanning(false);
+	};
+	const setZoomAroundPoint = (
+		nextValue: number,
+		point?: { x: number; y: number },
+	) => {
+		const previousZoom = zoom();
+		const nextZoom = clampZoom(nextValue);
+		if (nextZoom === previousZoom) return;
+		if (nextZoom === 1) {
+			resetView();
+			return;
+		}
+		if (viewer && point) {
+			const bounds = viewer.getBoundingClientRect();
+			const origin = {
+				x: point.x - bounds.left - bounds.width / 2,
+				y: point.y - bounds.top - bounds.height / 2,
+			};
+			const ratio = nextZoom / previousZoom;
+			setPan((current) => ({
+				x: origin.x - (origin.x - current.x) * ratio,
+				y: origin.y - (origin.y - current.y) * ratio,
+			}));
+		}
+		setZoom(nextZoom);
+	};
+	const pointerDistance = () => {
+		const points = [...pointers.values()];
+		if (points.length < 2) return 0;
+		return Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y);
+	};
+	const handlePointerDown = (event: PointerEvent) => {
+		if (props.source.type !== "image") return;
+		if (
+			event.target instanceof Element &&
+			event.target.closest("[data-media-viewer-controls]")
+		) {
+			return;
+		}
+		pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+		viewer?.setPointerCapture(event.pointerId);
+		if (pointers.size === 2) {
+			pinchStart = {
+				distance: pointerDistance(),
+				pan: pan(),
+				zoom: zoom(),
+			};
+			setIsPanning(true);
+			return;
+		}
+		if (zoom() > 1) {
+			lastPointer = { x: event.clientX, y: event.clientY };
+			setIsPanning(true);
+		}
+	};
+	const handlePointerMove = (event: PointerEvent) => {
+		if (!pointers.has(event.pointerId)) return;
+		pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+		if (pointers.size >= 2 && pinchStart && pinchStart.distance > 0) {
+			setZoom(
+				clampZoom(pinchStart.zoom * (pointerDistance() / pinchStart.distance)),
+			);
+			setPan(pinchStart.pan);
+			return;
+		}
+		if (!isPanning() || !lastPointer || zoom() <= 1) return;
+		const previousPointer = lastPointer;
+		const nextPointer = { x: event.clientX, y: event.clientY };
+		setPan((current) => ({
+			x: current.x + nextPointer.x - previousPointer.x,
+			y: current.y + nextPointer.y - previousPointer.y,
+		}));
+		lastPointer = nextPointer;
+	};
+	const handlePointerEnd = (event: PointerEvent) => {
+		pointers.delete(event.pointerId);
+		if (viewer?.hasPointerCapture(event.pointerId)) {
+			viewer.releasePointerCapture(event.pointerId);
+		}
+		pinchStart = undefined;
+		lastPointer = undefined;
+		setIsPanning(false);
+	};
+	const toggleFullscreen = async () => {
+		if (!viewer) return;
+		try {
+			if (document.fullscreenElement === viewer) {
+				await document.exitFullscreen();
+				return;
+			}
+			await viewer.requestFullscreen();
+		} catch {
+			// Fullscreen can be denied by browser policy; the viewer remains usable.
+		}
+	};
 
 	createEffect(() => {
 		const source = props.source;
 		let currentUrl: string | null = null;
 		let disposed = false;
 		setMediaUrl(null);
+		resetView();
 
 		void (async () => {
 			try {
@@ -52,12 +171,62 @@ export function V2MediaViewer(props: MediaViewerProps) {
 			}
 		});
 	});
+	onMount(() => {
+		const handleFullscreenChange = () => {
+			setIsFullscreen(document.fullscreenElement === viewer);
+		};
+		document.addEventListener("fullscreenchange", handleFullscreenChange);
+		onCleanup(() =>
+			document.removeEventListener("fullscreenchange", handleFullscreenChange),
+		);
+	});
 
 	return (
 		<div
-			class="flex aspect-[var(--media-aspect)] min-h-0 min-w-0 w-full items-center justify-center overflow-hidden bg-[var(--v2-surface)] lg:aspect-auto lg:h-full"
+			aria-label={
+				props.source.type === "image"
+					? `${props.fileName} viewer. Use plus and minus to zoom, and drag to pan.`
+					: undefined
+			}
+			role="region"
+			class={`group/viewer relative flex aspect-[var(--media-aspect)] min-h-0 min-w-0 w-full items-center justify-center overflow-hidden bg-[var(--v2-surface)] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--v2-focus)] lg:aspect-auto lg:h-full ${
+				isPanning() ? "cursor-grabbing" : zoom() > 1 ? "cursor-grab" : ""
+			}`}
 			data-media-viewer
-			style={`--media-aspect: ${props.width && props.height ? `${props.width} / ${props.height}` : "4 / 3"}`}
+			onDblClick={() => {
+				if (props.source.type !== "image") return;
+				if (zoom() > 1) resetView();
+				else setZoomAroundPoint(2);
+			}}
+			onKeyDown={(event) => {
+				if (props.source.type !== "image") return;
+				if (event.key === "+" || event.key === "=") {
+					event.preventDefault();
+					setZoomAroundPoint(zoom() * 1.25);
+				} else if (event.key === "-") {
+					event.preventDefault();
+					setZoomAroundPoint(zoom() / 1.25);
+				} else if (event.key === "0") {
+					event.preventDefault();
+					resetView();
+				}
+			}}
+			onPointerCancel={handlePointerEnd}
+			onPointerDown={handlePointerDown}
+			onPointerMove={handlePointerMove}
+			onPointerUp={handlePointerEnd}
+			onWheel={(event) => {
+				if (props.source.type !== "image") return;
+				if (event.deltaY >= 0 && zoom() <= 1) return;
+				event.preventDefault();
+				setZoomAroundPoint(zoom() * (event.deltaY < 0 ? 1.12 : 1 / 1.12), {
+					x: event.clientX,
+					y: event.clientY,
+				});
+			}}
+			ref={viewer}
+			style={`--media-aspect: ${props.width && props.height ? `${props.width} / ${props.height}` : "4 / 3"}; touch-action: ${zoom() > 1 ? "none" : "pan-y pinch-zoom"}`}
+			tabIndex={props.source.type === "image" ? 0 : undefined}
 		>
 			<Switch>
 				<Match when={props.source.type === "video"}>
@@ -106,16 +275,75 @@ export function V2MediaViewer(props: MediaViewerProps) {
 						{(url) => (
 							<img
 								alt={props.fileName}
-								class="h-full w-full object-contain"
+								class="pointer-events-none h-full w-full select-none object-contain motion-safe:transition-transform"
+								draggable={false}
 								fetchpriority="high"
 								height={props.height}
 								src={url()}
+								style={{
+									transform: `translate3d(${pan().x}px, ${pan().y}px, 0) scale(${zoom()})`,
+									"transition-duration": isPanning() ? "0ms" : "150ms",
+								}}
 								width={props.width}
 							/>
 						)}
 					</Show>
 				</Match>
 			</Switch>
+			<Show when={props.source.type === "image" && mediaUrl()}>
+				<div
+					aria-label="Image zoom controls"
+					class="absolute right-3 bottom-3 flex items-center gap-0.5 rounded-lg border border-[var(--v2-border)] bg-[var(--v2-surface-subtle)]/95 p-1 shadow-lg backdrop-blur"
+					data-media-viewer-controls
+					role="toolbar"
+				>
+					<Button
+						aria-label="Zoom out"
+						class="size-8 p-0"
+						disabled={zoom() <= 1}
+						onClick={() => setZoomAroundPoint(zoom() / 1.25)}
+						size="icon"
+						variant="ghost"
+					>
+						<Minus aria-hidden="true" size={15} />
+					</Button>
+					<button
+						aria-label="Reset zoom to fit"
+						class="flex h-8 min-w-14 items-center justify-center gap-1 rounded-md px-1.5 font-medium text-[11px] tabular-nums hover:bg-[var(--v2-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)]"
+						onClick={resetView}
+						type="button"
+					>
+						<RotateCcw aria-hidden="true" size={12} />
+						{zoomPercent()}%
+					</button>
+					<Button
+						aria-label="Zoom in"
+						class="size-8 p-0"
+						disabled={zoom() >= 8}
+						onClick={() => setZoomAroundPoint(zoom() * 1.25)}
+						size="icon"
+						variant="ghost"
+					>
+						<Plus aria-hidden="true" size={15} />
+					</Button>
+					<span
+						aria-hidden="true"
+						class="mx-0.5 h-5 w-px bg-[var(--v2-border)]"
+					/>
+					<Button
+						aria-label={isFullscreen() ? "Exit fullscreen" : "Enter fullscreen"}
+						class="size-8 p-0"
+						onClick={() => void toggleFullscreen()}
+						size="icon"
+						variant="ghost"
+					>
+						<Maximize2 aria-hidden="true" size={15} />
+					</Button>
+				</div>
+				<span aria-live="polite" class="sr-only">
+					Zoom {zoomPercent()} percent
+				</span>
+			</Show>
 		</div>
 	);
 }
diff --git a/packages/ui/src/v2/collection-inspector.tsx b/packages/ui/src/v2/collection-inspector.tsx
index 2d0aa895..a3040b59 100644
--- a/packages/ui/src/v2/collection-inspector.tsx
+++ b/packages/ui/src/v2/collection-inspector.tsx
@@ -1,4 +1,6 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
+import ExternalLink from "lucide-solid/icons/external-link";
+import X from "lucide-solid/icons/x";
 import type { JSX } from "solid-js";
 import { getOwner, runWithOwner, Show } from "solid-js";
 import { Button } from "../button";
@@ -6,12 +8,13 @@ import { Button } from "../button";
 type V2CollectionInspectorProps = {
 	media: Media | undefined;
 	sourceName?: string;
+	onClose?: () => void;
 	onOpenDetail?: (media: Media) => void;
 	renderPreview: (media: Media) => JSX.Element;
 };
 
-function formatFileSize(bytes: number | null) {
-	if (bytes === null) return null;
+function formatFileSize(bytes: number | null): string {
+	if (bytes === null) return "—";
 	const units = ["B", "KB", "MB", "GB"];
 	let value = bytes;
 	let unitIndex = 0;
@@ -35,75 +38,135 @@ export function V2CollectionInspector(props: V2CollectionInspectorProps) {
 		owner ? runWithOwner(owner, render) : render();
 
 	return (
-		<aside
-			aria-label="選択中のメディア"
-			class="sticky top-0 hidden h-fit min-w-0 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-3 2xl:block"
-		>
-			<Show
-				keyed
-				fallback={
-					<div class="flex aspect-[4/3] items-center justify-center rounded-md bg-[var(--v2-surface-muted)] px-6 text-center text-[var(--v2-text-muted)] text-sm">
-						メディアを選択すると、ここにプレビューと概要が表示されます
-					</div>
-				}
-				when={props.media}
-			>
+		<>
+			<Show keyed when={props.media}>
 				{(media) => (
-					<div class="space-y-3">
-						<div class="aspect-[4/3] overflow-hidden rounded-md bg-[var(--v2-surface-muted)]">
-							{renderOwned(() => props.renderPreview(media))}
-						</div>
-						<div class="min-w-0">
-							<p
-								class="break-words font-semibold text-[var(--v2-text)] text-sm"
-								title={media.fileName}
-							>
-								{media.fileName}
-							</p>
-							<dl class="mt-3 grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-2 text-xs">
-								<dt class="text-[var(--v2-text-muted)]">解像度</dt>
-								<dd class="text-right text-[var(--v2-text)]">
-									{media.width} × {media.height}
-								</dd>
-								<Show when={formatFileSize(media.fileSize)}>
-									{(size) => (
-										<>
-											<dt class="text-[var(--v2-text-muted)]">サイズ</dt>
-											<dd class="text-right text-[var(--v2-text)]">{size()}</dd>
-										</>
-									)}
-								</Show>
-								<dt class="text-[var(--v2-text-muted)]">作成日</dt>
-								<dd class="text-right text-[var(--v2-text)]">
-									{formatDate(media.createdAt)}
-								</dd>
-								<Show when={props.sourceName}>
-									{(sourceName) => (
-										<>
-											<dt class="text-[var(--v2-text-muted)]">ソース</dt>
-											<dd
-												class="truncate text-right text-[var(--v2-text)]"
-												title={sourceName()}
-											>
-												{sourceName()}
-											</dd>
-										</>
-									)}
-								</Show>
-							</dl>
-						</div>
+					<aside
+						aria-label="選択中のメディア"
+						class="sticky bottom-0 z-20 mt-3 flex min-w-0 items-center gap-2 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)]/95 p-2 shadow-sm backdrop-blur-sm 2xl:hidden"
+					>
+						<p
+							class="min-w-0 flex-1 truncate px-1 font-medium text-[var(--v2-text)] text-xs"
+							title={media.fileName}
+						>
+							{media.fileName}
+						</p>
 						<Show when={props.onOpenDetail}>
 							<Button
-								class="min-h-11 w-full sm:min-h-9"
+								class="h-9 shrink-0"
 								onClick={() => props.onOpenDetail?.(media)}
 								size="sm"
 							>
 								詳細を開く
 							</Button>
 						</Show>
-					</div>
+						<Show when={props.onClose}>
+							<Button
+								aria-label="選択中のメディアを閉じる"
+								class="size-9 shrink-0 p-0 text-[var(--v2-text-muted)]"
+								onClick={() => props.onClose?.()}
+								size="icon"
+								variant="ghost"
+							>
+								<X aria-hidden="true" size={15} />
+							</Button>
+						</Show>
+					</aside>
 				)}
 			</Show>
-		</aside>
+
+			<aside
+				aria-label="選択中のメディア"
+				class="sticky top-0 hidden max-h-[calc(100dvh-8rem)] min-h-0 min-w-0 overflow-hidden rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] 2xl:flex 2xl:flex-col"
+			>
+				<header class="z-10 flex h-12 shrink-0 items-center border-[var(--v2-border)] border-b bg-[var(--v2-surface)]/95 px-4 backdrop-blur-sm">
+					<h2 class="min-w-0 flex-1 truncate font-semibold text-[var(--v2-text)] text-sm">
+						選択中のメディア
+					</h2>
+					<Show when={props.onClose}>
+						<Button
+							aria-label="インスペクターを閉じる"
+							class="size-8 shrink-0 p-0 text-[var(--v2-text-muted)]"
+							onClick={() => props.onClose?.()}
+							size="icon"
+							variant="ghost"
+						>
+							<X aria-hidden="true" size={15} />
+						</Button>
+					</Show>
+				</header>
+
+				<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-4 [scrollbar-gutter:stable]">
+					<Show
+						keyed
+						fallback={
+							<div class="space-y-4">
+								<div class="flex aspect-[4/3] items-center justify-center rounded-md bg-[var(--v2-surface-muted)] px-6 text-center text-[var(--v2-text-muted)] text-sm">
+									メディアを選択するとプレビューを表示します
+								</div>
+								<p class="text-center text-[var(--v2-text-muted)] text-xs leading-5">
+									一覧からメディアを選択してください
+								</p>
+							</div>
+						}
+						when={props.media}
+					>
+						{(media) => (
+							<div>
+								<div class="aspect-[4/3] overflow-hidden rounded-md bg-[var(--v2-surface-muted)]">
+									{renderOwned(() => props.renderPreview(media))}
+								</div>
+								<section class="border-[var(--v2-border)] border-b py-4">
+									<h3
+										class="break-words font-semibold text-[var(--v2-text)] text-sm"
+										title={media.fileName}
+									>
+										{media.fileName}
+									</h3>
+									<p class="mt-2 whitespace-pre-wrap break-words text-[var(--v2-text-secondary)] text-xs leading-5">
+										{media.description?.trim() || "説明はありません"}
+									</p>
+								</section>
+								<dl class="grid grid-cols-[5rem_minmax(0,1fr)] gap-x-3 gap-y-2.5 border-[var(--v2-border)] border-b py-4 text-xs">
+									<dt class="text-[var(--v2-text-muted)]">解像度</dt>
+									<dd class="text-right text-[var(--v2-text)]">
+										{media.width} × {media.height}
+									</dd>
+									<dt class="text-[var(--v2-text-muted)]">サイズ</dt>
+									<dd class="text-right text-[var(--v2-text)]">
+										{formatFileSize(media.fileSize)}
+									</dd>
+									<dt class="text-[var(--v2-text-muted)]">ソース</dt>
+									<dd
+										class="truncate text-right text-[var(--v2-text)]"
+										title={props.sourceName}
+									>
+										{props.sourceName ?? "—"}
+									</dd>
+									<dt class="text-[var(--v2-text-muted)]">作成日</dt>
+									<dd class="text-right text-[var(--v2-text)]">
+										{formatDate(media.createdAt)}
+									</dd>
+									<dt class="text-[var(--v2-text-muted)]">更新日</dt>
+									<dd class="text-right text-[var(--v2-text)]">
+										{formatDate(media.modifiedAt)}
+									</dd>
+								</dl>
+								<Show when={props.onOpenDetail}>
+									<Button
+										class="mt-4 min-h-11 w-full sm:min-h-9"
+										onClick={() => props.onOpenDetail?.(media)}
+										size="sm"
+									>
+										<ExternalLink aria-hidden="true" size={14} />
+										詳細を開く
+									</Button>
+								</Show>
+							</div>
+						)}
+					</Show>
+				</div>
+			</aside>
+		</>
 	);
 }
diff --git a/packages/ui/src/v2/collection-navigation.test.ts b/packages/ui/src/v2/collection-navigation.test.ts
new file mode 100644
index 00000000..5e3b23fa
--- /dev/null
+++ b/packages/ui/src/v2/collection-navigation.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import {
+	findCollectionItemById,
+	getCollectionNavigationIndex,
+	isCollectionNavigationKey,
+	isCollectionScrollNearEnd,
+	reconcileCollectionPreviewId,
+} from "./collection-navigation";
+
+describe("collection navigation", () => {
+	it("moves spatially and clamps at collection edges", () => {
+		expect(
+			getCollectionNavigationIndex({
+				columnCount: 4,
+				currentIndex: 5,
+				itemCount: 10,
+				key: "ArrowDown",
+				pageRowCount: 2,
+			}),
+		).toBe(9);
+		expect(
+			getCollectionNavigationIndex({
+				columnCount: 4,
+				currentIndex: 2,
+				itemCount: 10,
+				key: "PageDown",
+				pageRowCount: 2,
+			}),
+		).toBe(9);
+		expect(
+			getCollectionNavigationIndex({
+				columnCount: 4,
+				currentIndex: 0,
+				itemCount: 10,
+				key: "ArrowUp",
+				pageRowCount: 2,
+			}),
+		).toBe(0);
+	});
+
+	it("recognizes only delegated collection navigation keys", () => {
+		expect(isCollectionNavigationKey("Home")).toBe(true);
+		expect(isCollectionNavigationKey("Enter")).toBe(false);
+	});
+});
+
+describe("collection preview reconciliation", () => {
+	const items = [{ id: "one" }, { id: "two" }];
+
+	it("keeps a visible selection", () => {
+		expect(reconcileCollectionPreviewId(items, "two")).toBe("two");
+	});
+
+	it("selects the first item when the previous selection disappears", () => {
+		expect(reconcileCollectionPreviewId(items, "missing")).toBe("one");
+		expect(reconcileCollectionPreviewId([], "missing")).toBeNull();
+	});
+
+	it("does not reuse a stale context-menu target", () => {
+		expect(findCollectionItemById(items, "two")).toEqual({ id: "two" });
+		expect(findCollectionItemById(items, "removed")).toBeUndefined();
+		expect(findCollectionItemById(items, null)).toBeUndefined();
+	});
+});
+
+describe("collection scroll threshold", () => {
+	it("reports proximity without requiring an exact bottom position", () => {
+		expect(
+			isCollectionScrollNearEnd({
+				contentSize: 2_000,
+				scrollOffset: 1_100,
+				threshold: 400,
+				viewportSize: 500,
+			}),
+		).toBe(true);
+		expect(
+			isCollectionScrollNearEnd({
+				contentSize: 2_000,
+				scrollOffset: 800,
+				threshold: 400,
+				viewportSize: 500,
+			}),
+		).toBe(false);
+	});
+});
diff --git a/packages/ui/src/v2/collection-navigation.ts b/packages/ui/src/v2/collection-navigation.ts
new file mode 100644
index 00000000..54e3c1ca
--- /dev/null
+++ b/packages/ui/src/v2/collection-navigation.ts
@@ -0,0 +1,103 @@
+export type CollectionNavigationKey =
+	| "ArrowDown"
+	| "ArrowLeft"
+	| "ArrowRight"
+	| "ArrowUp"
+	| "End"
+	| "Home"
+	| "PageDown"
+	| "PageUp";
+
+const COLLECTION_NAVIGATION_KEYS = new Set<string>([
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home",
+	"PageDown",
+	"PageUp",
+]);
+
+export function isCollectionNavigationKey(
+	key: string,
+): key is CollectionNavigationKey {
+	return COLLECTION_NAVIGATION_KEYS.has(key);
+}
+
+export function getCollectionNavigationIndex(options: {
+	columnCount: number;
+	currentIndex: number;
+	itemCount: number;
+	key: CollectionNavigationKey;
+	pageRowCount: number;
+}): number | null {
+	if (options.itemCount <= 0) return null;
+
+	const currentIndex = Math.min(
+		Math.max(options.currentIndex, 0),
+		options.itemCount - 1,
+	);
+	const columnCount = Math.max(options.columnCount, 1);
+	const pageSize = columnCount * Math.max(options.pageRowCount, 1);
+	let nextIndex = currentIndex;
+
+	switch (options.key) {
+		case "ArrowLeft":
+			nextIndex -= 1;
+			break;
+		case "ArrowRight":
+			nextIndex += 1;
+			break;
+		case "ArrowUp":
+			nextIndex -= columnCount;
+			break;
+		case "ArrowDown":
+			nextIndex += columnCount;
+			break;
+		case "Home":
+			nextIndex = 0;
+			break;
+		case "End":
+			nextIndex = options.itemCount - 1;
+			break;
+		case "PageUp":
+			nextIndex -= pageSize;
+			break;
+		case "PageDown":
+			nextIndex += pageSize;
+			break;
+	}
+
+	return Math.min(Math.max(nextIndex, 0), options.itemCount - 1);
+}
+
+export function reconcileCollectionPreviewId(
+	items: readonly { id: string }[],
+	currentId: string | null,
+): string | null {
+	if (currentId && items.some((item) => item.id === currentId)) {
+		return currentId;
+	}
+	return items[0]?.id ?? null;
+}
+
+export function findCollectionItemById<T extends { id: string }>(
+	items: readonly T[],
+	itemId: string | null | undefined,
+): T | undefined {
+	if (!itemId) return undefined;
+	return items.find((item) => item.id === itemId);
+}
+
+export function isCollectionScrollNearEnd(options: {
+	contentSize: number;
+	scrollOffset: number;
+	threshold: number;
+	viewportSize: number;
+}): boolean {
+	return (
+		options.contentSize - (options.scrollOffset + options.viewportSize) <=
+		Math.max(options.threshold, 0)
+	);
+}
diff --git a/packages/ui/src/v2/icons.tsx b/packages/ui/src/v2/icons.tsx
index d59080b0..3a0c2436 100644
--- a/packages/ui/src/v2/icons.tsx
+++ b/packages/ui/src/v2/icons.tsx
@@ -81,6 +81,12 @@ export const Database = icon(() => (
 		<path d="M3 12a9 3 0 0 0 18 0" />
 	</>
 ));
+export const Download = icon(() => (
+	<>
+		<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+		<path d="m7 10 5 5 5-5M12 15V3" />
+	</>
+));
 export const Ellipsis = icon(() => (
 	<>
 		<circle cx="5" cy="12" r="1" />
@@ -107,6 +113,12 @@ export const Library = icon(() => (
 	</>
 ));
 export const Menu = icon(() => <path d="M4 5h16M4 12h16M4 19h16" />);
+export const Maximize2 = icon(() => (
+	<>
+		<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
+	</>
+));
+export const Minus = icon(() => <path d="M5 12h14" />);
 export const PanelLeftClose = icon(() => (
 	<>
 		<rect height="18" rx="2" width="18" x="3" y="3" />
@@ -127,6 +139,12 @@ export const RefreshCw = icon(() => (
 		<path d="M8 16H3v5" />
 	</>
 ));
+export const RotateCcw = icon(() => (
+	<>
+		<path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+		<path d="M3 3v5h5" />
+	</>
+));
 export const Scan = icon(() => (
 	<>
 		<path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" />
@@ -157,3 +175,9 @@ export const Sparkles = icon(() => (
 		<path d="m12 3-1.5 4.5L6 9l4.5 1.5L12 15l1.5-4.5L18 9l-4.5-1.5zM5 17l-.75 2.25L2 20l2.25.75L5 23l.75-2.25L8 20l-2.25-.75zM19 15l-.75 2.25L16 18l2.25.75L19 21l.75-2.25L22 18l-2.25-.75z" />
 	</>
 ));
+export const Trash2 = icon(() => (
+	<>
+		<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+		<path d="M10 11v6M14 11v6" />
+	</>
+));
diff --git a/packages/ui/src/v2/search-composer.tsx b/packages/ui/src/v2/search-composer.tsx
index 2ac4b5fb..bd7bc1d3 100644
--- a/packages/ui/src/v2/search-composer.tsx
+++ b/packages/ui/src/v2/search-composer.tsx
@@ -12,6 +12,7 @@ import {
 } from "../combobox";
 import type { SearchPageFilterData } from "../hooks/use-search-page";
 import { Label } from "../label";
+import { ShortcutKbd } from "../shortcuts/shortcut-kbd";
 import { createDebouncedSignal } from "../utils/debounce";
 
 export type {
@@ -191,9 +192,10 @@ export function SearchComposer(props: SearchComposerProps) {
 				</ComboboxControl>
 				<VirtualComboboxContent class="v2-theme w-[min(28rem,calc(100dvw-1.5rem))] p-1 shadow-xl" />
 			</Combobox>
-			<kbd class="absolute top-2 right-2 rounded border border-[var(--v2-border)] bg-[var(--v2-surface-muted)] px-1.5 py-0.5 text-[10px] text-[var(--v2-text-muted)]">
-				/
-			</kbd>
+			<ShortcutKbd
+				class="pointer-events-none absolute top-2 right-2 min-h-5 border-[var(--v2-border)] px-1.5 py-0.5 text-[10px] text-[var(--v2-text-muted)] shadow-none"
+				shortcutId="focusSearch"
+			/>
 		</form>
 	);
 }
diff --git a/packages/ui/src/v2/search-toolbar.tsx b/packages/ui/src/v2/search-toolbar.tsx
index 5b515b3c..5c7f8fdb 100644
--- a/packages/ui/src/v2/search-toolbar.tsx
+++ b/packages/ui/src/v2/search-toolbar.tsx
@@ -6,18 +6,12 @@ import Filter from "lucide-solid/icons/filter";
 import Grid3X3 from "lucide-solid/icons/grid-3-x-3";
 import List from "lucide-solid/icons/list";
 import type { JSX } from "solid-js";
-import {
-	batch,
-	createMemo,
-	createSignal,
-	onCleanup,
-	onMount,
-	Show,
-} from "solid-js";
+import { batch, createMemo, createSignal, onCleanup, Show } from "solid-js";
 import { Button, buttonVariants } from "../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import type { PresetManagerClient } from "../search-control-panel";
 import { SearchControlPanel } from "../search-control-panel";
+import { createAppShortcut } from "../shortcuts/create-app-shortcut";
 import { SortControls } from "../sort-controls";
 import type { SourceMediaViewMode } from "../source-media-grid";
 import {
@@ -303,27 +297,17 @@ export function V2SearchToolbar(props: V2SearchToolbarProps) {
 		props.onSearch();
 	};
 
-	onMount(() => {
-		const focusComposer = (event: KeyboardEvent) => {
-			const target = event.target;
-			const isEditing =
-				target instanceof HTMLElement &&
-				(target.matches("input, textarea, select") || target.isContentEditable);
-			if (
-				event.key !== "/" ||
-				event.metaKey ||
-				event.ctrlKey ||
-				event.altKey ||
-				isEditing
-			) {
-				return;
-			}
-			event.preventDefault();
-			composerInput?.focus();
-		};
-		window.addEventListener("keydown", focusComposer);
-		onCleanup(() => window.removeEventListener("keydown", focusComposer));
-	});
+	createAppShortcut("focusSearch", () => composerInput?.focus());
+	createAppShortcut(
+		"viewGrid",
+		() => props.onViewModeChange?.("grid"),
+		() => ({ enabled: props.onViewModeChange !== undefined }),
+	);
+	createAppShortcut(
+		"viewList",
+		() => props.onViewModeChange?.("list"),
+		() => ({ enabled: props.onViewModeChange !== undefined }),
+	);
 
 	return (
 		<header class="shrink-0 border-[var(--v2-border)] border-b bg-[var(--v2-surface-subtle)] px-3 py-3 sm:px-4">

From 5a15dabe68275adaacb2bf979030d3bf5133082f Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 24 Aug 2026 23:09:11 +0900
Subject: [PATCH 3/5] fix(v2): address review accessibility findings

---
 .../src/components/media/v2-media-actions.tsx |  11 +-
 .../components/media/v2-media-grid-item.tsx   |   6 +-
 .../src/components/v2/v2-command-center.tsx   | 115 +++++++++++-------
 .../v2/components/v2-search-content.tsx       |   6 +-
 ...-interface-interactions.responsive.spec.ts |   7 +-
 packages/ui/src/source-media-grid.tsx         |  44 ++++---
 packages/ui/src/v2-media-grid-item.tsx        |  11 +-
 7 files changed, 116 insertions(+), 84 deletions(-)

diff --git a/apps/server/src/components/media/v2-media-actions.tsx b/apps/server/src/components/media/v2-media-actions.tsx
index 92d87b57..3f8b651f 100644
--- a/apps/server/src/components/media/v2-media-actions.tsx
+++ b/apps/server/src/components/media/v2-media-actions.tsx
@@ -2,7 +2,6 @@ import type { MediaDetails } from "@solid-imager/core/domain/media/schemas";
 import { getErrorMessage } from "@solid-imager/core/utils";
 import {
 	AlertDialog,
-	AlertDialogAction,
 	AlertDialogCancel,
 	AlertDialogContent,
 	AlertDialogDescription,
@@ -345,15 +344,13 @@ export function V2MediaActions(props: MediaActionsProps) {
 						<AlertDialogCancel disabled={isDeleting()}>
 							Cancel
 						</AlertDialogCancel>
-						<AlertDialogAction
+						<Button
 							disabled={isDeleting()}
-							onClick={(event) => {
-								event.preventDefault();
-								void handleDelete();
-							}}
+							onClick={() => void handleDelete()}
+							variant="destructive"
 						>
 							{isDeleting() ? "Deleting…" : "Delete"}
-						</AlertDialogAction>
+						</Button>
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
diff --git a/apps/server/src/components/media/v2-media-grid-item.tsx b/apps/server/src/components/media/v2-media-grid-item.tsx
index 45f7ef0f..9238edce 100644
--- a/apps/server/src/components/media/v2-media-grid-item.tsx
+++ b/apps/server/src/components/media/v2-media-grid-item.tsx
@@ -31,6 +31,7 @@ export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
 
 	const detailLink = (linkProps: MediaGridLinkProps) => (
 		<Link
+			aria-current={linkProps["aria-current"]}
 			aria-pressed={linkProps["aria-pressed"]}
 			class={linkProps.class}
 			data-media-id={linkProps["data-media-id"]}
@@ -112,10 +113,7 @@ export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
 						data-media-id={linkProps["data-media-id"]}
 						onClick={(event) => {
 							event.preventDefault();
-							if (
-								props.onSelectGesture &&
-								isModifiedSelectionClick(event)
-							) {
+							if (props.onSelectGesture && isModifiedSelectionClick(event)) {
 								props.onSelectGesture(event);
 								return;
 							}
diff --git a/apps/server/src/components/v2/v2-command-center.tsx b/apps/server/src/components/v2/v2-command-center.tsx
index 22a49a1d..9679eb50 100644
--- a/apps/server/src/components/v2/v2-command-center.tsx
+++ b/apps/server/src/components/v2/v2-command-center.tsx
@@ -50,6 +50,12 @@ type PaletteAction = {
 	shortcutId?: ShortcutId;
 };
 
+type PaletteActionGroup = {
+	actions: PaletteAction[];
+	group: PaletteAction["group"];
+	startIndex: number;
+};
+
 export function V2CommandCenter(props: V2CommandCenterProps) {
 	const navigate = useNavigate();
 	const listId = createUniqueId();
@@ -121,6 +127,22 @@ export function V2CommandCenter(props: V2CommandCenterProps) {
 				.includes(normalizedQuery),
 		);
 	});
+	const groupedActions = createMemo<PaletteActionGroup[]>(() => {
+		const groups: PaletteActionGroup[] = [];
+		for (const [index, action] of filteredActions().entries()) {
+			const lastGroup = groups[groups.length - 1];
+			if (!lastGroup || lastGroup.group !== action.group) {
+				groups.push({
+					actions: [action],
+					group: action.group,
+					startIndex: index,
+				});
+				continue;
+			}
+			lastGroup.actions.push(action);
+		}
+		return groups;
+	});
 	const itemId = (index: number) => `${listId}-option-${index}`;
 	const runAction = (action: PaletteAction) => {
 		props.onPaletteOpenChange(false);
@@ -210,48 +232,57 @@ export function V2CommandCenter(props: V2CommandCenterProps) {
 							}
 							when={filteredActions().length > 0}
 						>
-							<For each={filteredActions()}>
-								{(action, index) => {
-									const Icon = action.icon;
-									return (
-										<>
-											<Show
-												when={
-													index() === 0 ||
-													filteredActions()[index() - 1]?.group !== action.group
-												}
-											>
-												<p class="px-2 pt-2 pb-1 font-semibold text-[var(--v2-text-muted)] text-[11px] uppercase tracking-wide">
-													{action.group}
-												</p>
-											</Show>
-											<button
-												aria-selected={activeIndex() === index()}
-												class={`flex min-h-10 w-full items-center gap-3 rounded-md px-2.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] ${
-													activeIndex() === index()
-														? "bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"
-														: "hover:bg-[var(--v2-surface-muted)]"
-												}`}
-												id={itemId(index())}
-												onClick={() => runAction(action)}
-												onPointerMove={() => setActiveIndex(index())}
-												role="option"
-												tabIndex={-1}
-												type="button"
-											>
-												<Icon aria-hidden="true" class="shrink-0" size={17} />
-												<span class="min-w-0 flex-1 truncate">
-													{action.label}
-												</span>
-												<Show when={action.shortcutId}>
-													{(shortcutId) => (
-														<ShortcutKbd shortcutId={shortcutId()} />
-													)}
-												</Show>
-											</button>
-										</>
-									);
-								}}
+							<For each={groupedActions()}>
+								{(actionGroup) => (
+									<fieldset
+										aria-label={actionGroup.group}
+										class="m-0 min-w-0 border-0 p-0"
+									>
+										<p
+											aria-hidden="true"
+											class="px-2 pt-2 pb-1 font-semibold text-[var(--v2-text-muted)] text-[11px] uppercase tracking-wide"
+										>
+											{actionGroup.group}
+										</p>
+										<For each={actionGroup.actions}>
+											{(action, index) => {
+												const Icon = action.icon;
+												const flatIndex = () =>
+													actionGroup.startIndex + index();
+												return (
+													<button
+														aria-selected={activeIndex() === flatIndex()}
+														class={`flex min-h-10 w-full items-center gap-3 rounded-md px-2.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] ${
+															activeIndex() === flatIndex()
+																? "bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"
+																: "hover:bg-[var(--v2-surface-muted)]"
+														}`}
+														id={itemId(flatIndex())}
+														onClick={() => runAction(action)}
+														onPointerMove={() => setActiveIndex(flatIndex())}
+														role="option"
+														tabIndex={-1}
+														type="button"
+													>
+														<Icon
+															aria-hidden="true"
+															class="shrink-0"
+															size={17}
+														/>
+														<span class="min-w-0 flex-1 truncate">
+															{action.label}
+														</span>
+														<Show when={action.shortcutId}>
+															{(shortcutId) => (
+																<ShortcutKbd shortcutId={shortcutId()} />
+															)}
+														</Show>
+													</button>
+												);
+											}}
+										</For>
+									</fieldset>
+								)}
 							</For>
 						</Show>
 					</div>
diff --git a/apps/server/src/routes/v2/components/v2-search-content.tsx b/apps/server/src/routes/v2/components/v2-search-content.tsx
index 1465a454..0a9a251c 100644
--- a/apps/server/src/routes/v2/components/v2-search-content.tsx
+++ b/apps/server/src/routes/v2/components/v2-search-content.tsx
@@ -143,9 +143,9 @@ export default function V2SearchContent() {
 					media={media}
 					onOpenMediaDetail={options?.onOpenMediaDetail}
 					onPreviewSelect={options?.onPreviewSelect}
-						onSelectGesture={options?.onSelectGesture}
-						onToggleSelect={options?.onToggleSelect}
-						priority={options?.priority}
+					onSelectGesture={options?.onSelectGesture}
+					onToggleSelect={options?.onToggleSelect}
+					priority={options?.priority}
 					onPrepareMediaDetail={options?.onPrepareMediaDetail}
 				/>
 			)}
diff --git a/apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts b/apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts
index 5883160c..5b4af339 100644
--- a/apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts
+++ b/apps/server/src/tests/e2e/v2-interface-interactions.responsive.spec.ts
@@ -147,7 +147,8 @@ test("V2 fine-pointer collection separates selection from opening detail", async
 	);
 	await similarMedia.click();
 	await expect(page).toHaveURL(/\/v2\/search(?:\?.*)?$/);
-	await expect(similarMedia).toHaveAttribute("aria-pressed", "true");
+	await expect(similarMedia).toHaveAttribute("aria-current", "true");
+	await expect(similarMedia).toHaveAttribute("aria-pressed", "false");
 	const inspector = page.getByRole("complementary", {
 		name: "選択中のメディア",
 	});
@@ -156,9 +157,7 @@ test("V2 fine-pointer collection separates selection from opening detail", async
 	await similarMedia.dblclick();
 	await expect(page).toHaveURL(v2MediaPath(E2E_SIMILAR_MEDIA_ID));
 	await expect(
-		page.locator(
-			`[data-media-viewer] img[alt="${E2E_SIMILAR_FILE_NAME}"]`,
-		),
+		page.locator(`[data-media-viewer] img[alt="${E2E_SIMILAR_FILE_NAME}"]`),
 	).toBeVisible();
 
 	await page.goBack();
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index b1f5daef..9ba3c042 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -189,7 +189,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	const [internalContextMenuMedia, setInternalContextMenuMedia] =
 		createSignal<Media>();
 	let collectionRootRef: HTMLDivElement | undefined;
-	let mediaGridRef: HTMLDivElement | undefined;
+	let mediaGridRef: HTMLElement | undefined;
 	let mediaGridResizeObserver: ResizeObserver | undefined;
 	let metricsFrameId: number | undefined;
 	let focusFrameId: number | undefined;
@@ -595,7 +595,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		return Math.max(Math.floor(viewportHeight / rowHeight), 1);
 	};
 
-	const handleGridKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (
+	const handleGridKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (
 		event,
 	) => {
 		if (!isCollectionNavigationKey(event.key)) return;
@@ -644,10 +644,9 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	};
 
 	const gridContent = (
-		<div
+		<section
 			class="@container relative min-w-0 w-full"
 			aria-label="メディア一覧"
-			role="grid"
 			onFocusIn={(event) => {
 				const media = findMediaFromEventTarget(event.target);
 				if (media) setActiveMediaId(media.id);
@@ -715,13 +714,13 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 										get isBulkSelectMode() {
 											return props.isBulkSelectMode?.();
 										},
-						get isSelected() {
-							return props.isSelected?.(media.id);
-						},
-						onToggleSelect: props.onToggleSelect
-							? () => props.onToggleSelect?.(media.id)
-							: undefined,
-						onPreviewSelect: createMediaPreviewSelectHandler(
+										get isSelected() {
+											return props.isSelected?.(media.id);
+										},
+										onToggleSelect: props.onToggleSelect
+											? () => props.onToggleSelect?.(media.id)
+											: undefined,
+										onPreviewSelect: createMediaPreviewSelectHandler(
 											media,
 											props.onPreviewSelect,
 										),
@@ -780,13 +779,13 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 											get isBulkSelectMode() {
 												return props.isBulkSelectMode?.();
 											},
-							get isSelected() {
-								return props.isSelected?.(media.id);
-							},
-							onToggleSelect: props.onToggleSelect
-								? () => props.onToggleSelect?.(media.id)
-								: undefined,
-							onPreviewSelect: createMediaPreviewSelectHandler(
+											get isSelected() {
+												return props.isSelected?.(media.id);
+											},
+											onToggleSelect: props.onToggleSelect
+												? () => props.onToggleSelect?.(media.id)
+												: undefined,
+											onPreviewSelect: createMediaPreviewSelectHandler(
 												media,
 												props.onPreviewSelect,
 											),
@@ -804,7 +803,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 					}}
 				</For>
 			</Show>
-		</div>
+		</section>
 	);
 	const formatFileSize = (bytes: number | null): string => {
 		if (bytes === null) return "—";
@@ -1047,17 +1046,16 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 							<ContextMenuTrigger
 								class="block min-w-0 w-full"
 								onPointerDown={(event) => {
-									if (event.button === 2 || event.pointerType !== "mouse") {
+									if (event.button === 2) {
 										setContextMenuTarget(
 											findMediaFromEventTarget(event.target),
 										);
 									}
 								}}
 							>
-								<div
+								<section
 									class="min-w-0 w-full"
 									aria-label="メディア一覧の操作対象"
-									role="region"
 									onContextMenu={(event) => {
 										const media = findMediaFromEventTarget(event.target);
 										setContextMenuTarget(media);
@@ -1068,7 +1066,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 									}}
 								>
 									{collectionContent}
-								</div>
+								</section>
 							</ContextMenuTrigger>
 							<ContextMenuContent class="v2-theme min-w-56 max-w-80">
 								<Show
diff --git a/packages/ui/src/v2-media-grid-item.tsx b/packages/ui/src/v2-media-grid-item.tsx
index 4cf234c4..2684c0bd 100644
--- a/packages/ui/src/v2-media-grid-item.tsx
+++ b/packages/ui/src/v2-media-grid-item.tsx
@@ -30,6 +30,14 @@ export type MediaGridLinkProps = {
 	class: string;
 	"data-media-id": string;
 	href: string;
+	"aria-current"?:
+		| "date"
+		| "false"
+		| "location"
+		| "page"
+		| "step"
+		| "time"
+		| "true";
 	"aria-pressed"?: boolean;
 	onClick?: (event: MouseEvent) => void;
 	onContextMenu: (event: MouseEvent) => void;
@@ -74,7 +82,8 @@ export function V2MediaGridItem(props: MediaGridItemProps) {
 			)}
 			data-media-id={props.media.id}
 			href={href()}
-			aria-pressed={props.isSelected || props.isPreviewSelected}
+			aria-current={props.isPreviewSelected ? "true" : undefined}
+			aria-pressed={props.isSelected}
 			onClick={undefined}
 			onContextMenu={(event) => props.onContextMenu?.(event)}
 		>

From 8639e9e5763946695b41b73c3a14d0b6d90324a7 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Wed, 26 Aug 2026 22:54:59 +0900
Subject: [PATCH 4/5] chore(deps): keep solid-query pinned for orpc
 compatibility

---
 apps/server/package.json |   2 +-
 apps/tauri/package.json  |   2 +-
 bun.lock                 | 120 ++++++++++++++-------------------------
 packages/ui/package.json |   2 +-
 4 files changed, 46 insertions(+), 80 deletions(-)

diff --git a/apps/server/package.json b/apps/server/package.json
index cec03a67..4b546447 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -49,7 +49,7 @@
     "@solid-imager/ui": "workspace:*",
     "@tanstack/router-plugin": "^1.168.14",
     "@tanstack/solid-form": "^1.33.0",
-    "@tanstack/solid-query": "5.101.4",
+    "@tanstack/solid-query": "5.99.2",
     "@tanstack/solid-router": "1.170.16",
     "@tanstack/solid-router-devtools": "^1.167.0",
     "@tanstack/solid-router-ssr-query": "^1.167.1",
diff --git a/apps/tauri/package.json b/apps/tauri/package.json
index f55a20d5..331a8398 100644
--- a/apps/tauri/package.json
+++ b/apps/tauri/package.json
@@ -25,7 +25,7 @@
     "@tanstack/db": "^0.7.2",
     "@tanstack/query-db-collection": "^1.0.40",
     "@tanstack/solid-db": "^0.2.22",
-    "@tanstack/solid-query": "5.101.4",
+    "@tanstack/solid-query": "5.99.2",
     "@tanstack/solid-router": "latest",
     "@tanstack/tauri-db-sqlite-persistence": "^0.2.0",
     "@tauri-apps/api": "^2.11.0",
diff --git a/bun.lock b/bun.lock
index c3c4c86b..831ac1ca 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,7 +7,7 @@
       "devDependencies": {
         "@biomejs/biome": "^2.5.0",
         "@google/design.md": "^0.4.0",
-        "@tanstack/cli": "^0.69.4",
+        "@tanstack/cli": "^0.70.2",
         "husky": "^9.1.7",
         "lint-staged": "^16.2.7",
         "nitro": "npm:nitro-nightly@3.0.1-20260601-173724-a2597363",
@@ -25,7 +25,7 @@
         "@orpc/client": "^1.14.4",
         "@solid-imager/client": "workspace:*",
         "@solid-imager/core": "workspace:*",
-        "incur": "^0.4.8",
+        "incur": "^0.5.1",
         "zod": "^4.4.3",
       },
       "devDependencies": {
@@ -38,8 +38,8 @@
       "name": "@solid-imager/server",
       "version": "0.0.0",
       "dependencies": {
-        "@electric-sql/pglite": "0.5.3",
-        "@electric-sql/pglite-pgvector": "0.0.4",
+        "@electric-sql/pglite": "0.5.5",
+        "@electric-sql/pglite-pgvector": "0.0.6",
         "@orpc/client": "^1.14.4",
         "@orpc/contract": "^1.14.4",
         "@orpc/experimental-pino": "^1.14.4",
@@ -82,7 +82,7 @@
         "@orpc/openapi": "^1.14.4",
         "@playwright/test": "^1.60.0",
         "@tailwindcss/vite": "^4.3.0",
-        "@tanstack/devtools-vite": "^0.7.0",
+        "@tanstack/devtools-vite": "^0.8.3",
         "@types/archiver": "^8.0.0",
         "@types/ffmpeg-static": "^5.1.0",
         "@types/fluent-ffmpeg": "^2.1.28",
@@ -118,7 +118,7 @@
         "@solid-imager/client": "workspace:*",
         "@solid-imager/core": "workspace:*",
         "@solid-imager/ui": "workspace:*",
-        "@tanstack/db": "^0.6.8",
+        "@tanstack/db": "^0.7.2",
         "@tanstack/query-db-collection": "^1.0.40",
         "@tanstack/solid-db": "^0.2.22",
         "@tanstack/solid-query": "5.99.2",
@@ -153,7 +153,7 @@
         "zod": "^4.4.3",
       },
       "devDependencies": {
-        "@types/chrome": "^0.1.43",
+        "@types/chrome": "^0.2.6",
         "@types/node": "^26.0.0",
         "solid-js": "^1.9.13",
         "typescript": "rc",
@@ -329,9 +329,9 @@
 
     "@drizzle-team/brocli": ["@drizzle-team/brocli@0.10.2", "", {}, "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w=="],
 
-    "@electric-sql/pglite": ["@electric-sql/pglite@0.5.3", "", {}, "sha512-iTTYbA5Uesrl+N7zss0J5LopT7KE4j9aymYo+EZZh+rZbARQCUQOs+n2pay64JRUpc3fCkpfrniTNJnvYzOE+g=="],
+    "@electric-sql/pglite": ["@electric-sql/pglite@0.5.5", "", {}, "sha512-QeZ+oB7QaU4EJj2awrB8hwFZ5TXxLRBQ9Gfq0dQauYDdWsRtuWRCERgtri35vRfL07KQHlVlc/4Qxvn7a5AXeA=="],
 
-    "@electric-sql/pglite-pgvector": ["@electric-sql/pglite-pgvector@0.0.4", "", { "peerDependencies": { "@electric-sql/pglite": "0.5.3" } }, "sha512-oHOQlYMzgxmoFWRbKhhoV0UNfoNUdbTHUD/z/nujr8LrUe4HdiSAUY2+Mv+Z033hZO9UWqOuj3Be2KztwK79ow=="],
+    "@electric-sql/pglite-pgvector": ["@electric-sql/pglite-pgvector@0.0.6", "", { "peerDependencies": { "@electric-sql/pglite": "0.5.5" } }, "sha512-KiPeiS/BMmjO71igzgexJAu5aPb3Y2yUjNTSMdti4ZL3zlqZFl4eLgbzLBGyG5Cxr9xFwYFmHh61ZTq6w6hUJA=="],
 
     "@emnapi/core": ["@emnapi/core@1.11.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" } }, "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ=="],
 
@@ -475,41 +475,13 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@jsonjoy.com/base64": ["@jsonjoy.com/base64@1.1.2", "", { "peerDependencies": { "tslib": "2" } }, "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA=="],
-
-    "@jsonjoy.com/buffers": ["@jsonjoy.com/buffers@17.67.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-tfExRpYxBvi32vPs9ZHaTjSP4fHAfzSmcahOfNxtvGHcyJel+aibkPlGeBB+7AoC6hL7lXIE++8okecBxx7lcw=="],
-
-    "@jsonjoy.com/codegen": ["@jsonjoy.com/codegen@1.0.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g=="],
-
-    "@jsonjoy.com/fs-core": ["@jsonjoy.com/fs-core@4.57.7", "", { "dependencies": { "@jsonjoy.com/fs-node-builtins": "4.57.7", "@jsonjoy.com/fs-node-utils": "4.57.7", "thingies": "^2.5.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-GDKuYHjP7vAI1kjBo73V+STKr9XIMZknW/xirpRW/EcShX0IKSev/ALafeRfC8Q331nodrXUFu04PugPB0MAhw=="],
-
-    "@jsonjoy.com/fs-fsa": ["@jsonjoy.com/fs-fsa@4.57.7", "", { "dependencies": { "@jsonjoy.com/fs-core": "4.57.7", "@jsonjoy.com/fs-node-builtins": "4.57.7", "@jsonjoy.com/fs-node-utils": "4.57.7", "thingies": "^2.5.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-1rWsah2nZtRbNeP+c61QcfGfVrJXBmBD0Hm7Akvv4C9MKEasXnbiOS//iH3T3HwUSSBATGrfSp0Xi8nlNhATeQ=="],
-
-    "@jsonjoy.com/fs-node": ["@jsonjoy.com/fs-node@4.57.7", "", { "dependencies": { "@jsonjoy.com/fs-core": "4.57.7", "@jsonjoy.com/fs-node-builtins": "4.57.7", "@jsonjoy.com/fs-node-utils": "4.57.7", "@jsonjoy.com/fs-print": "4.57.7", "@jsonjoy.com/fs-snapshot": "4.57.7", "glob-to-regex.js": "^1.0.0", "thingies": "^2.5.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-xhnyeyEVTiIOibFvda/5n89nChMLCPKHHM2WQ+GGDf6+U/IrQBW3Qx6x+Uq1bkDbxBkybLOdIGoBtVBrE8Nngg=="],
-
-    "@jsonjoy.com/fs-node-builtins": ["@jsonjoy.com/fs-node-builtins@4.57.7", "", { "peerDependencies": { "tslib": "2" } }, "sha512-LWqfY1m+uAosjwM1RrKhMkUnP9jcq1RUczHsNO779ovm1E9v8I/pmj04eBAcoBjhC7ltcPbNFGyRJ5JqSJ7Jdg=="],
-
-    "@jsonjoy.com/fs-node-to-fsa": ["@jsonjoy.com/fs-node-to-fsa@4.57.7", "", { "dependencies": { "@jsonjoy.com/fs-fsa": "4.57.7", "@jsonjoy.com/fs-node-builtins": "4.57.7", "@jsonjoy.com/fs-node-utils": "4.57.7" }, "peerDependencies": { "tslib": "2" } }, "sha512-9T0zC9LKcAWXDoTLRdLMoJ0seOvJ5bgDKq1tSBoQAFQpPDstQUeV1Oe7PLypdu7F2D3ddRstmwgeNUEN/VaZ4Q=="],
-
-    "@jsonjoy.com/fs-node-utils": ["@jsonjoy.com/fs-node-utils@4.57.7", "", { "dependencies": { "@jsonjoy.com/fs-node-builtins": "4.57.7" }, "peerDependencies": { "tslib": "2" } }, "sha512-jjWSDOsfcog2cZnUCwX5AHmlIq6b6wx5Pz/2LAcNjJ62Rajwg89Fy7ubN+lDHew0/1reLDa9Z5urybYadhh37g=="],
-
-    "@jsonjoy.com/fs-print": ["@jsonjoy.com/fs-print@4.57.7", "", { "dependencies": { "@jsonjoy.com/fs-node-utils": "4.57.7", "tree-dump": "^1.1.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-mFM4P4Gjq0QQHkLnXzPYPEMFrAoe6a5Myedgb6+CmL+nGd3MKvTxYPuD7N1dLIH9RBy1fLdzxd80qvuK8xrx3Q=="],
-
-    "@jsonjoy.com/fs-snapshot": ["@jsonjoy.com/fs-snapshot@4.57.7", "", { "dependencies": { "@jsonjoy.com/buffers": "^17.65.0", "@jsonjoy.com/fs-node-utils": "4.57.7", "@jsonjoy.com/json-pack": "^17.65.0", "@jsonjoy.com/util": "^17.65.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-1GS3+plfm2giB3PqokiqyydyqYTPLcCQIKSkp0TdMNRh3KVk7rqRM6U785FLlVRG7XLmkc0KWr215OY+22K3QA=="],
-
-    "@jsonjoy.com/json-pack": ["@jsonjoy.com/json-pack@1.21.0", "", { "dependencies": { "@jsonjoy.com/base64": "^1.1.2", "@jsonjoy.com/buffers": "^1.2.0", "@jsonjoy.com/codegen": "^1.0.0", "@jsonjoy.com/json-pointer": "^1.0.2", "@jsonjoy.com/util": "^1.9.0", "hyperdyperid": "^1.2.0", "thingies": "^2.5.0", "tree-dump": "^1.1.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg=="],
-
-    "@jsonjoy.com/json-pointer": ["@jsonjoy.com/json-pointer@1.0.2", "", { "dependencies": { "@jsonjoy.com/codegen": "^1.0.0", "@jsonjoy.com/util": "^1.9.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg=="],
-
-    "@jsonjoy.com/util": ["@jsonjoy.com/util@1.9.0", "", { "dependencies": { "@jsonjoy.com/buffers": "^1.0.0", "@jsonjoy.com/codegen": "^1.0.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ=="],
-
     "@kikobeats/time-span": ["@kikobeats/time-span@1.0.13", "", {}, "sha512-CfBK4/EZ73uN/6b5/wOfvWju1Ev/6H+uXqS2Vqd7/dEQTyOsvv4BdOHDqESp4Efa9YyrPPvN3IHU+C4z9FAo3Q=="],
 
     "@kobalte/core": ["@kobalte/core@0.13.11", "", { "dependencies": { "@floating-ui/dom": "^1.5.1", "@internationalized/date": "^3.4.0", "@internationalized/number": "^3.2.1", "@kobalte/utils": "^0.9.1", "@solid-primitives/props": "^3.1.8", "@solid-primitives/resize-observer": "^2.0.26", "solid-presence": "^0.1.8", "solid-prevent-scroll": "^0.1.4" }, "peerDependencies": { "solid-js": "^1.8.15" } }, "sha512-hK7TYpdib/XDb/r/4XDBFaO9O+3ZHz4ZWryV4/3BfES+tSQVgg2IJupDnztKXB0BqbSRy/aWlHKw1SPtNPYCFQ=="],
 
     "@kobalte/utils": ["@kobalte/utils@0.9.1", "", { "dependencies": { "@solid-primitives/event-listener": "^2.2.14", "@solid-primitives/keyed": "^1.2.0", "@solid-primitives/map": "^0.4.7", "@solid-primitives/media": "^2.2.4", "@solid-primitives/props": "^3.1.8", "@solid-primitives/refs": "^1.0.5", "@solid-primitives/utils": "^6.2.1" }, "peerDependencies": { "solid-js": "^1.8.8" } }, "sha512-eeU60A3kprIiBDAfv9gUJX1tXGLuZiKMajUfSQURAF2pk4ZoMYiqIzmrMBvzcxP39xnYttgTyQEVLwiTZnrV4w=="],
 
-    "@modelcontextprotocol/server": ["@modelcontextprotocol/server@2.0.0-alpha.2", "", { "dependencies": { "zod": "^4.0" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-gmLgdHzlYM8L7Aw/+VE0kxjT25WKamtUSLNhdOgrJq5CrESvqVSoAfWSJJeNPUXNTluQ+dYDGFbKVitdsJtbPA=="],
+    "@modelcontextprotocol/server": ["@modelcontextprotocol/server@2.0.0-alpha.4", "", { "dependencies": { "zod": "^4.2.0" } }, "sha512-/KEo3ZJ50HlagHp0lz2vPgfBZFtXHu6zTBXT9XqPc+4O9i4+IbBVWKq/a9yAfv/ifp0u3+mRo8SUk5kMKzhN8A=="],
 
     "@napi-rs/cli": ["@napi-rs/cli@2.18.4", "", { "bin": { "napi": "scripts/index.js" } }, "sha512-SgJeA4df9DE2iAEpr3M2H0OKl/yjtg1BnRI5/JyowS71tUWhrfSu2LT0V3vlHET+g1hBVlrO60PmEXwUEKp8Mg=="],
 
@@ -739,23 +711,25 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.3.1", "", { "dependencies": { "@tailwindcss/node": "4.3.1", "@tailwindcss/oxide": "4.3.1", "tailwindcss": "4.3.1" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-hItDHuIIlEV61R+faXu66s1K36aTurO/Qw0e45Vskz57gXl9pWOT6eg3zmcEui6CZXddbN7zd41bwmvag4JGwQ=="],
 
-    "@tanstack/cli": ["@tanstack/cli@0.69.4", "", { "dependencies": { "@clack/prompts": "^0.10.0", "@tanstack/create": "0.68.3", "chalk": "^5.4.1", "chokidar": "^3.6.0", "commander": "^13.1.0", "diff": "^7.0.0", "semver": "^7.7.2", "tempy": "^3.1.0", "validate-npm-package-name": "^7.0.0", "zod": "^3.24.2" }, "bin": { "tanstack": "./dist/bin.js" } }, "sha512-8+LqSqCXrPWfg+Ym3QrBg/biO9NyTFCxmH4XUva8R9Sql+9tMRckC2hhjhpEmgPC13jM5+J+7k1wcMwCCidLHQ=="],
+    "@tanstack/cli": ["@tanstack/cli@0.70.2", "", { "dependencies": { "@clack/prompts": "^0.10.0", "@tanstack/create": "0.69.2", "chalk": "^5.4.1", "chokidar": "^3.6.0", "commander": "^13.1.0", "diff": "^7.0.0", "semver": "^7.7.2", "tempy": "^3.1.0", "validate-npm-package-name": "^7.0.0", "zod": "^3.24.2" }, "bin": { "tanstack": "./dist/bin.js" } }, "sha512-fjvMLx1BPoAHkjjb/eTELv5lZuQnlCZGV3MIUWl/MxRjGgf6gWXya8obOQgJQgMXPeeeYbeEP/bFqDlV5anJmQ=="],
 
-    "@tanstack/create": ["@tanstack/create@0.68.3", "", { "dependencies": { "ejs": "^3.1.10", "execa": "^9.5.2", "ignore": "^7.0.3", "memfs": "^4.17.0", "parse-gitignore": "^2.0.0", "prettier": "^3.5.0", "rimraf": "^6.0.1", "zod": "^3.24.2" } }, "sha512-BBOmj+dEtRCOLqQzjEvivBJl1ZN5KgV6kcHoijhMVgn5oq1xX7BixBiNUJ3sgPzHWFriI/pkgTlbnEtBezvsWA=="],
+    "@tanstack/create": ["@tanstack/create@0.69.2", "", { "dependencies": { "ejs": "^3.1.10", "execa": "^9.5.2", "ignore": "^7.0.3", "parse-gitignore": "^2.0.0", "prettier": "^3.5.0", "rimraf": "^6.0.1", "zod": "^3.24.2" } }, "sha512-zh07Tr2apz8PmZy3z3K7UTPieH8m36NkTMw39baDY+NutrNjzCNaMjwWRb9jyfPzCHOVGcUxX4Rj4q4dkeu53Q=="],
 
-    "@tanstack/db": ["@tanstack/db@0.6.9", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@tanstack/db-ivm": "0.1.18", "@tanstack/pacer-lite": "^0.2.1" }, "peerDependencies": { "typescript": ">=4.7" } }, "sha512-vK7MdMSEGNUOPqwL0WLt08pDbr907G4IsV/MsatY7RTEwZvPzZJL5wpgh0+SqDmSYDA/Wr3sYQ6B/vnQBlAm7g=="],
+    "@tanstack/db": ["@tanstack/db@0.7.2", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@tanstack/db-ivm": "0.1.18", "@tanstack/pacer-lite": "^0.2.1" }, "peerDependencies": { "typescript": ">=4.7" } }, "sha512-gQjUIMKRK1ktg+dXFsTNK2pGgasGOz/qV877nG6vOfC5qggu6yDZzFn9PVhKp5t8um/4kFc4cfPlJP2WM6RmjA=="],
 
     "@tanstack/db-ivm": ["@tanstack/db-ivm@0.1.18", "", { "dependencies": { "fractional-indexing": "^3.2.0", "sorted-btree": "^1.8.1" }, "peerDependencies": { "typescript": ">=4.7" } }, "sha512-+pZJiRKdoKRM5Epq9T7otD9ZJl82pRFauo7LKuJGrarjVKQ7r+QQlPe3kGdN9LEKSnuNGIWjX9OOY4M8kH4eLw=="],
 
     "@tanstack/db-sqlite-persistence-core": ["@tanstack/db-sqlite-persistence-core@0.2.1", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@tanstack/db": "0.6.9" }, "peerDependencies": { "typescript": ">=4.7" } }, "sha512-bjdpY5cQKE5oAH/n7OvpNsu5e5sEOtpTuEkkbvgl+NpzlQDaLc1E7aZOsfmJt77gJJU/boZa7uL1lAmmTsEnQA=="],
 
-    "@tanstack/devtools-client": ["@tanstack/devtools-client@0.0.7", "", { "dependencies": { "@tanstack/devtools-event-client": "^0.4.4" } }, "sha512-bAqBnXQlg/1PqmIC3XhqzG8jV3YmUQ41fD9VlOVzSilFBD4Kp6WJFJa+7N6TvlYXqMAy8xoeF9gg0d2Lt74OEQ=="],
+    "@tanstack/devtools-bundler-core": ["@tanstack/devtools-bundler-core@0.1.3", "", { "dependencies": { "@tanstack/devtools-client": "0.0.8", "@tanstack/devtools-event-bus": "0.4.3", "chalk": "^5.6.2", "launch-editor": "^2.14.1", "magic-string": "^0.30.0", "oxc-parser": "^0.120.0", "picomatch": "^4.0.5" } }, "sha512-F0tlxIyfFqXkZ1mJP1EjtkiSeJA+ztXY2AYOHf7r4goCIEAOp86N9PFJ/yv8vu1TnmxGS6vKsZCS3Kyls9xQQA=="],
+
+    "@tanstack/devtools-client": ["@tanstack/devtools-client@0.0.8", "", { "dependencies": { "@tanstack/devtools-event-client": "^0.5.0" } }, "sha512-cG3iZkGWCwN330bLBKa8+9r4Of2AXNoz2zUqcsy/4XsD3105ghVBx78cGyvJj9fSclNomPxoqAnDGXXhg1WLvA=="],
 
-    "@tanstack/devtools-event-bus": ["@tanstack/devtools-event-bus@0.4.2", "", { "dependencies": { "ws": "^8.18.3" } }, "sha512-2LHzhwBFlKHCcklsQrGe8TeyjHd4XAF8nuCO6wHmva5fePUkJUULbu6CsCNAlGlCi0KkEsMXZSvRdR4HgMq4yA=="],
+    "@tanstack/devtools-event-bus": ["@tanstack/devtools-event-bus@0.4.3", "", { "dependencies": { "ws": "^8.18.3" } }, "sha512-NeegBt5/n2E5q4DbrXHqECBq42+kDi6JBOp8/+RNqkIE+P4hJpbM36kGyjnGQFMWOoku31qhMyX9/48VuTTdmg=="],
 
-    "@tanstack/devtools-event-client": ["@tanstack/devtools-event-client@0.4.4", "", { "bin": { "intent": "./bin/intent.js" } }, "sha512-6T5Yop/793YI+H+5J8Hsyj4kCih9sl4t3ElLgKioW5hk3ocn+ZdSJ94tT7vL7uabxSugWYBZlOTMPzEw2puvQw=="],
+    "@tanstack/devtools-event-client": ["@tanstack/devtools-event-client@0.5.0", "", { "bin": { "intent": "./bin/intent.js" } }, "sha512-H+OH3zC6Vhu/K0NaVfQKknEKawc/+2PT+D3SB3Ox0V8SiMlTo0abbmH2rH0721R2aNYbjdMXA1oENOd8E2UVoA=="],
 
-    "@tanstack/devtools-vite": ["@tanstack/devtools-vite@0.7.2", "", { "dependencies": { "@tanstack/devtools-client": "0.0.7", "@tanstack/devtools-event-bus": "0.4.2", "chalk": "^5.6.2", "launch-editor": "^2.11.1", "magic-string": "^0.30.0", "oxc-parser": "^0.120.0", "picomatch": "^4.0.3" }, "peerDependencies": { "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" }, "bin": { "intent": "./bin/intent.js" } }, "sha512-J/M6buLylcQG6MKVpsPLfXH7bfrGdud7awYnbqRFgsSkkBk/ZlZR3wR20WaeCrbvU9dOynxHHMbuB7v7vqPj8Q=="],
+    "@tanstack/devtools-vite": ["@tanstack/devtools-vite@0.8.5", "", { "dependencies": { "@tanstack/devtools-bundler-core": "0.1.3", "@tanstack/devtools-client": "0.0.8", "@tanstack/devtools-event-bus": "0.4.3", "chalk": "^5.6.2" }, "peerDependencies": { "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" }, "bin": { "intent": "./bin/intent.js" } }, "sha512-xaifCEmiwwzizlbp973oISXNsnmuU/BugLa66gryAZaPJJ/qo1kJd2DxY5X960eHwmyIS3SN0KYrL3/aRhucmA=="],
 
     "@tanstack/form-core": ["@tanstack/form-core@1.33.0", "", { "dependencies": { "@tanstack/devtools-event-client": "^0.4.1", "@tanstack/pacer-lite": "^0.1.1", "@tanstack/store": "^0.11.0" } }, "sha512-AV4Pw9Dk4orFsuPBcDssfWMJFs+yMYBae7zZ4oTqrCf4ftNGQKxvrQRZeqKHG6A4TkiLeSvf2kzIjcVkrW7E6w=="],
 
@@ -767,13 +741,13 @@
 
     "@tanstack/query-db-collection": ["@tanstack/query-db-collection@1.0.41", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@tanstack/db": "0.6.9" }, "peerDependencies": { "@tanstack/query-core": "^5.0.0", "typescript": ">=4.7" } }, "sha512-n8c29o7HdLTcsKKVYdbnLAPZzpUBbQqdY9l9q3H/eMbliHpA8zThXHXbfEj3iTiMSqcfNMx3pG5xteNT33yMmQ=="],
 
-    "@tanstack/router-core": ["@tanstack/router-core@1.171.15", "", { "dependencies": { "@tanstack/history": "1.162.0", "cookie-es": "^3.0.0", "seroval": "^1.5.4", "seroval-plugins": "^1.5.4" } }, "sha512-IILCDcLaItMZQ2jEmCABHY1Nhjjn5XUvwpQp3e4Nmu+vfg0BgYFuu/QASz2SwE2ZNbVMrvt8X/wxa+Gg5aErxA=="],
+    "@tanstack/router-core": ["@tanstack/router-core@1.171.27", "", { "dependencies": { "@tanstack/history": "1.162.1", "cookie-es": "^3.0.0", "seroval": "^1.6.2", "seroval-plugins": "^1.6.2" } }, "sha512-wDwSLvoLwIaNcnx9UNcN9Mb7Y8QwCYq1U1RQZwyN186gnkIoIYI2SOxy8VqH1vFigbkHkk4FmwMAQlghPgDK2g=="],
 
     "@tanstack/router-devtools-core": ["@tanstack/router-devtools-core@1.168.0", "", { "dependencies": { "clsx": "^2.1.1", "goober": "^2.1.16" }, "peerDependencies": { "@tanstack/router-core": "^1.170.0", "csstype": "^3.0.10" }, "optionalPeers": ["csstype"] }, "sha512-wQoQhlBK7nlZgqzaqdYXKWNTpdHdsaREdaPhFZVH0/Ador+F+eM3/NF2i3f2LPeS0GgKraZUQXe1Q/1+KHyEYg=="],
 
-    "@tanstack/router-generator": ["@tanstack/router-generator@1.167.21", "", { "dependencies": { "@babel/types": "^7.28.5", "@tanstack/router-core": "1.171.15", "@tanstack/router-utils": "1.162.2", "@tanstack/virtual-file-routes": "1.162.0", "jiti": "^2.7.0", "magic-string": "^0.30.21", "prettier": "^3.5.0", "zod": "^4.4.3" } }, "sha512-m3oXZyienj8owialdyoZ0txHQrnEx/Ra+D9kWtar5fC2cWZr5Pvxl86VY2mX5RRLC5QLKLeRGT1x4HV95wHVDQ=="],
+    "@tanstack/router-generator": ["@tanstack/router-generator@1.167.33", "", { "dependencies": { "@babel/types": "^7.28.5", "@tanstack/router-core": "1.171.27", "@tanstack/router-utils": "1.162.2", "@tanstack/virtual-file-routes": "1.162.0", "jiti": "^2.7.0", "magic-string": "^0.30.21", "prettier": "^3.5.0", "zod": "^4.4.3" } }, "sha512-Z3lCWIPuRUMPmuI8Mm48x/s49TxmHOaFVZ52j1W1QKYrsFHyT6U/h9bqfHJDxfQ8kz7y9q+W1YPKZ15Ee7yuCA=="],
 
-    "@tanstack/router-plugin": ["@tanstack/router-plugin@1.168.23", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/template": "^7.27.2", "@babel/types": "^7.28.5", "@tanstack/router-core": "1.171.15", "@tanstack/router-generator": "1.167.21", "@tanstack/router-utils": "1.162.2", "chokidar": "^5.0.0", "unplugin": "^3.0.0", "zod": "^4.4.3" }, "peerDependencies": { "@rsbuild/core": ">=1.0.2 || ^2.0.0", "@tanstack/react-router": "^1.170.18", "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0 || >=8.0.0", "vite-plugin-solid": "^2.11.10 || ^3.0.0-0", "webpack": ">=5.92.0" }, "optionalPeers": ["@rsbuild/core", "@tanstack/react-router", "vite", "vite-plugin-solid", "webpack"] }, "sha512-0+PIcvnaAimFwjoEIeV3h7LKjzC8zNnp7pH2UamdKwQ9QlY99WU9V0Xl0zbM0i9hrUa/mKgWPDAzELmPUu5fMA=="],
+    "@tanstack/router-plugin": ["@tanstack/router-plugin@1.168.35", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/template": "^7.27.2", "@babel/types": "^7.28.5", "@tanstack/router-core": "1.171.27", "@tanstack/router-generator": "1.167.33", "@tanstack/router-utils": "1.162.2", "chokidar": "^5.0.0", "unplugin": "^3.0.0", "zod": "^4.4.3" }, "peerDependencies": { "@rsbuild/core": ">=1.0.2 || ^2.0.0", "@tanstack/react-router": "^1.170.32", "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0 || >=8.0.0", "vite-plugin-solid": "^2.11.10 || ^3.0.0-0", "webpack": ">=5.92.0" }, "optionalPeers": ["@rsbuild/core", "@tanstack/react-router", "vite", "vite-plugin-solid", "webpack"] }, "sha512-foDAZKFqHXae+oFbIgcsSvy2QCVRn7XdS3nhwcRvD+ed6JrKPUP/1lQMsZLJqWycgR1vkZF7gs955KGa0NZQ0w=="],
 
     "@tanstack/router-ssr-query-core": ["@tanstack/router-ssr-query-core@1.169.1", "", { "peerDependencies": { "@tanstack/query-core": ">=5.90.0", "@tanstack/router-core": ">=1.127.0" } }, "sha512-rngux8s/3mPQzcjLYDLkNU31coYVyCgrVTfpdwqUdY5jIEHqGTXrO73DTkPR1PppwYUeVhmNCgl8TctRcnupjg=="],
 
@@ -867,7 +841,7 @@
 
     "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
 
-    "@types/chrome": ["@types/chrome@0.1.43", "", { "dependencies": { "@types/filesystem": "*", "@types/har-format": "*" } }, "sha512-ukH/HhmR6ht+UTX3PLUWJxgJ/RQcK2Foj4lBzsF24SIWsXgqhGuXqjd8FFuwioPP7d/JUKLM4g8GZxw3F4HTcA=="],
+    "@types/chrome": ["@types/chrome@0.2.7", "", { "dependencies": { "@types/filesystem": "*", "@types/har-format": "*" } }, "sha512-9kjBozQ+jyDVt1eai3VZqjHDTN95JCuRmbRHOryOltBJmzrTmUw/9r/DznmjRaQ8WlyIfeCA4WNzoj0IvormJA=="],
 
     "@types/debug": ["@types/debug@4.1.13", "", { "dependencies": { "@types/ms": "*" } }, "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw=="],
 
@@ -1243,8 +1217,6 @@
 
     "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
-    "glob-to-regex.js": ["glob-to-regex.js@1.2.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ=="],
-
     "goober": ["goober@2.1.19", "", { "peerDependencies": { "csstype": "^3.0.10" } }, "sha512-U7veizMqxyKlM58+Z5j2ngJBH/r9siDmxpvNxSw0PylF6WQvrASJEZrxh1hidRBJc2jqoBVSyOban5u8m+6Rxg=="],
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
@@ -1273,13 +1245,11 @@
 
     "husky": ["husky@9.1.7", "", { "bin": { "husky": "bin.js" } }, "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA=="],
 
-    "hyperdyperid": ["hyperdyperid@1.2.0", "", {}, "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A=="],
-
     "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
 
     "ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
 
-    "incur": ["incur@0.4.8", "", { "dependencies": { "@cfworker/json-schema": "^4.1.1", "@modelcontextprotocol/server": "^2.0.0-alpha.2", "@scalar/openapi-types": "^0.8.0", "@toon-format/toon": "^2.1.0", "tokenx": "^1.3.0", "yaml": "^2.8.2", "zod": "^4.3.6" }, "bin": { "incur": "dist/bin.js", "incur.src": "src/bin.ts" } }, "sha512-SjW2QNtY7Bcvqjj0KvOJ3qiuFATlC3mEpYQyUzWdLb9MAzakkQ1KQg5WZ/yy2tDGBmHLN/zUJNimIWEqkRfqdw=="],
+    "incur": ["incur@0.5.1", "", { "dependencies": { "@cfworker/json-schema": "^4.1.1", "@modelcontextprotocol/server": "2.0.0-alpha.4", "@scalar/openapi-types": "^0.8.0", "@toon-format/toon": "^2.1.0", "tokenx": "^1.3.0", "yaml": "^2.8.2", "zod": "^4.3.6" }, "bin": { "incur": "dist/cli/index.js", "incur.src": "src/cli/index.ts" } }, "sha512-gEwPg0Rwf+Oi8pwySLumYgWk//Xiv2wRJhwsOwVskt7ZHrfwFTR7oQmANnyDqudRYhqK3I5/dp489kPehPjIww=="],
 
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
@@ -1419,8 +1389,6 @@
 
     "mdurl": ["mdurl@2.0.0", "", {}, "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="],
 
-    "memfs": ["memfs@4.57.7", "", { "dependencies": { "@jsonjoy.com/fs-core": "4.57.7", "@jsonjoy.com/fs-fsa": "4.57.7", "@jsonjoy.com/fs-node": "4.57.7", "@jsonjoy.com/fs-node-builtins": "4.57.7", "@jsonjoy.com/fs-node-to-fsa": "4.57.7", "@jsonjoy.com/fs-node-utils": "4.57.7", "@jsonjoy.com/fs-print": "4.57.7", "@jsonjoy.com/fs-snapshot": "4.57.7", "@jsonjoy.com/json-pack": "^1.11.0", "@jsonjoy.com/util": "^1.9.0", "glob-to-regex.js": "^1.0.1", "thingies": "^2.5.0", "tree-dump": "^1.0.3", "tslib": "^2.0.0" } }, "sha512-YZPphUQZSRGk6ddPlsNuMbztrLwsbUATFNZcqKscSbSJZ4g0+Y3vSZLJ/rfnGZaB1FFhC7SrywZXev6i8lnHgg=="],
-
     "merge-anything": ["merge-anything@5.1.7", "", { "dependencies": { "is-what": "^4.1.8" } }, "sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ=="],
 
     "merge-stream": ["merge-stream@2.0.0", "", {}, "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="],
@@ -1747,8 +1715,6 @@
 
     "text-decoder": ["text-decoder@1.2.7", "", { "dependencies": { "b4a": "^1.6.4" } }, "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ=="],
 
-    "thingies": ["thingies@2.6.0", "", { "peerDependencies": { "tslib": "^2" } }, "sha512-rMHRjmlFLM1R96UYPvpmnc3LYtdFrT33JIB7L9hetGue1qAPfn1N2LJeEjxUSidu1Iku+haLZXDuEXUHNGO/lg=="],
-
     "thread-stream": ["thread-stream@4.2.0", "", { "dependencies": { "real-require": "^1.0.0" } }, "sha512-e2zZ96wSChazBsbENf/Pcm/4swHt2cEKQ92rhUjkL9GCKiTDJIaTBenjE/m9DXi0QBmTMDkFDdOomUy20A1tDQ=="],
 
     "time-span": ["time-span@5.1.0", "", { "dependencies": { "convert-hrtime": "^5.0.0" } }, "sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA=="],
@@ -1767,8 +1733,6 @@
 
     "tokenx": ["tokenx@1.3.0", "", {}, "sha512-NLdXTEZkKiO0gZuLtMoZKjCXTREXeZZt8nnnNeyoXtNZAfG/GKGSbQtLU5STspc0rMSwcA+UJfWZkbNU01iKmQ=="],
 
-    "tree-dump": ["tree-dump@1.1.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA=="],
-
     "trough": ["trough@2.2.0", "", {}, "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="],
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -1885,14 +1849,6 @@
 
     "@google/design.md/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
-    "@jsonjoy.com/fs-snapshot/@jsonjoy.com/json-pack": ["@jsonjoy.com/json-pack@17.67.0", "", { "dependencies": { "@jsonjoy.com/base64": "17.67.0", "@jsonjoy.com/buffers": "17.67.0", "@jsonjoy.com/codegen": "17.67.0", "@jsonjoy.com/json-pointer": "17.67.0", "@jsonjoy.com/util": "17.67.0", "hyperdyperid": "^1.2.0", "thingies": "^2.5.0", "tree-dump": "^1.1.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-t0ejURcGaZsn1ClbJ/3kFqSOjlryd92eQY465IYrezsXmPcfHPE/av4twRSxf6WE+TkZgLY+71vCZbiIiFKA/w=="],
-
-    "@jsonjoy.com/fs-snapshot/@jsonjoy.com/util": ["@jsonjoy.com/util@17.67.0", "", { "dependencies": { "@jsonjoy.com/buffers": "17.67.0", "@jsonjoy.com/codegen": "17.67.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-6+8xBaz1rLSohlGh68D1pdw3AwDi9xydm8QNlAFkvnavCJYSze+pxoW2VKP8p308jtlMRLs5NTHfPlZLd4w7ew=="],
-
-    "@jsonjoy.com/json-pack/@jsonjoy.com/buffers": ["@jsonjoy.com/buffers@1.2.1", "", { "peerDependencies": { "tslib": "2" } }, "sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA=="],
-
-    "@jsonjoy.com/util/@jsonjoy.com/buffers": ["@jsonjoy.com/buffers@1.2.1", "", { "peerDependencies": { "tslib": "2" } }, "sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA=="],
-
     "@kobalte/utils/@solid-primitives/map": ["@solid-primitives/map@0.4.13", "", { "dependencies": { "@solid-primitives/trigger": "^1.1.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-B1zyFbsiTQvqPr+cuPCXO72sRuczG9Swncqk5P74NCGw1VE8qa/Ry9GlfI1e/VdeQYHjan+XkbE3rO2GW/qKew=="],
 
     "@orpc/shared/type-fest": ["type-fest@5.7.0", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-1URUxUqfHFM1c+zfSPsa3gnkO7Aq21qyH75SIduNYz4SzY964rn1X2vCMQaHSHhktiw+0kPa2iyb6PUpXqB6Vg=="],
@@ -1911,7 +1867,7 @@
 
     "@solid-imager/server/typescript": ["typescript@7.0.1-rc", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.1-rc", "@typescript/typescript-darwin-arm64": "7.0.1-rc", "@typescript/typescript-darwin-x64": "7.0.1-rc", "@typescript/typescript-freebsd-arm64": "7.0.1-rc", "@typescript/typescript-freebsd-x64": "7.0.1-rc", "@typescript/typescript-linux-arm": "7.0.1-rc", "@typescript/typescript-linux-arm64": "7.0.1-rc", "@typescript/typescript-linux-loong64": "7.0.1-rc", "@typescript/typescript-linux-mips64el": "7.0.1-rc", "@typescript/typescript-linux-ppc64": "7.0.1-rc", "@typescript/typescript-linux-riscv64": "7.0.1-rc", "@typescript/typescript-linux-s390x": "7.0.1-rc", "@typescript/typescript-linux-x64": "7.0.1-rc", "@typescript/typescript-netbsd-arm64": "7.0.1-rc", "@typescript/typescript-netbsd-x64": "7.0.1-rc", "@typescript/typescript-openbsd-arm64": "7.0.1-rc", "@typescript/typescript-openbsd-x64": "7.0.1-rc", "@typescript/typescript-sunos-x64": "7.0.1-rc", "@typescript/typescript-win32-arm64": "7.0.1-rc", "@typescript/typescript-win32-x64": "7.0.1-rc" }, "bin": { "tsc": "bin/tsc" } }, "sha512-drEP77wK7CCDlPfXZH4e008UUQOsw1DFmHmZOZjuNA+yoDLLnSNMZRXi90NbV/1LVo7SbNLq1bs3jjvk49TEqQ=="],
 
-    "@solid-imager/tauri/@tanstack/solid-router": ["@tanstack/solid-router@1.170.18", "", { "dependencies": { "@solid-primitives/refs": "^1.0.8", "@solidjs/meta": "^0.29.4", "@tanstack/history": "1.162.0", "@tanstack/router-core": "1.171.15", "isbot": "^5.1.22" }, "peerDependencies": { "solid-js": "^1.9.10" } }, "sha512-Og4LS3bfBMa8qzRrWMsxBq1qc982wG8l5XEWMReossEphUnTua4ffMnC6Eq6HTCrZ1QlsBQCWQRaAX3lwAxaHw=="],
+    "@solid-imager/tauri/@tanstack/solid-router": ["@tanstack/solid-router@1.170.30", "", { "dependencies": { "@solid-primitives/refs": "^1.0.8", "@solidjs/meta": "^0.29.4", "@tanstack/history": "1.162.1", "@tanstack/router-core": "1.171.27", "isbot": "^5.1.22" }, "peerDependencies": { "solid-js": "^1.9.10" } }, "sha512-FozWeln6hx6o2T45gFFdkGQJxvq/LN0EUlzx7+eENy9HJH/thEBSb89KTkQahULzs9bsMOufzeXJJVgB6H9/wA=="],
 
     "@solid-imager/tauri/@types/node": ["@types/node@26.0.0", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-vf2YFi1iY9lHGwNJMs01biZFbKJkrZR1T6/MlzjhJLPdntOHLhTrDSnSVcdtvjihi4VQNlrFRIxLsDBlQpAipA=="],
 
@@ -1937,10 +1893,26 @@
 
     "@tanstack/create/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
+    "@tanstack/db-sqlite-persistence-core/@tanstack/db": ["@tanstack/db@0.6.9", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@tanstack/db-ivm": "0.1.18", "@tanstack/pacer-lite": "^0.2.1" }, "peerDependencies": { "typescript": ">=4.7" } }, "sha512-vK7MdMSEGNUOPqwL0WLt08pDbr907G4IsV/MsatY7RTEwZvPzZJL5wpgh0+SqDmSYDA/Wr3sYQ6B/vnQBlAm7g=="],
+
+    "@tanstack/devtools-bundler-core/picomatch": ["picomatch@4.0.5", "", {}, "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A=="],
+
+    "@tanstack/form-core/@tanstack/devtools-event-client": ["@tanstack/devtools-event-client@0.4.4", "", { "bin": { "intent": "./bin/intent.js" } }, "sha512-6T5Yop/793YI+H+5J8Hsyj4kCih9sl4t3ElLgKioW5hk3ocn+ZdSJ94tT7vL7uabxSugWYBZlOTMPzEw2puvQw=="],
+
     "@tanstack/form-core/@tanstack/pacer-lite": ["@tanstack/pacer-lite@0.1.1", "", {}, "sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w=="],
 
+    "@tanstack/query-db-collection/@tanstack/db": ["@tanstack/db@0.6.9", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@tanstack/db-ivm": "0.1.18", "@tanstack/pacer-lite": "^0.2.1" }, "peerDependencies": { "typescript": ">=4.7" } }, "sha512-vK7MdMSEGNUOPqwL0WLt08pDbr907G4IsV/MsatY7RTEwZvPzZJL5wpgh0+SqDmSYDA/Wr3sYQ6B/vnQBlAm7g=="],
+
+    "@tanstack/router-core/@tanstack/history": ["@tanstack/history@1.162.1", "", {}, "sha512-DR9t6lfLVdrjgCwpglrR9DR7Ok8/HlXjcOE+goWXF3zyuLUO/ug7vMbSFxTqrQTtbRghJfyhmIZ0S6LhPIy44w=="],
+
+    "@tanstack/router-core/seroval": ["seroval@1.6.4", "", {}, "sha512-LErWMNS2RRFdu2RMA5u/PA59/IWs0XsikyEXGQ2/36iEWFrdG0ABmg17E17cikrv76891kOAMq3TkTFXpwAHXw=="],
+
+    "@tanstack/router-core/seroval-plugins": ["seroval-plugins@1.6.4", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-R0f1U9hmn38+dFMz6b6ab8lwucmw4AtiY7St+JPWudy1dm+Bs3g884nyrsH9Cy6rKpZKLYayXuMda9GZ/fl8JQ=="],
+
     "@tanstack/router-utils/diff": ["diff@8.0.4", "", {}, "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw=="],
 
+    "@tanstack/solid-db/@tanstack/db": ["@tanstack/db@0.6.9", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@tanstack/db-ivm": "0.1.18", "@tanstack/pacer-lite": "^0.2.1" }, "peerDependencies": { "typescript": ">=4.7" } }, "sha512-vK7MdMSEGNUOPqwL0WLt08pDbr907G4IsV/MsatY7RTEwZvPzZJL5wpgh0+SqDmSYDA/Wr3sYQ6B/vnQBlAm7g=="],
+
     "@tanstack/solid-router/@tanstack/router-core": ["@tanstack/router-core@1.171.13", "", { "dependencies": { "@tanstack/history": "1.162.0", "cookie-es": "^3.0.0", "seroval": "^1.5.4", "seroval-plugins": "^1.5.4" } }, "sha512-+NOwEj1kO/6IGmpHRIZHasYxYWpyBQGNIZAST9aNrk9Q3YlU9SgqVnl1pbLa9qAKfeNdXQIRve0RQb/0kyDeDA=="],
 
     "@tanstack/solid-start-client/@tanstack/router-core": ["@tanstack/router-core@1.171.13", "", { "dependencies": { "@tanstack/history": "1.162.0", "cookie-es": "^3.0.0", "seroval": "^1.5.4", "seroval-plugins": "^1.5.4" } }, "sha512-+NOwEj1kO/6IGmpHRIZHasYxYWpyBQGNIZAST9aNrk9Q3YlU9SgqVnl1pbLa9qAKfeNdXQIRve0RQb/0kyDeDA=="],
@@ -2097,14 +2069,6 @@
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.18.20", "", { "os": "win32", "cpu": "x64" }, "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ=="],
 
-    "@jsonjoy.com/fs-snapshot/@jsonjoy.com/json-pack/@jsonjoy.com/base64": ["@jsonjoy.com/base64@17.67.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-5SEsJGsm15aP8TQGkDfJvz9axgPwAEm98S5DxOuYe8e1EbfajcDmgeXXzccEjh+mLnjqEKrkBdjHWS5vFNwDdw=="],
-
-    "@jsonjoy.com/fs-snapshot/@jsonjoy.com/json-pack/@jsonjoy.com/codegen": ["@jsonjoy.com/codegen@17.67.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-idnkUplROpdBOV0HMcwhsCUS5TRUi9poagdGs70A6S4ux9+/aPuKbh8+UYRTLYQHtXvAdNfQWXDqZEx5k4Dj2Q=="],
-
-    "@jsonjoy.com/fs-snapshot/@jsonjoy.com/json-pack/@jsonjoy.com/json-pointer": ["@jsonjoy.com/json-pointer@17.67.0", "", { "dependencies": { "@jsonjoy.com/util": "17.67.0" }, "peerDependencies": { "tslib": "2" } }, "sha512-+iqOFInH+QZGmSuaybBUNdh7yvNrXvqR+h3wjXm0N/3JK1EyyFAeGJvqnmQL61d1ARLlk/wJdFKSL+LHJ1eaUA=="],
-
-    "@jsonjoy.com/fs-snapshot/@jsonjoy.com/util/@jsonjoy.com/codegen": ["@jsonjoy.com/codegen@17.67.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-idnkUplROpdBOV0HMcwhsCUS5TRUi9poagdGs70A6S4ux9+/aPuKbh8+UYRTLYQHtXvAdNfQWXDqZEx5k4Dj2Q=="],
-
     "@solid-imager/application/typescript/@typescript/typescript-aix-ppc64": ["@typescript/typescript-aix-ppc64@7.0.1-rc", "", { "os": "aix", "cpu": "ppc64" }, "sha512-oqq2ZfEJ7BQuufcC3QBQndZLPNyamYNHLao8lKRBeeSkZKypBqxPSgkzrcFZtbYcIaBvpiyUnQP9MT7DEYHWbw=="],
 
     "@solid-imager/application/typescript/@typescript/typescript-darwin-arm64": ["@typescript/typescript-darwin-arm64@7.0.1-rc", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Slc0yTftT2F/uGDmtPst8ijydneL6uZaLEyr2UjahxZpbhTjHFBJ5agXtVz/TL4A+ldxzjzj+E8QtLZlh/5mXw=="],
@@ -2347,6 +2311,8 @@
 
     "@solid-imager/server/typescript/@typescript/typescript-win32-x64": ["@typescript/typescript-win32-x64@7.0.1-rc", "", { "os": "win32", "cpu": "x64" }, "sha512-98R3+OqDr/r0/PLWEoXu88AE0lGVLNd335Ew8ONgzK1JWkNs4ou/5BGt3Or1ij4iXjH+c7PRL+jFjCbtWze+EA=="],
 
+    "@solid-imager/tauri/@tanstack/solid-router/@tanstack/history": ["@tanstack/history@1.162.1", "", {}, "sha512-DR9t6lfLVdrjgCwpglrR9DR7Ok8/HlXjcOE+goWXF3zyuLUO/ug7vMbSFxTqrQTtbRghJfyhmIZ0S6LhPIy44w=="],
+
     "@solid-imager/tauri/@types/node/undici-types": ["undici-types@8.3.0", "", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ=="],
 
     "@solid-imager/tauri/typescript/@typescript/typescript-aix-ppc64": ["@typescript/typescript-aix-ppc64@7.0.1-rc", "", { "os": "aix", "cpu": "ppc64" }, "sha512-oqq2ZfEJ7BQuufcC3QBQndZLPNyamYNHLao8lKRBeeSkZKypBqxPSgkzrcFZtbYcIaBvpiyUnQP9MT7DEYHWbw=="],
diff --git a/packages/ui/package.json b/packages/ui/package.json
index aa45615f..29672cd2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,7 +18,7 @@
     "@solid-imager/core": "workspace:*",
     "@solidjs/router": "^0.16.1",
     "@tanstack/solid-form": "^1.33.0",
-    "@tanstack/solid-query": "5.101.4",
+    "@tanstack/solid-query": "5.99.2",
     "@tanstack/solid-router": "1.170.16",
     "@tanstack/solid-virtual": "^3.13.26",
     "class-variance-authority": "^0.7.1",

From 483bdebe86d27a2cef3d3caf39625edf12eecbb3 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Wed, 26 Aug 2026 22:57:28 +0900
Subject: [PATCH 5/5] ci: target Dependabot updates at develop

---
 .github/dependabot.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index ae38d015..b8249e7b 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -2,6 +2,7 @@ version: 2
 updates:
   - package-ecosystem: "npm"
     directory: "/"
+    target-branch: "develop"
     schedule:
       interval: "weekly"
     open-pull-requests-limit: 10