@kubohiroya/turbowarp-plus-editor-git 0.0.0-stage → 0.8.0

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-git",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.8.0",
+  "description": "Read-only local Git panel for TurboWarp Plus Editor",
+  "type": "module",
+  "license": "MPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kubohiroya/turbowarp-plus-editor-git.git"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./repository": {
+      "types": "./dist/repository.d.ts",
+      "default": "./dist/repository.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./smart-http": {
+      "types": "./dist/smart-http.d.ts",
+      "default": "./dist/smart-http.js"
+    },
+    "./project-source-diff": {
+      "types": "./dist/project-source-diff.d.ts",
+      "default": "./dist/project-source-diff.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "vite.config.ts",
+    "tsconfig.json",
+    "README.ja.md",
+    "THIRD_PARTY_NOTICES.md",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.json",
+    "test": "npm run build && node --test test/*.test.js",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.14 <19",
+    "react-dom": ">=16.14 <19"
+  },
+  "devDependencies": {
+    "@types/node": "24.19.2",
+    "@types/react": "16.14.70",
+    "@types/react-dom": "16.9.25",
+    "buffer": "6.0.3",
+    "diff": "9.0.0",
+    "isomorphic-git": "1.44.11",
+    "react": "16.14.0",
+    "react-diff-view": "3.3.3",
+    "react-dom": "16.14.0",
+    "typescript": "6.0.3",
+    "vite": "8.3.5"
+  }
+}

package/src/block-diff-location.ts

@@ -0,0 +1,63 @@
+import {isRecord} from './project-source-patch.js';
+import type {BlockPart, BlockSide} from './project-source-patch.js';
+
+export interface DiffSvgBlock {
+    type?: string;
+    getSvgRoot(): Element | null;
+    getInputTargetBlock?(name: string): DiffSvgBlock | null;
+    getField?(name: string): {getSvgRoot(): Element | null} | null;
+}
+
+export type ProjectBlockLocation = BlockSide & {
+    version: 'before' | 'after';
+    parts: readonly BlockPart[];
+    signal: AbortSignal;
+};
+export type ProjectBlockLocator = (location: ProjectBlockLocation) => boolean | Promise<boolean>;
+
+export interface ScratchBlockLocationWorkspace {
+    getBlockById(id: string): DiffSvgBlock | null;
+    centerOnBlock(id: string): void;
+}
+
+export function markBlockLocation(block: DiffSvgBlock, parts: readonly BlockPart[]) {
+    const root = block.getSvgRoot();
+    if (!root) return;
+    root.classList.add('twgit-changed-block');
+    const marked = new Set<Element>();
+    for (const {kind, name} of parts) {
+        const part = kind === 'input' ? block.getInputTargetBlock?.(name) : block.getField?.(name);
+        const element = part?.getSvgRoot();
+        if (!element || element === root || marked.has(element)) continue;
+        element.classList.add('twgit-changed-block-part');
+        marked.add(element);
+    }
+    return () => {
+        root.classList.remove('twgit-changed-block');
+        for (const element of marked) element.classList.remove('twgit-changed-block-part');
+    };
+}
+
+/** Resolve the matching project revision and target in the host before navigating its workspace. */
+export function createScratchBlocksDiffLocator(
+    resolveWorkspace: (location: ProjectBlockLocation) => ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>
+): ProjectBlockLocator {
+    return async location => {
+        const workspace = await resolveWorkspace(location);
+        if (!workspace || location.signal.aborted) return false;
+        const block = workspace.getBlockById(location.id);
+        const expected = location.target.blocks[location.id];
+        if (!block || (isRecord(expected) && typeof expected.opcode === 'string' && block.type !== expected.opcode)) return false;
+        const clear = markBlockLocation(block, location.parts);
+        if (!clear) return false;
+        try {
+            workspace.centerOnBlock(location.id);
+        } catch (error) {
+            clear();
+            throw error;
+        }
+        if (location.signal.aborted) {clear(); return false;}
+        location.signal.addEventListener('abort', clear, {once: true});
+        return true;
+    };
+}

package/src/block-diff-preview.tsx

