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

package/src/index.tsx

@@ -5,7 +5,9 @@ import {FileDiffView} from './file-diff-view.js';
 import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLabels, useProjectChanges} from './project-change-list.js';
 import type {ChangedFile} from './project-change-model.js';
 import {openRepository} from './repository.js';
-import type {Repository, Snapshot, FileChange, FileDiff, ChangeGroup, HistoryCommit, HistoryCursor} from './repository.js';
+import type {BranchRefs, Repository, Snapshot, FileChange, FileDiff, ChangeGroup, HistoryCommit, HistoryCursor} from './repository.js';
+import {BranchButton} from './branch-button.js';
+import type {BranchButtonState} from './branch-button.js';
 import {HistoryGraph} from './history-graph-view.js';
 import type {HistoryActionResult} from './history-graph-view.js';
 import {labelsFor} from './messages.js';
@@ -34,7 +36,9 @@ export {openProjectComparison} from './project-comparison.js';
 export {openProjectSourceTabs} from './project-source-tabs.js';
 export type {ProjectSourceTabsFile, ProjectSourceTabsOptions} from './project-source-tabs.js';
 export type {ProjectComparisonAction, ProjectComparisonOptions, ProjectComparisonSection} from './project-comparison.js';
-export type {PullRequestBase, PullRequestFetch, PullRequestFiles, Repository, Snapshot, FileChange, FileDiff, HistoryCommit, HistoryCursor, HistoryPage, HistoryRef} from './repository.js';
+export type {BranchRefs, PullRequestBase, PullRequestFetch, PullRequestFiles, Repository, Snapshot, FileChange, FileDiff, HistoryCommit, HistoryCursor, HistoryPage, HistoryRef} from './repository.js';
+export {BranchButton} from './branch-button.js';
+export type {BranchButtonActions, BranchButtonProps, BranchButtonState} from './branch-button.js';
 export {HistoryGraph, laneColors} from './history-graph-view.js';
 export type {HistoryActionResult, HistoryGraphProps} from './history-graph-view.js';
 export {layoutHistory} from './history-graph.js';
@@ -77,7 +81,46 @@ export interface GitPanelRequest {
     inactive?: boolean;
     mount(element: HTMLElement, close: () => void): {requestClose(): void; dispose(): void};
 }
