@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/index.ts

@@ -1,119 +1,67 @@
 export { default as accordion } from './accordion';
-export { default as announcementBanner } from './announcement-banner';
-export { default as autosave } from './autosave';
-export { default as backToTop } from './back-to-top';
-export { default as bentoGrid } from './bento-grid';
-export { default as bentoGridSpotlight } from './bento-grid-spotlight';
-export { default as bookmarkButton } from './bookmark-button';
+export { default as announcement } from './announcement';
 export { default as breadcrumb } from './breadcrumb';
-export { default as breadcrumbs } from './breadcrumbs';
 export { default as button } from './button';
-export { default as cardInput } from './card-input';
-export { default as carousel3d } from './carousel-3d';
+export { default as capslock } from './capslock';
+export { default as card } from './card';
+export { default as cc } from './cc';
+export { default as chatMinimap } from './chat-minimap';
 export { default as checkbox } from './checkbox';
-export { default as checkboxGroup } from './checkbox-group';
 export { default as clipboard } from './clipboard';
-export { default as codeMorph } from './code-morph';
-export { default as collapsibleSidebar } from './collapsible-sidebar';
 export { default as colorPicker } from './color-picker';
 export { default as command } from './command';
-export { default as commandPalette } from './command-palette';
-export { default as composer } from './composer';
-export { default as contributionHeatmap } from './contribution-heatmap';
+export { default as copy } from './copy';
 export { default as counter } from './counter';
 export { default as datalist } from './datalist';
-export { default as dateRangePicker } from './date-range-picker';
 export { default as dock } from './dock';
-export { default as dynamicIsland } from './dynamic-island';
-export { default as emailTypoFix } from './email-typo-fix';
-export { default as expandingCard } from './expanding-card';
-export { default as featureSpotlight } from './feature-spotlight';
-export { default as fileTree } from './file-tree';
-export { default as filterGrid } from './filter-grid';
+export {
+    createFileTreeIconResolver,
+    default as editor,
+    EditorDocument,
+    EditorWorkspaceModel,
+    FileTreeDecorations,
+    FileTreeEditor,
+    FileTreeElements,
+    FileTreeHistory,
+    fileTreeIcon,
+    isWorkspaceCodeEditor,
+    resolveFileTreeIcon
+} from './editor';
+export { default as error } from './error';
+export { default as filter } from './filter';
 export { default as form } from './form';
-export { default as gradientText } from './gradient-text';
-export { default as header } from './header';
+export { default as heatmap } from './heatmap';
 export { default as highlight } from './highlight';
-export { default as hoverCard } from './hover-card';
 export { default as icon } from './icon';
 export { default as image } from './image';
 export { default as inlineEdit } from './inline-edit';
 export { default as input } from './input';
 export { default as json } from './json';
-export { default as kanbanBoard } from './kanban-board';
-export { default as lightbox } from './lightbox';
-export { default as lineShadowText } from './line-shadow-text';
 export { default as loading } from './loading';
-export { default as longPress } from './long-press';
 export { default as marquee } from './marquee';
-export { default as modal } from './modal';
-export { default as morphingButton } from './morphing-button';
-export { default as morphingNav } from './morphing-nav';
-export { default as multiStepForm } from './multi-step-form';
-export { default as navigationMenu } from './navigation-menu';
-export { default as nestedMenu } from './nested-menu';
-export { default as notificationBell } from './notification-bell';
+export { default as metric } from './metric';
+export { default as nav } from './nav';
+export { default as notification } from './notification';
 export { default as number } from './number';
-export { default as onboardingChecklist } from './onboarding-checklist';
 export { default as overlay } from './overlay';
-export { default as pageDots } from './page-dots';
 export { default as pagination } from './pagination';
-export { default as password } from './password';
-export { default as planCard } from './plan-card';
 export { default as progress } from './progress';
 export { default as pullToRefresh } from './pull-to-refresh';
 export { default as radio } from './radio';
-export { default as radioCards } from './radio-cards';
 export { default as range } from './range';
-export { default as rangeFilter } from './range-filter';
-export { default as rangeSlider } from './range-slider';
-export { default as readingProgress } from './reading-progress';
 export { default as relativeTime } from './relative-time';
