@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/code-morph/scss/index.scss

@@ -0,0 +1,384 @@
+@use 'variables';
+
+.code-morph {
+    background: var(--background);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow);
+    color: var(--color);
+    max-width: 100%;
+    overflow: hidden;
+    width: var(--width);
+
+
+    // Rows that gained code in this step, so the reader knows where to look once the motion settles.
+    &-added {
+        background: color-mix(in oklab, var(--color-text-500) 4%, transparent);
+        border-left: 2px solid color-mix(in oklab, var(--color-text-500) 25%, transparent);
+        height: var(--row-height);
+        inset-inline: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity 0.15s ease-out;
+        z-index: 2;
+
+        &.--active {
+            opacity: 1;
+            transition: opacity 0.3s ease-out 0.3s;
+        }
+    }
+
+    // Fits the current step, so a short step leaves no empty editor below it; only the footer rides the edge.
+    &-code {
+        display: flex;
+        font-family: var(--font-family);
+        font-size: var(--font-size);
+        line-height: var(--row-height);
+        padding-block: 16px;
+        position: relative;
+        transition: height var(--move-duration) var(--move-timing-function);
+    }
+
+    &-copy {
+        background: none;
+        border: 0;
+        border-radius: var(--tab-radius);
+        color: var(--muted-color);
+        cursor: pointer;
+        display: grid;
+        flex-shrink: 0;
+        height: 36px;
+        outline: none;
+        place-items: center;
+        touch-action: manipulation;
+        transition:
+            color 0.15s ease-out,
+            scale 0.15s ease-out;
+        width: 36px;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+            outline-offset: 1px;
+        }
+
+        &:hover {
+            color: var(--color);
+        }
+    }
+
+    &-count {
+        color: var(--muted-color);
+        flex-shrink: 0;
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--font-weight-500);
+    }
+
+    &-footer {
+        align-items: center;
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        font-size: var(--font-size-400);
+        gap: 12px;
+        height: 48px;
+        padding-inline: var(--size-400);
+    }
+
+    &-gutter {
+        background: var(--background);
+        color: color-mix(in oklab, var(--muted-color) 60%, transparent);
+        flex-shrink: 0;
+        font-variant-numeric: tabular-nums;
+        left: 0;
+        padding-inline: var(--size-400);
+        position: sticky;
+        text-align: right;
+        user-select: none;
+        z-index: 1;
+    }
+
+    &-header {
+        align-items: center;
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        gap: 12px;
+        justify-content: space-between;
+        padding: 8px;
+    }
+
+    // Both icons share one grid cell, so the outgoing one stays centred under the incoming one.
+    &-icon {
+        filter: blur(0px);
+        grid-area: 1 / 1;
+        height: 16px;
+        transition:
+            filter 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+            opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+            scale 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+        width: 16px;
+
+        &--check,
+        .code-morph-copy.--copied &--copy {
+            filter: blur(4px);
+            opacity: 0;
+            scale: 0.25;
+        }
+
+        .code-morph-copy.--copied &--check {
+            filter: blur(0px);
+            opacity: 1;
+            scale: 1;
+        }
+    }
+
+    &-number {
+        height: var(--row-height);
+        transition: opacity 0.2s ease-out;
+
+        &.--hidden {
+            opacity: 0;
+        }
+    }
+
+    &-panel {
+        outline: none;
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+            outline-offset: -2px;
+        }
+    }
+
+    &-pill {
+        background: var(--pill-background);
+        border-radius: var(--tab-radius);
+        box-shadow: var(--pill-box-shadow);
+        height: 100%;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        transition:
+            translate var(--pill-duration) var(--pill-timing-function),
+            width var(--pill-duration) var(--pill-timing-function);
+
+        &.--instant {
+            transition: none;
+        }
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        margin: 0;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-tab {
+        background: none;
+        border: 0;
+        border-radius: var(--tab-radius);
+        color: var(--muted-color);
+        cursor: pointer;
+        font-size: var(--font-size-300);
+        font-weight: var(--font-weight-500);
+        height: 36px;
+        outline: none;
+        padding-inline: 12px;
+        position: relative;
+        touch-action: manipulation;
+        transition:
+            color 0.15s ease-out,
+            scale 0.15s ease-out;
+        user-select: none;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+            outline-offset: 1px;
+        }
+
+        &:hover,
+        &.--active {
+            color: var(--color);
+        }
+
+        &-label {
+            position: relative;
+        }
+    }
+
+    &-tabs {
+        align-items: center;
+        display: flex;
+        gap: 4px;
+        position: relative;
+    }
+
+    &-title {
+        grid-area: 1 / 1;
+        opacity: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition:
+            filter 0.12s cubic-bezier(0.23, 1, 0.32, 1),
+            opacity 0.12s cubic-bezier(0.23, 1, 0.32, 1);
+        white-space: nowrap;
+
+        &:not(.--active) {
+            filter: blur(2px);
+        }
+
+        &.--active {
+            animation: code-morph-title 0.24s cubic-bezier(0.23, 1, 0.32, 1);
+            opacity: 1;
+        }
+    }
+
+    &-titles {
+        display: grid;
+        flex: 1;
+        min-width: 0;
+    }
+
+    // New tokens wait so they arrive into space the moves have already opened; removed ones hold their red
+    // tint for a beat before going.
+    &-token {
+        border-radius: 3px;
+        color: var(--syntax-plain);
+        left: 0;
+        position: absolute;
+        top: 0;
+        transition:
+            background-color 0.2s ease,
+            color 0.2s ease,
+            transform var(--move-duration) var(--move-timing-function);
+        white-space: pre;
+
+        @each $kind in comment, fn, keyword, number, punct, string, type {
+            &--#{$kind} {
+                color: var(--syntax-#{$kind});
+            }
+        }
+
+        &.--enter {
+            animation: code-morph-enter 260ms cubic-bezier(0.23, 1, 0.32, 1) 300ms both;
+        }
+
+        &.--exit {
+            animation: code-morph-exit 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
+            background-color: color-mix(in oklab, var(--exit-color) 12%, transparent);
+            color: var(--exit-color);
+        }
+    }
+
+    &-tokens {
+        flex-shrink: 0;
+        position: relative;
+        white-space: pre;
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-code,
+        &-pill {
+            transition: none;
+        }
+
+        &-copy,
+        &-tab {
+            transition: color 0.15s ease-out;
+        }
+
+        &-title.--active {
+            animation-name: code-morph-fade-in;
+        }
+
+        &-token {
+            transition:
+                background-color 0.2s ease,
+                color 0.2s ease;
+
+            &.--enter {
+                animation: code-morph-fade-in 200ms ease 120ms both;
+            }
+
+            &.--exit {
+                animation: code-morph-fade-out 160ms ease both;
+            }
+        }
+    }
+}
+
+@keyframes code-morph-enter {
+    from {
+        filter: blur(4px);
+        opacity: 0;
+        translate: 0 4px;
+    }
+
+    to {
+        filter: none;
+        opacity: 1;
+        translate: 0 0;
+    }
+}
+
+@keyframes code-morph-exit {
+    0%, 40% {
+        filter: none;
+        opacity: 1;
+        translate: 0 0;
+    }
+
+    100% {
+        filter: blur(2px);
+        opacity: 0;
+        translate: 0 -3px;
+    }
+}
+
+@keyframes code-morph-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes code-morph-fade-out {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes code-morph-title {
+    from {
+        filter: blur(4px);
+        opacity: 0;
+        translate: 0 4px;
+    }
+
+    to {
+        filter: blur(0px);
+        opacity: 1;
+        translate: 0 0;
+    }
+}

package/src/components/code-morph/scss/variables.scss

@@ -0,0 +1,33 @@
+.code-morph {
+    --background: var(--color-grey-400);
+    --border-color: var(--color-border-300);
+    --box-shadow: 0 0 0 1px oklch(0 0 0 / 0.06), var(--box-shadow-200);
+    --color: var(--color-text-500);
+    --exit-color: var(--color-red-500);
+    --focus-color: var(--color-text-500);
+    --font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --font-size: var(--font-size-300);
+    --muted-color: var(--color-text-300);
+    // Moves run past the usual UI ceiling on purpose: this is explanatory motion, and the eye has to follow
+    // each token to its new place.
+    --move-duration: 480ms;
+    --move-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+    --pill-background: var(--color-white-300);
+    --pill-box-shadow: 0 0 0 1px oklch(0 0 0 / 0.06), var(--box-shadow-100);
+    --pill-duration: 0.3s;
+    --pill-timing-function: linear(0, 0.0432 4.2%, 0.1402 8.3%, 0.2575 12.5%, 0.3764 16.7%, 0.4867 20.8%, 0.584 25%, 0.667 29.2%, 0.7361 33.3%, 0.7925 37.5%, 0.838 41.7%, 0.8743 45.8%, 0.9029 50%, 0.9254 54.2%, 0.9428 58.3%, 0.9564 62.5%, 0.9668 66.7%, 0.9748 70.8%, 0.9809 75%, 0.9856 79.2%, 0.9892 83.3%, 0.9918 87.5%, 0.9939 91.7%, 0.9954 95.8%, 1);
+    --radius: var(--border-radius-700);
+    // Must match LINE in index.ts, which places the tokens on this grid.
+    --row-height: 22px;
+    // Syntax colours encode token kinds, so they keep their hue at roughly 4.5:1 on the surface.
+    --syntax-comment: var(--color-text-300);
+    --syntax-fn: oklch(from var(--color-blue-400) 0.5 0.14 255);
+    --syntax-keyword: oklch(from var(--color-purple-400) 0.5 0.15 300);
+    --syntax-number: oklch(from var(--color-red-400) 0.54 0.14 50);
+    --syntax-plain: var(--color);
+    --syntax-punct: color-mix(in oklab, var(--color-text-500) 55%, transparent);
+    --syntax-string: oklch(from var(--color-green-500) 0.5 0.11 150);
+    --syntax-type: oklch(from var(--color-blue-400) 0.5 0.1 200);
+    --tab-radius: var(--border-radius-400);
+    --width: 580px;
+}

package/src/components/collapsible-sidebar/index.ts

@@ -0,0 +1,193 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import '~/components/tooltip';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [COLLAPSIBLE_SIDEBAR_ITEM]?: Attributes;
+    [COLLAPSIBLE_SIDEBAR_NAV]?: Attributes;
+    [COLLAPSIBLE_SIDEBAR_TOGGLE]?: Attributes;
+    expanded?: boolean;
+    items: Item[];
+    label?: string;
+    selected?: string;
+    state?: State;
+};
+
+type D = Attributes & Pick<A, typeof COLLAPSIBLE_SIDEBAR_ITEM | typeof COLLAPSIBLE_SIDEBAR_NAV | typeof COLLAPSIBLE_SIDEBAR_TOGGLE>;
+
+type Item = {
+    icon: Renderable<unknown>;
+    id: string;
+    label: string;
+};
+
+type State = {
+    expanded: boolean;
+    selected: string;
+};
+
+
+const COLLAPSIBLE_SIDEBAR_ITEM = Symbol.for('@esportsplus/ui/collapsible-sidebar.item');
+
+const COLLAPSIBLE_SIDEBAR_NAV = Symbol.for('@esportsplus/ui/collapsible-sidebar.nav');
+
+const COLLAPSIBLE_SIDEBAR_TOGGLE = Symbol.for('@esportsplus/ui/collapsible-sidebar.toggle');
+
+// Long enough that sweeping the pointer across the rail doesn't flash tips, short enough to feel like the rail is answering.
+const TOOLTIP_DELAY = 400;
+
+
+let uid = 0;
+
+
+export default Object.assign(component<A>(
+    function(
+        this: { attributes?: D } | void,
+        {
+            expanded = true,
+            items,
+            label = 'Main',
+            selected,
+            state = reactive({ expanded, selected: selected ?? items[0]?.id ?? '' }),
+            ...attributes
+        }: A,
+        content
+    ) {
+        let id = `collapsible-sidebar-${++uid}`,
+            timer: ReturnType<typeof setTimeout> | undefined,
+            tip = reactive({ active: false, index: 0 });
+
+        function hide() {
+            clearTimeout(timer);
+            tip.active = false;
+        }
+
+        // The first tip waits; once one is open, moving to a neighbour swaps it instantly.
+        function show(index: number, immediate: boolean) {
+            if (state.expanded) {
+                return;
+            }
+
+            clearTimeout(timer);
+
+            if (immediate || tip.active) {
+                tip.active = true;
+                tip.index = index;
+                return;
+            }
+
+            timer = setTimeout(() => {
+                tip.active = true;
+                tip.index = index;
+            }, TOOLTIP_DELAY);
+        }
+
+        return html`
+            <div
+                class='collapsible-sidebar'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    class: () => state.expanded && '--active',
+                    ondisconnect: () => clearTimeout(timer)
+                }}
+            >
+                <nav
+                    class='collapsible-sidebar-nav'
+                    ${this?.attributes?.[COLLAPSIBLE_SIDEBAR_NAV]}
+                    ${attributes[COLLAPSIBLE_SIDEBAR_NAV]}
+                    ${{
+                        'aria-label': label,
+                        id,
+                        onpointerleave: hide
+                    }}
+                >
+                    <span
+                        aria-hidden='true'
+                        class='collapsible-sidebar-highlight'
+                        ${{
+                            hidden: () => !items.some((item) => item.id === state.selected),
+                            style: () => `--index: ${items.findIndex((item) => item.id === state.selected)}`
+                        }}
+                    ></span>
+                    <ul class='collapsible-sidebar-list'>
+                        ${items.map((item, index) => html`
+                            <li>
+                                <button
+                                    class='collapsible-sidebar-item'
+                                    type='button'
+                                    ${this?.attributes?.[COLLAPSIBLE_SIDEBAR_ITEM]}
+                                    ${attributes[COLLAPSIBLE_SIDEBAR_ITEM]}
+                                    ${{
+                                        'aria-current': () => state.selected === item.id && 'page',
+                                        class: () => state.selected === item.id && '--active',
+                                        onblur: hide,
+                                        onclick: () => {
+                                            state.selected = item.id;
+                                        },
+                                        onfocus: (e: FocusEvent) => {
+                                            if ((e.currentTarget as HTMLElement).matches(':focus-visible')) {
+                                                show(index, true);
+                                            }
+                                        },
+                                        onpointerenter: (e: PointerEvent) => {
+                                            if (e.pointerType !== 'touch') {
+                                                show(index, false);
+                                            }
+                                        }
+                                    }}
+                                >
+                                    <span class='collapsible-sidebar-icon'>${item.icon}</span>
+                                    <span class='collapsible-sidebar-label'>${item.label}</span>
+                                </button>
+                            </li>
+                        `)}
+                    </ul>
+                </nav>
+
+                <div
+                    aria-hidden='true'
+                    class='collapsible-sidebar-tip tooltip'
+                    ${{
+                        class: () => tip.active && !state.expanded && '--active',
+                        style: () => `--index: ${tip.index}`
+                    }}
+                >
+                    <span class='collapsible-sidebar-tip-message tooltip-message tooltip-message--e'>
+                        ${() => items[tip.index]?.label ?? ''}
+                    </span>
+                </div>
+
+                <div class='collapsible-sidebar-main'>
+                    <div class='collapsible-sidebar-header'>
+                        <button
+                            aria-controls='${id}'
+                            class='collapsible-sidebar-toggle'
+                            type='button'
+                            ${this?.attributes?.[COLLAPSIBLE_SIDEBAR_TOGGLE]}
+                            ${attributes[COLLAPSIBLE_SIDEBAR_TOGGLE]}
+                            ${{
+                                'aria-expanded': () => String(state.expanded),
+                                'aria-label': () => state.expanded ? 'Collapse sidebar' : 'Expand sidebar',
+                                onclick: () => {
+                                    hide();
+                                    state.expanded = !state.expanded;
+                                }
+                            }}
+                        >
+                            <svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
+                                <rect height='10.5' rx='2' width='11.5' x='2.25' y='2.75' />
+                                <path d='M6.25 2.75v10.5' />
+                            </svg>
+                        </button>
+                    </div>
+                    ${content}
+                </div>
+            </div>
+        `;
+    }
+), { item: COLLAPSIBLE_SIDEBAR_ITEM, nav: COLLAPSIBLE_SIDEBAR_NAV, toggle: COLLAPSIBLE_SIDEBAR_TOGGLE } as const);
+
+export type { Item, State };