@vobs/ui 0.1.0

package/dist/data-display.js

@@ -0,0 +1,2298 @@
+/** @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 }),
+    });
+    return {
+        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),
+            },
+        }),
+        list: createUiDomPlan('ol', 'pagination-list', { attrs: { role: 'list' } }),
+        previous: createPaginationControl('previous', page <= 1 ? 1 : page - 1, page <= 1, options.previousLabel ?? 'Previous page'),
+        pages: items.map((item, index) => createPaginationItemPlan(item, index)),
+        next: createPaginationControl('next', page >= pageCount ? pageCount : page + 1, page >= pageCount, options.nextLabel ?? 'Next page'),
+        summary: createUiDomPlan('output', 'pagination-summary', {
+            attrs: {
+                'aria-live': 'polite',
+                'data-summary': formatPaginationSummary({
+                    ...options,
+                    page,
+                    pageCount,
+                }),
+            },
+        }),
+    };
+}
+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) {
+    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': `Page ${page}`,
+            'aria-current': item.current === true ? 'page' : undefined,
+            'data-kind': 'page',
+            'data-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 = [];
+    for (const id of ids) {
+        if (!knownIds.has(id) || result.includes(id))
+            continue;
+        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 ordered = orderIds
+        .map((id) => columnById.get(id))
+        .filter((column) => column !== undefined);
+    const remaining = columns.filter((column) => !orderIds.includes(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` },
+                }),
+            }
+            : {}),
+    };
+}