@kubohiroya/turbowarp-plus-editor-git 0.14.1 → 0.16.0

package/dist/index.js

@@ -1,6 +1,6 @@
-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-LAyP_beL.js";
+import { C as parseProjectSource, a as openProjectSourceTabs, b as useCostumeImage, c as gitHubRepositoryFromOrigin, f as organizeProjectChanges, i as createScratchBlocksDiffLocator, l as ProjectSourceComparison, n as openProjectComparison, o as PullRequestError, p as projectPropertyLabel, r as createScratchBlocksDiffRenderer, s as createGitHubPullRequests, u as ProjectSourceReview, w as readProjectSourceDiff, y as useAssetImage } from "./project-comparison-MU0qD2wo.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 { a as createReadOnlyFs, i as GitPanelError, n as openRepository } from "./repository-BYno-5f8.js";
 import * as m from "react";
 import React, { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal, render, unmountComponentAtNode } from "react-dom";
@@ -2672,19 +2672,21 @@ diffMatchPatch.DIFF_INSERT;
 var en$3 = {
 	view: "Show changes as",
 	blocks: "Blocks",
-	text: "Text"
+	text: "Text",
+	openTabs: "Open as tabs"
 };
 var ja$3 = {
 	view: "変更の表示",
 	blocks: "ブロック",
-	text: "テキスト"
+	text: "テキスト",
+	openTabs: "タブで開く"
 };
 /** Project sources are the files the panel opens as projects. */
 var isProjectSource = (path) => path.split("/").pop() === "project.source.json";
 /**
 * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
 */
-function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset, locateBlock }) {
+function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset, locateBlock, onOpenTabs }) {
 	var _change$oldMode, _change$newMode;
 	const [view, setView] = useState("blocks");
 	const names = locale.startsWith("ja") ? ja$3 : en$3;
@@ -2708,7 +2710,11 @@ function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset, lo
 		"aria-pressed": view === mode,
 		"data-git-view": mode,
 		onClick: () => setView(mode)
-	}, names[mode]))), sources && view === "blocks" ? /* @__PURE__ */ React.createElement(ProjectSourceComparison, {
+	}, names[mode])), onOpenTabs && /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		"data-git-open-tabs": "",
+		onClick: () => onOpenTabs(change.before === null ? null : sources.before, change.after === null ? null : sources.after)
+	}, names.openTabs)), sources && view === "blocks" ? /* @__PURE__ */ React.createElement(ProjectSourceComparison, {
 		renderBlock,
 		locale,
 		fallback: text,
@@ -3019,6 +3025,84 @@ function ProjectElementView({ changes, selection, locale, renderBlock, onSelectF
 		onClick: () => onSelectFile(file)
 	}, file.path, " ", /* @__PURE__ */ React.createElement("small", null, labels.groups[file.group])))))));
 }