-export { default as scrollFade } from './scroll-fade';
-export { default as scrollSpine } from './scroll-spine';
-export { default as scrollVelocity } from './scroll-velocity';
-export { default as scrubInput } from './scrub-input';
 export { default as select } from './select';
-export { default as selectMenu } from './select-menu';
-export { default as selectionToolbar } from './selection-toolbar';
-export { default as settings } from './settings';
-export { default as shareButton } from './share-button';
-export { default as sheet } from './sheet';
-export { default as shinyText } from './shiny-text';
 export { default as shortcutRecorder } from './shortcut-recorder';
-export { default as shortcutSheet } from './shortcut-sheet';
-export { default as sidebar } from './sidebar';
-export { default as slider } from './slider';
-export { default as slidingTabs } from './sliding-tabs';
-export { default as snapCarousel } from './snap-carousel';
 export { default as sortable } from './sortable';
-export { default as sparkline } from './sparkline';
-export { default as stackedDrawer } from './stacked-drawer';
-export { default as statCounter } from './stat-counter';
-export { default as statusPicker } from './status-picker';
 export { default as stickyHeader } from './sticky-header';
-export { default as stickyStack } from './sticky-stack';
-export { default as storyProgress } from './story-progress';
+export { default as story } from './story';
 export { default as surfaceField } from './surface-field';
-export { default as swipeDeck } from './swipe-deck';
 export { default as switch } from './switch';
-export { default as tagInput } from './tag-input';
-export { default as taskList } from './task-list';
 export { default as tasklist } from './tasklist';
-export { default as textAnimate } from './text-animate';
-export { default as textProgress } from './text-progress';
 export { default as textarea } from './textarea';
-export { default as toaster, toast } from './toast';
+export { default as toaster } from './toast';
 export { default as tooltip } from './tooltip';
-export { default as tree } from './tree';
-export { default as treeView } from './tree-view';
 export { default as truncate } from './truncate';
 export { default as typewriter } from './typewriter';
-export { default as typewriterRetype } from './typewriter-retype';
-export { default as undoToast } from './undo-toast';
 export { default as uptime } from './uptime';
 export { default as usageMeter } from './usage-meter';
-export { default as valueFlash } from './value-flash';
-export { default as waitlistJoin } from './waitlist-join';
-export { default as webSearch } from './web-search';
-export { default as wordRotator } from './word-rotator';

package/src/components/inline-edit/format.ts

