app.js

import {
    loadIconCatalog,
    normalizeIconName
} from "./js/icons.js";
import {
    BADGE_COLOR_PRESETS,
    createExportState,
    createPersistedState,
    DEFAULT_BADGE_COLOR,
    DEFAULT_STATE,
    canMergeSelection,
    canSplitSelection,
    cloneState,
    findOwnerIndex,
    hasStoredState,
    isLayoutEmpty,
    loadState,
    mergeSelection,
    normalizeHexColor,
    normalizeSelection,
    normalizeState,
    saveState
} from "./js/state.js";
import {
    renderApp,
    updateCellText
} from "./js/ui.js";
import { initLogger, showToast, showError, showWarning } from "./js/logger.js";
import {
    initRichTextEditor,
    getEditorContent,
    setEditorContent,
    htmlToPlainText
} from "./js/richtext.js";
import {
    createPrintWarningModal,
    createResetConfirmModal,
    createLoadDemoConfirmModal
} from "./js/modals.js";

const dom = {
    slotCountInput: document.querySelector("#slotCountInput"),
    cellIndexStartInput: document.querySelector("#cellIndexStartInput"),
    cellWidthInput: document.querySelector("#cellWidthInput"),
    cellHeightInput: document.querySelector("#cellHeightInput"),
    cellFontSizeInput: document.querySelector("#cellFontSizeInput"),
    exportBtn: document.querySelector("#exportBtn"),
    importBtn: document.querySelector("#importBtn"),
    importFileInput: document.querySelector("#importFileInput"),
    loadDemoBtn: document.querySelector("#loadDemoBtn"),
    resetBtn: document.querySelector("#resetBtn"),
    printBtn: document.querySelector("#printBtn"),
    selectedMeta: document.querySelector("#selectedMeta"),
    selectedIconInput: document.querySelector("#selectedIconInput"),
    selectedTextInput: document.querySelector("#selectedTextInput"),
    textBoldBtn: document.querySelector("#textBoldBtn"),
    textItalicBtn: document.querySelector("#textItalicBtn"),
    textUnderlineBtn: document.querySelector("#textUnderlineBtn"),
    selectedBadgeColorPreset: document.querySelector("#selectedBadgeColorPreset"),
    selectedBadgeColorHex: document.querySelector("#selectedBadgeColorHex"),
    selectedBadgeColorChip: document.querySelector("#selectedBadgeColorChip"),
    mergeToggleBtn: document.querySelector("#mergeToggleBtn"),
    layoutStatus: document.querySelector("#layoutStatus"),
    hideCellIndexCheckbox: document.querySelector("#hideCellIndexCheckbox"),
    hideCellIconCheckbox: document.querySelector("#hideCellIconCheckbox"),
    hideCellTextCheckbox: document.querySelector("#hideCellTextCheckbox"),
    hideCellGridCheckbox: document.querySelector("#hideCellGridCheckbox"),
    paperSheet: document.querySelector("#paperSheet"),
    labelStrip: document.querySelector("#labelStrip"),
    cellTemplate: document.querySelector("#cellTemplate"),
    toastContainer: document.querySelector("#toastContainer"),
    footerYear: document.querySelector("#footerYear")
};

initLogger(dom.toastContainer);

let state = loadState();
let saveTimerId = 0;
let allIcons = [];
let iconPicker = null;
let syncingIconPicker = false;
let selectionAnchorIndex = getSelectionAnchorIndex();
let pendingSelectionGesture = null;
let previousSelectionIndices = [];
let pendingDemoLoadOptions = null;

// Modal references
let printWarningModal = null;
let disablePrintWarningCheckbox = null;
let resetConfirmModal = null;
let loadDemoConfirmModal = null;

void init();