@@ -0,0 +1,117 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import type {BlockPart, BlockSide} from './project-source-patch.js';
+import type {BlockPreviewView, ProjectBlockRenderer, ProjectBlockRendering, ScriptBlockMark} from './scratch-block-diff-renderer.js';
+import {currentCostume, useCostumeImage} from './project-assets.js';
+import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
+
+export type LocationStatus = 'locating' | 'located' | 'missingLocation';
+type PreviewLabels = Record<'absent' | 'loading' | 'unavailable', string> & Partial<Record<LocationStatus | 'locate', string>>;
+
+/** Keeps the previews of one comparison at the same zoom, height and scroll position while they are linked. */
+export interface PreviewSync {
+    add(view: BlockPreviewView): () => void;
+    setLinked(linked: boolean): void;
+}
+
+export function createPreviewSync(): PreviewSync {
+    const members = new Map<BlockPreviewView, () => void>();
+    let linked = true;
+    let moving = false;
+    // The version that needs the smaller zoom and the taller frame decides, so neither one is cut off.
+    const align = () => {
+        if (!linked || !members.size) return;
+        const views = [...members.keys()];
+        const fit = {scale: Math.min(...views.map(view => view.fit.scale)), height: Math.max(...views.map(view => view.fit.height))};
+        for (const view of views) view.layout(fit);
+    };
+    return {
+        add(view) {
+            const stop = view.onChange(() => {
+                if (!linked || moving) return;
+                moving = true;
+                try {
+                    const viewport = view.viewport();
+                    for (const other of members.keys()) if (other !== view) other.setViewport(viewport);
+                } finally {
+                    moving = false;
+                }
+            });
+            members.set(view, stop);
+            align();
+            return () => {
+                stop();
+                members.delete(view);
+            };
+        },
+        setLinked(value) {
+            if (linked === value) return;
+            linked = value;
+            align();
+        }
+    };
+}
+
+const linkLabels = {en: 'Move both versions together', ja: '変更前と変更後を連動して動かす'};
+
+/** One sync group per comparison, with the checkbox that links or unlinks its previews. */
+export function usePreviewSync(locale: string) {
+    const sync = useMemo(createPreviewSync, []);
+    const [linked, setLinked] = useState(true);
+    useEffect(() => sync.setLinked(linked), [sync, linked]);
+    const toggle = <label className="twgit-block-diff-link"><input type="checkbox" checked={linked}
+        onChange={event => setLinked(event.currentTarget.checked)}/> {locale.startsWith('ja') ? linkLabels.ja : linkLabels.en}</label>;
+    return {sync, toggle};
+}
+
+const rendering = (result: ProjectBlockRendering) =>
+    typeof result === 'function' ? {release: result} : {release: result && (() => result.dispose()), view: result?.view};
+
+export function BlockPreview({side, title, parts, marks, renderBlock, withContext, labels, onLocate, locationStatus,
+    version, loadAsset, sync}: {
+    side?: BlockSide; title: string; parts?: readonly BlockPart[]; marks?: readonly ScriptBlockMark[]; renderBlock: ProjectBlockRenderer;
+    withContext: boolean; labels: PreviewLabels; onLocate?: () => void; locationStatus?: LocationStatus;
+    /** Which version this preview shows, for its costume thumbnail. */
+    version?: ProjectVersion; loadAsset?: ProjectAssetLoader; sync?: PreviewSync;
+}) {
+    const host = useRef<HTMLDivElement>(null);
+    const watermark = useRef<HTMLDivElement>(null);
+    const [status, setStatus] = useState<'loading' | 'ready' | 'failed'>('loading');
+    const thumbnail = !!(side && version && loadAsset && currentCostume(side.target));
+    const image = useCostumeImage(thumbnail ? side!.target : undefined, version ?? 'after', loadAsset);
+    useEffect(() => {
+        if (!side || !host.current) return;
+        const container = host.current;
+        const abort = new AbortController();
+        let dispose: (() => void) | undefined;
+        setStatus('loading');
+        void Promise.resolve().then(() => renderBlock({...side, container, withContext, parts, marks, signal: abort.signal,
+            watermark: thumbnail ? watermark.current ?? undefined : undefined})).then(result => {
+            const {release, view} = rendering(result);
+            if (abort.signal.aborted) {
+                release?.();
+                return;
+            }
+            const leave = view && sync?.add(view);
+            dispose = () => {
+                leave?.();
+                release?.();
+            };
+            setStatus('ready');
+        }, () => {if (!abort.signal.aborted) setStatus('failed');});
+        return () => {abort.abort(); dispose?.();};
+    }, [side, renderBlock, withContext, parts, marks, sync, thumbnail]);
+    return <div className="twgit-block-diff-side">
+        <h4>{title}</h4>
+        {!side && <p>{labels.absent}</p>}
+        {side && status === 'loading' && <p role="status">{labels.loading}</p>}
+        {side && status === 'failed' && <p role="status">{labels.unavailable}</p>}
+        {side && <div ref={host} className="twgit-block-diff-preview">
+            {thumbnail && <div ref={watermark} className="twgit-block-diff-watermark" data-dockview-costume-thumbnail="">
+                {image && <img src={image} alt=""/>}
+            </div>}
+        </div>}
+        {side && onLocate && <button type="button" aria-label={`${title} · ${labels.locate}`}
+            onClick={onLocate}>{labels.locate}</button>}
+        {locationStatus && <p role="status">{labels[locationStatus]}</p>}
+    </div>;
+}