@@ -0,0 +1,183 @@
+import { caret, has, join, LAYERS, length, list, plain, restyle, sort, type Block, type Doc, type Edit, type Kind, type Mark, type Run, type Span } from './model';
+
+
+type Part = {
+    block: number;
+    from: number;
+    to: number;
+};
+
+
+// The last block the span reaches into: one it ends at the very start of (a triple click) it doesn't.
+function last({ end, start }: Span) {
+    return end.block > start.block && end.offset === 0 ? end.block - 1 : end.block;
+}
+
+// The span split per block, so no change ever straddles two.
+function parts(doc: Doc, span: Span): Part[] {
+    let out: Part[] = [];
+
+    for (let i = span.start.block, n = last(span); i <= n; i++) {
+        let from = i === span.start.block ? span.start.offset : 0,
+            to = i === span.end.block ? span.end.offset : length(doc[i].runs);
+
+        if (from < to) {
+            out.push({ block: i, from, to });
+        }
+    }
+
+    return out;
+}
+
+function restyled(doc: Doc, span: Span, fn: (run: Run) => Run): Edit {
+    let next = doc.slice();
+
+    for (let { block: i, from, to } of parts(doc, span)) {
+        next[i] = { ...next[i], runs: restyle(next[i].runs, from, to, fn) };
+    }
+
+    return { doc: next, selection: { anchor: span.start, focus: span.end } };
+}
+
+
+// Every selected character carries the mark.
+const active = (doc: Doc, span: Span, mark: Mark) => {
+    let list = parts(doc, span);
+
+    if (!list.length) {
+        return false;
+    }
+
+    for (let { block: i, from, to } of list) {
+        let at = 0;
+
+        for (let run of doc[i].runs) {
+            let end = at + run.text.length;
+
+            if (end > from && at < to && !has(run, mark)) {
+                return false;
+            }
+
+            at = end;
+        }
+    }
+
+    return true;
+};
+
+const check = (doc: Doc, index: number, checked: boolean): Doc => {
+    let next = doc.slice();
+
+    next[index] = { ...doc[index], checked };
+
+    return next;
+};
+
+const clear = (doc: Doc, span: Span) => restyled(doc, span, (run) => ({ href: '', marks: [], text: run.text }));
+
+// The link the whole span sits in, and its full extent.
+const extent = (doc: Doc, { end, start }: Span) => {
+    if (start.block !== end.block) {
+        return null;
+    }
+
+    let at = 0,
+        links: { from: number, href: string, to: number }[] = [];
+
+    for (let run of doc[start.block].runs) {
+        let to = at + run.text.length,
+            previous = links[links.length - 1];
+
+        if (run.href && previous?.href === run.href && previous.to === at) {
+            previous.to = to;
+        }
+        else if (run.href) {
+            links.push({ from: at, href: run.href, to });
+        }
+
+        at = to;
+    }
+
+    for (let { from, href, to } of links) {
+        if (from <= start.offset && start.offset < to && end.offset <= to) {
+            return { href, span: { end: { block: start.block, offset: to }, start: { block: start.block, offset: from } } };
+        }
+    }
+
+    return null;
+};
+
+const kindAt = (doc: Doc, span: Span): Kind => doc[span.start.block]?.kind ?? 'paragraph';
+
+const link = (doc: Doc, span: Span, href: string | null) => restyled(doc, span, (run) => ({ href: href ?? '', marks: run.marks, text: run.text }));
+
+// Turns every block the span reaches into 'target'; quotes and code blocks merge them, one line each.
+const setKind = (doc: Doc, span: Span, target: Kind): Edit => {
+    let blocks: Block[] = [],
+        first = span.start.block,
+        next = doc.slice(),
+        n = last(span);
+
+    if (target === 'codeblock' || target === 'quote') {
+        let runs: Run[][] = [];
+
+        for (let i = first; i <= n; i++) {
+            if (i > first) {
+                runs.push([{ href: '', marks: [], text: '\n' }]);
+            }
+
+            runs.push(target === 'codeblock' ? plain(doc[i].runs) : doc[i].runs);
+        }
+
+        blocks.push({ ...doc[first], checked: false, kind: target, runs: join(...runs) });
+    }
+    else {
+        for (let i = first; i <= n; i++) {
+            blocks.push({ ...doc[i], checked: target === 'task' && doc[i].checked, kind: target });
+        }
+    }
+
+    next.splice(first, n - first + 1, ...blocks);
+
+    let end = first + blocks.length - 1;
+
+    return {
+        doc: next,
+        selection: { anchor: { block: first, offset: 0 }, focus: { block: end, offset: length(next[end].runs) } }
+    };
+};
+
+const toggle = (doc: Doc, span: Span, mark: Exclude<Mark, 'link'>) => {
+    let on = active(doc, span, mark),
+        // Code holds plain text: only the marks around the whole selection stay around it.
+        shared = LAYERS.filter((m) => m !== 'link' && m !== mark && active(doc, span, m));
+
+    return restyled(doc, span, (run) => {
+        let marks = run.marks.filter((m) => m !== mark);
+
+        if (!on) {
+            marks = sort([...(mark === 'code' ? shared : marks), mark]);
+        }
+
+        return { href: run.href, marks, text: run.text };
+    });
+};
+
+// Backspace at the start of a list item turns it into text, as it does a heading, quote or code block that has no
+// block before it to join.
+const unformat = (doc: Doc, index: number): Edit | null => {
+    let target = doc[index];
+
+    if (target.kind === 'paragraph' || (!list(target.kind) && index > 0)) {
+        return null;
+    }
+
+    let next = doc.slice();
+
+    next[index] = { ...target, checked: false, kind: 'paragraph' };
+
+    return { doc: next, selection: caret({ block: index, offset: 0 }) };
+};
+
+
+export { active, check, clear, extent, kindAt, link, parts, setKind, toggle, unformat };

package/src/components/inline-edit/history.ts

