@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/dock/scss/variables.scss

@@ -1,30 +1,91 @@
 .dock {
-    --background: var(--color-grey-400);
-    --box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-200);
-    --gap: 8px;
-    --height: 64px;
+    --background-default: var(--color-grey-400);
+    --border-radius: 999px;
+    --border-width: 0px;
+    --box-shadow-default: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-200);
+    // Long on purpose: it is the "starting up" signal itself, it plays once per app, and input is never blocked while it plays.
+    --hop-duration: 0.7s;
     --icon-ratio: 0.45;
-    --item-background: var(--color-white-300);
-    --item-box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-100);
-    --item-color: var(--color-text-500);
+    // Shelf space around the resting icons. Its own name: the global per-element reset would swallow '--padding-*' on the items.
+    --inset: 12px;
     --item-radius: 999px;
     --light-color: var(--color-text-500);
-    // The running light comes on as the icon first lands (0.55 of the 700ms hop), not on click.
-    --light-delay: 0.385s;
+    // The running light comes on as the icon first lands (55% into 'dock-hop'), not on click.
+    --light-delay: calc(var(--hop-duration) * 0.55);
     --light-size: 4px;
-    --padding: 12px;
-    --radius: 999px;
-    // Read by the magnification spring (JS) when the dock connects.
-    --size-peak: 72px;
+    // Stands in for the overdamped spring the swell used to run on: no overshoot, settled in about 0.3s.
+    --magnify-duration: 0.3s;
+    --magnify-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --padding-horizontal: calc(var(--inset) - var(--spacing) / 2);
+    --padding-vertical: 0px;
+    // The hovered icon peaks and each neighbour steps a third of the way back to rest.
+    --size-far: calc(var(--size-rest) + (var(--size-peak) - var(--size-rest)) / 3);
+    --size-near: calc(var(--size-rest) + (var(--size-peak) - var(--size-rest)) * 2 / 3);
+    --size-peak: 54px;
     --size-rest: 40px;
+    // Split into padding on each item so the gaps are hoverable too.
+    --spacing: 8px;
 
 
     &--square {
+        --border-radius: var(--border-radius-700);
         --item-radius: var(--border-radius-600);
-        --radius: var(--border-radius-700);
     }
 
-    &--subtle {
-        --size-peak: 54px;
+    &-button {
+        --background-default: var(--color-white-300);
+        --border-radius: var(--item-radius);
+        --box-shadow-default: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-100);
+        --color: var(--color-text-500);
+    }
+
+    &-item {
+        --size: var(--size-rest);
+
+        // The hovered icon peaks and swells its two neighbours on each side. Touch has no hover to follow, and
+        // reduced motion keeps the icons still.
+        @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+            &:hover {
+                --size: var(--size-peak);
+            }
+
+            &:has(+ .dock-item:hover),
+            &:hover + .dock-item {
+                --size: var(--size-near);
+            }
+
+            &:has(+ .dock-item + .dock-item:hover),
+            &:hover + .dock-item + .dock-item {
+                --size: var(--size-far);
+            }
+        }
+    }
+
+    // Both anchor to the item's top, which is the shelf's; clears an icon at full swell by 12px.
+    &-label.tooltip-message,
+    &-label.tooltip-shared {
+        --box-shadow: none;
+        --font-weight: var(--font-weight-500);
+        --spacer: calc(var(--size-peak) - var(--size-rest) - var(--inset) + 12px);
+    }
+
+    &-label.tooltip-message {
+        --border-radius: var(--border-radius-300);
+        --offset: 4px;
+        --padding-horizontal: 8px;
+        --padding-vertical: 4px;
+        --transition-duration: 0.15s;
+        --transition-timing-function: ease-out;
+    }
+
+    &-label.tooltip-shared {
+        --padding: 4px 8px;
+        --radius: var(--border-radius-300);
+    }
+
+
+    // A zero-length hop still ends, so the launch clears itself.
+    @media (prefers-reduced-motion: reduce) {
+        --hop-duration: 0s;
     }
 }

package/src/components/editor/code/changes.ts

