@kubohiroya/turbowarp-plus-editor-git 0.17.0 → 0.18.0

package/dist/messages.d.ts

@@ -3,7 +3,6 @@ export declare const messages: {
         pullRequests: string;
         localChanges: string;
         title: string;
-        menu: string;
         close: string;
         choose: string;
         refresh: string;
@@ -110,12 +109,15 @@ export declare const messages: {
         historyCopyFailed: string;
         historyRefs: string;
         cancel: string;
+        branchMenu: string;
+        openPanel: string;
+        newBranchItem: string;
+        newBranchTitle: string;
     };
     ja: {
         pullRequests: string;
         localChanges: string;
         title: string;
-        menu: string;
         close: string;
         choose: string;
         refresh: string;
@@ -222,6 +224,10 @@ export declare const messages: {
         historyCopyFailed: string;
         historyRefs: string;
         cancel: string;
+        branchMenu: string;
+        openPanel: string;
+        newBranchItem: string;
+        newBranchTitle: string;
     };
 };
 export type Labels = typeof messages.en;

package/dist/{project-asset-paths-nL5sV35A.js → project-asset-paths-BzwVf9HE.js}

@@ -1410,4 +1410,4 @@ function assetsDirectoryParts(settings) {
 	const parts = value.split("/");
 	return parts.every((part) => part && part !== "." && part !== ".." && part.toLowerCase() !== ".git" && !/[\\\0-\x1f\x7f]/.test(part)) ? parts : null;
 }
-export { compareProjectBlocks as a, isRecord as c, targetKey as d, createTwoFilesPatch as f, isAssetName as i, parseProjectSource as l, assetsDirectoryParts as n, createProjectSourceDiff as o, folderSettingsLimit as r, equal as s, assetLimit as t, readProjectSourceDiff as u };
+export { compareProjectBlocks as a, isRecord as c, targetKey as d, _objectWithoutProperties as f, isAssetName as i, parseProjectSource as l, assetsDirectoryParts as n, createProjectSourceDiff as o, createTwoFilesPatch as p, folderSettingsLimit as r, equal as s, assetLimit as t, readProjectSourceDiff as u };

package/dist/{project-comparison-DjMlwyp8.js → project-comparison-BXOQcZ73.js}

@@ -1,5 +1,5 @@
 import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
-import { a as compareProjectBlocks, c as isRecord, d as targetKey, i as isAssetName, l as parseProjectSource, n as assetsDirectoryParts, o as createProjectSourceDiff, r as folderSettingsLimit, s as equal, t as assetLimit, u as readProjectSourceDiff } from "./project-asset-paths-nL5sV35A.js";
+import { a as compareProjectBlocks, c as isRecord, d as targetKey, i as isAssetName, l as parseProjectSource, n as assetsDirectoryParts, o as createProjectSourceDiff, r as folderSettingsLimit, s as equal, t as assetLimit, u as readProjectSourceDiff } from "./project-asset-paths-BzwVf9HE.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 // src/close-button.tsx

package/dist/project-source-diff.js

@@ -1,5 +1,5 @@
-import { a as compareProjectBlocks, o as createProjectSourceDiff, u as readProjectSourceDiff } from "./project-asset-paths-nL5sV35A.js";
-import { _ as usePreviewSync, a as openProjectSourceTabs, c as gitHubRepositoryFromOrigin, d as assetFileName, f as organizeProjectChanges, g as createPreviewSync, h as BlockPreview, i as createScratchBlocksDiffLocator, l as ProjectSourceComparison, m as compareProjectForReview, n as openProjectComparison, p as projectPropertyLabel, r as createScratchBlocksDiffRenderer, s as createGitHubPullRequests, t as ProjectComparisonDialog, u as ProjectSourceReview, v as currentCostume } from "./project-comparison-DjMlwyp8.js";
+import { a as compareProjectBlocks, o as createProjectSourceDiff, u as readProjectSourceDiff } from "./project-asset-paths-BzwVf9HE.js";
+import { _ as usePreviewSync, a as openProjectSourceTabs, c as gitHubRepositoryFromOrigin, d as assetFileName, f as organizeProjectChanges, g as createPreviewSync, h as BlockPreview, i as createScratchBlocksDiffLocator, l as ProjectSourceComparison, m as compareProjectForReview, n as openProjectComparison, p as projectPropertyLabel, r as createScratchBlocksDiffRenderer, s as createGitHubPullRequests, t as ProjectComparisonDialog, u as ProjectSourceReview, v as currentCostume } from "./project-comparison-BXOQcZ73.js";
 import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 // src/project-source-diff.tsx

package/dist/{repository-xIv0iZkj.js → repository-ByKRBftJ.js}

@@ -1,5 +1,5 @@
 import { i as __toESM, n as init_objectSpread2, r as __commonJSMin, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
-import { f as createTwoFilesPatch, i as isAssetName, n as assetsDirectoryParts, o as createProjectSourceDiff, r as folderSettingsLimit, t as assetLimit } from "./project-asset-paths-nL5sV35A.js";
+import { i as isAssetName, n as assetsDirectoryParts, o as createProjectSourceDiff, p as createTwoFilesPatch, r as folderSettingsLimit, t as assetLimit } from "./project-asset-paths-BzwVf9HE.js";
 import { a as _OverloadYield, i as _wrapAsyncGenerator, o as _asyncIterator, r as createGitSmartHttp, t as GitSmartHttpError } from "./smart-http-BmHEkE7K.js";
 // node_modules/inherits/inherits_browser.js
 var require_inherits_browser = /* @__PURE__ */ __commonJSMin(((exports, module) => {
@@ -18014,12 +18014,7 @@ async function openRepository(root) {
 	const assertSnapshot = async (snapshot) => {
 		if (!sameMetadata(snapshot.metadata, await metadata())) throw new GitPanelError("changed");
 	};
-	const read = async (scope = "") => {
-		scope = pathParts(scope).join("/");
-		fs.clearReads();
-		cache = {};
-		const fingerprint = await probe(scope);
-		const before = await metadata();
+	const readRefs = async () => {
 		let head;
 		try {
 			head = await resolveRef(_objectSpread2(_objectSpread2({}, options), {}, { ref: "HEAD" }));
@@ -18030,6 +18025,20 @@ async function openRepository(root) {
 		const branch = await currentBranch(options);
 		const branches = await listBranches(options);
 		const remoteBranches = (await listBranches(_objectSpread2(_objectSpread2({}, options), {}, { remote: "origin" }))).filter((name) => name !== "HEAD" && !branches.includes(name)).sort();
+		return {
+			branch: branch || void 0,
+			head,
+			branches,
+			remoteBranches
+		};
+	};
+	const read = async (scope = "") => {
+		scope = pathParts(scope).join("/");
+		fs.clearReads();
+		cache = {};
+		const fingerprint = await probe(scope);
+		const before = await metadata();
+		const { branch, head, branches, remoteBranches } = await readRefs();
 		const commits = head ? (await log(_objectSpread2(_objectSpread2({}, options), {}, {
 			cache,
 			ref: head,
@@ -18082,7 +18091,7 @@ async function openRepository(root) {
 		if (!sameMetadata(before, await metadata())) throw new GitPanelError("changed");
 		await fs.checkReads();
 		return {
-			branch: branch || void 0,
+			branch,
 			head,
 			branches,
 			remoteBranches,
@@ -18694,6 +18703,14 @@ async function openRepository(root) {
 			}
 		}),
 		read: (scope) => serial(() => read(scope)),
+		/**
+		* The current branch, HEAD and the branch names, read from refs only. Cheap enough to follow branch changes made
+		* by other tools while nothing else is read; `read` returns the same fields.
+		*/
+		refs: () => serial(() => {
+			fs.clearReads();
+			return readRefs();
+		}),
 		readDiff: (snapshot, change) => serial(() => readDiff(snapshot, change)),
 		historyChanges: (snapshot, oid) => serial(() => historyChanges(snapshot, oid)),
 		/**

package/dist/repository.d.ts

@@ -82,6 +82,8 @@ export interface HistoryPage {
 /** Commits read per history page unless asked otherwise. */
 export declare const historyPageSize = 50;
 type Metadata = Map<string, Uint8Array | null>;
+/** The branch fields of a snapshot. */
+export type BranchRefs = Pick<Snapshot, 'branch' | 'head' | 'branches' | 'remoteBranches'>;
 export interface Snapshot {
     branch: string | undefined;
     head: string | null;
@@ -156,6 +158,11 @@ export declare function openRepository(root: FileSystemDirectoryHandle): Promise
      */
     hasFolder: (name: string, path: string, remote?: boolean | "commit") => Promise<boolean>;
     read: (scope?: string) => Promise<Snapshot>;
+    /**
+     * The current branch, HEAD and the branch names, read from refs only. Cheap enough to follow branch changes made
+     * by other tools while nothing else is read; `read` returns the same fields.
+     */
+    refs: () => Promise<BranchRefs>;
     readDiff: (snapshot: Snapshot, change: FileChange) => Promise<FileDiff>;
     historyChanges: (snapshot: Snapshot, oid: string) => Promise<FileChange[]>;
     /**

package/dist/repository.js

@@ -1 +1 @@
-export { o as GitPanelError, s as createReadOnlyFs, t as historyPageSize, n as openRepository, a as pullRequestRef, r as upstreamWalkLimit } from "./repository-xIv0iZkj.js";
+export { o as GitPanelError, s as createReadOnlyFs, t as historyPageSize, n as openRepository, a as pullRequestRef, r as upstreamWalkLimit } from "./repository-ByKRBftJ.js";

package/dist/style.css

@@ -214,4 +214,32 @@
 .twgit-graph-status { margin: 4px 0; font-size: 11px; min-height: 1em; }
 .twgit-panel .twgit-graph-popup [role="menuitem"]:focus-visible, .twgit-graph-popup [role="menuitem"]:focus-visible { outline-offset: -2px; }
 .twgit-graph-form-error { margin: 0; color: #a11919; overflow-wrap: anywhere; }
+/* The branch button sits in the host's menu bar and takes its text color; its menu uses the host's menu colors. */
+.twgit-branch-entry { position: relative; flex: 0 1 auto; align-self: center; display: flex; min-width: 0; font: inherit; }
+.twgit-branch-button { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 16rem; min-height: 2rem; padding: 0 8px;
+    color: inherit; background: transparent; border: 0; border-radius: 4px; font: inherit; white-space: nowrap; cursor: pointer; }
+.twgit-branch-button:hover, .twgit-branch-button[aria-expanded="true"] { background: color-mix(in srgb, currentColor 15%, transparent); }
+.twgit-branch-button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+.twgit-branch-icon { flex: none; }
+.twgit-branch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.twgit-branch-unborn { flex: none; font-size: 11px; opacity: .85; }
+.twgit-branch-caret { flex: none; font-size: 10px; }
+.twgit-branch-popup { position: absolute; z-index: 510; top: calc(100% + 4px); right: 0; display: grid; gap: 2px; min-width: 220px;
+    max-width: min(360px, 90vw); max-height: 70vh; overflow: auto; box-sizing: border-box; padding: 4px;
+    color: var(--text-primary, CanvasText); background: var(--ui-white, Canvas); border: 1px solid var(--ui-black-transparent, GrayText);
+    border-radius: 6px; box-shadow: 0 8px 24px #0004; font: 14px/1.5 system-ui, sans-serif; white-space: normal; }
+.twgit-branch-popup [role^="menuitem"] { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; color: inherit;
+    background: transparent; border: 0; border-radius: 4px; font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; }
+.twgit-branch-popup [role^="menuitem"]:hover, .twgit-branch-popup [role^="menuitem"]:focus-visible {
+    background: color-mix(in srgb, currentColor 12%, transparent); }
+.twgit-branch-popup [role^="menuitem"]:focus-visible { outline: 2px solid var(--looks-secondary, Highlight); outline-offset: -2px; }
+.twgit-branch-popup [aria-disabled="true"]:not([aria-checked="true"]) { opacity: .55; cursor: default; }
+.twgit-branch-popup [aria-checked="true"] { font-weight: 600; }
+.twgit-branch-popup [data-separator-before="true"] { margin-top: 3px; box-shadow: 0 -3px 0 -2px color-mix(in srgb, currentColor 25%, transparent); }
+.twgit-branch-check { flex: none; width: 1em; text-align: center; }
+.twgit-branch-popup form { display: grid; gap: 6px; padding: 6px; font-size: 12px; }
+.twgit-branch-popup form label { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.twgit-branch-popup form input:not([type]) { flex: 1; min-width: 10em; font: inherit; }
+.twgit-branch-popup form button { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 3px 8px; font: inherit; cursor: pointer; }
+.twgit-branch-popup form button:disabled { opacity: .5; cursor: default; }
 /*$vite$:1*/

package/package.json

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

package/src/branch-button.tsx

@@ -0,0 +1,216 @@
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import type {HistoryActionResult} from './history-graph-view.js';
+import {labelsFor} from './messages.js';
+import type {BranchRefs} from './repository.js';
+
+/** What the branch button shows: the branches of the chosen repository as the Git panel last read them. */
+export interface BranchButtonState extends BranchRefs {
+    /** Whether a repository has been chosen. */
+    repository: boolean;
+    /** Whether the host lets the panel switch and create branches. */
+    writable: boolean;
+    /** Whether the panel is running an operation. */
+    busy: boolean;
+}
+/** What the branch button asks the Git panel to do. Branch operations resolve as the panel's own buttons do. */
+export interface BranchButtonActions {
+    open(): void;
+    choose(): void;
+    switchBranch(name: string): Promise<HistoryActionResult>;
+    /** Creates a branch at HEAD. */
+    createBranch(name: string, checkout: boolean): Promise<HistoryActionResult>;
+    /** Creates a local branch from `origin/<name>` and switches to it. */
+    createFromRemote(name: string): Promise<HistoryActionResult>;
+}
+export interface BranchButtonProps extends BranchButtonActions {
+    state: BranchButtonState;
+    locale?: string;
+}
+interface Item {id: string; label: string; checked?: boolean; disabled?: boolean; separatorBefore?: boolean; run(): void}
+
+const menuItems = '[role="menuitem"], [role="menuitemradio"]';
+
+/** Git's branch glyph, drawn in the text color. */
+function BranchIcon() {
+    return <svg className="twgit-branch-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
+        <g fill="none" stroke="currentColor" strokeWidth="1.5">
+            <circle cx="4.5" cy="3.5" r="1.75"/><circle cx="4.5" cy="12.5" r="1.75"/><circle cx="11.5" cy="5.5" r="1.75"/>
+            <path d="M4.5 5.25v5.5M11.5 7.25c0 2.5-2.5 2.75-6 3.75"/>
+        </g>
+    </svg>;
+}
+
+/**
+ * The current branch as a menu button for the host's menu bar, with the menu of branches. Before a repository is
+ * chosen it reads "Git" and offers to choose one. A detached HEAD shows its short commit ID. The menu moves with the
+ * arrow keys, Home and End; Escape closes it and returns to the button. Without `writable` it lists the branches only.
+ */
+export function BranchButton({state, locale = 'en', ...actions}: BranchButtonProps) {
+    const labels = labelsFor(locale);
+    const [mode, setMode] = useState<'closed' | 'menu' | 'create'>('closed');
+    const [initial, setInitial] = useState<'checked' | 'first' | 'last'>('checked');
+    const [name, setName] = useState('');
+    const [checkout, setCheckout] = useState(true);
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState('');
+    const root = useRef<HTMLDivElement>(null);
+    const trigger = useRef<HTMLButtonElement>(null);
+    const popup = useRef<HTMLDivElement>(null);
+    const mounted = useRef(true);
+    useEffect(() => () => {mounted.current = false;}, []);
+    useLayoutEffect(() => {
+        const element = popup.current;
+        if (!element) return;
+        if (mode === 'create') {
+            element.querySelector('input')?.focus();
+            return;
+        }
+        const items = [...element.querySelectorAll<HTMLElement>(menuItems)];
+        const checked = items.find(item => item.getAttribute('aria-checked') === 'true');
+        (initial === 'last' ? items[items.length - 1] : initial === 'checked' && checked || items[0])?.focus();
+    }, [mode]);
+    // A click elsewhere closes the menu, also where nothing takes the focus.
+    useEffect(() => {
+        if (mode === 'closed') return;
+        const node = root.current!;
+        const dismiss = (event: Event) => {
+            if (!node.contains(event.target as Node) && !creating) setMode('closed');
+        };
+        node.ownerDocument.addEventListener('pointerdown', dismiss, true);
+        return () => node.ownerDocument.removeEventListener('pointerdown', dismiss, true);
+    }, [mode, creating]);
+    // After a refused create, the name is selected for correcting.
+    useEffect(() => {
+        if (!createError || creating) return;
+        const input = popup.current?.querySelector('input:not([type])') as HTMLInputElement | null;
+        input?.focus();
+        input?.select();
+    }, [createError, creating]);
+
+    const {branch, head} = state;
+    const unborn = state.repository && !head;
+    const text = !state.repository ? 'Git' : branch ?? (head ? head.slice(0, 7) : labels.unborn);
+    const accessibleName = !state.repository ? labels.title :
+        `${branch ? labels.branch : labels.detached}: ${text}${unborn && branch ? ` (${labels.unborn})` : ''}`;
+    const close = (focus = true) => {
+        setMode('closed');
+        if (focus) trigger.current?.focus({preventScroll: true});
+    };
+    const openMenu = (from: 'checked' | 'first' | 'last') => {
+        setInitial(from);
+        setMode('menu');
+    };
+    /** Runs a branch operation and shows its result, or why it did not run, in the panel. */
+    const change = async (operation: () => Promise<HistoryActionResult>) => {
+        const result = await operation();
+        if (result.done || result.error) actions.open();
+    };
+    const items: Item[] = [];
+    if (!state.repository) {
+        items.push({id: 'choose', label: labels.choose, run: () => {close(); actions.choose();}});
+    } else {
+        const switching = state.writable && !state.busy;
+        for (const local of state.branches) {
+            items.push({id: 'branch:' + local, label: local, checked: local === branch, disabled: !state.writable || state.busy && local !== branch,
+                run: () => {
+                    close();
+                    if (local !== branch && switching) void change(() => actions.switchBranch(local));
+                }});
+        }
+        if (state.writable) {
+            state.remoteBranches.forEach((remote, index) => items.push({id: 'remote:' + remote,
+                label: labels.historyCreateFromRemote.replace('{name}', remote), disabled: state.busy, separatorBefore: index === 0,
+                run: () => {
+                    close();
+                    if (!state.busy) void change(() => actions.createFromRemote(remote));
+                }}));
+            if (head) items.push({id: 'create', label: labels.newBranchItem, disabled: state.busy, separatorBefore: true, run: () => {
+                if (state.busy) return;
+                setName('');
+                setCheckout(true);
+                setCreateError('');
+                setMode('create');
+            }});
+        }
+    }
+    // "Open Local Git" goes with "New Branch…" and stands apart from the branches.
+    items.push({id: 'open', label: labels.openPanel, separatorBefore: items.length > 0 && items[items.length - 1].id !== 'create',
+        run: () => {close(); actions.open();}});
+
+    const onMenuKey = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!creating) close();
+            return;
+        }
+        if (mode !== 'menu') return;
+        if (event.key === 'Tab') {close(false); return;}
+        const elements = [...event.currentTarget.querySelectorAll<HTMLElement>(menuItems)];
+        const index = elements.indexOf(event.target as HTMLElement);
+        const target = {ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: elements.length - 1}[event.key];
+        if (target === undefined || !elements.length) return;
+        event.preventDefault();
+        elements[(target + elements.length) % elements.length].focus();
+    };
+    const submit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        const branchName = name.trim();
+        if (!branchName || creating) return;
+        setCreating(true);
+        setCreateError('');
+        let result: HistoryActionResult;
+        try {
+            result = await actions.createBranch(branchName, checkout);
+        } catch (error) {
+            result = {done: false, error: error instanceof Error && error.message ? error.message : labels.failed};
+        }
+        if (!mounted.current) return;
+        setCreating(false);
+        if (result.done) {
+            close();
+            actions.open();
+        } else setCreateError(result.error ?? '');
+    };
+    return <div className="twgit-branch-entry" ref={root} onBlur={event => {
+        const next = event.relatedTarget as Node | null;
+        if (next && !event.currentTarget.contains(next) && !creating) setMode('closed');
+    }}>
+        <button type="button" className="twgit-branch-button" ref={trigger} aria-label={accessibleName} title={accessibleName}
+            aria-haspopup="menu" aria-expanded={mode === 'menu'} data-git-branch={state.repository ? branch ?? head ?? '' : undefined}
+            onClick={() => mode === 'closed' ? openMenu('checked') : close(false)}
+            onKeyDown={event => {
+                if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+                event.preventDefault();
+                openMenu(event.key === 'ArrowUp' ? 'last' : 'checked');
+            }}>
+            <BranchIcon/>
+            <span className="twgit-branch-name">{text}</span>
+            {unborn && branch && <small className="twgit-branch-unborn">{labels.unborn}</small>}
+            <span className="twgit-branch-caret" aria-hidden="true">▾</span>
+        </button>
+        {mode === 'menu' && <div ref={popup} className="twgit-branch-popup" role="menu" aria-label={labels.branchMenu} onKeyDown={onMenuKey}>
+            {items.map(item => <button key={item.id} type="button" tabIndex={-1} data-action={item.id}
+                role={item.checked === undefined ? 'menuitem' : 'menuitemradio'} aria-checked={item.checked}
+                aria-disabled={item.disabled || undefined} data-separator-before={item.separatorBefore || undefined}
+                onClick={() => {if (!item.disabled || item.checked) item.run();}}>
+                {item.checked !== undefined && <span className="twgit-branch-check" aria-hidden="true">{item.checked ? '✓' : ''}</span>}
+                {item.label}
+            </button>)}
+        </div>}
+        {mode === 'create' && <div ref={popup} className="twgit-branch-popup" role="dialog" aria-label={labels.newBranchTitle}
+            onKeyDown={onMenuKey}>
+            <form onSubmit={event => void submit(event)}>
+                <label>{labels.newBranch} <input value={name} required disabled={creating} aria-invalid={createError ? true : undefined}
+                    onChange={event => setName(event.currentTarget.value)}/></label>
+                <label><input type="checkbox" checked={checkout} disabled={creating}
+                    onChange={event => setCheckout(event.currentTarget.checked)}/> {labels.switchAfterCreate}</label>
+                {createError && <p className="twgit-graph-form-error" role="alert">{createError}</p>}
+                <span className="twgit-graph-form-actions">
+                    <button type="submit" disabled={creating || state.busy || !name.trim()}>{labels.createBranch}</button>
+                    <button type="button" disabled={creating} onClick={() => close()}>{labels.cancel}</button>
+                </span>
+            </form>
+        </div>}
+    </div>;
+}