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

package/dist/style.css

@@ -124,6 +124,10 @@
 .twgit-panel { width: 94vw; height: 90vh; display: flex; flex-direction: column; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 8px; box-shadow: 0 12px 48px #0005; font: 14px/1.5 system-ui, sans-serif; overflow: hidden; }
 .twgit-panel > header { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid GrayText; }
 .twgit-panel > header h2 { margin: 0 auto 0 0; font-size: 18px; }
+.twgit-panel .twgit-close, .twgit-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
+    border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
+.twgit-panel .twgit-close:hover, .twgit-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+.twgit-panel .twgit-close:focus-visible, .twgit-close:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
 .twgit-panel h3 { font-size: 14px; margin: 12px 0 5px; }
 .twgit-panel button { color: inherit; background: Canvas; border: 1px solid GrayText; border-radius: 4px; padding: 4px 8px; cursor: pointer; font: inherit; text-align: start; }
 .twgit-panel button:disabled { opacity: .5; cursor: default; }
@@ -148,15 +152,14 @@
 .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-panel .twgit-file-row { display: flex; gap: 6px; align-items: center; }
+.twgit-panel .twgit-file-row .twgit-file { flex: 1; min-width: 0; width: auto; text-align: start; }
+.twgit-panel .twgit-stage { flex: none; font-size: 11px; margin: 0; white-space: nowrap; }
 .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; }
-.twgit-history li { padding: 5px 0; }
-.twgit-history small { display: block; font-size: 11px; }
 .twgit-panel > footer { font-size: 11px; padding: 8px 16px; border-top: 1px solid GrayText; }
 .twgit-error { margin: 6px 16px; color: #a11919; padding: 8px; background: #fff0f0; }
 @media (max-width: 700px) { .twgit-content { grid-template-columns: minmax(180px, 42%) minmax(0, 1fr); } .twgit-panel > header { flex-wrap: wrap; } }
@@ -187,4 +190,28 @@
 .twgit-comparison-body > p { margin: 0 0 8px; }
 .twgit-comparison-body > section { margin-top: 16px; }
 .twgit-comparison-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid GrayText; }
+.twgit-branches ul { list-style: none; padding: 0; margin: 4px 0; }
+.twgit-branches li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
+.twgit-branches form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
+.twgit-graph-list { list-style: none; margin: 0; padding: 0; }
+.twgit-graph-row { position: relative; display: flex; align-items: stretch; gap: 4px; height: 44px; }
+.twgit-graph-lanes { flex: none; display: block; }
+.twgit-panel .twgit-graph-commit, .twgit-graph-commit { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
+    gap: 1px; margin: 2px 0; padding: 2px 6px; border: 0; text-align: start; }
+.twgit-graph-subject, .twgit-graph-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.twgit-graph-meta { font-size: 11px; opacity: .8; }
+.twgit-graph-ref { display: inline-block; margin-inline-end: 4px; padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 8px;
+    border: 1px solid color-mix(in srgb, CanvasText 35%, Canvas); }
+.twgit-graph-ref-current { font-weight: 600; border-color: currentColor; }
+.twgit-graph-ref-remote { border-style: dashed; }
+.twgit-panel .twgit-graph-menu-button, .twgit-graph-menu-button { flex: none; align-self: center; padding: 0 6px; line-height: 22px; }
+.twgit-graph-popup { position: absolute; z-index: 6; top: 100%; right: 0; display: grid; gap: 2px; min-width: 200px; padding: 6px;
+    background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 6px; box-shadow: 0 8px 24px #0004; }
+.twgit-panel .twgit-graph-popup [role="menuitem"], .twgit-graph-popup [role="menuitem"] { border: 0; text-align: start; }
+.twgit-graph-popup form { display: grid; gap: 6px; font-size: 12px; }
+.twgit-graph-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
+.twgit-graph-more { margin: 6px 0; }
+.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; }
 /*$vite$:1*/

package/package.json

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

