@kubohiroya/turbowarp-plus-editor-git 0.12.1 → 0.13.1

package/README.ja.md

@@ -18,7 +18,7 @@ Node.js 26 で `npm ci` と `npm test` を実行します。Vite でライブラ
 
 `test/smart-http-fixture.js` は、`git-http-backend` を IPv4 のループバックで動かす検証用のフィクスチャです。Node.js の標準モジュールだけを使い、利用側のブラウザーテストが同じ版を使えるよう配布物に含めます。
 
-`@kubohiroya/turbowarp-plus-editor-git/smart-http` の `createGitSmartHttp` に、Git 設定から選んだ GitHub の HTTPS リモート、信頼済みの接続先（`mode` と `proxyOrigin`）、現在のプロキシセッションか `null` を返す関数を渡します。auth パッケージの `GitAuthProvider` を使えます。Git パッケージは必要なセッションの型だけを構造的に参照するため、読み取り専用パネルとアダプターは auth パッケージと独立してインストールできます。
+`@kubohiroya/turbowarp-plus-editor-git/smart-http` の `createGitSmartHttp` に、Git 設定から選んだ GitHub の HTTPS リモート、信頼済みの接続先（`mode` と `proxyOrigin`）、現在のプロキシセッションか `null` を返す関数を渡します。auth パッケージの `GitAuthProvider` を使えます。Git パッケージはこれらの型を auth パッケージから取り込みます。auth は省略可能な peer で、型を使う TypeScript の利用者だけがインストールすれば足ります。読み取り専用パネルとアダプターは auth パッケージが無くても動きます。
 
 ```ts
 const transport = createGitSmartHttp({
@@ -114,6 +114,19 @@ const diffFile = new Blob([patch], {type: 'text/x-diff'});
 
 どちらかの版を作品として読めないときは理由を示し、`fallback` を表示します。`fallback` がなければエラーだけを示します。
 
+### 比べてから選ぶダイアログ
+
+`openProjectComparison(document, options)` は、見出しの付いた複数の比較を 1 つのモーダルに並べ、利用者に操作を選んでもらいます。各 `sections` は `ProjectSourceComparison` と同じ `before`・`after` を取ります。選ばれた `actions` の `id` で解決し、閉じるか Escape では `null` で解決します。最初の操作にフォーカスを置くので、失われるものが少ない操作を先に並べます。作品フォルダは、未保存の編集があるときに「あなたの未保存の編集」と「フォルダでの変更」を並べるのに使います。
+
+```ts
+const choice = await openProjectComparison(document, {
+    title: '外部の変更と未保存の編集',
+    sections: [{title: 'あなたの未保存の編集', before: base, after: edited}, {title: 'フォルダでの変更', before: base, after: disk}],
+    actions: [{id: 'keep', label: '編集を残す'}, {id: 'discard', label: '編集を破棄してフォルダから読み込む'}],
+    renderBlock, locale: 'ja'
+});
+```
+
 ## 公開
 
 npm への公開は `.github/workflows/release.yml` が行う。`package.json` の版と同じ `v<版>` のタグを

package/README.md

@@ -18,7 +18,7 @@ The panel structure and local Git approach were informed by [duff](https://githu
 
 `test/smart-http-fixture.js` runs `git-http-backend` on the IPv4 loopback for tests. It uses only Node.js built-in modules and ships in the package so browser tests of a host use the fixture of the same version.
 
-Import `createGitSmartHttp` from `@kubohiroya/turbowarp-plus-editor-git/smart-http`. Pass the selected GitHub HTTPS remote from Git config, a trusted connection (`mode` and `proxyOrigin`), and a function that returns the current proxy session or `null`. A `GitAuthProvider` from the auth package satisfies this contract. The Git package uses the session fields structurally, so the read-only panel and the adapter can be installed independently of the auth package.
+Import `createGitSmartHttp` from `@kubohiroya/turbowarp-plus-editor-git/smart-http`. Pass the selected GitHub HTTPS remote from Git config, a trusted connection (`mode` and `proxyOrigin`), and a function that returns the current proxy session or `null`. A `GitAuthProvider` from the auth package satisfies this contract. The Git package takes these types from the auth package, which is an optional peer: only TypeScript users need it installed, and the read-only panel and the adapter run without it.
 
 ```ts
 const transport = createGitSmartHttp({
@@ -37,6 +37,19 @@ Each receive-pack POST carries a new UUID v4 in `Git-Push-Id`. A browser replay
 
 When the Editor host supplies connection settings, the Local Git panel offers fetch, fast-forward pull and push for the current branch and its existing GitHub HTTPS `origin`. Authorize push when connecting to enable the explicit push action. Fetch updates Git metadata. Pull requires a stopped project, a clean worktree, and regular non-executable files. Pull stages the changes, rechecks the local state, and then applies them. Reopen the project from the panel after a successful pull.
 
+## Comparing before choosing
+
+`openProjectComparison(document, options)` lays several titled comparisons of `project.source.json` texts in one modal and asks the user to choose an action. Each of `sections` takes the same `before` and `after` as `ProjectSourceComparison`. The promise resolves with the chosen action's `id`, or with `null` when the dialog is closed or Escape is pressed. The first action receives focus, so list the one that loses the least first. The project folder uses it to show "Your unsaved edits" next to "Changes in the folder" before replacing unsaved edits.
+
+```ts
+const choice = await openProjectComparison(document, {
+    title: 'External changes and your unsaved edits',
+    sections: [{title: 'Your unsaved edits', before: base, after: edited}, {title: 'Changes in the folder', before: base, after: disk}],
+    actions: [{id: 'keep', label: 'Keep My Edits'}, {id: 'discard', label: 'Discard Edits and Load from Folder'}],
+    renderBlock
+});
+```
+
 ## Release
 
 `.github/workflows/release.yml` publishes to npm. Push a `v<version>` tag that names the

package/dist/connection-settings.d.ts

@@ -1,18 +1,11 @@
 import React from 'react';
+import type { GitAuthState, GitConnectionMode as Mode } from '@kubohiroya/turbowarp-plus-editor-auth';
 import type { GetRemoteSession, RemoteOperation } from './remote-operations.js';
-type Mode = 'desktop' | 'cloudflare';
-type Status = 'disconnected' | 'connecting' | 'connected' | 'reauth-required';
 export interface GitConnectionSettings {
     modes: readonly Mode[];
     getView(): {
         mode: Mode | null;
-        state: {
-            status: Status;
-            account?: {
-                login: string;
-            };
-            expiresAt?: number;
-        };
+        state: GitAuthState;
         proxyOrigin?: string;
         write?: boolean;
         authorization?: {
@@ -32,4 +25,3 @@ export declare function ConnectionSettings({ settings, locale, readOrigin, runOp
     readOrigin?: () => Promise<string | undefined>;
     runOperation?: (operation: RemoteOperation) => Promise<void>;
 }): React.JSX.Element;
-export {};

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { createEditorBlockLocator } from './editor-block-locator.js';
 export { createScratchBlocksDiffRenderer } from './scratch-block-diff-renderer.js';
 export type { ScratchBlockDiffRendererOptions, ScratchBlocksPort } from './scratch-block-diff-renderer.js';
 export { openRepository, createReadOnlyFs, GitPanelError } from './repository.js';
+export { openProjectComparison } from './project-comparison.js';
+export type { ProjectComparisonAction, ProjectComparisonOptions, ProjectComparisonSection } from './project-comparison.js';
 export type { Repository, Snapshot, FileChange, FileDiff } from './repository.js';
 export interface GitHost {
     connectionSettings?: GitConnectionSettings;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { _ as useCostumeImage, a as gitHubRepositoryFromOrigin, b as parseProjectSource, g as useAssetImage, i as createGitHubPullRequests, l as organizeProjectChanges, n as createScratchBlocksDiffLocator, o as ProjectSourceComparison, r as PullRequestError, s as ProjectSourceReview, t as createScratchBlocksDiffRenderer, u as projectPropertyLabel } from "./scratch-block-diff-renderer-e_drVlHE.js";
+import { S as parseProjectSource, a as PullRequestError, c as ProjectSourceComparison, d as organizeProjectChanges, f as projectPropertyLabel, i as createScratchBlocksDiffLocator, l as ProjectSourceReview, n as openProjectComparison, o as createGitHubPullRequests, r as createScratchBlocksDiffRenderer, s as gitHubRepositoryFromOrigin, v as useAssetImage, y as useCostumeImage } from "./project-comparison-D1rHzlCw.js";
 import { n as init_objectSpread2, r as __commonJSMin, t as _objectSpread2$1 } from "./objectSpread2-Dkd68nJH.js";
 import { i as createReadOnlyFs, r as GitPanelError, t as openRepository } from "./repository-CtvWYPQ8.js";
 import * as m from "react";
@@ -3277,7 +3277,7 @@ function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 	}, labels[choice])))), /* @__PURE__ */ React.createElement("p", null, labels.changed), /* @__PURE__ */ React.createElement("p", {
 		"data-git-connection-state": "",
 		role: "status"
-	}, labels[state.status]), proxyOrigin && /* @__PURE__ */ React.createElement("p", null, labels.proxy, " · ", /* @__PURE__ */ React.createElement("code", null, proxyOrigin)), state.account && /* @__PURE__ */ React.createElement("p", null, labels.account, " · ", state.account.login), !readOrigin && /* @__PURE__ */ React.createElement("p", null, labels.noRemote), mode && /* @__PURE__ */ React.createElement(React.Fragment, null, runOperation && /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("input", {
+	}, labels[state.status]), proxyOrigin && /* @__PURE__ */ React.createElement("p", null, labels.proxy, " · ", /* @__PURE__ */ React.createElement("code", null, proxyOrigin)), state.status === "connected" && /* @__PURE__ */ React.createElement("p", null, labels.account, " · ", state.account.login), !readOrigin && /* @__PURE__ */ React.createElement("p", null, labels.noRemote), mode && /* @__PURE__ */ React.createElement(React.Fragment, null, runOperation && /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("input", {
 		type: "checkbox",
 		checked: allowPush,
 		disabled: busy || state.status === "connecting" || state.status === "connected",
@@ -4065,4 +4065,4 @@ function renderGitMenu(createElement, { vm, locale = "en", MenuItem, MenuSection
 		}
 	}, labelsFor(locale).menu));
 }
-export { GitPanelError, createEditorBlockLocator, createReadOnlyFs, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, mountGitPanel, openRepository, renderGitMenu };
+export { GitPanelError, createEditorBlockLocator, createReadOnlyFs, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, mountGitPanel, openProjectComparison, openRepository, renderGitMenu };

package/dist/{scratch-block-diff-renderer-e_drVlHE.js → project-comparison-D1rHzlCw.js}

@@ -1,6 +1,7 @@
 import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
 import { a as createTwoFilesPatch, i as isAssetName, n as assetsDirectoryParts, o as hasOnlyUnixLineEndings, r as folderSettingsLimit, s as hasOnlyWinLineEndings, t as assetLimit } from "./project-asset-paths-KV715791.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { render, unmountComponentAtNode } from "react-dom";
 // node_modules/diff/libesm/patch/line-endings.js
 function unixToWin(patch) {
 	if (Array.isArray(patch)) return patch.map((p) => unixToWin(p));
@@ -2414,4 +2415,81 @@ function createScratchBlocksDiffRenderer(options) {
 		};
 	};
 }
-export { useCostumeImage as _, gitHubRepositoryFromOrigin as a, parseProjectSource as b, assetFileName as c, compareProjectForReview as d, BlockPreview as f, useAssetImage as g, currentCostume as h, createGitHubPullRequests as i, organizeProjectChanges as l, usePreviewSync as m, createScratchBlocksDiffLocator as n, ProjectSourceComparison as o, createPreviewSync as p, PullRequestError as r, ProjectSourceReview as s, createScratchBlocksDiffRenderer as t, projectPropertyLabel as u, compareProjectBlocks as v, readProjectSourceDiff as x, createProjectSourceDiff as y };
+// src/project-comparison.tsx
+init_objectSpread2();
+var focusable = "button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex=\"0\"]";
+/** A modal that lays project comparisons side by side in sections and asks the user to choose an action. */
+function ProjectComparisonDialog({ title, description, notes = [], sections, actions, closeLabel = "Close", renderBlock, locale = "en", onChoose }) {
+	const dialog = useRef(null);
+	const first = useRef(null);
+	useEffect(() => {
+		var _dialog$current, _ref, _first$current;
+		const previous = (_dialog$current = dialog.current) === null || _dialog$current === void 0 ? void 0 : _dialog$current.ownerDocument.activeElement;
+		(_ref = (_first$current = first.current) !== null && _first$current !== void 0 ? _first$current : dialog.current) === null || _ref === void 0 || _ref.focus();
+		return () => {
+			if (previous === null || previous === void 0 ? void 0 : previous.isConnected) previous.focus();
+		};
+	}, []);
+	const keyDown = (event) => {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			onChoose(null);
+			return;
+		}
+		if (event.key !== "Tab") return;
+		const items = [...event.currentTarget.querySelectorAll(focusable)].filter((item) => item.getClientRects().length > 0);
+		const start = items[0], end = items[items.length - 1];
+		const active = event.currentTarget.ownerDocument.activeElement;
+		if (event.shiftKey && (active === start || active === event.currentTarget)) {
+			event.preventDefault();
+			end === null || end === void 0 || end.focus();
+		} else if (!event.shiftKey && active === end) {
+			event.preventDefault();
+			start === null || start === void 0 || start.focus();
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: "twgit-backdrop" }, /* @__PURE__ */ React.createElement("div", {
+		className: "twgit-panel twgit-comparison",
+		ref: dialog,
+		tabIndex: -1,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": title,
+		onKeyDown: keyDown
+	}, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h2", null, title), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		onClick: () => onChoose(null)
+	}, closeLabel)), /* @__PURE__ */ React.createElement("div", { className: "twgit-comparison-body" }, description && /* @__PURE__ */ React.createElement("p", null, description), notes.map((note) => /* @__PURE__ */ React.createElement("p", {
+		key: note,
+		role: "note"
+	}, note)), sections.map((section) => /* @__PURE__ */ React.createElement("section", {
+		key: section.title,
+		"aria-label": section.title,
+		"data-twgit-comparison": ""
+	}, /* @__PURE__ */ React.createElement("h3", null, section.title), /* @__PURE__ */ React.createElement(ProjectSourceComparison, {
+		before: section.before,
+		after: section.after,
+		renderBlock,
+		locale
+	})))), /* @__PURE__ */ React.createElement("footer", { className: "twgit-comparison-actions" }, actions.map((action, index) => /* @__PURE__ */ React.createElement("button", {
+		key: action.id,
+		type: "button",
+		ref: index === 0 ? first : void 0,
+		"data-twgit-action": action.id,
+		onClick: () => onChoose(action.id)
+	}, action.label)))));
+}
+/** Shows {@link ProjectComparisonDialog} and resolves with the chosen action's id, or `null` when it is closed. */
+function openProjectComparison(document, options) {
+	const root = document.createElement("div");
+	document.body.append(root);
+	return new Promise((resolve) => {
+		const choose = (action) => {
+			unmountComponentAtNode(root);
+			root.remove();
+			resolve(action);
+		};
+		render(/* @__PURE__ */ React.createElement(ProjectComparisonDialog, _objectSpread2(_objectSpread2({}, options), {}, { onChoose: choose })), root);
+	});
+}
+export { readProjectSourceDiff as C, parseProjectSource as S, currentCostume as _, PullRequestError as a, compareProjectBlocks as b, ProjectSourceComparison as c, organizeProjectChanges as d, projectPropertyLabel as f, usePreviewSync as g, createPreviewSync as h, createScratchBlocksDiffLocator as i, ProjectSourceReview as l, BlockPreview as m, openProjectComparison as n, createGitHubPullRequests as o, compareProjectForReview as p, createScratchBlocksDiffRenderer as r, gitHubRepositoryFromOrigin as s, ProjectComparisonDialog as t, assetFileName as u, useAssetImage as v, createProjectSourceDiff as x, useCostumeImage as y };