async function init() {
    initBadgeColorPresets();

    window.addEventListener("error", (event) => {
        console.error("Uncaught error:", event.error ?? event.message);
        showToast("An unexpected error occurred.", "error");
    });

    window.addEventListener("unhandledrejection", (event) => {
        console.error("Unhandled promise rejection:", event.reason);
        showToast("An unexpected error occurred.", "error");
    });

    dom.footerYear.textContent = String(new Date().getFullYear());
    bindEvents();
    initRichTextEditor(dom);
    initIconPicker();
    render();

    if (!hasStoredState()) {
        await loadDemoLayout({
            skipConfirm: true,
            notice: "Demo layout loaded. Start editing or reset to begin with a blank strip."
        });
    }

    try {
        allIcons = await loadIconCatalog();
        setIconOptions(allIcons);
        render();
    } catch (error) {
        showError("Unable to load the MDI icon catalog. Label editing and printing still work.", error);
    }

    // Initialize modals
    const printWarning = createPrintWarningModal(handlePrintWarningConfirm);
    printWarningModal = window.bootstrap.Modal.getOrCreateInstance(printWarning.element);
    disablePrintWarningCheckbox = printWarning.checkbox;

    const resetConfirm = createResetConfirmModal(handleResetConfirm);
    resetConfirmModal = window.bootstrap.Modal.getOrCreateInstance(resetConfirm.element);

    const loadDemoConfirm = createLoadDemoConfirmModal(handleLoadDemoConfirm);
    loadDemoConfirmModal = window.bootstrap.Modal.getOrCreateInstance(loadDemoConfirm.element);

}

function bindEvents() {
    dom.slotCountInput.addEventListener("change", handleConfigChange);
    dom.cellIndexStartInput.addEventListener("change", handleConfigChange);
    dom.cellWidthInput.addEventListener("change", handleConfigChange);
    dom.cellHeightInput.addEventListener("change", handleConfigChange);
    dom.cellFontSizeInput.addEventListener("change", handleConfigChange);
    document.addEventListener("keydown", handleDocumentKeydown, true);
    document.addEventListener("pointerdown", handleDocumentPointerDown);

    dom.selectedTextInput.addEventListener("input", (event) => {
        const htmlContent = getEditorContent(dom.selectedTextInput, true);
        applyToSelected((label) => {
            label.text = htmlContent;
        });
        state.selectedIndices.forEach((index) => {
            updateCellText(dom.labelStrip, index, htmlContent);
        });
        queueSave();
    });

    dom.selectedBadgeColorPreset.addEventListener("change", () => {
        if (dom.selectedBadgeColorPreset.value) {
            setSelectedBadgeColor(dom.selectedBadgeColorPreset.value);
        }
    });

    dom.selectedBadgeColorHex.addEventListener("input", (event) => {
        event.target.value = event.target.value.toUpperCase();
        if (/^#(?:[0-9A-F]{3}|[0-9A-F]{6})$/.test(event.target.value)) {
            setSelectedBadgeColor(event.target.value);
        }
    });

    dom.selectedBadgeColorHex.addEventListener("change", (event) => {
        const normalized = normalizeHexColor(event.target.value);
        event.target.value = normalized.toUpperCase();
        setSelectedBadgeColor(normalized);
    });

    dom.selectedIconInput.addEventListener("change", () => {
        handleIconChange(dom.selectedIconInput.value || "");
    });

    const handlePreferenceChange = () => {
        state.layout.hideCellIndex = dom.hideCellIndexCheckbox.checked;
        state.layout.hideCellIcon = dom.hideCellIconCheckbox.checked;
        state.layout.hideCellText = dom.hideCellTextCheckbox.checked;
        state.layout.hideCellGrid = dom.hideCellGridCheckbox.checked;
        render();
        queueSave();
    };
    dom.hideCellIndexCheckbox.addEventListener("change", handlePreferenceChange);
    dom.hideCellIconCheckbox.addEventListener("change", handlePreferenceChange);
    dom.hideCellTextCheckbox.addEventListener("change", handlePreferenceChange);
    dom.hideCellGridCheckbox.addEventListener("change", handlePreferenceChange);

    dom.mergeToggleBtn.addEventListener("click", () => {
        handleMergeAction();
    });

    dom.exportBtn.addEventListener("click", exportState);
    dom.importBtn.addEventListener("click", () => dom.importFileInput.click());
    dom.importFileInput.addEventListener("change", importState);
    dom.loadDemoBtn.addEventListener("click", () => {
        void loadDemoLayout();
    });
    dom.resetBtn.addEventListener("click", resetState);
    dom.printBtn.addEventListener("click", handlePrintRequest);

    dom.labelStrip.addEventListener("mousedown", (event) => {
        const cell = event.target.closest("[data-index]");

        if (cell && event.button === 0 && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
            event.preventDefault();
        }

        pendingSelectionGesture = cell
            ? {
                extend: event.shiftKey,
                toggle: event.ctrlKey || event.metaKey
            }
            : null;
    });

    dom.labelStrip.addEventListener("click", (event) => {
        const cell = event.target.closest("[data-index]");

        if (!cell) {
            return;
        }

        selectCell(Number(cell.dataset.index), {
            extend: event.shiftKey,
            toggle: event.ctrlKey || event.metaKey,
            focusText: !(event.shiftKey || event.ctrlKey || event.metaKey)
        });
        pendingSelectionGesture = null;
    });

    dom.labelStrip.addEventListener("input", (event) => {
        const textElement = event.target.closest(".cell-text");

        if (!textElement) {
            return;
        }

        const cell = textElement.closest("[data-index]");
        const index = Number(cell.dataset.index);

        const htmlContent = getEditorContent(textElement, true);

        state.labels[index].text = htmlContent;

        if (state.selectedIndices.length === 1 && state.selectedIndices[0] === index) {
            // Update the side panel editor with the same content
            setEditorContent(dom.selectedTextInput, htmlContent);
        }

        queueSave();
    });

    dom.labelStrip.addEventListener("focusin", (event) => {
        const cell = event.target.closest("[data-index]");

        if (cell && !(pendingSelectionGesture?.extend || pendingSelectionGesture?.toggle)) {
            selectCell(Number(cell.dataset.index), { focusText: false });
        }
    });
}

