@esportsplus/ui 0.57.0 → 0.58.0

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

@@ -11,11 +11,18 @@ 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 scrollbar from '../../../modifiers/scrollbar/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 { label as chordLabel, declare, merge, sequence } from './keybindings.js';
 import { dirty, EditorWorkspaceModel } from './model.js';
+import navigate from './navigate.js';
+import hosted from './session.js';
+import shortcuts, { OPEN, PALETTE } from './shortcuts.js';
+import statusbar from './statusbar.js';
+import tabStrip from './strip.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';
@@ -28,20 +35,20 @@ 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 `);
+const template_03uclqu6 = template_u1.template(`<div class='code-workspace-empty'> Open a file from the explorer or press <span class='code-workspace-keys'>`);
+const template_03uclqu9 = template_u1.template(`<kbd class='button button--kbd'>`);
+const template_03uclquc = template_u1.template(`<!--$--><!--$-->`);
+const template_03uclqug = template_u1.template(`<div class='command-group' role='group'><div class='command-group-label'>`);
+const template_03uclquk = template_u1.template(`<div class='command-option'><!--$-->`);
+const template_03uclquo = 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_03uclquv = template_u1.template(`<span aria-label='Unsaved changes' class='code-workspace-tab-dirty' role='img'>`);
+const template_03uclqux = template_u1.template(`<button class='button code-workspace-control' type='button'>`);
+const template_03uclqu10 = 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' 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><div class='code-workspace-layer' popover='manual'><!--$--><!--$--></div><!--$--><!--$-->`);
+const template_03uclqu1t = template_u1.template(`<div class='code-workspace-notice'>No files in this workspace`);
+const template_03uclqu1v = 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_03uclqu1y = template_u1.template(`<div class='code-workspace-notice code-workspace-notice--cover' role='status'>Loading…`);
+const template_03uclqu20 = template_u1.template(`<button aria-label='Peek file explorer' class='code-workspace-edge' type='button'>`);
+const template_03uclqu23 = 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() {
@@ -55,6 +62,18 @@ class ReactiveObject_03uclqu0 extends reactivity_u0.ReactiveObject {
     }
 }
 class ReactiveObject_03uclqu1 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_03uclqu2 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #index = this[reactivity_u0.SIGNAL](0);
     #query = this[reactivity_u0.SIGNAL]('');
@@ -88,7 +107,7 @@ class ReactiveObject_03uclqu1 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#tab, _v3);
     }
 }
