@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/dock/index.js

@@ -1,27 +1,24 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { onCleanup } from '@esportsplus/reactivity';
-import '../tooltip/index.js';
+import tooltip from '../tooltip/index.js';
+import '../card/scss/index.scss';
 import './scss/index.scss';
-const template_11yw5fm3 = template_u1.template(`<nav class='dock'>`);
-const template_11yw5fm6 = template_u1.template(`<span class='dock-item tooltip '><button class='dock-button' type='button'></button><span aria-hidden='true' class='dock-label tooltip-message tooltip-message--n '></span><span aria-hidden='true' class='dock-light '>`);
+const template_11yw5fm3 = template_u1.template(`<button class='card dock-button' type='button'></button><span aria-hidden='true' class='dock-light '>`);
+const template_11yw5fm7 = template_u1.template(`<nav class='card dock'>`);
+const template_11yw5fma = template_u1.template(`<div class='dock-group'></div><!--$-->`);
+const template_11yw5fme = template_u1.template(`<div class='dock-item'>`);
+const template_11yw5fmh = template_u1.template(`<!--$--><span aria-hidden='true' class='dock-label tooltip-message tooltip-message--n'>`);
 class ReactiveObject_11yw5fm0 extends reactivity_u0.ReactiveObject {
-    #instant = this[reactivity_u0.SIGNAL](false);
-    #label = this[reactivity_u0.SIGNAL]('');
+    #launching = this[reactivity_u0.SIGNAL](false);
     constructor() {
         super(null);
     }
-    get instant() {
-        return reactivity_u0.read(this.#instant);
+    get launching() {
+        return reactivity_u0.read(this.#launching);
     }
-    set instant(_v0) {
-        reactivity_u0.write(this.#instant, _v0);
-    }
-    get label() {
-        return reactivity_u0.read(this.#label);
-    }
-    set label(_v1) {
-        reactivity_u0.write(this.#label, _v1);
+    set launching(_v0) {
+        reactivity_u0.write(this.#launching, _v0);
     }
 }
 class ReactiveObject_11yw5fm1 extends reactivity_u0.ReactiveObject {
@@ -38,163 +35,57 @@ class ReactiveObject_11yw5fm1 extends reactivity_u0.ReactiveObject {
     }
 }
 const DOCK_BUTTON = Symbol.for('@esportsplus/ui/dock.button');
-const EASE_IN = 'cubic-bezier(0.42, 0, 1, 1)';
-const EASE_OUT = 'cubic-bezier(0, 0, 0.58, 1)';
-const HOP = [
-    { easing: EASE_OUT, offset: 0, translate: '0 0' },
-    { easing: EASE_IN, offset: 0.3, translate: '0 -22px' },
-    { easing: EASE_OUT, offset: 0.55, translate: '0 0' },
-    { easing: EASE_IN, offset: 0.78, translate: '0 -9px' },
-    { offset: 1, translate: '0 0' }
-];
-const HOP_DURATION = 700;
-const REACH = 140;
-const SPRING = { damping: 12, mass: 0.1, stiffness: 170 };
-const SQUASH = [
-    { offset: 0, scale: '1 1' },
-    { offset: 0.3, scale: '0.97 1.04' },
-    { offset: 0.55, scale: '1.08 0.9' },
-    { offset: 0.7, scale: '0.99 1.02' },
-    { offset: 0.8, scale: '1.03 0.96' },
-    { offset: 1, scale: '1 1' }
-];
-const STEP = 1 / 240;
+const LABEL = Symbol();
 const TOOLTIP_DELAY = 300;
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-const dock = ({ items, label = 'Dock', onlaunch, ...attributes }) => {
-    let frame = 0, hops = new Map(), peak = 72, rest = 40, springs = [], time = 0, timer, tip = new ReactiveObject_11yw5fm0();
-    function hide() {
-        clearTimeout(timer);
-        tip.label = '';
-    }
-    function launch(item, state, button) {
-        if (state.running) {
-            return;
-        }
-        state.running = true;
-        onlaunch?.(item.label);
-        if (reduced()) {
-            return;
-        }
-        for (let animation of hops.get(button) ?? []) {
-            animation.cancel();
-        }
-        hops.set(button, [
-            button.animate(HOP, { duration: HOP_DURATION }),
-            button.animate(SQUASH, { duration: HOP_DURATION, easing: 'ease-in-out' })
-        ]);
-    }
-    function pull(x) {
-        for (let i = 0, n = springs.length; i < n; i++) {
-            let spring = springs[i], box = spring.button.getBoundingClientRect(), distance = Math.min(Math.abs(x - box.left - box.width / 2), REACH);
-            spring.target = peak - (peak - rest) * (distance / REACH);
-        }
-        if (!frame) {
-            time = 0;
-            frame = requestAnimationFrame(tick);
-        }
-    }
-    function show(label) {
-        clearTimeout(timer);
-        if (tip.label) {
-            tip.instant = true;
-            tip.label = label;
-            return;
-        }
-        timer = setTimeout(() => {
-            tip.instant = false;
-            tip.label = label;
-        }, TOOLTIP_DELAY);
-    }
-    function tick(now) {
-        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 1 / 60, moving = false;
-        time = now;
-        for (let i = 0, n = springs.length; i < n; i++) {
-            let spring = springs[i];
-            for (let t = 0; t < dt; t += STEP) {
-                let h = Math.min(STEP, dt - t);
-                spring.velocity += ((SPRING.stiffness * (spring.target - spring.size) - SPRING.damping * spring.velocity) / SPRING.mass) * h;
-                spring.size += spring.velocity * h;
-            }
-            if (Math.abs(spring.target - spring.size) < 0.01 && Math.abs(spring.velocity) < 0.01) {
-                spring.size = spring.target;
-                spring.velocity = 0;
-            }
-            else {
-                moving = true;
-            }
-            spring.button.style.setProperty('--size', `${spring.size}px`);
-        }
-        frame = moving ? requestAnimationFrame(tick) : 0;
-    }
-    onCleanup(() => {
-        cancelAnimationFrame(frame);
-        clearTimeout(timer);
-        for (let animations of hops.values()) {
-            for (let animation of animations) {
-                animation.cancel();
-            }
-        }
+const dock = ({ group, items, label = 'Dock', onlaunch, ...attributes }) => {
+    let buttons = items.map((item) => {
+        let local = new ReactiveObject_11yw5fm0(), state = item.state ?? new ReactiveObject_11yw5fm1(item.running ?? false);
+        return (() => {
+            let root_11yw5fm2 = template_11yw5fm3(), element_11yw5fm4 = root_11yw5fm2.firstChild, element_11yw5fm5 = element_11yw5fm4.nextSibling;
+            template_u1.slot(element_11yw5fm4, item.icon, 1);
+            template_u1.setList(element_11yw5fm5, 'class', () => state.running && '--active');
+            template_u1.setProperties(element_11yw5fm4, attributes[DOCK_BUTTON]);
+            template_u1.setProperty(element_11yw5fm4, 'aria-label', () => state.running ? `${item.label}, running` : item.label);
+            template_u1.setList(element_11yw5fm4, 'class', () => local.launching && 'dock-button--launching');
+            template_u1.delegate(element_11yw5fm4, 'animationend', () => {
+                local.launching = false;
+            });
+            template_u1.delegate(element_11yw5fm4, 'click', () => {
+                if (state.running) {
+                    return;
+                }
+                state.running = true;
+                local.launching = true;
+                onlaunch?.(item.label);
+            });
+            return root_11yw5fm2;
+        })();
     });
+    let tip = group ? tooltip.shared({ delay: { open: TOOLTIP_DELAY } }) : null;
     return (() => {
-        let root_11yw5fm2 = template_11yw5fm3(), element_11yw5fm4 = root_11yw5fm2.firstChild;
-        template_u1.setProperties(element_11yw5fm4, attributes);
-        template_u1.setProperty(element_11yw5fm4, 'aria-label', label);
-        template_u1.onconnect(element_11yw5fm4, (element) => {
-            let style = getComputedStyle(element);
-            peak = parseFloat(style.getPropertyValue('--size-peak')) || peak;
-            rest = parseFloat(style.getPropertyValue('--size-rest')) || rest;
-            for (let i = 0, n = springs.length; i < n; i++) {
-                springs[i].size = springs[i].target = rest;
-            }
-        });
-        template_u1.on(element_11yw5fm4, 'pointerleave', () => {
-            hide();
-            pull(Infinity);
-        });
-        template_u1.delegate(element_11yw5fm4, 'pointermove', (e) => {
-            if (e.pointerType === 'touch' || reduced()) {
-                return;
-            }
-            pull(e.clientX);
-        });
-        template_u1.slot(element_11yw5fm4, items.map((item) => {
-            let button, state = item.state ?? new ReactiveObject_11yw5fm1(item.running ?? false);
-            return (() => {
-                let root_11yw5fm5 = template_11yw5fm6(), element_11yw5fm7 = root_11yw5fm5.firstChild, element_11yw5fm8 = element_11yw5fm7.firstElementChild, element_11yw5fm9 = element_11yw5fm8.nextElementSibling, element_11yw5fma = element_11yw5fm9.nextElementSibling;
-                template_u1.setList(element_11yw5fm7, 'class', () => tip.label === item.label && '--active');
-                template_u1.setProperties(element_11yw5fm8, attributes[DOCK_BUTTON]);
-                template_u1.setProperty(element_11yw5fm8, 'aria-label', () => state.running ? `${item.label}, running` : item.label);
-                template_u1.on(element_11yw5fm8, 'blur', hide);
-                template_u1.delegate(element_11yw5fm8, 'click', () => {
-                    if (button) {
-                        launch(item, state, button);
-                    }
-                });
-                template_u1.on(element_11yw5fm8, 'focus', () => {
-                    clearTimeout(timer);
-                    tip.instant = false;
-                    tip.label = item.label;
-                });
-                template_u1.on(element_11yw5fm8, 'pointerenter', (e) => {
-                    if (e.pointerType !== 'touch') {
-                        show(item.label);
-                    }
-                });
-                template_u1.onrender(element_11yw5fm8, (element) => {
-                    button = element;
-                    springs.push({ button: element, size: rest, target: rest, velocity: 0 });
-                });
-                template_u1.slot(element_11yw5fm8, item.icon, 1);
-                template_u1.setList(element_11yw5fm9, 'class', () => tip.instant && tip.label === item.label && '--instant');
-                template_u1.slot(element_11yw5fm9, item.label, 1);
-                template_u1.setList(element_11yw5fma, 'class', () => state.running && '--active');
-                return root_11yw5fm5;
-            })();
-        }), 1);
-        return root_11yw5fm2;
+        let root_11yw5fm6 = template_11yw5fm7(), element_11yw5fm8 = root_11yw5fm6.firstChild;
+        template_u1.slot(element_11yw5fm8, tip
+            ? (() => {
+                let root_11yw5fm9 = template_11yw5fma(), element_11yw5fmb = root_11yw5fm9.firstChild, element_11yw5fmc = element_11yw5fmb.nextSibling;
+                template_u1.slot(element_11yw5fmb, items.map((item, i) => {
+                    let root_11yw5fmd = template_11yw5fme(), element_11yw5fmf = root_11yw5fmd.firstChild;
+                    template_u1.slot(element_11yw5fmf, buttons[i], 1);
+                    template_u1.onconnect(element_11yw5fmf, (element) => { element[LABEL] = item.label; });
+                    return root_11yw5fmd;
+                }), 1);
+                template_u1.slot(element_11yw5fmc, tip.render({ 'aria-hidden': 'true', class: 'dock-label' }));
+                template_u1.setProperties(element_11yw5fmb, tip.delegate({ content: (trigger) => trigger[LABEL], edge: true, selector: '.dock-item' }));
+                return root_11yw5fm9;
+            })()
+            : items.map((item, i) => tooltip.onhover({ class: 'dock-item', delay: { open: TOOLTIP_DELAY } }, (() => {
+                let root_11yw5fmg = template_11yw5fmh(), element_11yw5fmi = root_11yw5fmg.firstChild, element_11yw5fmj = element_11yw5fmi.nextSibling;
+                template_u1.slot(element_11yw5fmi, buttons[i]);
+                template_u1.slot(element_11yw5fmj, item.label, 1);
+                return root_11yw5fmg;
+            })())), 1);
+        template_u1.setProperties(element_11yw5fm8, attributes);
+        template_u1.setProperty(element_11yw5fm8, 'aria-label', label);
+        return root_11yw5fm6;
     })();
 };
-export default Object.assign(dock, { button: DOCK_BUTTON });
+export default component(dock, { button: DOCK_BUTTON });

package/build/components/dock/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.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;--icon-ratio:.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);--item-radius:999px;--light-color:var(--color-text-500);--light-delay:.385s;--light-size:4px;--padding:12px;--radius:999px;--size-peak:72px;--size-rest:40px}.dock--square{--item-radius:var(--border-radius-600);--radius:var(--border-radius-700)}.dock--subtle{--size-peak:54px}.dock{background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);align-items:flex-end;gap:var(--gap);height:var(--height);padding:0 var(--padding) var(--padding);display:flex}.dock-button{--size:var(--size-rest);background:var(--item-background);border-radius:var(--item-radius);box-shadow:var(--item-box-shadow);color:var(--item-color);cursor:pointer;height:var(--size);transform-origin:50% 100%;width:var(--size);border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;transition:scale .15s ease-out;display:flex;position:relative}.dock-button:active{scale:.96}.dock-button:focus-visible{outline:2px solid var(--item-color);outline-offset:2px}.dock-button svg{height:calc(var(--size) * var(--icon-ratio));width:calc(var(--size) * var(--icon-ratio))}.dock-item.tooltip{cursor:default;flex-shrink:0;display:flex}.dock-label.tooltip-message{--border-radius:var(--border-radius-300);--box-shadow:none;--font-weight:var(--font-weight-500);--offset:4px;--padding-horizontal:8px;--padding-vertical:4px;--spacer:12px;--transition-duration:.15s;--transition-timing-function:ease-out}.dock-label.tooltip-message.--instant{transition:none}.dock-light{background:var(--light-color);height:var(--light-size);margin:4px 0 0 calc(var(--light-size) / -2);opacity:0;pointer-events:none;width:var(--light-size);border-radius:50%;transition:opacity .15s cubic-bezier(.23,1,.32,1),scale .15s cubic-bezier(.23,1,.32,1);position:absolute;top:100%;left:50%;scale:.5}.dock-light.--active{opacity:1;transition-delay:var(--light-delay);transition-duration:.2s;scale:1}@media (prefers-reduced-motion:reduce){.dock{--light-delay:0s}}}
+@layer components{.dock{--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);--hop-duration:.7s;--icon-ratio:.45;--inset:12px;--item-radius:999px;--light-color:var(--color-text-500);--light-delay:calc(var(--hop-duration) * .55);--light-size:4px;--magnify-duration:.3s;--magnify-timing-function:cubic-bezier(.23, 1, .32, 1);--padding-horizontal:calc(var(--inset) - var(--spacing) / 2);--padding-vertical:0px;--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;--spacing:8px}.dock--square{--border-radius:var(--border-radius-700);--item-radius:var(--border-radius-600)}.dock-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)}.dock-item{--size:var(--size-rest)}@media (hover:hover) and (prefers-reduced-motion:no-preference){.dock-item:hover{--size:var(--size-peak)}.dock-item:hover+.dock-item{--size:var(--size-near)}.dock-item:has(+.dock-item:hover){--size:var(--size-near)}.dock-item:hover+.dock-item+.dock-item{--size:var(--size-far)}.dock-item:has(+.dock-item+.dock-item:hover){--size:var(--size-far)}}.dock-label.tooltip-message,.dock-label.tooltip-shared{--box-shadow:none;--font-weight:var(--font-weight-500);--spacer:calc(var(--size-peak) - var(--size-rest) - var(--inset) + 12px)}.dock-label.tooltip-message{--border-radius:var(--border-radius-300);--offset:4px;--padding-horizontal:8px;--padding-vertical:4px;--transition-duration:.15s;--transition-timing-function:ease-out}.dock-label.tooltip-shared{--padding:4px 8px;--radius:var(--border-radius-300)}@media (prefers-reduced-motion:reduce){.dock{--hop-duration:0s}}.dock{height:calc(var(--size-rest) + var(--inset) * 2);display:flex}.dock-button{color:var(--color);cursor:pointer;height:var(--size);transform-origin:50% 100%;transition:height var(--magnify-duration) var(--magnify-timing-function), scale .15s ease-out, width var(--magnify-duration) var(--magnify-timing-function);width:var(--size);border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.dock-button:active{scale:.96}.dock-button:focus-visible{outline:2px solid var(--color);outline-offset:2px}.dock-button--launching{animation:dock-hop var(--hop-duration), dock-squash var(--hop-duration) ease-in-out}.dock-button svg{height:calc(var(--icon-ratio) * 100%);width:calc(var(--icon-ratio) * 100%)}.dock-group{display:flex}.dock-item{cursor:default;padding:0 calc(var(--spacing) / 2) var(--inset);flex-shrink:0;align-items:flex-end;display:flex;position:relative}.dock-light{background:var(--light-color);height:var(--light-size);opacity:0;pointer-events:none;left:50%;top:calc(100% - var(--inset) + 4px);width:var(--light-size);border-radius:50%;margin-inline-start:calc(var(--light-size) / -2);transition:opacity .15s cubic-bezier(.23,1,.32,1),scale .15s cubic-bezier(.23,1,.32,1);position:absolute;scale:.5}.dock-light.--active{opacity:1;transition-delay:var(--light-delay);transition-duration:.2s;scale:1}@keyframes dock-hop{0%{animation-timing-function:ease-out;translate:0}30%{animation-timing-function:ease-in;translate:0 -22px}55%{animation-timing-function:ease-out;translate:0}78%{animation-timing-function:ease-in;translate:0 -9px}to{translate:0}}@keyframes dock-squash{0%{scale:1}30%{scale:.97 1.04}55%{scale:1.08 .9}70%{scale:.99 1.02}80%{scale:1.03 .96}to{scale:1}}}
 /*$vite$:1*/

package/build/components/editor/code/changes.d.ts

@@ -0,0 +1,15 @@
+import type { Edit } from './document.js';
+type LineChange = {
+    from: number;
+    kind: 'added' | 'deleted' | 'modified';
+    original: {
+        from: number;
+        to: number;
+    };
+    to: number;
+};
+declare const changeLines: (changes: readonly LineChange[], count: number) => Map<number, "added" | "deleted" | "modified">;
+declare const lineChanges: (baseline: string, text: string) => LineChange[];
+declare const revertChange: (baseline: string, text: string, change: LineChange, eol: string) => Edit;
+export { changeLines, lineChanges, revertChange };
+export type { LineChange };

package/build/components/editor/code/changes.js

@@ -0,0 +1,60 @@
+import { diffLines } from '../diffs/engine.js';
+const BREAK = /\r\n|\r|\n/g;
+const TRAILING_BREAK = /(?:\r\n|\r|\n)$/;
+function lines(text) {
+    let at = 0, out = [];
+    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, index) {
+    let total = 0;
+    for (let i = 0; i < index; i++) {
+        total += list[i].length;
+    }
+    return total;
+}
+const changeLines = (changes, count) => {
+    let out = new Map();
+    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;
+};
+const lineChanges = (baseline, text) => {
+    let changes = diffLines(baseline, text), out = [];
+    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;
+};
+const revertChange = (baseline, text, change, eol) => {
+    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);
+    if (change.from === current.length) {
+        insert = eol + insert;
+    }
+    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 };

package/build/components/editor/code/clipboard.d.ts

@@ -0,0 +1,6 @@
+import type { EditorDocument, Selection } from './document.js';
+declare const MIME = "application/x-esportsplus-code-editor";
+declare const copied: (document: EditorDocument) => readonly Selection[];
+declare const read: (data: DataTransfer, count: number) => string | string[];
+declare const write: (data: DataTransfer, document: EditorDocument, ranges: readonly Selection[]) => void;
+export { copied, MIME, read, write };

package/build/components/editor/code/clipboard.js

@@ -0,0 +1,50 @@
+const MIME = 'application/x-esportsplus-code-editor';
+const copied = (document) => {
+    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 = [];
+    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;
+};
+const read = (data, count) => {
+    let text = data.getData('text/plain'), encoded = data.getData(MIME), chunks = 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;
+    }
+    let lines = text.split(/\r\n|\r|\n/);
+    return lines.length === count ? lines : text;
+};
+const write = (data, document, ranges) => {
+    let chunks = [], 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/build/components/editor/code/colors.d.ts

@@ -0,0 +1,11 @@
+import type { Language, Token } from './syntax.js';
+type ColorLiteral = {
+    from: number;
+    to: number;
+    value: string;
+};
+declare const colorLiterals: (text: string, tokens: readonly Token[], language: Language) => ColorLiteral[];
+declare const formatColor: (literal: string, value: string) => string;
+declare const toHex: (literal: string) => string | null;
+export { colorLiterals, formatColor, toHex };
+export type { ColorLiteral };

package/build/components/editor/code/colors.js

@@ -0,0 +1,172 @@
+const FUNCTIONS = new Set(['color', 'hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'rgb', 'rgba']);
+const FUNCTION = /\b(?:rgba?|hsla?|hwb|oklab|oklch|lab|lch)\([\w\s.,%/+-]*\)/gi;
+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(' '));
+const STYLE_NAMED = /:\s*([a-z]+)\b/gi;
+function alpha(value) {
+    if (value === undefined || value === 'none') {
+        return 1;
+    }
+    return clampUnit(value.endsWith('%') ? parseFloat(value) / 100 : parseFloat(value));
+}
+function channel(value) {
+    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) {
+    return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+}
+function degrees(value) {
+    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) {
+    let pair = (n) => 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) {
+    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) {
+    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) => 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) {
+    let open = literal.indexOf('(');
+    return literal.slice(open + 1, -1).trim().split(/\s*[\s,/]\s*/).filter(Boolean);
+}
+function round(value) {
+    return Number(value.toFixed(2));
+}
+function scan(text, from, to, named, out) {
+    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] });
+            }
+        }
+    }
+}
+const colorLiterals = (text, tokens, language) => {
+    let out = [], 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);
+};
+const formatColor = (literal, value) => {
+    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);
+};
+const toHex = (literal) => {
+    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) => {
+            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 };

