@esportsplus/ui 0.57.0 → 0.58.0

package/scripts/workspace-tabs.test.mjs

@@ -0,0 +1,142 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import './resolve.mjs';
+const { EditorWorkspaceModel, dirty } = await import('../src/components/editor/workspace/model.ts');
+const { closable, compareKey, order, place, sides } = await import('../src/components/editor/workspace/tabs.ts');
+const { createMemoryWorkspaceHost } = await import('../docs/src/examples/code-editor/fixtures/workspace.ts');
+async function fixture(files = { 'a.ts': 'a', 'b.ts': 'b', 'c.ts': 'c', 'd.ts': 'd' }) {
+    const host = createMemoryWorkspaceHost(files),
+        model = new EditorWorkspaceModel(host, '/project');
+    await model.start();
+    return { host, model };
+}
+const paths = (model) => model.state.tabs.map((tab) => tab.path);
+const stub = (path, fields = {}) => ({ document: { value: '' }, missing: false, path, pinned: false, preview: false, saved: '', ...fields });
+
+test('a preview takes the last preview tab\'s place and pinned tabs sort first, stably', () => {
+    const tabs = [stub('a'), stub('b', { preview: true }), stub('c')];
+    assert.equal(place(tabs, stub('d', { preview: true })).path, 'b');
+    assert.deepEqual(tabs.map((tab) => tab.path), ['a', 'd', 'b', 'c']);
+    assert.equal(place(tabs, stub('e')), undefined);
+    assert.equal(tabs.at(-1).path, 'e');
+    const list = [stub('a'), stub('b', { pinned: true }), stub('c'), stub('d', { pinned: true })];
+    order(list);
+    assert.deepEqual(list.map((tab) => tab.path), ['b', 'd', 'a', 'c']);
+});
+
+test('bulk closes spare pinned tabs, the tab asked from, and unsaved or missing drafts for close saved', () => {
+    const tabs = [
+        stub('p', { pinned: true }),
+        stub('a'),
+        stub('b', { document: { value: 'draft' } }),
+        stub('c', { missing: true }),
+        stub('d')
+    ];
+    const names = (list) => list.map((tab) => tab.path);
+    assert.deepEqual(names(closable(tabs, 'others', 'b')), ['a', 'c', 'd']);
+    assert.deepEqual(names(closable(tabs, 'right', 'b')), ['c', 'd']);
+    assert.deepEqual(names(closable(tabs, 'right', 'missing')), []);
+    assert.deepEqual(names(closable(tabs, 'saved')), ['a', 'd']);
+});
+
+test('conflict markers split back into the current, incoming and base versions', () => {
+    const text = 'top\n<<<<<<< ours\nmine\n||||||| base\nold\n=======\ntheirs\n>>>>>>> theirs\nmid\n<<<<<<< ours\nx\n=======\ny\n>>>>>>> theirs';
+    assert.deepEqual(sides(text), { base: null, current: 'top\nmine\nmid\nx', incoming: 'top\ntheirs\nmid\ny' });
+    const based = 'a\n<<<<<<< ours\nmine\n||||||| base\nold\n=======\ntheirs\n>>>>>>> theirs\nz\n';
+    assert.deepEqual(sides(based), { base: 'a\nold\nz\n', current: 'a\nmine\nz\n', incoming: 'a\ntheirs\nz\n' });
+    assert.equal(sides('no conflicts here'), null);
+    assert.match(compareKey('a.ts', 'b.ts'), /\0/);
+});
+
+test('single-click opens reuse one preview tab until it is edited or opened again as pinned', async (t) => {
+    const { model } = await fixture();
+    t.after(() => model.dispose());
+    await model.open('a.ts', undefined, undefined, true);
+    await model.open('b.ts', undefined, undefined, true);
+    assert.deepEqual(paths(model), ['b.ts']);
+    assert.equal(model.state.active.preview, true);
+    const b = model.state.active;
+    b.document.setValue('edited');
+    assert.equal(b.preview, false);
+    await model.open('c.ts', undefined, undefined, true);
+    assert.deepEqual(paths(model), ['b.ts', 'c.ts']);
+    await model.open('c.ts');
+    assert.equal(model.state.active.preview, false);
+    await model.open('d.ts', undefined, undefined, true);
+    await model.open('c.ts', undefined, undefined, true);
+    assert.deepEqual(paths(model), ['b.ts', 'c.ts', 'd.ts']);
+    assert.equal(model.state.tabs[1].preview, false);
+    assert.equal(model.state.active.path, 'c.ts');
+});
+
+test('concurrent preview and pinned opens of one file share its tab and leave it pinned', async (t) => {
+    const { model } = await fixture();
+    t.after(() => model.dispose());
+    const [first, second] = await Promise.all([model.open('a.ts', undefined, undefined, true), model.open('a.ts')]);
+    assert.equal(first, second);
+    assert.equal(first.preview, false);
+});
+
+test('pinning moves a tab to the end of the pinned group, keeps it from preview and close others', async (t) => {
+    const { model } = await fixture();
+    t.after(() => model.dispose());
+    for (const path of ['a.ts', 'b.ts', 'c.ts']) await model.open(path);
+    await model.open('d.ts', undefined, undefined, true);
+    model.pin('c.ts');
+    model.pin('d.ts');
+    assert.deepEqual(paths(model), ['c.ts', 'd.ts', 'a.ts', 'b.ts']);
+    assert.equal(model.state.tabs[1].preview, false);
+    assert.equal(model.state.tabs[1].pinned, true);
+    model.unpin('c.ts');
+    assert.deepEqual(paths(model), ['d.ts', 'c.ts', 'a.ts', 'b.ts']);
+    assert.equal(await model.closeOthers('a.ts'), true);
+    assert.deepEqual(paths(model), ['d.ts', 'a.ts']);
+});
+
+test('close to the right and close saved ask once for every unsaved draft they close', async (t) => {
+    const { model } = await fixture();
+    t.after(() => model.dispose());
+    for (const path of ['a.ts', 'b.ts', 'c.ts', 'd.ts']) await model.open(path);
+    model.state.tabs[2].document.setValue('draft');
+    model.state.tabs[3].document.setValue('draft');
+    const asked = [];
+    model.setConfirmation((request) => {
+        asked.push(request);
+        return 'discard';
+    });
+    assert.equal(await model.closeSaved(), true);
+    assert.deepEqual(paths(model), ['c.ts', 'd.ts']);
+    assert.equal(asked.length, 0);
+    assert.equal(await model.closeRight('c.ts'), true);
+    assert.deepEqual(asked.map((request) => request.dirty), [['d.ts']]);
+    assert.deepEqual(paths(model), ['c.ts']);
+    model.setConfirmation(() => 'cancel');
+    await model.open('a.ts');
+    model.state.active.document.setValue('draft');
+    assert.equal(await model.closeOthers('c.ts'), false);
+    assert.deepEqual(paths(model), ['c.ts', 'a.ts']);
+});
+
+test('a compare tab is read-only: never dirty, never saved, kept by refresh and apart from file paths', async (t) => {
+    const { host, model } = await fixture({ 'a.ts': 'one', 'b.ts': 'two' });
+    t.after(() => model.dispose());
+    const tab = await model.compare('a.ts', '/project/b.ts');
+    assert.deepEqual(tab.compare, { modified: 'two', original: 'one', paths: ['a.ts', 'b.ts'] });
+    assert.equal(model.state.active, tab);
+    assert.equal(dirty(tab), false);
+    assert.equal(await model.compare('a.ts', 'b.ts'), tab);
+    assert.equal(model.state.tabs.length, 1);
+    await model.refresh();
+    assert.equal(tab.missing, false);
+    assert.equal(await model.save(tab), false);
+    assert.equal(host.writes.length, 0);
+    const file = await model.open('a.ts');
+    assert.notEqual(file, tab);
+    await model.rename('a.ts', 'z.ts');
+    assert.equal(tab.path, compareKey('a.ts', 'b.ts'));
+    assert.equal(await model.close(tab.path), true);
+    assert.deepEqual(paths(model), ['z.ts']);
+    await model.compare('a.ts', 'b.ts');
+    assert.match(model.state.status, /Compare failed/);
+    assert.deepEqual(paths(model), ['z.ts']);
+});

