@kubohiroya/turbowarp-plus-editor-git 0.14.0 → 0.15.0

package/README.ja.md

@@ -2,12 +2,14 @@
 
 [English](README.md)
 
-TurboWarp Plus Editor のファイルメニューに、読み取り専用の「ローカル Git」を追加します。リポジトリルートを一度選び、配下の sb3-toolchain v1 作品フォルダをパネルから開きます。作品の編集と保存には Editor の project-folder 接続を使います。
+TurboWarp Plus Editor のファイルメニューに「ローカル Git」を追加します。リポジトリルートを一度選び、配下の sb3-toolchain v1 作品フォルダをパネルから開きます。作品の編集と保存には Editor の project-folder 接続を使います。
 
 ステージ済み・未ステージ・未追跡の変更、現在のブランチ、HEAD、ローカルブランチと直近50件の履歴を表示します。ファイルを選ぶとテキスト差分またはバイナリのサイズを確認できます。作品データ（`project.source.json`）は、ホストがブロックの描画関数を渡していればステージ・スプライト別、コード別のブロックで比べ、「テキスト」に切り替えると行単位の差分を表示します。ステージ・スプライトの見出しには、その版の現在のコスチューム（ステージは背景）のサムネイルを添えます。素材は比較する版から読みます（ステージ済みは HEAD とインデックス、未ステージはインデックスと作業ツリー、未追跡は作業ツリー、コミットは第一親とそのコミット）。素材のフォルダはその版の `sb3-source.json` の `assetsDirectory`（既定は `assets`）です。読めない版では名前だけを示します。コミットを選ぶと第一親との差分を表示します。作品を選んでいるときは、変更一覧と差分をそのフォルダに絞ります。
 
 パネルを開いている間は、2 秒ごと、ウィンドウにフォーカスが戻ったとき、対応環境では `FileSystemObserver` の通知でリポジトリを確認します。HEAD、インデックス、`packed-refs`、`config`、現在のブランチの参照、選択中の作品フォルダのファイル（作品を選んでいない場合は作業ツリー全体、5,000 件まで）のサイズと更新時刻を比べます。変更があり、差分やコミットを開いていなければ読み直します。差分・コミット・プルリクエストのレビューを開いている間は表示を保ち、**再取得** を案内します。Git がメタデータをロックしている間は確認を待ちます。**作品を再読込** では、Editor の未保存編集を確認してから同じ作品を開き直します。Git の閲覧には読み取り専用のアダプターを使い、インデックスの更新を無効にします。読み取り中にファイルや Git の状態が変わった場合は、外部操作の完了後に再取得します。
 
+ホストが `localWrite` を渡すと、現在のブランチで、ファイルを次の記録に入れる（ステージ）、次の記録から外す（アンステージ）、入れた変更を記録する（コミット）操作も使えます。pull と同じく、Git の書き込みを先にまとめ、置き換えるファイルを確かめ直してから適用し、途中で失敗したら適用した分を戻します。書き込むのは `.git/index`、オブジェクト、現在のブランチの参照だけで、作業ツリーと `.git/config` は書きません。コミットの作者はリポジトリの `user.name` と `user.email` を使い、足りない分だけ `localWrite.author()` で補います。補った値を設定には書きません。Editor に保存していない編集があるときは、ステージを待ちます。ブラウザーからは実行権限とシンボリックリンクが見えないため、Git が `100644` 以外のモードで記録しているファイルはステージできません。ほかのツールが `index.lock` を持っているときや、マージ・cherry-pick・revert・rebase の途中では操作しません。`localWrite` がなければ、パネルは読むだけです。
+
 File System Access に対応する Chromium 系ブラウザーが必要です。初版は通常の `.git` ディレクトリとファイル内容の変更を扱います。linked worktree、サブモジュール、シンボリックリンクは対象外です。作業ツリーの実行権限の変更はブラウザーから検出できません。Git に記録済みのファイルモードは表示します。バイナリアセットはサイズを示し、テキスト差分の生成には上限があります。
 
 Node.js 26 で `npm ci` と `npm test` を実行します。Vite でライブラリとスタイルシート、TypeScript で型宣言を生成します。`npm pack` で Editor 用の配布物を作成します。`npm run test:browser` は、最小 editor runtime（`@kubohiroya/turbowarp-plus-editor-test-runtime`）の上で、比較ダイアログのブロックの描画を Chromium で試します。Editor が固定する VM と Scratch Blocks を使い、Editor のビルドは要りません。Editor では既定で有効です。起動 URL に `twPlusLocalGit=0` を指定するとパネルの接続を解除できます。

package/README.md

@@ -2,12 +2,14 @@
 
 [日本語](README.ja.md)
 
-Local Git adds a read-only panel to the TurboWarp Plus Editor File menu. Select the repository root once, then browse to an sb3-toolchain v1 project folder inside it. Project editing and saving are supplied by the Editor's project-folder integration.
+Local Git adds a panel to the TurboWarp Plus Editor File menu. Select the repository root once, then browse to an sb3-toolchain v1 project folder inside it. Project editing and saving are supplied by the Editor's project-folder integration.
 
 The panel separates staged, unstaged, and untracked changes. It shows the current branch, HEAD, local branches, and the latest 50 commits. Select a file to inspect its text diff or binary size. When the host supplies a block renderer, project data (`project.source.json`) is compared as blocks by stage, sprite and code, and **Text** switches to the line diff. Each stage and sprite heading shows a thumbnail of its current costume (the backdrop for the stage) in each version. Assets are read from the compared versions: HEAD and the index for staged changes, the index and the working tree for unstaged changes, the working tree for untracked files, and the first parent and the commit for history. The assets folder is the `assetsDirectory` of that version's `sb3-source.json` (`assets` by default). When an asset cannot be read, only the name is shown. Pull request reviews read the same thumbnails from raw.githubusercontent.com at the merge base and head, without using the GitHub API rate limit. A review's **Reviewed** marks are kept in browser storage per repository and pull request, together with each script's content: they survive closing the panel and reloading the Editor, and only the marks of scripts whose content changed are cleared when the pull request head moves. They are never written to project files or Git. Select a commit to compare its files with its first parent. The selected project limits the file list and diffs to that folder.
 
 While the panel is open, it checks the repository every two seconds, when the window regains focus, and on `FileSystemObserver` notifications where available. It compares the sizes and modification times of HEAD, the index, `packed-refs`, `config`, the current branch ref, and the files in the selected project folder (the whole work tree when no project is selected, up to 5,000 files). When something changed and no diff or commit is open, the panel reads the repository again. While a diff, a commit or a pull request review is open, it keeps the view and asks you to **Refresh** instead. Checks wait while Git holds a lock on its metadata. **Reload Project** opens the selected project again using the Editor's unsaved-edit confirmation. Git inspection uses a read-only adapter and isomorphic-git with index refresh disabled. If the repository changes during a read, refresh after the other operation completes.
 