package/src/close-button.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/** A button drawn as an X, named by `label` for screen readers and in its tooltip. */
+export function CloseButton({label, onClick}: {label: string; onClick(): void}) {
+    return <button type="button" className="twgit-close" aria-label={label} title={label} onClick={onClick}>
+        <svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" focusable="false">
+            <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
+        </svg>
+    </button>;
+}

package/src/file-diff-view.tsx

@@ -7,8 +7,8 @@ import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
 import type {ProjectAssetLoader} from './project-assets.js';
 import type {ProjectBlockLocator} from './block-diff-location.js';
 
-const en = {view: 'Show changes as', blocks: 'Blocks', text: 'Text'};
-const ja: typeof en = {view: '変更の表示', blocks: 'ブロック', text: 'テキスト'};
+const en = {view: 'Show changes as', blocks: 'Blocks', text: 'Text', openTabs: 'Open as tabs'};
+const ja: typeof en = {view: '変更の表示', blocks: 'ブロック', text: 'テキスト', openTabs: 'タブで開く'};
 
 /** Project sources are the files the panel opens as projects. */
 export const isProjectSource = (path: string) => path.split('/').pop() === 'project.source.json';
@@ -16,9 +16,11 @@ export const isProjectSource = (path: string) => path.split('/').pop() === 'proj
 /**
  * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
  */
