@santi020k/lumen-core 3.0.0 → 4.0.0

package/dist/combobox.js

@@ -0,0 +1,253 @@
+let nextId = 0;
+const ignoresKeyboard = (event, composing) => event.defaultPrevented || event.isComposing || composing ||
+    event.altKey || event.ctrlKey || event.metaKey;
+const filterOption = (item, query, filterHidden, writeHidden) => {
+    const label = item.textContent.trim().toLowerCase();
+    const value = item.dataset.value?.toLowerCase() ?? '';
+    const hidden = Boolean(query) && !label.includes(query) && !value.includes(query);
+    if (hidden && !item.hidden) {
+        writeHidden(item, true);
+    }
+    else if (!hidden && filterHidden.has(item)) {
+        writeHidden(item, false);
+    }
+};
+/** Editable combobox. */
+export const createLumenComboboxController = (root) => {
+    const input = root.querySelector('input[role="combobox"]');
+    const list = root.querySelector('[role="listbox"]');
+    const document = root.ownerDocument;
+    const view = document.defaultView;
+    if (!input || !list || !view)
+        return { close: () => undefined, destroy: () => undefined };
+    const abort = new view.AbortController();
+    const { signal } = abort;
+    let active;
+    let composing = false;
+    let filtering = false;
+    let destroyed = false;
+    const filterHidden = new Set();
+    let resetTimer;
+    const eventRoot = root.getRootNode();
+    const observerRef = {};
+    const preserveVisibility = (records) => {
+        for (const record of records) {
+            if (record.attributeName === 'hidden') {
+                for (const option of filterHidden)
+                    if (option === record.target)
+                        filterHidden.delete(option);
+            }
+        }
+        for (const option of filterHidden) {
+            if (!list.contains(option)) {
+                option.hidden = false;
+                filterHidden.delete(option);
+            }
+        }
+    };
+    if (!list.id)
+        list.id = `ui-combobox-list-${++nextId}`;
+    input.setAttribute('aria-controls', list.id);
+    input.setAttribute('aria-autocomplete', 'list');
+    const items = () => [...list.querySelectorAll('[role="option"]')];
+    const editable = () => !input.matches(':disabled') && !input.readOnly;
+    const available = (item) => !item.hidden &&
+        !item.matches(':disabled, [disabled]') && item.getAttribute('aria-disabled') !== 'true';
+    const activate = (item) => {
+        active = item;
+        for (const option of items())
+            option.setAttribute('aria-selected', String(option === item));
+        if (item) {
+            if (!item.id)
+                item.id = `ui-combobox-option-${++nextId}`;
+            input.setAttribute('aria-activedescendant', item.id);
+        }
+        else {
+            input.removeAttribute('aria-activedescendant');
+        }
+    };
+    const close = () => {
+        input.setAttribute('aria-expanded', 'false');
+        if (!list.hidden)
+            list.hidden = true;
+        list.dataset.state = 'closed';
+        activate();
+    };
+    const flushVisibility = () => {
+        preserveVisibility(observerRef.current?.takeRecords() ?? []);
+    };
+    const writeHidden = (item, hidden) => {
+        flushVisibility();
+        if (hidden)
+            filterHidden.add(item);
+        else
+            filterHidden.delete(item);
+        item.hidden = hidden;
+        preserveVisibility(observerRef.current?.takeRecords().slice(1) ?? []);
+    };
+    const refresh = () => {
+        flushVisibility();
+        const query = input.value.trim().toLowerCase();
+        for (const item of items()) {
+            item.tabIndex = -1;
+            if (!item.id)
+                item.id = `ui-combobox-option-${++nextId}`;
+            if (filtering)
+                filterOption(item, query, filterHidden, writeHidden);
+        }
+        if (active && (!list.contains(active) || !available(active)))
+            activate();
+        if (!editable())
+            close();
+    };
+    const open = () => {
+        if (!editable())
+            return;
+        refresh();
+        input.setAttribute('aria-expanded', 'true');
+        list.hidden = false;
+        list.dataset.state = 'open';
+    };
+    const select = (item) => {
+        if (!editable() || !list.contains(item) || !available(item))
+            return;
+        input.value = item.dataset.value ?? item.textContent.trim();
+        input.dispatchEvent(new view.Event('input', { bubbles: true }));
+        input.dispatchEvent(new view.Event('change', { bubbles: true }));
+        input.focus({ preventScroll: true });
+        close();
+    };
+    const navigate = (key) => {
+        open();
+        const options = items().filter(available);
+        const index = active ? options.indexOf(active) : -1;
+        let next = (index + 1) % options.length;
+        if (key === 'ArrowUp') {
+            next = index < 0 ? options.length - 1 : (index - 1 + options.length) % options.length;
+        }
+        activate(options[next]);
+        if (typeof active?.scrollIntoView === 'function')
+            active.scrollIntoView({ block: 'nearest' });
+    };
+    const keydown = (event) => {
+        if (ignoresKeyboard(event, composing) || !editable())
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            navigate(event.key);
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                if (list.hidden)
+                    return;
+                event.preventDefault();
+                close();
+                break;
+            case 'Enter':
+                if (list.hidden || !active)
+                    return;
+                event.preventDefault();
+                select(active);
+                break;
+        }
+    };
+    const optionFromEvent = (event) => (items().find(option => event.composedPath().includes(option)));
+    refresh();
+    close();
+    input.addEventListener('focus', open, { signal });
+    input.addEventListener('compositionstart', () => {
+        composing = true;
+    }, { signal });
+    input.addEventListener('compositionend', () => {
+        composing = false;
+        filtering = true;
+        activate();
+        open();
+    }, { signal });
+    input.addEventListener('input', () => {
+        if (composing)
+            return;
+        filtering = true;
+        activate();
+        open();
+    }, { signal });
+    input.addEventListener('keydown', keydown, { signal });
+    eventRoot.addEventListener('reset', event => {
+        if (event.target !== input.form)
+            return;
+        view.clearTimeout(resetTimer);
+        resetTimer = view.setTimeout(() => {
+            if (destroyed || event.defaultPrevented || !input.isConnected)
+                return;
+            composing = false;
+            filtering = true;
+            close();
+            refresh();
+        });
+    }, { capture: true, signal });
+    list.addEventListener('pointerdown', event => {
+        if (optionFromEvent(event))
+            event.preventDefault();
+    }, { signal });
+    list.addEventListener('click', event => {
+        if (event.defaultPrevented)
+            return;
+        const option = optionFromEvent(event);
+        if (option) {
+            event.preventDefault();
+            select(option);
+        }
+    }, { signal });
+    const isNode = (target) => {
+        try {
+            view.Node.prototype.contains.call(target, null);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    };
+    root.addEventListener('focusout', event => {
+        if (!event.relatedTarget || !isNode(event.relatedTarget) || !root.contains(event.relatedTarget))
+            close();
+    }, { signal });
+    document.addEventListener('pointerdown', event => {
+        if (!event.composedPath().includes(root))
+            close();
+    }, { signal });
+    const observer = new view.MutationObserver(records => {
+        preserveVisibility(records);
+        if (!destroyed)
+            refresh();
+    });
+    observerRef.current = observer;
+    observer.observe(list, {
+        attributeFilter: ['disabled', 'aria-disabled', 'data-value', 'hidden'],
+        attributes: true,
+        characterData: true,
+        childList: true,
+        subtree: true
+    });
+    const disabledObserver = new view.MutationObserver(records => {
+        if (records.some(record => record.target.nodeName === 'FIELDSET' && record.target.contains(input)))
+            refresh();
+    });
+    disabledObserver.observe(eventRoot, { attributeFilter: ['disabled'], attributes: true, subtree: true });
+    observer.observe(input, { attributeFilter: ['disabled', 'readonly'], attributes: true });
+    return {
+        close,
+        destroy: () => {
+            destroyed = true;
+            view.clearTimeout(resetTimer);
+            abort.abort();
+            flushVisibility();
+            observer.disconnect();
+            disabledObserver.disconnect();
+            for (const option of filterHidden)
+                option.hidden = false;
+            filterHidden.clear();
+            close();
+        }
+    };
+};