+/**
+* Lays out commits ordered newest first with every child above its parents. Parents missing from `commits`, such as
+* those on a page not loaded yet or cut off by a shallow clone, keep their lane running to the bottom.
+*/
+function layoutHistory(commits) {
+	const lanes = [];
+	let nextColor = 0;
+	const free = () => {
+		const index = lanes.indexOf(null);
+		return index === -1 ? lanes.length : index;
+	};
+	const rows = [];
+	for (const commit of commits) {
+		const segments = [];
+		const before = lanes.slice();
+		const waiting = before.flatMap((lane, index) => (lane === null || lane === void 0 ? void 0 : lane.oid) === commit.oid ? [index] : []);
+		const column = waiting.length ? waiting[0] : free();
+		const color = waiting.length ? before[column].color : nextColor++ % 8;
+		for (const [index, lane] of before.entries()) {
+			if (!lane) continue;
+			segments.push({
+				part: "top",
+				from: index,
+				to: lane.oid === commit.oid ? column : index,
+				color: lane.color
+			});
+		}
+		for (const index of waiting) lanes[index] = null;
+		const parents = [...new Set(commit.parents)];
+		lanes[column] = parents.length ? {
+			oid: parents[0],
+			color
+		} : null;
+		const joins = parents.length ? [{
+			index: column,
+			color
+		}] : [];
+		for (const parent of parents.slice(1)) {
+			let index = lanes.findIndex((lane) => (lane === null || lane === void 0 ? void 0 : lane.oid) === parent);
+			if (index === -1) {
+				index = free();
+				lanes[index] = {
+					oid: parent,
+					color: nextColor++ % 8
+				};
+			}
+			joins.push({
+				index,
+				color: lanes[index].color
+			});
+		}
+		while (lanes.length && lanes[lanes.length - 1] === null) lanes.pop();
+		for (const [index, lane] of before.entries()) if (lane && lane.oid !== commit.oid) segments.push({
+			part: "bottom",
+			from: index,
+			to: index,
+			color: lane.color
+		});
+		for (const join of joins) segments.push({
+			part: "bottom",
+			from: column,
+			to: join.index,
+			color: join.color
+		});
+		const width = Math.max(column + 1, ...segments.map((segment) => Math.max(segment.from, segment.to) + 1));
+		rows.push({
+			oid: commit.oid,
+			column,
+			color,
+			segments,
+			width
+		});
+	}
+	return {
+		rows,
+		width: Math.max(0, ...rows.map((row) => row.width))
+	};
+}
 // src/messages.ts
 var messages = {
 	en: {
@@ -3063,6 +3147,11 @@ var messages = {
 		changed: "Files or Git state changed while reading. Refresh to read the current state.",
 		outdated: "The repository changed outside the Editor. Refresh to read the current state.",
 		unsupported: "This repository contains an entry the browser cannot represent.",
+		commitMessage: "Write a message for this record.",
+		switchUnsafe: "Stop the project, and save or record (or undo) every change, before switching branches.",
+		branchExists: "A branch with this name already exists.",
+		locked: "Another Git tool is working on this repository (a lock file, or a merge, cherry-pick, revert or rebase in progress). Try again after it finishes.",
+		branchName: "Git cannot use this name for a branch.",
 		pullUnsafe: "Stop the project, and save or undo unsaved edits and unrecorded changes, before getting changes from GitHub (pull).",
 		diverged: "This branch and GitHub's have both gained records, so they cannot be combined here (pull only fast-forwards). Your branch and files are unchanged.",
 		session: "Reconnect GitHub for this repository and requested permission.",
@@ -3071,6 +3160,26 @@ var messages = {
 		rollbackFailed: "Some local changes could not be restored. Check the files and the Git details.",
 		remoteFailed: "Could not complete the GitHub operation. Check the connection and try again.",
 		remoteDone: "The GitHub operation finished.",
+		stage: "Add to Next Record",
+		unstage: "Remove from Next Record",
+		stageAll: "Add All Changes to Next Record",
+		commitLabel: "Message for this record",
+		commitButton: "Record (Commit)",
+		committed: "Recorded the changes (commit).",
+		commitAuthor: "Recorded as",
+		saveFirst: "Save the project before adding its changes to the next record.",
+		author: "Set user.name and user.email for this repository in Git before recording. The Editor does not change Git settings.",
+		nothingStaged: "Add changes to the next record first.",
+		switchTo: "Switch",
+		currentBranch: "current",
+		createBranch: "Create Branch",
+		newBranch: "New branch name",
+		switchAfterCreate: "Switch to it",
+		createFromRemote: "Create and Switch",
+		remoteBranches: "Branches on GitHub (origin)",
+		switched: "Switched branches. Use Reload Project to open the files of this branch.",
+		branchCreated: "Created the branch.",
+		projectMissing: "The open project folder is not on this branch. Switch anyway?",
 		pulledProject: "Got the changes from GitHub. Use Reload Project to open the updated files.",
 		confirmPush: "Send the records on this branch to GitHub (push)?",
 		details: "Git details",
@@ -3090,7 +3199,19 @@ var messages = {
 		upstreamUnknown: "Not checked with GitHub yet",
 		records: "records",
 		checkedAt: "as of the last check",
-		failed: "Could not read the repository. Check folder access and refresh."
+		failed: "Could not read the repository. Check folder access and refresh.",
+		historyMore: "Show more",
+		historyLoading: "Reading records…",
+		historyFailed: "Could not read the records.",
+		historyActions: "Actions",
+		historyCreateHere: "Create branch here…",
+		historySwitch: "Switch to {name}",
+		historyCreateFromRemote: "Create and switch to {name}",
+		historyCopy: "Copy commit ID",
+		historyCopied: "Copied the commit ID.",
+		historyCopyFailed: "Could not copy the commit ID.",
+		historyRefs: "Branches",
+		cancel: "Cancel"
 	},
 	ja: {
 		pullRequests: "プルリクエスト",
@@ -3134,6 +3255,11 @@ var messages = {
 		changed: "読込中にファイルまたは Git の状態が変わりました。再取得してください。",
 		outdated: "Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。",
 		unsupported: "ブラウザーで扱えない種類の Git エントリーがあります。",
+		commitMessage: "この記録の説明を書いてください。",
+		switchUnsafe: "ブランチを切り替える前に、実行を止め、すべての変更を保存して記録（または取り消し）してください。",
+		branchExists: "同じ名前のブランチがすでにあります。",
+		locked: "ほかの Git の操作が、このリポジトリを使っています（ロックファイル、またはマージ・cherry-pick・revert・rebase の途中）。終わってから、もう一度試してください。",
+		branchName: "この名前は Git のブランチ名に使えません。",
 		pullUnsafe: "GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。",
 		diverged: "このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。",
 		session: "このリポジトリと操作に必要な権限で GitHub に接続してください。",
@@ -3142,6 +3268,26 @@ var messages = {
 		rollbackFailed: "一部のローカルの変更を元に戻せませんでした。ファイルと Git の詳細を確認してください。",
 		remoteFailed: "GitHub との操作を完了できませんでした。接続を確認して、もう一度試してください。",
 		remoteDone: "GitHub との操作が終わりました。",
+		stage: "次の記録に入れる",
+		unstage: "次の記録から外す",
+		stageAll: "すべての変更を次の記録に入れる",
+		commitLabel: "この記録の説明",
+		commitButton: "記録する（コミット）",
+		committed: "変更を記録しました（コミット）。",
+		commitAuthor: "記録する人",
+		saveFirst: "次の記録に入れる前に、作品を保存してください。",
+		author: "記録する前に、Git でこのリポジトリの user.name と user.email を設定してください。Editor は Git の設定を変えません。",
+		nothingStaged: "先に、変更を次の記録に入れてください。",
+		switchTo: "切り替える",
+		currentBranch: "現在",
+		createBranch: "ブランチを作る",
+		newBranch: "新しいブランチの名前",
+		switchAfterCreate: "作ったら切り替える",
+		createFromRemote: "作って切り替える",
+		remoteBranches: "GitHub（origin）のブランチ",
+		switched: "ブランチを切り替えました。「作品を再読込」で、このブランチのファイルを開けます。",
+		branchCreated: "ブランチを作りました。",
+		projectMissing: "開いている作品フォルダは、このブランチにありません。切り替えますか？",
 		pulledProject: "GitHub から取り込みました。「作品を再読込」で更新したファイルを開けます。",
 		confirmPush: "このブランチの記録を GitHub に送りますか（push）？",
 		details: "Git の詳細",
@@ -3161,10 +3307,354 @@ var messages = {
 		upstreamUnknown: "まだ GitHub と確かめていない",
 		records: "件",
 		checkedAt: "最後に確かめた時点",
-		failed: "リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。"
+		failed: "リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。",
+		historyMore: "さらに表示",
+		historyLoading: "記録を読込中…",
+		historyFailed: "記録を読み込めませんでした。",
+		historyActions: "操作",
+		historyCreateHere: "ここからブランチを作る…",
+		historySwitch: "{name} に切り替える",
+		historyCreateFromRemote: "{name} を作って切り替える",
+		historyCopy: "コミットの ID をコピー",
+		historyCopied: "コミットの ID をコピーしました。",
+		historyCopyFailed: "コミットの ID をコピーできませんでした。",
+		historyRefs: "ブランチ",
+		cancel: "キャンセル"
 	}
 };
 var labelsFor = (locale) => locale.startsWith("ja") ? messages.ja : messages.en;
+// src/history-graph-view.tsx
+/** Lane colors that read on light and dark backgrounds. */
+var laneColors = [
+	"#2f7ed8",
+	"#d9480f",
+	"#2b9348",
+	"#9c36b5",
+	"#c2255c",
+	"#0c8599",
+	"#b7791f",
+	"#5c7cfa"
+];
+var column = 14;
+var rowHeight = 44;
+var middle = rowHeight / 2;
+var x = (index) => column / 2 + index * column;
+function Lanes({ row, width }) {
+	return /* @__PURE__ */ React.createElement("svg", {
+		className: "twgit-graph-lanes",
+		"aria-hidden": "true",
+		focusable: "false",
+		width: width * column,
+		height: rowHeight,
+		viewBox: `0 0 ${width * column} ${rowHeight}`
+	}, row.segments.map((segment, index) => {
+		const [top, bottom] = segment.part === "top" ? [0, middle] : [middle, rowHeight];
+		const from = x(segment.from), to = x(segment.to), bend = (top + bottom) / 2;
+		const d = from === to ? `M${from} ${top}V${bottom}` : `M${from} ${top}C${from} ${bend} ${to} ${bend} ${to} ${bottom}`;
+		return /* @__PURE__ */ React.createElement("path", {
+			key: index,
+			d,
+			fill: "none",
+			stroke: laneColors[segment.color % laneColors.length],
+			strokeWidth: 2
+		});
+	}), /* @__PURE__ */ React.createElement("circle", {
+		cx: x(row.column),
+		cy: middle,
+		r: 4.5,
+		fill: laneColors[row.color % laneColors.length],
+		stroke: "Canvas",
+		strokeWidth: 1.5
+	}));
+}
+/**
+* The history as a graph: one row per commit with its lanes drawn in SVG, a button that selects the commit and a
+* button that opens its actions. ArrowUp and ArrowDown move between commits, Home and End to the ends; Enter or
+* Space selects; the context menu key or Shift+F10 opens the actions.
+*/
+function HistoryGraph(props) {
+	const { commits, selected = null, onSelect, locale = "en", busy = false } = props;
+	const labels = labelsFor(locale);
+	const layout = useMemo(() => layoutHistory(commits), [commits]);
+	const rows = useRef([]);
+	const menuButtons = useRef([]);
+	const popup = useRef(null);
+	const [active, setActive] = useState(null);
+	const [menu, setMenu] = useState(null);
+	const [branchName, setBranchName] = useState("");
+	const [checkout, setCheckout] = useState(true);
+	const [status, setStatus] = useState("");
+	const [creating, setCreating] = useState(false);
+	const [createError, setCreateError] = useState("");
+	const mounted = useRef(true);
+	useEffect(() => () => {
+		mounted.current = false;
+	}, []);
+	const focusIndex = Math.max(0, commits.findIndex((commit) => commit.oid === (active !== null && active !== void 0 ? active : selected)));
+	const locals = useMemo(() => {
+		var _props$localBranches;
+		return new Set((_props$localBranches = props.localBranches) !== null && _props$localBranches !== void 0 ? _props$localBranches : commits.flatMap((commit) => commit.refs.filter((ref) => ref.kind === "branch").map((ref) => ref.name)));
+	}, [commits, props.localBranches]);
+	useEffect(() => {
+		var _element$querySelecto;
+		const element = popup.current;
+		if (!element) return;
+		(_element$querySelecto = element.querySelector((menu === null || menu === void 0 ? void 0 : menu.mode) === "create" ? "input" : "[role=\"menuitem\"]")) === null || _element$querySelecto === void 0 || _element$querySelecto.focus();
+	}, [menu === null || menu === void 0 ? void 0 : menu.oid, menu === null || menu === void 0 ? void 0 : menu.mode]);
+	useEffect(() => {
+		var _popup$current;
+		if (!createError || creating) return;
+		const input = (_popup$current = popup.current) === null || _popup$current === void 0 ? void 0 : _popup$current.querySelector("input:not([type])");
+		input === null || input === void 0 || input.focus();
+		input === null || input === void 0 || input.select();
+	}, [createError, creating]);
+	const date = (timestamp) => (/* @__PURE__ */ new Date(timestamp * 1e3)).toLocaleString(locale, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	});
+	const refName = (ref) => ref.current && ref.kind === "branch" ? `${ref.name} (${labels.currentBranch})` : ref.name;
+	const closeMenu = (focus) => {
+		var _current$index;
+		const index = commits.findIndex((commit) => commit.oid === (menu === null || menu === void 0 ? void 0 : menu.oid));
+		setMenu(null);
+		if (focus && index !== -1) (_current$index = (focus === "menu" ? menuButtons : rows).current[index]) === null || _current$index === void 0 || _current$index.focus();
+	};
+	const actionsFor = (commit) => {
+		const actions = [];
+		if (props.onCreateBranch) actions.push({
+			id: "create",
+			label: labels.historyCreateHere,
+			run: () => {
+				setBranchName("");
+				setCheckout(true);
+				setCreateError("");
+				setMenu({
+					oid: commit.oid,
+					mode: "create"
+				});
+			}
+		});
+		for (const ref of commit.refs) {
+			if (ref.kind === "branch" && !ref.current && props.onSwitchBranch) {
+				const run = props.onSwitchBranch;
+				actions.push({
+					id: "switch:" + ref.name,
+					label: labels.historySwitch.replace("{name}", ref.name),
+					run: () => {
+						closeMenu("row");
+						run(ref.name);
+					}
+				});
+			}
+			const name = ref.name.slice(7);
+			if (ref.kind === "remote" && !locals.has(name) && props.onCreateFromRemote) {
+				const run = props.onCreateFromRemote;
+				actions.push({
+					id: "remote:" + name,
+					label: labels.historyCreateFromRemote.replace("{name}", name),
+					run: () => {
+						closeMenu("row");
+						run(name);
+					}
+				});
+			}
+		}
+		actions.push({
+			id: "copy",
+			label: labels.historyCopy,
+			run: () => {
+				var _globalThis$navigator;
+				closeMenu("menu");
+				const clipboard = (_globalThis$navigator = globalThis.navigator) === null || _globalThis$navigator === void 0 ? void 0 : _globalThis$navigator.clipboard;
+				Promise.resolve().then(() => clipboard.writeText(commit.oid)).then(() => setStatus(labels.historyCopied), () => setStatus(labels.historyCopyFailed));
+			}
+		});
+		return actions;
+	};
+	const onRowKey = (event, index) => {
+		const target = {
+			ArrowDown: index + 1,
+			ArrowUp: index - 1,
+			Home: 0,
+			End: commits.length - 1
+		}[event.key];
+		if (target !== void 0) {
+			var _rows$current$Math$mi;
+			event.preventDefault();
+			(_rows$current$Math$mi = rows.current[Math.min(commits.length - 1, Math.max(0, target))]) === null || _rows$current$Math$mi === void 0 || _rows$current$Math$mi.focus();
+		} else if (event.key === "ContextMenu" || event.key === "F10" && event.shiftKey) {
+			event.preventDefault();
+			setMenu({
+				oid: commits[index].oid,
+				mode: "menu"
+			});
+		}
+	};
+	const onMenuKey = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			if (!creating) closeMenu("menu");
+			return;
+		}
+		if ((menu === null || menu === void 0 ? void 0 : menu.mode) !== "menu") return;
+		if (event.key === "Tab") {
+			setMenu(null);
+			return;
+		}
+		const items = [...event.currentTarget.querySelectorAll("[role=\"menuitem\"]:not(:disabled)")];
+		const index = items.indexOf(event.target);
+		const target = {
+			ArrowDown: index + 1,
+			ArrowUp: index - 1,
+			Home: 0,
+			End: items.length - 1
+		}[event.key];
+		if (target === void 0 || !items.length) return;
+		event.preventDefault();
+		items[(target + items.length) % items.length].focus();
+	};
+	const onMenuBlur = (event) => {
+		var _event$currentTarget$;
+		const next = event.relatedTarget;
+		if (!next || !((_event$currentTarget$ = event.currentTarget.parentElement) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.contains(next))) setMenu(null);
+	};
+	const submitBranch = async (event, oid) => {
+		var _result$error;
+		event.preventDefault();
+		const name = branchName.trim();
+		if (!name || !props.onCreateBranch || creating) return;
+		setCreating(true);
+		setCreateError("");
+		let result;
+		try {
+			result = await props.onCreateBranch(oid, name, checkout);
+		} catch (error) {
+			result = {
+				done: false,
+				error: error instanceof Error && error.message ? error.message : labels.failed
+			};
+		}
+		if (!mounted.current) return;
+		setCreating(false);
+		if (!result || result.done) closeMenu("menu");
+		else setCreateError((_result$error = result.error) !== null && _result$error !== void 0 ? _result$error : "");
+	};
+	rows.current.length = commits.length;
+	menuButtons.current.length = commits.length;
+	return /* @__PURE__ */ React.createElement("div", { className: "twgit-graph" }, /* @__PURE__ */ React.createElement("ol", { className: "twgit-graph-list" }, commits.map((commit, index) => {
+		const row = layout.rows[index];
+		const refs = commit.refs.map(refName);
+		const name = [
+			commit.message,
+			commit.author,
+			date(commit.timestamp),
+			...refs.length ? [`${labels.historyRefs}: ${refs.join(", ")}`] : []
+		].join(", ");
+		const open = (menu === null || menu === void 0 ? void 0 : menu.oid) === commit.oid ? menu : null;
+		const actions = (open === null || open === void 0 ? void 0 : open.mode) === "menu" ? actionsFor(commit) : [];
+		return /* @__PURE__ */ React.createElement("li", {
+			key: commit.oid,
+			className: "twgit-graph-row"
+		}, /* @__PURE__ */ React.createElement(Lanes, {
+			row,
+			width: layout.width
+		}), /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: "twgit-graph-commit",
+			ref: (element) => {
+				rows.current[index] = element;
+			},
+			tabIndex: index === focusIndex ? 0 : -1,
+			"aria-pressed": selected === commit.oid,
+			"aria-disabled": busy || void 0,
+			"aria-label": name,
+			title: commit.oid,
+			"data-oid": commit.oid,
+			onFocus: () => setActive(commit.oid),
+			onKeyDown: (event) => onRowKey(event, index),
+			onClick: () => {
+				if (!busy) onSelect(commit.oid);
+			}
+		}, /* @__PURE__ */ React.createElement("span", { className: "twgit-graph-subject" }, commit.refs.map((ref) => /* @__PURE__ */ React.createElement("span", {
+			key: ref.kind + ref.name,
+			className: `twgit-graph-ref twgit-graph-ref-${ref.kind}${ref.current ? " twgit-graph-ref-current" : ""}`
+		}, refName(ref))), commit.message), /* @__PURE__ */ React.createElement("span", { className: "twgit-graph-meta" }, commit.author, " · ", date(commit.timestamp))), /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: "twgit-graph-menu-button",
+			ref: (element) => {
+				menuButtons.current[index] = element;
+			},
+			tabIndex: index === focusIndex || open ? 0 : -1,
+			"aria-haspopup": "menu",
+			"aria-expanded": (open === null || open === void 0 ? void 0 : open.mode) === "menu",
+			"aria-label": `${labels.historyActions}: ${commit.message}`,
+			onClick: () => setMenu(open ? null : {
+				oid: commit.oid,
+				mode: "menu"
+			}),
+			onKeyDown: (event) => {
+				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+					event.preventDefault();
+					setMenu({
+						oid: commit.oid,
+						mode: "menu"
+					});
+				}
+			}
+		}, "⋯"), (open === null || open === void 0 ? void 0 : open.mode) === "menu" && /* @__PURE__ */ React.createElement("div", {
+			ref: popup,
+			className: "twgit-graph-popup",
+			role: "menu",
+			"aria-label": labels.historyActions,
+			onKeyDown: onMenuKey,
+			onBlur: onMenuBlur
+		}, actions.map((action) => /* @__PURE__ */ React.createElement("button", {
+			key: action.id,
+			type: "button",
+			role: "menuitem",
+			tabIndex: -1,
+			"data-action": action.id,
+			disabled: busy && action.id !== "copy",
+			onClick: action.run
+		}, action.label))), (open === null || open === void 0 ? void 0 : open.mode) === "create" && /* @__PURE__ */ React.createElement("div", {
+			ref: popup,
+			className: "twgit-graph-popup",
+			role: "dialog",
+			"aria-label": labels.historyCreateHere,
+			onKeyDown: onMenuKey
+		}, /* @__PURE__ */ React.createElement("form", { onSubmit: (event) => void submitBranch(event, commit.oid) }, /* @__PURE__ */ React.createElement("label", null, labels.newBranch, " ", /* @__PURE__ */ React.createElement("input", {
+			value: branchName,
+			required: true,
+			disabled: creating,
+			"aria-invalid": createError ? true : void 0,
+			onChange: (event) => setBranchName(event.currentTarget.value)
+		})), /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("input", {
+			type: "checkbox",
+			checked: checkout,
+			disabled: creating,
+			onChange: (event) => setCheckout(event.currentTarget.checked)
+		}), " ", labels.switchAfterCreate), createError && /* @__PURE__ */ React.createElement("p", {
+			className: "twgit-graph-form-error",
+			role: "alert"
+		}, createError), /* @__PURE__ */ React.createElement("span", { className: "twgit-graph-form-actions" }, /* @__PURE__ */ React.createElement("button", {
+			type: "submit",
+			disabled: creating || busy || !branchName.trim()
+		}, labels.createBranch), /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			disabled: creating,
+			onClick: () => closeMenu("menu")
+		}, labels.cancel)))));
+	})), props.hasMore && props.onShowMore && /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "twgit-graph-more",
+		disabled: props.loadingMore,
+		onClick: props.onShowMore
+	}, props.loadingMore ? labels.historyLoading : labels.historyMore), /* @__PURE__ */ React.createElement("p", {
+		className: "twgit-graph-status",
+		role: "status"
+	}, status));
+}
 // src/connection-settings.tsx
 var en$1 = {
 	title: "GitHub connection",
@@ -3321,7 +3811,8 @@ var en = {
 	rateLimit: "The public GitHub API rate limit was reached. Try again after the limit resets.",
 	failed: "Could not read GitHub. Try again.",
 	changed: "The pull request changed while it was being read. Open it again.",
-	tooManyFiles: "GitHub only returns the first 3,000 changed files. This pull request exceeds that limit."
+	tooManyFiles: "GitHub only returns the first 3,000 changed files. This pull request exceeds that limit.",
+	openTabs: "Open as tabs"
 };
 var ja = {
 	title: "プルリクエスト",
@@ -3342,12 +3833,13 @@ var ja = {
 	rateLimit: "公開 GitHub API の利用上限に達しました。上限の解除後に再試行してください。",
 	failed: "GitHub から取得できませんでした。再試行してください。",
 	changed: "取得中にプルリクエストが更新されました。もう一度開いてください。",
-	tooManyFiles: "変更ファイルが GitHub API の取得上限である 3,000 件を超えています。"
+	tooManyFiles: "変更ファイルが GitHub API の取得上限である 3,000 件を超えています。",
+	openTabs: "タブで開く"
 };
 function errorMessage(error, labels) {
 	return error instanceof PullRequestError ? labels[error.code] : labels.failed;
 }
-function PullRequests({ name, labels, locale, renderBlock, locateFor }) {
+function PullRequests({ name, labels, locale, renderBlock, locateFor, openTabs }) {
 	const client = useMemo(() => createGitHubPullRequests(name), [name]);
 	const [page, setPage] = useState(1);
 	const [listing, setListing] = useState();
@@ -3432,7 +3924,26 @@ function PullRequests({ name, labels, locale, renderBlock, locateFor }) {
 		href: pr.url,
 		target: "_blank",
 		rel: "noreferrer"
-	}, labels.onGitHub)), /* @__PURE__ */ React.createElement(ProjectSourceReview, {
+	}, labels.onGitHub), openTabs && /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		"data-git-open-tabs": "",
+		onClick: () => openTabs(`${name}#${pr.number}@${pr.head.sha}`, pr.files.flatMap((file) => {
+			if (!("patch" in file)) return [];
+			let projects;
+			try {
+				projects = readProjectSourceDiff(file.patch, file.beforeSource);
+			} catch (_unused) {
+				return [];
+			}
+			return projects ? [{
+				path: file.path,
+				before: projects[0],
+				after: projects[1],
+				loadAsset: file.loadAsset,
+				locateBlock: locateFor === null || locateFor === void 0 ? void 0 : locateFor(file.path, pr.head.sha)
+			}] : [];
+		}), `${name}#${pr.number}`)
+	}, labels.openTabs)), /* @__PURE__ */ React.createElement(ProjectSourceReview, {
 		title: pr.title,
 		description: pr.description,
 		files: locateFor ? pr.files.map((file) => "patch" in file ? _objectSpread2$1(_objectSpread2$1({}, file), {}, { locateBlock: locateFor(file.path, pr.head.sha) }) : file) : pr.files,
@@ -3441,7 +3952,7 @@ function PullRequests({ name, labels, locale, renderBlock, locateFor }) {
 		rememberAs: `${name}#${pr.number}`
 	}))));
 }