package/src/components/accordion/group.ts

@@ -0,0 +1,39 @@
+type Group = {
+    members: Set<State>;
+    required: boolean;
+};
+
+type State = { active: boolean | number };
+
+
+// Brings a member's group in line with it: an open member closes the rest, and in a required group a closed member
+// reopens when nothing else is open. Run when it joins and whenever it opens or closes, so several opened at once
+// leave the last one to join or move open.
+const settle = (group: Group, state: State) => {
+    if (state.active) {
+        for (let other of group.members) {
+            if (other !== state) {
+                other.active = false;
+            }
+        }
+
+        return;
+    }
+
+    if (!group.required) {
+        return;
+    }
+
+    for (let other of group.members) {
+        if (other.active) {
+            return;
+        }
+    }
+
+    state.active = true;
+};
+
+
+export default ({ required = false }: { required?: boolean } = {}): Group => ({ members: new Set(), required });
+export { settle };
+export type { Group };

package/src/components/accordion/index.ts

@@ -1,15 +1,17 @@
-import { effect, reactive } from '@esportsplus/reactivity';
+import { effect, reactive, untrack } from '@esportsplus/reactivity';
 import { html, component, type Attributes } from '@esportsplus/template';
 import { observeSize } from '~/shared/resize';
 import { trackTransition } from '~/shared/transition';