function render() {
    renderApp(dom, state);
    syncIconPickerValue();
}

function handlePrintRequest() {
    if (!state.preferences.showPrintWarning) {
        window.print();
        return;
    }

    if (!printWarningModal) {
        const confirmed = window.confirm("Set printer scale to 100% in the printer settings so the label sizes stay accurate in millimeters.");

        if (confirmed) {
            window.print();
        }

        return;
    }

    disablePrintWarningCheckbox.checked = false;
    printWarningModal.show();
}

function handlePrintWarningConfirm() {
    const nextShowPrintWarning = !disablePrintWarningCheckbox.checked;

    if (state.preferences.showPrintWarning !== nextShowPrintWarning) {
        state.preferences.showPrintWarning = nextShowPrintWarning;
        queueSave();
    }

    disablePrintWarningCheckbox.checked = false;
    printWarningModal?.hide();
    window.print();
}

function initBadgeColorPresets() {
    const options = [
        { value: "", label: "Custom HEX" },
        ...BADGE_COLOR_PRESETS
    ].map((preset) => {
        const option = document.createElement("option");
        option.value = preset.value;
        option.textContent = preset.label;
        return option;
    });

    dom.selectedBadgeColorPreset.replaceChildren(...options);
}

function handleConfigChange() {
    const nextState = {
        ...state,
        config: {
            slotCount: dom.slotCountInput.valueAsNumber,
            cellIndexStart: dom.cellIndexStartInput.valueAsNumber,
            cellWidth: dom.cellWidthInput.valueAsNumber,
            cellHeight: dom.cellHeightInput.valueAsNumber,
            cellFontSize: dom.cellFontSizeInput.valueAsNumber
        },
        labels: state.labels.map((label) => ({ ...label }))
    };

    state = normalizeState(nextState);
    selectionAnchorIndex = getSelectionAnchorIndex();
    render();
    queueSave();
}