+When the host passes `localWrite`, the panel can also add files to the next record (stage), remove them from it (unstage) and record the staged changes (commit) on the current branch. Like pull, these operations collect Git's writes first and apply them only after the files they replace are checked again; a failure part way puts back what was applied. They write only `.git/index`, objects and the current branch ref; the work tree and `.git/config` are never written. Commits use the repository's `user.name` and `user.email`; `localWrite.author()` fills in only what the config lacks, and is never written to it. Staging waits until the Editor's edits are saved. The browser cannot see executable bits or symbolic links, so files that Git records with another mode than `100644` cannot be staged here. Operations stop while another tool holds `index.lock` or is in the middle of a merge, cherry-pick, revert or rebase. Without `localWrite`, the panel only reads.
+
 A Chromium-based browser with File System Access support is required. The first version supports ordinary `.git` directories and content changes. Linked worktrees, submodules, and symbolic links are outside this scope. The browser cannot detect working-tree executable-bit changes. Recorded index and tree modes remain visible. Binary assets show sizes, and text diff generation is bounded.
 
 Use Node.js 26, run `npm ci`, then `npm test`. Vite builds the library and stylesheet, and TypeScript emits declarations. `npm pack` prepares the artifact used by the Editor build. `npm run test:browser` runs the comparison dialog's block drawing in Chromium on the minimal editor runtime (`@kubohiroya/turbowarp-plus-editor-test-runtime`), with the Editor's pinned VM and Scratch Blocks and without building the Editor. The Editor enables the panel by default. Start it with `twPlusLocalGit=0` in its URL to disable the integration.

package/dist/filesystem.d.ts