package/src/browser.ts

@@ -0,0 +1,5 @@
+import 'react-diff-view/style/index.css';
+import './style.css';
+import './project-source-diff.css';
+
+export * from './index.js';

package/src/connection-settings.tsx

@@ -0,0 +1,103 @@
+import React, {useEffect, useRef, useState} from 'react';
+import type {GetRemoteSession, RemoteOperation} from './remote-operations.js';
+
+type Mode = 'desktop' | 'cloudflare';
+type Status = 'disconnected' | 'connecting' | 'connected' | 'reauth-required';
+export interface GitConnectionSettings {
+    modes: readonly Mode[];
+    getView(): {
+        mode: Mode | null;
+        state: {status: Status; account?: {login: string}; expiresAt?: number};
+        proxyOrigin?: string;
+        write?: boolean;
+        authorization?: {url: string; userCode?: string};
+    };
+    select(mode: Mode): Promise<void>;
+    connect(remote: string, write?: boolean): Promise<void>;
+    refresh(): Promise<void>;
+    disconnect(): Promise<void>;
+    getSession?: GetRemoteSession;
+}
+
+const en = {
+    title: 'GitHub connection', mode: 'Connection mode', select: 'Choose a connection',
+    desktop: 'Desktop local', cloudflare: 'Cloudflare', proxy: 'Proxy', account: 'Account',
+    'disconnected': 'Disconnected', 'connecting': 'Waiting for GitHub', 'connected': 'Connected',
+    'reauth-required': 'Sign in again', connect: 'Connect to GitHub', open: 'Open GitHub authorization',
+    check: 'Check connection', disconnect: 'Disconnect', noRemote: 'Choose a repository with a GitHub HTTPS origin.',
+    unavailable: 'No GitHub connection is configured.', changed: 'Switching disconnects the current session.',
+    error: 'GitHub connection failed. Retry using the selected connection.',
+    invalid: 'The selected repository needs a GitHub HTTPS origin.',
+    allowPush: 'Authorize push', fetch: 'Fetch', pull: 'Pull (fast-forward only)', push: 'Push'
+};
+const ja: typeof en = {
+    title: 'GitHub 接続', mode: '接続方式', select: '接続方式を選択',
+    desktop: 'Desktop ローカル', cloudflare: 'Cloudflare', proxy: 'プロキシ', account: 'アカウント',
+    'disconnected': '未接続', 'connecting': 'GitHub の認証待ち', 'connected': '接続済み',
+    'reauth-required': '再認証が必要', connect: 'GitHub に接続', open: 'GitHub の認証を開く',
+    check: '接続を確認', disconnect: '切断', noRemote: 'GitHub の HTTPS リモート origin があるリポジトリを選択してください。',
+    unavailable: 'GitHub 接続先が設定されていません。', changed: '方式を切り替えると現在のセッションを切断します。',
+    error: 'GitHub 接続に失敗しました。選択中の方式で再試行してください。',
+    invalid: '選択したリポジトリには GitHub の HTTPS リモート origin が必要です。',
+    allowPush: 'push を許可する', fetch: 'Fetch', pull: 'Pull（fast-forward のみ）', push: 'Push'
+};
+
+export function ConnectionSettings({settings, locale, readOrigin, runOperation}: {
+    settings: GitConnectionSettings; locale: string; readOrigin?: () => Promise<string | undefined>;
+    runOperation?: (operation: RemoteOperation) => Promise<void>;
+}) {
+    const labels = locale.startsWith('ja') ? ja : en;
+    const [, update] = useState(0);
+    const [busy, setBusy] = useState(false);
+    const [allowPush, setAllowPush] = useState(false);
+    const [error, setError] = useState<'error' | 'invalid' | null>(null);
+    const active = useRef(true);
+    useEffect(() => {active.current = true; return () => {active.current = false;};}, []);
+    const run = async (action: () => Promise<void>) => {
+        if (busy) return;
+        setBusy(true);
+        setError(null);
+        try {await action();} catch (failure) {
+            if (active.current) setError((failure as Error).message === 'INVALID_REMOTE' ? 'invalid' : 'error');
+        } finally {
+            if (active.current) {setBusy(false); update(value => value + 1);}
+        }
+    };
+    const {mode, state, proxyOrigin, authorization, write} = settings.getView();
+    const connect = () => run(async () => {
+        const remote = await readOrigin?.();
+        if (!remote) throw new Error('INVALID_REMOTE');
+        await settings.connect(remote, allowPush);
+    });
+    return <details className="twgit-connection">
+        <summary>{labels.title}</summary>
+        {!settings.modes.length ? <p>{labels.unavailable}</p> : <>
+            <label>{labels.mode} <select value={mode ?? ''} disabled={busy}
+                onChange={event => {const choice = event.currentTarget.value as Mode; void run(() => settings.select(choice));}}>
+                <option value="" disabled>{labels.select}</option>
+                {settings.modes.map(choice => <option key={choice} value={choice}>{labels[choice]}</option>)}
+            </select></label>
+            <p>{labels.changed}</p>
+            <p data-git-connection-state="" role="status">{labels[state.status]}</p>
+            {proxyOrigin && <p>{labels.proxy} · <code>{proxyOrigin}</code></p>}
+            {state.account && <p>{labels.account} · {state.account.login}</p>}
+            {!readOrigin && <p>{labels.noRemote}</p>}
+            {mode && <>
+                {runOperation && <label><input type="checkbox" checked={allowPush}
+                    disabled={busy || state.status === 'connecting' || state.status === 'connected'}
+                    onChange={event => setAllowPush(event.currentTarget.checked)}/> {labels.allowPush}</label>}
+                <button disabled={busy || !readOrigin || state.status === 'connecting' || state.status === 'connected'}
+                    onClick={connect}>{labels.connect}</button>
+                {authorization && <p>{authorization.userCode && <code>{authorization.userCode} </code>}
+                    <a href={authorization.url} target="_blank" rel="noopener noreferrer">{labels.open}</a></p>}
+                {state.status !== 'disconnected' && <button disabled={busy}
+                    onClick={() => void run(settings.refresh)}>{labels.check}</button>}
+                <button disabled={busy} onClick={() => void run(settings.disconnect)}>{labels.disconnect}</button>
+                {runOperation && state.status === 'connected' && (['fetch', 'pull', 'push'] as const).map(operation =>
+                    <button key={operation} disabled={busy || !readOrigin || (operation === 'push' && !write)}
+                        onClick={() => void run(() => runOperation(operation))}>{labels[operation]}</button>)}
+            </>}
+            {error && <p className="twgit-error" role="alert">{labels[error]}</p>}
+        </>}
+    </details>;
+}