function handleMergeAction() {
    if (canSplitSelection(state.labels, state.selectedIndices)) {
        const index = state.selectedIndices[0];
        state.labels[index].span = 1;
        state = normalizeState(state);
        state.selectedIndices = [index];
        selectionAnchorIndex = index;
        render();
        queueSave();
        return;
    }

    if (!canMergeSelection(state.labels, state.selectedIndices)) {
        showWarning("Select two or more adjacent unmerged labels to merge them.");
        return;
    }

    const firstIndex = state.selectedIndices[0];
    mergeSelection(state.labels, state.selectedIndices);
    state.selectedIndices = [firstIndex];
    selectionAnchorIndex = firstIndex;
    render();
    queueSave();
}

function handleDocumentKeydown(event) {
    // Handle Enter key to focus description input
    if (event.key === "Enter" && !event.ctrlKey && !event.metaKey && !event.altKey) {
        if (!isEditableTarget(event.target) && state.selectedIndices.length > 0) {
            dom.selectedTextInput.focus();
            if (typeof dom.selectedTextInput.setSelectionRange === "function") {
                const caretPosition = dom.selectedTextInput.value.length;
                dom.selectedTextInput.setSelectionRange(caretPosition, caretPosition);
            }
            event.preventDefault();
            return;
        }
    }

    // Handle Escape key - always allow blurring focused inputs
    if (event.key === "Escape") {
        // Unfocus any focused input or select element
        if (isEditableTarget(event.target)) {
            event.target.blur();
            event.preventDefault();
            return;
        }

        if (!state.selectedIndices.length) {
            return;
        }

        clearSelection();
        event.preventDefault();
        return;
    }

    // Ignore all hotkeys if focused on input or select element
    if (isEditableTarget(event.target)) {
        return;
    }

    if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "a") {
        selectAllCells();
        event.preventDefault();
        return;
    }

    if (!event.altKey && isNavigationKey(event.key)) {
        if (shouldHandleArrowNavigation(event.target)) {
            const isShiftHeld = event.shiftKey;
            const isCtrlHeld = event.ctrlKey || event.metaKey;

            if (isShiftHeld || isCtrlHeld) {
                // Extend or toggle selection with shift/ctrl + arrow
                const selectableIndices = getSelectableIndices();

                if (!selectableIndices.length) {
                    return;
                }

                if (!state.selectedIndices.length) {
                    selectCell(selectableIndices[0]);
                    event.preventDefault();
                    return;
                }

                // For extend mode, move from the frontier (the end of selection being extended)
                // The frontier is the selected index that's farthest from the anchor
                let currentIndex;
                if (isShiftHeld) {
                    let frontier = selectionAnchorIndex;
                    for (const idx of state.selectedIndices) {
                        if (Math.abs(idx - selectionAnchorIndex) > Math.abs(frontier - selectionAnchorIndex)) {
                            frontier = idx;
                        }
                    }
                    currentIndex = frontier;
                } else {
                    // For toggle mode, use anchor or first selected
                    currentIndex = state.selectedIndices.includes(selectionAnchorIndex)
                        ? selectionAnchorIndex
                        : state.selectedIndices[0];
                }

                const visibleIndex = selectableIndices.indexOf(currentIndex);

                if (visibleIndex < 0) {
                    return;
                }

                const step = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
                const nextVisibleIndex = Math.min(selectableIndices.length - 1, Math.max(0, visibleIndex + step));

                if (nextVisibleIndex !== visibleIndex) {
                    selectCell(selectableIndices[nextVisibleIndex], {
                        extend: isShiftHeld,
                        toggle: isCtrlHeld
                    });
                }
                event.preventDefault();
            } else if (moveSelection(event.key)) {
                event.preventDefault();
            }
        }

        return;
    }

    if (event.key !== "Delete" || event.ctrlKey || event.metaKey || event.altKey) {
        return;
    }

    clearSelectedCells();
    event.preventDefault();
}

function handleDocumentPointerDown(event) {
    if (!state.selectedIndices.length || !(event.target instanceof Element)) {
        return;
    }

    if (event.target.closest("[data-index], .inspector, .ts-dropdown")) {
        return;
    }

    clearSelection();
}