package/dist/project-comparison.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
+/** One comparison of two project.source.json texts, shown under its own heading. */
+export interface ProjectComparisonSection {
+    title: string;
+    before: string | null;
+    after: string | null;
+}
+export interface ProjectComparisonAction {
+    id: string;
+    label: string;
+}
+export interface ProjectComparisonOptions {
+    title: string;
+    description?: string;
+    /** Notes shown after the description, such as edits the comparison cannot show. */
+    notes?: readonly string[];
+    sections: readonly ProjectComparisonSection[];
+    /** The first action is the one the dialog focuses. Closing the dialog or pressing Escape chooses none. */
+    actions: readonly ProjectComparisonAction[];
+    closeLabel?: string;
+    renderBlock: ProjectBlockRenderer;
+    locale?: string;
+}
+export interface ProjectComparisonDialogProps extends ProjectComparisonOptions {
+    onChoose(action: string | null): void;
+}
+/** A modal that lays project comparisons side by side in sections and asks the user to choose an action. */
+export declare function ProjectComparisonDialog({ title, description, notes, sections, actions, closeLabel, renderBlock, locale, onChoose }: ProjectComparisonDialogProps): React.JSX.Element;
+/** Shows {@link ProjectComparisonDialog} and resolves with the chosen action's id, or `null` when it is closed. */
+export declare function openProjectComparison(document: Document, options: ProjectComparisonOptions): Promise<string | null>;