@@ -1,6 +1,6 @@
 export declare class GitPanelError extends Error {
-    code: 'invalid' | 'changed' | 'large' | 'unsupported' | 'pullUnsafe' | 'diverged' | 'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed';
-    constructor(code: 'invalid' | 'changed' | 'large' | 'unsupported' | 'pullUnsafe' | 'diverged' | 'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed', message?: string);
+    code: 'invalid' | 'changed' | 'large' | 'unsupported' | 'pullUnsafe' | 'diverged' | 'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed' | 'saveFirst' | 'author' | 'nothingStaged' | 'commitMessage';
+    constructor(code: 'invalid' | 'changed' | 'large' | 'unsupported' | 'pullUnsafe' | 'diverged' | 'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed' | 'saveFirst' | 'author' | 'nothingStaged' | 'commitMessage', message?: string);
 }
 export declare const fileError: (code: string, path: string) => Error & {
     code: string;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import type { GitConnectionSettings } from './connection-settings.js';
+import type { GitAuthor } from './local-operations.js';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
 import type { ScratchBlockLocationWorkspace } from './block-diff-location.js';
 export { createScratchBlocksDiffLocator } from './block-diff-location.js';
@@ -9,6 +10,7 @@ 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 type { GitAuthor, LocalOperation } from './local-operations.js';
 export interface GitHost {
     connectionSettings?: GitConnectionSettings;
     renderReviewBlock?: ProjectBlockRenderer;
@@ -25,6 +27,13 @@ export interface GitHost {
     openTargetCode?(targetId: string): void | Promise<void>;
     /** The Editor's code workspace as it is now. */
     getWorkspace?(): ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>;
+    /**
+     * Offers staging, unstaging and commits. Without it the panel only reads. `author` is used only where the
+     * repository's Git config has no user.name or user.email; the panel never writes the config.
+     */
+    localWrite?: {
+        author?(): GitAuthor | undefined;
+    };
 }
 export interface GitPanelRequest {
     reference: {

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 { 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 { i as createReadOnlyFs, r as GitPanelError, t as openRepository } from "./repository-Cx-mxT9l.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";
@@ -3063,6 +3063,7 @@ 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.",
 		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 +3072,16 @@ 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.",
 		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",
@@ -3134,6 +3145,7 @@ var messages = {
 		changed: "読込中にファイルまたは Git の状態が変わりました。再取得してください。",
 		outdated: "Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。",
 		unsupported: "ブラウザーで扱えない種類の Git エントリーがあります。",
+		commitMessage: "この記録の説明を書いてください。",
 		pullUnsafe: "GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。",
 		diverged: "このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。",
 		session: "このリポジトリと操作に必要な権限で GitHub に接続してください。",
@@ -3142,6 +3154,16 @@ 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: "先に、変更を次の記録に入れてください。",
 		pulledProject: "GitHub から取り込みました。「作品を再読込」で更新したファイルを開けます。",
 		confirmPush: "このブランチの記録を GitHub に送りますか（push）？",
 		details: "Git の詳細",
@@ -3532,7 +3554,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, _state$snapshot3;
 	const [visible, setVisible] = useState(false);
 	const [slot, setSlot] = useState(null);
 	const shown = visible || slot !== null;
@@ -3574,26 +3596,25 @@ function GitPanel({ vm, document, host, controller }) {
 		});
 		running.current = true;
 		const ticket = ++epoch.current;
-		setState((previous) => automatic ? _objectSpread2$1(_objectSpread2$1({}, previous), {}, { busy: true }) : _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
+		if (!automatic) setState((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
 			busy: true,
 			error: null,
 			notice: void 0
 		}));
 		try {
 			const update = await operation();
-			if (epoch.current === ticket) setState((previous) => _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, previous), update), {}, { busy: false }));
+			if (epoch.current === ticket) setState((previous) => _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, previous), update), {}, { busy: automatic ? previous.busy : false }));
 		} catch (error) {
 			if (epoch.current !== ticket) return;
 			const code = error instanceof GitPanelError ? error.code : "failed";
 			if (automatic && code === "changed") {
 				handled.current = null;
-				setState((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, { busy: false }));
 				return;
 			}
 			const message = labels[code] || labels.failed;
 			setState((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
 				error: automatic && previous.error ? previous.error : message,
-				busy: false,
+				busy: automatic ? previous.busy : false,
 				diff: null
 			}));
 		} finally {
@@ -3877,6 +3898,29 @@ 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();
+		return run(async () => {
+			var _current$current$proj2;
+			const ticket = epoch.current;
+			await repository.localOperation(operation, () => {
+				if (epoch.current !== ticket) throw new GitPanelError("changed");
+				if (operation.kind === "stage" && host.isProjectDirty()) throw new GitPanelError("saveFirst");
+			});
+			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 focusTrap = (event) => {
 		if (event.key === "Escape") {
 			event.stopPropagation();
@@ -3905,12 +3949,15 @@ function GitPanel({ vm, document, host, controller }) {
 		"unstaged",
 		"untracked"
 	];
+	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 content = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h2", null, labels.title), /* @__PURE__ */ React.createElement("button", {
@@ -3969,7 +4016,16 @@ function GitPanel({ vm, document, host, controller }) {
 			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,
@@ -3981,7 +4037,33 @@ 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)), /* @__PURE__ */ React.createElement("h3", null, labels.history), /* @__PURE__ */ React.createElement("ol", { className: "twgit-history" }, (_state$snapshot3 = state.snapshot) === null || _state$snapshot3 === void 0 ? void 0 : _state$snapshot3.commits.map((commit) => /* @__PURE__ */ React.createElement("li", { key: commit.oid }, /* @__PURE__ */ React.createElement("button", {
 		disabled: state.busy,
 		"aria-pressed": state.commit === commit.oid,
 		title: commit.oid,

package/dist/local-operations.d.ts

@@ -0,0 +1,22 @@
+/** The name and email a commit records. */
+export type GitAuthor = {
+    name: string;
+    email: string;
+};
+export type LocalOperation = {
+    kind: 'stage';
+    paths: readonly string[];
+} | {
+    kind: 'unstage';
+    paths: readonly string[];
+} | {
+    kind: 'commit';
+    message: string;
+    author?: GitAuthor;
+};
+/**
+ * Stages, unstages or commits in the granted repository. Like pull, Git's writes are collected first and applied
+ * after the files they replace are checked again; a failure part way puts back what was applied. Only `.git/index`,
+ * objects and the current branch ref are written. The work tree and `.git/config` are never written.
+ */
+export declare function runLocalOperation(root: FileSystemDirectoryHandle, operation: LocalOperation, guard: () => void): Promise<void>;

package/dist/messages.d.ts

@@ -41,6 +41,7 @@ export declare const messages: {
         changed: string;
         outdated: string;
         unsupported: string;
+        commitMessage: string;
         pullUnsafe: string;
         diverged: string;
         session: string;
@@ -49,6 +50,16 @@ export declare const messages: {
         rollbackFailed: string;
         remoteFailed: string;
         remoteDone: string;
+        stage: string;
+        unstage: string;
+        stageAll: string;
+        commitLabel: string;
+        commitButton: string;
+        committed: string;
+        commitAuthor: string;
+        saveFirst: string;
+        author: string;
+        nothingStaged: string;
         pulledProject: string;
         confirmPush: string;
         details: string;
@@ -112,6 +123,7 @@ export declare const messages: {
         changed: string;
         outdated: string;
         unsupported: string;
+        commitMessage: string;
         pullUnsafe: string;
         diverged: string;
         session: string;
@@ -120,6 +132,16 @@ export declare const messages: {
         rollbackFailed: string;
         remoteFailed: string;
         remoteDone: string;
+        stage: string;
+        unstage: string;
+        stageAll: string;
+        commitLabel: string;
+        commitButton: string;
+        committed: string;
+        commitAuthor: string;
+        saveFirst: string;
+        author: string;
+        nothingStaged: string;
         pulledProject: string;
         confirmPush: string;
         details: string;

package/dist/{repository-CtvWYPQ8.js → repository-Cx-mxT9l.js}

@@ -11822,6 +11822,132 @@ async function _writeObject({ fs, gitdir, type, object, format = "content", oid
 	});
 	return oid;
 }
+function posixifyPathBuffer(buffer) {
+	let idx;
+	while (~(idx = buffer.indexOf(92))) buffer[idx] = 47;
+	return buffer;
+}
+/**
+* Add a file to the git index (aka staging area)
+*
+* @param {object} args
+* @param {FsClient} args.fs - a file system implementation
+* @param {string} args.dir - The [working tree](dir-vs-gitdir.md) directory path
+* @param {string} [args.gitdir=join(dir, '.git')] - [required] The [git directory](dir-vs-gitdir.md) path
+* @param {string|string[]} args.filepath - The path to the file to add to the index
+* @param {object} [args.cache] - a [cache](cache.md) object
+* @param {boolean} [args.force=false] - add to index even if matches gitignore. Think `git add --force`
+* @param {boolean} [args.parallel=false] - process each input file in parallel. Parallel processing will result in more memory consumption but less process time
+*
+* @returns {Promise<void>} Resolves successfully once the git index has been updated
+*
+* @example
+* await fs.promises.writeFile('/tutorial/README.md', `# TEST`)
+* await git.add({ fs, dir: '/tutorial', filepath: 'README.md' })
+* console.log('done')
+*
+*/
+async function add({ fs: _fs, dir, gitdir = join(dir, ".git"), filepath, cache = {}, force = false, parallel = true }) {
+	try {
+		assertParameter("fs", _fs);
+		assertParameter("dir", dir);
+		assertParameter("gitdir", gitdir);
+		assertParameter("filepath", filepath);
+		const fs = new FileSystem(_fs);
+		const updatedGitdir = await discoverGitdir({
+			fsp: fs,
+			dotgit: gitdir
+		});
+		await GitIndexManager.acquire({
+			fs,
+			gitdir: updatedGitdir,
+			cache
+		}, async (index) => {
+			const autocrlf = await (await GitConfigManager.get({
+				fs,
+				gitdir: updatedGitdir
+			})).get("core.autocrlf");
+			return addToIndex({
+				dir,
+				gitdir: updatedGitdir,
+				fs,
+				filepath,
+				index,
+				force,
+				parallel,
+				autocrlf
+			});
+		});
+	} catch (err) {
+		err.caller = "git.add";
+		throw err;
+	}
+}
+function isTracked(index, filepath) {
+	if (index.has({ filepath })) return true;
+	const prefix = `${filepath}/`;
+	for (const entry of index.entriesMap.keys()) if (entry.startsWith(prefix)) return true;
+	return false;
+}
+async function addToIndex({ dir, gitdir, fs, filepath, index, force, parallel, autocrlf }) {
+	filepath = Array.isArray(filepath) ? filepath : [filepath];
+	const promises = filepath.map(async (currentFilepath) => {
+		if (!force && !isTracked(index, currentFilepath)) {
+			if (await GitIgnoreManager.isIgnored({
+				fs,
+				dir,
+				gitdir,
+				filepath: currentFilepath
+			})) return;
+		}
+		const stats = await fs.lstat(join(dir, currentFilepath));
+		if (!stats) throw new NotFoundError(currentFilepath);
+		if (stats.isDirectory()) {
+			const children = await fs.readdir(join(dir, currentFilepath));
+			if (parallel) {
+				const promises = children.map((child) => addToIndex({
+					dir,
+					gitdir,
+					fs,
+					filepath: [join(currentFilepath, child)],
+					index,
+					force,
+					parallel,
+					autocrlf
+				}));
+				await Promise.all(promises);
+			} else for (const child of children) await addToIndex({
+				dir,
+				gitdir,
+				fs,
+				filepath: [join(currentFilepath, child)],
+				index,
+				force,
+				parallel,
+				autocrlf
+			});
+		} else {
+			const object = stats.isSymbolicLink() ? await fs.readlink(join(dir, currentFilepath)).then(posixifyPathBuffer) : await fs.read(join(dir, currentFilepath), { autocrlf });
+			if (object === null) throw new NotFoundError(currentFilepath);
+			const oid = await _writeObject({
+				fs,
+				gitdir,
+				type: "blob",
+				object
+			});
+			index.insert({
+				filepath: currentFilepath,
+				stats,
+				oid
+			});
+		}
+	});
+	const settledPromises = await Promise.allSettled(promises);
+	const rejectedPromises = settledPromises.filter((settle) => settle.status === "rejected").map((settle) => settle.reason);
+	if (rejectedPromises.length > 1) throw new MultipleGitError(rejectedPromises);
+	if (rejectedPromises.length === 1) throw rejectedPromises[0];
+	return settledPromises.filter((settle) => settle.status === "fulfilled" && settle.value).map((settle) => settle.value);
+}
 async function hasObjectLoose({ fs, gitdir, oid }) {
 	const source = `objects/${oid.slice(0, 2)}/${oid.slice(2)}`;
 	return fs.exists(`${gitdir}/${source}`);
@@ -14037,6 +14163,81 @@ async function _fetch({ fs, cache, http, onProgress, onMessage, onAuth, onAuthSu
 	return res;
 }
 /**
+* Create a new commit
+*
+* @param {Object} args
+* @param {FsClient} args.fs - a file system implementation
+* @param {SignCallback} [args.onSign] - a PGP signing implementation
+* @param {string} [args.dir] - The [working tree](dir-vs-gitdir.md) directory path
+* @param {string} [args.gitdir=join(dir,'.git')] - [required] The [git directory](dir-vs-gitdir.md) path
+* @param {string} [args.message] - The commit message to use. Required, unless `amend === true`
+* @param {Object} [args.author] - The details about the author.
+* @param {string} [args.author.name] - Default is `user.name` config.
+* @param {string} [args.author.email] - Default is `user.email` config.
+* @param {number} [args.author.timestamp=Math.floor(Date.now()/1000)] - Set the author timestamp field. This is the integer number of seconds since the Unix epoch (1970-01-01 00:00:00).
+* @param {number} [args.author.timezoneOffset] - Set the author timezone offset field. This is the difference, in minutes, from the current timezone to UTC. Default is `(new Date()).getTimezoneOffset()`.
+* @param {Object} [args.committer = author] - The details about the commit committer, in the same format as the author parameter. If not specified, the author details are used.
+* @param {string} [args.committer.name] - Default is `user.name` config.
+* @param {string} [args.committer.email] - Default is `user.email` config.
+* @param {number} [args.committer.timestamp=Math.floor(Date.now()/1000)] - Set the committer timestamp field. This is the integer number of seconds since the Unix epoch (1970-01-01 00:00:00).
+* @param {number} [args.committer.timezoneOffset] - Set the committer timezone offset field. This is the difference, in minutes, from the current timezone to UTC. Default is `(new Date()).getTimezoneOffset()`.
+* @param {string} [args.signingKey] - Sign the tag object using this private PGP key.
+* @param {boolean} [args.amend = false] - If true, replaces the last commit pointed to by `ref` with a new commit.
+* @param {boolean} [args.dryRun = false] - If true, simulates making a commit so you can test whether it would succeed. Implies `noUpdateBranch`.
+* @param {boolean} [args.noUpdateBranch = false] - If true, does not update the branch pointer after creating the commit.
+* @param {boolean} [args.disallowEmpty = false] - If true, throws an error instead of creating a commit with no staged changes.
+* @param {string} [args.ref] - The fully expanded name of the branch to commit to. Default is the current branch pointed to by HEAD. (TODO: fix it so it can expand branch names without throwing if the branch doesn't exist yet.)
+* @param {string[]} [args.parent] - The SHA-1 object ids of the commits to use as parents. If not specified, the commit pointed to by `ref` is used.
+* @param {string} [args.tree] - The SHA-1 object id of the tree to use. If not specified, a new tree object is created from the current git index.
+* @param {object} [args.cache] - a [cache](cache.md) object
+*
+* @returns {Promise<string>} Resolves successfully with the SHA-1 object id of the newly created commit.
+*
+* @example
+* let sha = await git.commit({
+*   fs,
+*   dir: '/tutorial',
+*   author: {
+*     name: 'Mr. Test',
+*     email: 'mrtest@example.com',
+*   },
+*   message: 'Added the a.txt file'
+* })
+* console.log(sha)
+*
+*/
+async function commit({ fs: _fs, onSign, dir, gitdir = join(dir, ".git"), message, author, committer, signingKey, amend = false, dryRun = false, noUpdateBranch = false, disallowEmpty = false, ref, parent, tree, cache = {} }) {
+	try {
+		assertParameter("fs", _fs);
+		if (!amend) assertParameter("message", message);
+		if (signingKey) assertParameter("onSign", onSign);
+		const fs = new FileSystem(_fs);
+		return await _commit({
+			fs,
+			cache,
+			onSign,
+			gitdir: await discoverGitdir({
+				fsp: fs,
+				dotgit: gitdir
+			}),
+			message,
+			author,
+			committer,
+			signingKey,
+			amend,
+			dryRun,
+			noUpdateBranch,
+			disallowEmpty,
+			ref,
+			parent,
+			tree
+		});
+	} catch (err) {
+		err.caller = "git.commit";
+		throw err;
+	}
+}
+/**
 * Get the name of the branch currently pointed to by .git/HEAD
 *
 * @param {Object} args
@@ -15795,6 +15996,148 @@ async function readCommit({ fs, dir, gitdir = join(dir, ".git"), oid, cache = {}
 	}
 }
 /**
+* Remove a file from the git index (aka staging area)
+*
+* Note that this does NOT delete the file in the working directory.
+*
+* @param {object} args
+* @param {FsClient} args.fs - a file system client
+* @param {string} [args.dir] - The [working tree](dir-vs-gitdir.md) directory path
+* @param {string} [args.gitdir=join(dir, '.git')] - [required] The [git directory](dir-vs-gitdir.md) path
+* @param {string|string[]} args.filepath - The path to the file to remove from the index, or an array of paths
+* @param {object} [args.cache] - a [cache](cache.md) object
+*
+* @returns {Promise<void>} Resolves successfully once the git index has been updated
+*
+* @example
+* await git.remove({ fs, dir: '/tutorial', filepath: 'README.md' })
+* console.log('done')
+*
+* @example
+* // remove several files from the index with a single write of the index
+* await git.remove({ fs, dir: '/tutorial', filepath: ['README.md', 'docs/old.md'] })
+* console.log('done')
+*
+*/
+async function remove({ fs: _fs, dir, gitdir = join(dir, ".git"), filepath, cache = {} }) {
+	try {
+		assertParameter("fs", _fs);
+		assertParameter("gitdir", gitdir);
+		assertParameter("filepath", filepath);
+		const fsp = new FileSystem(_fs);
+		const updatedGitdir = await discoverGitdir({
+			fsp,
+			dotgit: gitdir
+		});
+		await GitIndexManager.acquire({
+			fs: fsp,
+			gitdir: updatedGitdir,
+			cache
+		}, async function(index) {
+			const filepaths = Array.isArray(filepath) ? filepath : [filepath];
+			for (const currentFilepath of filepaths) index.delete({ filepath: currentFilepath });
+		});
+	} catch (err) {
+		err.caller = "git.remove";
+		throw err;
+	}
+}
+async function hashObject$1({ gitdir, type, object }) {
+	return shasum(GitObject.wrap({
+		type,
+		object
+	}));
+}
+/**
+* Reset a file in the git index (aka staging area)
+*
+* Note that this does NOT modify the file in the working directory.
+*
+* @param {object} args
+* @param {FsClient} args.fs - a file system client
+* @param {string} [args.dir] - The [working tree](dir-vs-gitdir.md) directory path
+* @param {string} [args.gitdir=join(dir, '.git')] - [required] The [git directory](dir-vs-gitdir.md) path
+* @param {string} args.filepath - The path to the file to reset in the index
+* @param {string} [args.ref = 'HEAD'] - A ref to the commit to use
+* @param {object} [args.cache] - a [cache](cache.md) object
+*
+* @returns {Promise<void>} Resolves successfully once the git index has been updated
+*
+* @example
+* await git.resetIndex({ fs, dir: '/tutorial', filepath: 'README.md' })
+* console.log('done')
+*
+*/
+async function resetIndex({ fs: _fs, dir, gitdir = join(dir, ".git"), filepath, ref, cache = {} }) {
+	try {
+		assertParameter("fs", _fs);
+		assertParameter("gitdir", gitdir);
+		assertParameter("filepath", filepath);
+		const fs = new FileSystem(_fs);
+		const updatedGitdir = await discoverGitdir({
+			fsp: fs,
+			dotgit: gitdir
+		});
+		let oid;
+		let workdirOid;
+		try {
+			oid = await GitRefManager.resolve({
+				fs,
+				gitdir: updatedGitdir,
+				ref: ref || "HEAD"
+			});
+		} catch (e) {
+			if (ref || !(e instanceof NotFoundError)) throw e;
+		}
+		if (oid) try {
+			oid = await resolveFilepath({
+				fs,
+				cache,
+				gitdir: updatedGitdir,
+				oid,
+				filepath
+			});
+		} catch (e) {
+			if (!(e instanceof NotFoundError) && !(e instanceof InvalidFilepathError) && !(e instanceof ObjectTypeError && e.data.filepath)) throw e;
+			oid = null;
+		}
+		let stats = {
+			ctime: /* @__PURE__ */ new Date(0),
+			mtime: /* @__PURE__ */ new Date(0),
+			dev: 0,
+			ino: 0,
+			mode: 0,
+			uid: 0,
+			gid: 0,
+			size: 0
+		};
+		const object = dir && await fs.read(join(dir, filepath));
+		if (object) {
+			workdirOid = await hashObject$1({
+				gitdir: updatedGitdir,
+				type: "blob",
+				object
+			});
+			if (oid === workdirOid) stats = await fs.lstat(join(dir, filepath));
+		}
+		await GitIndexManager.acquire({
+			fs,
+			gitdir: updatedGitdir,
+			cache
+		}, async function(index) {
+			index.delete({ filepath });
+			if (oid) index.insert({
+				filepath,
+				stats,
+				oid
+			});
+		});
+	} catch (err) {
+		err.caller = "git.reset";
+		throw err;
+	}
+}
+/**
 * Get the value of a symbolic ref or resolve a ref to its SHA-1 object id
 *
 * @param {object} args
@@ -16494,7 +16837,7 @@ async function readOptional(fs, path) {
 }
 var sameBytes = (left, right) => left === right || Boolean(left && right && left.length === right.length && left.every((byte, i) => byte === right[i]));
 // src/mutation-fs.ts
-var missing = (error) => {
+var missing$1 = (error) => {
 	var _errorCode;
 	return ["ENOENT", "ENOTDIR"].includes((_errorCode = errorCode(error)) !== null && _errorCode !== void 0 ? _errorCode : "");
 };
@@ -16538,7 +16881,7 @@ function createMutationFs(root, worktree) {
 				time: stat.mtimeMs
 			};
 		} catch (error) {
-			if (missing(error)) return null;
+			if (missing$1(error)) return null;
 			throw error;
 		}
 	}
@@ -16549,7 +16892,7 @@ function createMutationFs(root, worktree) {
 		try {
 			return (await base.promises.stat(path)).isDirectory() ? "directory" : "file";
 		} catch (error) {
-			if (!missing(error)) throw error;
+			if (!missing$1(error)) throw error;
 		}
 	}
 	async function stage(path, after) {
@@ -16570,7 +16913,7 @@ function createMutationFs(root, worktree) {
 		try {
 			for (const entry of await base.promises.readdir(path)) names.add(entry);
 		} catch (error) {
-			if (!missing(error)) throw error;
+			if (!missing$1(error)) throw error;
 		}
 		for (const change of changes.values()) {
 			if (parent(change.path) !== path) continue;
@@ -16824,6 +17167,96 @@ async function runRemoteOperation(root, operation, getSession, guard, signal) {
 	};
 	return ((_globalThis$navigator = globalThis.navigator) === null || _globalThis$navigator === void 0 ? void 0 : _globalThis$navigator.locks) ? navigator.locks.request("tw-plus-git-mutation", execute) : execute();
 }
+// src/local-operations.ts
+init_objectSpread2();
+var missing = (error) => {
+	var _errorCode;
+	return [
+		"ENOENT",
+		"ENOTDIR",
+		"NotFoundError"
+	].includes((_errorCode = errorCode(error)) !== null && _errorCode !== void 0 ? _errorCode : "");
+};
+/**
+* Stages, unstages or commits in the granted repository. Like pull, Git's writes are collected first and applied
+* after the files they replace are checked again; a failure part way puts back what was applied. Only `.git/index`,
+* objects and the current branch ref are written. The work tree and `.git/config` are never written.
+*/
+async function runLocalOperation(root, operation, guard) {
+	var _globalThis$navigator;
+	const execute = async () => {
+		guard();
+		const transaction = createMutationFs(root, false);
+		const options = {
+			fs: transaction.fs,
+			dir: "/",
+			gitdir: "/.git",
+			cache: {}
+		};
+		const read = createReadOnlyFs(root).promises;
+		const exists = async (path) => {
+			try {
+				await read.stat(path);
+				return true;
+			} catch (error) {
+				if (missing(error)) return false;
+				throw error;
+			}
+		};
+		for (const path of [
+			"/.git/index.lock",
+			"/.git/MERGE_HEAD",
+			"/.git/CHERRY_PICK_HEAD",
+			"/.git/REVERT_HEAD",
+			"/.git/rebase-merge",
+			"/.git/rebase-apply"
+		]) if (await exists(path)) throw new GitPanelError("changed");
+		if (operation.kind === "stage") {
+			const modes = /* @__PURE__ */ new Map();
+			await walk(_objectSpread2(_objectSpread2({}, options), {}, {
+				trees: [STAGE()],
+				map: async (path, [entry]) => {
+					if (entry && path !== "." && await entry.type() === "blob") modes.set(path, await entry.mode());
+					return true;
+				}
+			}));
+			for (const path of operation.paths) {
+				pathParts(path);
+				const mode = modes.get(path);
+				if (mode !== void 0 && mode !== 33188) throw new GitPanelError("unsupported");
+				if (await exists("/" + path)) await add(_objectSpread2(_objectSpread2({}, options), {}, { filepath: path }));
+				else await remove(_objectSpread2(_objectSpread2({}, options), {}, { filepath: path }));
+			}
+		} else if (operation.kind === "unstage") for (const path of operation.paths) {
+			pathParts(path);
+			await resetIndex(_objectSpread2(_objectSpread2({}, options), {}, { filepath: path }));
+		}
+		else {
+			var _await$configured, _operation$author, _await$configured2, _operation$author2;
+			const message = operation.message.trim();
+			if (!message) throw new GitPanelError("commitMessage");
+			if (!await currentBranch(options)) throw new GitPanelError("unsupported");
+			const configured = async (path) => {
+				const value = await getConfig(_objectSpread2(_objectSpread2({}, options), {}, { path }));
+				return typeof value === "string" && value.trim() ? value : void 0;
+			};
+			const name = (_await$configured = await configured("user.name")) !== null && _await$configured !== void 0 ? _await$configured : (_operation$author = operation.author) === null || _operation$author === void 0 || (_operation$author = _operation$author.name) === null || _operation$author === void 0 ? void 0 : _operation$author.trim();
+			const email = (_await$configured2 = await configured("user.email")) !== null && _await$configured2 !== void 0 ? _await$configured2 : (_operation$author2 = operation.author) === null || _operation$author2 === void 0 || (_operation$author2 = _operation$author2.email) === null || _operation$author2 === void 0 ? void 0 : _operation$author2.trim();
+			if (!name || !email) throw new GitPanelError("author");
+			if (!(await statusMatrix(_objectSpread2(_objectSpread2({}, options), {}, { refresh: false }))).some(([, head, , stage]) => head !== stage)) throw new GitPanelError("nothingStaged");
+			await commit(_objectSpread2(_objectSpread2({}, options), {}, {
+				message: message + "\n",
+				author: {
+					name,
+					email
+				}
+			}));
+		}
+		guard();
+		await transaction.commit(guard);
+	};
+	return ((_globalThis$navigator = globalThis.navigator) === null || _globalThis$navigator === void 0 ? void 0 : _globalThis$navigator.locks) ? navigator.locks.request("tw-plus-git-mutation", execute) : execute();
+}
 // src/repository.ts
 init_objectSpread2();
 var projectSourceLimit = 16777216;
@@ -17437,6 +17870,8 @@ async function openRepository(root) {
 				throw error;
 			}
 		}),
+		/** Stages, unstages or commits; see `runLocalOperation`. `guard` throws to stop before each write. */
+		localOperation: (operation, guard) => serial(() => runLocalOperation(root, operation, guard)),
 		read: (scope) => serial(() => read(scope)),
 		readDiff: (snapshot, change) => serial(() => readDiff(snapshot, change)),
 		historyChanges: (snapshot, oid) => serial(() => historyChanges(snapshot, oid)),

package/dist/repository.d.ts

@@ -1,3 +1,4 @@
+import type { LocalOperation } from './local-operations.js';
 import type { GetRemoteSession, RemoteOperation } from './remote-operations.js';
 import type { ProjectAssetLoader } from './project-assets.js';
 export { createReadOnlyFs, GitPanelError } from './filesystem.js';
@@ -84,6 +85,8 @@ export declare function openRepository(root: FileSystemDirectoryHandle): Promise
     probe: (scope?: string) => Promise<string>;
     readOrigin: () => Promise<any>;
     remoteOperation: (operation: RemoteOperation, getSession: GetRemoteSession, guard: () => void, signal?: AbortSignal) => Promise<void>;
+    /** Stages, unstages or commits; see `runLocalOperation`. `guard` throws to stop before each write. */
+    localOperation: (operation: LocalOperation, guard: () => void) => Promise<void>;
     read: (scope?: string) => Promise<Snapshot>;
     readDiff: (snapshot: Snapshot, change: FileChange) => Promise<FileDiff>;
     historyChanges: (snapshot: Snapshot, oid: string) => Promise<FileChange[]>;

package/dist/repository.js

@@ -1 +1 @@
-export { r as GitPanelError, i as createReadOnlyFs, t as openRepository, n as upstreamWalkLimit } from "./repository-CtvWYPQ8.js";
+export { r as GitPanelError, i as createReadOnlyFs, t as openRepository, n as upstreamWalkLimit } from "./repository-Cx-mxT9l.js";

package/dist/style.css

@@ -148,6 +148,10 @@
 .twgit-panel aside li { overflow-wrap: anywhere; }
 .twgit-panel summary { cursor: pointer; }
 .twgit-panel .twgit-file { width: 100%; border: 0; margin: 1px 0; }
+.twgit-panel .twgit-stage { font-size: 11px; margin: 0 0 4px; }
+.twgit-commit { display: grid; gap: 6px; margin: 10px 0; padding: 8px; border: 1px solid color-mix(in srgb, CanvasText 18%, Canvas); border-radius: 6px; }
+.twgit-commit label { display: grid; gap: 4px; font-size: 12px; }
+.twgit-commit textarea { font: inherit; resize: vertical; min-height: 3em; }
 .twgit-diff { padding: 0 16px 16px; min-width: 0; overflow: auto; }
 .twgit-diff .diff { font-size: 12px; }
 .twgit-history { list-style: none; margin: 0; padding: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-git",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Read-only local Git panel for TurboWarp Plus Editor",
   "type": "module",
   "license": "MPL-2.0",

package/src/filesystem.ts

@@ -1,6 +1,7 @@
 export class GitPanelError extends Error {
     constructor(public code: 'invalid' | 'changed' | 'large' | 'unsupported' | 'pullUnsafe' | 'diverged' |
-        'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed', message: string = code) {
+        'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed' |
+        'saveFirst' | 'author' | 'nothingStaged' | 'commitMessage', message: string = code) {
         super(message);
         this.name = 'GitPanelError';
     }

package/src/index.tsx

@@ -10,6 +10,7 @@ import {GitPanelError} from './filesystem.js';
 import {ConnectionSettings} from './connection-settings.js';
 import type {GitConnectionSettings} from './connection-settings.js';
 import type {RemoteOperation} from './remote-operations.js';
+import type {GitAuthor, LocalOperation} from './local-operations.js';
 import {PullRequestReviewPanel} from './pull-request-panel.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
 import type {ScratchBlockLocationWorkspace} from './block-diff-location.js';
@@ -25,6 +26,7 @@ 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 type {GitAuthor, LocalOperation} from './local-operations.js';
 
 export interface GitHost {
     connectionSettings?: GitConnectionSettings;
@@ -42,6 +44,11 @@ export interface GitHost {
     openTargetCode?(targetId: string): void | Promise<void>;
     /** The Editor's code workspace as it is now. */
     getWorkspace?(): ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>;
+    /**
+     * Offers staging, unstaging and commits. Without it the panel only reads. `author` is used only where the
+     * repository's Git config has no user.name or user.email; the panel never writes the config.
+     */
+    localWrite?: {author?(): GitAuthor | undefined};
 }
 export interface GitPanelRequest {
     reference: {providerId: string; documentId: string};
@@ -112,22 +119,24 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
         if (automatic) background.current = new Promise(resolve => {settle = resolve;});
         running.current = true;
         const ticket = ++epoch.current;
-        // An automatic refresh keeps the current error and notice, such as an uncertain push result.
-        setState(previous => automatic ? {...previous, busy: true} : {...previous, busy: true, error: null, notice: undefined});
+        // An automatic refresh keeps the current error and notice, such as an uncertain push result. It also
+        // leaves the controls enabled: an operation clicked meanwhile waits for it above, whereas a button
+        // that turned disabled under the pointer would swallow the click.
+        if (!automatic) setState(previous => ({...previous, busy: true, error: null, notice: undefined}));
         try {
             const update = await operation();
-            if (epoch.current === ticket) setState(previous => ({...previous, ...update, busy: false}));
+            if (epoch.current === ticket) setState(previous => ({...previous, ...update, busy: automatic ? previous.busy : false}));
         } catch (error) {
             if (epoch.current !== ticket) return;
             const code = error instanceof GitPanelError ? error.code : 'failed';
             // A background read that met another tool still writing tries again on the next check, without an alert.
             if (automatic && code === 'changed') {
                 handled.current = null;
-                setState(previous => ({...previous, busy: false}));
                 return;
             }
             const message = labels[code as keyof typeof labels] || labels.failed;
-            setState(previous => ({...previous, error: automatic && previous.error ? previous.error : message, busy: false, diff: null}));
+            setState(previous => ({...previous, error: automatic && previous.error ? previous.error : message,
+                busy: automatic ? previous.busy : false, diff: null}));
         } finally {
             running.current = false;
             // A result dropped by a newer load still ends the busy state, unless a refresh follows at once.
@@ -335,6 +344,22 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                 notice: operation === 'pull' && current.current.project !== null ? labels.pulledProject : labels.remoteDone};
         });
     };
+    const [message, setMessage] = useState('');
+    const localOperation = (operation: LocalOperation, notice?: string) => {
+        const repository = current.current.repository;
+        if (!repository || !host.localWrite) return Promise.resolve();
+        return run(async () => {
+            const ticket = epoch.current;
+            await repository.localOperation(operation, () => {
+                if (epoch.current !== ticket) throw new GitPanelError('changed');
+                // Staging records the saved files; edits still in the Editor would be left out without a word.
+                if (operation.kind === 'stage' && host.isProjectDirty()) throw new GitPanelError('saveFirst');
+            });
+            if (operation.kind === 'commit') setMessage('');
+            const snapshot = await repository.read(current.current.project ?? '');
+            return {snapshot, changes: snapshot.changes, selected: null, diff: null, commit: null, notice};
+        });
+    };
     const focusTrap = (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'Escape') {event.stopPropagation(); closePanel(); return;}
         if (event.key !== 'Tab') return;
@@ -350,6 +375,11 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
         state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
     if (!shown) return null;
     const groups: ChangeGroup[] = state.commit ? ['commit'] : ['staged', 'unstaged', 'untracked'];
+    // Writing works on the current changes, not on a record from the history, and only on a branch.
+    const writable = !!host.localWrite && !state.commit && !!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;
     // The open project matches the working tree, so only the working-tree side of its project file can be located.
     const projectFile = state.project === null ? null : [state.project, 'project.source.json'].filter(Boolean).join('/');
@@ -421,6 +451,10 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                                     aria-pressed={state.selected === change} onClick={() => openFile(change)}>
                                     <small className="twgit-change-kind">{!change.after ? labels.deleted : !change.before ? labels.added : labels.modified}</small> {change.path}
                                 </button>
+                                {writable && <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}</button>}
                             </li>)}</ul>
                         </section>);
                         return projectList ? <ProjectChangeListView changes={projectList} selected={selection ? element : null}
@@ -428,6 +462,15 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                             fileListOpen={fileListOpen} setFileListOpen={setFileListOpen}/> : fileList;
                     })()}
                     {!state.changes.length && <p>{labels.clean}</p>}
+                    {writable && <section className="twgit-commit" aria-label={labels.commitButton}>
+                        <button type="button" disabled={state.busy || !unrecorded.length}
+                            onClick={() => void localOperation({kind: 'stage', paths: unrecorded})}>{labels.stageAll}</button>
+                        <label>{labels.commitLabel}
+                            <textarea value={message} rows={3} disabled={state.busy} onChange={event => setMessage(event.currentTarget.value)}/></label>
+                        <button type="button" disabled={state.busy || !staged || !message.trim()}
+                            onClick={() => void localOperation({kind: 'commit', message, author: host.localWrite?.author?.()},
+                                labels.committed)}>{labels.commitButton}</button>
+                    </section>}
                     <h3>{labels.history}</h3>
                     <ol className="twgit-history">{state.snapshot?.commits.map(commit => <li key={commit.oid}>
                         <button disabled={state.busy} aria-pressed={state.commit === commit.oid} title={commit.oid}

package/src/local-operations.ts

@@ -0,0 +1,79 @@
+import * as git from 'isomorphic-git';
+import {createReadOnlyFs, errorCode, GitPanelError, pathParts} from './filesystem.js';
+import {createMutationFs} from './mutation-fs.js';
+
+/** The name and email a commit records. */
+export type GitAuthor = {name: string; email: string};
+export type LocalOperation =
+    | {kind: 'stage'; paths: readonly string[]}
+    | {kind: 'unstage'; paths: readonly string[]}
+    | {kind: 'commit'; message: string; author?: GitAuthor};
+
+const missing = (error: unknown) => ['ENOENT', 'ENOTDIR', 'NotFoundError'].includes(errorCode(error) ?? '');
+
+/**
+ * Stages, unstages or commits in the granted repository. Like pull, Git's writes are collected first and applied
+ * after the files they replace are checked again; a failure part way puts back what was applied. Only `.git/index`,
+ * objects and the current branch ref are written. The work tree and `.git/config` are never written.
+ */
+export async function runLocalOperation(root: FileSystemDirectoryHandle, operation: LocalOperation, guard: () => void) {
+    const execute = async () => {
+        guard();
+        const transaction = createMutationFs(root, false);
+        const options = {fs: transaction.fs, dir: '/', gitdir: '/.git', cache: {}};
+        const read = createReadOnlyFs(root).promises;
+        const exists = async (path: string) => {
+            try {
+                await read.stat(path);
+                return true;
+            } catch (error) {
+                if (missing(error)) return false;
+                throw error;
+            }
+        };
+        // Another tool is in the middle of a merge, rebase or its own write: leave the repository to it.
+        for (const path of ['/.git/index.lock', '/.git/MERGE_HEAD', '/.git/CHERRY_PICK_HEAD', '/.git/REVERT_HEAD',
+            '/.git/rebase-merge', '/.git/rebase-apply']) {
+            if (await exists(path)) throw new GitPanelError('changed');
+        }
+        if (operation.kind === 'stage') {
+            // The browser cannot see executable bits or links: staging such a file would change its mode in Git.
+            const modes = new Map<string, number>();
+            await git.walk({...options, trees: [git.STAGE()], map: async (path, [entry]) => {
+                if (entry && path !== '.' && await entry.type() === 'blob') modes.set(path, await entry.mode());
+                return true;
+            }});
+            for (const path of operation.paths) {
+                pathParts(path);
+                const mode = modes.get(path);
+                if (mode !== undefined && mode !== 0o100644) throw new GitPanelError('unsupported');
+                if (await exists('/' + path)) await git.add({...options, filepath: path});
+                else await git.remove({...options, filepath: path});
+            }
+        } else if (operation.kind === 'unstage') {
+            for (const path of operation.paths) {
+                pathParts(path);
+                await git.resetIndex({...options, filepath: path});
+            }
+        } else {
+            const message = operation.message.trim();
+            if (!message) throw new GitPanelError('commitMessage');
+            const ref = await git.currentBranch(options);
+            if (!ref) throw new GitPanelError('unsupported');
+            const configured = async (path: string) => {
+                const value = await git.getConfig({...options, path});
+                return typeof value === 'string' && value.trim() ? value : undefined;
+            };
+            // The repository's own identity first; the Editor's setting only fills in what Git does not have.
+            const name = await configured('user.name') ?? operation.author?.name?.trim();
+            const email = await configured('user.email') ?? operation.author?.email?.trim();
+            if (!name || !email) throw new GitPanelError('author');
+            const staged = (await git.statusMatrix({...options, refresh: false})).some(([, head, , stage]) => head !== stage);
+            if (!staged) throw new GitPanelError('nothingStaged');
+            await git.commit({...options, message: message + '\n', author: {name, email}});
+        }
+        guard();
+        await transaction.commit(guard);
+    };
+    return globalThis.navigator?.locks ? navigator.locks.request('tw-plus-git-mutation', execute) : execute();
+}

package/src/messages.ts

@@ -17,6 +17,7 @@ export const 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.',
         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.',
@@ -25,6 +26,12 @@ export const 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.',
         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', branch: 'Branch', head: 'HEAD', groups: 'Git groups', added: 'Added', modified: 'Changed', deleted: 'Deleted',
@@ -51,6 +58,7 @@ export const messages = {
         changed: '読込中にファイルまたは Git の状態が変わりました。再取得してください。',
         outdated: 'Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。',
         unsupported: 'ブラウザーで扱えない種類の Git エントリーがあります。',
+        commitMessage: 'この記録の説明を書いてください。',
         pullUnsafe: 'GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。',
         diverged: 'このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。',
         session: 'このリポジトリと操作に必要な権限で GitHub に接続してください。',
@@ -59,6 +67,12 @@ export const messages = {
         rollbackFailed: '一部のローカルの変更を元に戻せませんでした。ファイルと Git の詳細を確認してください。',
         remoteFailed: 'GitHub との操作を完了できませんでした。接続を確認して、もう一度試してください。',
         remoteDone: 'GitHub との操作が終わりました。',
+        stage: '次の記録に入れる', unstage: '次の記録から外す', stageAll: 'すべての変更を次の記録に入れる',
+        commitLabel: 'この記録の説明', commitButton: '記録する（コミット）', committed: '変更を記録しました（コミット）。',
+        commitAuthor: '記録する人',
+        saveFirst: '次の記録に入れる前に、作品を保存してください。',
+        author: '記録する前に、Git でこのリポジトリの user.name と user.email を設定してください。Editor は Git の設定を変えません。',
+        nothingStaged: '先に、変更を次の記録に入れてください。',
         pulledProject: 'GitHub から取り込みました。「作品を再読込」で更新したファイルを開けます。',
         confirmPush: 'このブランチの記録を GitHub に送りますか（push）？',
         details: 'Git の詳細', branch: 'ブランチ', head: 'HEAD', groups: 'Git の区分', added: '追加', modified: '変更', deleted: '削除',

package/src/repository.ts

@@ -2,6 +2,8 @@ import * as git from 'isomorphic-git';
 import {createTwoFilesPatch} from 'diff';
 import {createReadOnlyFs, errorCode, GitPanelError, pathParts, readOptional, sameBytes} from './filesystem.js';
 import {runRemoteOperation} from './remote-operations.js';
+import {runLocalOperation} from './local-operations.js';
+import type {LocalOperation} from './local-operations.js';
 import type {GetRemoteSession, RemoteOperation} from './remote-operations.js';
 import {assetLimit, assetsDirectoryParts, folderSettingsLimit, isAssetName} from './project-asset-paths.js';
 import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
@@ -458,6 +460,9 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
                     throw error;
                 }
             }),
+        /** Stages, unstages or commits; see `runLocalOperation`. `guard` throws to stop before each write. */
+        localOperation: (operation: LocalOperation, guard: () => void) =>
+            serial(() => runLocalOperation(root, operation, guard)),
         read: (scope?: string) => serial(() => read(scope)),
         readDiff: (snapshot: Snapshot, change: FileChange) => serial(() => readDiff(snapshot, change)),
         historyChanges: (snapshot: Snapshot, oid: string) => serial(() => historyChanges(snapshot, oid)),

package/src/style.css

@@ -26,6 +26,10 @@
 .twgit-panel aside li { overflow-wrap: anywhere; }
 .twgit-panel summary { cursor: pointer; }
 .twgit-panel .twgit-file { width: 100%; border: 0; margin: 1px 0; }
+.twgit-panel .twgit-stage { font-size: 11px; margin: 0 0 4px; }
+.twgit-commit { display: grid; gap: 6px; margin: 10px 0; padding: 8px; border: 1px solid color-mix(in srgb, CanvasText 18%, Canvas); border-radius: 6px; }
+.twgit-commit label { display: grid; gap: 4px; font-size: 12px; }
+.twgit-commit textarea { font: inherit; resize: vertical; min-height: 3em; }
 .twgit-diff { padding: 0 16px 16px; min-width: 0; overflow: auto; }
 .twgit-diff .diff { font-size: 12px; }
 .twgit-history { list-style: none; margin: 0; padding: 0; }