@@ -0,0 +1,71 @@
+import type { Doc, Selection } from './model';
+
+
+type Entry = {
+    doc: Doc;
+    selection: Selection | null;
+};
+
+// Typing and deleting merge into one step while they continue from where the last one left off.
+type Kind = 'delete' | 'other' | 'type';
+
+
+const LIMIT = 200;
+
+// Long enough to take a word typed at an even pace as one step, short enough that a pause starts the next.
+const MERGE_WITHIN = 1000;
+
+
+function equal(a: Selection | null, b: Selection | null) {
+    return !!a && !!b
+        && a.anchor.block === b.anchor.block
+        && a.anchor.offset === b.anchor.offset
+        && a.focus.block === b.focus.block
+        && a.focus.offset === b.focus.offset;
+}
+
+
+export default () => {
+    let last: { after: Selection | null, at: number, kind: Kind } = { after: null, at: 0, kind: 'other' },
+        redo: Entry[] = [],
+        undo: Entry[] = [];
+
+    function step(from: Entry[], to: Entry[], current: Entry) {
+        let entry = from.pop();
+
+        if (entry) {
+            to.push(current);
+        }
+
+        last = { after: null, at: 0, kind: 'other' };
+
+        return entry ?? null;
+    }
+
+    return {
+        clear: () => {
+            last = { after: null, at: 0, kind: 'other' };
+            redo.length = 0;
+            undo.length = 0;
+        },
+        // 'before' is the document and selection the change started from, 'after' the selection it left.
+        push: (before: Entry, after: Selection, kind: Kind) => {
+            let now = Date.now();
+
+            if (kind === 'other' || kind !== last.kind || now - last.at > MERGE_WITHIN || !equal(before.selection, last.after)) {
+                undo.push(before);
+
+                if (undo.length > LIMIT) {
+                    undo.shift();
+                }
+            }
+
+            last = { after, at: now, kind };
+            redo.length = 0;
+        },
+        redo: (current: Entry) => step(redo, undo, current),
+        undo: (current: Entry) => step(undo, redo, current)
+    };
+};
+
+export type { Entry, Kind };

package/src/components/inline-edit/index.ts

@@ -1,22 +1,30 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import { flush, reactive } from '@esportsplus/reactivity';
 import input from '~/components/input';
 import textarea from '~/components/textarea';
+import rich from './rich';
+import status, { INLINE_EDIT_STATUS, type Status } from './status';
+import check from '@esportsplus/ui/svg/check.svg';
+import pencil from '@esportsplus/ui/svg/pencil.svg';
 import './scss/index.scss';
 
 
 type A = Attributes & {
     [INLINE_EDIT_DISPLAY]?: Attributes;
     [INLINE_EDIT_FIELD]?: Field;
+    [INLINE_EDIT_STATUS]?: Attributes;
     label: string;
     multiline?: boolean;
-    onsave?: (value: string) => void;
+    // A returned promise holds the status at saving until it settles.
+    onsave?: (value: string) => unknown;
     placeholder?: string;
     state?: State;
+    // Shows the save status under the field; pass a Status to read or drive it from outside.
+    status?: boolean | Status;
     value?: string;
 };
 
-type D = Attributes & Pick<A, typeof INLINE_EDIT_DISPLAY | typeof INLINE_EDIT_FIELD>;
+type D = Attributes & Pick<A, typeof INLINE_EDIT_DISPLAY | typeof INLINE_EDIT_FIELD | typeof INLINE_EDIT_STATUS>;
 
 type Field = Parameters<typeof input>[0];
 
@@ -27,13 +35,13 @@ type State = {
 };
 
 
+const WHITESPACE = /\s+/g;
+
+
 const INLINE_EDIT_DISPLAY = Symbol.for('@esportsplus/ui/inline-edit.display');
 
 const INLINE_EDIT_FIELD = Symbol.for('@esportsplus/ui/inline-edit.field');
 