package/dist/project-source-diff.d.ts

@@ -4,6 +4,8 @@ import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
 import './project-source-diff.css';
 export { createGitHubPullRequests, gitHubRepositoryFromOrigin } from './github-pull-requests.js';
 export { ProjectSourceComparison, ProjectSourceReview } from './project-source-review.js';
+export { ProjectComparisonDialog, openProjectComparison } from './project-comparison.js';
+export type { ProjectComparisonAction, ProjectComparisonDialogProps, ProjectComparisonOptions, ProjectComparisonSection } from './project-comparison.js';
 export type { ProjectSourceComparisonProps, ProjectSourceReviewFile, ProjectSourceReviewProps } from './project-source-review.js';
 export { createScratchBlocksDiffLocator } from './block-diff-location.js';
 export type { ProjectBlockLocation, ProjectBlockLocator, ScratchBlockLocationWorkspace } from './block-diff-location.js';

package/dist/project-source-diff.js

@@ -1,4 +1,4 @@
-import { a as gitHubRepositoryFromOrigin, c as assetFileName, d as compareProjectForReview, f as BlockPreview, h as currentCostume, i as createGitHubPullRequests, l as organizeProjectChanges, m as usePreviewSync, n as createScratchBlocksDiffLocator, o as ProjectSourceComparison, p as createPreviewSync, s as ProjectSourceReview, t as createScratchBlocksDiffRenderer, u as projectPropertyLabel, v as compareProjectBlocks, x as readProjectSourceDiff, y as createProjectSourceDiff } from "./scratch-block-diff-renderer-e_drVlHE.js";
+import { C as readProjectSourceDiff, _ as currentCostume, b as compareProjectBlocks, c as ProjectSourceComparison, d as organizeProjectChanges, f as projectPropertyLabel, g as usePreviewSync, h as createPreviewSync, i as createScratchBlocksDiffLocator, l as ProjectSourceReview, m as BlockPreview, n as openProjectComparison, o as createGitHubPullRequests, p as compareProjectForReview, r as createScratchBlocksDiffRenderer, s as gitHubRepositoryFromOrigin, t as ProjectComparisonDialog, u as assetFileName, x as createProjectSourceDiff } from "./project-comparison-D1rHzlCw.js";
 import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 // src/project-source-diff.tsx