-function PullRequestReviewPanel({ repository, locale, renderBlock, locateFor }) {
+function PullRequestReviewPanel({ repository, locale, renderBlock, locateFor, openTabs }) {
 	const labels = locale.startsWith("ja") ? ja : en;
 	const [origin, setOrigin] = useState();
 	useEffect(() => {
@@ -3476,7 +3987,8 @@ function PullRequestReviewPanel({ repository, locale, renderBlock, locateFor })
 		labels,
 		locale,
 		renderBlock,
-		locateFor
+		locateFor,
+		openTabs
 	});
 }
 // src/editor-block-locator.ts
@@ -3532,7 +4044,7 @@ var initial = {
 var controllers = /* @__PURE__ */ new WeakMap();
 var watchInterval = 2e3;
 function GitPanel({ vm, document, host, controller }) {
-	var _state$repository, _state$snapshot$head$, _state$snapshot$head, _state$snapshot2;
+	var _state$snapshot, _state$repository, _state$snapshot$head$, _state$snapshot$head;
 	const [visible, setVisible] = useState(false);
 	const [slot, setSlot] = useState(null);
 	const shown = visible || slot !== null;
@@ -3565,9 +4077,10 @@ function GitPanel({ vm, document, host, controller }) {
 	const handled = useRef(null);
 	const labels = labelsFor(locale);
 	const background = useRef(null);
+	/** Whether an operation ran to the end, or the message the panel shows for why it did not. */
 	const run = async (operation, automatic = false) => {
 		if (running.current && !automatic && background.current) await background.current;
-		if (running.current || !alive.current) return;
+		if (running.current || !alive.current) return { done: false };
 		let settle = () => {};
 		if (automatic) background.current = new Promise((resolve) => {
 			settle = resolve;
@@ -3582,12 +4095,13 @@ function GitPanel({ vm, document, host, controller }) {
 		try {
 			const update = await operation();
 			if (epoch.current === ticket) setState((previous) => _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, previous), update), {}, { busy: automatic ? previous.busy : false }));
+			return { done: true };
 		} catch (error) {
-			if (epoch.current !== ticket) return;
+			if (epoch.current !== ticket) return { done: false };
 			const code = error instanceof GitPanelError ? error.code : "failed";
 			if (automatic && code === "changed") {
 				handled.current = null;
-				return;
+				return { done: false };
 			}
 			const message = labels[code] || labels.failed;
 			setState((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
@@ -3595,6 +4109,10 @@ function GitPanel({ vm, document, host, controller }) {
 				busy: automatic ? previous.busy : false,
 				diff: null
 			}));
+			return {
+				done: false,
+				error: message
+			};
 		} finally {
 			running.current = false;
 			if (epoch.current !== ticket && !refreshPending.current && alive.current) setState((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, { busy: false }));
@@ -3876,6 +4394,105 @@ function GitPanel({ vm, document, host, controller }) {
 			};
 		});
 	};
+	const [message, setMessage] = useState("");
+	const localOperation = (operation, notice) => {
+		const repository = current.current.repository;
+		if (!repository || !host.localWrite) return Promise.resolve({ done: false });
+		return run(async () => {
+			var _current$current$proj2;
+			const ticket = epoch.current;
+			await repository.localOperation(operation, () => {
+				var _host$isProjectRunnin2;
+				if (epoch.current !== ticket) throw new GitPanelError("changed");
+				if (operation.kind === "stage" && host.isProjectDirty()) throw new GitPanelError("saveFirst");
+				if ((operation.kind === "switchBranch" || operation.kind === "createBranch" && operation.checkout) && (host.isProjectDirty() || ((_host$isProjectRunnin2 = host.isProjectRunning) === null || _host$isProjectRunnin2 === void 0 ? void 0 : _host$isProjectRunnin2.call(host)))) throw new GitPanelError("switchUnsafe");
+			});
+			if (operation.kind === "commit") setMessage("");
+			const snapshot = await repository.read((_current$current$proj2 = current.current.project) !== null && _current$current$proj2 !== void 0 ? _current$current$proj2 : "");
+			return {
+				snapshot,
+				changes: snapshot.changes,
+				selected: null,
+				diff: null,
+				commit: null,
+				notice
+			};
+		});
+	};
+	const [newBranch, setNewBranch] = useState("");
+	const [switchAfterCreate, setSwitchAfterCreate] = useState(true);
+	const changeBranch = async (operation) => {
+		var _document$defaultView2;
+		const repository = current.current.repository;
+		const project = current.current.project;
+		const switching = operation.kind === "switchBranch" || operation.checkout;
+		if (!repository) return { done: false };
+		const at = operation.kind === "createBranch" ? operation.at : void 0;
+		if (switching && project && !(operation.kind === "createBranch" && !operation.fromRemote && !at) && !await (at ? repository.hasFolder(at, project, "commit") : repository.hasFolder(operation.name, project, operation.kind === "createBranch" && operation.fromRemote)) && !((_document$defaultView2 = document.defaultView) === null || _document$defaultView2 === void 0 ? void 0 : _document$defaultView2.confirm(labels.projectMissing))) return { done: false };
+		const result = await localOperation(operation, switching ? labels.switched : labels.branchCreated);
+		if (operation.kind === "createBranch" && !operation.fromRemote && !at) setNewBranch("");
+		return result;
+	};
+	const [history, setHistory] = useState({
+		commits: [],
+		cursor: null,
+		loading: false,
+		failed: false
+	});
+	const historyTicket = useRef(0);
+	useEffect(() => {
+		const ticket = ++historyTicket.current;
+		const repository = state.repository;
+		if (!repository || !state.snapshot) {
+			setHistory({
+				commits: [],
+				cursor: null,
+				loading: false,
+				failed: false
+			});
+			return;
+		}
+		setHistory((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
+			cursor: null,
+			loading: true,
+			failed: false
+		}));
+		repository.history().then((page) => {
+			if (historyTicket.current === ticket) setHistory({
+				commits: page.commits,
+				cursor: page.cursor,
+				loading: false,
+				failed: false
+			});
+		}, () => {
+			if (historyTicket.current === ticket) setHistory({
+				commits: [],
+				cursor: null,
+				loading: false,
+				failed: true
+			});
+		});
+	}, [state.repository, state.snapshot]);
+	const showMoreHistory = () => {
+		const repository = state.repository;
+		if (!repository || !history.cursor || history.loading) return;
+		const ticket = historyTicket.current;
+		setHistory((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, { loading: true }));
+		repository.history({ after: history.cursor }).then((page) => {
+			if (historyTicket.current === ticket) setHistory((previous) => ({
+				commits: [...previous.commits, ...page.commits],
+				cursor: page.cursor,
+				loading: false,
+				failed: false
+			}));
+		}, () => {
+			if (historyTicket.current === ticket) setHistory((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
+				cursor: null,
+				loading: false,
+				failed: true
+			}));
+		});
+	};
 	const focusTrap = (event) => {
 		if (event.key === "Escape") {
 			event.stopPropagation();
@@ -3883,7 +4500,7 @@ function GitPanel({ vm, document, host, controller }) {
 			return;
 		}
 		if (event.key !== "Tab") return;
-		const items = [...event.currentTarget.querySelectorAll("button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex=\"0\"]")].filter((item) => item.getClientRects().length > 0);
+		const items = [...event.currentTarget.querySelectorAll("button:not(:disabled):not([tabindex=\"-1\"]), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex=\"0\"]")].filter((item) => item.getClientRects().length > 0);
 		const first = items[0], last = items[items.length - 1];
 		if (event.shiftKey && (document.activeElement === first || document.activeElement === event.currentTarget)) {
 			event.preventDefault();
@@ -3904,14 +4521,41 @@ function GitPanel({ vm, document, host, controller }) {
 		"unstaged",
 		"untracked"
 	];
+	const branching = !!host.localWrite && !!state.snapshot;
+	const writable = !!host.localWrite && !state.commit && !!((_state$snapshot = state.snapshot) === null || _state$snapshot === void 0 ? void 0 : _state$snapshot.branch);
+	const unrecorded = [...new Set(state.changes.filter((change) => change.group === "unstaged" || change.group === "untracked").map((change) => change.path))];
+	const staged = state.changes.some((change) => change.group === "staged");
 	const projectList = typeof projectChanges === "object" ? projectChanges : null;
 	const projectFile = state.project === null ? null : [state.project, "project.source.json"].filter(Boolean).join("/");
 	const fileLocator = (change) => locator && change.path === projectFile && (change.group === "unstaged" || change.group === "untracked" || change.group === "staged" && !state.changes.some((item) => item.path === change.path && item.group === "unstaged")) ? locator : void 0;
 	const reviewLocator = (path, headSha) => {
-		var _state$snapshot;
-		return locator && path === projectFile && ((_state$snapshot = state.snapshot) === null || _state$snapshot === void 0 ? void 0 : _state$snapshot.head) === headSha && !state.changes.length ? locator : void 0;
+		var _state$snapshot2;
+		return locator && path === projectFile && ((_state$snapshot2 = state.snapshot) === null || _state$snapshot2 === void 0 ? void 0 : _state$snapshot2.head) === headSha && !state.changes.length ? locator : void 0;
 	};
 	const selection = projectList && !state.selected ? findElement(projectList.list, element) : null;
+	const openTabs = slot && host.openPanel && host.renderReviewBlock ? (key, files, rememberAs) => openProjectSourceTabs(host.openPanel, {
+		key,
+		files,
+		renderBlock: host.renderReviewBlock,
+		locale,
+		rememberAs
+	}) : void 0;
+	const openFileTabs = (change) => openTabs && ((before, after) => {
+		var _state$commit;
+		let files;
+		try {
+			files = [{
+				path: change.path,
+				before: parseProjectSource(before),
+				after: parseProjectSource(after),
+				loadAsset: loadAsset !== null && loadAsset !== void 0 ? loadAsset : void 0,
+				locateBlock: fileLocator(change)
+			}];
+		} catch (_unused3) {
+			return;
+		}
+		openTabs(`${(_state$commit = state.commit) !== null && _state$commit !== void 0 ? _state$commit : change.group}:${change.path}`, files);
+	});
 	const content = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h2", null, labels.title), /* @__PURE__ */ React.createElement("button", {
 		onClick: chooseRoot,
 		disabled: state.busy
@@ -3947,7 +4591,8 @@ function GitPanel({ vm, document, host, controller }) {
 		repository: state.repository,
 		locale,
 		renderBlock: host.renderReviewBlock,
-		locateFor: reviewLocator
+		locateFor: reviewLocator,
+		openTabs
 	}), !review && state.repository && /* @__PURE__ */ React.createElement("div", { className: "twgit-content" }, /* @__PURE__ */ React.createElement("aside", null, state.browser && /* @__PURE__ */ React.createElement("details", null, /* @__PURE__ */ React.createElement("summary", null, labels.browse), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("code", null, state.browser.path || "/")), /* @__PURE__ */ React.createElement("button", {
 		disabled: state.busy || !state.browser.path,
 		onClick: () => void browse(state.browser.path.split("/").slice(0, -1).join("/"))
@@ -3962,13 +4607,25 @@ function GitPanel({ vm, document, host, controller }) {
 		disabled: state.busy,
 		onClick: () => void controller.refresh()
 	}, labels.worktree)), projectChanges === "loading" && /* @__PURE__ */ React.createElement("p", { role: "status" }, projectChangeLabels(locale).loading), projectChanges === "unreadable" && /* @__PURE__ */ React.createElement("p", null, projectChangeLabels(locale).unreadable), (() => {
-		const fileList = groups.map((group) => /* @__PURE__ */ React.createElement("section", { key: group }, /* @__PURE__ */ React.createElement("h3", null, labels[group], " · ", state.changes.filter((change) => change.group === group).length), /* @__PURE__ */ React.createElement("ul", null, state.changes.filter((change) => change.group === group).map((change) => /* @__PURE__ */ React.createElement("li", { key: change.path }, /* @__PURE__ */ React.createElement("button", {
+		const fileList = groups.map((group) => /* @__PURE__ */ React.createElement("section", { key: group }, /* @__PURE__ */ React.createElement("h3", null, labels[group], " · ", state.changes.filter((change) => change.group === group).length), /* @__PURE__ */ React.createElement("ul", null, state.changes.filter((change) => change.group === group).map((change) => /* @__PURE__ */ React.createElement("li", {
+			key: change.path,
+			className: writable ? "twgit-file-row" : void 0
+		}, /* @__PURE__ */ React.createElement("button", {
 			className: "twgit-file",
 			"data-git-group": group,
 			disabled: state.busy,
 			"aria-pressed": state.selected === change,
 			onClick: () => openFile(change)
-		}, /* @__PURE__ */ React.createElement("small", { className: "twgit-change-kind" }, !change.after ? labels.deleted : !change.before ? labels.added : labels.modified), " ", change.path))))));
+		}, /* @__PURE__ */ React.createElement("small", { className: "twgit-change-kind" }, !change.after ? labels.deleted : !change.before ? labels.added : labels.modified), " ", change.path), writable && /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: "twgit-stage",
+			disabled: state.busy,
+			"aria-label": `${group === "staged" ? labels.unstage : labels.stage}: ${change.path}`,
+			onClick: () => void localOperation({
+				kind: group === "staged" ? "unstage" : "stage",
+				paths: [change.path]
+			})
+		}, group === "staged" ? labels.unstage : labels.stage))))));
 		return projectList ? /* @__PURE__ */ React.createElement(ProjectChangeListView, {
 			changes: projectList,
 			selected: selection ? element : null,
@@ -3980,12 +4637,100 @@ function GitPanel({ vm, document, host, controller }) {
 			fileListOpen,
 			setFileListOpen
 		}) : fileList;
-	})(), !state.changes.length && /* @__PURE__ */ React.createElement("p", null, labels.clean), /* @__PURE__ */ React.createElement("h3", null, labels.history), /* @__PURE__ */ React.createElement("ol", { className: "twgit-history" }, (_state$snapshot2 = state.snapshot) === null || _state$snapshot2 === void 0 ? void 0 : _state$snapshot2.commits.map((commit) => /* @__PURE__ */ React.createElement("li", { key: commit.oid }, /* @__PURE__ */ React.createElement("button", {
+	})(), !state.changes.length && /* @__PURE__ */ React.createElement("p", null, labels.clean), writable && /* @__PURE__ */ React.createElement("section", {
+		className: "twgit-commit",
+		"aria-label": labels.commitButton
+	}, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		disabled: state.busy || !unrecorded.length,
+		onClick: () => void localOperation({
+			kind: "stage",
+			paths: unrecorded
+		})
+	}, labels.stageAll), /* @__PURE__ */ React.createElement("label", null, labels.commitLabel, /* @__PURE__ */ React.createElement("textarea", {
+		value: message,
+		rows: 3,
+		disabled: state.busy,
+		onChange: (event) => setMessage(event.currentTarget.value)
+	})), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		disabled: state.busy || !staged || !message.trim(),
+		onClick: () => {
+			var _host$localWrite, _host$localWrite$auth;
+			localOperation({
+				kind: "commit",
+				message,
+				author: (_host$localWrite = host.localWrite) === null || _host$localWrite === void 0 || (_host$localWrite$auth = _host$localWrite.author) === null || _host$localWrite$auth === void 0 ? void 0 : _host$localWrite$auth.call(_host$localWrite)
+			}, labels.committed);
+		}
+	}, labels.commitButton)), branching && state.snapshot && /* @__PURE__ */ React.createElement("section", {
+		className: "twgit-branches",
+		"aria-label": labels.branches
+	}, /* @__PURE__ */ React.createElement("h3", null, labels.branches), /* @__PURE__ */ React.createElement("ul", null, state.snapshot.branches.map((name) => /* @__PURE__ */ React.createElement("li", { key: name }, /* @__PURE__ */ React.createElement("code", null, name), name === state.snapshot.branch ? /* @__PURE__ */ React.createElement("small", null, " · ", labels.currentBranch) : /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		disabled: state.busy,
+		"aria-label": `${labels.switchTo}: ${name}`,
+		onClick: () => void changeBranch({
+			kind: "switchBranch",
+			name
+		})
+	}, labels.switchTo)))), state.snapshot.head && /* @__PURE__ */ React.createElement("form", { onSubmit: (event) => {
+		event.preventDefault();
+		if (newBranch.trim()) changeBranch({
+			kind: "createBranch",
+			name: newBranch.trim(),
+			checkout: switchAfterCreate
+		});
+	} }, /* @__PURE__ */ React.createElement("label", null, labels.newBranch, " ", /* @__PURE__ */ React.createElement("input", {
+		value: newBranch,
+		disabled: state.busy,
+		onChange: (event) => setNewBranch(event.currentTarget.value)
+	})), /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("input", {
+		type: "checkbox",
+		checked: switchAfterCreate,
+		disabled: state.busy,
+		onChange: (event) => setSwitchAfterCreate(event.currentTarget.checked)
+	}), " ", labels.switchAfterCreate), /* @__PURE__ */ React.createElement("button", {
+		type: "submit",
+		disabled: state.busy || !newBranch.trim()
+	}, labels.createBranch)), state.snapshot.remoteBranches.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", null, labels.remoteBranches), /* @__PURE__ */ React.createElement("ul", null, state.snapshot.remoteBranches.map((name) => /* @__PURE__ */ React.createElement("li", { key: name }, /* @__PURE__ */ React.createElement("code", null, "origin/", name), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
 		disabled: state.busy,
-		"aria-pressed": state.commit === commit.oid,
-		title: commit.oid,
-		onClick: () => void selectCommit(commit.oid)
-	}, commit.message.split("\n")[0]), /* @__PURE__ */ React.createElement("small", null, commit.author, " · ", (/* @__PURE__ */ new Date(commit.timestamp * 1e3)).toLocaleString(locale)))))), /* @__PURE__ */ React.createElement("main", { className: "twgit-diff" }, selection && projectList ? /* @__PURE__ */ React.createElement(ProjectElementView, {
+		"aria-label": `${labels.createFromRemote}: origin/${name}`,
+		onClick: () => void changeBranch({
+			kind: "createBranch",
+			name,
+			fromRemote: true,
+			checkout: true
+		})
+	}, labels.createFromRemote)))))), /* @__PURE__ */ React.createElement("h3", null, labels.history), state.snapshot && /* @__PURE__ */ React.createElement(HistoryGraph, _objectSpread2$1({
+		commits: history.commits,
+		selected: state.commit,
+		locale,
+		busy: state.busy,
+		onSelect: (oid) => void selectCommit(oid),
+		hasMore: !!history.cursor,
+		loadingMore: history.loading,
+		onShowMore: showMoreHistory,
+		localBranches: state.snapshot.branches
+	}, branching ? {
+		onCreateBranch: (oid, name, checkout) => changeBranch({
+			kind: "createBranch",
+			name,
+			at: oid,
+			checkout
+		}),
+		onSwitchBranch: (name) => changeBranch({
+			kind: "switchBranch",
+			name
+		}),
+		onCreateFromRemote: (name) => changeBranch({
+			kind: "createBranch",
+			name,
+			fromRemote: true,
+			checkout: true
+		})
+	} : {})), history.loading && !history.commits.length && /* @__PURE__ */ React.createElement("p", null, labels.historyLoading), history.failed && /* @__PURE__ */ React.createElement("p", null, labels.historyFailed)), /* @__PURE__ */ React.createElement("main", { className: "twgit-diff" }, selection && projectList ? /* @__PURE__ */ React.createElement(ProjectElementView, {
 		changes: projectList,
 		selection,
 		locale,
@@ -3998,6 +4743,7 @@ function GitPanel({ vm, document, host, controller }) {
 		labels,
 		locale,
 		locateBlock: fileLocator(state.selected),
+		onOpenTabs: openFileTabs(state.selected),
 		renderBlock: host.renderReviewBlock,
 		loadAsset
 	}) : /* @__PURE__ */ React.createElement("p", null, labels.select))));
@@ -4028,8 +4774,8 @@ function upstreamText({ upstream }, labels) {
 	}
 }
 function mountGitPanel({ vm, document, host }) {
-	var _document$defaultView2;
-	if (!((_document$defaultView2 = document.defaultView) === null || _document$defaultView2 === void 0 ? void 0 : _document$defaultView2.showDirectoryPicker)) return null;
+	var _document$defaultView3;
+	if (!((_document$defaultView3 = document.defaultView) === null || _document$defaultView3 === void 0 ? void 0 : _document$defaultView3.showDirectoryPicker)) return null;
 	const root = document.createElement("div");
 	document.body.append(root);
 	const controller = {
@@ -4065,4 +4811,4 @@ function renderGitMenu(createElement, { vm, locale = "en", MenuItem, MenuSection
 		}
 	}, labelsFor(locale).menu));
 }
-export { GitPanelError, createEditorBlockLocator, createReadOnlyFs, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, mountGitPanel, openProjectComparison, openRepository, renderGitMenu };
+export { GitPanelError, HistoryGraph, createEditorBlockLocator, createReadOnlyFs, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, laneColors, layoutHistory, mountGitPanel, openProjectComparison, openProjectSourceTabs, openRepository, renderGitMenu };