@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/shortcut-recorder/index.ts

@@ -1,11 +1,16 @@
 import { html, type Attributes } from '@esportsplus/template';
-import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import { effect, flush, onCleanup, reactive } from '@esportsplus/reactivity';
+import error, { type Direction } from '~/components/error';
+import { mac as apple } from '~/shared/platform';
+import '~/components/button/scss/index.scss';
 import './scss/index.scss';
 
 
 type A = Attributes & {
-    label: string;
-    state?: { value: string };
+    // Where the error message opens, as a tooltip direction.
+    direction?: Direction;
+    limit?: number;
+    state?: { error: string, value: string };
     taken?: (shortcut: string) => string | null | undefined;
     value?: string;
 };
@@ -30,8 +35,8 @@ const FUNCTION_KEY = /^F\d{1,2}$/;
 
 const MODIFIER_KEYS = new Set(['Alt', 'Control', 'Meta', 'OS', 'Shift']);
 
-// Tokens are joined with '+', so a trailing '+' is the Plus key itself.
-const SEPARATOR = /\+(?=.)/;
+// Tokens are joined with '+' and the Plus key is itself '+', so tokens sit at every other match.
+const TOKEN = /[^+]+|\+/g;
 
 
 function glyph(token: string, mac: boolean) {
@@ -94,83 +99,124 @@ function modifiers(e: KeyboardEvent, mac: boolean) {
 }
 
 function parse(value: string) {
-    return value ? value.split(SEPARATOR) : [];
+    return (value.match(TOKEN) ?? []).filter((_, i) => i % 2 === 0);
 }
 
 
-export default ({ label, taken, value = '', state = reactive({ value }), ...attributes }: A) => {
-    let connected = false,
+export default ({ direction = 'ne', limit, taken, value = '', state = reactive({ error: '', value }), ...attributes }: A) => {
+    let chord: string[] = [],
+        connected = false,
         field: HTMLElement | undefined,
         keys = reactive([] as Key[]),
         listeners: AbortController | undefined,
-        mac = /Mac|iPhone|iPad/.test(navigator.platform),
-        status = reactive({ error: '', recording: false, shake: 0 }),
-        sync = effect(() => {
-            let tokens = status.recording ? [] : parse(state.value);
+        mac = apple(),
+        pressed: string[] = [],
+        status = reactive({ recording: false });
 
-            untrack(() => show(tokens, connected ? 'settle' : ''));
-        }),
-        timer: ReturnType<typeof setTimeout> | undefined;
+    function commit(held: string[]) {
+        let shortcut = chord.join('+'),
+            owner = shortcut === state.value ? null : taken?.(shortcut);
+
+        chord = [];
+        pressed = [];
 
+        if (owner) {
+            fail(`Used by ${owner}`);
+            show(held, 'enter');
+            return;
+        }
+
+        state.value = shortcut;
+        stop();
+    }
+
+    // A repeat is cleared and flushed first, so the error sees a new failure and shakes the field again.
     function fail(text: string) {
-        clearTimeout(timer);
-        status.error = text;
-        // Alternating the parity swaps between identical keyframes, restarting the shake.
-        status.shake = status.shake === 1 ? 2 : 1;
-        timer = setTimeout(() => status.error = '', ERROR_DURATION);
+        if (state.error === text) {
+            state.error = '';
+            flush();
+        }
+
+        state.error = text;
     }
 
     function onaway(e: Event) {
-        if (e.type === 'blur' || !field?.contains(e.target as Node | null)) {
+        if (status.recording && (e.type === 'blur' || !field?.contains(e.target as Node | null))) {
             stop();
         }
     }
 
     // While recording every key belongs to the field, taken before the page's own shortcuts can act on it.
+    // Keys gather into one chord until a key is released, or until the chord reaches 'limit' when one is set.
     function onkeydown(e: KeyboardEvent) {
         e.preventDefault();
         e.stopImmediatePropagation();
 
-        let held = modifiers(e, mac);
-
-        if (MODIFIER_KEYS.has(e.key)) {
-            show(held, 'enter');
+        if (e.repeat) {
             return;
         }
 
-        if (!held.length && e.key === 'Escape') {
-            stop();
-            return;
-        }
+        // The next attempt takes the field back, so an error never sits over keys being pressed.
+        state.error = '';
 
-        if (!held.length && (e.key === 'Backspace' || e.key === 'Delete')) {
-            state.value = '';
-            stop();
-            return;
-        }
+        let held = modifiers(e, mac);
+
+        if (!MODIFIER_KEYS.has(e.key)) {
+            if (!held.length && !pressed.length && e.key === 'Escape') {
+                stop();
+                return;
+            }
+
+            if (!held.length && !pressed.length && (e.key === 'Backspace' || e.key === 'Delete')) {
+                state.value = '';
+                stop();
+                return;
+            }
 
-        let key = keyName(e);
+            let key = keyName(e);
 
-        if (!held.length && !FUNCTION_KEY.test(key)) {
-            fail(`Add ${mac ? '⌘, ⌥ or ⇧' : 'Ctrl, Alt or Shift'}`);
-            return;
+            if (!held.length && !FUNCTION_KEY.test(key) && !pressed.some((token) => FUNCTION_KEY.test(token))) {
+                fail(`Add ${mac ? '⌘, ⌥ or ⇧' : 'Ctrl, Alt or Shift'}`);
+                return;
+            }
+
+            if (limit && held.length + pressed.length >= limit) {
+                fail(`Up to ${limit} ${limit === 1 ? 'key' : 'keys'}`);
+                return;
+            }
+
+            if (!pressed.includes(key)) {
+                pressed.push(key);
+            }
         }
 
-        let shortcut = [...held, key].join('+'),
-            owner = shortcut === state.value ? null : taken?.(shortcut);
+        let tokens = [...held, ...pressed];
 
-        if (owner) {
-            fail(`Used by ${owner}`);
+        show(tokens, 'enter');
+
+        if (!pressed.length) {
             return;
         }
 
-        state.value = shortcut;
-        stop();
+        chord = tokens;
+
+        if (tokens.length === limit) {
+            commit(held);
+        }
     }
 
+    // macOS drops keyup for keys pressed while ⌘ is held, so releasing any key, modifiers included, ends the chord.
     function onkeyup(e: KeyboardEvent) {
         e.stopImmediatePropagation();
-        show(modifiers(e, mac), 'enter');
+
+        let held = modifiers(e, mac);
+
+        if (chord.length) {
+            commit(held);
+            return;
+        }
+
+        show(held, 'enter');
     }
 
     // Recording keeps caps that are still held in place so only the new ones animate in.
@@ -198,87 +244,80 @@ export default ({ label, taken, value = '', state = reactive({ value }), ...attr
     }
 
     function start() {
-        clearTimeout(timer);
-        status.error = '';
+        chord = [];
+        pressed = [];
         status.recording = true;
+        state.error = '';
 
         listeners?.abort();
         listeners = new AbortController();
 
         let signal = listeners.signal;
 
-        document.addEventListener('pointerdown', onaway, { signal });
-        window.addEventListener('blur', onaway, { signal });
         window.addEventListener('keydown', onkeydown, { capture: true, signal });
         window.addEventListener('keyup', onkeyup, { capture: true, signal });
     }
 
     function stop() {
-        clearTimeout(timer);
         listeners?.abort();
-        status.error = '';
         status.recording = false;
+        state.error = '';
     }
 
+    effect(() => status.recording ? [] : parse(state.value), (tokens) => show(tokens, connected ? 'settle' : ''));
+
     onCleanup(() => {
-        clearTimeout(timer);
         listeners?.abort();
-        sync();
     });
 
-    return html`
-        <div class='shortcut-recorder' ${attributes}>
-            <div class='shortcut-recorder-label'>
-                ${label}
-                <div class='shortcut-recorder-status' role='status'>
-                    ${() => status.error && html`<span class='shortcut-recorder-error'>${status.error}</span>`}
-                </div>
-            </div>
-            <button
-                aria-label='${() => `${label} shortcut: ${state.value ? parse(state.value).map((token) => glyph(token, mac)).join(' ') : 'none'}. ${status.recording ? 'Recording, press the new keys, Escape to cancel, Backspace to clear.' : 'Press to change.'}`}'
-                aria-pressed='${() => status.recording ? 'true' : 'false'}'
-                class='shortcut-recorder-field'
-                data-shake='${() => status.shake}'
-                type='button'
-                ${{
-                    class: () => status.recording && '--active',
-                    onclick: function(this: HTMLElement) {
-                        field = this;
-
-                        if (status.recording) {
-                            stop();
-                        }
-                        else {
-                            start();
-                        }
-                    },
-                    onconnect: () => {
-                        connected = true;
+    return error({ direction, duration: ERROR_DURATION, state }, html`
+        <button
+            aria-pressed='${() => status.recording ? 'true' : 'false'}'
+            class='shortcut-recorder'
+            type='button'
+            ${attributes}
+            ${{
+                class: [
+                    () => status.recording && '--active',
+                    () => state.error && '--invalid'
+                ],
+                onclick: () => {
+                    if (status.recording) {
+                        stop();
                     }
-                }}
-            >
-                ${html.reactive(keys, (key) => html`
-                    <kbd
-                        class='shortcut-recorder-key ${key.animation && `shortcut-recorder-key--${key.animation}`}'
-                        style='--index: ${key.index}'
-                    >
-                        ${glyph(key.token, mac)}
-                    </kbd>
-                `)}
-                ${() => {
-                    if (keys.length) {
-                        return '';
+                    else {
+                        start();
                     }
-
-                    return html`
-                        <span class='shortcut-recorder-placeholder ${connected && 'shortcut-recorder-placeholder--fade'}'>
-                            ${status.recording
-                                ? html`<span class='shortcut-recorder-dot' aria-hidden='true'></span>Press keys`
-                                : 'None'}
-                        </span>
-                    `;
-                }}
-            </button>
-        </div>
-    `;
+                },
+                onconnect: (element: HTMLElement) => {
+                    connected = true;
+                    field = element;
+                },
+                ondocumentpointerdown: onaway,
+                onwindowblur: onaway
+            }}
+        >
+            ${html.reactive(keys, (key) => html`
+                <kbd
+                    class='button button--kbd shortcut-recorder-key ${key.animation && `shortcut-recorder-key--${key.animation}`}'
+                    style='--index: ${key.index}'
+                >
+                    ${glyph(key.token, mac)}
+                </kbd>
+            `)}
+            ${() => {
+                if (keys.length) {
+                    return '';
+                }
+
+                return html`
+                    <span class='shortcut-recorder-placeholder ${connected && 'shortcut-recorder-placeholder--fade'}'>
+                        ${status.recording
+                            ? html`<span class='shortcut-recorder-dot' aria-hidden='true'></span>Press keys`
+                            : 'None'}
+                    </span>
+                `;
+            }}
+        </button>
+    `);
 };

package/src/components/shortcut-recorder/scss/index.scss

@@ -1,81 +1,47 @@
+@use '/shared';
+@use '/tokens';
 @use 'variables';
 
 .shortcut-recorder {
+    @extend %background-state, %border-state;
     align-items: center;
+    background: var(--background);
+    border: 0;
+    border-radius: var(--border-radius);
+    box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
     color: var(--color);
+    cursor: pointer;
     display: flex;
+    flex-shrink: 0;
+    font: inherit;
     font-size: var(--font-size);
     gap: var(--gap);
-    justify-content: space-between;
+    height: var(--height);
+    justify-content: flex-end;
+    min-width: var(--min-width);
+    outline: none;
+    padding: 0 var(--padding-horizontal);
+    transition:
+        background var(--transition-duration) var(--timing-function-out),
+        box-shadow var(--transition-duration) var(--timing-function-out);
+
+    // Recording already draws a dark edge, a focus ring on top of it would double up.
+    #{tokens.state(inactive)}:focus-visible {
+        outline: var(--focus-width) solid var(--focus-color);
+        outline-offset: var(--focus-offset);
+    }
 
     &-dot {
         animation: shortcut-recorder-blink 1.1s ease-in-out infinite;
-        background: var(--color-error);
+        background: var(--color-dot);
         border-radius: 50%;
         height: 6px;
         width: 6px;
     }
 
-    &-error {
-        animation: shortcut-recorder-reveal 180ms var(--timing-function-out);
-        color: var(--color-error);
-        display: block;
-        font-size: var(--font-size-small);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &-field {
-        align-items: center;
-        background: var(--background);
-        border: 0;
-        border-radius: var(--border-radius);
-        box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-        color: inherit;
-        cursor: pointer;
-        display: flex;
-        flex-shrink: 0;
-        font: inherit;
-        gap: var(--gap);
-        height: var(--height);
-        justify-content: flex-end;
-        min-width: var(--min-width);
-        outline: none;
-        padding: 0 var(--padding-horizontal);
-        transition:
-            background var(--transition-duration) var(--timing-function-out),
-            box-shadow var(--transition-duration) var(--timing-function-out);
-
-        // Recording already draws a dark edge, a focus ring on top of it would double up.
-        &:not(.--active):focus-visible {
-            outline: var(--focus-width) solid var(--focus-color);
-            outline-offset: var(--focus-offset);
-        }
-
-        &[data-shake='1'] {
-            animation: shortcut-recorder-shake-1 320ms ease-out;
-        }
-
-        &[data-shake='2'] {
-            animation: shortcut-recorder-shake-2 320ms ease-out;
-        }
-    }
-
+    // A legend inside the field, not a control, so it takes no hover or press
     &-key {
-        background: var(--background);
-        border-radius: var(--border-radius);
-        box-shadow:
-            inset 0 0 0 1px var(--border-color),
-            0 1px 0 var(--border-color);
-        display: grid;
-        font-family: inherit;
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-500);
-        height: var(--size);
-        min-width: var(--size);
-        padding: 0 var(--padding-horizontal);
-        place-items: center;
+        pointer-events: none;
 
         &--enter {
             animation: shortcut-recorder-enter 300ms var(--timing-function-spring) backwards;
@@ -86,13 +52,6 @@
         }
     }
 
-    // Fills the free space so the error beneath has room before it truncates.
-    &-label {
-        flex: 1 1 auto;
-        min-width: 0;
-        position: relative;
-    }
-
     &-placeholder {
         align-items: center;
         color: var(--color-muted);
@@ -100,23 +59,16 @@
         font-size: var(--font-size-small);
         gap: 6px;
         padding: 0 6px;
+        transition: color var(--transition-duration) var(--timing-function-out);
 
         &--fade {
             animation: shortcut-recorder-fade 180ms var(--timing-function-out);
         }
     }
 
-    // Hangs below the label without taking room, so labels stay centred against their fields.
-    &-status {
-        inset: 100% 0 auto;
-        padding-top: 2px;
-        position: absolute;
-    }
-
     @media (prefers-reduced-motion: reduce) {
+        &,
         &-dot,
-        &-error,
-        &-field,
         &-key,
         &-placeholder {
             animation: none;
@@ -125,6 +77,11 @@
     }
 }
 
+// The field renders inside an 'error', which takes its place in the layout, so the wrapper keeps it from shrinking.
+.error:has(> .shortcut-recorder) {
+    flex-shrink: 0;
+}
+
 @keyframes shortcut-recorder-blink {
     50% {
         opacity: 0.25;
@@ -145,14 +102,6 @@
     }
 }
 
-@keyframes shortcut-recorder-reveal {
-    from {
-        filter: blur(3px);
-        opacity: 0;
-        translate: 0 -2px;
-    }
-}
-
 @keyframes shortcut-recorder-settle {
     from {
         opacity: 0.6;
@@ -160,39 +109,3 @@
         translate: 0 -3px;
     }
 }
-
-@keyframes shortcut-recorder-shake-1 {
-    20% {
-        translate: -4px;
-    }
-
-    40% {
-        translate: 4px;
-    }
-
-    60% {
-        translate: -3px;
-    }
-
-    80% {
-        translate: 3px;
-    }
-}
-
-@keyframes shortcut-recorder-shake-2 {
-    20% {
-        translate: -4px;
-    }
-
-    40% {
-        translate: 4px;
-    }
-
-    60% {
-        translate: -3px;
-    }
-
-    80% {
-        translate: 3px;
-    }
-}

package/src/components/shortcut-recorder/scss/variables.scss

@@ -1,54 +1,42 @@
 @use '/tokens';
 
 .shortcut-recorder {
+    --background-active: var(--color-white-300);
+    --background-default: var(--color-grey-400);
+    --background-hover: var(--color-white-300);
+    // Held down it keeps the hover look until the click starts recording.
+    --background-pressed: var(--background-hover);
+    --border-color-active: var(--color-text-500);
+    --border-color-default: var(--color-border-400);
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-hover);
+    --border-radius: var(--border-radius-500);
+    --border-width: var(--border-width-default);
+    --border-width-active: 1.5px;
+    --border-width-default: 1px;
     --color: var(--color-text-500);
+    --color-dot: var(--color-red-400);
     --color-error: var(--color-red-400);
     --color-muted: var(--color-text-300);
+    --focus-color: var(--color-text-500);
+    --focus-offset: 2px;
+    --focus-width: 2px;
     --font-size: var(--font-size-400);
     --font-size-small: var(--font-size-300);
-    --gap: var(--size-400);
+    --gap: 4px;
+    --height: 36px;
+    --min-width: 96px;
+    --padding-horizontal: 6px;
     --timing-function-out: cubic-bezier(0.23, 1, 0.32, 1);
     --timing-function-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --transition-duration: 150ms;
 
-    &-field {
-        --background: var(--background-default);
-        --background-active: var(--color-white-300);
-        --background-default: var(--color-grey-400);
-        --background-hover: var(--color-white-300);
-        --border-color: var(--border-color-default);
-        --border-color-active: var(--color-text-500);
-        --border-color-default: var(--color-border-400);
-        --border-color-hover: var(--border-color-default);
-        --border-radius: var(--border-radius-500);
-        --border-width: var(--border-width-default);
-        --border-width-active: 1.5px;
-        --border-width-default: 1px;
-        --focus-color: var(--color-text-500);
-        --focus-offset: 2px;
-        --focus-width: 2px;
-        --gap: 4px;
-        --height: 36px;
-        --min-width: 96px;
-        --padding-horizontal: 6px;
-        --transition-duration: 150ms;
-
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-        }
-
-        #{tokens.state(active)} {
-            --background: var(--background-active);
-            --border-color: var(--border-color-active);
-            --border-width: var(--border-width-active);
-        }
+    #{tokens.state(active)} {
+        --border-width: var(--border-width-active);
     }
 
-    &-key {
-        --background: var(--color-white-300);
-        --border-color: var(--color-border-400);
-        --border-radius: var(--border-radius-300);
-        --padding-horizontal: 6px;
-        --size: 24px;
+    // The 'error' it renders in turns the edge red; the placeholder turns with it.
+    &.--invalid {
+        --color-muted: var(--color-error);
     }
 }