@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -0,0 +1,1125 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, flush, onCleanup, read, root, signal, untrack, write } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import breadcrumb from '../../breadcrumb/index.js';
+import sidebar from '../../button/sidebar.js';
+import command from '../../command/index.js';
+import fileTree, { FileTreeDecorations, FileTreeEditor, FileTreeElements, fileTreeIcon } from '../tree/index.js';
+import highlight from '../../highlight/index.js';
+import icon from '../../icon/index.js';
+import input from '../../input/index.js';
+import overlay from '../../overlay/index.js';
+import tooltip from '../../tooltip/index.js';
+import fuzzy from '../../../shared/fuzzy.js';
+import { mac } from '../../../shared/platform.js';
+import { observe } from '../../../shared/resize.js';
+import codeEditor from '../code/editor.js';
+import { dirty, EditorWorkspaceModel } from './model.js';
+import left from '@esportsplus/ui/svg/arrow-left.svg';
+import right from '@esportsplus/ui/svg/arrow-right.svg';
+import collapse from '@esportsplus/ui/svg/chevrons-up-down.svg';
+import close from '@esportsplus/ui/svg/close.svg';
+import wrap from '@esportsplus/ui/svg/corner-down-right.svg';
+import whitespace from '@esportsplus/ui/svg/eye.svg';
+import save from '@esportsplus/ui/svg/save.svg';
+import magnifier from '@esportsplus/ui/svg/search.svg';
+import undo from '@esportsplus/ui/svg/undo.svg';
+import '../../button/scss/index.scss';
+import '../code/scss/index.scss';
+import './scss/index.scss';
+const template_03uclqu5 = template_u1.template(`<div class='code-workspace-empty'> Open a file from the explorer or press <span class='code-workspace-keys'>`);
+const template_03uclqu8 = template_u1.template(`<kbd class='button button--kbd'>`);
+const template_03uclqub = template_u1.template(`<!--$--><!--$-->`);
+const template_03uclquf = template_u1.template(`<div class='command-group' role='group'><div class='command-group-label'>`);
+const template_03uclquj = template_u1.template(`<div class='command-option'><!--$-->`);
+const template_03uclqun = template_u1.template(`<div class='button code-workspace-tab' role='tab'><!--$--><span class='code-workspace-tab-name'></span><!--$--><button class='button code-workspace-tab-close' tabindex='-1' type='button'>`);
+const template_03uclqut = template_u1.template(`<span aria-label='Unsaved changes' class='code-workspace-tab-dirty' role='img'>`);
+const template_03uclquv = template_u1.template(`<button class='button code-workspace-control' type='button'>`);
+const template_03uclquy = template_u1.template(`<section aria-label='Editor workspace' class='code-workspace'><aside aria-label='File explorer' class='code-workspace-explorer'><div class='code-workspace-explorer-content'><div class='code-workspace-explorer-header'><!--$--><!--$--><!--$--><!--$--></div><div class='code-workspace-tree'><!--$--></div></div></aside><main class='code-workspace-main'><div aria-label='Open files' class='code-workspace-tabs --scrollbar' role='tablist'><!--$--></div><div class='code-workspace-bar'><!--$--><div class='code-workspace-actions'><!--$--><!--$--><!--$--></div></div><div class='code-workspace-editor' role='tabpanel'></div></main><footer class='code-workspace-status'><span class='code-workspace-status-path'></span><span class='code-workspace-status-position'></span><span aria-live='polite' class='code-workspace-status-message' role='status'></span></footer><!--$--><!--$-->`);
+const template_03uclqu1n = template_u1.template(`<div class='code-workspace-notice'>No files in this workspace`);
+const template_03uclqu1p = template_u1.template(`<div class='code-workspace-notice code-workspace-notice--cover' role='alert'><!--$--><button class='button code-workspace-retry' type='button'> Retry `);
+const template_03uclqu1s = template_u1.template(`<div class='code-workspace-notice code-workspace-notice--cover' role='status'>Loading…`);
+const template_03uclqu1u = template_u1.template(`<button aria-label='Peek file explorer' class='code-workspace-edge' type='button'>`);
+const template_03uclqu1x = template_u1.template(`<h2 class='code-workspace-confirm-title'>Save unsaved changes?</h2><p class='code-workspace-confirm-files'></p><p class='code-workspace-confirm-text'></p><div class='code-workspace-confirm-actions'><button autofocus class='button code-workspace-confirm-button' type='button'> Cancel </button><button class='button code-workspace-confirm-button' type='button'> Discard </button><button class='button code-workspace-confirm-button code-workspace-confirm-button--primary' type='button'> Save `);
+class ReactiveObject_03uclqu0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+class ReactiveObject_03uclqu1 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #index = this[reactivity_u0.SIGNAL](0);
+    #query = this[reactivity_u0.SIGNAL]('');
+    #tab;
+    constructor(_p0) {
+        super(null);
+        this.#tab = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v1) {
+        reactivity_u0.write(this.#index, _v1);
+    }
+    get query() {
+        return reactivity_u0.read(this.#query);
+    }
+    set query(_v2) {
+        reactivity_u0.write(this.#query, _v2);
+    }
+    get tab() {
+        return reactivity_u0.read(this.#tab);
+    }
+    set tab(_v3) {
+        reactivity_u0.write(this.#tab, _v3);
+    }
+}
+class ReactiveObject_03uclqu2 extends reactivity_u0.ReactiveObject {
+    #selected = this[reactivity_u0.SIGNAL]('');
+    #selection;
+    constructor(_p0) {
+        super(null);
+        this.#selection = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get selected() {
+        return reactivity_u0.read(this.#selected);
+    }
+    set selected(_v0) {
+        reactivity_u0.write(this.#selected, _v0);
+    }
+    get selection() {
+        return reactivity_u0.read(this.#selection);
+    }
+    set selection(_v1) {
+        reactivity_u0.write(this.#selection, _v1);
+    }
+}
+class ReactiveObject_03uclqu3 extends reactivity_u0.ReactiveObject {
+    #busy = this[reactivity_u0.SIGNAL](false);
+    #canUndo = this[reactivity_u0.SIGNAL](false);
+    #collapsed = this[reactivity_u0.SIGNAL](false);
+    #compact = this[reactivity_u0.SIGNAL](false);
+    #cwd = this[reactivity_u0.SIGNAL]('');
+    #error = this[reactivity_u0.SIGNAL]('');
+    #explorerOpen = this[reactivity_u0.SIGNAL](true);
+    #left = this[reactivity_u0.SIGNAL](false);
+    #loaded = this[reactivity_u0.SIGNAL](false);
+    #path = this[reactivity_u0.SIGNAL]('');
+    #peek = this[reactivity_u0.SIGNAL](false);
+    #position = this[reactivity_u0.SIGNAL]('');
+    #project = this[reactivity_u0.SIGNAL]('');
+    #ready = this[reactivity_u0.SIGNAL](false);
+    #search = this[reactivity_u0.SIGNAL]('');
+    #status = this[reactivity_u0.SIGNAL]('');
+    #statusError = this[reactivity_u0.SIGNAL](false);
+    #tabs = this[reactivity_u0.SIGNAL](false);
+    #whitespace = this[reactivity_u0.SIGNAL](false);
+    #wrap = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get busy() {
+        return reactivity_u0.read(this.#busy);
+    }
+    set busy(_v0) {
+        reactivity_u0.write(this.#busy, _v0);
+    }
+    get canUndo() {
+        return reactivity_u0.read(this.#canUndo);
+    }
+    set canUndo(_v1) {
+        reactivity_u0.write(this.#canUndo, _v1);
+    }
+    get collapsed() {
+        return reactivity_u0.read(this.#collapsed);
+    }
+    set collapsed(_v2) {
+        reactivity_u0.write(this.#collapsed, _v2);
+    }
+    get compact() {
+        return reactivity_u0.read(this.#compact);
+    }
+    set compact(_v3) {
+        reactivity_u0.write(this.#compact, _v3);
+    }
+    get cwd() {
+        return reactivity_u0.read(this.#cwd);
+    }
+    set cwd(_v4) {
+        reactivity_u0.write(this.#cwd, _v4);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v5) {
+        reactivity_u0.write(this.#error, _v5);
+    }
+    get explorerOpen() {
+        return reactivity_u0.read(this.#explorerOpen);
+    }
+    set explorerOpen(_v6) {
+        reactivity_u0.write(this.#explorerOpen, _v6);
+    }
+    get left() {
+        return reactivity_u0.read(this.#left);
+    }
+    set left(_v7) {
+        reactivity_u0.write(this.#left, _v7);
+    }
+    get loaded() {
+        return reactivity_u0.read(this.#loaded);
+    }
+    set loaded(_v8) {
+        reactivity_u0.write(this.#loaded, _v8);
+    }
+    get path() {
+        return reactivity_u0.read(this.#path);
+    }
+    set path(_v9) {
+        reactivity_u0.write(this.#path, _v9);
+    }
+    get peek() {
+        return reactivity_u0.read(this.#peek);
+    }
+    set peek(_v10) {
+        reactivity_u0.write(this.#peek, _v10);
+    }
+    get position() {
+        return reactivity_u0.read(this.#position);
+    }
+    set position(_v11) {
+        reactivity_u0.write(this.#position, _v11);
+    }
+    get project() {
+        return reactivity_u0.read(this.#project);
+    }
+    set project(_v12) {
+        reactivity_u0.write(this.#project, _v12);
+    }
+    get ready() {
+        return reactivity_u0.read(this.#ready);
+    }
+    set ready(_v13) {
+        reactivity_u0.write(this.#ready, _v13);
+    }
+    get search() {
+        return reactivity_u0.read(this.#search);
+    }
+    set search(_v14) {
+        reactivity_u0.write(this.#search, _v14);
+    }
+    get status() {
+        return reactivity_u0.read(this.#status);
+    }
+    set status(_v15) {
+        reactivity_u0.write(this.#status, _v15);
+    }
+    get statusError() {
+        return reactivity_u0.read(this.#statusError);
+    }
+    set statusError(_v16) {
+        reactivity_u0.write(this.#statusError, _v16);
+    }
+    get tabs() {
+        return reactivity_u0.read(this.#tabs);
+    }
+    set tabs(_v17) {
+        reactivity_u0.write(this.#tabs, _v17);
+    }
+    get whitespace() {
+        return reactivity_u0.read(this.#whitespace);
+    }
+    set whitespace(_v18) {
+        reactivity_u0.write(this.#whitespace, _v18);
+    }
+    get wrap() {
+        return reactivity_u0.read(this.#wrap);
+    }
+    set wrap(_v19) {
+        reactivity_u0.write(this.#wrap, _v19);
+    }
+}
+const COMPACT_WIDTH = 520;
+let uid = 0;
+function control({ active, disabled, label, onclick, sprite }) {
+    return (() => {
+        let root_03uclquu = template_03uclquv(), element_03uclquw = root_03uclquu.firstChild;
+        new template_u1.EffectSlot(element_03uclquw, () => icon({ 'aria-hidden': 'true', class: 'code-workspace-control-icon' }, typeof sprite === 'string' ? sprite : sprite()), 1);
+        template_u1.setProperty(element_03uclquw, 'aria-label', label);
+        template_u1.setProperty(element_03uclquw, 'aria-pressed', active && (() => (active() ? 'true' : 'false')));
+        template_u1.setList(element_03uclquw, 'class', active && (() => active() && '--active'));
+        template_u1.setProperty(element_03uclquw, 'disabled', disabled);
+        template_u1.delegate(element_03uclquw, 'click', onclick);
+        template_u1.setProperty(element_03uclquw, 'title', label);
+        return root_03uclquu;
+    })();
+}
+function keys(names) {
+    let apple = mac();
+    return names.map((name) => (name === 'Mod' ? (apple ? '⌘' : 'Ctrl') : name));
+}
+function label(text, names) {
+    return `${text} (${keys(names).join(mac() ? '' : '+')})`;
+}
+function name(path) {
+    return path.slice(path.lastIndexOf('/') + 1);
+}
+function reconcile(store, entries) {
+    let nodes = new Map();
+    for (let i = 0, n = entries.length; i < n; i++) {
+        let entry = entries[i], id = '', parts = entry.path.split('/');
+        for (let length = 1, m = parts.length; length <= m; length++) {
+            let folder = length < m || entry.kind === 'directory', parent = length === 1 ? null : id;
+            id = parent === null ? parts[0] : `${parent}/${parts[length - 1]}`;
+            nodes.set(id, {
+                depth: length,
+                element: { id, name: parts[length - 1], type: folder ? 'folder' : 'file', ...(folder ? { children: [] } : {}) },
+                parent
+            });
+        }
+    }
+    for (let [id, { element }] of [...store.index]) {
+        if (nodes.get(id)?.element.type !== element.type) {
+            store.remove(id);
+        }
+    }
+    let sorted = [...nodes].sort(([, a], [, b]) => a.depth - b.depth);
+    for (let i = 0, n = sorted.length; i < n; i++) {
+        let [id, node] = sorted[i];
+        if (!store.get(id)) {
+            store.add(node.element, node.parent);
+        }
+    }
+}
+const isWorkspaceCodeEditor = (controller) => 'goToLine' in controller && 'rectAt' in controller && 'refresh' in controller;
+const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, editorOptions, host, model: supplied, openTarget, ...attributes }) => {
+    if (!supplied && !host) {
+        throw new Error('Workspace: editor.workspace requires a WorkspaceHost or EditorWorkspaceModel');
+    }
+    let actions, active = signal(undefined), activeId = signal(0), confirmation, container, decorated = new Map(), decorations = new FileTreeDecorations(), dialog = new ReactiveObject_03uclqu0(), elements = new WeakMap(), entries, files = signal([]), flags = new Map(), focusing = false, hovered = false, id = `code-workspace-${++uid}`, model = supplied ?? new EditorWorkspaceModel(host, cwd), mount, palette = new ReactiveObject_03uclqu1('all'), release, request = signal(undefined), returnFocus, revealed = 0, searchField, settle, shown = signal(undefined), tabs = signal([]), tabsKey = '', target = signal(undefined), tree, treeEditor = new FileTreeEditor(), treeState = new ReactiveObject_03uclqu2(new Set()), treeStore = new FileTreeElements([]), view = new ReactiveObject_03uclqu3();
+    function ask(next) {
+        confirmation?.resolve('cancel');
+        returnFocus = container?.ownerDocument.activeElement ?? undefined;
+        return new Promise((resolve) => {
+            let current = {
+                request: next,
+                resolve: (decision) => {
+                    if (confirmation !== current) {
+                        return;
+                    }
+                    confirmation = undefined;
+                    dialog.active = false;
+                    settle = () => {
+                        if (returnFocus?.isConnected) {
+                            returnFocus.focus({ preventScroll: true });
+                        }
+                        else {
+                            focusEditor();
+                        }
+                    };
+                    resolve(decision);
+                }
+            };
+            confirmation = current;
+            write(request, next);
+            dialog.active = true;
+        });
+    }
+    function attach(current) {
+        let controller = current.controller;
+        detach(current);
+        write(current.path, current.tab.path);
+        if (!addons || !controller) {
+            return;
+        }
+        try {
+            current.addon = addons({
+                controller,
+                host: controller.host,
+                tab: current.tab,
+                workspace: model
+            });
+        }
+        catch (error) {
+            model.status(`Editor addon failed: ${String(error)}`, true);
+        }
+    }
+    function bridge() {
+        let state = model.state, current = state.active, key = '', list = state.tabs;
+        if (entries !== state.entries) {
+            entries = state.entries;
+            reconcile(treeStore, entries);
+            let paths = [];
+            for (let i = 0, n = entries.length; i < n; i++) {
+                if (entries[i].kind === 'file') {
+                    paths.push(entries[i].path);
+                }
+            }
+            write(files, paths);
+        }
+        for (let i = 0, n = list.length; i < n; i++) {
+            key += `${list[i].id}:${list[i].path}\n`;
+        }
+        if (key !== tabsKey) {
+            tabsKey = key;
+            write(tabs, [...list]);
+        }
+        write(active, current);
+        write(activeId, current?.id ?? 0);
+        show(current);
+        view.busy = state.busy > 0;
+        view.canUndo = state.canUndoFiles;
+        view.collapsed = list.length > 0 && !state.preferences.explorerOpen;
+        view.cwd = state.cwd;
+        view.error = state.error;
+        view.explorerOpen = state.preferences.explorerOpen;
+        view.left = state.preferences.explorerSide === 'left';
+        view.loaded = state.loaded;
+        view.project = state.cwd.split(/[\\/]/).filter(Boolean).at(-1) ?? '';
+        view.status = state.status ||
+            (state.opening.length
+                ? `Opening ${state.opening.at(-1)}…`
+                : state.busy
+                    ? 'Working…'
+                    : state.loading
+                        ? 'Refreshing…'
+                        : current?.missing
+                            ? 'File removed from disk; draft retained'
+                            : '');
+        view.statusError = !!state.status && state.statusKind === 'error';
+        view.tabs = list.length > 0;
+        view.whitespace = state.preferences.showWhitespace;
+        view.wrap = state.preferences.wrapText;
+        if (!view.collapsed) {
+            view.peek = false;
+            view.ready = false;
+        }
+        let path = current?.path ?? '';
+        if (view.path !== path) {
+            view.path = path;
+            treeState.selected = path;
+            if (mount && mount.tab === current && read(mount.path) !== path) {
+                attach(mount);
+            }
+        }
+        decorate(list);
+        reveal();
+    }
+    function choose(entry) {
+        let opened = model.open(entry.id);
+        settle = () => {
+            void opened.then(focusEditor);
+        };
+    }
+    function connect(element) {
+        release?.();
+        container = element;
+        release = root((dispose) => {
+            let listening = new AbortController(), unobserve = observe(element, ([entry]) => {
+                view.compact = entry.contentRect.width <= COMPACT_WIDTH;
+            });
+            bridge();
+            element.ownerDocument.addEventListener('keydown', keydown, { signal: listening.signal });
+            element.addEventListener('close', () => {
+                let next = settle;
+                settle = undefined;
+                next?.();
+            }, { capture: true, signal: listening.signal });
+            model.setConfirmation(ask);
+            onCleanup(model.subscribe(bridge));
+            onCleanup(() => {
+                listening.abort();
+                unobserve();
+                confirmation?.resolve('cancel');
+                model.setConfirmation(undefined);
+                model.stop();
+                if (mount) {
+                    unmount(mount);
+                }
+                container = undefined;
+                release = undefined;
+            });
+            effect(() => {
+                let tab = read(active);
+                if (!tab) {
+                    view.position = '';
+                    return;
+                }
+                let document = tab.document, update = () => {
+                    let position = document.position();
+                    view.position = `Ln ${position.line}, Col ${position.column}`;
+                };
+                update();
+                onCleanup(document.subscribe((_, change) => {
+                    if (change.selectionChanged || change.textChanged) {
+                        update();
+                    }
+                }));
+            });
+            effect(() => {
+                let path = treeState.selected;
+                if (path && treeStore.get(path)?.type === 'file') {
+                    untrack(() => {
+                        if (path !== model.state.active?.path) {
+                            void model.open(path);
+                        }
+                    });
+                }
+            });
+            effect(() => {
+                let next = typeof openTarget === 'function' ? openTarget() : openTarget;
+                if (next) {
+                    untrack(() => {
+                        void model.start().then(() => model.openTarget(next));
+                    });
+                }
+            });
+            effect(() => {
+                if (!dialog.active) {
+                    untrack(() => confirmation?.resolve('cancel'));
+                }
+            });
+            void model.start();
+            return dispose;
+        });
+    }
+    function crumbs() {
+        let path = view.path;
+        if (!path) {
+            return '';
+        }
+        let parts = path.split('/'), project = view.project, items = [];
+        if (project) {
+            items.push({ href: '#', label: project });
+        }
+        for (let i = 0, n = parts.length; i < n; i++) {
+            items.push({ href: `#${parts.slice(0, i + 1).join('/')}`, label: parts[i] });
+        }
+        return breadcrumb({
+            class: 'breadcrumb--compact code-workspace-breadcrumb',
+            items,
+            label: 'File path',
+            onnavigate: (item) => locate(item.href.slice(1)),
+            separator: 'chevron'
+        });
+    }
+    function decorate(list) {
+        let ids = new Set(), open = new Set();
+        for (let i = 0, n = list.length; i < n; i++) {
+            let tab = list[i], unsaved = dirty(tab);
+            ids.add(tab.id);
+            open.add(tab.path);
+            write(flag(tab), unsaved);
+            if (decorated.get(tab.path) !== unsaved) {
+                decorated.set(tab.path, unsaved);
+                decorations.update([[tab.path, { editor: { open: true, unsaved } }]]);
+            }
+        }
+        for (let path of [...decorated.keys()]) {
+            if (!open.has(path)) {
+                decorated.delete(path);
+                decorations.update([[path, null]]);
+            }
+        }
+        for (let id of [...flags.keys()]) {
+            if (!ids.has(id)) {
+                flags.delete(id);
+            }
+        }
+    }
+    function detach(current) {
+        let stop = current.addon;
+        current.addon = undefined;
+        try {
+            stop?.();
+        }
+        catch (error) {
+            model.status(`Editor addon failed: ${String(error)}`, true);
+        }
+    }
+    function flag(tab) {
+        let found = flags.get(tab.id);
+        if (!found) {
+            found = signal(dirty(tab));
+            flags.set(tab.id, found);
+        }
+        return found;
+    }
+    function focusEditor() {
+        let tab = model.state.active;
+        focusing = false;
+        if (!tab) {
+            searchField?.focus();
+            return;
+        }
+        if (mount?.controller && mount.tab === tab) {
+            mount.controller.focus();
+            return;
+        }
+        focusing = true;
+    }
+    function keydown(event) {
+        if (event.defaultPrevented || event.isComposing || !container || confirmation) {
+            return;
+        }
+        let inside = container.contains(event.target), key = event.key.toLowerCase(), mod = (event.ctrlKey || event.metaKey) && !event.altKey;
+        if (mod && !event.shiftKey && key === 'p' && (inside || hovered)) {
+            event.preventDefault();
+            quickOpen();
+            return;
+        }
+        if (!inside) {
+            return;
+        }
+        if (mod && key === 's') {
+            event.preventDefault();
+            void model.save();
+        }
+        else if (mod && key === 'w') {
+            event.preventDefault();
+            void model.close();
+        }
+        else if (mod && key === 'z' && !event.shiftKey && event.target.closest('.file-tree') && !event.target.closest('input, textarea, [contenteditable=true]')) {
+            event.preventDefault();
+            void model.undoFiles();
+        }
+        else if (key === 'escape' && view.peek) {
+            event.preventDefault();
+            peek(false);
+            focusEditor();
+        }
+    }
+    function locate(path) {
+        peek(true, true);
+        if (!path) {
+            tree?.collapseAll();
+            return;
+        }
+        if (path !== view.path) {
+            treeState.selected = path;
+        }
+    }
+    function pane() {
+        let next = read(shown);
+        if (!next) {
+            return (() => {
+                let root_03uclqu4 = template_03uclqu5(), element_03uclqu6 = root_03uclqu4.firstChild.firstElementChild;
+                template_u1.slot(element_03uclqu6, keys(['Mod', 'P']).map((key) => {
+                    let root_03uclqu7 = template_03uclqu8(), element_03uclqu9 = root_03uclqu7.firstChild;
+                    template_u1.slot(element_03uclqu9, key, 1);
+                    return root_03uclqu7;
+                }), 1);
+                return root_03uclqu4;
+            })();
+        }
+        let current = next.released ? { editor: next.editor, path: signal(next.tab.path), released: false, tab: next.tab } : next, bound = {
+            class: 'code-workspace-document',
+            controller: (controller) => {
+                if (current.released) {
+                    return;
+                }
+                current.controller = controller;
+                restore(current);
+                attach(current);
+                reveal();
+                if (focusing) {
+                    focusing = false;
+                    queueMicrotask(() => {
+                        if (!current.released) {
+                            controller.focus();
+                        }
+                    });
+                }
+            },
+            document: current.tab.document,
+            onSave: () => {
+                void model.save(current.tab);
+            },
+            options: () => settings(current.tab, read(current.path))
+        };
+        mount = current;
+        onCleanup(() => unmount(current));
+        return untrack(() => current.editor(bound));
+    }
+    function peek(open, keyboard = false) {
+        if (!view.collapsed) {
+            return;
+        }
+        if (!open) {
+            view.peek = false;
+            view.ready = false;
+            return;
+        }
+        view.peek = true;
+        if (keyboard || container?.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            view.ready = true;
+        }
+    }
+    function quickOpen(query = '') {
+        if (palette.active) {
+            palette.active = false;
+            return;
+        }
+        palette.active = true;
+        flush();
+        palette.query = query;
+    }
+    function reach() {
+        peek(true, true);
+        flush();
+        searchField?.focus();
+    }
+    function results(groups) {
+        return (() => {
+            let root_03uclqua = template_03uclqub(), element_03uclquc = root_03uclqua.firstChild, element_03uclqud = element_03uclquc.nextSibling;
+            template_u1.slot(element_03uclquc, highlight({ class: 'command-highlight', hover: false, target: '.command-option' }));
+            template_u1.slot(element_03uclqud, groups.map((group) => {
+                let root_03uclque = template_03uclquf(), element_03uclqug = root_03uclque.firstChild, element_03uclquh = element_03uclqug.firstElementChild;
+                template_u1.slot(element_03uclquh, group.label, 1);
+                template_u1.slot(element_03uclqug, group.items.map((item) => {
+                    let root_03uclqui = template_03uclquj(), element_03uclquk = root_03uclqui.firstChild, element_03uclqul = element_03uclquk.firstChild;
+                    template_u1.slot(element_03uclqul, fileTreeIcon({ name: name(item.id), type: 'file' }, false));
+                    template_u1.slot(element_03uclquk, item.content, 2);
+                    template_u1.setProperties(element_03uclquk, item.attributes);
+                    return root_03uclqui;
+                }), 2);
+                template_u1.setProperty(element_03uclquh, 'id', group.id);
+                template_u1.setProperty(element_03uclqug, 'aria-labelledby', group.id);
+                return root_03uclque;
+            }));
+            return root_03uclqua;
+        })();
+    }
+    function remember(current) {
+        let element = current.controller.scroller;
+        current.tab.scroll = { left: element.scrollLeft, top: element.scrollTop };
+    }
+    function restore(current) {
+        let element = current.controller.scroller, { left, top } = current.tab.scroll, tab = current.tab;
+        element.scrollLeft = left;
+        element.scrollTop = top;
+        if (Math.abs(element.scrollLeft - left) > 1 || Math.abs(element.scrollTop - top) > 1) {
+            requestAnimationFrame(() => {
+                if (!current.released && current.tab === tab) {
+                    element.scrollLeft = left;
+                    element.scrollTop = top;
+                }
+            });
+        }
+    }
+    function retarget(current, tab) {
+        remember(current);
+        detach(current);
+        current.tab = tab;
+        current.controller.setDocument(tab.document, settings(tab, tab.path));
+        restore(current);
+        attach(current);
+        reveal();
+    }
+    function reveal() {
+        let controller = mount?.controller, state = model.state, next = state.reveal;
+        if (!controller || !next || !state.active || next.request === revealed || controller.document !== state.active.document || state.active.id !== next.tabId) {
+            return;
+        }
+        revealed = next.request;
+        if (isWorkspaceCodeEditor(controller)) {
+            controller.goToLine(next.line, next.column);
+            return;
+        }
+        let offset = controller.document.offset(next.line, next.column);
+        controller.select({ end: offset, start: offset });
+    }
+    function search(query) {
+        view.search = query;
+        tree?.search(query);
+    }
+    function selected() {
+        return [...treeState.selection].filter((path) => treeStore.get(path));
+    }
+    function settings(tab, path) {
+        return {
+            fold: true,
+            minimap: true,
+            ...(typeof editorOptions === 'function' ? editorOptions(tab) : editorOptions),
+            fileName: path,
+            label: path,
+            whitespace: view.whitespace,
+            wrap: view.wrap
+        };
+    }
+    function show(tab) {
+        if (mount?.tab === tab) {
+            return;
+        }
+        let editor = tab && (editorFor?.(tab) ?? codeEditor);
+        if (tab && mount?.controller?.setDocument && mount.editor === editor) {
+            retarget(mount, tab);
+            return;
+        }
+        if (mount) {
+            unmount(mount);
+        }
+        mount = tab && editor && { editor, path: signal(tab.path), released: false, tab };
+        write(shown, mount);
+    }
+    function tab(entry) {
+        let chosen = () => signal.selector(activeId, entry.id), file = name(entry.path);
+        return (() => {
+            let root_03uclqum = template_03uclqun(), element_03uclquo = root_03uclqum.firstChild, element_03uclqup = element_03uclquo.firstChild, element_03uclquq = element_03uclquo.firstElementChild, element_03uclqur = element_03uclqup.nextSibling.nextSibling, element_03uclqus = element_03uclquq.nextElementSibling;
+            template_u1.slot(element_03uclqup, fileTreeIcon({ name: file, type: 'file' }, false));
+            template_u1.slot(element_03uclquq, file, 1);
+            new template_u1.EffectSlot(element_03uclqur, () => read(flag(entry)) && template_03uclqut());
+            template_u1.slot(element_03uclqus, icon({ 'aria-hidden': 'true', class: 'code-workspace-tab-close-icon' }, close), 1);
+            template_u1.setProperty(element_03uclqus, 'aria-label', template_u1.interpolate(["Close ", (file)]));
+            template_u1.setProperty(element_03uclqus, 'title', label('Close', ['Mod', 'W']));
+            template_u1.delegate(element_03uclqus, 'click', (event) => {
+                event.stopPropagation();
+                void model.close(entry.path);
+            });
+            template_u1.setProperty(element_03uclquo, 'aria-controls', template_u1.interpolate([(id), "-panel"]));
+            template_u1.setProperty(element_03uclquo, 'id', template_u1.interpolate([(id), "-tab-", (entry.id)]));
+            template_u1.setProperty(element_03uclquo, 'title', entry.path);
+            template_u1.setProperty(element_03uclquo, 'aria-selected', () => (chosen() ? 'true' : 'false'));
+            template_u1.setList(element_03uclquo, 'class', () => chosen() && '--active');
+            template_u1.delegate(element_03uclquo, 'auxclick', (event) => {
+                if (event.button === 1) {
+                    event.preventDefault();
+                    void model.close(entry.path);
+                }
+            });
+            template_u1.delegate(element_03uclquo, 'click', () => {
+                model.activate(entry);
+                focusEditor();
+            });
+            template_u1.onconnect(element_03uclquo, (element) => {
+                elements.set(entry, element);
+            });
+            template_u1.delegate(element_03uclquo, 'keydown', (event) => {
+                let list = untrack(() => read(tabs)), at = list.indexOf(entry), next;
+                if (event.key === 'ArrowRight') {
+                    next = list[(at + 1) % list.length];
+                }
+                else if (event.key === 'ArrowLeft') {
+                    next = list[(at - 1 + list.length) % list.length];
+                }
+                else if (event.key === 'Home') {
+                    next = list[0];
+                }
+                else if (event.key === 'End') {
+                    next = list.at(-1);
+                }
+                else if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    model.activate(entry);
+                    focusEditor();
+                    return;
+                }
+                if (next) {
+                    event.preventDefault();
+                    model.activate(next);
+                    elements.get(next)?.focus();
+                }
+            });
+            template_u1.setProperty(element_03uclquo, 'tabindex', () => (chosen() ? 0 : -1));
+            return root_03uclqum;
+        })();
+    }
+    function toggle(key) {
+        model.setPreferences({ [key]: !model.state.preferences[key] });
+        view.peek = false;
+        view.ready = false;
+    }
+    function unmount(current) {
+        if (current.released) {
+            return;
+        }
+        let controller = current.controller;
+        current.released = true;
+        if (mount === current) {
+            mount = undefined;
+        }
+        if (controller?.host.isConnected) {
+            remember(current);
+        }
+        detach(current);
+    }
+    let api = {
+        close: (path) => model.close(path),
+        collapseAll: () => tree?.collapseAll(),
+        delete: (paths = selected()) => model.delete(paths),
+        dispose: () => {
+            release?.();
+            model.dispose();
+        },
+        get editor() {
+            return mount?.controller;
+        },
+        focus: focusEditor,
+        model,
+        open: (path, line, column) => model.open(path, line, column),
+        quickOpen,
+        refresh: () => model.refresh(),
+        rename: (source, destination) => model.rename(source, destination),
+        save: () => model.save(),
+        search,
+        toggleExplorer: () => toggle('explorerOpen'),
+        toggleExplorerSide: () => {
+            model.setPreferences({ explorerSide: view.left ? 'right' : 'left' });
+            view.peek = false;
+            view.ready = false;
+        },
+        toggleWhitespace: () => toggle('showWhitespace'),
+        toggleWrap: () => toggle('wrapText'),
+        undoFiles: () => model.undoFiles()
+    }, items = [
+        {
+            hidden: () => !single() || read(target)?.element.type !== 'file',
+            label: 'Open',
+            onselect: () => {
+                void model.open(paths()[0]).then(focusEditor);
+            }
+        },
+        {
+            hidden: () => !single(),
+            hint: 'F2',
+            label: 'Rename',
+            onselect: () => treeEditor.rename(paths()[0])
+        },
+        {
+            hidden: () => !single(),
+            label: 'Copy Path',
+            onselect: () => {
+                void model.copyPath(paths()[0]);
+            }
+        },
+        ...(model.host.actions ?? []).map((action) => ({
+            danger: action.danger,
+            hidden: () => !paths().length || (!!action.visible && !action.visible(paths())),
+            icon: action.icon ? () => icon({ 'aria-hidden': 'true' }, action.icon) : undefined,
+            label: action.label,
+            onselect: () => {
+                void model.run(action, paths());
+            }
+        })),
+        {
+            danger: true,
+            hint: mac() ? '⌘⌫' : 'Del',
+            label: 'Delete',
+            onselect: () => {
+                void model.delete(paths());
+            }
+        }
+    ], paths = () => read(target)?.paths ?? [], single = () => paths().length === 1;
+    receive?.(api);
+    return (() => {
+        let root_03uclqux = template_03uclquy(), element_03uclquz = root_03uclqux.firstChild, element_03uclqu10 = element_03uclquz.firstElementChild, element_03uclqu11 = element_03uclqu10.firstElementChild, element_03uclqu12 = element_03uclqu11.firstElementChild.firstChild, element_03uclqu13 = element_03uclqu12.nextSibling, element_03uclqu14 = element_03uclqu13.nextSibling, element_03uclqu15 = element_03uclqu14.nextSibling, element_03uclqu16 = element_03uclqu11.firstElementChild, element_03uclqu17 = element_03uclqu16.nextElementSibling.firstChild, element_03uclqu18 = element_03uclqu16.nextElementSibling, element_03uclqu19 = element_03uclqu10.nextElementSibling, element_03uclqu1a = element_03uclqu19.firstElementChild.firstChild, element_03uclqu1b = element_03uclqu19.firstElementChild, element_03uclqu1c = element_03uclqu1b.nextElementSibling.firstChild, element_03uclqu1d = element_03uclqu1b.nextElementSibling.firstElementChild.firstChild, element_03uclqu1e = element_03uclqu1d.nextSibling, element_03uclqu1f = element_03uclqu1e.nextSibling, element_03uclqu1g = element_03uclqu1b.nextElementSibling.firstElementChild, element_03uclqu1h = element_03uclqu1b.nextElementSibling.nextElementSibling, element_03uclqu1i = element_03uclqu19.nextElementSibling.firstElementChild, element_03uclqu1j = element_03uclqu1i.nextElementSibling, element_03uclqu1k = element_03uclqu1j.nextElementSibling, element_03uclqu1l = element_03uclquz.firstChild.nextSibling.nextSibling.nextSibling, element_03uclqu1m = element_03uclqu1l.nextSibling;
+        template_u1.slot(element_03uclqu12, control({
+            label: () => (view.left ? 'Move file explorer to right' : 'Move file explorer to left'),
+            onclick: api.toggleExplorerSide,
+            sprite: () => (view.left ? right : left)
+        }));
+        template_u1.slot(element_03uclqu13, control({ label: 'Collapse all folders', onclick: api.collapseAll, sprite: collapse }));
+        template_u1.slot(element_03uclqu14, control({
+            disabled: () => !view.canUndo || view.busy,
+            label: 'Undo file operation',
+            onclick: () => {
+                void model.undoFiles();
+            },
+            sprite: undo
+        }));
+        template_u1.slot(element_03uclqu15, control({ label: label('Go to file', ['Mod', 'P']), onclick: () => quickOpen(), sprite: magnifier }));
+        template_u1.slot(element_03uclqu16, input({
+            'aria-label': 'Search files',
+            autocomplete: 'off',
+            class: 'code-workspace-search',
+            onconnect: (element) => {
+                searchField = element;
+            },
+            oninput: (event) => search(event.target.value),
+            placeholder: 'Search files',
+            spellcheck: false,
+            type: 'search',
+            value: () => view.search
+        }), 2);
+        template_u1.slot(element_03uclqu17, fileTree({
+            class: 'code-workspace-files',
+            compact: true,
+            controller: (value) => {
+                tree = value;
+                value.search(view.search);
+            },
+            decorations,
+            editor: treeEditor,
+            elements: treeStore,
+            empty: () => template_03uclqu1n(),
+            find: 'filter',
+            menu: (elements, position) => {
+                if (!elements.length || !actions) {
+                    return;
+                }
+                write(target, { element: elements[0], paths: elements.map((element) => element.id) });
+                flush();
+                actions.open(position);
+            },
+            open: (element) => {
+                void model.open(element.id);
+            },
+            operations: {
+                delete: (elements) => {
+                    void model.delete(elements.map((element) => element.id));
+                }
+            },
+            preview: 'immediate',
+            rename: async (element, value) => {
+                let parent = element.id.includes('/') ? element.id.slice(0, element.id.lastIndexOf('/') + 1) : '';
+                if (!(await model.rename(element.id, parent + value))) {
+                    throw new Error(`Workspace: ${model.state.status}`);
+                }
+            },
+            searched: (query) => {
+                view.search = query;
+            },
+            state: treeState,
+            typing: 'typeahead'
+        }));
+        new template_u1.EffectSlot(element_03uclqu18, () => {
+            if (view.error) {
+                return (() => {
+                    let root_03uclqu1o = template_03uclqu1p(), element_03uclqu1q = root_03uclqu1o.firstChild.firstChild, element_03uclqu1r = root_03uclqu1o.firstChild.firstElementChild;
+                    template_u1.slot(element_03uclqu1q, view.error);
+                    template_u1.delegate(element_03uclqu1r, 'click', () => {
+                        void model.refresh();
+                    });
+                    return root_03uclqu1o;
+                })();
+            }
+            return !view.loaded && template_03uclqu1s();
+        }, 2);
+        new template_u1.EffectSlot(element_03uclqu10, () => view.collapsed && !view.ready && (() => {
+            let root_03uclqu1t = template_03uclqu1u(), element_03uclqu1v = root_03uclqu1t.firstChild;
+            template_u1.delegate(element_03uclqu1v, 'click', reach);
+            template_u1.on(element_03uclqu1v, 'focus', reach);
+            return root_03uclqu1t;
+        })(), 2);
+        template_u1.slot(element_03uclqu1a, highlight({ class: 'code-workspace-tabs-highlight', line: 'bottom' }));
+        new template_u1.EffectSlot(element_03uclqu1b, () => read(tabs).map(tab), 2);
+        new template_u1.EffectSlot(element_03uclqu1c, crumbs);
+        template_u1.slot(element_03uclqu1d, control({
+            disabled: () => !view.tabs || view.busy,
+            label: label('Save file', ['Mod', 'S']),
+            onclick: () => {
+                void model.save();
+            },
+            sprite: save
+        }));
+        template_u1.slot(element_03uclqu1e, control({
+            active: () => view.wrap,
+            label: () => (view.wrap ? 'Disable wrap' : 'Wrap long lines'),
+            onclick: api.toggleWrap,
+            sprite: wrap
+        }));
+        template_u1.slot(element_03uclqu1f, control({
+            active: () => view.whitespace,
+            label: () => (view.whitespace ? 'Hide whitespace' : 'Show whitespace'),
+            onclick: api.toggleWhitespace,
+            sprite: whitespace
+        }));
+        template_u1.slot(element_03uclqu1g, sidebar({
+            'aria-label': () => (view.explorerOpen ? 'Hide file explorer' : 'Show file explorer'),
+            class: 'code-workspace-control',
+            onclick: api.toggleExplorer,
+            open: () => view.explorerOpen,
+            side: () => (view.left ? 'left' : 'right'),
+            title: () => (view.explorerOpen ? 'Hide file explorer' : 'Show file explorer')
+        }), 2);
+        new template_u1.EffectSlot(element_03uclqu1h, pane, 1);
+        new template_u1.EffectSlot(element_03uclqu1i, () => view.cwd, 1);
+        new template_u1.EffectSlot(element_03uclqu1j, () => view.position, 1);
+        new template_u1.EffectSlot(element_03uclqu1k, () => view.status, 1);
+        template_u1.slot(element_03uclqu1l, tooltip.context({
+            class: 'code-workspace-menu',
+            controller: (value) => {
+                actions = value;
+            },
+            items,
+            [tooltip.context.panel]: { 'aria-label': 'File actions', class: 'code-workspace-menu-panel' }
+        }, ''));
+        template_u1.slot(element_03uclqu1m, command({
+            commands: () => read(files).map((path) => ({ group: 'Files', id: path, label: path })),
+            hotkey: [],
+            label: 'Go to file',
+            limit: 50,
+            match: fuzzy,
+            onrun: choose,
+            placeholder: 'Go to file',
+            render: results,
+            state: palette,
+            trigger: false,
+            [command.dialog]: { 'aria-label': 'Go to file' }
+        }));
+        template_u1.slot(element_03uclquz, overlay({
+            'aria-labelledby': `${id}-confirm`,
+            class: 'card overlay--alert code-workspace-confirm',
+            state: dialog
+        }, (() => {
+            let root_03uclqu1w = template_03uclqu1x(), element_03uclqu1y = root_03uclqu1w.firstChild, element_03uclqu1z = element_03uclqu1y.nextSibling, element_03uclqu20 = element_03uclqu1z.nextSibling, element_03uclqu21 = element_03uclqu20.nextSibling.firstElementChild, element_03uclqu22 = element_03uclqu21.nextElementSibling, element_03uclqu23 = element_03uclqu22.nextElementSibling;
+            new template_u1.EffectSlot(element_03uclqu1z, () => read(request)?.dirty.join(', '), 1);
+            new template_u1.EffectSlot(element_03uclqu20, () => (read(request)?.kind === 'delete'
+                ? 'Save before deleting, discard the drafts, or cancel deletion.'
+                : 'Save the drafts, discard them, or keep them open.'), 1);
+            template_u1.delegate(element_03uclqu23, 'click', () => confirmation?.resolve('save'));
+            template_u1.delegate(element_03uclqu22, 'click', () => confirmation?.resolve('discard'));
+            template_u1.delegate(element_03uclqu21, 'click', () => confirmation?.resolve('cancel'));
+            template_u1.setProperty(element_03uclqu1y, 'id', template_u1.interpolate([(id), "-confirm"]));
+            return root_03uclqu1w;
+        })()), 2);
+        template_u1.setList(element_03uclqu1k, 'class', () => view.statusError && 'code-workspace-status-message--error');
+        template_u1.setProperty(element_03uclqu1h, 'id', template_u1.interpolate([(id), "-panel"]));
+        template_u1.setProperty(element_03uclqu1h, 'aria-labelledby', () => (read(activeId) ? `${id}-tab-${read(activeId)}` : undefined));
+        template_u1.on(element_03uclqu19, 'pointerenter', () => peek(false));
+        template_u1.setProperty(element_03uclqu11, 'inert', () => view.collapsed && !view.ready);
+        template_u1.on(element_03uclqu10, 'focusin', () => peek(true, true));
+        template_u1.on(element_03uclqu10, 'pointerenter', (event) => {
+            if (!event.currentTarget.getAnimations().length) {
+                peek(true);
+            }
+        });
+        template_u1.delegate(element_03uclqu10, 'transitionend', (event) => {
+            if (event.target === event.currentTarget && event.propertyName === 'translate') {
+                view.ready = view.peek;
+            }
+        });
+        template_u1.setProperties(element_03uclquz, attributes);
+        template_u1.setList(element_03uclquz, 'class', [
+            () => view.collapsed && 'code-workspace--collapsed',
+            () => view.left && 'code-workspace--left',
+            () => view.peek && 'code-workspace--peek',
+            () => view.compact && view.tabs && view.explorerOpen && 'code-workspace--stacked',
+            () => view.tabs && 'code-workspace--tabs'
+        ]);
+        template_u1.onconnect(element_03uclquz, connect);
+        template_u1.on(element_03uclquz, 'pointerenter', () => {
+            hovered = true;
+        });
+        template_u1.on(element_03uclquz, 'pointerleave', () => {
+            hovered = false;
+        });
+        return root_03uclqux;
+    })();
+};
+export default component(workspace);
+export { EditorWorkspaceModel, isWorkspaceCodeEditor };