@@ -0,0 +1,111 @@
+import { diffLines } from '../diffs/engine';
+import type { Edit } from './document';
+
+
+// A changed run of lines against the baseline, 0-based and half-open: [from, to) in the document, 'original' in the
+// baseline. A deletion has from === to and is drawn at the top of line 'from'.
+type LineChange = {
+    from: number;
+    kind: 'added' | 'deleted' | 'modified';
+    original: { from: number; to: number };
+    to: number;
+};
+
+
+const BREAK = /\r\n|\r|\n/g;
+
+const TRAILING_BREAK = /(?:\r\n|\r|\n)$/;
+
+
+// Lines with their line breaks; a text ending in a break has an empty last line, as the document counts them.
+function lines(text: string) {
+    let at = 0,
+        out: string[] = [];
+
+    for (let match of text.matchAll(BREAK)) {
+        out.push(text.slice(at, match.index + match[0].length));
+        at = match.index + match[0].length;
+    }
+
+    out.push(text.slice(at));
+
+    return out;
+}
+
+function offset(list: readonly string[], index: number) {
+    let total = 0;
+
+    for (let i = 0; i < index; i++) {
+        total += list[i].length;
+    }
+
+    return total;
+}
+
+
+// The kind of each changed line (0-based), as the gutter draws it; a deletion marks the line below it.
+const changeLines = (changes: readonly LineChange[], count: number) => {
+    let out = new Map<number, LineChange['kind']>();
+
+    for (let i = 0, n = changes.length; i < n; i++) {
+        let change = changes[i];
+
+        if (change.kind === 'deleted') {
+            let line = Math.min(change.from, count - 1);
+
+            if (!out.has(line)) {
+                out.set(line, 'deleted');
+            }
+
+            continue;
+        }
+
+        for (let line = change.from; line < change.to; line++) {
+            out.set(line, change.kind);
+        }
+    }
+
+    return out;
+};
+
+// Line changes from the baseline to the text.
+const lineChanges = (baseline: string, text: string): LineChange[] => {
+    let changes = diffLines(baseline, text),
+        out: LineChange[] = [];
+
+    for (let i = 0, n = changes.length; i < n; i++) {
+        let { modified, original } = changes[i];
+
+        out.push({
+            from: modified.from,
+            kind: original.from === original.to ? 'added' : modified.from === modified.to ? 'deleted' : 'modified',
+            original: { from: original.from, to: original.to },
+            to: modified.to
+        });
+    }
+
+    return out;
+};
+
+// The edit that puts a change's baseline lines back, line breaks in the document's own style.
+const revertChange = (baseline: string, text: string, change: LineChange, eol: string): Edit => {
+    let current = lines(text),
+        from = offset(current, change.from),
+        insert = lines(baseline).slice(change.original.from, change.original.to).map((line) => line.replace(TRAILING_BREAK, eol)).join(''),
+        to = offset(current, change.to);
+
+    // Lines deleted from the end of the text come back after its last line, which has no break of its own.
+    if (change.from === current.length) {
+        insert = eol + insert;
+    }
+    // Lines added at the end go with the break before them.
+    else if (!insert && change.from > 0 && change.to === current.length) {
+        from -= current[change.from - 1].match(TRAILING_BREAK)?.[0].length ?? 0;
+    }
+
+    return { from, insert, to };
+};
+
+
+export { changeLines, lineChanges, revertChange };
+export type { LineChange };

package/src/components/editor/code/clipboard.ts