function clearSelectedCells() {
    if (!state.selectedIndices.length) {
        return;
    }

    applyToSelected((label) => {
        label.text = "";
        label.icon = "";
        label.badgeColor = DEFAULT_BADGE_COLOR;
    });

    render();
    queueSave();
}

function clearSelection() {
    state.selectedIndices = [];
    selectionAnchorIndex = 0;
    pendingSelectionGesture = null;
    render();
}

function selectAllCells() {
    state.selectedIndices = state.labels.reduce((indices, label, index) => {
        if (!label.covered) {
            indices.push(index);
        }

        return indices;
    }, []);
    selectionAnchorIndex = getSelectionAnchorIndex();
    render();
}

function moveSelection(key) {
    const selectableIndices = getSelectableIndices();

    if (!selectableIndices.length) {
        return false;
    }

    if (!state.selectedIndices.length) {
        const nextIndex = key === "ArrowLeft" || key === "ArrowUp"
            ? selectableIndices[selectableIndices.length - 1]
            : selectableIndices[0];

        selectCell(nextIndex);
        return true;
    }

    const currentIndex = state.selectedIndices.includes(selectionAnchorIndex)
        ? selectionAnchorIndex
        : state.selectedIndices[0];
    const visibleIndex = selectableIndices.indexOf(currentIndex);

    if (visibleIndex < 0) {
        return false;
    }

    const step = key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1;
    const nextVisibleIndex = Math.min(selectableIndices.length - 1, Math.max(0, visibleIndex + step));

    if (nextVisibleIndex === visibleIndex) {
        selectCell(selectableIndices[visibleIndex]);
        return true;
    }

    selectCell(selectableIndices[nextVisibleIndex]);
    return true;
}

function selectCell(index, options = {}) {
    const ownerIndex = state.labels[index]?.covered ? findOwnerIndex(state.labels, index) : index;
    let nextSelection;
    let nextAnchorIndex = selectionAnchorIndex;

    if (options.extend) {
        nextSelection = getVisibleRange(selectionAnchorIndex, ownerIndex);
    } else if (options.toggle) {
        const selected = new Set(state.selectedIndices);

        if (selected.has(ownerIndex) && selected.size > 1) {
            selected.delete(ownerIndex);
        } else {
            selected.add(ownerIndex);
        }

        nextSelection = Array.from(selected);
    } else {
        nextSelection = [ownerIndex];
        nextAnchorIndex = ownerIndex;
    }

    state.selectedIndices = normalizeSelection(state.labels, nextSelection);

    if (!state.selectedIndices.includes(nextAnchorIndex)) {
        nextAnchorIndex = state.selectedIndices[0] ?? 0;
    }

    selectionAnchorIndex = nextAnchorIndex;

    // Blur text input if selection changed
    if (JSON.stringify(state.selectedIndices) !== JSON.stringify(previousSelectionIndices)) {
        dom.selectedTextInput.blur();
        previousSelectionIndices = [...state.selectedIndices];
    }

    render();
}