package/src/file-diff-view.tsx

@@ -0,0 +1,44 @@
+import React, {useState} from 'react';
+import {Diff, Hunk, parseDiff} from 'react-diff-view';
+import {ProjectSourceComparison} from './project-source-review.js';
+import type {FileChange, FileDiff} from './repository.js';
+import type {labelsFor} from './messages.js';
+import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+import type {ProjectAssetLoader} from './project-assets.js';
+
+const en = {view: 'Show changes as', blocks: 'Blocks', text: 'Text'};
+const ja: typeof en = {view: '変更の表示', blocks: 'ブロック', text: 'テキスト'};
+
+/** Project sources are the files the panel opens as projects. */
+export const isProjectSource = (path: string) => path.split('/').pop() === 'project.source.json';
+
+/**
+ * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
+ */
+export function FileDiffView({change, diff, labels, locale, renderBlock, loadAsset}: {
+    change: FileChange; diff: FileDiff | null; labels: ReturnType<typeof labelsFor>; locale: string;
+    renderBlock?: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+}) {
+    const [view, setView] = useState<'blocks' | 'text'>('blocks');
+    const names = locale.startsWith('ja') ? ja : en;
+    const parsed = diff?.patch ? parseDiff(diff.patch)[0] : null;
+    const text = <>
+        <p>{labels.mode} · {change.oldMode?.toString(8) || '—'} → {change.newMode?.toString(8) || '—'}</p>
+        {diff && <p>{diff.beforeSize} → {diff.afterSize} {labels.bytes}</p>}
+        {diff?.binary && <p>{labels.binary}</p>}
+        {diff?.tooLarge && <p>{labels.large}</p>}
+        {parsed && <Diff viewType="unified" diffType={parsed.type} hunks={parsed.hunks}>
+            {hunks => hunks.map(hunk => <Hunk key={hunk.content} hunk={hunk}/>)}</Diff>}
+        {diff && !diff.binary && !diff.tooLarge && !parsed?.hunks.length && <p>{labels.unchanged}</p>}
+    </>;
+    const sources = renderBlock && diff?.text && isProjectSource(change.path) ? diff.text : null;
+    return <>
+        <h3>{change.path}</h3>
+        {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>)}
+        </div>}
+        {sources && view === 'blocks' ? <ProjectSourceComparison renderBlock={renderBlock!} locale={locale} fallback={text} loadAsset={loadAsset}
+            before={change.before === null ? null : sources.before} after={change.after === null ? null : sources.after}/> : text}
+    </>;
+}