-// Long enough to notice after the field settles, short enough that the pencil is back before the next edit.
-const SAVED_FOR = 1600;
-
 
 function template(
     this: { attributes?: D } | void,
@@ -42,6 +50,7 @@ function template(
         multiline = false,
         onsave,
         placeholder = '',
+        status: shown = false,
         value = '',
         state = reactive({ editing: false, saved: false, value }),
         ...attributes
@@ -51,7 +60,11 @@ function template(
         draft = '',
         local = reactive({ draft: '' }),
         parts = { ...this?.attributes?.[INLINE_EDIT_FIELD], ...attributes[INLINE_EDIT_FIELD] },
-        timer: ReturnType<typeof setTimeout> | undefined;
+        saving = status.saver(state, shown, () => clean(local.draft) !== state.value, onsave);
+
+    function clean(value: string) {
+        return multiline ? value.trim() : value.replace(WHITESPACE, ' ').trim();
+    }
 
     function field() {
         let own = {
@@ -82,7 +95,7 @@ function template(
         };
 
         if (multiline) {
-            return textarea.bind({ attributes: parts })({ ...own, rows: 1 });
+            return textarea.call({ attributes: parts }, { ...own, rows: 1 });
         }
 
         return input.call({ attributes: parts }, own);
@@ -95,26 +108,18 @@ function template(
 
         state.editing = false;
 
-        // Keyboard exits hand focus back to the text; a click elsewhere keeps focus wherever the click put it.
-        // Deferred until the display is visible again; class updates are batched onto the next frame.
+        // Keyboard exits hand focus back to the text; a click elsewhere keeps focus wherever the click put it, once the
+        // display is visible again.
         if (keyboard) {
-            requestAnimationFrame(() => requestAnimationFrame(() => display?.focus()));
+            flush();
+            display?.focus();
         }
 
-        let next = multiline ? local.draft.trim() : local.draft.replace(/\s+/g, ' ').trim();
+        let next = clean(local.draft);
 
-        if (!commit || next === state.value) {
-            return;
+        if (commit && next !== state.value) {
+            saving.save(next);
         }
-
-        state.value = next;
-        state.saved = true;
-        onsave?.(next);
-
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-            state.saved = false;
-        }, SAVED_FOR);
     }
 
     return html`
@@ -126,12 +131,10 @@ function template(
                 class: [
                     multiline && 'inline-edit--multiline',
                     () => state.editing && '--active',
-                    () => state.saved && '--saved',
-                    () => state.value.trim() === '' && '--empty'
+                    () => state.saved && 'inline-edit--saved',
+                    () => state.value.trim() === '' && 'inline-edit--empty'
                 ],
-                ondisconnect: () => {
-                    clearTimeout(timer);
-                }
+                ondisconnect: saving.dispose
             }}
         >
             <button
@@ -145,7 +148,7 @@ function template(
                         local.draft = draft;
                         state.editing = true;
                     },
-                    onrender: (element: HTMLElement) => {
+                    onconnect: (element: HTMLElement) => {
                         display = element;
                     }
                 }}
@@ -160,18 +163,21 @@ function template(
                     return state.value.trim() === '' ? placeholder : state.value;
                 }}
             </button>
-            ${() => state.editing ? field() : ''}
+            ${() => state.editing && field()}
             <span aria-hidden='true' class='inline-edit-icon'>
-                <svg class='inline-edit-icon-pencil' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
-                    <path d='M9.75 3.75 12.25 6.25M3.25 12.75l.6-2.6 6.9-6.9a1.25 1.25 0 0 1 1.77 0l.73.73a1.25 1.25 0 0 1 0 1.77l-6.9 6.9Z' />
-                </svg>
-                <svg class='inline-edit-icon-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
-                    <path d='m3.5 8.5 3 3 6-7' />
-                </svg>
+                <svg class='inline-edit-icon-pencil'><use href='#${pencil}' /></svg>
+                <svg class='inline-edit-icon-check'><use href='#${check}' /></svg>
             </span>
+            ${saving.status && status.render(saving.status, this?.attributes?.[INLINE_EDIT_STATUS], attributes[INLINE_EDIT_STATUS])}
         </div>
     `;
 }
 
 
-export default Object.assign(template, { display: INLINE_EDIT_DISPLAY, field: INLINE_EDIT_FIELD } as const);
+const plain = component(template, { display: INLINE_EDIT_DISPLAY, field: INLINE_EDIT_FIELD, status: INLINE_EDIT_STATUS });
+
+const inlineEdit: typeof plain & { rich: typeof rich } = Object.assign(plain, { rich });
+
+
+export default inlineEdit;
+export type { Status };