@vobs/ui 0.3.0 → 1.1.0

package/dist/data-display.js

@@ -1,2341 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { classNames, createButtonPrimitive, createSkeletonPrimitive, createSpinPrimitive, createUiDomPlan, } from './primitives.js';
-export function createTablePlans(options) {
-    const columns = options.columns.filter((column) => column.hidden !== true);
-    const sortColumn = columns.find((column) => column.sortDirection !== undefined);
-    return {
-        root: createUiDomPlan('table', 'table', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            attrs: {
-                id: options.id,
-                'aria-labelledby': options.captionId,
-                ...options.attrs,
-                'data-columns': columns.length,
-                'data-rows': options.rows.length,
-                'data-selectable': options.selectable === true ? 'true' : undefined,
-                'data-sticky-header': options.stickyHeader === true ? 'true' : undefined,
-                'data-sort-column': sortColumn?.id,
-                'data-sort-direction': sortColumn?.sortDirection,
-            },
-        }),
-        caption: options.captionId === undefined
-            ? undefined
-            : createUiDomPlan('caption', 'table-caption', { attrs: { id: options.captionId } }),
-        selectionHeader: options.selectable === true
-            ? createUiDomPlan('th', 'table-selection-header', {
-                attrs: {
-                    scope: 'col',
-                    'aria-label': 'Select rows',
-                    'data-sticky': 'start',
-                },
-            })
-            : undefined,
-        headers: columns.map((column) => createUiDomPlan('th', 'table-header', {
-            attrs: {
-                scope: 'col',
-                role: column.sortable === true ? 'columnheader' : undefined,
-                'aria-sort': ariaSort(column),
-                'data-column-id': column.id,
-                'data-align': column.align,
-                'data-sortable': column.sortable === true ? 'true' : undefined,
-                'data-sort-direction': column.sortDirection,
-                'data-sticky': column.sticky,
-                style: tableColumnStyle(column),
-            },
-        })),
-        rows: options.rows.map((row) => createUiDomPlan('tr', 'table-row', {
-            state: row.selected === true ? 'selected' : row.disabled === true ? 'disabled' : 'idle',
-            attrs: {
-                'data-row-id': row.id,
-                'aria-selected': row.selected === true ? 'true' : undefined,
-                'aria-checked': row.checked === true ? 'true' : undefined,
-                'aria-disabled': row.disabled === true ? 'true' : undefined,
-                'aria-expanded': row.expanded === undefined ? undefined : row.expanded ? 'true' : 'false',
-            },
-        })),
-        selectionCells: options.selectable === true
-            ? options.rows.map((row) => createUiDomPlan('td', 'table-selection-cell', {
-                attrs: {
-                    'data-row-id': row.id,
-                    'data-sticky': 'start',
-                    'data-checked': row.checked === true ? 'true' : 'false',
-                },
-            }))
-            : [],
-        cells: options.rows.flatMap((row) => columns.map((column) => createUiDomPlan('td', 'table-cell', {
-            attrs: {
-                'data-row-id': row.id,
-                'data-column-id': column.id,
-                'data-align': column.align,
-                'data-sticky': column.sticky,
-                style: tableColumnStyle(column),
-            },
-        }))),
-    };
-}
-export function getNextTableSortDirection(current, cycle = 'tri-state') {
-    if (current === undefined || current === 'none')
-        return 'ascending';
-    if (current === 'ascending')
-        return 'descending';
-    return cycle === 'binary' ? 'ascending' : 'none';
-}
-export function toggleTableRowSelection(selectedIds, rowId, multiselect = true) {
-    if (selectedIds.has(rowId)) {
-        const next = new Set(selectedIds);
-        next.delete(rowId);
-        return next;
-    }
-    if (!multiselect)
-        return new Set([rowId]);
-    return new Set([...selectedIds, rowId]);
-}
-export function createTableToolbarStateContract(options = {}) {
-    const mode = options.mode ?? 'local';
-    const query = (options.query ?? '').trim();
-    const activeFilterIds = (options.filters ?? [])
-        .filter((filter) => filter.active === true)
-        .map((filter) => filter.id);
-    const selectedIds = normalizeSelectedIds(options.selectedIds);
-    const selectedCount = selectedIds.length;
-    const totalCount = normalizeCount(options.totalCount);
-    const filteredCount = normalizeCount(options.filteredCount);
-    const sortColumnId = options.sortColumnId ?? '';
-    const sortDirection = options.sortDirection ?? 'none';
-    const summary = formatDataToolbarSummary({
-        ...(totalCount === undefined ? {} : { totalCount }),
-        ...(filteredCount === undefined ? {} : { filteredCount }),
-        selectedCount,
-    });
-    const state = tableToolbarState({
-        activeFilterCount: activeFilterIds.length,
-        filteredCount,
-        loading: options.loading === true,
-        query,
-        selectedCount,
-        sortDirection,
-        totalCount,
-    });
-    return {
-        mode,
-        state,
-        query,
-        activeFilterIds,
-        activeFilterCount: activeFilterIds.length,
-        sortColumnId,
-        sortDirection,
-        selectedIds,
-        selectedCount,
-        totalCount,
-        filteredCount,
-        summary,
-        attrs: {
-            'data-source': mode,
-            'data-state': state,
-            'data-query': query,
-            'data-active-filter-ids': activeFilterIds.join(','),
-            'data-active-filter-count': activeFilterIds.length,
-            'data-sort-column': sortColumnId,
-            'data-sort-direction': sortDirection,
-            'data-selected-ids': selectedIds.join(','),
-            'data-selected-count': selectedCount,
-            'data-total-count': totalCount,
-            'data-filtered-count': filteredCount,
-            'data-summary': summary,
-        },
-    };
-}
-export function createTableColumnPreferenceStateContract(options) {
-    const knownIds = new Set(options.columns.map((column) => column.id));
-    const density = options.density ?? options.defaultDensity ?? 'comfortable';
-    const orderedIds = normalizeColumnPreferenceIds(options.orderIds, knownIds);
-    const visibleSet = options.visibleIds === undefined
-        ? undefined
-        : new Set(normalizeColumnPreferenceIds(options.visibleIds, knownIds));
-    const hiddenSet = new Set(normalizeColumnPreferenceIds(options.hiddenIds, knownIds));
-    const stickyStartSet = options.stickyStartIds === undefined
-        ? undefined
-        : new Set(normalizeColumnPreferenceIds(options.stickyStartIds, knownIds));
-    const stickyEndSet = options.stickyEndIds === undefined
-        ? undefined
-        : new Set(normalizeColumnPreferenceIds(options.stickyEndIds, knownIds));
-    const orderedColumns = orderTableColumns(options.columns, orderedIds);
-    const columns = orderedColumns.map((column) => {
-        const visible = (visibleSet === undefined || visibleSet.has(column.id)) && !hiddenSet.has(column.id);
-        const sticky = tableColumnPreferenceSticky(column, stickyStartSet, stickyEndSet);
-        const { hidden: _hidden, sticky: _sticky, ...baseColumn } = column;
-        void _hidden;
-        void _sticky;
-        return sticky === undefined
-            ? { ...baseColumn, hidden: !visible }
-            : { ...baseColumn, hidden: !visible, sticky };
-    });
-    const columnContracts = columns.map((column, index) => {
-        const visible = column.hidden !== true;
-        return {
-            id: column.id,
-            label: column.label ?? column.id,
-            visible,
-            order: index,
-            sticky: column.sticky,
-            attrs: {
-                'data-column-id': column.id,
-                'data-column-order': index,
-                'data-visible': visible ? 'true' : 'false',
-                'data-hidden': visible ? undefined : 'true',
-                'data-sticky': column.sticky,
-            },
-        };
-    });
-    const visibleIds = columnContracts.filter((column) => column.visible).map((column) => column.id);
-    const hiddenIds = columnContracts.filter((column) => !column.visible).map((column) => column.id);
-    const stickyStartIds = columnContracts
-        .filter((column) => column.sticky === 'start' && column.visible)
-        .map((column) => column.id);
-    const stickyEndIds = columnContracts
-        .filter((column) => column.sticky === 'end' && column.visible)
-        .map((column) => column.id);
-    const state = tableColumnPreferenceState({
-        columns,
-        density,
-        defaultDensity: options.defaultDensity,
-        hiddenIds,
-        orderIds: orderedIds,
-        sourceColumns: options.columns,
-        stickyEndIds: options.stickyEndIds,
-        stickyStartIds: options.stickyStartIds,
-        visibleIds: options.visibleIds,
-    });
-    return {
-        state,
-        density,
-        columnCount: options.columns.length,
-        visibleCount: visibleIds.length,
-        hiddenCount: hiddenIds.length,
-        orderedIds: columns.map((column) => column.id),
-        visibleIds,
-        hiddenIds,
-        stickyStartIds,
-        stickyEndIds,
-        columns,
-        columnContracts,
-        attrs: {
-            'data-table-column-preference-contract': 'true',
-            'data-state': state,
-            'data-density': density,
-            'data-column-count': options.columns.length,
-            'data-visible-column-count': visibleIds.length,
-            'data-hidden-column-count': hiddenIds.length,
-            'data-column-order': columns.map((column) => column.id).join(','),
-            'data-visible-column-ids': visibleIds.join(','),
-            'data-hidden-column-ids': hiddenIds.join(','),
-            'data-sticky-start-ids': stickyStartIds.join(','),
-            'data-sticky-end-ids': stickyEndIds.join(','),
-        },
-    };
-}
-export function createTableCellStateContract(options) {
-    const kind = options.kind ?? 'text';
-    const intent = options.intent ?? '';
-    const state = tableCellState(options);
-    return {
-        rowId: options.rowId,
-        columnId: options.columnId,
-        kind,
-        state,
-        intent,
-        attrs: {
-            'data-table-cell-contract': 'true',
-            'data-row-id': options.rowId,
-            'data-column-id': options.columnId,
-            'data-cell-kind': kind,
-            'data-cell-state': state,
-            'data-cell-intent': intent,
-            'data-value': options.value,
-            'data-tone': options.tone,
-            'data-interactive': options.interactive === true ? 'true' : undefined,
-            'data-truncate': options.truncate === true ? 'true' : undefined,
-            'aria-label': options.label,
-            'aria-describedby': options.describedBy,
-            'aria-disabled': options.disabled === true ? 'true' : undefined,
-            'aria-busy': options.loading === true ? 'true' : undefined,
-            ...options.attrs,
-        },
-    };
-}
-export function createTableBatchActionStateContract(options = {}) {
-    const selectedIds = normalizeSelectedIds(options.selectedIds);
-    const selectedCount = selectedIds.length;
-    const totalCount = normalizeCount(options.totalCount);
-    const eligibleCount = normalizeCount(options.eligibleCount) ?? totalCount;
-    const selectionState = tableSelectionSummaryState(selectedCount, eligibleCount);
-    const selectionSummary = formatTableSelectionSummary({
-        eligibleCount,
-        selectedCount,
-        totalCount,
-    });
-    const actionContracts = (options.actions ?? []).map((action) => tableBatchActionContract(action, selectedCount));
-    const availableActionIds = actionContracts
-        .filter((action) => action.state === 'available')
-        .map((action) => action.id);
-    const disabledActionIds = actionContracts
-        .filter((action) => action.state === 'disabled')
-        .map((action) => action.id);
-    const pendingActionIds = actionContracts
-        .filter((action) => action.state === 'pending')
-        .map((action) => action.id);
-    const hiddenActionIds = actionContracts
-        .filter((action) => action.state === 'hidden')
-        .map((action) => action.id);
-    return {
-        selectionState,
-        selectedIds,
-        selectedCount,
-        totalCount,
-        eligibleCount,
-        selectionSummary,
-        actionContracts,
-        availableActionIds,
-        disabledActionIds,
-        pendingActionIds,
-        hiddenActionIds,
-        attrs: {
-            'data-table-batch-action-contract': 'true',
-            'data-selection-state': selectionState,
-            'data-selected-ids': selectedIds.join(','),
-            'data-selected-count': selectedCount,
-            'data-total-count': totalCount,
-            'data-eligible-count': eligibleCount,
-            'data-selection-summary': selectionSummary,
-            'data-action-count': actionContracts.length,
-            'data-available-action-ids': availableActionIds.join(','),
-            'data-disabled-action-ids': disabledActionIds.join(','),
-            'data-pending-action-ids': pendingActionIds.join(','),
-            'data-hidden-action-ids': hiddenActionIds.join(','),
-        },
-    };
-}
-export function createFilterBarPlans(options) {
-    const activeCount = options.filters.filter((filter) => filter.active === true).length;
-    return {
-        root: createUiDomPlan('div', 'filter-bar', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            state: activeCount === 0 ? 'empty' : 'filtered',
-            attrs: {
-                id: options.id,
-                role: 'list',
-                'aria-label': options.label ?? 'Filters',
-                ...options.attrs,
-                'data-filter-count': options.filters.length,
-                'data-active-filter-count': activeCount,
-            },
-        }),
-        chips: options.filters.map((filter) => createUiDomPlan('button', 'filter-chip', {
-            ...(filter.disabled === undefined ? {} : { disabled: filter.disabled }),
-            state: filter.disabled === true ? 'disabled' : filter.active === true ? 'active' : 'idle',
-            attrs: {
-                type: 'button',
-                role: 'listitem',
-                'aria-pressed': filter.active === true ? 'true' : 'false',
-                'aria-label': filterChipLabel(filter),
-                'data-filter-id': filter.id,
-                'data-tone': filter.tone ?? 'neutral',
-                'data-removable': filter.removable === true ? 'true' : undefined,
-                'data-label': filter.label,
-                'data-value': filter.value,
-            },
-        })),
-        clear: activeCount === 0
-            ? undefined
-            : createUiDomPlan('button', 'filter-clear', {
-                attrs: {
-                    type: 'button',
-                    'aria-label': options.clearLabel ?? 'Clear filters',
-                    'data-count': activeCount,
-                },
-            }),
-    };
-}
-export function createDataToolbarPlans(options = {}) {
-    const filters = options.filters ?? [];
-    const filterBar = createFilterBarPlans({
-        filters,
-        label: 'Active filters',
-        ...(options.id === undefined ? {} : { id: `${options.id}-filters` }),
-        ...(options.density === undefined ? {} : { density: options.density }),
-    });
-    return {
-        root: createUiDomPlan('div', 'data-toolbar', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            state: filters.some((filter) => filter.active === true) ? 'filtered' : 'idle',
-            attrs: {
-                id: options.id,
-                role: 'toolbar',
-                ...options.attrs,
-                'data-action-count': options.actions?.length ?? 0,
-                'data-filter-count': filters.length,
-                'data-selected-count': options.selectedCount,
-            },
-        }),
-        search: options.searchValue === undefined && options.searchPlaceholder === undefined
-            ? undefined
-            : createUiDomPlan('input', 'data-toolbar-search', {
-                attrs: {
-                    type: 'search',
-                    role: 'searchbox',
-                    value: options.searchValue,
-                    placeholder: options.searchPlaceholder,
-                    'aria-label': options.searchLabel ?? 'Search data',
-                },
-            }),
-        filterBar,
-        summary: createUiDomPlan('output', 'data-toolbar-summary', {
-            attrs: {
-                'aria-live': 'polite',
-                'data-summary': formatDataToolbarSummary(options),
-            },
-        }),
-        actions: (options.actions ?? []).map((action) => createUiDomPlan('button', 'data-toolbar-action', {
-            ...(action.disabled === undefined ? {} : { disabled: action.disabled }),
-            state: action.disabled === true ? 'disabled' : action.pressed === true ? 'pressed' : 'idle',
-            attrs: {
-                type: 'button',
-                'aria-label': action.label,
-                'aria-pressed': action.pressed === undefined ? undefined : action.pressed ? 'true' : 'false',
-                'data-action-id': action.id,
-                'data-tone': action.tone ?? 'secondary',
-                'data-label': action.label,
-            },
-        })),
-    };
-}
-export function formatDataToolbarSummary(options) {
-    const total = normalizeCount(options.totalCount);
-    const filtered = normalizeCount(options.filteredCount);
-    const selected = normalizeCount(options.selectedCount);
-    const visible = filtered ?? total;
-    const parts = [];
-    if (visible !== undefined &&
-        total !== undefined &&
-        filtered !== undefined &&
-        filtered !== total) {
-        parts.push(`${visible} of ${total}`);
-    }
-    else if (visible !== undefined) {
-        parts.push(`${visible} rows`);
-    }
-    if (selected !== undefined && selected > 0)
-        parts.push(`${selected} selected`);
-    return parts.length === 0 ? 'No summary' : parts.join(' · ');
-}
-export function createEmptyPlan(options = {}) {
-    const status = options.status ?? 'empty';
-    return createUiDomPlan('div', 'empty', {
-        ...(options.className === undefined ? {} : { className: options.className }),
-        state: status,
-        attrs: {
-            id: options.id,
-            role: 'status',
-            'aria-label': options.label ?? 'No data',
-            'aria-labelledby': options.titleId,
-            'aria-describedby': options.descriptionId,
-            ...options.attrs,
-            'data-status': status,
-            'data-icon-ready': options.icon === false ? 'false' : 'true',
-            'data-actionable': options.action === undefined ? undefined : '',
-        },
-    });
-}
-export function createEmptyPlans(options = {}) {
-    return {
-        root: createEmptyPlan(options),
-        ...(options.icon === false
-            ? {}
-            : {
-                icon: createUiDomPlan('span', 'empty-icon', {
-                    attrs: { 'aria-hidden': 'true', 'data-status': options.status ?? 'empty' },
-                }),
-            }),
-        ...(options.titleId === undefined
-            ? {}
-            : {
-                title: createUiDomPlan('strong', 'empty-title', {
-                    attrs: { id: options.titleId },
-                }),
-            }),
-        ...(options.descriptionId === undefined
-            ? {}
-            : {
-                description: createUiDomPlan('p', 'empty-description', {
-                    attrs: { id: options.descriptionId },
-                }),
-            }),
-        ...(options.action === undefined
-            ? {}
-            : { actionButton: createDataDisplayActionButton('empty', options.action) }),
-    };
-}
-export function createResultPlans(options = {}) {
-    const status = options.status ?? 'info';
-    return {
-        root: createUiDomPlan('section', 'result', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            state: status,
-            attrs: {
-                id: options.id,
-                role: status === 'error' || status === 'warning' ? 'alert' : 'status',
-                'aria-labelledby': options.titleId,
-                'aria-describedby': options.descriptionId,
-                ...options.attrs,
-                'data-status': status,
-                'data-icon-ready': options.icon === false ? 'false' : 'true',
-                'data-actionable': options.action === undefined ? undefined : '',
-                'data-dismissible': options.closeLabel === undefined ? undefined : '',
-            },
-        }),
-        ...(options.icon === false
-            ? {}
-            : {
-                icon: createUiDomPlan('span', 'result-icon', {
-                    attrs: { 'aria-hidden': 'true', 'data-status': status },
-                }),
-            }),
-        ...(options.titleId === undefined
-            ? {}
-            : { title: createUiDomPlan('h3', 'result-title', { attrs: { id: options.titleId } }) }),
-        ...(options.descriptionId === undefined
-            ? {}
-            : {
-                description: createUiDomPlan('p', 'result-description', {
-                    attrs: { id: options.descriptionId },
-                }),
-            }),
-        ...(options.action === undefined
-            ? {}
-            : { actionButton: createDataDisplayActionButton('result', options.action) }),
-        ...(options.closeLabel === undefined
-            ? {}
-            : {
-                closeButton: createUiDomPlan('button', 'result-close', {
-                    attrs: {
-                        type: 'button',
-                        'aria-label': options.closeLabel,
-                        'data-display-close': '',
-                    },
-                }),
-            }),
-    };
-}
-export function createBadgePlan(options = {}) {
-    const tone = options.tone ?? 'neutral';
-    return createUiDomPlan('span', 'badge', {
-        ...(options.className === undefined ? {} : { className: options.className }),
-        state: tone,
-        attrs: {
-            'aria-label': options.label,
-            ...options.attrs,
-            'data-tone': tone,
-        },
-    });
-}
-export function createBadgeCountOverflowContract(options = {}) {
-    const count = normalizeCount(options.count) ?? 0;
-    const max = Math.max(1, normalizeCount(options.max) ?? 99);
-    const dot = options.dot === true;
-    const overflow = !dot && count > max;
-    const state = dot
-        ? 'dot'
-        : count <= 0
-            ? 'empty'
-            : overflow
-                ? 'overflow'
-                : 'count';
-    const displayValue = dot || count <= 0 ? '' : overflow ? `${max}+` : String(count);
-    return {
-        state,
-        count,
-        max,
-        displayValue,
-        overflow,
-        dot,
-        attrs: {
-            'data-badge-count-overflow-contract': 'true',
-            'data-badge-state': state,
-            'data-count': count,
-            'data-max': max,
-            'data-display-value': displayValue,
-            'data-overflow': overflow ? 'true' : undefined,
-            'data-dot': dot ? 'true' : undefined,
-            'aria-label': options.label ?? badgeCountOverflowLabel({ count, displayValue, dot, overflow }),
-        },
-    };
-}
-export function createTagPlans(options) {
-    const variant = options.variant ?? 'tag';
-    const interactive = options.selected !== undefined || options.disabled === true;
-    const tag = createUiDomPlan(interactive ? 'button' : 'span', variant, {
-        ...(options.className === undefined ? {} : { className: options.className }),
-        ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-        state: options.disabled === true ? 'disabled' : options.selected === true ? 'selected' : 'idle',
-        attrs: {
-            id: options.id,
-            type: interactive ? 'button' : undefined,
-            role: interactive ? 'option' : undefined,
-            'aria-selected': options.selected === undefined ? undefined : String(options.selected),
-            'aria-label': tagLabel(options),
-            ...options.attrs,
-            'data-tone': options.tone ?? 'neutral',
-            'data-variant': variant,
-            'data-label': options.label,
-            'data-value': options.value,
-            'data-removable': options.removable === true ? 'true' : undefined,
-            'data-count': options.count,
-        },
-    });
-    return {
-        root: tag,
-        ...(options.icon === true
-            ? {
-                icon: createUiDomPlan('span', `${variant}-icon`, {
-                    attrs: {
-                        'aria-hidden': 'true',
-                        'data-tone': options.tone ?? 'neutral',
-                    },
-                }),
-            }
-            : {}),
-        label: createUiDomPlan('span', `${variant}-label`, {
-            attrs: { 'data-label': options.label },
-        }),
-        ...(options.value === undefined
-            ? {}
-            : {
-                value: createUiDomPlan('span', `${variant}-value`, {
-                    attrs: { 'data-value': options.value },
-                }),
-            }),
-        ...(options.count === undefined
-            ? {}
-            : {
-                count: createUiDomPlan('span', `${variant}-count`, {
-                    attrs: { 'aria-label': `${options.count} items`, 'data-count': options.count },
-                }),
-            }),
-        ...(options.removable === true
-            ? {
-                removeButton: createUiDomPlan('button', `${variant}-remove`, {
-                    attrs: {
-                        type: 'button',
-                        'aria-label': `Remove ${options.label}`,
-                        'data-remove-id': options.id,
-                    },
-                }),
-            }
-            : {}),
-    };
-}
-export function createChipPlans(options) {
-    return createTagPlans({ ...options, variant: 'chip' });
-}
-export function createNotePlans(options = {}) {
-    return createNoteLikePlans('note', options);
-}
-export function createCalloutPlans(options = {}) {
-    return createNoteLikePlans('callout', options);
-}
-export function createNoteRichContentStateContract(options) {
-    const density = options.density ?? 'comfortable';
-    const blocks = (options.blocks ?? []).map((block) => ({
-        ...block,
-        attrs: {
-            'data-note-rich-content-block': 'true',
-            'data-block-id': block.id,
-            'data-block-kind': block.kind,
-        },
-    }));
-    const blockIds = blocks.map((block) => block.id);
-    const state = blocks.length === 0 ? 'empty' : 'ready';
-    const actionState = options.actionId === undefined
-        ? 'hidden'
-        : options.actionDisabled === true
-            ? 'disabled'
-            : 'ready';
-    const closeState = options.closeAvailable !== true
-        ? 'hidden'
-        : options.closeDisabled === true
-            ? 'disabled'
-            : 'ready';
-    return {
-        kind: options.kind,
-        density,
-        state,
-        actionState,
-        closeState,
-        blockCount: blocks.length,
-        blockIds,
-        blocks,
-        attrs: {
-            'data-note-rich-content-contract': 'true',
-            'data-note-kind': options.kind,
-            'data-content-density': density,
-            'data-content-state': state,
-            'data-block-count': blocks.length,
-            'data-block-ids': blockIds.join(','),
-            'data-action-state': actionState,
-            'data-close-state': closeState,
-        },
-        contentAttrs: {
-            'data-note-rich-content': 'true',
-            'data-content-density': density,
-            'data-content-state': state,
-        },
-        actionAttrs: {
-            type: 'button',
-            'data-action-id': options.actionId,
-            'data-action-state': actionState,
-            hidden: actionState === 'hidden' ? true : undefined,
-            disabled: actionState === 'disabled' ? true : undefined,
-            'aria-disabled': actionState === 'disabled' ? 'true' : undefined,
-        },
-        closeAttrs: {
-            type: 'button',
-            'data-close-state': closeState,
-            hidden: closeState === 'hidden' ? true : undefined,
-            disabled: closeState === 'disabled' ? true : undefined,
-            'aria-disabled': closeState === 'disabled' ? 'true' : undefined,
-        },
-    };
-}
-export function createPanelPlans(options = {}) {
-    return createPanelLikePlans('panel', options);
-}
-export function createCardPlans(options = {}) {
-    return createPanelLikePlans('card', options);
-}
-export function createPanelCardMediaActionStateContract(options) {
-    const mediaState = options.mediaId === undefined ? 'empty' : 'ready';
-    const mediaPlacement = options.mediaPlacement ?? 'top';
-    const selectionState = options.selected === true ? 'selected' : 'idle';
-    const selectedEmphasis = selectionState === 'selected' && options.selectedEmphasis === true;
-    const hiddenActionIds = new Set(options.hiddenActionIds ?? []);
-    const actionContracts = (options.actions ?? []).map((action) => {
-        const state = hiddenActionIds.has(action.id)
-            ? 'hidden'
-            : action.disabled === true
-                ? 'disabled'
-                : 'ready';
-        return {
-            id: action.id,
-            state,
-            attrs: {
-                type: 'button',
-                'data-action-id': action.id,
-                'data-action-state': state,
-                hidden: state === 'hidden' ? true : undefined,
-                disabled: state === 'disabled' ? true : undefined,
-                'aria-disabled': state === 'disabled' ? 'true' : undefined,
-            },
-        };
-    });
-    const readyActionIds = actionContracts
-        .filter((action) => action.state === 'ready')
-        .map((action) => action.id);
-    const disabledActionIds = actionContracts
-        .filter((action) => action.state === 'disabled')
-        .map((action) => action.id);
-    const resolvedHiddenActionIds = actionContracts
-        .filter((action) => action.state === 'hidden')
-        .map((action) => action.id);
-    return {
-        kind: options.kind,
-        mediaState,
-        mediaPlacement,
-        selectionState,
-        selectedEmphasis,
-        actionCount: actionContracts.length,
-        readyActionIds,
-        disabledActionIds,
-        hiddenActionIds: resolvedHiddenActionIds,
-        attrs: {
-            'data-panel-card-media-action-contract': 'true',
-            'data-panel-card-kind': options.kind,
-            'data-media-state': mediaState,
-            'data-media-placement': mediaPlacement,
-            'data-selection-state': selectionState,
-            'data-selected-emphasis': selectedEmphasis ? 'true' : undefined,
-            'data-action-count': actionContracts.length,
-            'data-ready-action-ids': readyActionIds.join(','),
-            'data-disabled-action-ids': disabledActionIds.join(','),
-            'data-hidden-action-ids': resolvedHiddenActionIds.join(','),
-        },
-        mediaAttrs: {
-            id: options.mediaId,
-            role: mediaState === 'ready' ? 'img' : undefined,
-            'aria-label': mediaState === 'ready' ? options.mediaLabel : undefined,
-            'aria-hidden': mediaState === 'empty' ? 'true' : undefined,
-            hidden: mediaState === 'empty' ? true : undefined,
-            'data-media-state': mediaState,
-            'data-media-placement': mediaPlacement,
-        },
-        actionContracts,
-    };
-}
-export function createPageHeaderPlans(options) {
-    const actions = (options.actions ?? []).map((action) => createDataDisplayActionButton('page-header', action));
-    return {
-        root: createUiDomPlan('header', 'product-page-header', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            attrs: {
-                id: options.id,
-                'aria-labelledby': options.titleId,
-                'aria-describedby': options.subtitleId,
-                ...options.attrs,
-                'data-has-breadcrumb': options.breadcrumbLabel === undefined ? undefined : 'true',
-                'data-action-count': actions.length,
-                'data-tabs-ready': options.tabsId === undefined ? undefined : 'true',
-            },
-        }),
-        ...(options.breadcrumbLabel === undefined
-            ? {}
-            : {
-                breadcrumbSlot: createUiDomPlan('nav', 'page-header-breadcrumb', {
-                    attrs: { 'aria-label': options.breadcrumbLabel, 'data-slot': 'breadcrumb' },
-                }),
-            }),
-        content: createUiDomPlan('div', 'page-header-content'),
-        title: createUiDomPlan('h1', 'page-header-title', { attrs: { id: options.titleId } }),
-        ...(options.subtitleId === undefined
-            ? {}
-            : {
-                subtitle: createUiDomPlan('p', 'page-header-subtitle', {
-                    attrs: { id: options.subtitleId },
-                }),
-            }),
-        ...(actions.length === 0
-            ? {}
-            : {
-                actionsSlot: createUiDomPlan('div', 'page-header-actions', {
-                    attrs: { role: 'toolbar', 'data-slot': 'actions', 'data-action-count': actions.length },
-                }),
-            }),
-        actions,
-        ...(options.tabsId === undefined
-            ? {}
-            : {
-                tabsSlot: createUiDomPlan('div', 'page-header-tabs', {
-                    attrs: { id: `${options.tabsId}-slot`, 'data-slot': 'tabs' },
-                }),
-            }),
-    };
-}
-export function createStatCardPlans(options) {
-    const tone = options.tone ?? 'neutral';
-    const loading = options.loading === true;
-    return {
-        root: createUiDomPlan('article', 'stat-card', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            loading,
-            attrs: {
-                id: options.id,
-                'aria-labelledby': options.titleId,
-                'aria-describedby': options.descriptionId,
-                ...options.attrs,
-                'data-tone': tone,
-                'data-value': options.value,
-                'data-unit': options.unit,
-                'data-trend-direction': options.trendDirection,
-                'data-actionable': options.action === undefined ? undefined : '',
-            },
-        }),
-        header: createUiDomPlan('header', 'stat-card-header'),
-        title: createUiDomPlan('h3', 'stat-card-title', { attrs: { id: options.titleId } }),
-        value: createUiDomPlan('output', 'stat-card-value', {
-            attrs: {
-                'aria-live': 'polite',
-                'data-value': loading ? undefined : options.value,
-            },
-        }),
-        ...(options.unit === undefined
-            ? {}
-            : {
-                unit: createUiDomPlan('span', 'stat-card-unit', { attrs: { 'data-unit': options.unit } }),
-            }),
-        ...(options.trend === undefined
-            ? {}
-            : {
-                trend: createUiDomPlan('span', 'stat-card-trend', {
-                    attrs: {
-                        'aria-label': options.trend,
-                        'data-trend': options.trend,
-                        'data-direction': options.trendDirection ?? 'flat',
-                    },
-                }),
-            }),
-        ...(options.descriptionId === undefined
-            ? {}
-            : {
-                description: createUiDomPlan('p', 'stat-card-description', {
-                    attrs: { id: options.descriptionId },
-                }),
-            }),
-        ...(options.action === undefined
-            ? {}
-            : { actionButton: createDataDisplayActionButton('stat-card', options.action) }),
-    };
-}
-export function createTablePanelPlans(options) {
-    const actions = (options.actions ?? []).map((action) => createDataDisplayActionButton('table-panel', action));
-    const emptyOptions = normalizeEmptyOptions(options.empty);
-    const table = createTablePlans({
-        ...(options.id === undefined ? {} : { id: `${options.id}-table` }),
-        columns: options.columns,
-        rows: options.rows,
-        ...(options.captionId === undefined ? {} : { captionId: options.captionId }),
-        ...(options.selectable === undefined ? {} : { selectable: options.selectable }),
-        ...(options.density === undefined ? {} : { density: options.density }),
-        ...(options.stickyHeader === undefined ? {} : { stickyHeader: options.stickyHeader }),
-        ...(options.tableAttrs === undefined ? {} : { attrs: options.tableAttrs }),
-    });
-    return {
-        root: createUiDomPlan('section', 'table-panel', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            ...(options.loading === undefined ? {} : { loading: options.loading }),
-            attrs: {
-                id: options.id,
-                'aria-labelledby': options.titleId,
-                'aria-describedby': options.descriptionId,
-                ...options.attrs,
-                'data-row-count': options.rows.length,
-                'data-column-count': options.columns.filter((column) => column.hidden !== true).length,
-                'data-action-count': actions.length,
-                'data-has-toolbar': options.toolbarLabel === undefined ? undefined : 'true',
-                'data-empty': emptyOptions === undefined ? undefined : 'true',
-            },
-        }),
-        ...(options.titleId === undefined && options.descriptionId === undefined && actions.length === 0
-            ? {}
-            : { header: createUiDomPlan('header', 'table-panel-header') }),
-        ...(options.titleId === undefined
-            ? {}
-            : { title: createUiDomPlan('h3', 'table-panel-title', { attrs: { id: options.titleId } }) }),
-        ...(options.descriptionId === undefined
-            ? {}
-            : {
-                description: createUiDomPlan('p', 'table-panel-description', {
-                    attrs: { id: options.descriptionId },
-                }),
-            }),
-        ...(options.toolbarLabel === undefined
-            ? {}
-            : {
-                toolbarSlot: createUiDomPlan('div', 'table-panel-toolbar', {
-                    attrs: {
-                        role: 'toolbar',
-                        'aria-label': options.toolbarLabel,
-                        'data-slot': 'toolbar',
-                    },
-                }),
-            }),
-        actions,
-        body: createUiDomPlan('div', 'table-panel-body'),
-        scroller: createUiDomPlan('div', 'table-panel-scroller'),
-        table,
-        ...(emptyOptions === undefined ? {} : { empty: createEmptyPlan(emptyOptions) }),
-    };
-}
-export function createProgressPlan(options) {
-    const max = options.max ?? 100;
-    const value = Math.min(Math.max(options.value, 0), max);
-    return createUiDomPlan('div', 'progress', {
-        ...(options.className === undefined ? {} : { className: options.className }),
-        state: options.status ?? 'idle',
-        attrs: {
-            role: 'progressbar',
-            'aria-label': options.label,
-            'aria-valuemin': 0,
-            'aria-valuemax': max,
-            'aria-valuenow': value,
-            ...options.attrs,
-            'data-status': options.status,
-            style: `--kui-progress-value: ${(value / max) * 100}%;${styleSuffix(options.attrs?.style)}`,
-        },
-    });
-}
-export function createTypographyPlan(options = {}) {
-    const variant = options.variant ?? 'body';
-    const tag = options.as ?? typographyTag(variant);
-    return createUiDomPlan(tag, 'typography', {
-        ...(options.className === undefined ? {} : { className: options.className }),
-        state: variant,
-        attrs: {
-            id: options.id,
-            href: tag === 'a' ? options.href : undefined,
-            'aria-label': options.label,
-            ...options.attrs,
-            'data-variant': variant,
-            'data-truncate': options.truncate === true ? 'true' : undefined,
-        },
-    });
-}
-export function createTypographyRichContentStateContract(options = {}) {
-    const source = options.source ?? 'rich-text';
-    const density = options.density ?? 'comfortable';
-    const blocks = (options.blocks ?? []).map((block) => ({
-        ...block,
-        attrs: {
-            'data-rich-content-block': 'true',
-            'data-block-id': block.id,
-            'data-block-kind': block.kind,
-        },
-    }));
-    const blockIds = blocks.map((block) => block.id);
-    const headingCount = blocks.filter((block) => block.kind === 'heading').length;
-    const state = blocks.length === 0 ? 'empty' : 'ready';
-    return {
-        source,
-        density,
-        state,
-        blockCount: blocks.length,
-        headingCount,
-        blockIds,
-        blocks,
-        attrs: {
-            'data-typography-rich-content-contract': 'true',
-            'data-content-source': source,
-            'data-content-density': density,
-            'data-content-state': state,
-            'data-block-count': blocks.length,
-            'data-heading-count': headingCount,
-            'data-block-ids': blockIds.join(','),
-            'aria-label': options.label,
-        },
-    };
-}
-export function createDividerPlans(options = {}) {
-    const orientation = options.orientation ?? 'horizontal';
-    return {
-        root: createUiDomPlan('div', 'divider', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            state: options.label === undefined ? 'line' : 'labelled',
-            attrs: {
-                id: options.id,
-                role: 'separator',
-                'aria-orientation': orientation,
-                'aria-labelledby': options.labelId,
-                ...options.attrs,
-                'data-orientation': orientation,
-                'data-inset': dividerInset(options.inset),
-                'data-label': options.label,
-            },
-        }),
-        ...(options.label === undefined
-            ? {}
-            : {
-                label: createUiDomPlan('span', 'divider-label', {
-                    attrs: {
-                        id: options.labelId,
-                        'data-label': options.label,
-                    },
-                }),
-            }),
-    };
-}
-export function createDividerSectionHeadingStateContract(options) {
-    const state = options.current === true ? 'current' : 'idle';
-    const level = options.level ?? 2;
-    return {
-        state,
-        headingId: options.headingId,
-        sectionId: options.sectionId,
-        level,
-        attrs: {
-            'data-divider-section-heading-contract': 'true',
-            'data-section-heading-state': state,
-            'data-section-id': options.sectionId,
-            'data-heading-id': options.headingId,
-            'data-heading-level': level,
-            'aria-labelledby': options.headingId,
-            'aria-describedby': options.descriptionId,
-        },
-        headingAttrs: {
-            id: options.headingId,
-            role: 'heading',
-            'aria-level': level,
-            'aria-describedby': options.descriptionId,
-            'data-section-heading-state': state,
-        },
-        sectionAttrs: {
-            id: options.sectionId,
-            'aria-labelledby': options.headingId,
-            'aria-describedby': options.descriptionId,
-            'data-section-heading-state': state,
-        },
-    };
-}
-export function createAvatarPlans(options) {
-    const size = options.size ?? 'md';
-    const initials = normalizeInitials(options.initials ?? initialsFromName(options.name));
-    return {
-        root: createUiDomPlan('span', 'avatar', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            state: options.src === undefined ? 'fallback' : 'image',
-            attrs: {
-                id: options.id,
-                role: 'img',
-                'aria-label': options.name,
-                ...options.attrs,
-                'data-size': size,
-                'data-name': options.name,
-                'data-initials': initials,
-                'data-status': options.status,
-            },
-        }),
-        ...(options.src === undefined
-            ? {}
-            : {
-                image: createUiDomPlan('img', 'avatar-image', {
-                    attrs: {
-                        src: options.src,
-                        alt: options.alt ?? '',
-                    },
-                }),
-            }),
-        fallback: createUiDomPlan('span', 'avatar-fallback', {
-            attrs: {
-                'aria-hidden': options.src === undefined ? undefined : 'true',
-                'data-initials': initials,
-            },
-        }),
-        ...(options.status === undefined
-            ? {}
-            : {
-                status: createUiDomPlan('span', 'avatar-status', {
-                    attrs: {
-                        'aria-label': `${options.name} is ${options.status}`,
-                        'data-status': options.status,
-                    },
-                }),
-            }),
-    };
-}
-export function createAvatarGroupPlans(options) {
-    const maxVisible = Math.max(0, Math.trunc(options.maxVisible ?? options.avatars.length));
-    const visible = options.avatars.slice(0, maxVisible);
-    const overflowCount = Math.max(0, options.avatars.length - visible.length);
-    return {
-        root: createUiDomPlan('div', 'avatar-group', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: options.id,
-                role: 'group',
-                'aria-label': options.label ?? `${options.avatars.length} people`,
-                ...options.attrs,
-                'data-count': options.avatars.length,
-                'data-visible-count': visible.length,
-                'data-overflow-count': overflowCount,
-                'data-size': options.size ?? 'md',
-            },
-        }),
-        avatars: visible.map((avatar) => createAvatarPlans({ ...avatar, size: avatar.size ?? options.size ?? 'md' })),
-        ...(overflowCount === 0
-            ? {}
-            : {
-                overflow: createUiDomPlan('span', 'avatar-overflow', {
-                    attrs: {
-                        role: 'img',
-                        'aria-label': `${overflowCount} more`,
-                        'data-overflow-count': overflowCount,
-                    },
-                }),
-            }),
-    };
-}
-export function createAvatarImagePresenceStateContract(options) {
-    const imageState = options.imageState ?? avatarImageState(options);
-    const presenceSource = options.presenceSource ?? 'unknown';
-    const cacheState = options.cacheState ?? (options.cacheKey === undefined ? 'unbound' : 'miss');
-    const fallbackInitials = normalizeInitials(options.fallbackInitials ?? initialsFromName(options.name));
-    return {
-        imageState,
-        presenceSource,
-        cacheState,
-        fallbackInitials,
-        attrs: {
-            'data-avatar-image-presence-contract': 'true',
-            'data-image-state': imageState,
-            'data-image-src': options.src,
-            'data-image-error': options.imageError,
-            'data-presence-status': options.status,
-            'data-presence-source': presenceSource,
-            'data-presence-updated-at': options.presenceUpdatedAt,
-            'data-cache-state': cacheState,
-            'data-cache-key': options.cacheKey,
-            'data-cached-at': options.cachedAt,
-            'data-fallback-initials': fallbackInitials,
-            'aria-busy': imageState === 'loading' ? 'true' : undefined,
-        },
-    };
-}
-export function createKbdPlan(options) {
-    return createUiDomPlan('kbd', 'kbd', {
-        ...(options.className === undefined ? {} : { className: options.className }),
-        attrs: {
-            'aria-label': options.label ?? options.key,
-            ...options.attrs,
-            'data-key': options.key,
-        },
-    });
-}
-export function createShortcutPlans(options) {
-    const label = options.label ?? formatShortcutLabel(options.keys);
-    return {
-        root: createUiDomPlan('span', 'shortcut', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                role: 'img',
-                'aria-label': label,
-                ...options.attrs,
-                'data-shortcut': label,
-                'data-key-count': options.keys.length,
-            },
-        }),
-        keys: options.keys.map((key) => createKbdPlan({ key })),
-        separators: options.keys.slice(1).map((_, index) => createUiDomPlan('span', 'shortcut-separator', {
-            attrs: {
-                'aria-hidden': 'true',
-                'data-index': index,
-            },
-        })),
-    };
-}
-export function createShortcutDisplayStateContract(options) {
-    const platform = options.platform ?? 'generic';
-    const keys = options.keys.map((key) => key.trim()).filter((key) => key !== '');
-    const keyContracts = keys.map((key) => {
-        const alias = options.modifierAliases?.[key]?.trim() ?? '';
-        const displayKey = alias === '' ? key : alias;
-        const aliased = displayKey !== key;
-        return {
-            key,
-            displayKey,
-            aliased,
-            attrs: {
-                'data-key': key,
-                'data-display-key': displayKey,
-                'data-modifier-alias': aliased ? 'true' : undefined,
-            },
-        };
-    });
-    const displayKeys = keyContracts.map((key) => key.displayKey);
-    const aliasedKeys = keyContracts.filter((key) => key.aliased).map((key) => key.key);
-    const state = keys.length === 0 ? 'empty' : aliasedKeys.length === 0 ? 'ready' : 'aliased';
-    const label = options.label?.trim() || formatShortcutLabel(displayKeys);
-    return {
-        platform,
-        state,
-        keys,
-        displayKeys,
-        aliasedKeys,
-        label,
-        keyContracts,
-        attrs: {
-            'data-shortcut-display-contract': 'true',
-            'data-shortcut-platform': platform,
-            'data-shortcut-display-state': state,
-            'data-shortcut-keys': keys.join(','),
-            'data-shortcut-display-keys': displayKeys.join(','),
-            'data-aliased-keys': aliasedKeys.join(','),
-            'data-key-count': keys.length,
-            'data-shortcut-label': label,
-            'aria-label': label,
-        },
-    };
-}
-export function createPaginationPlans(options) {
-    const pageCount = getPaginationPageCount(options);
-    const page = clampPage(options.page, pageCount);
-    const items = createPaginationItems({
-        page,
-        pageCount,
-        ...(options.siblingCount === undefined ? {} : { siblingCount: options.siblingCount }),
-        ...(options.boundaryCount === undefined ? {} : { boundaryCount: options.boundaryCount }),
-    });
-    const root = createUiDomPlan('nav', 'pagination', {
-        ...(options.className === undefined ? {} : { className: options.className }),
-        attrs: {
-            id: options.id,
-            'aria-label': options.label ?? 'Pagination',
-            ...options.attrs,
-            'data-page': page,
-            'data-page-count': pageCount,
-            'data-total-items': normalizeCount(options.totalItems),
-        },
-    });
-    const list = createUiDomPlan('ol', 'pagination-list', { attrs: { role: 'list' } });
-    const previous = createPaginationControl('previous', page <= 1 ? 1 : page - 1, page <= 1, options.previousLabel ?? 'Previous page');
-    const pages = items.map((item, index) => createPaginationItemPlan(item, index, options.pageLabel));
-    const next = createPaginationControl('next', page >= pageCount ? pageCount : page + 1, page >= pageCount, options.nextLabel ?? 'Next page');
-    const summary = options.summary ??
-        formatPaginationSummary({
-            ...options,
-            page,
-            pageCount,
-        });
-    const summaryPlan = createUiDomPlan('output', 'pagination-summary', {
-        attrs: {
-            'aria-live': 'polite',
-            'data-summary': summary,
-        },
-    });
-    return {
-        root,
-        list,
-        previous,
-        pages,
-        next,
-        summary: summaryPlan,
-        model: {
-            rootId: typeof root.attrs.id === 'string' ? root.attrs.id : '',
-            rootClassName: root.className,
-            page,
-            pageCount,
-            totalItems: normalizeCount(options.totalItems) ?? 0,
-            previousClassName: previous.className,
-            previousLabel: typeof previous.attrs['aria-label'] === 'string' ? previous.attrs['aria-label'] : '',
-            previousPage: typeof previous.attrs['data-page'] === 'number' ? previous.attrs['data-page'] : 1,
-            previousDisabled: previous.attrs.disabled === true || previous.attrs.disabled === '',
-            listClassName: list.className,
-            pages: items.map((item, index) => createPaginationItemModel(item, index, pages[index], options.pageLabel)),
-            nextClassName: next.className,
-            nextLabel: typeof next.attrs['aria-label'] === 'string' ? next.attrs['aria-label'] : '',
-            nextPage: typeof next.attrs['data-page'] === 'number' ? next.attrs['data-page'] : pageCount,
-            nextDisabled: next.attrs.disabled === true || next.attrs.disabled === '',
-            summaryClassName: summaryPlan.className,
-            summary,
-        },
-    };
-}
-export function createPaginationItems(options) {
-    const pageCount = Math.max(1, Math.trunc(options.pageCount ?? 1));
-    const page = clampPage(options.page, pageCount);
-    const siblingCount = Math.max(0, Math.trunc(options.siblingCount ?? 1));
-    const boundaryCount = Math.max(0, Math.trunc(options.boundaryCount ?? 1));
-    const pages = new Set();
-    for (let value = 1; value <= Math.min(boundaryCount, pageCount); value += 1)
-        pages.add(value);
-    for (let value = Math.max(1, pageCount - boundaryCount + 1); value <= pageCount; value += 1) {
-        pages.add(value);
-    }
-    for (let value = Math.max(1, page - siblingCount); value <= Math.min(pageCount, page + siblingCount); value += 1) {
-        pages.add(value);
-    }
-    const sorted = [...pages].sort((left, right) => left - right);
-    const items = [];
-    let previous = 0;
-    for (const value of sorted) {
-        if (previous > 0 && value - previous > 1)
-            items.push({ kind: 'ellipsis' });
-        items.push({ kind: 'page', page: value, current: value === page });
-        previous = value;
-    }
-    return items;
-}
-export function formatPaginationSummary(options) {
-    const pageCount = getPaginationPageCount(options);
-    const page = clampPage(options.page, pageCount);
-    const total = normalizeCount(options.totalItems);
-    const pageSize = normalizeCount(options.pageSize);
-    if (total !== undefined && pageSize !== undefined && total > 0) {
-        const start = (page - 1) * pageSize + 1;
-        const end = Math.min(total, page * pageSize);
-        return `${start}-${end} of ${total}`;
-    }
-    return `Page ${page} of ${pageCount}`;
-}
-export function createListPlans(options) {
-    const selectionMode = options.selectionMode ?? 'none';
-    return {
-        root: createUiDomPlan(options.ordered === true ? 'ol' : 'ul', 'list', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            attrs: {
-                id: options.id,
-                role: selectionMode === 'none' ? 'list' : 'listbox',
-                'aria-label': options.label,
-                'aria-multiselectable': selectionMode === 'multiple' ? 'true' : undefined,
-                ...options.attrs,
-                'data-count': options.items.length,
-                'data-selection-mode': selectionMode,
-            },
-        }),
-        items: options.items.map((item) => createUiDomPlan('li', 'list-item', {
-            ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
-            state: item.disabled === true ? 'disabled' : item.selected === true ? 'selected' : 'idle',
-            attrs: {
-                role: selectionMode === 'none' ? 'listitem' : 'option',
-                'aria-selected': selectionMode === 'none' ? undefined : String(item.selected === true),
-                'data-item-id': item.id,
-                'data-label': item.label,
-                'data-description': item.description,
-                'data-meta': item.meta,
-                'data-actionable': item.actionLabel === undefined ? undefined : '',
-            },
-        })),
-        icons: options.items.map((item) => item.icon === true
-            ? createUiDomPlan('span', 'list-item-icon', {
-                attrs: { 'aria-hidden': 'true', 'data-item-id': item.id },
-            })
-            : undefined),
-        labels: options.items.map((item) => createUiDomPlan('span', 'list-item-label', {
-            attrs: { 'data-label': item.label ?? item.id },
-        })),
-        descriptions: options.items.map((item) => item.description === undefined
-            ? undefined
-            : createUiDomPlan('p', 'list-item-description', {
-                attrs: { 'data-description': item.description },
-            })),
-        metas: options.items.map((item) => item.meta === undefined
-            ? undefined
-            : createUiDomPlan('span', 'list-item-meta', {
-                attrs: { 'data-meta': item.meta },
-            })),
-        actions: options.items.map((item) => item.actionLabel === undefined
-            ? undefined
-            : createUiDomPlan('button', 'list-item-action', {
-                attrs: {
-                    type: 'button',
-                    'aria-label': item.actionLabel,
-                    'data-item-id': item.id,
-                },
-            })),
-    };
-}
-export function createListGroupedItemActionStateContract(options) {
-    const itemById = new Map(options.items.map((item) => [item.id, item]));
-    const groupedIds = new Set();
-    const groups = (options.groups ?? []).map((group) => {
-        const itemIds = group.itemIds.filter((id) => {
-            if (!itemById.has(id) || groupedIds.has(id))
-                return false;
-            groupedIds.add(id);
-            return true;
-        });
-        const selectedCount = itemIds.filter((id) => itemById.get(id)?.selected === true).length;
-        const selectionState = itemIds.length === 0
-            ? 'empty'
-            : selectedCount === 0
-                ? 'none'
-                : selectedCount === itemIds.length
-                    ? 'all'
-                    : 'partial';
-        return {
-            id: group.id,
-            label: group.label,
-            itemIds,
-            itemCount: itemIds.length,
-            selectedCount,
-            selectionState,
-            attrs: {
-                role: 'group',
-                'aria-labelledby': group.headingId,
-                'data-group-id': group.id,
-                'data-group-selection-state': selectionState,
-                'data-group-item-count': itemIds.length,
-                'data-group-selected-count': selectedCount,
-            },
-            headingAttrs: {
-                id: group.headingId,
-                role: 'heading',
-                'aria-level': 3,
-                'data-group-id': group.id,
-                'data-group-label': group.label,
-            },
-        };
-    });
-    const groupByItemId = new Map(groups.flatMap((group) => group.itemIds.map((itemId) => [itemId, group.id])));
-    const disabledSet = new Set(options.actionDisabledIds ?? []);
-    const hiddenSet = new Set(options.actionHiddenIds ?? []);
-    const items = options.items.map((item) => {
-        const actionable = item.actionLabel !== undefined;
-        const actionState = !actionable || hiddenSet.has(item.id)
-            ? 'hidden'
-            : item.disabled === true || disabledSet.has(item.id)
-                ? 'disabled'
-                : 'ready';
-        return {
-            id: item.id,
-            groupId: groupByItemId.get(item.id) ?? '',
-            actionState,
-            attrs: {
-                'data-item-id': item.id,
-                'data-group-id': groupByItemId.get(item.id),
-                'data-action-state': actionState,
-            },
-            actionAttrs: {
-                type: 'button',
-                'data-item-id': item.id,
-                'data-action-state': actionState,
-                hidden: actionState === 'hidden' ? true : undefined,
-                disabled: actionState === 'disabled' ? true : undefined,
-                'aria-disabled': actionState === 'disabled' ? 'true' : undefined,
-            },
-        };
-    });
-    const actionableItems = items.filter((item) => itemById.get(item.id)?.actionLabel !== undefined);
-    const readyActionIds = actionableItems
-        .filter((item) => item.actionState === 'ready')
-        .map((item) => item.id);
-    const disabledActionIds = actionableItems
-        .filter((item) => item.actionState === 'disabled')
-        .map((item) => item.id);
-    const hiddenActionIds = actionableItems
-        .filter((item) => item.actionState === 'hidden')
-        .map((item) => item.id);
-    const state = options.items.length === 0
-        ? 'empty'
-        : groups.length === 0
-            ? 'plain'
-            : groupedIds.size === options.items.length
-                ? 'grouped'
-                : 'partial';
-    return {
-        state,
-        itemCount: options.items.length,
-        groupCount: groups.length,
-        groupedItemCount: groupedIds.size,
-        actionCount: actionableItems.length,
-        groupIds: groups.map((group) => group.id),
-        readyActionIds,
-        disabledActionIds,
-        hiddenActionIds,
-        attrs: {
-            'data-list-grouped-item-action-contract': 'true',
-            'data-list-grouped-state': state,
-            'data-group-count': groups.length,
-            'data-grouped-item-count': groupedIds.size,
-            'data-group-ids': groups.map((group) => group.id).join(','),
-            'data-action-count': actionableItems.length,
-            'data-ready-action-ids': readyActionIds.join(','),
-            'data-disabled-action-ids': disabledActionIds.join(','),
-            'data-hidden-action-ids': hiddenActionIds.join(','),
-        },
-        groups,
-        items,
-    };
-}
-export function createCarouselPlans(options) {
-    const slideCount = options.slides.length;
-    const currentIndex = Math.max(0, options.slides.findIndex((slide) => slide.id === options.currentSlideId));
-    const currentSlide = options.slides[currentIndex];
-    const currentSlideId = currentSlide?.id ?? '';
-    const state = slideCount === 0 ? 'empty' : 'ready';
-    const playbackState = slideCount > 1 && options.playback === 'playing' ? 'playing' : 'paused';
-    const previousTarget = currentIndex > 0 ? options.slides[currentIndex - 1] : undefined;
-    const nextTarget = currentIndex < slideCount - 1 ? options.slides[currentIndex + 1] : undefined;
-    const previousState = previousTarget === undefined ? 'disabled' : 'ready';
-    const nextState = nextTarget === undefined ? 'disabled' : 'ready';
-    const playbackDisabled = slideCount < 2;
-    const rootId = options.id;
-    const viewportId = rootId === undefined ? undefined : `${rootId}-viewport`;
-    const trackId = rootId === undefined ? undefined : `${rootId}-track`;
-    return {
-        state,
-        playbackState,
-        currentSlideId,
-        currentSlidePosition: currentSlide === undefined ? 0 : currentIndex + 1,
-        slideCount,
-        root: createUiDomPlan('section', 'carousel', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: rootId,
-                role: 'region',
-                'aria-roledescription': 'carousel',
-                'aria-label': options.label,
-                ...options.attrs,
-                'data-carousel-structure-playback-contract': 'true',
-                'data-carousel-state': state,
-                'data-playback-state': playbackState,
-                'data-slide-count': slideCount,
-                'data-slide-ids': options.slides.map((slide) => slide.id).join(','),
-                'data-current-slide-id': currentSlideId,
-                'data-current-slide-position': currentSlide === undefined ? 0 : currentIndex + 1,
-            },
-        }),
-        viewport: createUiDomPlan('div', 'carousel-viewport', {
-            attrs: {
-                id: viewportId,
-                'aria-live': playbackState === 'playing' ? 'off' : 'polite',
-                'aria-atomic': 'true',
-                'data-current-slide-id': currentSlideId,
-            },
-        }),
-        track: createUiDomPlan('div', 'carousel-track', { attrs: { id: trackId } }),
-        slides: options.slides.map((slide, index) => {
-            const current = index === currentIndex;
-            return createUiDomPlan('article', 'carousel-slide', {
-                attrs: {
-                    id: slide.id,
-                    role: 'group',
-                    'aria-roledescription': 'slide',
-                    'aria-label': `${index + 1} of ${slideCount}: ${slide.label}`,
-                    'aria-current': current ? 'true' : undefined,
-                    'aria-hidden': current ? undefined : 'true',
-                    hidden: current ? undefined : true,
-                    'data-slide-id': slide.id,
-                    'data-slide-label': slide.label,
-                    'data-slide-state': current ? 'current' : 'inactive',
-                },
-            });
-        }),
-        controls: createUiDomPlan('div', 'carousel-controls', {
-            attrs: { role: 'group', 'aria-label': 'Carousel controls' },
-        }),
-        previous: createUiDomPlan('button', 'carousel-control', {
-            disabled: previousState === 'disabled',
-            attrs: {
-                type: 'button',
-                'aria-label': options.previousLabel ?? 'Previous slide',
-                'aria-controls': trackId,
-                'data-control': 'previous',
-                'data-carousel-control-state': previousState,
-                'data-target-slide-id': previousTarget?.id,
-            },
-        }),
-        next: createUiDomPlan('button', 'carousel-control', {
-            disabled: nextState === 'disabled',
-            attrs: {
-                type: 'button',
-                'aria-label': options.nextLabel ?? 'Next slide',
-                'aria-controls': trackId,
-                'data-control': 'next',
-                'data-carousel-control-state': nextState,
-                'data-target-slide-id': nextTarget?.id,
-            },
-        }),
-        playback: createUiDomPlan('button', 'carousel-playback', {
-            disabled: playbackDisabled,
-            attrs: {
-                type: 'button',
-                'aria-label': playbackState === 'playing'
-                    ? (options.pauseLabel ?? 'Pause carousel')
-                    : (options.playLabel ?? 'Play carousel'),
-                'aria-controls': trackId,
-                'aria-pressed': playbackState === 'playing' ? 'true' : 'false',
-                'data-carousel-control-state': playbackDisabled ? 'disabled' : 'ready',
-                'data-playback-state': playbackState,
-                'data-next-playback-state': playbackState === 'playing' ? 'paused' : 'playing',
-            },
-        }),
-        indicators: createUiDomPlan('div', 'carousel-indicators', {
-            attrs: { role: 'group', 'aria-label': 'Choose slide' },
-        }),
-        indicatorButtons: options.slides.map((slide, index) => {
-            const current = index === currentIndex;
-            return createUiDomPlan('button', 'carousel-indicator', {
-                disabled: current,
-                attrs: {
-                    type: 'button',
-                    'aria-label': `Go to slide ${index + 1}: ${slide.label}`,
-                    'aria-controls': slide.id,
-                    'aria-current': current ? 'true' : undefined,
-                    'data-slide-id': slide.id,
-                    'data-slide-state': current ? 'current' : 'idle',
-                },
-            });
-        }),
-    };
-}
-export function createSplitWorkspacePlans(options) {
-    const fallback = options.tabletFallback ?? 'stack';
-    return {
-        root: createUiDomPlan('section', 'split-workspace', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: options.id,
-                ...options.attrs,
-                'data-tablet-fallback': fallback,
-                'data-areas': options.areas.length,
-            },
-        }),
-        areas: options.areas.map((area) => createUiDomPlan('section', 'split-workspace-area', {
-            attrs: {
-                id: area.id,
-                'data-area-role': area.role,
-                'data-fallback': area.fallback ?? fallback,
-                style: area.minWidth === undefined ? undefined : `--kui-area-min: ${area.minWidth};`,
-            },
-        })),
-    };
-}
-export function createSkeletonScreenPlans(options = {}) {
-    const rowCount = Math.max(1, Math.trunc(options.rows ?? 4));
-    return {
-        root: createUiDomPlan('section', 'skeleton-screen', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            ...(options.density === undefined ? {} : { density: options.density }),
-            loading: true,
-            attrs: {
-                id: options.id,
-                role: 'status',
-                'aria-label': options.label ?? 'Loading content',
-                ...options.attrs,
-                'data-row-count': rowCount,
-                'data-animated': options.animated === false ? 'false' : 'true',
-            },
-        }),
-        rows: Array.from({ length: rowCount }, (_, index) => createSkeletonPrimitive({
-            className: 'kui-skeleton-screen-row',
-            attrs: {
-                'data-index': index,
-                style: `--kui-skeleton-width: ${skeletonRowWidth(index)}%;`,
-            },
-        })),
-    };
-}
-export function createSpinOverlayPlans(options = {}) {
-    const open = options.open !== false;
-    const mode = options.mode ?? 'blocking';
-    return {
-        root: createUiDomPlan('div', 'spin-overlay', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            loading: open,
-            state: open ? 'open' : 'closed',
-            attrs: {
-                id: options.id,
-                role: 'status',
-                'aria-label': options.label ?? 'Loading',
-                'aria-live': 'polite',
-                'aria-controls': options.targetId,
-                hidden: open ? undefined : true,
-                ...options.attrs,
-                'data-mode': mode,
-                'data-target-id': options.targetId,
-            },
-        }),
-        spinner: createSpinPrimitive({
-            label: options.label ?? 'Loading',
-            className: 'kui-spin-overlay-spinner',
-        }),
-    };
-}
-export function createButtonLoadingPlans(options) {
-    const button = createButtonPrimitive({
-        label: options.label,
-        ...(options.loading === undefined ? {} : { loading: options.loading }),
-        ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-        ...(options.variant === undefined ? {} : { variant: options.variant }),
-        ...(options.size === undefined ? {} : { size: options.size }),
-        className: classNames('kui-button-loading', options.className),
-        attrs: {
-            ...(options.id === undefined ? {} : { id: options.id }),
-            ...options.attrs,
-            'data-label': options.label,
-        },
-    });
-    return {
-        root: button,
-        ...(options.loading === true
-            ? {
-                indicator: createSpinPrimitive({
-                    label: `${options.label} loading`,
-                    className: 'kui-button-loading-indicator',
-                    attrs: {
-                        id: options.id === undefined ? undefined : `${options.id}-loading`,
-                    },
-                }),
-            }
-            : {}),
-        label: createUiDomPlan('span', 'button-loading-label', {
-            attrs: { 'data-label': options.label },
-        }),
-    };
-}
-function styleSuffix(value) {
-    if (typeof value !== 'string' || value.trim() === '')
-        return '';
-    return value.trim().endsWith(';') ? value.trim() : `${value.trim()};`;
-}
-function ariaSort(column) {
-    if (column.sortable !== true)
-        return undefined;
-    if (column.sortDirection === 'ascending')
-        return 'ascending';
-    if (column.sortDirection === 'descending')
-        return 'descending';
-    return 'none';
-}
-function tableColumnStyle(column) {
-    const parts = [];
-    if (column.width !== undefined)
-        parts.push(`width: ${column.width};`);
-    if (column.minWidth !== undefined)
-        parts.push(`min-width: ${column.minWidth};`);
-    return parts.length === 0 ? undefined : parts.join('');
-}
-function filterChipLabel(filter) {
-    if (filter.value === undefined || filter.value === '')
-        return filter.label;
-    return `${filter.label}: ${filter.value}`;
-}
-function tagLabel(options) {
-    const parts = [options.label];
-    if (options.value !== undefined && options.value !== '')
-        parts.push(options.value);
-    if (options.count !== undefined)
-        parts.push(`${options.count}`);
-    return parts.join(': ');
-}
-function typographyTag(variant) {
-    if (variant === 'heading-lg')
-        return 'h1';
-    if (variant === 'heading-md')
-        return 'h2';
-    if (variant === 'heading-sm')
-        return 'h3';
-    if (variant === 'code')
-        return 'code';
-    if (variant === 'link')
-        return 'a';
-    return 'p';
-}
-function dividerInset(value) {
-    if (value === true)
-        return 'both';
-    if (value === false || value === undefined)
-        return undefined;
-    return value;
-}
-function initialsFromName(name) {
-    const parts = name
-        .trim()
-        .split(/\s+/)
-        .filter((part) => part.length > 0);
-    if (parts.length === 0)
-        return '?';
-    if (parts.length === 1)
-        return parts[0]?.slice(0, 2) ?? '?';
-    return `${parts[0]?.[0] ?? ''}${parts[parts.length - 1]?.[0] ?? ''}`;
-}
-function normalizeInitials(value) {
-    const normalized = value.replace(/\s+/g, '').slice(0, 2).toUpperCase();
-    return normalized === '' ? '?' : normalized;
-}
-function avatarImageState(options) {
-    if (options.imageError !== undefined && options.imageError.length > 0)
-        return 'error';
-    return options.src === undefined || options.src === '' ? 'fallback' : 'loaded';
-}
-function formatShortcutLabel(keys) {
-    return keys.join(' + ');
-}
-function getPaginationPageCount(options) {
-    const explicit = normalizeCount(options.pageCount);
-    if (explicit !== undefined && explicit > 0)
-        return explicit;
-    const total = normalizeCount(options.totalItems);
-    const pageSize = normalizeCount(options.pageSize);
-    if (total !== undefined && pageSize !== undefined && pageSize > 0) {
-        return Math.max(1, Math.ceil(total / pageSize));
-    }
-    return 1;
-}
-function clampPage(page, pageCount) {
-    if (!Number.isFinite(page))
-        return 1;
-    return Math.min(Math.max(1, Math.trunc(page)), Math.max(1, pageCount));
-}
-function createPaginationControl(control, page, disabled, label) {
-    return createUiDomPlan('button', `pagination-${control}`, {
-        disabled,
-        state: disabled ? 'disabled' : 'idle',
-        attrs: {
-            type: 'button',
-            'aria-label': label,
-            'data-page': page,
-            'data-control': control,
-        },
-    });
-}
-function createPaginationItemPlan(item, index, pageLabel) {
-    if (item.kind === 'ellipsis') {
-        return createUiDomPlan('span', 'pagination-ellipsis', {
-            attrs: {
-                'aria-hidden': 'true',
-                'data-kind': 'ellipsis',
-                'data-index': index,
-            },
-        });
-    }
-    const page = item.page ?? 1;
-    return createUiDomPlan('button', 'pagination-page', {
-        state: item.current === true ? 'current' : 'idle',
-        attrs: {
-            type: 'button',
-            'aria-label': pageLabel?.(page) ?? `Page ${page}`,
-            'aria-current': item.current === true ? 'page' : undefined,
-            'data-kind': 'page',
-            'data-page': page,
-        },
-    });
-}
-function createPaginationItemModel(item, index, plan, pageLabel) {
-    const page = item.page ?? 1;
-    const isPage = item.kind === 'page';
-    return {
-        id: String(index),
-        className: plan?.className ?? '',
-        kind: item.kind,
-        page,
-        state: item.kind === 'ellipsis' ? 'ellipsis' : item.current === true ? 'current' : 'idle',
-        current: item.current === true ? 'page' : undefined,
-        label: isPage ? (pageLabel?.(page) ?? `Page ${page}`) : '',
-    };
-}
-function createNoteLikePlans(kind, options) {
-    const tone = options.tone ?? 'info';
-    return {
-        root: createUiDomPlan('aside', kind, {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            state: tone,
-            attrs: {
-                id: options.id,
-                role: tone === 'error' || tone === 'warning' ? 'alert' : 'note',
-                'aria-labelledby': options.titleId,
-                'aria-describedby': options.descriptionId,
-                ...options.attrs,
-                'data-tone': tone,
-                'data-dismissible': options.closeLabel === undefined ? undefined : '',
-                'data-actionable': options.action === undefined ? undefined : '',
-            },
-        }),
-        ...(options.icon === false
-            ? {}
-            : {
-                icon: createUiDomPlan('span', `${kind}-icon`, {
-                    attrs: { 'aria-hidden': 'true', 'data-tone': tone },
-                }),
-            }),
-        content: createUiDomPlan('div', `${kind}-content`),
-        ...(options.titleId === undefined
-            ? {}
-            : { title: createUiDomPlan('strong', `${kind}-title`, { attrs: { id: options.titleId } }) }),
-        ...(options.descriptionId === undefined
-            ? {}
-            : {
-                description: createUiDomPlan('p', `${kind}-description`, {
-                    attrs: { id: options.descriptionId },
-                }),
-            }),
-        ...(options.action === undefined
-            ? {}
-            : { actionButton: createDataDisplayActionButton(kind, options.action) }),
-        ...(options.closeLabel === undefined
-            ? {}
-            : {
-                closeButton: createUiDomPlan('button', `${kind}-close`, {
-                    attrs: {
-                        type: 'button',
-                        'aria-label': options.closeLabel,
-                        'data-display-close': '',
-                    },
-                }),
-            }),
-    };
-}
-function createPanelLikePlans(kind, options) {
-    const tone = options.tone ?? 'default';
-    const actions = (options.actions ?? []).map((action) => createDataDisplayActionButton(kind, action));
-    return {
-        root: createUiDomPlan(kind === 'card' ? 'article' : 'section', kind, {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            state: options.selected === true ? 'selected' : 'idle',
-            attrs: {
-                id: options.id,
-                role: options.interactive === true ? 'button' : undefined,
-                tabindex: options.interactive === true ? 0 : undefined,
-                'aria-labelledby': options.titleId,
-                'aria-describedby': options.descriptionId,
-                'aria-selected': options.selected === undefined ? undefined : String(options.selected),
-                ...options.attrs,
-                'data-tone': tone,
-                'data-interactive': options.interactive === true ? 'true' : undefined,
-                'data-action-count': actions.length,
-            },
-        }),
-        ...(options.titleId === undefined && options.descriptionId === undefined && actions.length === 0
-            ? {}
-            : { header: createUiDomPlan('header', `${kind}-header`) }),
-        ...(options.titleId === undefined
-            ? {}
-            : { title: createUiDomPlan('h3', `${kind}-title`, { attrs: { id: options.titleId } }) }),
-        ...(options.descriptionId === undefined
-            ? {}
-            : {
-                description: createUiDomPlan('p', `${kind}-description`, {
-                    attrs: { id: options.descriptionId },
-                }),
-            }),
-        body: createUiDomPlan('div', `${kind}-body`),
-        ...(actions.length === 0 ? {} : { footer: createUiDomPlan('footer', `${kind}-footer`) }),
-        actions,
-    };
-}
-function createDataDisplayActionButton(component, action) {
-    return createUiDomPlan('button', `${component}-action`, {
-        ...(action.disabled === undefined ? {} : { disabled: action.disabled }),
-        state: action.disabled === true ? 'disabled' : 'idle',
-        className: classNames(action.tone === undefined ? undefined : `kui-${component}-action--${action.tone}`),
-        attrs: {
-            type: 'button',
-            'aria-label': action.label,
-            'data-action-id': action.id,
-            'data-tone': action.tone ?? 'default',
-            'data-label': action.label,
-        },
-    });
-}
-function tableCellState(options) {
-    if (options.loading === true)
-        return 'loading';
-    if (options.error === true)
-        return 'error';
-    if (options.disabled === true)
-        return 'disabled';
-    if (options.interactive === true || options.intent !== undefined)
-        return 'interactive';
-    return 'readonly';
-}
-function tableSelectionSummaryState(selectedCount, eligibleCount) {
-    if (selectedCount === 0)
-        return 'empty';
-    if (eligibleCount !== undefined && eligibleCount > 0 && selectedCount >= eligibleCount)
-        return 'all';
-    return 'partial';
-}
-function formatTableSelectionSummary(options) {
-    const parts = [`${options.selectedCount} selected`];
-    if (options.eligibleCount !== undefined)
-        parts.push(`${options.eligibleCount} eligible`);
-    if (options.totalCount !== undefined && options.totalCount !== options.eligibleCount) {
-        parts.push(`${options.totalCount} rows`);
-    }
-    return parts.join(' · ');
-}
-function tableBatchActionContract(action, selectedCount) {
-    const state = tableBatchActionState(action, selectedCount);
-    const reason = action.reason ??
-        (action.requiresSelection === true && selectedCount === 0 ? 'Select rows first' : '');
-    return {
-        id: action.id,
-        label: action.label,
-        state,
-        reason,
-        attrs: {
-            'data-action-id': action.id,
-            'data-label': action.label,
-            'data-tone': action.tone ?? 'secondary',
-            'data-action-state': state,
-            'data-requires-selection': action.requiresSelection === true ? 'true' : undefined,
-            'data-disabled-reason': reason === '' ? undefined : reason,
-            'aria-label': action.label,
-            'aria-disabled': state === 'disabled' ? 'true' : undefined,
-            'aria-busy': state === 'pending' ? 'true' : undefined,
-            hidden: state === 'hidden' ? true : undefined,
-        },
-    };
-}
-function tableBatchActionState(action, selectedCount) {
-    if (action.hidden === true)
-        return 'hidden';
-    if (action.pending === true)
-        return 'pending';
-    if (action.disabled === true || action.reason !== undefined)
-        return 'disabled';
-    if (action.requiresSelection === true && selectedCount === 0)
-        return 'disabled';
-    return 'available';
-}
-function normalizeCount(value) {
-    if (value === undefined || !Number.isFinite(value))
-        return undefined;
-    return Math.max(0, Math.trunc(value));
-}
-function badgeCountOverflowLabel(options) {
-    if (options.dot)
-        return 'Badge dot';
-    if (options.count <= 0)
-        return 'No badge count';
-    return options.overflow ? `${options.displayValue} items` : `${options.count} items`;
-}
-function normalizeSelectedIds(ids) {
-    if (ids === undefined)
-        return [];
-    const values = Array.isArray(ids) ? ids : [...ids];
-    return [...new Set(values.filter((id) => id.length > 0))];
-}
-function normalizeColumnPreferenceIds(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 orderTableColumns(columns, orderIds) {
-    if (orderIds.length === 0)
-        return [...columns];
-    const columnById = new Map(columns.map((column) => [column.id, column]));
-    const orderedIdSet = new Set(orderIds);
-    const ordered = orderIds
-        .map((id) => columnById.get(id))
-        .filter((column) => column !== undefined);
-    const remaining = columns.filter((column) => !orderedIdSet.has(column.id));
-    return [...ordered, ...remaining];
-}
-function tableColumnPreferenceSticky(column, stickyStartIds, stickyEndIds) {
-    if (stickyStartIds === undefined && stickyEndIds === undefined)
-        return column.sticky;
-    if (stickyStartIds?.has(column.id) === true)
-        return 'start';
-    if (stickyEndIds?.has(column.id) === true)
-        return 'end';
-    return undefined;
-}
-function tableColumnPreferenceState(options) {
-    if (options.sourceColumns.length === 0)
-        return 'empty';
-    const sourceOrder = options.sourceColumns.map((column) => column.id).join(',');
-    const nextOrder = options.columns.map((column) => column.id).join(',');
-    const densityChanged = options.defaultDensity !== undefined && options.density !== options.defaultDensity;
-    if (densityChanged ||
-        options.hiddenIds.length > 0 ||
-        options.visibleIds !== undefined ||
-        options.orderIds.length > 0 ||
-        sourceOrder !== nextOrder ||
-        options.stickyStartIds !== undefined ||
-        options.stickyEndIds !== undefined) {
-        return 'customized';
-    }
-    return 'default';
-}
-function tableToolbarState(options) {
-    const visibleCount = options.filteredCount ?? options.totalCount;
-    if (options.loading)
-        return 'loading';
-    if (visibleCount === 0)
-        return 'empty';
-    if (options.selectedCount > 0)
-        return 'selected';
-    if (options.query !== '' || options.activeFilterCount > 0 || options.sortDirection !== 'none') {
-        return 'filtered';
-    }
-    return 'ready';
-}
-function normalizeEmptyOptions(options) {
-    if (options === undefined || options === false)
-        return undefined;
-    if (options === true)
-        return {};
-    return options;
-}
-function skeletonRowWidth(index) {
-    const widths = [92, 84, 78, 88, 72, 80];
-    return widths[index % widths.length] ?? 80;
-}
-export function createDescriptionsPlans(options) {
-    const layout = options.layout ?? 'horizontal';
-    const items = options.items.map((item) => ({
-        itemId: item.id,
-        label: createUiDomPlan('dt', 'descriptions-label', {
-            attrs: { id: `${options.id}-${item.id}-label`, 'data-label': item.label },
-        }),
-        value: createUiDomPlan('dd', 'descriptions-value', {
-            attrs: {
-                ...(item.span === undefined ? {} : { 'data-span': String(item.span) }),
-                ...(item.value === undefined ? {} : { 'data-value': item.value }),
-            },
-        }),
-    }));
-    return {
-        root: createUiDomPlan('dl', 'descriptions', {
-            state: layout === 'vertical' ? 'vertical' : 'horizontal',
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: {
-                id: `${options.id}-descriptions`,
-                ...(options.bordered === undefined
-                    ? {}
-                    : { 'data-bordered': options.bordered ? 'true' : 'false' }),
-                ...(options.column === undefined ? {} : { 'data-column': String(options.column) }),
-                ...options.attrs,
-            },
-        }),
-        items,
-    };
-}
-export function createTimelinePlans(options) {
-    const items = options.items.map((item) => {
-        const state = item.state ?? 'default';
-        return {
-            itemId: item.id,
-            state,
-            title: createUiDomPlan('div', 'timeline-title', {
-                attrs: { id: `${options.id}-${item.id}-title`, 'data-label': item.title },
-            }),
-            description: createUiDomPlan('div', 'timeline-description', {
-                attrs: {
-                    id: `${options.id}-${item.id}-desc`,
-                    ...(item.description === undefined ? {} : { 'data-label': item.description }),
-                },
-            }),
-            time: createUiDomPlan('div', 'timeline-time', {
-                attrs: {
-                    id: `${options.id}-${item.id}-time`,
-                    ...(item.time === undefined ? {} : { 'data-label': item.time }),
-                },
-            }),
-        };
-    });
-    // Timeline items carry state metadata (the root <li> elements are rendered by the app from items)
-    return {
-        root: createUiDomPlan('ul', 'timeline', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-timeline`, ...options.attrs },
-        }),
-        items,
-    };
-}
-export function createImagePlans(options) {
-    return {
-        root: createUiDomPlan('figure', 'image', {
-            state: options.preview === true ? 'preview' : 'plain',
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-image`, ...options.attrs },
-        }),
-        image: createUiDomPlan('img', 'image-figure', {
-            attrs: {
-                id: `${options.id}-img`,
-                ...(options.src === undefined ? {} : { src: options.src }),
-                ...(options.alt === undefined ? {} : { alt: options.alt }),
-                ...(options.preview === true ? { 'data-preview': 'true' } : {}),
-            },
-        }),
-        overlay: createUiDomPlan('div', 'image-overlay', {
-            state: 'hidden',
-            attrs: { id: `${options.id}-overlay`, role: 'dialog', 'aria-hidden': 'true' },
-        }),
-        close: createUiDomPlan('button', 'image-overlay-close', {
-            attrs: { id: `${options.id}-close`, type: 'button', 'aria-label': 'Close preview' },
-        }),
-        caption: createUiDomPlan('figcaption', 'image-caption', {
-            attrs: {
-                id: `${options.id}-caption`,
-                ...(options.caption === undefined ? {} : { 'data-label': options.caption }),
-            },
-        }),
-    };
-}
-export function createBackTopPlans(options) {
-    return {
-        root: createUiDomPlan('button', 'back-top', {
-            state: options.visible === true ? 'visible' : 'hidden',
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            attrs: {
-                id: `${options.id}-backtop`,
-                type: 'button',
-                'aria-label': 'Back to top',
-                ...(options.visible === true ? {} : { hidden: 'true' }),
-                ...options.attrs,
-            },
-        }),
-    };
-}
-function escapeRegex(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-/**
- * Splits text into highlight/plain segments by query.
- * - Case-insensitive; supports multiple keywords (array); empty query/text returns a single plain segment.
- * - Overlapping hits are resolved by the earliest position (no nesting).
- */
-export function splitHighlightSegments(text, query) {
-    const keywords = (Array.isArray(query) ? query : [query])
-        .map((value) => value.trim())
-        .filter((value) => value !== '');
-    if (text === '' || keywords.length === 0)
-        return [{ text, highlighted: false }];
-    const pattern = new RegExp(`(${keywords.map(escapeRegex).join('|')})`, 'gi');
-    const segments = [];
-    let lastIndex = 0;
-    for (const match of text.matchAll(pattern)) {
-        const index = match.index ?? 0;
-        if (index > lastIndex) {
-            segments.push({ text: text.slice(lastIndex, index), highlighted: false });
-        }
-        segments.push({ text: match[0], highlighted: true });
-        lastIndex = index + match[0].length;
-    }
-    if (lastIndex < text.length) {
-        segments.push({ text: text.slice(lastIndex), highlighted: false });
-    }
-    return segments.length === 0 ? [{ text, highlighted: false }] : segments;
-}
-/** Highlight-mark plan (used by the app for highlighted segments at render time). */
-export function createHighlightMark(text, id) {
-    return createUiDomPlan('mark', 'highlight', {
-        attrs: { ...(id === undefined ? {} : { id }), 'data-label': text },
-    });
-}
-export function createCodeBlockPlans(options) {
-    const code = createUiDomPlan('pre', 'code-block-code', {
-        attrs: {
-            id: `${options.id}-code`,
-            ...(options.code === undefined ? {} : { 'data-code': options.code }),
-        },
-    });
-    return {
-        root: createUiDomPlan('figure', 'code-block', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-codeblock`, ...options.attrs },
-        }),
-        header: createUiDomPlan('div', 'code-block-header', {
-            attrs: { id: `${options.id}-header` },
-        }),
-        language: createUiDomPlan('span', 'code-block-language', {
-            attrs: {
-                id: `${options.id}-lang`,
-                ...(options.language === undefined
-                    ? {}
-                    : { 'data-label': options.language, 'data-language': options.language }),
-            },
-        }),
-        copy: createUiDomPlan('button', 'code-block-copy', {
-            attrs: {
-                id: `${options.id}-copy`,
-                type: 'button',
-                'aria-label': 'Copy code',
-                ...(options.copyable === false ? { hidden: 'true' } : {}),
-            },
-        }),
-        code,
-        ...(options.showLineNumbers === true
-            ? {
-                lineNumbers: createUiDomPlan('div', 'code-block-line-numbers', {
-                    attrs: { id: `${options.id}-lines` },
-                }),
-            }
-            : {}),
-    };
-}