@@ -0,0 +1,81 @@
+import type { EditorDocument, Selection } from './document';
+
+
+// One entry per selection, so pasting into as many carets puts each piece back where it came from.
+const MIME = 'application/x-esportsplus-code-editor';
+
+
+// The ranges a copy or cut takes: the selections, or every caret's whole line when nothing is selected.
+const copied = (document: EditorDocument): readonly Selection[] => {
+    let ranges = document.selections;
+
+    for (let i = 0, n = ranges.length; i < n; i++) {
+        if (ranges[i].start !== ranges[i].end) {
+            return ranges;
+        }
+    }
+
+    let lines: Selection[] = [];
+
+    for (let i = 0, n = ranges.length; i < n; i++) {
+        let line = document.lineAt(ranges[i].start);
+
+        lines.push({
+            direction: 'none',
+            end: line + 1 < document.lineCount ? document.lineStart(line + 1) : document.value.length,
+            start: document.lineStart(line)
+        });
+    }
+
+    return lines;
+};
+
+// What a paste inserts: one piece per caret when the clipboard holds exactly that many, otherwise the plain text.
+// Malformed metadata from elsewhere falls back to the plain text, never to a partial edit.
+const read = (data: DataTransfer, count: number): string | string[] => {
+    let text = data.getData('text/plain'),
+        encoded = data.getData(MIME),
+        chunks: unknown = null;
+
+    if (count < 2) {
+        return text;
+    }
+
+    if (encoded) {
+        try {
+            chunks = JSON.parse(encoded);
+        }
+        catch {
+            chunks = null;
+        }
+    }
+
+    if (
+        Array.isArray(chunks) &&
+        chunks.length === count &&
+        chunks.every((chunk) => typeof chunk === 'string') &&
+        (chunks.join('\n') === text || chunks.join('\r\n') === text || chunks.join('\r') === text)
+    ) {
+        return chunks as string[];
+    }
+
+    let lines = text.split(/\r\n|\r|\n/);
+
+    return lines.length === count ? lines : text;
+};
+
+// Writes each range's text, joined by the document's line ending, plus the pieces for a multi-caret paste.
+const write = (data: DataTransfer, document: EditorDocument, ranges: readonly Selection[]) => {
+    let chunks: string[] = [],
+        value = document.value;
+
+    for (let i = 0, n = ranges.length; i < n; i++) {
+        chunks.push(value.slice(ranges[i].start, ranges[i].end));
+    }
+
+    data.setData('text/plain', chunks.join(document.eol));
+    data.setData(MIME, JSON.stringify(chunks));
+};
+
+
+export { copied, MIME, read, write };

package/src/components/editor/code/colors.ts