-class ReactiveObject_03uclqu2 extends reactivity_u0.ReactiveObject {
+class ReactiveObject_03uclqu3 extends reactivity_u0.ReactiveObject {
     #selected = this[reactivity_u0.SIGNAL]('');
     #selection;
     constructor(_p0) {
@@ -108,7 +127,7 @@ class ReactiveObject_03uclqu2 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#selection, _v1);
     }
 }
-class ReactiveObject_03uclqu3 extends reactivity_u0.ReactiveObject {
+class ReactiveObject_03uclqu4 extends reactivity_u0.ReactiveObject {
     #busy = this[reactivity_u0.SIGNAL](false);
     #canUndo = this[reactivity_u0.SIGNAL](false);
     #collapsed = this[reactivity_u0.SIGNAL](false);
@@ -257,15 +276,15 @@ 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;
+        let root_03uclquw = template_03uclqux(), element_03uclquy = root_03uclquw.firstChild;
+        new template_u1.EffectSlot(element_03uclquy, () => icon({ 'aria-hidden': 'true', class: 'code-workspace-control-icon' }, typeof sprite === 'string' ? sprite : sprite()), 1);
+        template_u1.setProperty(element_03uclquy, 'aria-label', label);
+        template_u1.setProperty(element_03uclquy, 'aria-pressed', active && (() => (active() ? 'true' : 'false')));
+        template_u1.setList(element_03uclquy, 'class', active && (() => active() && '--active'));
+        template_u1.setProperty(element_03uclquy, 'disabled', disabled);
+        template_u1.delegate(element_03uclquy, 'click', onclick);
+        template_u1.setProperty(element_03uclquy, 'title', label);
+        return root_03uclquw;
     })();
 }
 function keys(names) {
@@ -306,11 +325,41 @@ function reconcile(store, entries) {
     }
 }
 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 }) => {
+const workspace = ({ addons, controller: receive, cwd = '', decorations: provided, 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();
+    let actions, active = signal(undefined), activeId = signal(0), bindings = signal({}), chords = sequence({
+        accept: (event) => !confirmation && !!container?.contains(event.target),
+        actions: { [OPEN[1]]: () => openKeybindings() },
+        apple: mac(),
+        onpending: (pending) => {
+            let text = `${chordLabel(OPEN[0], mac())} was pressed; waiting for the next key…`;
+            if (pending) {
+                model.status(text);
+            }
+            else if (model.state.status === text) {
+                model.status('');
+            }
+        },
+        prefix: OPEN[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}`, keyboard = new ReactiveObject_03uclqu1(), model = supplied ?? new EditorWorkspaceModel(host, cwd), mount, palette = new ReactiveObject_03uclqu2('all'), release, request = signal(undefined), returnFocus, revealed = 0, searchField, settle, shown = signal(undefined), statusBar = statusbar(model, () => navigation.go('problem')), strip = tabStrip({
+        isFile: (path) => treeStore.get(path)?.type === 'file',
+        model,
+        remount,
+        reveal: (path) => {
+            peek(true, true);
+            treeState.selected = '';
+            flush();
+            treeState.selected = path;
+        }
+    }), tabs = signal([]), tabsKey = '', target = signal(undefined), tree, treeEditor = new FileTreeEditor(), treeState = new ReactiveObject_03uclqu3(new Set()), treeStore = new FileTreeElements([]), view = new ReactiveObject_03uclqu4();
+    let hosting = hosted(model, () => (mount?.controller ? { controller: mount.controller, tab: mount.tab } : undefined)), navigation = navigate({
+        bindings: () => (mount ? settings(mount.tab, mount.tab.path).keybindings : model.state.preferences.keybindings),
+        hosting,
+        model,
+        tree: () => tree
+    });
     function ask(next) {
         confirmation?.resolve('cancel');
         returnFocus = container?.ownerDocument.activeElement ?? undefined;
@@ -342,6 +391,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
     function attach(current) {
         let controller = current.controller;
         detach(current);
+        statusBar.attach(controller);
         write(current.path, current.tab.path);
         if (!addons || !controller) {
             return;
@@ -372,7 +422,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             write(files, paths);
         }
         for (let i = 0, n = list.length; i < n; i++) {
-            key += `${list[i].id}:${list[i].path}\n`;
+            key += `${list[i].id}:${list[i].path}:${list[i].pinned}:${list[i].preview}\n`;
         }
         if (key !== tabsKey) {
             tabsKey = key;
@@ -380,6 +430,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
         }
         write(active, current);
         write(activeId, current?.id ?? 0);
+        write(bindings, state.preferences.keybindings);
         show(current);
         view.busy = state.busy > 0;
         view.canUndo = state.canUndoFiles;
@@ -408,7 +459,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             view.peek = false;
             view.ready = false;
         }
-        let path = current?.path ?? '';
+        let path = current && !current.compare ? current.path : '';
         if (view.path !== path) {
             view.path = path;
             treeState.selected = path;
@@ -420,6 +471,10 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
         reveal();
     }
     function choose(entry) {
+        if (entry.group === PALETTE.group && entry.id === PALETTE.id) {
+            settle = openKeybindings;
+            return;
+        }
         let opened = model.open(entry.id);
         settle = () => {
             void opened.then(focusEditor);
@@ -433,7 +488,9 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
                 view.compact = entry.contentRect.width <= COMPACT_WIDTH;
             });
             bridge();
+            element.setAttribute('aria-keyshortcuts', declare(element.getAttribute('aria-keyshortcuts'), OPEN[0]));
             element.ownerDocument.addEventListener('keydown', keydown, { signal: listening.signal });
+            element.ownerDocument.addEventListener('keydown', chords.keydown, { capture: true, signal: listening.signal });
             element.addEventListener('close', () => {
                 let next = settle;
                 settle = undefined;
@@ -441,8 +498,12 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             }, { capture: true, signal: listening.signal });
             model.setConfirmation(ask);
             onCleanup(model.subscribe(bridge));
+            onCleanup(hosting.connect(element));
+            onCleanup(navigation.connect(element));
+            onCleanup(statusBar.connect(element));
             onCleanup(() => {
                 listening.abort();
+                chords.cancel();
                 unobserve();
                 confirmation?.resolve('cancel');
                 model.setConfirmation(undefined);
@@ -455,7 +516,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             });
             effect(() => {
                 let tab = read(active);
-                if (!tab) {
+                if (!tab || tab.compare) {
                     view.position = '';
                     return;
                 }
@@ -475,7 +536,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
                 if (path && treeStore.get(path)?.type === 'file') {
                     untrack(() => {
                         if (path !== model.state.active?.path) {
-                            void model.open(path);
+                            void model.open(path, undefined, undefined, true);
                         }
                     });
                 }
@@ -493,7 +554,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
                     untrack(() => confirmation?.resolve('cancel'));
                 }
             });
-            void model.start();
+            void hosting.restore();
             return dispose;
         });
     }
@@ -613,17 +674,21 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             treeState.selected = path;
         }
     }
+    function openKeybindings() {
+        palette.active = false;
+        keyboard.active = true;
+    }
     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;
+                let root_03uclqu5 = template_03uclqu6(), element_03uclqu7 = root_03uclqu5.firstChild.firstElementChild;
+                template_u1.slot(element_03uclqu7, keys(['Mod', 'P']).map((key) => {
+                    let root_03uclqu8 = template_03uclqu9(), element_03uclqua = root_03uclqu8.firstChild;
+                    template_u1.slot(element_03uclqua, key, 1);
+                    return root_03uclqu8;
                 }), 1);
-                return root_03uclqu4;
+                return root_03uclqu5;
             })();
         }
         let current = next.released ? { editor: next.editor, path: signal(next.tab.path), released: false, tab: next.tab } : next, bound = {
@@ -685,30 +750,40 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
     }
     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;
+            let root_03uclqub = template_03uclquc(), element_03uclqud = root_03uclqub.firstChild, element_03uclque = element_03uclqud.nextSibling;
+            template_u1.slot(element_03uclqud, highlight({ class: 'command-highlight', hover: false, target: '.command-option' }));
+            template_u1.slot(element_03uclque, groups.map((group) => {
+                let root_03uclquf = template_03uclqug(), element_03uclquh = root_03uclquf.firstChild, element_03uclqui = element_03uclquh.firstElementChild;
+                template_u1.slot(element_03uclqui, group.label, 1);
+                template_u1.slot(element_03uclquh, group.items.map((item) => {
+                    let root_03uclquj = template_03uclquk(), element_03uclqul = root_03uclquj.firstChild, element_03uclqum = element_03uclqul.firstChild;
+                    template_u1.slot(element_03uclqum, item.command?.icon
+                        ? icon({ 'aria-hidden': 'true', class: 'code-workspace-command-icon' }, item.command.icon)
+                        : fileTreeIcon({ name: name(item.id), type: 'file' }, false));
+                    template_u1.slot(element_03uclqul, item.content, 2);
+                    template_u1.setProperties(element_03uclqul, item.attributes);
+                    return root_03uclquj;
                 }), 2);
-                template_u1.setProperty(element_03uclquh, 'id', group.id);
-                template_u1.setProperty(element_03uclqug, 'aria-labelledby', group.id);
-                return root_03uclque;
+                template_u1.setProperty(element_03uclqui, 'id', group.id);
+                template_u1.setProperty(element_03uclquh, 'aria-labelledby', group.id);
+                return root_03uclquf;
             }));
-            return root_03uclqua;
+            return root_03uclqub;
         })();
     }
     function remember(current) {
         let element = current.controller.scroller;
         current.tab.scroll = { left: element.scrollLeft, top: element.scrollTop };
+        hosting.remember(current.tab, current.controller);
+    }
+    function remount() {
+        if (mount) {
+            unmount(mount);
+        }
+        show(model.state.active);
     }
     function restore(current) {
+        hosting.shown(current.tab, current.controller);
         let element = current.controller.scroller, { left, top } = current.tab.scroll, tab = current.tab;
         element.scrollLeft = left;
         element.scrollTop = top;
@@ -751,11 +826,18 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
         return [...treeState.selection].filter((path) => treeStore.get(path));
     }
     function settings(tab, path) {
+        let options = typeof editorOptions === 'function' ? editorOptions(tab) : editorOptions;
         return {
             fold: true,
             minimap: true,
-            ...(typeof editorOptions === 'function' ? editorOptions(tab) : editorOptions),
+            onMerge: () => {
+                void strip.merge(tab);
+            },
+            ...options,
+            ...statusBar.options(tab),
+            ...(model.host.baseline ? { baseline: hosting.baseline(path) } : {}),
             fileName: path,
+            keybindings: merge(options?.keybindings, read(bindings)),
             label: path,
             whitespace: view.whitespace,
             wrap: view.wrap
@@ -765,7 +847,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
         if (mount?.tab === tab) {
             return;
         }
-        let editor = tab && (editorFor?.(tab) ?? codeEditor);
+        let editor = tab && (strip.editor(tab) ?? editorFor?.(tab) ?? codeEditor);
         if (tab && mount?.controller?.setDocument && mount.editor === editor) {
             retarget(mount, tab);
             return;
@@ -777,38 +859,39 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
         write(shown, mount);
     }
     function tab(entry) {
-        let chosen = () => signal.selector(activeId, entry.id), file = name(entry.path);
+        let chosen = () => signal.selector(activeId, entry.id), file = strip.label(entry);
         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) => {
+            let root_03uclqun = template_03uclquo(), element_03uclqup = root_03uclqun.firstChild, element_03uclquq = element_03uclqup.firstChild, element_03uclqur = element_03uclqup.firstElementChild, element_03uclqus = element_03uclquq.nextSibling.nextSibling, element_03uclqut = element_03uclqus.nextSibling, element_03uclquu = element_03uclqur.nextElementSibling;
+            template_u1.slot(element_03uclquq, fileTreeIcon({ name: file, type: 'file' }, false));
+            template_u1.slot(element_03uclqur, file, 1);
+            template_u1.slot(element_03uclqus, strip.pin(entry));
+            new template_u1.EffectSlot(element_03uclqut, () => read(flag(entry)) && template_03uclquv());
+            template_u1.slot(element_03uclquu, icon({ 'aria-hidden': 'true', class: 'code-workspace-tab-close-icon' }, close), 1);
+            template_u1.setProperty(element_03uclquu, 'aria-label', template_u1.interpolate(["Close ", (file)]));
+            template_u1.setProperty(element_03uclquu, 'title', label('Close', ['Mod', 'W']));
+            template_u1.delegate(element_03uclquu, '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) => {
+            template_u1.setProperty(element_03uclqup, 'aria-controls', template_u1.interpolate([(id), "-panel"]));
+            template_u1.setProperty(element_03uclqup, 'id', template_u1.interpolate([(id), "-tab-", (entry.id)]));
+            template_u1.setProperty(element_03uclqup, 'title', strip.title(entry));
+            template_u1.setProperty(element_03uclqup, 'aria-selected', () => (chosen() ? 'true' : 'false'));
+            template_u1.setList(element_03uclqup, 'class', () => chosen() && '--active');
+            template_u1.delegate(element_03uclqup, 'auxclick', (event) => {
                 if (event.button === 1) {
                     event.preventDefault();
                     void model.close(entry.path);
                 }
             });
-            template_u1.delegate(element_03uclquo, 'click', () => {
+            template_u1.delegate(element_03uclqup, 'click', () => {
                 model.activate(entry);
                 focusEditor();
             });
-            template_u1.onconnect(element_03uclquo, (element) => {
+            template_u1.onconnect(element_03uclqup, (element) => {
                 elements.set(entry, element);
             });
-            template_u1.delegate(element_03uclquo, 'keydown', (event) => {
+            template_u1.delegate(element_03uclqup, 'keydown', (event) => {
                 let list = untrack(() => read(tabs)), at = list.indexOf(entry), next;
                 if (event.key === 'ArrowRight') {
                     next = list[(at + 1) % list.length];
@@ -834,8 +917,9 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
                     elements.get(next)?.focus();
                 }
             });
-            template_u1.setProperty(element_03uclquo, 'tabindex', () => (chosen() ? 0 : -1));
-            return root_03uclqum;
+            template_u1.setProperty(element_03uclqup, 'tabindex', () => (chosen() ? 0 : -1));
+            template_u1.setProperties(element_03uclqup, strip.attributes(entry));
+            return root_03uclqun;
         })();
     }
     function toggle(key) {
@@ -851,6 +935,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
         current.released = true;
         if (mount === current) {
             mount = undefined;
+            statusBar.attach(undefined);
         }
         if (controller?.host.isConnected) {
             remember(current);
@@ -863,13 +948,16 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
         delete: (paths = selected()) => model.delete(paths),
         dispose: () => {
             release?.();
+            hosting.dispose();
             model.dispose();
         },
         get editor() {
             return mount?.controller;
         },
         focus: focusEditor,
+        keybindings: openKeybindings,
         model,
+        navigate: (kind, backward) => navigation.go(kind, backward),
         open: (path, line, column) => model.open(path, line, column),
         quickOpen,
         refresh: () => model.refresh(),
@@ -906,6 +994,7 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
                 void model.copyPath(paths()[0]);
             }
         },
+        ...strip.items(() => paths()),
         ...(model.host.actions ?? []).map((action) => ({
             danger: action.danger,
             hidden: () => !paths().length || (!!action.visible && !action.visible(paths())),
@@ -926,14 +1015,14 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
     ], 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({
+        let root_03uclquz = template_03uclqu10(), element_03uclqu11 = root_03uclquz.firstChild, element_03uclqu12 = element_03uclqu11.firstElementChild, element_03uclqu13 = element_03uclqu12.firstElementChild, element_03uclqu14 = element_03uclqu13.firstElementChild.firstChild, element_03uclqu15 = element_03uclqu14.nextSibling, element_03uclqu16 = element_03uclqu15.nextSibling, element_03uclqu17 = element_03uclqu16.nextSibling, element_03uclqu18 = element_03uclqu13.firstElementChild, element_03uclqu19 = element_03uclqu18.nextElementSibling.firstChild, element_03uclqu1a = element_03uclqu18.nextElementSibling, element_03uclqu1b = element_03uclqu12.nextElementSibling, element_03uclqu1c = element_03uclqu1b.firstElementChild, element_03uclqu1d = element_03uclqu1c.firstChild, element_03uclqu1e = element_03uclqu1c.nextElementSibling.firstChild, element_03uclqu1f = element_03uclqu1c.nextElementSibling.firstElementChild.firstChild, element_03uclqu1g = element_03uclqu1f.nextSibling, element_03uclqu1h = element_03uclqu1g.nextSibling, element_03uclqu1i = element_03uclqu1c.nextElementSibling.firstElementChild, element_03uclqu1j = element_03uclqu1c.nextElementSibling.nextElementSibling, element_03uclqu1k = element_03uclqu1b.nextElementSibling.firstElementChild, element_03uclqu1l = element_03uclqu1k.nextElementSibling, element_03uclqu1m = element_03uclqu1b.nextElementSibling.firstChild.nextSibling.nextSibling, element_03uclqu1n = element_03uclqu1l.nextElementSibling, element_03uclqu1o = element_03uclqu1b.nextElementSibling.nextElementSibling, element_03uclqu1p = element_03uclqu1o.firstChild, element_03uclqu1q = element_03uclqu1p.nextSibling, element_03uclqu1r = element_03uclqu11.firstChild.nextSibling.nextSibling.nextSibling.nextSibling, element_03uclqu1s = element_03uclqu1r.nextSibling;
+        template_u1.slot(element_03uclqu14, 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({
+        template_u1.slot(element_03uclqu15, control({ label: 'Collapse all folders', onclick: api.collapseAll, sprite: collapse }));
+        template_u1.slot(element_03uclqu16, control({
             disabled: () => !view.canUndo || view.busy,
             label: 'Undo file operation',
             onclick: () => {
@@ -941,8 +1030,8 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             },
             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({
+        template_u1.slot(element_03uclqu17, control({ label: label('Go to file', ['Mod', 'P']), onclick: () => quickOpen(), sprite: magnifier }));
+        template_u1.slot(element_03uclqu18, input({
             'aria-label': 'Search files',
             autocomplete: 'off',
             class: 'code-workspace-search',
@@ -955,17 +1044,18 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             type: 'search',
             value: () => view.search
         }), 2);
-        template_u1.slot(element_03uclqu17, fileTree({
+        new template_u1.EffectSlot(element_03uclqu19, () => hosting.ready() && untrack(() => fileTree({
             class: 'code-workspace-files',
             compact: true,
             controller: (value) => {
                 tree = value;
                 value.search(view.search);
             },
-            decorations,
+            decorations: [hosting.marks, ...[provided ?? []].flat(), decorations],
             editor: treeEditor,
             elements: treeStore,
-            empty: () => template_03uclqu1n(),
+            empty: () => template_03uclqu1t(),
+            export: hosting.export,
             find: 'filter',
             menu: (elements, position) => {
                 if (!elements.length || !actions) {
@@ -975,13 +1065,14 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
                 flush();
                 actions.open(position);
             },
-            open: (element) => {
-                void model.open(element.id);
+            open: (element, open) => {
+                void model.open(element.id, undefined, undefined, open.mode === 'preview');
             },
             operations: {
                 delete: (elements) => {
                     void model.delete(elements.map((element) => element.id));
-                }
+                },
+                import: hosting.import
             },
             preview: 'immediate',
             rename: async (element, value) => {
@@ -993,52 +1084,53 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             searched: (query) => {
                 view.search = query;
             },
+            snapshot: hosting.explorer,
             state: treeState,
             typing: 'typeahead'
-        }));
-        new template_u1.EffectSlot(element_03uclqu18, () => {
+        })));
+        new template_u1.EffectSlot(element_03uclqu1a, () => {
             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', () => {
+                    let root_03uclqu1u = template_03uclqu1v(), element_03uclqu1w = root_03uclqu1u.firstChild.firstChild, element_03uclqu1x = root_03uclqu1u.firstChild.firstElementChild;
+                    template_u1.slot(element_03uclqu1w, view.error);
+                    template_u1.delegate(element_03uclqu1x, 'click', () => {
                         void model.refresh();
                     });
-                    return root_03uclqu1o;
+                    return root_03uclqu1u;
                 })();
             }
-            return !view.loaded && template_03uclqu1s();
+            return !view.loaded && template_03uclqu1y();
         }, 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;
+        new template_u1.EffectSlot(element_03uclqu12, () => view.collapsed && !view.ready && (() => {
+            let root_03uclqu1z = template_03uclqu20(), element_03uclqu21 = root_03uclqu1z.firstChild;
+            template_u1.delegate(element_03uclqu21, 'click', reach);
+            template_u1.on(element_03uclqu21, 'focus', reach);
+            return root_03uclqu1z;
         })(), 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({
+        template_u1.slot(element_03uclqu1d, highlight({ class: 'code-workspace-tabs-highlight', line: 'bottom' }));
+        new template_u1.EffectSlot(element_03uclqu1c, () => read(tabs).map(tab), 2);
+        new template_u1.EffectSlot(element_03uclqu1e, crumbs);
+        new template_u1.EffectSlot(element_03uclqu1f, statusBar.save(() => control({
             disabled: () => !view.tabs || view.busy,
             label: label('Save file', ['Mod', 'S']),
             onclick: () => {
                 void model.save();
             },
             sprite: save
-        }));
-        template_u1.slot(element_03uclqu1e, control({
+        })));
+        template_u1.slot(element_03uclqu1g, control({
             active: () => view.wrap,
             label: () => (view.wrap ? 'Disable wrap' : 'Wrap long lines'),
             onclick: api.toggleWrap,
             sprite: wrap
         }));
-        template_u1.slot(element_03uclqu1f, control({
+        template_u1.slot(element_03uclqu1h, control({
             active: () => view.whitespace,
             label: () => (view.whitespace ? 'Hide whitespace' : 'Show whitespace'),
             onclick: api.toggleWhitespace,
             sprite: whitespace
         }));
-        template_u1.slot(element_03uclqu1g, sidebar({
+        template_u1.slot(element_03uclqu1i, sidebar({
             'aria-label': () => (view.explorerOpen ? 'Hide file explorer' : 'Show file explorer'),
             class: 'code-workspace-control',
             onclick: api.toggleExplorer,
@@ -1046,11 +1138,12 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             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({
+        new template_u1.EffectSlot(element_03uclqu1j, pane, 1);
+        new template_u1.EffectSlot(element_03uclqu1k, () => view.cwd, 1);
+        new template_u1.EffectSlot(element_03uclqu1l, () => view.position, 1);
+        new template_u1.EffectSlot(element_03uclqu1m, statusBar.items);
+        new template_u1.EffectSlot(element_03uclqu1n, () => view.status, 1);
+        template_u1.slot(element_03uclqu1p, tooltip.context({
             class: 'code-workspace-menu',
             controller: (value) => {
                 actions = value;
@@ -1058,8 +1151,10 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             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 })),
+        new template_u1.EffectSlot(element_03uclqu1q, statusBar.menu);
+        template_u1.slot(element_03uclqu1o, strip.menu(), 2);
+        template_u1.slot(element_03uclqu1r, command({
+            commands: () => [PALETTE, ...read(files).map((path) => ({ group: 'Files', id: path, label: path }))],
             hotkey: [],
             label: 'Go to file',
             limit: 50,
@@ -1071,54 +1166,65 @@ const workspace = ({ addons, controller: receive, cwd = '', editor: editorFor, e
             trigger: false,
             [command.dialog]: { 'aria-label': 'Go to file' }
         }));
-        template_u1.slot(element_03uclquz, overlay({
+        template_u1.slot(element_03uclqu1s, shortcuts({
+            apple: mac(),
+            id,
+            keybindings: () => read(bindings),
+            onchange: (next) => model.setPreferences({ keybindings: next }),
+            state: keyboard
+        }));
+        template_u1.slot(element_03uclqu11, 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'
+            let root_03uclqu22 = template_03uclqu23(), element_03uclqu24 = root_03uclqu22.firstChild, element_03uclqu25 = element_03uclqu24.nextSibling, element_03uclqu26 = element_03uclqu25.nextSibling, element_03uclqu27 = element_03uclqu26.nextSibling.firstElementChild, element_03uclqu28 = element_03uclqu27.nextElementSibling, element_03uclqu29 = element_03uclqu28.nextElementSibling;
+            new template_u1.EffectSlot(element_03uclqu25, () => read(request)?.dirty.join(', '), 1);
+            new template_u1.EffectSlot(element_03uclqu26, () => (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;
+            template_u1.delegate(element_03uclqu29, 'click', () => confirmation?.resolve('save'));
+            template_u1.delegate(element_03uclqu28, 'click', () => confirmation?.resolve('discard'));
+            template_u1.delegate(element_03uclqu27, 'click', () => confirmation?.resolve('cancel'));
+            template_u1.setProperty(element_03uclqu24, 'id', template_u1.interpolate([(id), "-confirm"]));
+            return root_03uclqu22;
         })()), 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) => {
+        template_u1.onconnect(element_03uclqu1o, (element) => {
+            element.showPopover();
+        });
+        template_u1.setList(element_03uclqu1n, 'class', () => view.statusError && 'code-workspace-status-message--error');
+        template_u1.setProperty(element_03uclqu1j, 'id', template_u1.interpolate([(id), "-panel"]));
+        template_u1.setProperty(element_03uclqu1j, 'aria-labelledby', () => (read(activeId) ? `${id}-tab-${read(activeId)}` : undefined));
+        template_u1.setProperties(element_03uclqu1c, scrollbar());
+        template_u1.on(element_03uclqu1b, 'pointerenter', () => peek(false));
+        template_u1.setProperty(element_03uclqu13, 'inert', () => view.collapsed && !view.ready);
+        template_u1.on(element_03uclqu12, 'focusin', () => peek(true, true));
+        template_u1.on(element_03uclqu12, 'pointerenter', (event) => {
             if (!event.currentTarget.getAnimations().length) {
                 peek(true);
             }
         });
-        template_u1.delegate(element_03uclqu10, 'transitionend', (event) => {
+        template_u1.delegate(element_03uclqu12, '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', [
+        template_u1.setProperties(element_03uclqu11, attributes);
+        template_u1.setList(element_03uclqu11, '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', () => {
+        template_u1.onconnect(element_03uclqu11, connect);
+        template_u1.on(element_03uclqu11, 'pointerenter', () => {
             hovered = true;
         });
-        template_u1.on(element_03uclquz, 'pointerleave', () => {
+        template_u1.on(element_03uclqu11, 'pointerleave', () => {
             hovered = false;
         });
-        return root_03uclqux;
+        return root_03uclquz;
     })();
 };
 export default component(workspace);