-export function FileDiffView({change, diff, labels, locale, renderBlock, loadAsset, locateBlock}: {
+export function FileDiffView({change, diff, labels, locale, renderBlock, loadAsset, locateBlock, onOpenTabs}: {
     change: FileChange; diff: FileDiff | null; labels: ReturnType<typeof labelsFor>; locale: string;
     renderBlock?: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader; locateBlock?: ProjectBlockLocator;
+    /** Opens the comparison as tabs of the host's layout, a tab group for each stage or sprite. */
+    onOpenTabs?(before: string | null, after: string | null): void;
 }) {
     const [view, setView] = useState<'blocks' | 'text'>('blocks');
     const names = locale.startsWith('ja') ? ja : en;
@@ -40,6 +42,8 @@ export function FileDiffView({change, diff, labels, locale, renderBlock, loadAss
         {sources && <div className="twgit-view-switch" role="group" aria-label={names.view}>
             {(['blocks', 'text'] as const).map(mode => <button key={mode} type="button" aria-pressed={view === mode}
                 data-git-view={mode} onClick={() => setView(mode)}>{names[mode]}</button>)}
+            {onOpenTabs && <button type="button" data-git-open-tabs="" onClick={() => onOpenTabs(
+                change.before === null ? null : sources.before, change.after === null ? null : sources.after)}>{names.openTabs}</button>}
         </div>}
         {sources && view === 'blocks' ? <ProjectSourceComparison renderBlock={renderBlock!} locale={locale} fallback={text} loadAsset={loadAsset} locateBlock={locateBlock}
             before={change.before === null ? null : sources.before} after={change.after === null ? null : sources.after}/> : text}

package/src/filesystem.ts

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

package/src/history-graph-view.tsx

@@ -0,0 +1,233 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {layoutHistory} from './history-graph.js';
+import type {GraphRow} from './history-graph.js';
+import {labelsFor} from './messages.js';
+import type {HistoryCommit} from './repository.js';
+
+/** How a write action ended: `error` is the message to show when it did not run to the end. */
+export type HistoryActionResult = {done: true} | {done: false; error?: string};
+export interface HistoryGraphProps {
+    /** Commits newest first, each child above its parents, as `Repository.history` returns them page by page. */
+    commits: readonly HistoryCommit[];
+    /** The commit shown as selected. */
+    selected?: string | null;
+    onSelect(oid: string): void;
+    locale?: string;
+    /** While true, selecting and the write actions wait; focus and copying still work. */
+    busy?: boolean;
+    /** Offers **Show more** when there are more commits to read. */
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    onShowMore?(): void;
+    /** Local branch names, so `origin/<name>` is offered as a new branch only when there is none yet. */
+    localBranches?: readonly string[];
+    /**
+     * Write actions. Each is offered only when given. The branch form stays open with the name until `onCreateBranch`
+     * resolves `{done: true}` (or nothing); `{done: false, error}` or a rejection shows the reason in the form.
+     */
+    onCreateBranch?(oid: string, name: string, checkout: boolean): void | Promise<void | HistoryActionResult>;
+    onSwitchBranch?(name: string): void | Promise<unknown>;
+    onCreateFromRemote?(name: string): void | Promise<unknown>;
+}
+
+/** Lane colors that read on light and dark backgrounds. */
+export const laneColors = ['#2f7ed8', '#d9480f', '#2b9348', '#9c36b5', '#c2255c', '#0c8599', '#b7791f', '#5c7cfa'];
+const column = 14, rowHeight = 44, middle = rowHeight / 2;
+const x = (index: number) => column / 2 + index * column;
+
+function Lanes({row, width}: {row: GraphRow; width: number}) {
+    return <svg className="twgit-graph-lanes" aria-hidden="true" focusable="false" width={width * column} height={rowHeight}
+        viewBox={`0 0 ${width * column} ${rowHeight}`}>
+        {row.segments.map((segment, index) => {
+            const [top, bottom] = segment.part === 'top' ? [0, middle] : [middle, rowHeight];
+            const from = x(segment.from), to = x(segment.to), bend = (top + bottom) / 2;
+            const d = from === to ? `M${from} ${top}V${bottom}` : `M${from} ${top}C${from} ${bend} ${to} ${bend} ${to} ${bottom}`;
+            return <path key={index} d={d} fill="none" stroke={laneColors[segment.color % laneColors.length]} strokeWidth={2}/>;
+        })}
+        <circle cx={x(row.column)} cy={middle} r={4.5} fill={laneColors[row.color % laneColors.length]}
+            stroke="Canvas" strokeWidth={1.5}/>
+    </svg>;
+}
+
+interface Action {id: string; label: string; run(): void}
+type Menu = {oid: string; mode: 'menu' | 'create'};
+
+/**
+ * The history as a graph: one row per commit with its lanes drawn in SVG, a button that selects the commit and a
+ * button that opens its actions. ArrowUp and ArrowDown move between commits, Home and End to the ends; Enter or
+ * Space selects; the context menu key or Shift+F10 opens the actions.
+ */
+export function HistoryGraph(props: HistoryGraphProps) {
+    const {commits, selected = null, onSelect, locale = 'en', busy = false} = props;
+    const labels = labelsFor(locale);
+    const layout = useMemo(() => layoutHistory(commits), [commits]);
+    const rows = useRef<(HTMLButtonElement | null)[]>([]);
+    const menuButtons = useRef<(HTMLButtonElement | null)[]>([]);
+    const popup = useRef<HTMLDivElement>(null);
+    const [active, setActive] = useState<string | null>(null);
+    const [menu, setMenu] = useState<Menu | null>(null);
+    const [branchName, setBranchName] = useState('');
+    const [checkout, setCheckout] = useState(true);
+    const [status, setStatus] = useState('');
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState('');
+    const mounted = useRef(true);
+    useEffect(() => () => {mounted.current = false;}, []);
+    const focusIndex = Math.max(0, commits.findIndex(commit => commit.oid === (active ?? selected)));
+    const locals = useMemo(() => new Set(props.localBranches ??
+        commits.flatMap(commit => commit.refs.filter(ref => ref.kind === 'branch').map(ref => ref.name))), [commits, props.localBranches]);
+    useEffect(() => {
+        const element = popup.current;
+        if (!element) return;
+        element.querySelector<HTMLElement>(menu?.mode === 'create' ? 'input' : '[role="menuitem"]')?.focus();
+    }, [menu?.oid, menu?.mode]);
+    // 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 date = (timestamp: number) => new Date(timestamp * 1000).toLocaleString(locale, {dateStyle: 'medium', timeStyle: 'short'});
+    const refName = (ref: HistoryCommit['refs'][number]) => ref.current && ref.kind === 'branch' ? `${ref.name} (${labels.currentBranch})` : ref.name;
+    const closeMenu = (focus: 'menu' | 'row' | false) => {
+        const index = commits.findIndex(commit => commit.oid === menu?.oid);
+        setMenu(null);
+        if (focus && index !== -1) (focus === 'menu' ? menuButtons : rows).current[index]?.focus();
+    };
+    const actionsFor = (commit: HistoryCommit): Action[] => {
+        const actions: Action[] = [];
+        if (props.onCreateBranch) actions.push({id: 'create', label: labels.historyCreateHere, run: () => {
+            setBranchName('');
+            setCheckout(true);
+            setCreateError('');
+            setMenu({oid: commit.oid, mode: 'create'});
+        }});
+        for (const ref of commit.refs) {
+            if (ref.kind === 'branch' && !ref.current && props.onSwitchBranch) {
+                const run = props.onSwitchBranch;
+                actions.push({id: 'switch:' + ref.name, label: labels.historySwitch.replace('{name}', ref.name),
+                    run: () => {closeMenu('row'); void run(ref.name);}});
+            }
+            const name = ref.name.slice('origin/'.length);
+            if (ref.kind === 'remote' && !locals.has(name) && props.onCreateFromRemote) {
+                const run = props.onCreateFromRemote;
+                actions.push({id: 'remote:' + name, label: labels.historyCreateFromRemote.replace('{name}', name),
+                    run: () => {closeMenu('row'); void run(name);}});
+            }
+        }
+        actions.push({id: 'copy', label: labels.historyCopy, run: () => {
+            closeMenu('menu');
+            const clipboard = globalThis.navigator?.clipboard;
+            Promise.resolve().then(() => clipboard!.writeText(commit.oid))
+                .then(() => setStatus(labels.historyCopied), () => setStatus(labels.historyCopyFailed));
+        }});
+        return actions;
+    };
+    const onRowKey = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+        const target = {ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: commits.length - 1}[event.key];
+        if (target !== undefined) {
+            event.preventDefault();
+            rows.current[Math.min(commits.length - 1, Math.max(0, target))]?.focus();
+        } else if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) {
+            event.preventDefault();
+            setMenu({oid: commits[index].oid, mode: 'menu'});
+        }
+    };
+    const onMenuKey = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!creating) closeMenu('menu');
+            return;
+        }
+        if (menu?.mode !== 'menu') return;
+        if (event.key === 'Tab') {setMenu(null); return;}
+        const items = [...event.currentTarget.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)')];
+        const index = items.indexOf(event.target as HTMLElement);
+        const target = {ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: items.length - 1}[event.key];
+        if (target === undefined || !items.length) return;
+        event.preventDefault();
+        items[(target + items.length) % items.length].focus();
+    };
+    // Closes the menu when focus leaves it and its button, such as on a click elsewhere.
+    const onMenuBlur = (event: React.FocusEvent<HTMLElement>) => {
+        const next = event.relatedTarget as Node | null;
+        if (!next || !event.currentTarget.parentElement?.contains(next)) setMenu(null);
+    };
+    const submitBranch = async (event: React.FormEvent, oid: string) => {
+        event.preventDefault();
+        const name = branchName.trim();
+        if (!name || !props.onCreateBranch || creating) return;
+        setCreating(true);
+        setCreateError('');
+        let result: void | HistoryActionResult;
+        try {
+            result = await props.onCreateBranch(oid, name, checkout);
+        } catch (error) {
+            result = {done: false, error: error instanceof Error && error.message ? error.message : labels.failed};
+        }
+        if (!mounted.current) return;
+        setCreating(false);
+        if (!result || result.done) closeMenu('menu');
+        else setCreateError(result.error ?? '');
+    };
+    rows.current.length = commits.length;
+    menuButtons.current.length = commits.length;
+    return <div className="twgit-graph">
+        <ol className="twgit-graph-list">{commits.map((commit, index) => {
+            const row = layout.rows[index];
+            const refs = commit.refs.map(refName);
+            const name = [commit.message, commit.author, date(commit.timestamp),
+                ...(refs.length ? [`${labels.historyRefs}: ${refs.join(', ')}`] : [])].join(', ');
+            const open = menu?.oid === commit.oid ? menu : null;
+            const actions = open?.mode === 'menu' ? actionsFor(commit) : [];
+            return <li key={commit.oid} className="twgit-graph-row">
+                <Lanes row={row} width={layout.width}/>
+                <button type="button" className="twgit-graph-commit" ref={element => {rows.current[index] = element;}}
+                    tabIndex={index === focusIndex ? 0 : -1} aria-pressed={selected === commit.oid} aria-disabled={busy || undefined}
+                    aria-label={name} title={commit.oid} data-oid={commit.oid}
+                    onFocus={() => setActive(commit.oid)} onKeyDown={event => onRowKey(event, index)}
+                    onClick={() => {if (!busy) onSelect(commit.oid);}}>
+                    <span className="twgit-graph-subject">{commit.refs.map(ref => <span key={ref.kind + ref.name}
+                        className={`twgit-graph-ref twgit-graph-ref-${ref.kind}${ref.current ? ' twgit-graph-ref-current' : ''}`}>
+                        {refName(ref)}</span>)}{commit.message}</span>
+                    <span className="twgit-graph-meta">{commit.author} · {date(commit.timestamp)}</span>
+                </button>
+                <button type="button" className="twgit-graph-menu-button" ref={element => {menuButtons.current[index] = element;}}
+                    tabIndex={index === focusIndex || open ? 0 : -1} aria-haspopup="menu" aria-expanded={open?.mode === 'menu'}
+                    aria-label={`${labels.historyActions}: ${commit.message}`}
+                    onClick={() => setMenu(open ? null : {oid: commit.oid, mode: 'menu'})}
+                    onKeyDown={event => {
+                        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            setMenu({oid: commit.oid, mode: 'menu'});
+                        }
+                    }}>⋯</button>
+                {open?.mode === 'menu' && <div ref={popup} className="twgit-graph-popup" role="menu" aria-label={labels.historyActions}
+                    onKeyDown={onMenuKey} onBlur={onMenuBlur}>
+                    {actions.map(action => <button key={action.id} type="button" role="menuitem" tabIndex={-1} data-action={action.id}
+                        disabled={busy && action.id !== 'copy'} onClick={action.run}>{action.label}</button>)}
+                </div>}
+                {open?.mode === 'create' && <div ref={popup} className="twgit-graph-popup" role="dialog"
+                    aria-label={labels.historyCreateHere} onKeyDown={onMenuKey}>
+                    <form onSubmit={event => void submitBranch(event, commit.oid)}>
+                        <label>{labels.newBranch} <input value={branchName} required disabled={creating}
+                            aria-invalid={createError ? true : undefined}
+                            onChange={event => setBranchName(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 || busy || !branchName.trim()}>{labels.createBranch}</button>
+                            <button type="button" disabled={creating} onClick={() => closeMenu('menu')}>{labels.cancel}</button>
+                        </span>
+                    </form>
+                </div>}
+            </li>;
+        })}</ol>
+        {props.hasMore && props.onShowMore && <button type="button" className="twgit-graph-more"
+            disabled={props.loadingMore} onClick={props.onShowMore}>{props.loadingMore ? labels.historyLoading : labels.historyMore}</button>}
+        <p className="twgit-graph-status" role="status">{status}</p>
+    </div>;
+}