package/build/components/editor/code/commands.d.ts

@@ -0,0 +1,22 @@
+import { EditorDocument } from './document.js';
+import { type Language } from './syntax.js';
+type LineCommand = 'blank' | 'copyDown' | 'copyUp' | 'delete' | 'moveDown' | 'moveUp';
+declare const addNextOccurrence: (doc: EditorDocument, all?: boolean) => boolean;
+declare const bracket: (doc: EditorDocument, character: string, language?: Language) => boolean;
+declare const closeIndent: (doc: EditorDocument, character: string, language: Language) => boolean;
+declare const deleteCharacter: (doc: EditorDocument, backwards?: boolean, word?: boolean) => boolean;
+declare const deletePair: (doc: EditorDocument) => boolean;
+declare const detectIndent: (text: string) => {
+    size: number;
+    tabs: boolean;
+} | null;
+declare const indent: (doc: EditorDocument, unit?: string, outdent?: boolean) => boolean;
+declare const insertText: (doc: EditorDocument, text: string | readonly string[], source?: string) => boolean;
+declare const lineCommand: (doc: EditorDocument, command: LineCommand) => boolean;
+declare const newline: (doc: EditorDocument, unit?: string, language?: Language) => boolean;
+declare const reindent: (doc: EditorDocument, language: Language, unit?: string) => boolean;
+declare const selectLine: (doc: EditorDocument) => void;
+declare const toggleComment: (doc: EditorDocument, marker: string | false, block?: readonly [string, string]) => boolean;
+declare const transpose: (doc: EditorDocument) => boolean;
+export { addNextOccurrence, bracket, closeIndent, deleteCharacter, deletePair, detectIndent, indent, insertText, lineCommand, newline, reindent, selectLine, toggleComment, transpose };
+export type { LineCommand };