@vobs/ui 0.1.0

package/dist/complex-inputs.js

@@ -0,0 +1,862 @@
+/** @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 files = (options.files ?? []).map((file) => uploadTransportFileContract(file, {
+        disabled,
+        maxRetries,
+        retrying: retryingIds.includes(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 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 = visibleIds.includes(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 = [];
+    for (const id of ids) {
+        if (!knownIds.has(id) || result.includes(id))
+            continue;
+        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 }),
+            },
+        }),
+    };
+}