package/src/history-graph.ts

@@ -0,0 +1,90 @@
+/**
+ * Lays out a commit graph in lanes, top to bottom, after the approach DoltHub describes in "Drawing a commit graph"
+ * (https://www.dolthub.com/blog/2024-08-07-drawing-a-commit-graph/): each lane waits for one commit; a commit takes
+ * the leftmost lane that waits for it, or the first free lane; its first parent continues that lane and each further
+ * parent gets the lane that already waits for it, or a free one. Lanes whose commit arrived elsewhere end there and
+ * are reused by later commits.
+ */
+
+/** The parts of a commit the layout needs. Commits come newest first, each child above its parents. */
+export interface GraphCommit {
+    oid: string;
+    parents: readonly string[];
+}
+/**
+ * A line in one row's band, between columns. `top` runs from the row's upper edge to the dot's height; `bottom`
+ * from the dot's height to the lower edge. `from` is the upper end's column and `to` the lower end's.
+ */
+export interface GraphSegment {
+    part: 'top' | 'bottom';
+    from: number;
+    to: number;
+    color: number;
+}
+export interface GraphRow {
+    oid: string;
+    /** The commit's column. */
+    column: number;
+    /** The color of the commit's lane, an index into a palette (see `laneColors`). */
+    color: number;
+    segments: GraphSegment[];
+    /** Columns this row's band uses: one more than the rightmost lane drawn in it. */
+    width: number;
+}
+export interface GraphLayout {
+    rows: GraphRow[];
+    /** The widest row, for drawing every row with the same width. */
+    width: number;
+}
+
+/** How many lane colors there are. Lanes take them in turn. */
+export const laneColorCount = 8;
+
+interface Lane {oid: string; color: number}
+
+/**
+ * Lays out commits ordered newest first with every child above its parents. Parents missing from `commits`, such as
+ * those on a page not loaded yet or cut off by a shallow clone, keep their lane running to the bottom.
+ */
+export function layoutHistory(commits: readonly GraphCommit[]): GraphLayout {
+    const lanes: (Lane | null)[] = [];
+    let nextColor = 0;
+    const free = () => {
+        const index = lanes.indexOf(null);
+        return index === -1 ? lanes.length : index;
+    };
+    const rows: GraphRow[] = [];
+    for (const commit of commits) {
+        const segments: GraphSegment[] = [];
+        const before = lanes.slice();
+        const waiting = before.flatMap((lane, index) => lane?.oid === commit.oid ? [index] : []);
+        const column = waiting.length ? waiting[0] : free();
+        const color = waiting.length ? before[column]!.color : nextColor++ % laneColorCount;
+        for (const [index, lane] of before.entries()) {
+            if (!lane) continue;
+            // Lanes that waited for this commit end in its dot; the others pass by.
+            segments.push({part: 'top', from: index, to: lane.oid === commit.oid ? column : index, color: lane.color});
+        }
+        for (const index of waiting) lanes[index] = null;
+        const parents = [...new Set(commit.parents)];
+        lanes[column] = parents.length ? {oid: parents[0], color} : null;
+        const joins: {index: number; color: number}[] = parents.length ? [{index: column, color}] : [];
+        for (const parent of parents.slice(1)) {
+            let index = lanes.findIndex(lane => lane?.oid === parent);
+            if (index === -1) {
+                index = free();
+                lanes[index] = {oid: parent, color: nextColor++ % laneColorCount};
+            }
+            joins.push({index, color: lanes[index]!.color});
+        }
+        while (lanes.length && lanes[lanes.length - 1] === null) lanes.pop();
+        for (const [index, lane] of before.entries()) {
+            // Lanes waiting for other commits are never reassigned here, so they pass straight by.
+            if (lane && lane.oid !== commit.oid) segments.push({part: 'bottom', from: index, to: index, color: lane.color});
+        }
+        for (const join of joins) segments.push({part: 'bottom', from: column, to: join.index, color: join.color});
+        const width = Math.max(column + 1, ...segments.map(segment => Math.max(segment.from, segment.to) + 1));
+        rows.push({oid: commit.oid, column, color, segments, width});
+    }
+    return {rows, width: Math.max(0, ...rows.map(row => row.width))};
+}