@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/editor/diffs/scss/variables.scss

@@ -1,16 +1,22 @@
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/font/geist';
+@use 'css-utilities/surface';
+
+
 // Shared by the viewer and the merge editor, whose sides reuse the viewer's numbers, code and buttons.
 .diffs,
 .diffs-merge {
+    @extend %background-state, %border-state, %font-geist-mono, %surface-raised-level;
     --accent: var(--color-blue-400);
     --accent-color: var(--color-white-300);
     --action-background: var(--background);
     --action-hover-background: var(--hover-background);
     --active-outline: oklch(from var(--color-blue-400) l c h / 0.6);
-    --background: var(--color-white-300);
-    --bar-background: var(--color-white-400);
+    --background-default: var(--surface-background-default);
     --bar-gap: var(--size-200);
     --bar-padding: var(--size-100) var(--size-200);
-    --border-color: var(--color-border-300);
+    --border-color-default: var(--surface-border-default);
     --border-radius: var(--border-radius-300);
     --border-width: var(--border-width-400);
     --button-icon-size: var(--size-300);
@@ -25,36 +31,37 @@
     --delete-word-background: oklch(from var(--color-red-400) l c h / 0.28);
     --digits: 2;
     --disabled-opacity: 0.45;
-    --empty-background: repeating-linear-gradient(-45deg, transparent 0 4px, oklch(from var(--color-text-500) l c h / 0.05) 4px 8px);
+    --empty-background: repeating-linear-gradient(-45deg, transparent 0 4px, oklch(from var(--color-primary-500) l c h / 0.05) 4px 8px);
     --focus-color: var(--color-blue-400);
     --focus-width: var(--border-width-500);
-    --font-family: var(--font-family-mono);
     --font-size: var(--font-size-300);
-    --function-color: var(--color-purple-300);
+    --function-color: light-dark(var(--color-purple-300), oklch(from var(--color-purple-300) 0.8 0.13 h));
     --gap-background: oklch(from var(--color-blue-400) l c h / 0.06);
-    --gap-color: var(--color-text-300);
+    --gap-color: var(--color-primary-300);
     --gap-hover-background: oklch(from var(--color-blue-400) l c h / 0.12);
     --height: 420px;
-    --hover-background: oklch(from var(--color-text-500) l c h / 0.06);
+    --hover-background: var(--surface-background-hover);
+    // Read where the element's own '--color' is stepping, so its hover can still reach the viewer's text color.
+    --hover-color: var(--color);
     --insert-background: oklch(from var(--color-green-500) 60% c h / 0.12);
-    --insert-color: oklch(from var(--color-green-500) 50% c h);
+    --insert-color: light-dark(oklch(from var(--color-green-500) 50% c h), oklch(from var(--color-green-500) 0.78 0.17 h));
     --insert-word-background: oklch(from var(--color-green-500) 60% c h / 0.3);
-    --keyword-color: var(--color-purple-400);
+    --keyword-color: light-dark(var(--color-purple-400), oklch(from var(--color-purple-400) 0.75 0.15 h));
     --label-font-size: var(--font-size-200);
     --line-height: var(--size-600);
     --literal-color: var(--number-color);
-    --min-height: 120px;
+    --min-height: var(--spacer-400);
     --muted-color: var(--color-text-300);
-    --number-color: var(--color-blue-400);
+    --number-color: light-dark(var(--color-blue-400), oklch(from var(--color-blue-400) 0.78 0.12 h));
     --number-width: calc(max(2, var(--digits)) * 1ch + var(--size-200));
     --operator-color: var(--color-text-400);
-    --property-color: var(--color-blue-500);
-    --regexp-color: var(--color-red-500);
-    --selector-color: var(--color-purple-500);
+    --property-color: light-dark(var(--color-blue-500), oklch(from var(--color-blue-500) 0.8 0.1 h));
+    --regexp-color: light-dark(var(--color-red-500), oklch(from var(--color-red-500) 0.75 0.14 h));
+    --selector-color: light-dark(var(--color-purple-500), oklch(from var(--color-purple-500) 0.78 0.13 h));
     --sign-width: 2ch;
-    --string-color: oklch(from var(--color-green-500) 45% c h);
-    --tag-color: var(--color-red-400);
-    --type-color: var(--color-blue-300);
+    --string-color: light-dark(oklch(from var(--color-green-500) 45% c h), oklch(from var(--color-green-500) 0.8 0.15 h));
+    --tag-color: light-dark(var(--color-red-400), oklch(from var(--color-red-400) 0.72 0.16 h));
+    --type-color: light-dark(var(--color-blue-300), oklch(from var(--color-blue-300) 0.76 0.13 h));
     --variable-color: var(--color);
 
     @media (forced-colors: active) {

package/src/components/editor/diffs/view.ts

@@ -1,6 +1,7 @@
 import { reactive, untrack } from '@esportsplus/reactivity';
 import { component, html, type Attributes, type VirtualSlot } from '@esportsplus/template';
 import icon from '~/components/icon';
+import scrollbar from '~/modifiers/scrollbar';
 import { languageFor, type Language, type Token } from '../code/syntax';
 import { diffTexts, hunks, type Diff, type DiffChange } from './hunks';
 import { highlighter, markup } from './render';
@@ -454,7 +455,7 @@ export default component(
                         </button>
                     </div>
                 </div>
-                <div class='diffs-scroller --scrollbar' tabindex='0'>
+                <div class='diffs-scroller' tabindex='0' ${scrollbar()}>
                     ${slot.fragment}
                 </div>
             </div>

package/src/components/editor/index.ts

@@ -2,6 +2,7 @@ import code from './code';
 import diffs from './diffs';
 import markdown from './markdown';
 import tree from './tree';
+import viewer from './viewer';
 import workspace from './workspace';
 
 
@@ -10,8 +11,9 @@ const editor: {
     diffs: typeof diffs,
     markdown: typeof markdown,
     tree: typeof tree,
+    viewer: typeof viewer,
     workspace: typeof workspace
-} = { code, diffs, markdown, tree, workspace };
+} = { code, diffs, markdown, tree, viewer, workspace };
 
 
 export default editor;
@@ -41,10 +43,12 @@ export type {
 } from './diffs';
 export type { MarkdownController, MarkdownEditorAttributes, MarkdownOptions } from './markdown';
 export type * from './tree';
+export type { CodeViewerAttributes } from './viewer';
 export type {
     CodeEditorWorkspaceAttributes,
     CodeEditorWorkspaceController,
     WorkspaceAction,
+    WorkspaceCompare,
     WorkspaceConfirmation,
     WorkspaceDecision,
     WorkspaceEditor,
@@ -54,6 +58,8 @@ export type {
     WorkspaceEntry,
     WorkspaceHost,
     WorkspacePreferences,
+    WorkspaceSession,
+    WorkspaceSessionTab,
     WorkspaceTab,
     WorkspaceTarget
 } from './workspace';

package/src/components/editor/markdown/editing.ts

@@ -9,6 +9,37 @@ type Command = 'backspace' | 'bold' | 'enter' | 'italic';
 type KindAt = (offset: number) => Kind | undefined;
 
 
+const FENCE = /^((?: {0,3}>[ \t]?)*) {0,3}(`{3,}|~{3,})[^`]*$/;
+
+
+// Enter at the end of a fence's opening line, when nothing after it closes the fence, adds the closing line too.
+function fence(document: EditorDocument) {
+    let { end, start } = document.selection,
+        index = document.lineAt(start),
+        line = document.lineText(index),
+        open = FENCE.exec(line);
+
+    if (!open || start !== end || start !== document.lineStart(index) + line.length) {
+        return false;
+    }
+
+    let marker = open[2],
+        close = new RegExp(`^${open[1]} {0,3}${marker[0] === '`' ? '`' : '~'}{${marker.length},}[ \\t]*$`);
+
+    for (let i = index + 1, n = document.lineCount; i < n; i++) {
+        if (close.test(document.lineText(i))) {
+            return false;
+        }
+    }
+
+    let eol = document.eol;
+
+    return document.replace(start, start, eol + open[1] + eol + open[1] + marker, {
+        selection: { start: start + eol.length + open[1].length },
+        source: 'markdown-enter'
+    });
+}
+
 function run(document: EditorDocument, command: Command, kind?: KindAt) {
     if (command === 'bold' || command === 'italic') {
         return toggleMarkdown(document, command === 'bold' ? '**' : '*');
@@ -18,14 +49,18 @@ function run(document: EditorDocument, command: Command, kind?: KindAt) {
         return markdownBackspace(document) || deleteCharacter(document, true);
     }
 
-    if (markdownEnter(document, kind?.(document.selection.start))) {
+    let at = kind?.(document.selection.start);
+
+    if (markdownEnter(document, at) || fence(document)) {
         return true;
     }
 
     let { end, start } = document.selection,
-        eol = document.eol;
+        eol = document.eol,
+        // A paragraph's line with text ends in a new paragraph; elsewhere Enter breaks the line.
+        insert = at === 'paragraph' && document.lineText(document.lineAt(start)).trim() ? eol + eol : eol;
 
-    return document.replace(start, end, eol, { selection: { start: start + eol.length }, source: 'markdown-enter' });
+    return document.replace(start, end, insert, { selection: { start: start + insert.length }, source: 'markdown-enter' });
 }
 
 

package/src/components/editor/markdown/erase.ts

@@ -0,0 +1,124 @@
+import type { Inline } from './inline';
+
+
+type Span = { from: number; to: number };
+
+
+const LINE_BREAK = /[\r\n]/;
+
+const WIDTHS: Partial<Record<Inline['kind'], number>> = { em: 1, strike: 2, strong: 2 };
+
+
+let graphemes: Intl.Segmenter | undefined;
+
+
+// Length of the grapheme ending at 'offset' (backward) or starting there, without crossing 'limit'.
+function grapheme(text: string, offset: number, limit: number, backward: boolean) {
+    graphemes ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+
+    let window = backward ? text.slice(Math.max(limit, offset - 16), offset) : text.slice(offset, Math.min(limit, offset + 16)),
+        length = 0;
+
+    for (let { segment } of graphemes.segment(window)) {
+        if (!backward) {
+            return segment.length;
+        }
+
+        length = segment.length;
+    }
+
+    return length;
+}
+
+
+// The source a Backspace or Delete at 'offset' removes, from the visible runs of text around it, sorted and absolute.
+// Markup between runs is never deleted alone: the visible character past it goes instead, or for a line break, the
+// break and the markup with it. Null when no run lies on that side.
+const reach = (text: string, spans: readonly Span[], offset: number, backward: boolean): Span | null => {
+    let next: Span | null = null,
+        previous: Span | null = null;
+
+    for (let i = 0, n = spans.length; i < n; i++) {
+        let span = spans[i];
+
+        if (span.from === span.to) {
+            continue;
+        }
+
+        if (backward ? span.from < offset && offset <= span.to : span.from <= offset && offset < span.to) {
+            return backward
+                ? { from: offset - grapheme(text, offset, span.from, true), to: offset }
+                : { from: offset, to: offset + grapheme(text, offset, span.to, false) };
+        }
+
+        if (span.to <= offset) {
+            previous = span;
+        }
+        else if (!next && span.from >= offset) {
+            next = span;
+        }
+    }
+
+    if (backward) {
+        if (!previous) {
+            return null;
+        }
+
+        return LINE_BREAK.test(text.slice(previous.to, offset))
+            ? { from: previous.to, to: offset }
+            : { from: previous.to - grapheme(text, previous.to, previous.from, true), to: previous.to };
+    }
+
+    if (!next) {
+        return null;
+    }
+
+    return LINE_BREAK.test(text.slice(offset, next.from))
+        ? { from: offset, to: next.from }
+        : { from: next.from, to: next.from + grapheme(text, next.from, next.to, false) };
+};
+
+// Widens a deletion that empties emphasis, strikethrough or code to take its delimiters, outward through nesting,
+// so none are left behind as text. Token offsets are relative to 'base'.
+const widen = (text: string, tokens: readonly Inline[], base: number, span: Span): Span => {
+    let found = true;
+
+    while (found) {
+        found = false;
+
+        let visit = (list: readonly Inline[]) => {
+            for (let i = 0, n = list.length; i < n && !found; i++) {
+                let token = list[i];
+
+                if (base + token.from === span.from && base + token.to === span.to) {
+                    let width = WIDTHS[token.kind] ?? 0;
+
+                    if (token.kind === 'code') {
+                        while (text[span.from - width - 1] === '`') {
+                            width++;
+                        }
+                    }
+
+                    if (width && span.from - width >= 0) {
+                        span = { from: span.from - width, to: span.to + width };
+                        found = true;
+                    }
+
+                    return;
+                }
+
+                if (token.children && base + token.from <= span.from && span.to <= base + token.to) {
+                    visit(token.children);
+                }
+            }
+        };
+
+        visit(tokens);
+    }
+
+    return span;
+};
+
+
+export { reach, widen };
+export type { Span };

package/src/components/editor/markdown/index.ts

@@ -3,7 +3,6 @@ import { component, type Attributes } from '@esportsplus/template';
 import { EditorDocument } from '../code/document';
 import { view, type MarkdownController, type MarkdownOptions } from './view';
 import type { Callbacks } from '../code/view';
-import '~/css-utilities/scrollbar/scss/index.scss';
 import '../code/scss/index.scss';
 import './scss/index.scss';
 

package/src/components/editor/markdown/layout.ts

@@ -20,8 +20,6 @@ type Metrics = {
 // What the surface draws for a block, or a slice of a large one. Units keep their block's identity while its text
 // is unchanged, so their DOM and measured height survive edits elsewhere.
 type Unit = {
-    // The editing field, standing in for the blocks under the primary selection.
-    active?: boolean;
     block: MarkdownBlock;
     continuation: boolean;
     continues: boolean;
@@ -166,26 +164,19 @@ function slice(block: MarkdownBlock, text: string, raw: boolean): Unit[] {
 }
 
 
-// The units the surface shows, in order: blocks under a fold are left out and its header stands for it, blocks
-// [active.first, active.last) are the editing field, and blocks 'raw' picks show their source.
+// The units the surface shows, in order: blocks under a fold are left out and its header stands for it, and blocks
+// 'raw' picks show their source.
 const arrange = (
     blocks: readonly MarkdownBlock[],
     text: string,
     folds: readonly FoldRange[],
     cache: Cache,
-    active: { first: number; last: number; unit: Unit } | null,
     raw: ((index: number) => boolean) | null
 ) => {
     let f = 0,
         out: Unit[] = [];
 
     for (let i = 0, n = blocks.length; i < n; i++) {
-        if (active && i === active.first) {
-            out.push(active.unit);
-            i = active.last - 1;
-            continue;
-        }
-
         let block = blocks[i];
 
         while (f < folds.length && folds[f].to <= block.from) {
@@ -442,5 +433,5 @@ class MarkdownLayout {
 }
 
 
-export { arrange, cache, headingScale, MarkdownLayout, SCALED_LINE, SLICE_LINES, unitStart, WINDOW_LIMIT };
+export { arrange, cache, MarkdownLayout, SLICE_LINES, unitStart, WINDOW_LIMIT };
 export type { Unit };

package/src/components/editor/markdown/render.ts

@@ -22,8 +22,6 @@ type Host = {
     foldable: (unit: Unit) => boolean;
     // Inline markup of a block, offsets relative to its start.
     inline: (block: MarkdownBlock) => readonly Inline[];
-    // A press on a unit's text, before the native one does anything.
-    press: (e: MouseEvent, unit: Unit) => void;
     readonly: () => boolean;
     // The unit's element connected or left.
     shown: (element: HTMLElement, unit: Unit | null) => void;
@@ -34,7 +32,10 @@ type Host = {
 };
 
 
-const EOL = /\r\n|\r|\n/;
+const CARRIAGE_RETURN = /\r$/;
+
+// A fence's opening line: everything up to its info string, which shows and edits as the block's label.
+const FENCE_OPEN = /^[ \t>]*(?:`{3,}|~{3,})/;
 
 const ORDERED = /^\d/;
 
@@ -211,6 +212,7 @@ const renderer = (host: Host) => {
                     <button
                         aria-label='Unfold block'
                         class='markdown-editor-chip'
+                        contenteditable='false'
                         type='button'
                         ${{ onclick: () => host.unfold(unit), onmousedown: prevent }}
                     >
@@ -225,20 +227,22 @@ const renderer = (host: Host) => {
             case 'blank':
                 return html`<br>`;
             case 'code':
-            case 'fence':
                 return html`
                     <pre class='markdown-editor-pre'><code class='markdown-editor-code markdown-editor-code--block'>${plain(block, unit.rows ?? relative(block), view, true)}</code></pre>
                 `;
+            case 'fence':
+                return html`
+                    <pre class='markdown-editor-pre'>${unit.continuation ? '' : info(block, view)}<code class='markdown-editor-code markdown-editor-code--block'>${plain(block, unit.rows ?? relative(block), view, true)}</code></pre>
+                `;
             case 'frontmatter':
                 return html`
-                    <span class='markdown-editor-frontmatter'>
-                        frontmatter · ${source.slice(block.contentFrom, block.contentTo).split(EOL).length} lines
-                    </span>
+                    <pre class='markdown-editor-pre markdown-editor-frontmatter'><code class='markdown-editor-code markdown-editor-code--block'>${plain(block, lines(source, block.contentFrom, block.contentTo, block.from), view, true)}</code></pre>
                 `;
             case 'html':
                 parser ??= new DOMParser();
 
-                return safe(sanitizeHtml(source.slice(block.contentFrom, block.contentTo), parser));
+                // Rendered HTML has no source to type into; it selects and deletes as a whole.
+                return html`<div contenteditable='false'>${safe(sanitizeHtml(source.slice(block.contentFrom, block.contentTo), parser))}</div>`;
             case 'list': {
                 let content = marked(block, unit.rows ?? block.lines?.map((row) => relativeRow(block, row)), view);
 
@@ -246,14 +250,17 @@ const renderer = (host: Host) => {
                     return content;
                 }
 
+                if (block.task) {
+                    return task(block, block.task.checked, content);
+                }
+
                 return [
-                    html`<span class='markdown-editor-marker'>${ORDERED.test(block.marker ?? '') ? block.marker : '•'}</span>`,
-                    block.task ? task(block, block.task.checked) : '',
+                    html`<span class='markdown-editor-marker' contenteditable='false'>${ORDERED.test(block.marker ?? '') ? block.marker : '•'}</span>`,
                     content
                 ];
             }
             case 'rule':
-                return html`<hr class='markdown-editor-rule'>`;
+                return html`<hr class='markdown-editor-rule' contenteditable='false'>`;
             default:
                 return marked(block, unit.rows ?? block.lines?.map((row) => relativeRow(block, row)), view);
         }
@@ -294,10 +301,24 @@ const renderer = (host: Host) => {
         return out;
     }
 
-    // Inline markup of rows, joined by line breaks.
+    // A fence's info string, the language label over its code.
+    function info(block: MarkdownBlock, view: View) {
+        let source = host.text(),
+            end = source.indexOf('\n', block.from),
+            line = source.slice(block.from, end < 0 ? source.length : end).replace(CARRIAGE_RETURN, ''),
+            from = FENCE_OPEN.exec(line)?.[0].length ?? line.length;
+
+        return html`<span class='markdown-editor-info'>${piece(line.slice(from), block, from, view)}</span>`;
+    }
+
+    // Inline markup of rows, joined by line breaks. Without any, a line break gives the caret a line to sit on.
     function marked(block: MarkdownBlock, rows: readonly Row[] | undefined, view: View) {
         let tokens = host.inline(block);
 
+        if (!tokens.length) {
+            return html`<br>`;
+        }
+
         if (!rows) {
             return inline(tokens, block, view);
         }
@@ -361,35 +382,41 @@ const renderer = (host: Host) => {
         return { contentFrom: row.contentFrom - base, contentTo: row.contentTo - base, from: row.from - base, to: row.to - base };
     }
 
-    // Toggling redraws the block, so the new checkbox paints the old state first and then flips, letting the checkbox's
-    // own transition play.
-    function task(block: MarkdownBlock, checked: boolean) {
+    // A task's checkbox stands in for its bullet, and its label strikes the text through. Toggling redraws the block, so
+    // both paint the old state first and then flip, letting their own transitions play.
+    function task(block: MarkdownBlock, checked: boolean, content: Renderable<unknown>) {
         let previous = flips.get(block.from),
-            animate = previous !== undefined && previous !== checked;
+            animate = previous !== undefined && previous !== checked,
+            state = reactive({ done: animate ? !!previous : checked });
 
         flips.delete(block.from);
 
-        return checkbox({
-            class: 'markdown-editor-task',
-            onfirstpaint: (element: HTMLElement) => {
-                let input = element.querySelector('input');
-
-                if (animate && input) {
-                    input.checked = checked;
-                }
-            },
-            [checkbox.input]: {
-                'aria-label': 'Toggle task',
-                checked: animate ? previous : checked,
-                disabled: () => host.readonly(),
-                onclick: (e: MouseEvent) => {
-                    e.preventDefault();
-                    flips.set(block.from, checked);
-                    host.task(block);
+        return [
+            checkbox({
+                class: 'markdown-editor-task',
+                contenteditable: 'false',
+                onfirstpaint: (element: HTMLElement) => {
+                    let input = element.querySelector('input');
+
+                    if (animate && input) {
+                        input.checked = checked;
+                        state.done = checked;
+                    }
                 },
-                onmousedown: prevent
-            }
-        });
+                [checkbox.input]: {
+                    'aria-label': 'Toggle task',
+                    checked: animate ? previous : checked,
+                    disabled: () => host.readonly(),
+                    onclick: (e: MouseEvent) => {
+                        e.preventDefault();
+                        flips.set(block.from, checked);
+                        host.task(block);
+                    },
+                    onmousedown: prevent
+                }
+            }),
+            html`<span class='markdown-editor-label' ${{ class: () => state.done && 'markdown-editor-label--done' }}>${content}</span>`
+        ];
     }
 
     return {
@@ -422,6 +449,7 @@ const renderer = (host: Host) => {
                             block.quoteDepth ? 'markdown-editor-block--quoted' : '',
                             unit.continuation ? 'markdown-editor-block--continuation' : '',
                             unit.continues ? 'markdown-editor-block--continues' : '',
+                            block.task && !unit.continuation ? 'markdown-editor-block--task' : '',
                             unit.raw || unit.fold ? 'markdown-editor-block--raw' : ''
                         ],
                         onconnect: (element: HTMLElement) => host.shown(element, unit),
@@ -432,13 +460,13 @@ const renderer = (host: Host) => {
 
                             host.shown(element, null);
                         },
-                        onmousedown: (e: MouseEvent) => host.press(e, unit),
                         style: `--depth: ${block.quoteDepth}; --indent: ${unit.raw ? 0 : block.indent};`
                     }}
                 >
                     <button
                         aria-label='${unit.fold ? 'Unfold block' : 'Fold block'}'
                         class='markdown-editor-fold'
+                        contenteditable='false'
                         tabindex='-1'
                         type='button'
                         ${{