@esportsplus/ui 0.57.0 → 0.58.0

package/build/components/editor/workspace/status.js

@@ -0,0 +1,193 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { dirty } from './model.js';
+class ReactiveObject_0ab57aq0 extends reactivity_u0.ReactiveObject {
+    #phase;
+    #savedAt;
+    constructor(_p0, _p1) {
+        super(null);
+        this.#phase = this[reactivity_u0.SIGNAL](_p0);
+        this.#savedAt = this[reactivity_u0.SIGNAL](_p1);
+    }
+    get phase() {
+        return reactivity_u0.read(this.#phase);
+    }
+    set phase(_v0) {
+        reactivity_u0.write(this.#phase, _v0);
+    }
+    get savedAt() {
+        return reactivity_u0.read(this.#savedAt);
+    }
+    set savedAt(_v1) {
+        reactivity_u0.write(this.#savedAt, _v1);
+    }
+}
+const AUTO_SAVE_MODES = {
+    delay: 'After delay',
+    focus: 'On focus change',
+    off: 'Off'
+};
+const INDENT_SIZES = [2, 4, 8];
+const LANGUAGES = {
+    css: 'CSS',
+    html: 'HTML',
+    javascript: 'JavaScript',
+    json: 'JSON',
+    jsonc: 'JSON with Comments',
+    jsx: 'JavaScript JSX',
+    markdown: 'Markdown',
+    plain: 'Plain Text',
+    python: 'Python',
+    scss: 'SCSS',
+    tsx: 'TypeScript JSX',
+    typescript: 'TypeScript'
+};
+const LINE_BREAK = /\r\n|\r|\n/g;
+function indentation({ size, tabs }) {
+    return { indent: tabs ? '\t' : ' '.repeat(size), tabSize: size };
+}
+function indentLabel({ size, tabs }) {
+    return `${tabs ? 'Tab Size' : 'Spaces'}: ${size}`;
+}
+function lineEndings(document, eol) {
+    let edits = [], insert = eol === 'crlf' ? '\r\n' : '\n', shifts = [0], text = document.value;
+    for (let match of text.matchAll(LINE_BREAK)) {
+        if (match[0] !== insert) {
+            edits.push({ from: match.index, insert, to: match.index + match[0].length });
+            shifts.push(shifts[shifts.length - 1] + insert.length - match[0].length);
+        }
+    }
+    if (!edits.length) {
+        return false;
+    }
+    let map = (offset) => {
+        let hi = edits.length, lo = 0;
+        while (lo < hi) {
+            let mid = (lo + hi) >>> 1;
+            if (edits[mid].to <= offset) {
+                lo = mid + 1;
+            }
+            else {
+                hi = mid;
+            }
+        }
+        let edit = edits[lo];
+        if (edit && edit.from < offset) {
+            return edit.from + shifts[lo];
+        }
+        return offset + shifts[lo];
+    }, selections = document.selections.map((range) => ({ direction: range.direction, end: map(range.end), start: map(range.start) }));
+    return document.transact(edits, { selections }).changed;
+}
+class AutoSave {
+    model;
+    status = new ReactiveObject_0ab57aq0('saved', null);
+    active;
+    mode = 'off';
+    pending = 0;
+    tabs = new Map();
+    unsubscribe;
+    constructor(model) {
+        this.model = model;
+    }
+    edited(tab) {
+        let tracked = this.tabs.get(tab);
+        if (!tracked || this.mode !== 'delay') {
+            return;
+        }
+        clearTimeout(tracked.timer);
+        tracked.timer = undefined;
+        if (dirty(tab)) {
+            tracked.timer = setTimeout(() => {
+                tracked.timer = undefined;
+                this.save(tab);
+            }, this.model.state.preferences.autoSaveDelay);
+        }
+    }
+    phase() {
+        this.status.phase = this.pending ? 'saving' : this.model.state.tabs.some(dirty) ? 'unsaved' : 'saved';
+    }
+    save(tab) {
+        if (!dirty(tab) || tab.missing || !this.tabs.has(tab)) {
+            return;
+        }
+        this.pending++;
+        this.phase();
+        void this.model.save(tab).finally(() => {
+            this.pending--;
+            this.phase();
+        });
+    }
+    sync() {
+        let state = this.model.state, open = new Set(state.tabs), previous = this.active;
+        for (let [tab, tracked] of this.tabs) {
+            if (!open.has(tab)) {
+                clearTimeout(tracked.timer);
+                tracked.unsubscribe();
+                this.tabs.delete(tab);
+            }
+        }
+        for (let i = 0, n = state.tabs.length; i < n; i++) {
+            let tab = state.tabs[i], tracked = this.tabs.get(tab), unsaved = dirty(tab);
+            if (!tracked) {
+                this.tabs.set(tab, {
+                    dirty: unsaved,
+                    saved: tab.saved,
+                    unsubscribe: tab.document.subscribe((_, change) => {
+                        if (change.textChanged) {
+                            this.edited(tab);
+                        }
+                    })
+                });
+                continue;
+            }
+            if (tracked.dirty && !unsaved && tracked.saved !== tab.saved) {
+                this.status.savedAt = Date.now();
+            }
+            tracked.dirty = unsaved;
+            tracked.saved = tab.saved;
+        }
+        if (state.preferences.autoSave !== this.mode) {
+            this.mode = state.preferences.autoSave;
+            for (let [tab, tracked] of this.tabs) {
+                clearTimeout(tracked.timer);
+                tracked.timer = undefined;
+                this.edited(tab);
+            }
+        }
+        this.active = state.active;
+        if (this.mode === 'focus' && previous && previous !== state.active) {
+            this.save(previous);
+        }
+        this.phase();
+    }
+    blur(all = false) {
+        if (this.mode !== 'focus') {
+            return;
+        }
+        let tabs = all ? this.model.state.tabs : [this.model.state.active];
+        for (let i = 0, n = tabs.length; i < n; i++) {
+            let tab = tabs[i];
+            if (tab) {
+                this.save(tab);
+            }
+        }
+    }
+    connect() {
+        this.disconnect();
+        this.unsubscribe = this.model.subscribe(() => this.sync());
+        this.sync();
+        return () => this.disconnect();
+    }
+    disconnect() {
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+        for (let tracked of this.tabs.values()) {
+            clearTimeout(tracked.timer);
+            tracked.unsubscribe();
+        }
+        this.active = undefined;
+        this.mode = 'off';
+        this.tabs.clear();
+    }
+}
+export { AUTO_SAVE_MODES, AutoSave, INDENT_SIZES, indentation, indentLabel, LANGUAGES, lineEndings };

package/build/components/editor/workspace/statusbar.d.ts

@@ -0,0 +1,15 @@
+import { type Renderable } from '@esportsplus/template';
+import type { Options } from '../code/index.js';
+import type { WorkspaceEditorController } from './index.js';
+import type { EditorWorkspaceModel, WorkspaceTab } from './model.js';
+import '../../inline-edit/scss/index.scss';
+import './scss/status.scss';
+declare const statusbar: (model: EditorWorkspaceModel, nextProblem: () => Promise<boolean>) => {
+    attach: (controller: WorkspaceEditorController | undefined) => void;
+    connect: (element: HTMLElement) => () => void;
+    items: () => DocumentFragment | Text;
+    menu: () => Renderable<any>;
+    options: (tab: WorkspaceTab) => Options | undefined;
+    save: (button: () => Renderable<unknown>) => () => Renderable<unknown>;
+};
+export default statusbar;

package/build/components/editor/workspace/statusbar.js

@@ -0,0 +1,190 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { flush, peek, read, signal, untrack, write } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import icon from '../../icon/index.js';
+import status from '../../inline-edit/status.js';
+import tooltip from '../../tooltip/index.js';
+import { AUTO_SAVE_MODES, AutoSave, INDENT_SIZES, indentation, indentLabel, LANGUAGES, lineEndings } from './status.js';
+import alert from '@esportsplus/ui/svg/circle-alert.svg';
+import check from '@esportsplus/ui/svg/check.svg';
+import warning from '@esportsplus/ui/svg/warning.svg';
+import '../../inline-edit/scss/index.scss';
+import './scss/status.scss';
+const template_071pfnv2 = template_u1.template(`<button class='button code-workspace-autosave' type='button'>`);
+const template_071pfnv5 = template_u1.template(`<!--$-->`);
+const template_071pfnv8 = template_u1.template(`<button class='button code-workspace-status-item ' type='button'>`);
+const template_071pfnvb = template_u1.template(`<div class='code-workspace-status-items'><!--$-->`);
+const template_071pfnvf = template_u1.template(`<!--$--><button class='button code-workspace-status-item code-workspace-status-item--problems' type='button'><!--$--><!--$--><!--$--></button><!--$--><!--$--><!--$--><span class='code-workspace-status-item code-workspace-status-item--encoding' title='Encoding'>UTF-8`);
+const template_071pfnvp = template_u1.template(`<span class='code-workspace-status-item code-workspace-status-item--selections'><!--$--> selections`);
+class ReactiveObject_071pfnv0 extends reactivity_u0.ReactiveObject {
+    #autoSave;
+    constructor(_p0) {
+        super(null);
+        this.#autoSave = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get autoSave() {
+        return reactivity_u0.read(this.#autoSave);
+    }
+    set autoSave(_v0) {
+        reactivity_u0.write(this.#autoSave, _v0);
+    }
+}
+const CHOICES = {
+    autoSave: 'Auto save',
+    indent: 'Indentation',
+    language: 'Language'
+};
+function isCode(controller) {
+    return 'nextProblem' in controller && 'state' in controller;
+}
+function mark(selected) {
+    return () => {
+        let root_071pfnv4 = template_071pfnv5(), element_071pfnv6 = root_071pfnv4.firstChild;
+        new template_u1.EffectSlot(element_071pfnv6, () => selected() && icon({ 'aria-hidden': 'true', class: 'code-workspace-choice-icon' }, check));
+        return root_071pfnv4;
+    };
+}
+const statusbar = (model, nextProblem) => {
+    let autosave = new AutoSave(model), choice = signal('language'), editor = signal(undefined), menu, overrides = new WeakMap(), revision = signal(0), view = new ReactiveObject_071pfnv0('off');
+    function choose(next, element, below = false) {
+        let bounds = element.getBoundingClientRect();
+        write(choice, next);
+        flush();
+        menu?.open({ x: bounds.left, y: below ? bounds.bottom : bounds.top });
+    }
+    function code(render) {
+        return () => {
+            let controller = read(editor);
+            return controller && render(controller);
+        };
+    }
+    function item(kind, label, onclick, title = label) {
+        return (() => {
+            let root_071pfnv7 = template_071pfnv8(), element_071pfnv9 = root_071pfnv7.firstChild;
+            new template_u1.EffectSlot(element_071pfnv9, label, 1);
+            template_u1.setList(element_071pfnv9, 'class', template_u1.interpolate(["code-workspace-status-item--", (kind)]));
+            template_u1.setProperty(element_071pfnv9, 'aria-label', title);
+            template_u1.delegate(element_071pfnv9, 'click', onclick);
+            template_u1.setProperty(element_071pfnv9, 'title', title);
+            return root_071pfnv7;
+        })();
+    }
+    function override(next) {
+        let tab = model.state.active;
+        if (!tab) {
+            return;
+        }
+        overrides.set(tab, { ...overrides.get(tab), ...next });
+        write(revision, peek(revision) + 1);
+        peek(editor)?.focus();
+    }
+    let indents = [false, true].flatMap((tabs) => INDENT_SIZES.map((size) => ({ size, tabs }))), items = [
+        ...Object.keys(LANGUAGES).map((language) => ({
+            hidden: () => read(choice) !== 'language',
+            icon: mark(() => read(editor)?.state.language === language),
+            label: LANGUAGES[language],
+            onselect: () => override({ language })
+        })),
+        ...indents.map((indent) => ({
+            hidden: () => read(choice) !== 'indent',
+            icon: mark(() => {
+                let current = read(editor)?.state.indent;
+                return current?.size === indent.size && current.tabs === indent.tabs;
+            }),
+            label: indent.tabs ? `Indent using tabs, size ${indent.size}` : `Indent using ${indent.size} spaces`,
+            onselect: () => override(indentation(indent))
+        })),
+        ...['off', 'delay', 'focus'].map((mode) => ({
+            hidden: () => read(choice) !== 'autoSave',
+            icon: mark(() => view.autoSave === mode),
+            label: AUTO_SAVE_MODES[mode],
+            onselect: () => model.setPreferences({ autoSave: mode })
+        }))
+    ];
+    return {
+        attach: (controller) => {
+            write(editor, controller && isCode(controller) ? controller : undefined);
+        },
+        connect: (element) => {
+            let listening = new AbortController(), update = () => {
+                view.autoSave = model.state.preferences.autoSave;
+            }, disconnect = autosave.connect(), unsubscribe = model.subscribe(update);
+            update();
+            element.ownerDocument.defaultView?.addEventListener('blur', () => autosave.blur(true), { signal: listening.signal });
+            element.addEventListener('focusout', (event) => {
+                let panel = event.target.closest('.code-workspace-editor');
+                if (panel && !panel.contains(event.relatedTarget)) {
+                    autosave.blur();
+                }
+            }, { signal: listening.signal });
+            return () => {
+                listening.abort();
+                unsubscribe();
+                disconnect();
+                write(editor, undefined);
+            };
+        },
+        items: () => {
+            let root_071pfnva = template_071pfnvb(), element_071pfnvc = root_071pfnva.firstChild.firstChild, element_071pfnvd = root_071pfnva.firstChild;
+            new template_u1.EffectSlot(element_071pfnvc, code((controller) => {
+                let state = controller.state, problems = () => `${state.problems.errors} errors, ${state.problems.warnings} warnings: go to the next problem`;
+                return (() => {
+                    let root_071pfnve = template_071pfnvf(), element_071pfnvg = root_071pfnve.firstChild, element_071pfnvh = element_071pfnvg.nextSibling, element_071pfnvi = element_071pfnvh.firstChild, element_071pfnvj = element_071pfnvi.nextSibling, element_071pfnvk = element_071pfnvj.nextSibling, element_071pfnvl = element_071pfnvh.nextSibling, element_071pfnvm = element_071pfnvl.nextSibling, element_071pfnvn = element_071pfnvm.nextSibling;
+                    new template_u1.EffectSlot(element_071pfnvg, () => state.selections > 1 && (() => {
+                        let root_071pfnvo = template_071pfnvp(), element_071pfnvq = root_071pfnvo.firstChild.firstChild;
+                        template_u1.slot(element_071pfnvq, state.selections);
+                        return root_071pfnvo;
+                    })());
+                    template_u1.slot(element_071pfnvi, icon({ 'aria-hidden': 'true', class: 'code-workspace-status-icon' }, alert));
+                    new template_u1.EffectSlot(element_071pfnvj, () => state.problems.errors);
+                    template_u1.slot(element_071pfnvk, icon({ 'aria-hidden': 'true', class: 'code-workspace-status-icon' }, warning));
+                    new template_u1.EffectSlot(element_071pfnvh, () => state.problems.warnings, 2);
+                    template_u1.slot(element_071pfnvl, item('language', () => LANGUAGES[state.language], (event) => choose('language', event.currentTarget), 'Select language'));
+                    template_u1.slot(element_071pfnvm, item('indent', () => indentLabel(state.indent), (event) => choose('indent', event.currentTarget), 'Select indentation'));
+                    template_u1.slot(element_071pfnvn, item('eol', () => (state.lineEnding === 'crlf' ? 'CRLF' : 'LF'), () => {
+                        lineEndings(controller.document, state.lineEnding === 'crlf' ? 'lf' : 'crlf');
+                    }, () => (state.lineEnding === 'crlf' ? 'Convert line endings to LF' : 'Convert line endings to CRLF')));
+                    template_u1.setProperty(element_071pfnvh, 'aria-label', problems);
+                    template_u1.setProperty(element_071pfnvh, 'disabled', () => !state.problems.errors && !state.problems.warnings);
+                    template_u1.delegate(element_071pfnvh, 'click', () => {
+                        void nextProblem().then((moved) => {
+                            if (moved) {
+                                peek(editor)?.focus();
+                            }
+                        });
+                    });
+                    template_u1.setProperty(element_071pfnvh, 'title', problems);
+                    return root_071pfnve;
+                })();
+            }));
+            template_u1.slot(element_071pfnvd, item('autosave', () => `Auto Save: ${AUTO_SAVE_MODES[view.autoSave]}`, (event) => choose('autoSave', event.currentTarget), 'Select auto save'), 2);
+            return root_071pfnva;
+        },
+        menu: () => tooltip.context({
+            class: 'code-workspace-menu',
+            controller: (value) => {
+                menu = value;
+            },
+            items,
+            [tooltip.context.panel]: { 'aria-label': () => CHOICES[read(choice)], class: 'code-workspace-choices code-workspace-menu-panel' }
+        }, ''),
+        options: (tab) => {
+            read(revision);
+            return overrides.get(tab);
+        },
+        save: (button) => () => {
+            if (view.autoSave === 'off') {
+                return button();
+            }
+            return (() => {
+                let root_071pfnv1 = template_071pfnv2(), element_071pfnv3 = root_071pfnv1.firstChild;
+                template_u1.slot(element_071pfnv3, untrack(() => status.render(autosave.status)), 1);
+                template_u1.setProperty(element_071pfnv3, 'aria-label', () => `Auto save: ${AUTO_SAVE_MODES[view.autoSave]}`);
+                template_u1.delegate(element_071pfnv3, 'click', (event) => choose('autoSave', event.currentTarget, true));
+                template_u1.setProperty(element_071pfnv3, 'title', () => `Auto save: ${AUTO_SAVE_MODES[view.autoSave]}`);
+                return root_071pfnv1;
+            })();
+        }
+    };
+};
+export default statusbar;

package/build/components/editor/workspace/strip.d.ts

@@ -0,0 +1,27 @@
+import * as template_u1 from '@esportsplus/template';
+import type { Item } from '../../tooltip/menu.js';
+import type { WorkspaceEditor } from './index.js';
+import type { EditorWorkspaceModel, WorkspaceTab } from './model.js';
+import './scss/tabs.scss';
+type Options = {
+    isFile: (path: string) => boolean;
+    model: EditorWorkspaceModel;
+    remount: VoidFunction;
+    reveal: (path: string) => void;
+};
+declare const strip: ({ isFile, model, remount, reveal }: Options) => {
+    attributes(tab: WorkspaceTab): {
+        class?: string | undefined;
+        oncontextmenu: (event: MouseEvent) => void;
+        ondblclick: () => void;
+    };
+    editor(tab: WorkspaceTab): WorkspaceEditor | undefined;
+    items(paths: () => string[]): Item[];
+    label(tab: WorkspaceTab): string;
+    merge(target: WorkspaceTab | string): Promise<void>;
+    menu: () => template_u1.Renderable<any>;
+    open(tab: WorkspaceTab, event: MouseEvent): void;
+    pin(tab: WorkspaceTab): template_u1.Renderable<any>;
+    title(tab: WorkspaceTab): string;
+};
+export default strip;

package/build/components/editor/workspace/strip.js

@@ -0,0 +1,239 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { flush } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import icon from '../../icon/index.js';
+import tooltip from '../../tooltip/index.js';
+import { mac } from '../../../shared/platform.js';
+import diffs from '../diffs/index.js';
+import { sides } from './tabs.js';
+import pin from '@esportsplus/ui/svg/pin.svg';
+import './scss/tabs.scss';
+const template_07u9ia02 = template_u1.template(`<div class='code-workspace-document code-workspace-merge'><div class='code-workspace-merge-bar'><span class='code-workspace-merge-title'>Merging </span><button class='button code-workspace-merge-cancel' type='button'> Cancel merge `);
+class ReactiveObject_07u9ia00 extends reactivity_u0.ReactiveObject {
+    #compare = this[reactivity_u0.SIGNAL](false);
+    #conflicted = this[reactivity_u0.SIGNAL](false);
+    #path = this[reactivity_u0.SIGNAL]('');
+    #pinned = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get compare() {
+        return reactivity_u0.read(this.#compare);
+    }
+    set compare(_v0) {
+        reactivity_u0.write(this.#compare, _v0);
+    }
+    get conflicted() {
+        return reactivity_u0.read(this.#conflicted);
+    }
+    set conflicted(_v1) {
+        reactivity_u0.write(this.#conflicted, _v1);
+    }
+    get path() {
+        return reactivity_u0.read(this.#path);
+    }
+    set path(_v2) {
+        reactivity_u0.write(this.#path, _v2);
+    }
+    get pinned() {
+        return reactivity_u0.read(this.#pinned);
+    }
+    set pinned(_v3) {
+        reactivity_u0.write(this.#pinned, _v3);
+    }
+}
+function name(path) {
+    return path.slice(path.lastIndexOf('/') + 1);
+}
+const strip = ({ isFile, model, remount, reveal }) => {
+    let chosen = '', controller, merging = new WeakMap(), subject = new ReactiveObject_07u9ia00();
+    function compare(tab) {
+        let { modified, original, paths } = tab.compare;
+        return () => diffs({
+            class: 'code-workspace-document code-workspace-compare',
+            filename: `${paths[0]} ↔ ${paths[1]}`,
+            modified,
+            original
+        });
+    }
+    function merge(tab, found) {
+        return () => {
+            let root_07u9ia01 = template_07u9ia02(), element_07u9ia03 = root_07u9ia01.firstChild.firstElementChild.firstElementChild, element_07u9ia04 = element_07u9ia03.nextElementSibling, element_07u9ia05 = root_07u9ia01.firstChild;
+            template_u1.slot(element_07u9ia03, tab.path, 2);
+            template_u1.slot(element_07u9ia05, diffs.merge({
+                base: found.base,
+                class: 'code-workspace-merge-editor',
+                current: found.current,
+                filename: tab.path,
+                incoming: found.incoming,
+                onresolve: (result) => {
+                    merging.delete(tab);
+                    tab.document.setValue(result);
+                    remount();
+                    void model.save(tab);
+                }
+            }), 2);
+            template_u1.delegate(element_07u9ia04, 'click', () => {
+                merging.delete(tab);
+                remount();
+            });
+            return root_07u9ia01;
+        };
+    }
+    let items = [
+        {
+            hidden: () => subject.compare || subject.pinned,
+            label: 'Pin',
+            onselect: () => model.pin(subject.path)
+        },
+        {
+            hidden: () => !subject.pinned,
+            label: 'Unpin',
+            onselect: () => model.unpin(subject.path)
+        },
+        {
+            hidden: () => !subject.conflicted,
+            label: 'Merge Conflicts',
+            onselect: () => {
+                void api.merge(subject.path);
+            }
+        },
+        {
+            hint: mac() ? '⌘W' : 'Ctrl+W',
+            label: 'Close',
+            onselect: () => {
+                void model.close(subject.path);
+            }
+        },
+        {
+            label: 'Close Others',
+            onselect: () => {
+                let path = subject.path;
+                void model.closeOthers(path).then((closed) => closed && model.activate(path));
+            }
+        },
+        {
+            label: 'Close to the Right',
+            onselect: () => {
+                let path = subject.path;
+                void model.closeRight(path).then((closed) => closed && model.activate(path));
+            }
+        },
+        {
+            label: 'Close Saved',
+            onselect: () => {
+                void model.closeSaved();
+            }
+        },
+        {
+            hidden: () => subject.compare,
+            label: 'Copy Path',
+            onselect: () => {
+                void model.copyPath(subject.path);
+            }
+        },
+        {
+            hidden: () => subject.compare,
+            label: 'Reveal in Explorer',
+            onselect: () => reveal(subject.path)
+        }
+    ];
+    let api = {
+        attributes(tab) {
+            let modifiers = [tab.pinned && 'code-workspace-tab--pinned', tab.preview && 'code-workspace-tab--preview'].filter(Boolean);
+            return {
+                ...(modifiers.length ? { class: modifiers.join(' ') } : {}),
+                oncontextmenu: (event) => api.open(tab, event),
+                ondblclick: () => {
+                    if (tab.preview) {
+                        void model.open(tab.path);
+                    }
+                }
+            };
+        },
+        editor(tab) {
+            if (tab.compare) {
+                return compare(tab);
+            }
+            let found = merging.get(tab);
+            return found && merge(tab, found);
+        },
+        items(paths) {
+            let files = () => paths().filter(isFile);
+            return [
+                {
+                    hidden: () => paths().length !== 1 || files().length !== 1,
+                    label: 'Select for Compare',
+                    onselect: () => {
+                        chosen = paths()[0];
+                        model.status(`Selected ${chosen} for compare`);
+                    }
+                },
+                {
+                    hidden: () => {
+                        let list = files();
+                        return list.length !== paths().length || !(list.length === 2 || (list.length === 1 && !!chosen && chosen !== list[0]));
+                    },
+                    label: 'Compare with Selected',
+                    onselect: () => {
+                        let list = files();
+                        void (list.length === 2 ? model.compare(list[0], list[1]) : model.compare(chosen, list[0]));
+                    }
+                },
+                {
+                    hidden: () => paths().length !== 1 || files().length !== 1,
+                    label: 'Merge Conflicts',
+                    onselect: () => {
+                        void api.merge(paths()[0]);
+                    }
+                }
+            ];
+        },
+        label(tab) {
+            return tab.compare ? `${name(tab.compare.paths[0])} ↔ ${name(tab.compare.paths[1])}` : name(tab.path);
+        },
+        async merge(target) {
+            let tab = typeof target === 'string' ? await model.open(target) : target;
+            if (!tab || tab.compare) {
+                return;
+            }
+            let found = sides(tab.document.value);
+            if (!found) {
+                model.status(`${tab.path} has no conflict markers`);
+                return;
+            }
+            merging.set(tab, found);
+            model.activate(tab);
+            remount();
+        },
+        menu: () => tooltip.context({
+            class: 'code-workspace-menu',
+            controller: (value) => {
+                controller = value;
+            },
+            items,
+            [tooltip.context.panel]: { 'aria-label': 'Tab actions', class: 'code-workspace-menu-panel' }
+        }, ''),
+        open(tab, event) {
+            if (!controller) {
+                return;
+            }
+            event.preventDefault();
+            let box = event.button === 2 ? undefined : event.currentTarget.getBoundingClientRect();
+            subject.compare = !!tab.compare;
+            subject.conflicted = !tab.compare && !!sides(tab.document.value);
+            subject.path = tab.path;
+            subject.pinned = tab.pinned;
+            flush();
+            controller.open(box ? { x: box.left, y: box.bottom } : { x: event.clientX, y: event.clientY });
+        },
+        pin(tab) {
+            return tab.pinned && icon({ 'aria-label': 'Pinned', class: 'code-workspace-tab-pin', role: 'img' }, pin);
+        },
+        title(tab) {
+            return tab.compare ? `${tab.compare.paths[0]} ↔ ${tab.compare.paths[1]}` : tab.path;
+        }
+    };
+    return api;
+};
+export default strip;

package/build/components/editor/workspace/tabs.d.ts

@@ -0,0 +1,15 @@
+import type { WorkspaceCompare, WorkspaceTab } from './model.js';
+type Closable = 'others' | 'right' | 'saved';
+type MergeSides = {
+    base: string | null;
+    current: string;
+    incoming: string;
+};
+declare const closable: (tabs: readonly WorkspaceTab[], kind: Closable, path?: string) => WorkspaceTab[];
+declare const compareKey: (original: string, modified: string) => string;
+declare const compareTab: (id: number, compare: WorkspaceCompare) => WorkspaceTab;
+declare const order: (tabs: WorkspaceTab[]) => void;
+declare const place: (tabs: WorkspaceTab[], tab: WorkspaceTab) => WorkspaceTab | undefined;
+declare const sides: (text: string) => MergeSides | null;
+export { closable, compareKey, compareTab, order, place, sides };
+export type { Closable, MergeSides };