@@ -0,0 +1,278 @@
+import type { Language, Token } from './syntax';
+
+
+// A CSS color literal within a line; 'value' is its text.
+type ColorLiteral = { from: number; to: number; value: string };
+
+type Rgba = { a: number; b: number; g: number; r: number };
+
+
+const FUNCTIONS = new Set(['color', 'hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'rgb', 'rgba']);
+
+// Arguments are kept to characters a style attribute can hold as is.
+const FUNCTION = /\b(?:rgba?|hsla?|hwb|oklab|oklch|lab|lch)\([\w\s.,%/+-]*\)/gi;
+
+// A color function token's arguments, held to the same characters: the literal ends up in a style attribute.
+const FUNCTION_ARGUMENTS = /^\([\w\s.,%/+-]*\)$/;
+
+const HEX = /(?<![\w&#$])#(?:[\da-f]{8}|[\da-f]{6}|[\da-f]{3,4})(?![\w-])/gi;
+
+const HEX_VALUE = /^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
+
+const NAMED = new Set((
+    'aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood ' +
+    'cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray ' +
+    'darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen ' +
+    'darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue ' +
+    'firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew ' +
+    'hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan ' +
+    'lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray ' +
+    'lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue ' +
+    'mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred ' +
+    'midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid ' +
+    'palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple ' +
+    'rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue ' +
+    'slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white ' +
+    'whitesmoke yellow yellowgreen'
+).split(' '));
+
+// A named color right after a property's colon, inside an HTML attribute.
+const STYLE_NAMED = /:\s*([a-z]+)\b/gi;
+
+
+function alpha(value: string | undefined) {
+    if (value === undefined || value === 'none') {
+        return 1;
+    }
+
+    return clampUnit(value.endsWith('%') ? parseFloat(value) / 100 : parseFloat(value));
+}
+
+function channel(value: string) {
+    if (value === 'none') {
+        return 0;
+    }
+
+    return Math.round(Math.min(255, Math.max(0, value.endsWith('%') ? parseFloat(value) * 2.55 : parseFloat(value))));
+}
+
+function clampUnit(value: number) {
+    return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+}
+
+function degrees(value: string) {
+    let number = parseFloat(value);
+
+    if (value.endsWith('turn')) {
+        return number * 360;
+    }
+
+    if (value.endsWith('grad')) {
+        return number * 0.9;
+    }
+
+    if (value.endsWith('rad')) {
+        return (number * 180) / Math.PI;
+    }
+
+    return number;
+}
+
+function hex(color: Rgba) {
+    let pair = (n: number) => n.toString(16).padStart(2, '0'),
+        a = Math.round(color.a * 255);
+
+    return ('#' + pair(color.r) + pair(color.g) + pair(color.b) + (a < 255 ? pair(a) : '')).toUpperCase();
+}
+
+function hsl(color: Rgba) {
+    let r = color.r / 255,
+        g = color.g / 255,
+        b = color.b / 255,
+        max = Math.max(r, g, b),
+        min = Math.min(r, g, b),
+        l = (max + min) / 2,
+        d = max - min,
+        h = 0,
+        s = 0;
+
+    if (d) {
+        s = d / (1 - Math.abs(2 * l - 1));
+        h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+        h = (h * 60 + 360) % 360;
+    }
+
+    return { h: Math.round(h), l: Math.round(l * 100), s: Math.round(s * 100) };
+}
+
+function parseHex(value: string): Rgba | null {
+    if (!HEX_VALUE.test(value)) {
+        return null;
+    }
+
+    let digits = value.slice(1),
+        full = digits.length <= 4 ? [...digits].map((c) => c + c).join('') : digits,
+        byte = (i: number) => parseInt(full.slice(i, i + 2), 16);
+
+    return { a: full.length === 8 ? byte(6) / 255 : 1, b: byte(4), g: byte(2), r: byte(0) };
+}
+
+function parts(literal: string) {
+    let open = literal.indexOf('(');
+
+    return literal.slice(open + 1, -1).trim().split(/\s*[\s,/]\s*/).filter(Boolean);
+}
+
+function round(value: number) {
+    return Number(value.toFixed(2));
+}
+
+// Literals inside one string token, found by pattern.
+function scan(text: string, from: number, to: number, named: boolean, out: ColorLiteral[]) {
+    let slice = text.slice(from, to);
+
+    if (slice.indexOf('#') !== -1) {
+        HEX.lastIndex = 0;
+
+        for (let match = HEX.exec(slice); match; match = HEX.exec(slice)) {
+            out.push({ from: from + match.index, to: from + match.index + match[0].length, value: match[0] });
+        }
+    }
+
+    if (slice.indexOf('(') !== -1) {
+        FUNCTION.lastIndex = 0;
+
+        for (let match = FUNCTION.exec(slice); match; match = FUNCTION.exec(slice)) {
+            out.push({ from: from + match.index, to: from + match.index + match[0].length, value: match[0] });
+        }
+    }
+
+    if (named && slice.indexOf(':') !== -1) {
+        STYLE_NAMED.lastIndex = 0;
+
+        for (let match = STYLE_NAMED.exec(slice); match; match = STYLE_NAMED.exec(slice)) {
+            if (NAMED.has(match[1].toLowerCase())) {
+                let start = from + match.index + match[0].length - match[1].length;
+
+                out.push({ from: start, to: start + match[1].length, value: match[1] });
+            }
+        }
+    }
+}
+
+
+// The color literals of a line, given its tokens: CSS values in stylesheets (and styles embedded in HTML), and hex or
+// color functions in any string literal.
+const colorLiterals = (text: string, tokens: readonly Token[], language: Language): ColorLiteral[] => {
+    let out: ColorLiteral[] = [],
+        stylesheet = language === 'css' || language === 'scss' || language === 'html';
+
+    for (let i = 0, n = tokens.length; i < n; i++) {
+        let { from, kind, to } = tokens[i];
+
+        if (kind === 'color') {
+            let value = text.slice(from, to);
+
+            if (HEX_VALUE.test(value)) {
+                out.push({ from, to, value });
+            }
+        }
+        else if (kind === 'string') {
+            scan(text, from, to, language === 'html', out);
+        }
+        else if (stylesheet && kind === 'keyword') {
+            let value = text.slice(from, to);
+
+            if (NAMED.has(value.toLowerCase()) && text[from - 1] !== '-' && text[to] !== '-') {
+                out.push({ from, to, value });
+            }
+        }
+        else if (stylesheet && kind === 'function' && text[to] === '(' && FUNCTIONS.has(text.slice(from, to).toLowerCase())) {
+            let close = text.indexOf(')', to),
+                nested = text.indexOf('(', to + 1);
+
+            if (close !== -1 && (nested === -1 || nested > close) && FUNCTION_ARGUMENTS.test(text.slice(to, close + 1))) {
+                out.push({ from, to: close + 1, value: text.slice(from, close + 1) });
+            }
+        }
+    }
+
+    return out.sort((a, b) => a.from - b.from);
+};
+
+// A picked hex color written in the literal's own notation where it has one: hex keeps its case, rgb() and hsl()
+// keep commas or spaces; any other notation becomes hex.
+const formatColor = (literal: string, value: string) => {
+    let color = parseHex(value);
+
+    if (!color) {
+        return literal;
+    }
+
+    if (literal.startsWith('#')) {
+        let out = hex(color);
+
+        return literal === literal.toLowerCase() ? out.toLowerCase() : out;
+    }
+
+    let name = literal.slice(0, Math.max(0, literal.indexOf('('))).toLowerCase(),
+        comma = literal.includes(','),
+        a = round(color.a);
+
+    if (name === 'rgb' || name === 'rgba') {
+        if (comma) {
+            return a < 1 || name === 'rgba' ? `rgba(${color.r}, ${color.g}, ${color.b}, ${a})` : `rgb(${color.r}, ${color.g}, ${color.b})`;
+        }
+
+        return `${name}(${color.r} ${color.g} ${color.b}${a < 1 ? ` / ${a}` : ''})`;
+    }
+
+    if (name === 'hsl' || name === 'hsla') {
+        let { h, l, s } = hsl(color);
+
+        if (comma) {
+            return a < 1 || name === 'hsla' ? `hsla(${h}, ${s}%, ${l}%, ${a})` : `hsl(${h}, ${s}%, ${l}%)`;
+        }
+
+        return `${name}(${h} ${s}% ${l}%${a < 1 ? ` / ${a}` : ''})`;
+    }
+
+    return hex(color);
+};
+
+// Hex, rgb() and hsl() literals as '#RRGGBB' or '#RRGGBBAA'; null for notations that need the browser to resolve.
+const toHex = (literal: string) => {
+    let value = literal.trim();
+
+    if (value.startsWith('#')) {
+        let color = parseHex(value);
+
+        return color ? hex(color) : null;
+    }
+
+    let name = value.slice(0, Math.max(0, value.indexOf('('))).toLowerCase(),
+        args = parts(value);
+
+    if ((name === 'rgb' || name === 'rgba') && args.length >= 3) {
+        return hex({ a: alpha(args[3]), b: channel(args[2]), g: channel(args[1]), r: channel(args[0]) });
+    }
+
+    if ((name === 'hsl' || name === 'hsla') && args.length >= 3) {
+        let h = ((degrees(args[0]) % 360) + 360) % 360,
+            s = clampUnit(parseFloat(args[1]) / 100),
+            l = clampUnit(parseFloat(args[2]) / 100),
+            f = (n: number) => {
+                let k = (n + h / 30) % 12;
+
+                return Math.round((l - s * Math.min(l, 1 - l) * Math.max(-1, Math.min(k - 3, 9 - k, 1))) * 255);
+            };
+
+        return hex({ a: alpha(args[3]), b: f(4), g: f(8), r: f(0) });
+    }
+
+    return null;
+};
+
+
+export { colorLiterals, formatColor, toHex };
+export type { ColorLiteral };