@@ -169,4 +169,4 @@ function ProjectSourceBlockDiff({ patch, beforeSource, renderBlock, locateBlock,
 		})
 	}, labels.more));
 }
-export { ProjectSourceBlockDiff, ProjectSourceComparison, ProjectSourceReview, assetFileName, compareProjectForReview, createGitHubPullRequests, createPreviewSync, createProjectSourceDiff, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, currentCostume, gitHubRepositoryFromOrigin, organizeProjectChanges, projectPropertyLabel };
+export { ProjectComparisonDialog, ProjectSourceBlockDiff, ProjectSourceComparison, ProjectSourceReview, assetFileName, compareProjectForReview, createGitHubPullRequests, createPreviewSync, createProjectSourceDiff, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, currentCostume, gitHubRepositoryFromOrigin, openProjectComparison, organizeProjectChanges, projectPropertyLabel };

package/dist/smart-http.d.ts

@@ -1,17 +1,9 @@
+import type { GitProxyConnection, GitProxySession } from '@kubohiroya/turbowarp-plus-editor-auth';
 export declare const MAX_GIT_REQUEST_BYTES: number;
-type Connection = Readonly<{
-    mode: 'desktop' | 'cloudflare';
-    proxyOrigin: string;
-}>;
-type Session = Readonly<{
-    connection: Connection;
-    bearer: string;
-    expiresAt: number;
-}>;
 export interface GitSmartHttpOptions {
     readonly remote: string;
-    readonly connection: Connection;
-    readonly getSession: () => Promise<Session | null>;
+    readonly connection: GitProxyConnection;
+    readonly getSession: () => Promise<GitProxySession | null>;
     readonly maxRequestBytes?: number;
     readonly signal?: AbortSignal;
     readonly fetch?: typeof fetch;

package/dist/style.css

@@ -179,4 +179,8 @@
 .twgit-git-details > .twgit-connection-body { left: auto; right: 0; }
 /* In a layout tab the panel fills the tab and leaves the Editor beside it. */
 .twgit-panel.twgit-panel-tab { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
+.twgit-comparison-body { flex: 1; overflow: auto; padding: 12px 16px; }
+.twgit-comparison-body > p { margin: 0 0 8px; }
+.twgit-comparison-body > section { margin-top: 16px; }
+.twgit-comparison-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid GrayText; }
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-git",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "Read-only local Git panel for TurboWarp Plus Editor",
   "type": "module",
   "license": "MPL-2.0",
@@ -49,10 +49,17 @@
     "prepack": "npm run build"
   },
   "peerDependencies": {
+    "@kubohiroya/turbowarp-plus-editor-auth": ">=0.3.0 <0.4.0",
     "react": ">=16.14 <19",
     "react-dom": ">=16.14 <19"
   },