package/src/filesystem.ts

@@ -0,0 +1,125 @@
+export class GitPanelError extends Error {
+    constructor(public code: 'invalid' | 'changed' | 'large' | 'unsupported' | 'pullUnsafe' | 'diverged' |
+        'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed', message: string = code) {
+        super(message);
+        this.name = 'GitPanelError';
+    }
+}
+
+export const fileError = (code: string, path: string) => Object.assign(new Error(`${code}: ${path}`), {code});
+export const errorCode = (error: unknown) => (error as {code?: string})?.code;
+
+export function pathParts(path: string): string[] {
+    const parts = path.split('/').filter(part => part && part !== '.');
+    if (parts.some(part => part === '..' || part.includes('\0'))) throw fileError('EACCES', path);
+    return parts;
+}
+
+export function fileStat(file: {size: number; lastModified: number} | null) {
+    const time = file?.lastModified ?? 0;
+    return {
+        isFile: () => file !== null, isDirectory: () => file === null, isSymbolicLink: () => false,
+        size: file?.size ?? 0, mode: file ? 0o100644 : 0o40755,
+        mtimeMs: time, ctimeMs: time, atimeMs: time, birthtimeMs: time,
+        mtime: new Date(time), ctime: new Date(time), atime: new Date(time), birthtime: new Date(time),
+        dev: 0, ino: 0, uid: 0, gid: 0
+    };
+}
+
+/** Adapt granted handles without exposing any filesystem mutation. */
+export function createReadOnlyFs(root: FileSystemDirectoryHandle) {
+    const directory = async (parts: string[]) => {
+        let handle = root;
+        for (const name of parts) handle = await handle.getDirectoryHandle(name);
+        return handle;
+    };
+    const handle = async (path: string): Promise<FileSystemDirectoryHandle | FileSystemFileHandle> => {
+        const parts = pathParts(path);
+        if (!parts.length) return root;
+        const name = parts.pop()!;
+        try {
+            const parent = await directory(parts);
+            try {
+                return await parent.getFileHandle(name);
+            } catch (error) {
+                if ((error as DOMException).name !== 'TypeMismatchError') throw error;
+                return await parent.getDirectoryHandle(name);
+            }
+        } catch (error) {
+            if ((error as DOMException).name === 'NotFoundError') throw fileError('ENOENT', path);
+            if ((error as DOMException).name === 'TypeMismatchError') throw fileError('ENOTDIR', path);
+            throw error;
+        }
+    };
+    const reads = new Map<string, {size: number; modified: number}>();
+    const listings = new Map<string, string[]>();
+    const observe = (path: string, file: File) => {
+        const previous = reads.get(path);
+        if (previous && (previous.size !== file.size || previous.modified !== file.lastModified)) {
+            throw new GitPanelError('changed');
+        }
+        reads.set(path, {size: file.size, modified: file.lastModified});
+    };
+    const readFile = async (path: string, options?: string | {encoding?: string}) => {
+        const item = await handle(path);
+        if (item.kind !== 'file') throw fileError('EISDIR', path);
+        const file = await item.getFile();
+        observe(path, file);
+        const bytes = new Uint8Array(await file.arrayBuffer());
+        const encoding = typeof options === 'string' ? options : options?.encoding;
+        return encoding ? new TextDecoder(encoding).decode(bytes) : bytes;
+    };
+    const stat = async (path: string) => {
+        const item = await handle(path);
+        const file = item.kind === 'file' ? await item.getFile() : null;
+        if (file) observe(path, file);
+        return fileStat(file);
+    };
+    const rejectWrite = async (path: string): Promise<never> => {throw fileError('EROFS', path);};
+    return {
+        clearReads() {reads.clear(); listings.clear();},
+        async checkReads() {
+            for (const [path, expected] of reads) {
+                const item = await handle(path);
+                if (item.kind !== 'file') throw new GitPanelError('changed');
+                const file = await item.getFile();
+                if (file.size !== expected.size || file.lastModified !== expected.modified) throw new GitPanelError('changed');
+            }
+            for (const [path, expected] of listings) {
+                const item = await directory(pathParts(path));
+                const names: string[] = [];
+                for await (const name of (item as FileSystemDirectoryHandle & {keys(): AsyncIterable<string>}).keys()) names.push(name);
+                if (JSON.stringify(names.sort()) !== JSON.stringify(expected)) throw new GitPanelError('changed');
+            }
+        },
+        promises: {
+        readFile,
+        stat,
+        lstat: stat,
+        async readdir(path: string) {
+            const item = await handle(path);
+            if (item.kind !== 'directory') throw fileError('ENOTDIR', path);
+            const names: string[] = [];
+            for await (const name of (item as FileSystemDirectoryHandle & {keys(): AsyncIterable<string>}).keys()) {
+                names.push(name);
+            }
+            listings.set(path, names.sort());
+            return names;
+        },
+        writeFile: rejectWrite, unlink: rejectWrite, mkdir: rejectWrite, rmdir: rejectWrite,
+        symlink: rejectWrite, chmod: rejectWrite,
+        async readlink(): Promise<never> {throw new GitPanelError('unsupported');}
+    }};
+}
+
+export async function readOptional(fs: ReturnType<typeof createReadOnlyFs>, path: string): Promise<Uint8Array | null> {
+    try {
+        return await fs.promises.readFile(path) as Uint8Array;
+    } catch (error) {
+        if (errorCode(error) === 'ENOENT') return null;
+        throw error;
+    }
+}
+
+export const sameBytes = (left: Uint8Array | null, right: Uint8Array | null) =>
+    left === right || Boolean(left && right && left.length === right.length && left.every((byte, i) => byte === right[i]));