package/dist/comparison-chart.d.ts

@@ -0,0 +1,32 @@
+import type { LumenChartDomain, LumenChartTone } from './charts.js';
+export interface LumenComparisonDatum {
+    id: string;
+    label: string;
+    value: number | null;
+    reference?: number | null;
+    tone?: LumenChartTone;
+}
+export interface LumenComparisonOptions {
+    domain?: LumenChartDomain | undefined;
+    paired?: boolean | undefined;
+}
+/** Validate a complete comparison dataset; never silently drop invalid rows. */
+export declare const isLumenComparisonDatum: (value: unknown) => value is LumenComparisonDatum;
+/** Horizontal rankings and paired comparisons on one zero-inclusive scale. */
+export declare const createLumenComparisonGeometry: (data: readonly LumenComparisonDatum[], options?: LumenComparisonOptions) => {
+    valid: boolean;
+    domain: LumenChartDomain;
+    ticks: number[];
+    rows: {
+        reference: number | null;
+        valuePosition: number | null;
+        referencePosition: number | null;
+        start: number;
+        width: number;
+        id: string;
+        label: string;
+        value: number | null;
+        tone?: LumenChartTone;
+    }[];
+};
+//# sourceMappingURL=comparison-chart.d.ts.map

package/dist/comparison-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-chart.d.ts","sourceRoot":"","sources":["../src/comparison-chart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGnE,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAA;IACrC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B;AAkBD,gFAAgF;AAChF,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,oBAOhE,CAAA;AAED,8EAA8E;AAC9E,eAAO,MAAM,6BAA6B,GACxC,MAAM,SAAS,oBAAoB,EAAE,EAAE,UAAS,sBAA2B;;;;;;;;;;YAxCvE,MAAM;eACH,MAAM;eACN,MAAM,GAAG,IAAI;eAEb,cAAc;;CAqFtB,CAAA"}