+  "peerDependenciesMeta": {
+    "@kubohiroya/turbowarp-plus-editor-auth": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@kubohiroya/turbowarp-plus-editor-auth": "0.3.0",
     "@types/node": "24.19.2",
     "@types/react": "16.14.70",
     "@types/react-dom": "16.9.25",

package/src/connection-settings.tsx

@@ -1,13 +1,12 @@
 import React, {useEffect, useRef, useState} from 'react';
+import type {GitAuthState, GitConnectionMode as Mode} from '@kubohiroya/turbowarp-plus-editor-auth';
 import type {GetRemoteSession, RemoteOperation} from './remote-operations.js';
 
-type Mode = 'desktop' | 'cloudflare';
-type Status = 'disconnected' | 'connecting' | 'connected' | 'reauth-required';
 export interface GitConnectionSettings {
     modes: readonly Mode[];
     getView(): {
         mode: Mode | null;
-        state: {status: Status; account?: {login: string}; expiresAt?: number};
+        state: GitAuthState;
         proxyOrigin?: string;
         write?: boolean;
         authorization?: {url: string; userCode?: string};
@@ -87,7 +86,7 @@ export function ConnectionSettings({settings, locale, readOrigin, runOperation}:
             <p>{labels.changed}</p>
             <p data-git-connection-state="" role="status">{labels[state.status]}</p>
             {proxyOrigin && <p>{labels.proxy} · <code>{proxyOrigin}</code></p>}
-            {state.account && <p>{labels.account} · {state.account.login}</p>}
+            {state.status === 'connected' && <p>{labels.account} · {state.account.login}</p>}
             {!readOrigin && <p>{labels.noRemote}</p>}
             {mode && <>
                 {runOperation && <label><input type="checkbox" checked={allowPush}

package/src/index.tsx

@@ -22,6 +22,8 @@ export {createScratchBlocksDiffRenderer} from './scratch-block-diff-renderer.js'
 export type {ScratchBlockDiffRendererOptions, ScratchBlocksPort} from './scratch-block-diff-renderer.js';
 
 export {openRepository, createReadOnlyFs, GitPanelError} from './repository.js';
+export {openProjectComparison} from './project-comparison.js';
+export type {ProjectComparisonAction, ProjectComparisonOptions, ProjectComparisonSection} from './project-comparison.js';
 export type {Repository, Snapshot, FileChange, FileDiff} from './repository.js';
 
 export interface GitHost {

package/src/project-comparison.tsx

@@ -0,0 +1,88 @@
+import React, {useEffect, useRef} from 'react';
+import {render, unmountComponentAtNode} from 'react-dom';
+import {ProjectSourceComparison} from './project-source-review.js';
+import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+
+/** One comparison of two project.source.json texts, shown under its own heading. */
+export interface ProjectComparisonSection {
+    title: string;
+    before: string | null;
+    after: string | null;
+}
+export interface ProjectComparisonAction {
+    id: string;
+    label: string;
+}
+export interface ProjectComparisonOptions {
+    title: string;
+    description?: string;
+    /** Notes shown after the description, such as edits the comparison cannot show. */
+    notes?: readonly string[];
+    sections: readonly ProjectComparisonSection[];
+    /** The first action is the one the dialog focuses. Closing the dialog or pressing Escape chooses none. */
+    actions: readonly ProjectComparisonAction[];
+    closeLabel?: string;
+    renderBlock: ProjectBlockRenderer;
+    locale?: string;
+}
+export interface ProjectComparisonDialogProps extends ProjectComparisonOptions {
+    onChoose(action: string | null): void;
+}
+
+const focusable = 'button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex="0"]';
+
+/** A modal that lays project comparisons side by side in sections and asks the user to choose an action. */
+export function ProjectComparisonDialog({title, description, notes = [], sections, actions, closeLabel = 'Close',
+    renderBlock, locale = 'en', onChoose}: ProjectComparisonDialogProps) {
+    const dialog = useRef<HTMLDivElement>(null);
+    const first = useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        const previous = dialog.current?.ownerDocument.activeElement as HTMLElement | null;
+        (first.current ?? dialog.current)?.focus();
+        return () => {if (previous?.isConnected) previous.focus();};
+    }, []);
+    const keyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'Escape') {event.stopPropagation(); onChoose(null); return;}
+        if (event.key !== 'Tab') return;
+        const items = [...event.currentTarget.querySelectorAll<HTMLElement>(focusable)].filter(item => item.getClientRects().length > 0);
+        const start = items[0], end = items[items.length - 1];
+        const active = event.currentTarget.ownerDocument.activeElement;
+        if (event.shiftKey && (active === start || active === event.currentTarget)) {event.preventDefault(); end?.focus();}
+        else if (!event.shiftKey && active === end) {event.preventDefault(); start?.focus();}
+    };
+    return <div className="twgit-backdrop">
+        <div className="twgit-panel twgit-comparison" ref={dialog} tabIndex={-1} role="dialog" aria-modal="true"
+            aria-label={title} onKeyDown={keyDown}>
+            <header>
+                <h2>{title}</h2>
+                <button type="button" onClick={() => onChoose(null)}>{closeLabel}</button>
+            </header>
+            <div className="twgit-comparison-body">
+                {description && <p>{description}</p>}
+                {notes.map(note => <p key={note} role="note">{note}</p>)}
+                {sections.map(section => <section key={section.title} aria-label={section.title} data-twgit-comparison="">
+                    <h3>{section.title}</h3>
+                    <ProjectSourceComparison before={section.before} after={section.after} renderBlock={renderBlock} locale={locale}/>
+                </section>)}
+            </div>
+            <footer className="twgit-comparison-actions">
+                {actions.map((action, index) => <button key={action.id} type="button" ref={index === 0 ? first : undefined}
+                    data-twgit-action={action.id} onClick={() => onChoose(action.id)}>{action.label}</button>)}
+            </footer>
+        </div>
+    </div>;
+}
+
+/** Shows {@link ProjectComparisonDialog} and resolves with the chosen action's id, or `null` when it is closed. */
+export function openProjectComparison(document: Document, options: ProjectComparisonOptions): Promise<string | null> {
+    const root = document.createElement('div');
+    document.body.append(root);
+    return new Promise(resolve => {
+        const choose = (action: string | null) => {
+            unmountComponentAtNode(root);
+            root.remove();
+            resolve(action);
+        };
+        render(<ProjectComparisonDialog {...options} onChoose={choose}/>, root);
+    });
+}

package/src/project-source-diff.tsx

@@ -9,6 +9,8 @@ import './project-source-diff.css';
 
 export {createGitHubPullRequests, gitHubRepositoryFromOrigin} from './github-pull-requests.js';
 export {ProjectSourceComparison, ProjectSourceReview} from './project-source-review.js';
+export {ProjectComparisonDialog, openProjectComparison} from './project-comparison.js';
+export type {ProjectComparisonAction, ProjectComparisonDialogProps, ProjectComparisonOptions, ProjectComparisonSection} from './project-comparison.js';
 export type {ProjectSourceComparisonProps, ProjectSourceReviewFile, ProjectSourceReviewProps} from './project-source-review.js';
 
 export {createScratchBlocksDiffLocator} from './block-diff-location.js';

package/src/smart-http.ts

@@ -1,14 +1,12 @@
+import type {GitProxyConnection, GitProxySession} from '@kubohiroya/turbowarp-plus-editor-auth';
 import type {HttpClient} from 'isomorphic-git';
 
 export const MAX_GIT_REQUEST_BYTES = 32 * 1024 * 1024;
 
-type Connection = Readonly<{mode: 'desktop' | 'cloudflare'; proxyOrigin: string}>;
-type Session = Readonly<{connection: Connection; bearer: string; expiresAt: number}>;
-
 export interface GitSmartHttpOptions {
     readonly remote: string;
-    readonly connection: Connection;
-    readonly getSession: () => Promise<Session | null>;
+    readonly connection: GitProxyConnection;
+    readonly getSession: () => Promise<GitProxySession | null>;
     readonly maxRequestBytes?: number;
     readonly signal?: AbortSignal;
     readonly fetch?: typeof fetch;
@@ -54,7 +52,7 @@ function remoteUrl(remote: string) {
     return `https://github.com/${match[1]}/${match[2]}.git`;
 }
 
-function checkConnection({mode, proxyOrigin}: Connection) {
+function checkConnection({mode, proxyOrigin}: GitProxyConnection) {
     const url = URL.parse(proxyOrigin);
     if (!url || url.origin !== proxyOrigin ||
         (mode === 'desktop' ? !/^http:\/\/127\.0\.0\.1:[1-9][0-9]{0,4}$/u.test(proxyOrigin) :
@@ -142,7 +140,7 @@ export function createGitSmartHttp(options: GitSmartHttpOptions) {
         checkAbort(abort);
         const payload = body ? await boundedBody(body, maxRequestBytes, abort) : undefined;
         checkAbort(abort);
-        let session: Session | null;
+        let session: GitProxySession | null;
         try {
             session = await getSession();
         } catch {

package/src/style.css

@@ -57,3 +57,7 @@
 .twgit-git-details > .twgit-connection-body { left: auto; right: 0; }
 /* In a layout tab the panel fills the tab and leaves the Editor beside it. */
 .twgit-panel.twgit-panel-tab { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
+.twgit-comparison-body { flex: 1; overflow: auto; padding: 12px 16px; }
+.twgit-comparison-body > p { margin: 0 0 8px; }
+.twgit-comparison-body > section { margin-top: 16px; }
+.twgit-comparison-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid GrayText; }