-interface Controller {open(locale: string): void; refresh(automatic?: boolean): Promise<void>}
+type BranchOperation = Extract<LocalOperation, {kind: 'createBranch' | 'switchBranch'}>;
+/** The panel's side of its entries: set by the panel as it renders, used by the branch buttons and `mountGitPanel`'s result. */
+interface Controller {
+    open(locale: string): void;
+    refresh(automatic?: boolean): Promise<void>;
+    /** Asks for a repository, then opens the panel on it. */
+    choose(locale: string): Promise<void>;
+    changeBranch(operation: BranchOperation): Promise<HistoryActionResult>;
+    /** What the branch buttons show. */
+    branch: BranchButtonState;
+    publish(state: BranchButtonState): void;
+    /** Follows `branch`. While anything follows it, the closed panel keeps watching the branches. */
+    follow(listener: () => void): () => void;
+    /** How many follow `branch`. */
+    followers(): number;
+    /** Set by the panel while it is mounted, to hear when `followers()` changes. */
+    onFollowers(count: number): void;
+}
+function createController(): Controller {
+    const listeners = new Set<() => void>();
+    const controller: Controller = {
+        open() {}, async refresh() {}, async choose() {}, async changeBranch() {return {done: false};},
+        branch: {repository: false, branch: undefined, head: null, branches: [], remoteBranches: [], writable: false, busy: false},
+        publish(state) {
+            controller.branch = state;
+            for (const listener of [...listeners]) listener();
+        },
+        follow(listener) {
+            listeners.add(listener);
+            controller.onFollowers(listeners.size);
+            return () => {
+                listeners.delete(listener);
+                controller.onFollowers(listeners.size);
+            };
+        },
+        followers: () => listeners.size,
+        onFollowers() {}
+    };
+    return controller;
+}
 interface State {
     repository: Repository | null;
     snapshot: Snapshot | null;
@@ -94,6 +137,8 @@ interface State {
 const initial: State = {repository: null, snapshot: null, project: null, browser: null,
     changes: [], selected: null, diff: null, commit: null, error: null, busy: false};
 const controllers = new WeakMap<object, Controller>();
+// Branch buttons rendered before the panel is mounted, or after it is disposed, wait for the VM's controller here.
+const registrations = new Set<() => void>();
 type PickerWindow = Window & {showDirectoryPicker?: (options: {id: string; mode: 'readwrite'}) => Promise<FileSystemDirectoryHandle>};
 type ObserverWindow = Window & {FileSystemObserver?: new (callback: () => void) => {
     observe(handle: FileSystemDirectoryHandle, options: {recursive: boolean}): Promise<void>;
@@ -101,6 +146,53 @@ type ObserverWindow = Window & {FileSystemObserver?: new (callback: () => void)
 }};
 const watchInterval = 2000;
 
+/**
+ * Calls `check` every `watchInterval`, when the window regains focus and shortly after a File System Observer reports
+ * a change under `root`, one call at a time and never while the page is hidden. Returns the function that stops it.
+ */
+function watchRepository(document: Document, root: FileSystemDirectoryHandle, check: (stopped: () => boolean) => Promise<void>) {
+    const view = document.defaultView as ObserverWindow;
+    let stopped = false;
+    let checking = false;
+    const run = async () => {
+        if (stopped || checking || document.visibilityState === 'hidden') return;
+        checking = true;
+        try {
+            await check(() => stopped);
+        } catch {
+            // Entries can disappear while another tool writes. The next check reads them again.
+        } finally {
+            checking = false;
+        }
+    };
+    let soon: number | undefined;
+    const schedule = () => {view.clearTimeout(soon); soon = view.setTimeout(() => void run(), 300);};
+    const interval = view.setInterval(() => void run(), watchInterval);
+    const onFocus = () => void run();
+    view.addEventListener('focus', onFocus);
+    document.addEventListener('visibilitychange', onFocus);
+    let observer: InstanceType<NonNullable<ObserverWindow['FileSystemObserver']>> | null = null;
+    try {
+        if (view.FileSystemObserver) {
+            observer = new view.FileSystemObserver(schedule);
+            observer.observe(root, {recursive: true}).catch(() => {});
+        }
+    } catch {
+        observer = null;
+    }
+    void run();
+    return () => {
+        stopped = true;
+        view.clearInterval(interval);
+        view.clearTimeout(soon);
+        view.removeEventListener('focus', onFocus);
+        document.removeEventListener('visibilitychange', onFocus);
+        observer?.disconnect();
+    };
+}
+const sameRefs = (a: BranchRefs | null, b: BranchRefs) => !!a && a.branch === b.branch && a.head === b.head &&
+    a.branches.join('\n') === b.branches.join('\n') && a.remoteBranches.join('\n') === b.remoteBranches.join('\n');
+
 function GitPanel({vm, document, host, controller}: {vm: object; document: Document; host: GitHost; controller: Controller}) {
     const [visible, setVisible] = useState(false);
     // A layout tab that holds the panel. The panel component stays mounted, so the repository survives closing the tab.
@@ -233,61 +325,48 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
             void controller.refresh();
         }
     }, [shown]);
+    // The branches the branch buttons show: those of the last snapshot, or newer ones read while the panel is not in view.
+    const [refs, setRefs] = useState<BranchRefs | null>(null);
+    useEffect(() => {
+        if (!state.repository) setRefs(null);
+        else if (state.snapshot) setRefs(refsOf(state.snapshot));
+    }, [state.repository, state.snapshot]);
+    const [followers, setFollowers] = useState(controller.followers());
+    useEffect(() => {
+        controller.onFollowers = setFollowers;
+        // A button may have started following before the panel was mounted.
+        setFollowers(controller.followers());
+        return () => {controller.onFollowers = () => {};};
+    }, []);
     // While the panel is open, notice Git commands, agents and editors that change the repository outside the Editor.
+    // While it is out of view and a branch button follows it, read only the refs at the same moments, so the button
+    // follows branch changes; the panel reads everything again when it comes into view.
+    const following = followers > 0;
     useEffect(() => {
         const repository = state.repository;
-        if (!shown || !repository) return;
-        const view = document.defaultView as ObserverWindow;
-        let stopped = false;
-        let checking = false;
-        const check = async () => {
+        if (!repository || !shown && !following) return;
+        return watchRepository(document, repository.root, async stopped => {
             const {snapshot} = current.current;
+            if (running.current || current.current.repository !== repository) return;
             // A tab behind another one has no boxes; it reads again when it is shown.
-            const hidden = !dialog.current || !dialog.current.getClientRects().length;
-            if (stopped || checking || running.current || document.visibilityState === 'hidden' || hidden ||
-                !snapshot || current.current.repository !== repository) return;
-            checking = true;
-            try {
-                const probe = await repository.probe(snapshot.scope);
-                if (stopped || probe === 'locked' || probe === snapshot.probe || probe === handled.current ||
-                    current.current.snapshot !== snapshot) return;
-                handled.current = probe;
-                const {selected, commit} = current.current;
-                // Keep an open diff, commit or review in place and ask for a refresh instead.
-                if (selected || commit || reviewing.current) {
-                    setState(previous => previous.snapshot === snapshot ? {...previous, notice: labelsFor(locale).outdated} : previous);
-                } else await controller.refresh(true);
-            } catch {
-                // Entries can disappear while another tool writes. The next check reads them again.
-            } finally {
-                checking = false;
-            }
-        };
-        let soon: number | undefined;
-        const schedule = () => {view.clearTimeout(soon); soon = view.setTimeout(() => void check(), 300);};
-        const interval = view.setInterval(() => void check(), watchInterval);
-        const onFocus = () => void check();
-        view.addEventListener('focus', onFocus);
-        document.addEventListener('visibilitychange', onFocus);
-        let observer: InstanceType<NonNullable<ObserverWindow['FileSystemObserver']>> | null = null;
-        try {
-            if (view.FileSystemObserver) {
-                observer = new view.FileSystemObserver(schedule);
-                observer.observe(repository.root, {recursive: true}).catch(() => {});
+            const inView = shown && !!dialog.current && dialog.current.getClientRects().length > 0;
+            if (!inView || !snapshot) {
+                if (!following) return;
+                const next = await repository.refs();
+                if (!stopped() && current.current.repository === repository) setRefs(previous => sameRefs(previous, next) ? previous : next);
+                return;
             }
-        } catch {
-            observer = null;
-        }
-        void check();
-        return () => {
-            stopped = true;
-            view.clearInterval(interval);
-            view.clearTimeout(soon);
-            view.removeEventListener('focus', onFocus);
-            document.removeEventListener('visibilitychange', onFocus);
-            observer?.disconnect();
-        };
-    }, [shown, state.repository, locale]);
+            const probe = await repository.probe(snapshot.scope);
+            if (stopped() || probe === 'locked' || probe === snapshot.probe || probe === handled.current ||
+                current.current.snapshot !== snapshot) return;
+            handled.current = probe;
+            const {selected, commit} = current.current;
+            // Keep an open diff, commit or review in place and ask for a refresh instead.
+            if (selected || commit || reviewing.current) {
+                setState(previous => previous.snapshot === snapshot ? {...previous, notice: labelsFor(locale).outdated} : previous);
+            } else await controller.refresh(true);
+        });
+    }, [shown, following, state.repository, locale]);
     useEffect(() => {
         if (!visible || slot) return;
         const previous = document.activeElement as HTMLElement | null;
@@ -296,7 +375,7 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     }, [visible, slot]);
     const chooseRoot = async () => {
         const view = document.defaultView as PickerWindow;
-        await run(async () => {
+        return run(async () => {
             let root: FileSystemDirectoryHandle;
             try {root = await view.showDirectoryPicker!({id: 'turbowarp-plus-git-root', mode: 'readwrite'});} catch (error) {
                 if ((error as DOMException).name === 'AbortError') return {};
@@ -394,7 +473,7 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     };
     const [newBranch, setNewBranch] = useState('');
     const [switchAfterCreate, setSwitchAfterCreate] = useState(true);
-    const changeBranch = async (operation: Extract<LocalOperation, {kind: 'createBranch' | 'switchBranch'}>): Promise<HistoryActionResult> => {
+    const changeBranch = async (operation: BranchOperation): Promise<HistoryActionResult> => {
         const repository = current.current.repository;
         const project = current.current.project;
         const switching = operation.kind === 'switchBranch' || operation.checkout;
@@ -472,6 +551,18 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     // One loader per selected change, so thumbnails read each asset once.
     const loadAsset = useMemo(() => state.repository && state.snapshot && state.selected ?
         state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
+    controller.changeBranch = changeBranch;
+    controller.choose = async language => {
+        setLocale(language);
+        const before = current.current.repository;
+        const result = await chooseRoot();
+        // The panel shows the chosen repository, or why it could not be read; a cancelled choice opens nothing.
+        if (!result.done && result.error || current.current.repository !== before) controller.open(language);
+    };
+    const branchState: BranchButtonState = {repository: !!state.repository, branch: refs?.branch, head: refs?.head ?? null,
+        branches: refs?.branches ?? [], remoteBranches: refs?.remoteBranches ?? [], writable: !!host.localWrite && !!refs, busy: state.busy};
+    const published = JSON.stringify(branchState);
+    useEffect(() => controller.publish(branchState), [published]);
     if (!shown) return null;
     const groups: ChangeGroup[] = state.commit ? ['commit'] : ['staged', 'unstaged', 'untracked'];
     // Branches can be switched and created whenever writes are allowed and the repository has been read.
@@ -656,28 +747,55 @@ function upstreamText({upstream}: Snapshot, labels: ReturnType<typeof labelsFor>
     }
 }
 
+const refsOf = ({branch, head, branches, remoteBranches}: Snapshot): BranchRefs => ({branch, head, branches, remoteBranches});
+const announce = () => {for (const listener of [...registrations]) listener();};
+
 export function mountGitPanel({vm, document, host}: {vm: object; document: Document; host: GitHost}) {
     if (!(document.defaultView as PickerWindow)?.showDirectoryPicker) return null;
     const root = document.createElement('div');
     document.body.append(root);
-    const controller: Controller = {open() {}, async refresh() {}};
+    const controller = createController();
     controllers.set(vm, controller);
     render(<GitPanel vm={vm} document={document} host={host} controller={controller}/>, root);
-    return {refresh: () => controller.refresh(), dispose() {
+    announce();
+    return {refresh: () => controller.refresh(), open: (locale: string) => controller.open(locale), dispose() {
         if (controllers.get(vm) === controller) controllers.delete(vm);
         void host.connectionSettings?.disconnect().catch(() => {});
         unmountComponentAtNode(root);
         root.remove();
+        announce();
     }};
 }
 
-export function renderGitMenu(createElement: (component: any, props: any, ...children: any[]) => any,
-    {vm, locale = 'en', MenuItem, MenuSection, onRequestClose}: {
-        vm: object; locale?: string; MenuItem: any; MenuSection: any; onRequestClose(): void;
-    }) {
-    const controller = controllers.get(vm);
-    if (!controller) return null;
-    return createElement(MenuSection, null, createElement(MenuItem, {
-        command: 'local-git', onClick() {onRequestClose(); controller.open(locale);}
-    }, labelsFor(locale).menu));
+/** The branch button of the panel mounted for `vm`, or nothing while no panel is mounted for it. */
+function BranchEntry({vm, locale}: {vm: object; locale: string}) {
+    const [controller, setController] = useState(() => controllers.get(vm));
+    useEffect(() => {
+        const update = () => setController(controllers.get(vm));
+        registrations.add(update);
+        update();
+        return () => {registrations.delete(update);};
+    }, [vm]);
+    const [state, setState] = useState(controller?.branch);
+    useEffect(() => {
+        if (!controller) return;
+        const update = () => setState(controller.branch);
+        update();
+        return controller.follow(update);
+    }, [controller]);
+    if (!controller || !state) return null;
+    return <BranchButton state={state} locale={locale} open={() => controller.open(locale)} choose={() => void controller.choose(locale)}
+        switchBranch={name => controller.changeBranch({kind: 'switchBranch', name})}
+        createBranch={(name, checkout) => controller.changeBranch({kind: 'createBranch', name, checkout})}
+        createFromRemote={name => controller.changeBranch({kind: 'createBranch', name, fromRemote: true, checkout: true})}/>;
+}
+
+/**
+ * Renders the button for the host's menu bar that shows the current branch of the panel mounted for `vm` and opens the
+ * menu of branches, the panel and the repository choice. It renders nothing while no panel is mounted for `vm`, such as
+ * when the host does not offer local Git, and shares the panel's repository, operations and checks.
+ */
+export function renderBranchButton(createElement: (component: any, props: any, ...children: any[]) => any,
+    {vm, locale = 'en'}: {vm: object; locale?: string}) {
+    return createElement(BranchEntry, {vm, locale});
 }

package/src/messages.ts

@@ -1,7 +1,7 @@
 export const messages = {
     en: {
         pullRequests: 'Pull requests', localChanges: 'Local changes',
-        title: 'Local Git', menu: 'Local Git…', close: 'Close', choose: 'Choose Repository…', refresh: 'Refresh',
+        title: 'Local Git', close: 'Close', choose: 'Choose Repository…', refresh: 'Refresh',
         empty: 'Choose an existing Git repository to inspect its files and history.',
         repository: 'Repository', project: 'Project folder', none: 'No project selected', root: 'Repository root',
         open: 'Open This Project', reload: 'Reload Project', up: 'Parent folder', browse: 'Choose a project inside this repository',
@@ -54,11 +54,12 @@ export const messages = {
         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'
+        historyCopyFailed: 'Could not copy the commit ID.', historyRefs: 'Branches', cancel: 'Cancel',
+        branchMenu: 'Branches', openPanel: 'Open Local Git', newBranchItem: 'New Branch…', newBranchTitle: 'New Branch'
     },
     ja: {
         pullRequests: 'プルリクエスト', localChanges: 'ローカルの変更',
-        title: 'ローカル Git', menu: 'ローカル Git…', close: '閉じる', choose: 'リポジトリを選択…', refresh: '再取得',
+        title: 'ローカル Git', close: '閉じる', choose: 'リポジトリを選択…', refresh: '再取得',
         empty: '既存の Git リポジトリを選び、ファイルの状態と履歴を確認できます。',
         repository: 'リポジトリ', project: '作品フォルダ', none: '作品は未選択', root: 'リポジトリルート',
         open: 'この作品を開く', reload: '作品を再読込', up: '上のフォルダ', browse: 'リポジトリ内の作品を選択',
@@ -111,7 +112,8 @@ export const messages = {
         historyMore: 'さらに表示', historyLoading: '記録を読込中…', historyFailed: '記録を読み込めませんでした。',
         historyActions: '操作', historyCreateHere: 'ここからブランチを作る…', historySwitch: '{name} に切り替える',
         historyCreateFromRemote: '{name} を作って切り替える', historyCopy: 'コミットの ID をコピー', historyCopied: 'コミットの ID をコピーしました。',
-        historyCopyFailed: 'コミットの ID をコピーできませんでした。', historyRefs: 'ブランチ', cancel: 'キャンセル'
+        historyCopyFailed: 'コミットの ID をコピーできませんでした。', historyRefs: 'ブランチ', cancel: 'キャンセル',
+        branchMenu: 'ブランチ', openPanel: 'ローカル Git を開く', newBranchItem: '新しいブランチ…', newBranchTitle: '新しいブランチ'
     }
 };
 export type Labels = typeof messages.en;

package/src/repository.ts

@@ -84,6 +84,8 @@ export interface HistoryPage {
 export const historyPageSize = 50;
 const projectSourceLimit = 16 * 1024 * 1024;
 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;
@@ -298,13 +300,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
     const assertSnapshot = async (snapshot: Snapshot) => {
         if (!sameMetadata(snapshot.metadata, await metadata())) throw new GitPanelError('changed');
     };
-    const read = async (scope = ''): Promise<Snapshot> => {
-        scope = pathParts(scope).join('/');
-        fs.clearReads();
-        cache = {};
-        // Taken first, so a change during the read differs from the stored value and triggers another read.
-        const fingerprint = await probe(scope);
-        const before = await metadata();
+    const readRefs = async (): Promise<BranchRefs> => {
         let head: string | null;
         try {head = await git.resolveRef({...options, ref: 'HEAD'});} catch (error) {
             if (errorCode(error) !== 'NotFoundError') throw error;
@@ -314,6 +310,16 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         const branches = await git.listBranches(options);
         const remoteBranches = (await git.listBranches({...options, remote: 'origin'}))
             .filter(name => name !== 'HEAD' && !branches.includes(name)).sort();
+        return {branch: branch || undefined, head, branches, remoteBranches};
+    };
+    const read = async (scope = ''): Promise<Snapshot> => {
+        scope = pathParts(scope).join('/');
+        fs.clearReads();
+        cache = {};
+        // Taken first, so a change during the read differs from the stored value and triggers another read.
+        const fingerprint = await probe(scope);
+        const before = await metadata();
+        const {branch, head, branches, remoteBranches} = await readRefs();
         const commits = head ? (await git.log({...options, cache, ref: head, depth: 50})).map(({oid, commit}) => ({
             oid, message: commit.message, author: commit.author.name, timestamp: commit.author.timestamp
         })) : [];
@@ -339,7 +345,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         }
         if (!sameMetadata(before, await metadata())) throw new GitPanelError('changed');
         await fs.checkReads();
-        return {branch: branch || undefined, head, branches, remoteBranches, commits, changes, scope, metadata: before, probe: fingerprint,
+        return {branch, head, branches, remoteBranches, commits, changes, scope, metadata: before, probe: fingerprint,
             upstream};
     };
     interface HistoryNode {commit: HistoryCommit; time: number; children: number; expanded: boolean}
@@ -745,6 +751,14 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
             }
         }),
         read: (scope?: string) => 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: Snapshot, change: FileChange) => serial(() => readDiff(snapshot, change)),
         historyChanges: (snapshot: Snapshot, oid: string) => serial(() => historyChanges(snapshot, oid)),
         /**

package/src/style.css

@@ -92,3 +92,31 @@
 .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; }