@vobs/ui 0.3.0 → 1.0.0

package/dist/complex-inputs.js

@@ -1,866 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { createInputPrimitive, createUiDomPlan, } from './primitives.js';
-export function createComboboxPlans(options) {
-    const open = options.open === true;
-    const activeId = open ? options.activeId : undefined;
-    return {
-        root: createUiDomPlan('div', 'combobox', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            state: options.disabled === true ? 'disabled' : open ? 'open' : 'closed',
-            attrs: {
-                id: options.id,
-                ...options.attrs,
-            },
-        }),
-        input: createUiDomPlan('input', 'combobox-input', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            attrs: {
-                id: `${options.id}-input`,
-                type: 'text',
-                role: 'combobox',
-                autocomplete: 'off',
-                'aria-autocomplete': 'list',
-                'aria-expanded': open ? 'true' : 'false',
-                'aria-controls': `${options.id}-listbox`,
-                'aria-activedescendant': activeId === undefined ? undefined : optionDomId(options.id, activeId),
-                'aria-labelledby': options.labelId,
-                'aria-describedby': options.describedBy,
-                'aria-required': options.required === true ? 'true' : undefined,
-                value: options.inputValue,
-                placeholder: options.placeholder,
-            },
-        }),
-        listbox: createUiDomPlan('ul', 'combobox-listbox', {
-            state: open ? 'open' : 'closed',
-            attrs: {
-                id: `${options.id}-listbox`,
-                role: 'listbox',
-                hidden: open ? undefined : true,
-            },
-        }),
-        options: options.options.map((option) => {
-            const active = option.id === activeId;
-            const selected = option.value === options.selectedValue;
-            return createUiDomPlan('li', 'combobox-option', {
-                ...(option.disabled === undefined ? {} : { disabled: option.disabled }),
-                state: option.disabled === true
-                    ? 'disabled'
-                    : active
-                        ? 'active'
-                        : selected
-                            ? 'selected'
-                            : 'idle',
-                attrs: {
-                    id: optionDomId(options.id, option.id),
-                    role: 'option',
-                    'aria-selected': selected ? 'true' : 'false',
-                    'data-option-id': option.id,
-                    'data-value': option.value,
-                },
-            });
-        }),
-    };
-}
-export function createUploadPlans(options) {
-    const files = options.files ?? [];
-    const disabled = options.disabled === true;
-    return {
-        root: createUiDomPlan('div', 'upload', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            state: stateFromUpload(options, files.length),
-            attrs: {
-                id: `${options.id}-upload`,
-                ...options.attrs,
-            },
-        }),
-        input: createUiDomPlan('input', 'upload-input', {
-            disabled,
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            attrs: {
-                id: options.id,
-                type: 'file',
-                name: options.name,
-                accept: options.accept,
-                multiple: options.multiple,
-                required: options.required,
-                disabled,
-                'aria-labelledby': options.labelId,
-                'aria-describedby': options.describedBy,
-                'aria-invalid': options.invalid === true ? 'true' : undefined,
-            },
-        }),
-        dropzone: createUiDomPlan('label', 'upload-dropzone', {
-            disabled,
-            state: options.dragActive === true ? 'drag-active' : disabled ? 'disabled' : 'idle',
-            attrs: {
-                for: options.id,
-                'data-label': options.label,
-            },
-        }),
-        fileList: createUiDomPlan('ul', 'upload-list', {
-            state: files.length === 0 ? 'empty' : 'filled',
-            attrs: {
-                id: `${options.id}-list`,
-                role: 'list',
-                'aria-live': 'polite',
-                hidden: files.length === 0 ? true : undefined,
-            },
-        }),
-        files: files.map((file) => createUiDomPlan('li', 'upload-file', {
-            state: file.state ?? 'done',
-            attrs: {
-                id: uploadFileDomId(options.id, file.id),
-                role: 'listitem',
-                'data-file-id': file.id,
-                'data-name': file.name,
-                'data-size': file.size,
-                'data-type': file.type,
-                'data-size-label': file.size === undefined ? undefined : formatUploadFileSize(file.size),
-                'data-progress': file.progress,
-                'data-retry-count': file.retryCount,
-                'data-retryable': file.retryable === true ? 'true' : undefined,
-                'data-server-error': file.serverError,
-                'data-message': file.message,
-            },
-        })),
-    };
-}
-export function createUploadTransportStateContract(options = {}) {
-    const disabled = options.disabled === true;
-    const maxRetries = normalizeRetryCount(options.maxRetries);
-    const retryingIds = normalizeIds(options.retryingIds);
-    const retryingSet = new Set(retryingIds);
-    const files = (options.files ?? []).map((file) => uploadTransportFileContract(file, {
-        disabled,
-        maxRetries,
-        retrying: retryingSet.has(file.id),
-        serverErrors: normalizeServerErrors(options.serverErrors?.[file.id], file.serverError),
-    }));
-    const fileCount = files.length;
-    const pendingCount = files.filter((file) => file.state === 'pending').length;
-    const uploadingCount = files.filter((file) => file.state === 'uploading').length;
-    const doneCount = files.filter((file) => file.state === 'done').length;
-    const errorCount = files.filter((file) => file.state === 'error').length;
-    const retryableCount = files.filter((file) => file.canRetry).length;
-    const serverErrorCount = files.reduce((count, file) => count + file.serverErrors.length, 0);
-    const progress = fileCount === 0
-        ? 0
-        : Math.round(files.reduce((total, file) => total + file.progress, 0) / fileCount);
-    const state = uploadTransportState({
-        disabled,
-        doneCount,
-        errorCount,
-        fileCount,
-        pendingCount,
-        retryingCount: retryingIds.length,
-        uploadingCount,
-    });
-    return {
-        state,
-        disabled,
-        fileCount,
-        pendingCount,
-        uploadingCount,
-        doneCount,
-        errorCount,
-        retryableCount,
-        serverErrorCount,
-        retryingIds,
-        progress,
-        files,
-        attrs: {
-            'data-upload-transport-contract': 'true',
-            'data-state': state,
-            'data-disabled': disabled ? 'true' : undefined,
-            'data-file-count': fileCount,
-            'data-pending-count': pendingCount,
-            'data-uploading-count': uploadingCount,
-            'data-done-count': doneCount,
-            'data-error-count': errorCount,
-            'data-retryable-count': retryableCount,
-            'data-server-error-count': serverErrorCount,
-            'data-retrying-ids': retryingIds.join(','),
-            'data-progress': progress,
-            'aria-busy': state === 'uploading' || state === 'retrying' ? 'true' : undefined,
-        },
-    };
-}
-export function createCascaderPlans(options) {
-    const open = options.open === true;
-    const selectedPath = findCascaderPathByValue(options.options, options.selectedValue);
-    const activePath = options.activePath === undefined || options.activePath.length === 0
-        ? selectedPath.map((item) => item.id)
-        : [...options.activePath];
-    const columns = getCascaderColumns(options.options, activePath);
-    const activeId = activePath.at(-1);
-    const selectedId = selectedPath.at(-1)?.id;
-    const selectedLabel = selectedPath.map((item) => item.label).join(' / ');
-    const valueLabel = selectedLabel === '' ? (options.placeholder ?? 'Select option') : selectedLabel;
-    const disabled = options.disabled === true;
-    return {
-        root: createUiDomPlan('div', 'cascader', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            disabled,
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            state: disabled ? 'disabled' : open ? 'open' : 'closed',
-            attrs: {
-                id: `${options.id}-cascader`,
-                ...options.attrs,
-                'data-value': options.selectedValue,
-                'data-label': valueLabel,
-                'data-levels': columns.length,
-            },
-        }),
-        trigger: createUiDomPlan('button', 'cascader-trigger', {
-            disabled,
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            attrs: {
-                id: `${options.id}-trigger`,
-                type: 'button',
-                role: 'combobox',
-                'aria-haspopup': 'tree',
-                'aria-expanded': open ? 'true' : 'false',
-                'aria-controls': `${options.id}-popup`,
-                'aria-labelledby': options.labelId,
-                'aria-describedby': options.describedBy,
-                'aria-required': options.required === true ? 'true' : undefined,
-                'data-value': options.selectedValue,
-                'data-label': valueLabel,
-            },
-        }),
-        popup: createUiDomPlan('div', 'cascader-popup', {
-            state: open ? 'open' : 'closed',
-            attrs: {
-                id: `${options.id}-popup`,
-                role: 'tree',
-                hidden: open ? undefined : true,
-                'aria-labelledby': options.labelId,
-                'data-levels': columns.length,
-            },
-        }),
-        columns: columns.map((column, index) => createUiDomPlan('div', 'cascader-column', {
-            attrs: {
-                id: cascaderColumnDomId(options.id, index),
-                role: 'group',
-                'data-level': index + 1,
-                'data-count': column.length,
-            },
-        })),
-        options: columns.flatMap((column, columnIndex) => column.map((item) => {
-            const active = item.id === activeId;
-            const selected = item.id === selectedId;
-            const expandable = (item.children?.length ?? 0) > 0;
-            return createUiDomPlan('button', 'cascader-option', {
-                ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
-                state: item.disabled === true
-                    ? 'disabled'
-                    : active
-                        ? 'active'
-                        : selected
-                            ? 'selected'
-                            : 'idle',
-                attrs: {
-                    id: cascaderOptionDomId(options.id, item.id),
-                    type: 'button',
-                    role: 'treeitem',
-                    'aria-level': columnIndex + 1,
-                    'aria-expanded': expandable ? String(active) : undefined,
-                    'aria-selected': selected ? 'true' : 'false',
-                    'data-column': columnIndex,
-                    'data-option-id': item.id,
-                    'data-value': item.value,
-                    'data-label': item.label,
-                    'data-has-children': expandable ? 'true' : undefined,
-                },
-            });
-        })),
-    };
-}
-export function createCascaderAdvancedStateContract(options) {
-    const flattenedOptions = flattenCascaderOptions(options.options);
-    const query = (options.query ?? '').trim();
-    const resultCount = normalizeCount(options.resultCount);
-    const totalNodeCount = normalizeCount(options.totalNodeCount) ?? flattenedOptions.length;
-    const visibleIds = options.visibleIds === undefined
-        ? flattenedOptions.map((option) => option.id)
-        : normalizeCascaderIds(options.visibleIds, new Set(flattenedOptions.map((option) => option.id)));
-    const visibleSet = new Set(visibleIds);
-    const allowedSet = options.allowedIds === undefined
-        ? undefined
-        : new Set(normalizeCascaderIds(options.allowedIds, new Set(flattenedOptions.map((option) => option.id))));
-    const deniedIds = normalizeCascaderIds(options.deniedIds, new Set(flattenedOptions.map((option) => option.id)));
-    const deniedSet = new Set(deniedIds);
-    const optionContracts = flattenedOptions.map((option) => {
-        const visible = visibleSet.has(option.id);
-        const allowed = !deniedSet.has(option.id) && (allowedSet === undefined || allowedSet.has(option.id));
-        const reason = allowed ? '' : (options.disabledReasons?.[option.id] ?? 'Permission denied');
-        return {
-            id: option.id,
-            visible,
-            allowed,
-            reason,
-            attrs: {
-                'data-option-id': option.id,
-                'data-visible': visible ? 'true' : 'false',
-                'data-permission': allowed ? 'allowed' : 'denied',
-                'data-disabled-reason': reason === '' ? undefined : reason,
-                'aria-disabled': allowed ? undefined : 'true',
-            },
-        };
-    });
-    const deniedOptionIds = optionContracts
-        .filter((option) => !option.allowed)
-        .map((option) => option.id);
-    const virtualStart = normalizeVirtualIndex(options.virtualStart, 0, totalNodeCount);
-    const virtualEnd = normalizeVirtualIndex(options.virtualEnd, totalNodeCount - 1, totalNodeCount);
-    const virtualState = virtualStart > 0 || virtualEnd < Math.max(totalNodeCount - 1, 0) ? 'windowed' : 'full';
-    const remoteState = cascaderRemoteState({
-        error: options.error,
-        loading: options.loading === true,
-        query,
-        resultCount,
-    });
-    const persistenceState = cascaderPersistenceState({
-        currentValue: options.currentValue,
-        dirty: options.dirty === true,
-        persistedValue: options.persistedValue,
-        restored: options.restored === true,
-    });
-    const permissionState = deniedOptionIds.length > 0 ? 'restricted' : 'allowed';
-    const currentValue = options.currentValue ?? '';
-    const persistedValue = options.persistedValue ?? '';
-    return {
-        remoteState,
-        permissionState,
-        virtualState,
-        persistenceState,
-        query,
-        resultCount,
-        deniedIds: deniedOptionIds,
-        visibleIds,
-        totalNodeCount,
-        virtualStart,
-        virtualEnd,
-        currentValue,
-        persistedValue,
-        optionContracts,
-        attrs: {
-            'data-cascader-advanced-contract': 'true',
-            'data-remote-state': remoteState,
-            'data-query': query,
-            'data-result-count': resultCount,
-            'data-error-message': options.error,
-            'data-permission-state': permissionState,
-            'data-denied-option-ids': deniedOptionIds.join(','),
-            'data-denied-count': deniedOptionIds.length,
-            'data-visible-option-ids': visibleIds.join(','),
-            'data-visible-count': visibleIds.length,
-            'data-virtual-state': virtualState,
-            'data-total-node-count': totalNodeCount,
-            'data-window-start': virtualStart,
-            'data-window-end': virtualEnd,
-            'data-window-size': Math.max(virtualEnd - virtualStart + 1, 0),
-            'data-estimated-row-height': normalizeCount(options.estimatedRowHeight),
-            'data-persistence-state': persistenceState,
-            'data-current-value': currentValue,
-            'data-persisted-value': persistedValue,
-            'data-dirty': options.dirty === true ? 'true' : undefined,
-            'data-restored': options.restored === true ? 'true' : undefined,
-            'aria-busy': options.loading === true ? 'true' : undefined,
-        },
-    };
-}
-export function createDateTimeFieldPlans(options) {
-    const inputType = options.kind === 'datetime' ? 'datetime-local' : options.kind === 'time' ? 'time' : 'date';
-    return {
-        root: createUiDomPlan('div', `${options.kind}-field`, {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.readonly === undefined ? {} : { readonly: options.readonly }),
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            state: stateFromDateTimeField(options),
-            attrs: {
-                id: `${options.id}-field`,
-            },
-        }),
-        input: createInputPrimitive({
-            type: 'text',
-            ...(options.name === undefined ? {} : { name: options.name }),
-            ...(options.value === undefined ? {} : { value: options.value }),
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.readonly === undefined ? {} : { readonly: options.readonly }),
-            ...(options.required === undefined ? {} : { required: options.required }),
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            ...(options.size === undefined ? {} : { className: `kui-input--${options.size}` }),
-            attrs: {
-                id: options.id,
-                type: inputType,
-                min: options.min,
-                max: options.max,
-                step: options.step,
-                placeholder: options.placeholder,
-                'aria-labelledby': options.labelId,
-                'aria-describedby': options.describedBy,
-                'aria-invalid': options.invalid === true ? 'true' : undefined,
-                ...options.attrs,
-            },
-        }),
-    };
-}
-export function formatDateInputValue(value) {
-    return [
-        value.getFullYear().toString().padStart(4, '0'),
-        (value.getMonth() + 1).toString().padStart(2, '0'),
-        value.getDate().toString().padStart(2, '0'),
-    ].join('-');
-}
-export function formatTimeInputValue(value, includeSeconds = false) {
-    const formatted = [
-        value.getHours().toString().padStart(2, '0'),
-        value.getMinutes().toString().padStart(2, '0'),
-    ];
-    if (includeSeconds)
-        formatted.push(value.getSeconds().toString().padStart(2, '0'));
-    return formatted.join(':');
-}
-export function formatDateTimeInputValue(value, includeSeconds = false) {
-    return `${formatDateInputValue(value)}T${formatTimeInputValue(value, includeSeconds)}`;
-}
-export function parseDateInputValue(value) {
-    const match = /^(\d{4})-(\d{2})-(\d{2})$/u.exec(value);
-    if (match === null)
-        return undefined;
-    return createValidDate(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
-}
-export function parseTimeInputValue(value) {
-    const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/u.exec(value);
-    if (match === null)
-        return undefined;
-    const hours = Number(match[1]);
-    const minutes = Number(match[2]);
-    const seconds = Number(match[3] ?? '0');
-    if (hours > 23 || minutes > 59 || seconds > 59)
-        return undefined;
-    const date = new Date(0);
-    date.setHours(hours, minutes, seconds, 0);
-    return date;
-}
-export function parseDateTimeInputValue(value) {
-    const match = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}(?::\d{2})?)$/u.exec(value);
-    if (match === null)
-        return undefined;
-    const date = parseDateInputValue(match[1] ?? '');
-    const time = parseTimeInputValue(match[2] ?? '');
-    if (date === undefined || time === undefined)
-        return undefined;
-    date.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), 0);
-    return date;
-}
-export function clampDateTimeInputValue(value, min, max) {
-    if (min !== undefined && value < min)
-        return min;
-    if (max !== undefined && value > max)
-        return max;
-    return value;
-}
-export function formatUploadFileSize(bytes) {
-    if (!Number.isFinite(bytes) || bytes <= 0)
-        return '0 B';
-    const units = ['B', 'KB', 'MB', 'GB'];
-    let value = bytes;
-    let unitIndex = 0;
-    while (value >= 1024 && unitIndex < units.length - 1) {
-        value /= 1024;
-        unitIndex += 1;
-    }
-    const rounded = unitIndex === 0 || value >= 10 ? Math.round(value) : Math.round(value * 10) / 10;
-    return `${rounded} ${units[unitIndex]}`;
-}
-export function isUploadFileAccepted(file, accept) {
-    if (accept === undefined || accept.trim() === '')
-        return true;
-    const rules = accept
-        .split(',')
-        .map((rule) => rule.trim().toLowerCase())
-        .filter((rule) => rule !== '');
-    const fileName = file.name.toLowerCase();
-    const fileType = file.type?.toLowerCase() ?? '';
-    return rules.some((rule) => {
-        if (rule.startsWith('.'))
-            return fileName.endsWith(rule);
-        if (rule.endsWith('/*'))
-            return fileType.startsWith(rule.slice(0, -1));
-        return fileType === rule;
-    });
-}
-export function filterAutocompleteOptions(options, query, limit = options.length) {
-    const keyword = query.trim().toLowerCase();
-    const result = [];
-    for (const option of options) {
-        if (keyword === '' ||
-            option.label.toLowerCase().includes(keyword) ||
-            option.value.toLowerCase().includes(keyword)) {
-            result.push(option);
-            if (result.length >= limit)
-                break;
-        }
-    }
-    return result;
-}
-export function getNextComboboxOptionId(options, activeId, key) {
-    const enabled = options.filter((option) => option.disabled !== true);
-    if (enabled.length === 0)
-        return activeId;
-    const currentIndex = Math.max(-1, enabled.findIndex((option) => option.id === activeId));
-    if (key === 'Home')
-        return enabled[0]?.id;
-    if (key === 'End')
-        return enabled.at(-1)?.id;
-    if (key === 'ArrowUp')
-        return enabled.at(currentIndex - 1)?.id ?? enabled.at(-1)?.id;
-    if (key === 'ArrowDown')
-        return enabled[(currentIndex + 1) % enabled.length]?.id;
-    return activeId;
-}
-export function getCascaderColumns(options, activePath = []) {
-    const columns = [[...options]];
-    let currentOptions = options;
-    for (const activeId of activePath) {
-        const active = currentOptions.find((option) => option.id === activeId);
-        if (active?.children === undefined || active.children.length === 0)
-            break;
-        columns.push([...active.children]);
-        currentOptions = active.children;
-    }
-    return columns;
-}
-export function findCascaderPathByValue(options, value) {
-    if (value === undefined)
-        return [];
-    return findCascaderPath(options, (option) => option.value === value);
-}
-export function findCascaderPathById(options, id) {
-    if (id === undefined)
-        return [];
-    return findCascaderPath(options, (option) => option.id === id);
-}
-export function getNextCascaderOptionId(options, activeId, key) {
-    const enabled = options.filter((option) => option.disabled !== true);
-    if (enabled.length === 0)
-        return activeId;
-    const currentIndex = Math.max(-1, enabled.findIndex((option) => option.id === activeId));
-    if (key === 'Home')
-        return enabled[0]?.id;
-    if (key === 'End')
-        return enabled.at(-1)?.id;
-    if (key === 'ArrowUp')
-        return enabled.at(currentIndex - 1)?.id ?? enabled.at(-1)?.id;
-    if (key === 'ArrowDown')
-        return enabled[(currentIndex + 1) % enabled.length]?.id;
-    return activeId;
-}
-export function shouldOpenCascaderForKey(key) {
-    return key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === ' ';
-}
-export function shouldSelectCascaderOption(key) {
-    return key === 'Enter' || key === ' ';
-}
-export function shouldCloseCascaderForKey(key) {
-    return key === 'Escape' || key === 'Tab';
-}
-export function shouldOpenComboboxForKey(key) {
-    return key === 'ArrowDown' || key === 'ArrowUp';
-}
-export function shouldSelectComboboxOption(key) {
-    return key === 'Enter';
-}
-export function shouldCloseComboboxForKey(key) {
-    return key === 'Escape' || key === 'Tab';
-}
-function optionDomId(comboboxId, optionId) {
-    return `${comboboxId}-${optionId}-option`;
-}
-function cascaderColumnDomId(cascaderId, columnIndex) {
-    return `${cascaderId}-column-${columnIndex + 1}`;
-}
-function cascaderOptionDomId(cascaderId, optionId) {
-    return `${cascaderId}-${optionId}-cascader-option`;
-}
-function uploadFileDomId(uploadId, fileId) {
-    return `${uploadId}-${fileId}-file`;
-}
-function uploadTransportFileContract(file, options) {
-    const state = file.state ?? 'done';
-    const progress = normalizeProgress(file.progress, state);
-    const retryCount = normalizeRetryCount(file.retryCount);
-    const retryable = file.retryable === true || options.serverErrors.length > 0;
-    const canRetry = !options.disabled &&
-        state === 'error' &&
-        retryable &&
-        retryCount < options.maxRetries &&
-        !options.retrying;
-    return {
-        id: file.id,
-        state,
-        progress,
-        retryCount,
-        retrying: options.retrying,
-        retryable,
-        canRetry,
-        serverErrors: options.serverErrors,
-        attrs: {
-            'data-file-id': file.id,
-            'data-state': options.retrying ? 'uploading' : state,
-            'data-progress': progress,
-            'data-retry-count': retryCount,
-            'data-retryable': retryable ? 'true' : 'false',
-            'data-can-retry': canRetry ? 'true' : 'false',
-            'data-server-error-count': options.serverErrors.length,
-            'data-server-errors': options.serverErrors.join('|'),
-            'aria-busy': options.retrying || state === 'uploading' ? 'true' : undefined,
-        },
-    };
-}
-function findCascaderPath(options, predicate) {
-    for (const option of options) {
-        if (predicate(option))
-            return [option];
-        const childPath = option.children === undefined ? [] : findCascaderPath(option.children, predicate);
-        if (childPath.length > 0)
-            return [option, ...childPath];
-    }
-    return [];
-}
-function flattenCascaderOptions(options) {
-    return options.flatMap((option) => [
-        option,
-        ...(option.children === undefined ? [] : flattenCascaderOptions(option.children)),
-    ]);
-}
-function normalizeCount(value) {
-    if (value === undefined || !Number.isFinite(value))
-        return undefined;
-    return Math.max(0, Math.trunc(value));
-}
-function normalizeVirtualIndex(value, fallback, total) {
-    const normalized = normalizeCount(value) ?? fallback;
-    return Math.min(Math.max(normalized, 0), Math.max(total - 1, 0));
-}
-function normalizeCascaderIds(ids, knownIds) {
-    if (ids === undefined)
-        return [];
-    const result = [];
-    const seen = new Set();
-    for (const id of ids) {
-        if (!knownIds.has(id) || seen.has(id))
-            continue;
-        seen.add(id);
-        result.push(id);
-    }
-    return result;
-}
-function cascaderRemoteState(options) {
-    if (options.loading)
-        return 'loading';
-    if (options.error !== undefined && options.error.length > 0)
-        return 'error';
-    if (options.resultCount === 0)
-        return 'empty';
-    if (options.query.length > 0)
-        return 'filtered';
-    return 'ready';
-}
-function cascaderPersistenceState(options) {
-    if (options.restored)
-        return 'restored';
-    if (options.dirty)
-        return 'dirty';
-    if (options.persistedValue === undefined)
-        return 'unbound';
-    return options.currentValue === options.persistedValue ? 'synced' : 'dirty';
-}
-function stateFromDateTimeField(options) {
-    if (options.disabled === true)
-        return 'disabled';
-    if (options.readonly === true)
-        return 'readonly';
-    if (options.invalid === true)
-        return 'invalid';
-    return options.value === undefined || options.value === '' ? 'empty' : 'filled';
-}
-function stateFromUpload(options, fileCount) {
-    if (options.disabled === true)
-        return 'disabled';
-    if (options.invalid === true)
-        return 'invalid';
-    if (options.dragActive === true)
-        return 'drag-active';
-    return fileCount === 0 ? 'empty' : 'filled';
-}
-function uploadTransportState(options) {
-    if (options.disabled)
-        return 'disabled';
-    if (options.fileCount === 0)
-        return 'empty';
-    if (options.retryingCount > 0)
-        return 'retrying';
-    if (options.uploadingCount > 0)
-        return 'uploading';
-    if (options.errorCount > 0)
-        return 'error';
-    if (options.doneCount === options.fileCount)
-        return 'complete';
-    if (options.doneCount > 0)
-        return 'partial';
-    if (options.pendingCount > 0)
-        return 'pending';
-    return 'empty';
-}
-function normalizeProgress(value, state) {
-    if (state === 'done')
-        return 100;
-    if (value === undefined || !Number.isFinite(value))
-        return 0;
-    return Math.min(100, Math.max(0, Math.trunc(value)));
-}
-function normalizeRetryCount(value) {
-    if (value === undefined || !Number.isFinite(value))
-        return 0;
-    return Math.max(0, Math.trunc(value));
-}
-function normalizeIds(ids) {
-    if (ids === undefined)
-        return [];
-    const values = Array.isArray(ids) ? ids : [...ids];
-    return [...new Set(values.filter((id) => id.length > 0))];
-}
-function normalizeServerErrors(value, fallback) {
-    const values = value === undefined
-        ? fallback === undefined
-            ? []
-            : [fallback]
-        : typeof value === 'string'
-            ? [value]
-            : value;
-    return values.map((item) => item.trim()).filter((item) => item.length > 0);
-}
-function createValidDate(year, month, day) {
-    const date = new Date(year, month, day);
-    if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
-        return undefined;
-    }
-    return date;
-}
-export function createColorPickerPlans(options) {
-    return {
-        root: createUiDomPlan('div', 'color-picker', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-colorpicker`, ...options.attrs },
-        }),
-        input: createUiDomPlan('input', 'color-picker-input', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            attrs: {
-                id: `${options.id}-input`,
-                type: 'color',
-                ...(options.value === undefined ? {} : { value: options.value }),
-            },
-        }),
-        preview: createUiDomPlan('span', 'color-picker-preview', {
-            attrs: {
-                id: `${options.id}-preview`,
-                'aria-hidden': 'true',
-                ...(options.value === undefined ? {} : { 'data-value': options.value }),
-            },
-        }),
-        value: createUiDomPlan('span', 'color-picker-value', {
-            attrs: {
-                id: `${options.id}-value`,
-                ...(options.value === undefined ? {} : { 'data-label': options.value }),
-            },
-        }),
-    };
-}
-export function createTransferPlans(options) {
-    return {
-        root: createUiDomPlan('div', 'transfer', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-transfer`, ...options.attrs },
-        }),
-        source: createUiDomPlan('div', 'transfer-pane', {
-            attrs: { id: `${options.id}-source` },
-        }),
-        sourceList: createUiDomPlan('ul', 'transfer-list', {
-            attrs: { id: `${options.id}-source-list` },
-        }),
-        actions: createUiDomPlan('div', 'transfer-actions', {
-            attrs: { id: `${options.id}-actions` },
-        }),
-        toRight: createUiDomPlan('button', 'transfer-action', {
-            attrs: {
-                id: `${options.id}-to-right`,
-                type: 'button',
-                'data-direction': 'right',
-                'aria-label': 'Move to target',
-            },
-        }),
-        toLeft: createUiDomPlan('button', 'transfer-action', {
-            attrs: {
-                id: `${options.id}-to-left`,
-                type: 'button',
-                'data-direction': 'left',
-                'aria-label': 'Move to source',
-            },
-        }),
-        target: createUiDomPlan('div', 'transfer-pane', {
-            attrs: { id: `${options.id}-target` },
-        }),
-        targetList: createUiDomPlan('ul', 'transfer-list', {
-            attrs: { id: `${options.id}-target-list` },
-        }),
-    };
-}
-const MASK_PRESETS = {
-    amount: '###,###.##',
-    date: '####-##-##',
-    phone: '###-####-####',
-};
-export function resolveMaskInputMask(kind, mask) {
-    if (mask !== undefined && mask !== '')
-        return mask;
-    return (kind === undefined ? 'phone' : kind === 'custom' ? '' : MASK_PRESETS[kind]) ?? '';
-}
-export function createMaskInputPlans(options) {
-    const kind = options.kind ?? 'phone';
-    const mask = resolveMaskInputMask(kind, options.mask);
-    return {
-        root: createUiDomPlan('div', 'mask-input', {
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-mask-input`, ...options.attrs },
-        }),
-        input: createUiDomPlan('input', 'mask-input-field', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            ...(options.readonly === undefined ? {} : { readonly: options.readonly }),
-            ...(options.invalid === undefined ? {} : { invalid: options.invalid }),
-            attrs: {
-                id: `${options.id}-input`,
-                type: 'text',
-                inputmode: kind === 'phone' || kind === 'date' ? 'numeric' : 'decimal',
-                'data-kind': kind,
-                ...(mask === '' ? {} : { 'data-mask': mask }),
-                ...(options.value === undefined ? {} : { value: options.value }),
-                ...(options.placeholder === undefined ? {} : { placeholder: options.placeholder ?? mask }),
-            },
-        }),
-    };
-}