function exportState() {
    const payload = JSON.stringify(createExportState(state));
    const blob = new Blob([payload], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");

    link.href = url;
    link.download = "panel-label-layout.json";
    link.click();
    URL.revokeObjectURL(url);
    showToast("Layout exported as JSON.");
}

function importState(event) {
    const [file] = event.target.files;

    if (!file) {
        return;
    }

    const reader = new FileReader();
    reader.onload = () => {
        try {
            state = normalizeState(JSON.parse(String(reader.result)));
            state.selectedIndices = [];
            selectionAnchorIndex = getSelectionAnchorIndex();
            render();
            queueSave();
            showToast(`Imported layout from ${file.name}.`);
        } catch (error) {
            showError("Import failed. Select a valid JSON layout export.", error);
        }
    };
    reader.readAsText(file);
    event.target.value = "";
}

function resetState() {
    if (isLayoutEmpty(state)) {
        // Layout is already empty, proceed directly
        state = normalizeState(cloneState(DEFAULT_STATE));
        selectionAnchorIndex = getSelectionAnchorIndex();
        render();
        queueSave();
        showToast("Layout reset to default.");
        return;
    }

    if (!resetConfirmModal) {
        const confirmed = window.confirm("Are you sure you want to reset the layout? This cannot be undone.");

        if (confirmed) {
            state = normalizeState(cloneState(DEFAULT_STATE));
            selectionAnchorIndex = getSelectionAnchorIndex();
            render();
            queueSave();
            showToast("Layout reset to default.");
        }

        return;
    }

    resetConfirmModal.show();
}

function handleResetConfirm() {
    resetConfirmModal?.hide();

    state = normalizeState(cloneState(DEFAULT_STATE));
    selectionAnchorIndex = getSelectionAnchorIndex();
    render();
    queueSave();
    showToast("Layout reset to default.");
}

async function loadDemoLayout(options = {}) {
    const { skipConfirm = false, notice = "Demo layout loaded." } = options;

    if (skipConfirm || isLayoutEmpty(state)) {
        // No confirmation needed, load directly
        return await _performLoadDemoLayout(notice);
    }

    if (!loadDemoConfirmModal) {
        const confirmed = window.confirm("Load the demo layout? This will overwrite your current layout.");

        if (confirmed) {
            return await _performLoadDemoLayout(notice);
        }

        return false;
    }

    // Store options for modal confirmation handler
    pendingDemoLoadOptions = notice;
    loadDemoConfirmModal.show();
    return true; // Will complete asynchronously when user confirms
}

async function handleLoadDemoConfirm() {
    loadDemoConfirmModal?.hide();

    const notice = pendingDemoLoadOptions || "Demo layout loaded.";
    pendingDemoLoadOptions = null;
    await _performLoadDemoLayout(notice);
}

async function _performLoadDemoLayout(notice) {
    try {
        const response = await fetch("./demo-layout.json", { cache: "no-store" });

        if (!response.ok) {
            throw new Error(`Failed to load demo layout: ${response.status}`);
        }

        state = normalizeState(await response.json());
        state.selectedIndices = [];
        selectionAnchorIndex = getSelectionAnchorIndex();
        render();
        queueSave();
        showToast(notice);
        return true;
    } catch (error) {
        showError("Demo layout could not be loaded.", error);
        return false;
    }
}

function initIconPicker() {
    if (typeof window.TomSelect !== "function") {
        return;
    }

    iconPicker = new window.TomSelect(dom.selectedIconInput, {
        allowEmptyOption: true,
        maxItems: 1,
        plugins: ['clear_button'],
        valueField: "value",
        labelField: "label",
        searchField: ["searchText", "label", "value"],
        maxOptions: 150,
        create: false,
        preload: false,
        placeholder: "Select an icon",
        sortField: [
            { field: "$score" },
            { field: "label" }
        ],
        render: {
            option(data, escape) {
                return `<div class="icon-select-option">${renderIconMarkup(data.className, "dropdown")}<span>${escape(data.label)}</span></div>`;
            },
            item(data, escape) {
                return `<div class="icon-select-item">${renderIconMarkup(data.className, "button")}<span>${escape(data.label)}</span></div>`;
            },
            no_results() {
                return '<div class="no-results">No matching icons</div>';
            }
        },
        onChange(value) {
            if (!syncingIconPicker) {
                handleIconChange(value);
            }
        }
    });
}

function setIconOptions(icons) {
    if (!iconPicker) {
        const optionElements = icons.map((icon) => {
            const option = document.createElement("option");
            option.value = icon.value;
            option.textContent = icon.label;
            return option;
        });

        dom.selectedIconInput.replaceChildren(...optionElements);
        syncIconPickerValue();
        return;
    }

    syncingIconPicker = true;
    iconPicker.clearOptions();
    iconPicker.addOptions(icons);
    iconPicker.refreshOptions(false);
    syncingIconPicker = false;
    syncIconPickerValue();
}

function syncIconPickerValue() {
    const hasSelection = state.selectedIndices.length > 0;
    const commonIcon = hasSelection ? getCommonSelectedValue("icon") : "";
    const isMixed = hasSelection && commonIcon === null;
    const nextValue = !hasSelection ? "" : isMixed ? "" : commonIcon || "";

    const canEditIcon = hasSelection && !state.layout.hideCellIcon;

    if (!iconPicker) {
        dom.selectedIconInput.disabled = !canEditIcon;

        if (nextValue) {
            dom.selectedIconInput.value = nextValue;
        } else {
            dom.selectedIconInput.value = "";
        }

        return;
    }

    syncingIconPicker = true;
    // Placeholder should reflect selection state and whether icons are hidden
    if (state.layout.hideCellIcon) {
        iconPicker.settings.placeholder = "Icons hidden";
    } else if (!hasSelection) {
        iconPicker.settings.placeholder = "Select a label to edit";
    } else if (isMixed) {
        iconPicker.settings.placeholder = "Mixed icons";
    } else {
        iconPicker.settings.placeholder = "Select an icon";
    }

    if (typeof iconPicker.enable === "function" && typeof iconPicker.disable === "function") {
        if (canEditIcon) {
            iconPicker.enable();
        } else {
            iconPicker.disable();
        }
    }

    if (nextValue) {
        iconPicker.setValue(nextValue, true);
    } else {
        iconPicker.clear(true);
    }

    iconPicker.inputState();
    syncingIconPicker = false;
}

function handleIconChange(value) {
    applyToSelected((label) => {
        label.icon = normalizeIconName(value);
    });
    render();
    queueSave();
}

function setSelectedBadgeColor(value) {
    const normalized = normalizeHexColor(value);

    applyToSelected((label) => {
        label.badgeColor = normalized;
    });

    render();
    queueSave();
}

function applyToSelected(callback) {
    state.selectedIndices.forEach((index) => {
        const label = state.labels[index];

        if (label) {
            callback(label, index);
        }
    });
}

function getCommonSelectedValue(fieldName) {
    const labels = state.selectedIndices.map((index) => state.labels[index]).filter(Boolean);

    if (!labels.length) {
        return "";
    }

    const [firstLabel] = labels;
    return labels.every((label) => label[fieldName] === firstLabel[fieldName])
        ? firstLabel[fieldName]
        : null;
}

function getVisibleRange(startIndex, endIndex) {
    const startOwner = state.labels[startIndex]?.covered ? findOwnerIndex(state.labels, startIndex) : startIndex;
    const endOwner = state.labels[endIndex]?.covered ? findOwnerIndex(state.labels, endIndex) : endIndex;
    const lowerBound = Math.min(startOwner, endOwner);
    const upperBound = Math.max(startOwner, endOwner);

    return state.labels.reduce((indices, label, index) => {
        if (!label.covered && index >= lowerBound && index <= upperBound) {
            indices.push(index);
        }

        return indices;
    }, []);
}

function getSelectionAnchorIndex() {
    return state.selectedIndices[0] ?? 0;
}

function isEditableTarget(target) {
    if (!(target instanceof Element)) {
        return false;
    }

    return Boolean(target.closest("input, textarea, select, [contenteditable='true'], .ts-control, .ts-dropdown"));
}

function renderIconMarkup(className, context) {
    return className
        ? `<span class="icon-preview icon-preview-${context}" aria-hidden="true"><i class="${className}"></i></span>`
        : "";
}

function queueSave() {
    window.clearTimeout(saveTimerId);
    saveTimerId = window.setTimeout(() => {
        saveState(state);
    }, 300);
}

function getSelectableIndices() {
    return state.labels.reduce((indices, label, index) => {
        if (!label.covered) {
            indices.push(index);
        }

        return indices;
    }, []);
}

function isNavigationKey(key) {
    return key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown";
}

function shouldHandleArrowNavigation(target) {
    if (!(target instanceof Element)) {
        return true;
    }

    if (target === dom.selectedTextInput) {
        return true;
    }

    return !target.closest("input, textarea, select, .ts-control, .ts-dropdown");
}