package/dist/comparison-chart.js

@@ -0,0 +1,64 @@
+import { lumenChartTones, scaleLumenChartValue } from './charts.js';
+const validMeasurement = (value) => value === null || (typeof value === 'number' && Number.isFinite(value));
+const validLabel = (value) => typeof value === 'string' && value.trim().length > 0;
+const validReference = (value) => value === undefined || validMeasurement(value);
+const validTone = (value) => value === undefined || lumenChartTones.some(tone => tone === value);
+const encloses = (domain, min, max) => (Number.isFinite(domain.min) && Number.isFinite(domain.max) &&
+    domain.min < domain.max && domain.min <= min && domain.max >= max);
+const optionalFieldsValid = (value) => {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    return (!('reference' in value) || validReference(value.reference)) && (!('tone' in value) || validTone(value.tone));
+};
+/** Validate a complete comparison dataset; never silently drop invalid rows. */
+export const isLumenComparisonDatum = (value) => {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    if (!('id' in value) || !('label' in value) || !('value' in value))
+        return false;
+    return validLabel(value.id) && validLabel(value.label) && validMeasurement(value.value) &&
+        optionalFieldsValid(value);
+};
+/** Horizontal rankings and paired comparisons on one zero-inclusive scale. */
+export const createLumenComparisonGeometry = (data, options = {}) => {
+    const entries = data;
+    const ids = new Set();
+    let min = 0;
+    let max = 0;
+    const validData = Array.isArray(data) && Array.from(entries).every(item => {
+        if (!isLumenComparisonDatum(item) || ids.has(item.id))
+            return false;
+        ids.add(item.id);
+        for (const value of [item.value, ...(options.paired ? [item.reference ?? null] : [])]) {
+            if (value !== null) {
+                min = Math.min(min, value);
+                max = Math.max(max, value);
+            }
+        }
+        return true;
+    });
+    const requested = options.domain ?? { min, max: max === min ? max + 1 : max };
+    const valid = validData && encloses(requested, min, max);
+    const domain = valid ? requested : { min: 0, max: 1 };
+    const position = (value) => scaleLumenChartValue(value, domain, 0, 1);
+    return {
+        valid,
+        domain,
+        ticks: [domain.min, domain.min / 2 + domain.max / 2, domain.max],
+        rows: valid ?
+            entries.map(item => {
+                const reference = options.paired ? item.reference ?? null : 0;
+                const valuePosition = item.value === null ? null : position(item.value);
+                const referencePosition = reference === null ? null : position(reference);
+                return {
+                    ...item,
+                    reference,
+                    valuePosition,
+                    referencePosition,
+                    start: Math.min(valuePosition ?? 0, referencePosition ?? 0),
+                    width: valuePosition === null || referencePosition === null ? 0 : Math.abs(valuePosition - referencePosition)
+                };
+            }) :
+            []
+    };
+};