+import group, { settle, type Group } from './group';
 import './scss/index.scss';
 
 
-export default component<Attributes & {
+const accordion = component<Attributes & {
+    group?: Group,
     lines?: number,
     state?: { active: boolean | number, expandable?: boolean }
 }>(
-    function({ lines, state = reactive({ active: false, expandable: false }), ...attributes }, content) {
+    function({ group, lines, state = reactive({ active: false, expandable: false }), ...attributes }, content) {
         let a: Attributes | undefined,
             c: Attributes | undefined,
             property = lines === undefined ? 'grid-template-rows' : 'height',
@@ -17,8 +19,8 @@ export default component<Attributes & {
             viewport: HTMLElement | undefined;
 
         let motion = trackTransition(property, (running, element) => {
-            ui.scrollable = !!state.active && !!element && !running;
-        });
+                ui.scrollable = !!state.active && !!element && !running;
+            });
 
         effect(() => {
             let active = !!state.active;
@@ -27,12 +29,25 @@ export default component<Attributes & {
 
             // Scroll position survives the height change; reset it as soon as closing starts.
             if (!active) {
-                viewport?.scrollTo({ top: 0, behavior: 'instant' });
+                viewport?.scrollTo({ behavior: 'instant', top: 0 });
             }
 
             motion.settle();
         });
 
+        // Only this member's own state is tracked; the rest of the group is read and written as it stands.
+        if (group) {
+            effect(() => {
+                state.active;
+
+                untrack(() => {
+                    if (group.members.has(state)) {
+                        settle(group, state);
+                    }
+                });
+            });
+        }
+
         if (lines !== undefined) {
             let measured = reactive({ height: 0, instant: true });
 
@@ -69,11 +84,18 @@ export default component<Attributes & {
                         () => state.active && ui.scrollable && 'accordion--scrollable'
                     ],
                     inert: () => lines === undefined && !state.active,
+                    // Members join while mounted, so a removed one never closes or holds open the rest.
                     onconnect: (element: HTMLElement) => {
                         viewport = element;
                         motion.attributes.onconnect(element);
+
+                        if (group) {
+                            group.members.add(state);
+                            settle(group, state);
+                        }
                     },
                     ondisconnect: () => {
+                        group?.members.delete(state);
                         motion.attributes.ondisconnect();
                         viewport = undefined;
                     }
@@ -84,3 +106,7 @@ export default component<Attributes & {
         `;
     }
 );
+
+
+export default Object.assign(accordion, { group });
+export type { Group };

package/src/components/accordion/scss/index.scss

@@ -2,31 +2,15 @@
 @use 'variables';
 
 .accordion {
-    --scrollbar-overflow: hidden;
-    // Reserve the gutter throughout so enabling the bar cannot reflow and remeasure content.
-    --scrollbar-gutter: stable;
     display: grid;
     grid-template-rows: 1fr;
     overflow: var(--scrollbar-overflow, hidden);
-    transition: grid-template-rows .3s;
-
-    @include tokens.state(active) {
-        &.accordion--scrollable {
-            --scrollbar-overflow: auto;
-        }
-    }
+    transition: grid-template-rows var(--transition-duration) var(--transition-timing-function);
 
     @include tokens.state(inactive) {
         grid-template-rows: 0fr;
     }
 
-    &-content {
-        display: flow-root;
-        min-height: 0;
-        // Clip the collapse without creating a nested scroll container that traps wheel input.
-        overflow: clip;
-    }
-
     &--more {
         display: block;
         // Animate the outer box while content retains its natural height for measurement.
@@ -35,16 +19,16 @@
         overscroll-behavior: contain;
         transition: height var(--transition-duration) var(--transition-timing-function);
 
+        &.accordion--instant {
+            transition: none;
+        }
+
         &:focus-visible {
             border-radius: var(--border-radius-300);
             outline: var(--border-width-400) solid var(--focus-color);
             outline-offset: var(--size-100);
         }
 
-        &.accordion--instant {
-            transition: none;
-        }
-
         @include tokens.state(active) {
             height: min(var(--height, var(--max-height)), var(--max-height));
         }
@@ -54,6 +38,13 @@
         }
     }
 
+    &-content {
+        display: flow-root;
+        min-height: 0;
+        // Clip the collapse without creating a nested scroll container that traps wheel input.
+        overflow: clip;
+    }
+
     @media (prefers-reduced-motion: reduce) {
         transition: none;
     }

package/src/components/accordion/scss/variables.scss

@@ -1,7 +1,22 @@
+@use '/tokens';
+
+// Collapses a tier faster than it opens.
 .accordion {
+    // Reserve the gutter throughout so enabling the bar cannot reflow and remeasure content.
+    --scrollbar-gutter: stable;
+    --scrollbar-overflow: hidden;
+    --transition-duration: var(--duration-moderate-exit);
+
+    @include tokens.state(active) {
+        --transition-duration: var(--duration-moderate);
+
+        &.accordion--scrollable {
+            --scrollbar-overflow: auto;
+        }
+    }
+
     &--more {
-        --focus-color: var(--color-primary-400);
+        --focus-color: var(--color-accent-400);
         --max-height: 320px;
-        --transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
     }
-}
+}

package/src/components/announcement/scss/index.scss

@@ -5,11 +5,11 @@
     display: grid;
     grid-template-rows: 0fr;
     overflow: hidden;
-    transition: grid-template-rows 240ms var(--announcement-drawer);
+    transition: grid-template-rows var(--duration-slow-exit) var(--announcement-drawer);
 
     // Qualified to outrank the '.overlay' it pairs with.
     &-content.overlay {
-        filter: blur(2px);
+        filter: blur(var(--blur-300));
         transition:
             filter var(--fade-duration) var(--announcement-ease),
             opacity var(--fade-duration) var(--announcement-ease),
@@ -27,7 +27,7 @@
 
     @include tokens.state(active) {
         grid-template-rows: 1fr;
-        transition: grid-template-rows 280ms var(--announcement-drawer);
+        transition: grid-template-rows var(--duration-slow) var(--announcement-drawer);
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -40,7 +40,7 @@
             &,
             #{tokens.state(active)} {
                 filter: none;
-                transition: opacity 200ms var(--announcement-ease);
+                transition: opacity var(--fade-duration) var(--announcement-ease);
             }
         }
     }

package/src/components/announcement/scss/variables.scss

@@ -1,18 +1,18 @@
 @use '/tokens';
 
 .announcement {
-    --announcement-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-    --announcement-ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --announcement-drawer: var(--easing-spring);
+    --announcement-ease: var(--easing-spring);
 
 
     &-content.overlay {
-        --close-duration: 240ms;
+        --close-duration: var(--duration-slow-exit);
         --ease: var(--announcement-drawer);
-        --fade-duration: 120ms;
-        --open-duration: 280ms;
+        --fade-duration: var(--duration-fast-exit);
+        --open-duration: var(--duration-slow);
 
         @include tokens.state(active) {
-            --fade-duration: 200ms;
+            --fade-duration: var(--duration-fast);
         }
 
         @media (prefers-reduced-motion: reduce) {

package/src/components/banner/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/absolute';
 @use 'variables';
 
 .banner {

package/src/components/breadcrumb/scss/index.scss

@@ -1,5 +1,7 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/color';
+@use 'css-utilities/reset';
+@use 'css-utilities/text';
 @use 'variables';
 
 .breadcrumb {
@@ -11,13 +13,18 @@
 
     &-current {
         @extend %text-truncate;
+        --font-weight: var(--font-weight-current);
         color: var(--color-active);
         display: block;
-        font-weight: var(--font-weight-current);
+        font-weight: var(--font-weight);
         padding-inline: var(--link-padding);
     }
 
     &-link {
+        @extend %color-state;
+        --color-default: var(--link-color);
+        --color-hover: var(--link-color-hover);
+        --color-pressed: var(--color-hover);
         align-items: center;
         border-radius: var(--link-radius);
         color: var(--color);
@@ -27,25 +34,19 @@
         padding-inline: var(--link-padding);
         text-decoration: underline;
         text-decoration-color: transparent;
-        text-underline-offset: 4px;
+        text-underline-offset: calc(var(--size-100) / 2);
         touch-action: manipulation;
         transition:
-            color 0.15s ease-out,
-            scale 0.15s ease-out,
-            text-decoration-color 0.15s ease-out;
+            color var(--duration-fast) var(--easing-spring),
+            text-decoration-color var(--duration-fast) var(--easing-spring);
         user-select: none;
         white-space: nowrap;
 
-        &:active {
-            scale: 0.96;
-        }
-
         &:focus-visible {
             outline: 2px solid var(--focus-color);
         }
 
         &:hover {
-            color: var(--color-active);
             text-decoration-color: var(--underline-color);
         }
     }
@@ -59,26 +60,26 @@
         position: relative;
     }
 
+    &-menu-root.tooltip {
+        cursor: default;
+        display: flex;
+    }
+
     &-menu.tooltip-menu-panel {
         display: flex;
         flex-direction: column;
         outline: none;
-        padding: 4px;
+        padding: calc(var(--size-100) / 2);
         // Grows out of the dots.
         transform-origin: calc(var(--trigger-width) / 2) 0;
         width: var(--menu-width);
     }
 
-    &-menu-root.tooltip {
-        cursor: default;
-        display: flex;
-    }
-
     &-option-icon {
         color: var(--option-icon-color);
         flex-shrink: 0;
-        height: 16px;
-        width: 16px;
+        height: var(--size-400);
+        width: var(--size-400);
     }
 
     // Paired with '.link', which the tooltip menu gives every option, so these win over its padding, wrapping,
@@ -92,10 +93,10 @@
         display: flex;
         flex-shrink: 0;
         flex-wrap: nowrap;
-        gap: 10px;
+        gap: var(--size-200);
         height: 36px;
         outline: none;
-        padding: 0 8px;
+        padding: 0 var(--size-100);
         text-decoration: none;
         transition: none;
         user-select: none;
@@ -133,9 +134,9 @@
         flex-shrink: 0;
         grid-template-columns: 1fr;
         transition:
-            filter var(--enter-duration) var(--ease-out),
+            filter var(--enter-duration) var(--easing-spring),
             grid-template-columns var(--slide-duration) var(--slide-easing),
-            opacity var(--enter-duration) var(--ease-out);
+            opacity var(--enter-duration) var(--easing-spring);
 
         &--current {
             flex-shrink: 1;
@@ -144,13 +145,13 @@
 
         // Blur only matters on the way in, so it switches on after the fade out.
         &--hidden {
-            filter: blur(4px);
+            filter: blur(var(--blur-400));
             grid-template-columns: 0fr;
             opacity: 0;
             transition:
                 filter 0s linear var(--exit-duration),
                 grid-template-columns var(--slide-duration) var(--slide-easing),
-                opacity var(--exit-duration) var(--ease-out),
+                opacity var(--exit-duration) var(--easing-spring),
                 visibility 0s linear var(--slide-duration);
             visibility: hidden;
         }
@@ -180,7 +181,8 @@
         padding-inline: var(--link-padding);
 
         &--current {
-            font-weight: var(--font-weight-current);
+            --font-weight: var(--font-weight-current);
+            font-weight: var(--font-weight);
         }
     }
 
@@ -198,14 +200,14 @@
         padding: 0;
         touch-action: manipulation;
         transition:
-            background-color 0.15s ease-out,
-            color 0.15s ease-out,
-            scale 0.15s ease-out;
+            background-color var(--duration-fast) var(--easing-spring),
+            color var(--duration-fast) var(--easing-spring);
         user-select: none;
         width: var(--trigger-width);
 
-        &:active {
-            scale: 0.96;
+        &-icon {
+            height: var(--size-400);
+            width: var(--size-400);
         }
 
         &:focus-visible {
@@ -218,28 +220,17 @@
             background: var(--hover-background);
             color: var(--color-active);
         }
-
-        &-icon {
-            height: 16px;
-            width: 16px;
-        }
     }
 
 
     @media (prefers-reduced-motion: reduce) {
-        &-link {
-            transition:
-                color 0.15s ease-out,
-                text-decoration-color 0.15s ease-out;
-        }
-
         &-segment {
             filter: none;
-            transition: opacity var(--enter-duration) var(--ease-out);
+            transition: opacity var(--enter-duration) var(--easing-spring);
 
             &--hidden {
                 transition:
-                    opacity var(--exit-duration) var(--ease-out),
+                    opacity var(--exit-duration) var(--easing-spring),
                     visibility 0s linear var(--exit-duration);
             }
 
@@ -247,11 +238,5 @@
                 transition-delay: 0s;
             }
         }
-
-        &-trigger {
-            transition:
-                background-color 0.15s ease-out,
-                color 0.15s ease-out;
-        }
     }
 }