@ryuzaki13/react-foundation-ui 2.0.1 → 2.2.0

package/dist/tree-table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/tree-table/TreeTable.module.scss","../../src/tree-table/TreeTable.tsx"],"sourcesContent":[".treeColumnCell {\n\tpadding-inline-start: var(--space-sm);\n}\n\n.selectedIndicatorCell {\n\tbox-shadow: inset 0.1875rem 0 0 var(--content-accent);\n}\n\n.treeCell {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n}\n\n.treeCellContent {\n\tmin-width: 0;\n\tflex: 1 1 auto;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.expanderButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: var(--content-0);\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus-visible {\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.expanderSpacer {\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n}\n\n.sentinel {\n\theight: 1px;\n}\n","import { useEffect, useEffectEvent, useMemo, useRef, useState, type ReactNode } from \"react\";\n\nimport { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport {\n\ttype FoundationTableRow,\n\tfoundationTableFeatures,\n\tresolveTableLength,\n\tTableColumnDef,\n\ttype TableColumnOrderState,\n\ttype TableColumnSizingState,\n\ttype TableColumnVisibilityState,\n\tTableSelectionMode,\n\tuseTableRowSelection\n} from \"@ryuzaki13/react-foundation-lib/table\";\nimport { buildTreeTableRows, type TreeTableFlatHierarchy, type TreeTableRowNode } from \"@ryuzaki13/react-foundation-lib/tree-table\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { useTable, type ExpandedState } from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport {\n\tBaseTable,\n\tbuildBaseTableMergedCellsLayout,\n\tbuildTableFormattingSnapshot,\n\tFormattedTableCell,\n\tgetOrderedVisibleLeafColumns,\n\tshouldUseTableFormatting,\n\tuseTableColumnOrder,\n\tuseTableColumnPinning,\n\tuseTableColumnSizing,\n\tuseTableColumnVisibility,\n\ttype BaseTableCellRenderArgs,\n\ttype BaseTableColumnState,\n\ttype BaseTableProps,\n\ttype TableColumnPinningState\n} from \"../base-table\";\n\nimport styles from \"./TreeTable.module.scss\";\n\nimport type { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\n\n/**\n * Внутренний тип строки TreeTable после преобразования в иерархию.\n */\ntype TreeTableRuntimeRow<TData extends object> = TreeTableRowNode<TData>;\n\n/**\n * Пропсы компонента TreeTable.\n *\n * Компонент принимает плоский OData-список и сам строит иерархию,\n * оставляя управление раскрытием и выбором во внутреннем состоянии.\n */\nexport interface TreeTableProps<TData extends object> {\n\t/**\n\t * Необязательный заголовок над таблицей.\n\t */\n\ttitle?: string;\n\t/**\n\t * Признак первичной загрузки.\n\t */\n\tisLoading?: boolean;\n\t/**\n\t * Признак фоновой догрузки или обновления данных.\n\t */\n\tisFetching?: boolean;\n\t/**\n\t * Плоский источник строк.\n\t */\n\tdata: readonly TData[] | undefined | null;\n\t/**\n\t * Описание колонок через исходный тип строки.\n\t */\n\tcolumns: readonly TableColumnDef<TData>[];\n\t/**\n\t * Правила восстановления дерева из плоского списка.\n\t */\n\thierarchy: TreeTableFlatHierarchy<TData>;\n\t/**\n\t * Режим выбора строк.\n\t */\n\tselectionMode?: TableSelectionMode;\n\t/**\n\t * Если `true`, при первом появлении данных раскрывает корневой уровень.\n\t */\n\texpandFirstLevel?: boolean;\n\t/**\n\t * Дополнительные строки, которые должны быть раскрыты при первой инициализации.\n\t */\n\tdefaultExpandedRowIds?: readonly string[];\n\t/**\n\t * Идентификатор колонки, в которой нужно рисовать tree-toggle и отступы.\n\t *\n\t * Если не указан, используется первая видимая колонка.\n\t */\n\ttreeColumnId?: string;\n\t/**\n\t * Отступ на один уровень вложенности.\n\t *\n\t * Числовое значение трактуется как `em`.\n\t */\n\tindentSize?: string | number;\n\t/**\n\t * Дополнительный CSS-класс корневого контейнера.\n\t */\n\tclassName?: string;\n\t/**\n\t * Дополнительный CSS-класс тега `table`.\n\t */\n\ttableClassName?: string;\n\t/**\n\t * Внешнее controlled-состояние видимости колонок.\n\t */\n\tcolumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Стартовое uncontrolled-состояние видимости колонок.\n\t */\n\tdefaultColumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Внешнее controlled-состояние порядка колонок.\n\t */\n\tcolumnOrder?: readonly string[];\n\t/**\n\t * Стартовое uncontrolled-состояние порядка колонок.\n\t */\n\tdefaultColumnOrder?: readonly string[];\n\t/**\n\t * Внешнее controlled-состояние ширин колонок в px.\n\t */\n\tcolumnSizing?: TableColumnSizingState;\n\t/**\n\t * Стартовое uncontrolled-состояние ширин колонок в px.\n\t */\n\tdefaultColumnSizing?: TableColumnSizingState;\n\t/**\n\t * Внешнее controlled-состояние start-pinning для колонок.\n\t */\n\tcolumnPinning?: TableColumnPinningState;\n\t/**\n\t * Стартовое uncontrolled-состояние start-pinning для колонок.\n\t */\n\tdefaultColumnPinning?: TableColumnPinningState;\n\t/**\n\t * Включает изменение ширины колонок через header-handle.\n\t */\n\tenableColumnResizing?: boolean;\n\t/**\n\t * Включает изменение порядка колонок через drag&drop заголовков.\n\t */\n\tenableColumnReordering?: boolean;\n\t/**\n\t * Минимальная ширина колонки при resize в px.\n\t */\n\tcolumnResizeMinWidth?: number;\n\t/**\n\t * Вызывается после изменения видимости колонок.\n\t */\n\tonColumnVisibilityChange?: (state: TableColumnVisibilityState) => void;\n\t/**\n\t * Вызывается после изменения порядка колонок.\n\t */\n\tonColumnOrderChange?: (state: TableColumnOrderState) => void;\n\t/**\n\t * Вызывается после изменения ширины колонок.\n\t */\n\tonColumnSizingChange?: (state: TableColumnSizingState) => void;\n\t/**\n\t * Вызывается после изменения start-pinning state.\n\t */\n\tonColumnPinningChange?: (state: TableColumnPinningState) => void;\n\t/**\n\t * Вызывается при активации строки кликом или клавиатурой.\n\t */\n\tonRowClick?: (row: TData) => void;\n\t/**\n\t * Вызывается после изменения выбранных строк.\n\t */\n\tonRowSelectionChange?: (rows: TData[]) => void;\n\t/**\n\t * Вызывается после изменения раскрытых узлов.\n\t */\n\tonExpandedRowIdsChange?: (rowIds: string[]) => void;\n\t/**\n\t * Вызывается при достижении конца таблицы внутри scroll-контейнера.\n\t */\n\tonReachEnd?: () => void;\n\t/**\n\t * Позволяет запретить выбор отдельных строк.\n\t */\n\tgetRowCanSelect?: (row: TData) => boolean;\n\t/**\n\t * Позволяет добавить CSS-класс для конкретной строки.\n\t */\n\tgetRowClassName?: (row: TData) => string | undefined;\n\t/**\n\t * Контекстное меню заголовка колонки. Получает runtime-строки дерева,\n\t * потому что BaseTable работает уже после сборки flat hierarchy.\n\t */\n\trenderHeaderContextMenu?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderHeaderContextMenu\"];\n\t/**\n\t * Точка расширения содержимого ячейки после общего форматирования.\n\t *\n\t * Для tree-column в `defaultContent` передается только содержимое ячейки:\n\t * TreeTable сам добавит expander и отступ после выполнения слота.\n\t */\n\trenderCellContent?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderCellContent\"];\n}\n\n/**\n * Преобразует массив идентификаторов в формат состояния раскрытия TanStack.\n */\nfunction toExpandedState(rowIds: readonly string[]): ExpandedState {\n\treturn Object.fromEntries(rowIds.map((rowId) => [rowId, true]));\n}\n\n/**\n * Извлекает из состояния раскрытия только активные идентификаторы.\n */\nfunction extractExpandedRowIds(expanded: ExpandedState): string[] {\n\tif (typeof expanded === \"boolean\") {\n\t\treturn [];\n\t}\n\n\treturn Object.keys(expanded).filter((rowId) => expanded[rowId]);\n}\n\n/**\n * Нормализует исходную строку, убирая зависимость от внутреннего поля `children`.\n */\nfunction resolveOriginalRow<TData extends object>(row: FoundationTableRow<TreeTableRuntimeRow<TData>>, rowById: Map<string, TData>): TData {\n\treturn rowById.get(row.id) ?? (row.original as TData);\n}\n\n/**\n * Рендерит содержимое древовидной ячейки.\n */\nfunction renderTreeCellContent<TData extends object>(\n\targs: BaseTableCellRenderArgs<TreeTableRuntimeRow<TData>>,\n\tcontent: ReactNode,\n\ttreeColumnId: string | undefined,\n\tindentSize: string | number\n): ReactNode {\n\tif (args.cell.column.id !== treeColumnId) {\n\t\treturn content;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={styles.treeCell}\n\t\t\tstyle={{\n\t\t\t\tpaddingInlineStart: `calc(${args.row.depth} * ${resolveTableLength(indentSize) ?? \"0em\"})`\n\t\t\t}}>\n\t\t\t{args.row.getCanExpand() ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.expanderButton}\n\t\t\t\t\taria-label={args.row.getIsExpanded() ? \"Свернуть строку\" : \"Развернуть строку\"}\n\t\t\t\t\tdata-tree-table-interactive=\"true\"\n\t\t\t\t\tdata-ui=\"tree-table-expander\"\n\t\t\t\t\tdata-action={args.row.getIsExpanded() ? \"collapse-tree-table-row\" : \"expand-tree-table-row\"}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\targs.row.toggleExpanded();\n\t\t\t\t\t}}>\n\t\t\t\t\t{args.row.getIsExpanded() ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className={styles.expanderSpacer} aria-hidden=\"true\" />\n\t\t\t)}\n\n\t\t\t<div className={styles.treeCellContent}>{content}</div>\n\t\t</div>\n\t);\n}\n\n/**\n * Древовидная таблица на базе TanStack Table для плоских OData-данных.\n */\nexport function TreeTable<TData extends object>({\n\ttitle,\n\tisLoading,\n\tisFetching,\n\tdata,\n\tcolumns,\n\thierarchy,\n\tselectionMode = \"none\",\n\texpandFirstLevel = false,\n\tdefaultExpandedRowIds,\n\ttreeColumnId,\n\tindentSize = 1,\n\tclassName,\n\ttableClassName,\n\tcolumnVisibility,\n\tdefaultColumnVisibility,\n\tcolumnOrder,\n\tdefaultColumnOrder,\n\tcolumnSizing,\n\tdefaultColumnSizing,\n\tcolumnPinning,\n\tdefaultColumnPinning,\n\tenableColumnResizing = false,\n\tenableColumnReordering = false,\n\tcolumnResizeMinWidth,\n\tonColumnVisibilityChange,\n\tonColumnOrderChange,\n\tonColumnSizingChange,\n\tonColumnPinningChange,\n\tonRowClick,\n\tonRowSelectionChange,\n\tonExpandedRowIdsChange,\n\tonReachEnd,\n\tgetRowCanSelect,\n\tgetRowClassName,\n\trenderHeaderContextMenu,\n\trenderCellContent\n}: TreeTableProps<TData>) {\n\tconst treeData = useMemo(() => buildTreeTableRows(data ?? [], hierarchy), [data, hierarchy]);\n\tconst formattingSnapshot = useMemo(() => buildTableFormattingSnapshot(columns), [columns]);\n\tconst initialExpandedRowIds = useMemo(() => {\n\t\tconst nextExpandedRowIds = new Set(defaultExpandedRowIds ?? []);\n\n\t\tif (expandFirstLevel) {\n\t\t\tfor (const rootRowId of treeData.rootRowIds) {\n\t\t\t\tnextExpandedRowIds.add(rootRowId);\n\t\t\t}\n\t\t}\n\n\t\treturn Array.from(nextExpandedRowIds);\n\t}, [defaultExpandedRowIds, expandFirstLevel, treeData.rootRowIds]);\n\n\tconst [expanded, setExpanded] = useState<ExpandedState>({});\n\tconst hasInitializedExpansionRef = useRef(false);\n\tconst scrollableRef = useRef<HTMLDivElement | null>(null);\n\tconst sentinelRef = useRef<HTMLDivElement | null>(null);\n\n\tconst { rowSelection, activateRowSelection } = useTableRowSelection({\n\t\tavailableRowIds: treeData.allRowIds,\n\t\trowById: treeData.rowById,\n\t\tselectionMode,\n\t\tonRowSelectionChange\n\t});\n\tconst { columnVisibility: resolvedColumnVisibility, onColumnVisibilityChange: handleColumnVisibilityChange } = useTableColumnVisibility(\n\t\t{\n\t\t\tcolumnVisibility,\n\t\t\tdefaultColumnVisibility,\n\t\t\tonColumnVisibilityChange\n\t\t}\n\t);\n\tconst { columnOrder: resolvedColumnOrder, onColumnOrderChange: handleColumnOrderChange } = useTableColumnOrder({\n\t\tcolumnOrder,\n\t\tdefaultColumnOrder,\n\t\tonColumnOrderChange\n\t});\n\tconst { columnSizing: resolvedColumnSizing, onColumnSizingChange: handleColumnSizingChange } = useTableColumnSizing({\n\t\tcolumnSizing,\n\t\tdefaultColumnSizing,\n\t\tcolumnResizeMinWidth,\n\t\tonColumnSizingChange\n\t});\n\tconst { columnPinning: resolvedColumnPinning, onColumnPinningChange: handleColumnPinningChange } = useTableColumnPinning({\n\t\tcolumnPinning,\n\t\tdefaultColumnPinning,\n\t\tonColumnPinningChange\n\t});\n\n\tconst baseTableColumnState = useMemo<BaseTableColumnState>(\n\t\t() => ({\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility\n\t\t}),\n\t\t[resolvedColumnOrder, resolvedColumnPinning, resolvedColumnSizing, resolvedColumnVisibility]\n\t);\n\n\tconst syncExpandedState = useEffectEvent((availableRowIds: readonly string[], nextInitialExpandedRowIds: readonly string[]) => {\n\t\tif (availableRowIds.length === 0) {\n\t\t\thasInitializedExpansionRef.current = false;\n\t\t\tsetExpanded({});\n\t\t\treturn;\n\t\t}\n\n\t\tconst availableRowIdSet = new Set(availableRowIds);\n\n\t\tsetExpanded((currentExpanded) => {\n\t\t\tconst persistedRowIds = extractExpandedRowIds(currentExpanded).filter((rowId) => availableRowIdSet.has(rowId));\n\n\t\t\tif (!hasInitializedExpansionRef.current) {\n\t\t\t\thasInitializedExpansionRef.current = true;\n\n\t\t\t\tconst seededRowIds = Array.from(\n\t\t\t\t\tnew Set([...persistedRowIds, ...nextInitialExpandedRowIds.filter((rowId) => availableRowIdSet.has(rowId))])\n\t\t\t\t);\n\n\t\t\t\treturn toExpandedState(seededRowIds);\n\t\t\t}\n\n\t\t\treturn toExpandedState(persistedRowIds);\n\t\t});\n\t});\n\n\tconst emitExpandedRowIdsChange = useEffectEvent((currentExpanded: ExpandedState) => {\n\t\tonExpandedRowIdsChange?.(extractExpandedRowIds(currentExpanded));\n\t});\n\n\tconst emitReachEnd = useEffectEvent(() => {\n\t\tonReachEnd?.();\n\t});\n\n\tuseEffect(() => {\n\t\tsyncExpandedState(treeData.allRowIds, initialExpandedRowIds);\n\t}, [initialExpandedRowIds, treeData.allRowIds]);\n\n\tuseEffect(() => {\n\t\temitExpandedRowIdsChange(expanded);\n\t}, [expanded]);\n\n\tuseEffect(() => {\n\t\tif (!onReachEnd || !scrollableRef.current || !sentinelRef.current || isLoading) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst entry = entries[0];\n\n\t\t\t\tif (entry?.isIntersecting) {\n\t\t\t\t\temitReachEnd();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\troot: scrollableRef.current,\n\t\t\t\tthreshold: 0.1\n\t\t\t}\n\t\t);\n\n\t\tobserver.observe(sentinelRef.current);\n\n\t\treturn () => observer.disconnect();\n\t}, [isLoading, onReachEnd, treeData.rows.length]);\n\n\tconst table = useTable({\n\t\tfeatures: foundationTableFeatures,\n\t\tdata: treeData.rows as TreeTableRuntimeRow<TData>[],\n\t\tcolumns: columns as TableColumnDef<TreeTableRuntimeRow<TData>>[],\n\t\tstate: {\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility,\n\t\t\texpanded,\n\t\t\trowSelection\n\t\t},\n\t\tgetRowId: (row) => hierarchy.getRowId(row as TData),\n\t\tgetSubRows: (row) => row.children,\n\t\tonColumnOrderChange: handleColumnOrderChange,\n\t\tonColumnPinningChange: handleColumnPinningChange,\n\t\tonColumnSizingChange: handleColumnSizingChange,\n\t\tonColumnVisibilityChange: handleColumnVisibilityChange,\n\t\tonExpandedChange: setExpanded,\n\t\tenableMultiRowSelection: selectionMode === \"multi\",\n\t\tenableRowSelection: (row) => {\n\t\t\tif (selectionMode === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\treturn getRowCanSelect ? getRowCanSelect(originalRow) : true;\n\t\t}\n\t});\n\n\tconst visibleLeafColumns = getOrderedVisibleLeafColumns(table, baseTableColumnState);\n\tconst resolvedTreeColumnId = treeColumnId ?? visibleLeafColumns[0]?.id;\n\tconst rowModelRows = table.getRowModel().rows;\n\tconst mergedCellLayout = useMemo(\n\t\t() =>\n\t\t\tbuildBaseTableMergedCellsLayout({\n\t\t\t\trows: rowModelRows,\n\t\t\t\tcolumns: visibleLeafColumns,\n\t\t\t\tresolveRowBoundaryKey: (row) => row.depth,\n\t\t\t\texcludeColumnIds: resolvedTreeColumnId ? new Set([resolvedTreeColumnId]) : undefined\n\t\t\t}),\n\t\t[rowModelRows, visibleLeafColumns, resolvedTreeColumnId]\n\t);\n\n\t/**\n\t * Активирует строку: обновляет выбор в соответствии с режимом и вызывает внешний callback.\n\t */\n\tconst activateRow = (row: FoundationTableRow<TreeTableRuntimeRow<TData>>) => {\n\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\tactivateRowSelection(row.id, row.getCanSelect());\n\t\tonRowClick?.(originalRow);\n\t};\n\n\treturn (\n\t\t<BaseTable\n\t\t\ttable={table}\n\t\t\tcolumnState={baseTableColumnState}\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tisFetching={isFetching}\n\t\t\tclassName={className}\n\t\t\ttableClassName={tableClassName}\n\t\t\tselectionMode={selectionMode}\n\t\t\tscrollableRef={scrollableRef}\n\t\t\tinteractiveElementSelector='[data-tree-table-interactive=\"true\"]'\n\t\t\tonActivateRow={selectionMode !== \"none\" || onRowClick ? activateRow : undefined}\n\t\t\tisRowInteractive={(row) => Boolean(onRowClick || (selectionMode !== \"none\" && row.getCanSelect()))}\n\t\t\tgetRowClassName={(row) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\t\treturn getRowClassName?.(originalRow);\n\t\t\t}}\n\t\t\tgetCellClassName={({ row, cell }) =>\n\t\t\t\tcn(\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && styles.treeColumnCell,\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && row.getIsSelected() && styles.selectedIndicatorCell\n\t\t\t\t)\n\t\t\t}\n\t\t\tgetCellLayout={({ cell }) => mergedCellLayout.get(cell.id)}\n\t\t\trenderHeaderContextMenu={renderHeaderContextMenu}\n\t\t\tenableColumnResizing={enableColumnResizing}\n\t\t\tenableColumnReordering={enableColumnReordering}\n\t\t\tcolumnResizeMinWidth={columnResizeMinWidth}\n\t\t\trenderCellContent={(args) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(args.row, treeData.rowById);\n\t\t\t\tconst displayValue = formatPipelineDisplayValue({\n\t\t\t\t\tfield: formattingSnapshot.runtimeByColumnId[args.cell.column.id],\n\t\t\t\t\trawValue: args.cell.getValue(),\n\t\t\t\t\trowData: originalRow as TableFormulaRowData,\n\t\t\t\t\trowKind: \"tree\"\n\t\t\t\t});\n\t\t\t\tconst defaultContent = shouldUseTableFormatting({\n\t\t\t\t\tcolumnId: args.cell.column.id,\n\t\t\t\t\truntimeByColumnId: formattingSnapshot.runtimeByColumnId,\n\t\t\t\t\tcustomCellColumnIds: formattingSnapshot.customCellColumnIds\n\t\t\t\t}) ? (\n\t\t\t\t\t<FormattedTableCell displayValue={displayValue} align={args.columnMeta?.align} />\n\t\t\t\t) : (\n\t\t\t\t\targs.defaultContent\n\t\t\t\t);\n\t\t\t\tconst content = renderCellContent\n\t\t\t\t\t? renderCellContent({\n\t\t\t\t\t\t\t...args,\n\t\t\t\t\t\t\tdefaultContent,\n\t\t\t\t\t\t\tdisplayValue\n\t\t\t\t\t\t})\n\t\t\t\t\t: defaultContent;\n\n\t\t\t\treturn renderTreeCellContent(args, content, resolvedTreeColumnId, indentSize);\n\t\t\t}}\n\t\t\tafterTableContent={onReachEnd ? <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" /> : null}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tree-table/TreeTable.module.scss","../../src/tree-table/TreeTable.tsx"],"sourcesContent":[".treeColumnCell {\n\tpadding-inline-start: var(--space-sm);\n}\n\n.selectedIndicatorCell {\n\tbox-shadow: inset 0.1875rem 0 0 var(--accent-text);\n}\n\n.treeCell {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n}\n\n.treeCellContent {\n\tmin-width: 0;\n\tflex: 1 1 auto;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.expanderButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: var(--content-0);\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus-visible {\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.expanderSpacer {\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n}\n\n.sentinel {\n\theight: 1px;\n}\n","import { useEffect, useEffectEvent, useMemo, useRef, useState, type ReactNode } from \"react\";\n\nimport { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport {\n\ttype FoundationTableRow,\n\tfoundationTableFeatures,\n\tresolveTableLength,\n\tTableColumnDef,\n\ttype TableColumnOrderState,\n\ttype TableColumnSizingState,\n\ttype TableColumnVisibilityState,\n\tTableSelectionMode,\n\tuseTableRowSelection\n} from \"@ryuzaki13/react-foundation-lib/table\";\nimport { buildTreeTableRows, type TreeTableFlatHierarchy, type TreeTableRowNode } from \"@ryuzaki13/react-foundation-lib/tree-table\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { useTable, type ExpandedState } from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport {\n\tBaseTable,\n\tbuildBaseTableMergedCellsLayout,\n\tbuildTableFormattingSnapshot,\n\tFormattedTableCell,\n\tgetOrderedVisibleLeafColumns,\n\tshouldUseTableFormatting,\n\tuseTableColumnOrder,\n\tuseTableColumnPinning,\n\tuseTableColumnSizing,\n\tuseTableColumnVisibility,\n\ttype BaseTableCellRenderArgs,\n\ttype BaseTableColumnState,\n\ttype BaseTableProps,\n\ttype TableColumnPinningState\n} from \"../base-table\";\n\nimport styles from \"./TreeTable.module.scss\";\n\nimport type { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\n\n/**\n * Внутренний тип строки TreeTable после преобразования в иерархию.\n */\ntype TreeTableRuntimeRow<TData extends object> = TreeTableRowNode<TData>;\n\n/**\n * Пропсы компонента TreeTable.\n *\n * Компонент принимает плоский OData-список и сам строит иерархию,\n * оставляя управление раскрытием и выбором во внутреннем состоянии.\n */\nexport interface TreeTableProps<TData extends object> {\n\t/**\n\t * Необязательный заголовок над таблицей.\n\t */\n\ttitle?: string;\n\t/**\n\t * Признак первичной загрузки.\n\t */\n\tisLoading?: boolean;\n\t/**\n\t * Признак фоновой догрузки или обновления данных.\n\t */\n\tisFetching?: boolean;\n\t/**\n\t * Плоский источник строк.\n\t */\n\tdata: readonly TData[] | undefined | null;\n\t/**\n\t * Описание колонок через исходный тип строки.\n\t */\n\tcolumns: readonly TableColumnDef<TData>[];\n\t/**\n\t * Правила восстановления дерева из плоского списка.\n\t */\n\thierarchy: TreeTableFlatHierarchy<TData>;\n\t/**\n\t * Режим выбора строк.\n\t */\n\tselectionMode?: TableSelectionMode;\n\t/**\n\t * Если `true`, при первом появлении данных раскрывает корневой уровень.\n\t */\n\texpandFirstLevel?: boolean;\n\t/**\n\t * Дополнительные строки, которые должны быть раскрыты при первой инициализации.\n\t */\n\tdefaultExpandedRowIds?: readonly string[];\n\t/**\n\t * Идентификатор колонки, в которой нужно рисовать tree-toggle и отступы.\n\t *\n\t * Если не указан, используется первая видимая колонка.\n\t */\n\ttreeColumnId?: string;\n\t/**\n\t * Отступ на один уровень вложенности.\n\t *\n\t * Числовое значение трактуется как `em`.\n\t */\n\tindentSize?: string | number;\n\t/**\n\t * Дополнительный CSS-класс корневого контейнера.\n\t */\n\tclassName?: string;\n\t/**\n\t * Дополнительный CSS-класс тега `table`.\n\t */\n\ttableClassName?: string;\n\t/**\n\t * Внешнее controlled-состояние видимости колонок.\n\t */\n\tcolumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Стартовое uncontrolled-состояние видимости колонок.\n\t */\n\tdefaultColumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Внешнее controlled-состояние порядка колонок.\n\t */\n\tcolumnOrder?: readonly string[];\n\t/**\n\t * Стартовое uncontrolled-состояние порядка колонок.\n\t */\n\tdefaultColumnOrder?: readonly string[];\n\t/**\n\t * Внешнее controlled-состояние ширин колонок в px.\n\t */\n\tcolumnSizing?: TableColumnSizingState;\n\t/**\n\t * Стартовое uncontrolled-состояние ширин колонок в px.\n\t */\n\tdefaultColumnSizing?: TableColumnSizingState;\n\t/**\n\t * Внешнее controlled-состояние start-pinning для колонок.\n\t */\n\tcolumnPinning?: TableColumnPinningState;\n\t/**\n\t * Стартовое uncontrolled-состояние start-pinning для колонок.\n\t */\n\tdefaultColumnPinning?: TableColumnPinningState;\n\t/**\n\t * Включает изменение ширины колонок через header-handle.\n\t */\n\tenableColumnResizing?: boolean;\n\t/**\n\t * Включает изменение порядка колонок через drag&drop заголовков.\n\t */\n\tenableColumnReordering?: boolean;\n\t/**\n\t * Минимальная ширина колонки при resize в px.\n\t */\n\tcolumnResizeMinWidth?: number;\n\t/**\n\t * Вызывается после изменения видимости колонок.\n\t */\n\tonColumnVisibilityChange?: (state: TableColumnVisibilityState) => void;\n\t/**\n\t * Вызывается после изменения порядка колонок.\n\t */\n\tonColumnOrderChange?: (state: TableColumnOrderState) => void;\n\t/**\n\t * Вызывается после изменения ширины колонок.\n\t */\n\tonColumnSizingChange?: (state: TableColumnSizingState) => void;\n\t/**\n\t * Вызывается после изменения start-pinning state.\n\t */\n\tonColumnPinningChange?: (state: TableColumnPinningState) => void;\n\t/**\n\t * Вызывается при активации строки кликом или клавиатурой.\n\t */\n\tonRowClick?: (row: TData) => void;\n\t/**\n\t * Вызывается после изменения выбранных строк.\n\t */\n\tonRowSelectionChange?: (rows: TData[]) => void;\n\t/**\n\t * Вызывается после изменения раскрытых узлов.\n\t */\n\tonExpandedRowIdsChange?: (rowIds: string[]) => void;\n\t/**\n\t * Вызывается при достижении конца таблицы внутри scroll-контейнера.\n\t */\n\tonReachEnd?: () => void;\n\t/**\n\t * Позволяет запретить выбор отдельных строк.\n\t */\n\tgetRowCanSelect?: (row: TData) => boolean;\n\t/**\n\t * Позволяет добавить CSS-класс для конкретной строки.\n\t */\n\tgetRowClassName?: (row: TData) => string | undefined;\n\t/**\n\t * Контекстное меню заголовка колонки. Получает runtime-строки дерева,\n\t * потому что BaseTable работает уже после сборки flat hierarchy.\n\t */\n\trenderHeaderContextMenu?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderHeaderContextMenu\"];\n\t/**\n\t * Точка расширения содержимого ячейки после общего форматирования.\n\t *\n\t * Для tree-column в `defaultContent` передается только содержимое ячейки:\n\t * TreeTable сам добавит expander и отступ после выполнения слота.\n\t */\n\trenderCellContent?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderCellContent\"];\n}\n\n/**\n * Преобразует массив идентификаторов в формат состояния раскрытия TanStack.\n */\nfunction toExpandedState(rowIds: readonly string[]): ExpandedState {\n\treturn Object.fromEntries(rowIds.map((rowId) => [rowId, true]));\n}\n\n/**\n * Извлекает из состояния раскрытия только активные идентификаторы.\n */\nfunction extractExpandedRowIds(expanded: ExpandedState): string[] {\n\tif (typeof expanded === \"boolean\") {\n\t\treturn [];\n\t}\n\n\treturn Object.keys(expanded).filter((rowId) => expanded[rowId]);\n}\n\n/**\n * Нормализует исходную строку, убирая зависимость от внутреннего поля `children`.\n */\nfunction resolveOriginalRow<TData extends object>(row: FoundationTableRow<TreeTableRuntimeRow<TData>>, rowById: Map<string, TData>): TData {\n\treturn rowById.get(row.id) ?? (row.original as TData);\n}\n\n/**\n * Рендерит содержимое древовидной ячейки.\n */\nfunction renderTreeCellContent<TData extends object>(\n\targs: BaseTableCellRenderArgs<TreeTableRuntimeRow<TData>>,\n\tcontent: ReactNode,\n\ttreeColumnId: string | undefined,\n\tindentSize: string | number\n): ReactNode {\n\tif (args.cell.column.id !== treeColumnId) {\n\t\treturn content;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={styles.treeCell}\n\t\t\tstyle={{\n\t\t\t\tpaddingInlineStart: `calc(${args.row.depth} * ${resolveTableLength(indentSize) ?? \"0em\"})`\n\t\t\t}}>\n\t\t\t{args.row.getCanExpand() ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.expanderButton}\n\t\t\t\t\taria-label={args.row.getIsExpanded() ? \"Свернуть строку\" : \"Развернуть строку\"}\n\t\t\t\t\tdata-tree-table-interactive=\"true\"\n\t\t\t\t\tdata-ui=\"tree-table-expander\"\n\t\t\t\t\tdata-action={args.row.getIsExpanded() ? \"collapse-tree-table-row\" : \"expand-tree-table-row\"}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\targs.row.toggleExpanded();\n\t\t\t\t\t}}>\n\t\t\t\t\t{args.row.getIsExpanded() ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className={styles.expanderSpacer} aria-hidden=\"true\" />\n\t\t\t)}\n\n\t\t\t<div className={styles.treeCellContent}>{content}</div>\n\t\t</div>\n\t);\n}\n\n/**\n * Древовидная таблица на базе TanStack Table для плоских OData-данных.\n */\nexport function TreeTable<TData extends object>({\n\ttitle,\n\tisLoading,\n\tisFetching,\n\tdata,\n\tcolumns,\n\thierarchy,\n\tselectionMode = \"none\",\n\texpandFirstLevel = false,\n\tdefaultExpandedRowIds,\n\ttreeColumnId,\n\tindentSize = 1,\n\tclassName,\n\ttableClassName,\n\tcolumnVisibility,\n\tdefaultColumnVisibility,\n\tcolumnOrder,\n\tdefaultColumnOrder,\n\tcolumnSizing,\n\tdefaultColumnSizing,\n\tcolumnPinning,\n\tdefaultColumnPinning,\n\tenableColumnResizing = false,\n\tenableColumnReordering = false,\n\tcolumnResizeMinWidth,\n\tonColumnVisibilityChange,\n\tonColumnOrderChange,\n\tonColumnSizingChange,\n\tonColumnPinningChange,\n\tonRowClick,\n\tonRowSelectionChange,\n\tonExpandedRowIdsChange,\n\tonReachEnd,\n\tgetRowCanSelect,\n\tgetRowClassName,\n\trenderHeaderContextMenu,\n\trenderCellContent\n}: TreeTableProps<TData>) {\n\tconst treeData = useMemo(() => buildTreeTableRows(data ?? [], hierarchy), [data, hierarchy]);\n\tconst formattingSnapshot = useMemo(() => buildTableFormattingSnapshot(columns), [columns]);\n\tconst initialExpandedRowIds = useMemo(() => {\n\t\tconst nextExpandedRowIds = new Set(defaultExpandedRowIds ?? []);\n\n\t\tif (expandFirstLevel) {\n\t\t\tfor (const rootRowId of treeData.rootRowIds) {\n\t\t\t\tnextExpandedRowIds.add(rootRowId);\n\t\t\t}\n\t\t}\n\n\t\treturn Array.from(nextExpandedRowIds);\n\t}, [defaultExpandedRowIds, expandFirstLevel, treeData.rootRowIds]);\n\n\tconst [expanded, setExpanded] = useState<ExpandedState>({});\n\tconst hasInitializedExpansionRef = useRef(false);\n\tconst scrollableRef = useRef<HTMLDivElement | null>(null);\n\tconst sentinelRef = useRef<HTMLDivElement | null>(null);\n\n\tconst { rowSelection, activateRowSelection } = useTableRowSelection({\n\t\tavailableRowIds: treeData.allRowIds,\n\t\trowById: treeData.rowById,\n\t\tselectionMode,\n\t\tonRowSelectionChange\n\t});\n\tconst { columnVisibility: resolvedColumnVisibility, onColumnVisibilityChange: handleColumnVisibilityChange } = useTableColumnVisibility(\n\t\t{\n\t\t\tcolumnVisibility,\n\t\t\tdefaultColumnVisibility,\n\t\t\tonColumnVisibilityChange\n\t\t}\n\t);\n\tconst { columnOrder: resolvedColumnOrder, onColumnOrderChange: handleColumnOrderChange } = useTableColumnOrder({\n\t\tcolumnOrder,\n\t\tdefaultColumnOrder,\n\t\tonColumnOrderChange\n\t});\n\tconst { columnSizing: resolvedColumnSizing, onColumnSizingChange: handleColumnSizingChange } = useTableColumnSizing({\n\t\tcolumnSizing,\n\t\tdefaultColumnSizing,\n\t\tcolumnResizeMinWidth,\n\t\tonColumnSizingChange\n\t});\n\tconst { columnPinning: resolvedColumnPinning, onColumnPinningChange: handleColumnPinningChange } = useTableColumnPinning({\n\t\tcolumnPinning,\n\t\tdefaultColumnPinning,\n\t\tonColumnPinningChange\n\t});\n\n\tconst baseTableColumnState = useMemo<BaseTableColumnState>(\n\t\t() => ({\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility\n\t\t}),\n\t\t[resolvedColumnOrder, resolvedColumnPinning, resolvedColumnSizing, resolvedColumnVisibility]\n\t);\n\n\tconst syncExpandedState = useEffectEvent((availableRowIds: readonly string[], nextInitialExpandedRowIds: readonly string[]) => {\n\t\tif (availableRowIds.length === 0) {\n\t\t\thasInitializedExpansionRef.current = false;\n\t\t\tsetExpanded({});\n\t\t\treturn;\n\t\t}\n\n\t\tconst availableRowIdSet = new Set(availableRowIds);\n\n\t\tsetExpanded((currentExpanded) => {\n\t\t\tconst persistedRowIds = extractExpandedRowIds(currentExpanded).filter((rowId) => availableRowIdSet.has(rowId));\n\n\t\t\tif (!hasInitializedExpansionRef.current) {\n\t\t\t\thasInitializedExpansionRef.current = true;\n\n\t\t\t\tconst seededRowIds = Array.from(\n\t\t\t\t\tnew Set([...persistedRowIds, ...nextInitialExpandedRowIds.filter((rowId) => availableRowIdSet.has(rowId))])\n\t\t\t\t);\n\n\t\t\t\treturn toExpandedState(seededRowIds);\n\t\t\t}\n\n\t\t\treturn toExpandedState(persistedRowIds);\n\t\t});\n\t});\n\n\tconst emitExpandedRowIdsChange = useEffectEvent((currentExpanded: ExpandedState) => {\n\t\tonExpandedRowIdsChange?.(extractExpandedRowIds(currentExpanded));\n\t});\n\n\tconst emitReachEnd = useEffectEvent(() => {\n\t\tonReachEnd?.();\n\t});\n\n\tuseEffect(() => {\n\t\tsyncExpandedState(treeData.allRowIds, initialExpandedRowIds);\n\t}, [initialExpandedRowIds, treeData.allRowIds]);\n\n\tuseEffect(() => {\n\t\temitExpandedRowIdsChange(expanded);\n\t}, [expanded]);\n\n\tuseEffect(() => {\n\t\tif (!onReachEnd || !scrollableRef.current || !sentinelRef.current || isLoading) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst entry = entries[0];\n\n\t\t\t\tif (entry?.isIntersecting) {\n\t\t\t\t\temitReachEnd();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\troot: scrollableRef.current,\n\t\t\t\tthreshold: 0.1\n\t\t\t}\n\t\t);\n\n\t\tobserver.observe(sentinelRef.current);\n\n\t\treturn () => observer.disconnect();\n\t}, [isLoading, onReachEnd, treeData.rows.length]);\n\n\tconst table = useTable({\n\t\tfeatures: foundationTableFeatures,\n\t\tdata: treeData.rows as TreeTableRuntimeRow<TData>[],\n\t\tcolumns: columns as TableColumnDef<TreeTableRuntimeRow<TData>>[],\n\t\tstate: {\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility,\n\t\t\texpanded,\n\t\t\trowSelection\n\t\t},\n\t\tgetRowId: (row) => hierarchy.getRowId(row as TData),\n\t\tgetSubRows: (row) => row.children,\n\t\tonColumnOrderChange: handleColumnOrderChange,\n\t\tonColumnPinningChange: handleColumnPinningChange,\n\t\tonColumnSizingChange: handleColumnSizingChange,\n\t\tonColumnVisibilityChange: handleColumnVisibilityChange,\n\t\tonExpandedChange: setExpanded,\n\t\tenableMultiRowSelection: selectionMode === \"multi\",\n\t\tenableRowSelection: (row) => {\n\t\t\tif (selectionMode === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\treturn getRowCanSelect ? getRowCanSelect(originalRow) : true;\n\t\t}\n\t});\n\n\tconst visibleLeafColumns = getOrderedVisibleLeafColumns(table, baseTableColumnState);\n\tconst resolvedTreeColumnId = treeColumnId ?? visibleLeafColumns[0]?.id;\n\tconst rowModelRows = table.getRowModel().rows;\n\tconst mergedCellLayout = useMemo(\n\t\t() =>\n\t\t\tbuildBaseTableMergedCellsLayout({\n\t\t\t\trows: rowModelRows,\n\t\t\t\tcolumns: visibleLeafColumns,\n\t\t\t\tresolveRowBoundaryKey: (row) => row.depth,\n\t\t\t\texcludeColumnIds: resolvedTreeColumnId ? new Set([resolvedTreeColumnId]) : undefined\n\t\t\t}),\n\t\t[rowModelRows, visibleLeafColumns, resolvedTreeColumnId]\n\t);\n\n\t/**\n\t * Активирует строку: обновляет выбор в соответствии с режимом и вызывает внешний callback.\n\t */\n\tconst activateRow = (row: FoundationTableRow<TreeTableRuntimeRow<TData>>) => {\n\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\tactivateRowSelection(row.id, row.getCanSelect());\n\t\tonRowClick?.(originalRow);\n\t};\n\n\treturn (\n\t\t<BaseTable\n\t\t\ttable={table}\n\t\t\tcolumnState={baseTableColumnState}\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tisFetching={isFetching}\n\t\t\tclassName={className}\n\t\t\ttableClassName={tableClassName}\n\t\t\tselectionMode={selectionMode}\n\t\t\tscrollableRef={scrollableRef}\n\t\t\tinteractiveElementSelector='[data-tree-table-interactive=\"true\"]'\n\t\t\tonActivateRow={selectionMode !== \"none\" || onRowClick ? activateRow : undefined}\n\t\t\tisRowInteractive={(row) => Boolean(onRowClick || (selectionMode !== \"none\" && row.getCanSelect()))}\n\t\t\tgetRowClassName={(row) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\t\treturn getRowClassName?.(originalRow);\n\t\t\t}}\n\t\t\tgetCellClassName={({ row, cell }) =>\n\t\t\t\tcn(\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && styles.treeColumnCell,\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && row.getIsSelected() && styles.selectedIndicatorCell\n\t\t\t\t)\n\t\t\t}\n\t\t\tgetCellLayout={({ cell }) => mergedCellLayout.get(cell.id)}\n\t\t\trenderHeaderContextMenu={renderHeaderContextMenu}\n\t\t\tenableColumnResizing={enableColumnResizing}\n\t\t\tenableColumnReordering={enableColumnReordering}\n\t\t\tcolumnResizeMinWidth={columnResizeMinWidth}\n\t\t\trenderCellContent={(args) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(args.row, treeData.rowById);\n\t\t\t\tconst displayValue = formatPipelineDisplayValue({\n\t\t\t\t\tfield: formattingSnapshot.runtimeByColumnId[args.cell.column.id],\n\t\t\t\t\trawValue: args.cell.getValue(),\n\t\t\t\t\trowData: originalRow as TableFormulaRowData,\n\t\t\t\t\trowKind: \"tree\"\n\t\t\t\t});\n\t\t\t\tconst defaultContent = shouldUseTableFormatting({\n\t\t\t\t\tcolumnId: args.cell.column.id,\n\t\t\t\t\truntimeByColumnId: formattingSnapshot.runtimeByColumnId,\n\t\t\t\t\tcustomCellColumnIds: formattingSnapshot.customCellColumnIds\n\t\t\t\t}) ? (\n\t\t\t\t\t<FormattedTableCell displayValue={displayValue} align={args.columnMeta?.align} />\n\t\t\t\t) : (\n\t\t\t\t\targs.defaultContent\n\t\t\t\t);\n\t\t\t\tconst content = renderCellContent\n\t\t\t\t\t? renderCellContent({\n\t\t\t\t\t\t\t...args,\n\t\t\t\t\t\t\tdefaultContent,\n\t\t\t\t\t\t\tdisplayValue\n\t\t\t\t\t\t})\n\t\t\t\t\t: defaultContent;\n\n\t\t\t\treturn renderTreeCellContent(args, content, resolvedTreeColumnId, indentSize);\n\t\t\t}}\n\t\t\tafterTableContent={onReachEnd ? <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" /> : null}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/types.d.ts

@@ -17,10 +17,10 @@ export type UiBaseProps<C, V = C> = {
 };
 /**
  * Цветовой тон задаёт смысл цвета, а `UiAppearance` — визуальную иерархию действия.
- * `brand` предназначен для фирменных действий и не заменяет статусные тоны.
+ * `accent` отмечает текущий или выбранный элемент, а `brand` — фирменное действие.
  */
-export type UiTone = "neutral" | "brand" | "error" | "warning" | "success" | "info";
+export type UiTone = "accent" | "neutral" | "brand" | "error" | "warning" | "success" | "info";
 export type UiAppearance = "solid" | "outline" | "ghost" | "transparent";
-export type UiVariant = "transparent" | "ghost" | "neutral" | "brand" | "error" | "warning" | "success" | "info" | "neutralOutline" | "brandOutline" | "errorOutline" | "warningOutline" | "successOutline" | "infoOutline";
+export type UiVariant = "transparent" | "ghost" | "neutral" | "accent" | "brand" | "error" | "warning" | "success" | "info" | "neutralOutline" | "accentOutline" | "brandOutline" | "errorOutline" | "warningOutline" | "successOutline" | "infoOutline";
 export type UiPanelTone = "primary" | "secondary" | "tertiary";
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,OAAO,GACP,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,aAAa,CAAC;AAEjB,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/F,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,cAAc,GACd,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,aAAa,CAAC;AAEjB,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC"}

package/dist/uiClasses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uiClasses.d.ts","sourceRoot":"","sources":["../src/uiClasses.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE5E,MAAM,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,YAAY,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;AAyC/E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,YAAY,GAAG,MAAM,CAEzE;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEjE;AAED,wBAAgB,eAAe,CAAC,EAC/B,OAAO,EACP,IAAI,EACJ,UAAU,EACV,YAAwB,EACxB,kBAA8B,EAC9B,EAAE;IACF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,YAAY,CAAC;CAClC,GAAG,QAAQ,CAgBX"}
+{"version":3,"file":"uiClasses.d.ts","sourceRoot":"","sources":["../src/uiClasses.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE5E,MAAM,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,YAAY,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;AA4C/E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,YAAY,GAAG,MAAM,CAEzE;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEjE;AAED,wBAAgB,eAAe,CAAC,EAC/B,OAAO,EACP,IAAI,EACJ,UAAU,EACV,YAAwB,EACxB,kBAA8B,EAC9B,EAAE;IACF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,YAAY,CAAC;CAClC,GAAG,QAAQ,CAgBX"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ryuzaki13/react-foundation-ui",
-	"version": "2.0.1",
+	"version": "2.2.0",
 	"description": "Reusable React foundation UI primitives and Storybook stories.",
 	"license": "MIT",
 	"author": "Ryuzaki13",
@@ -33,6 +33,7 @@
 		"styles",
 		"styles.scss",
 		"src/styles",
+		"COLOR_TOKENS_MIGRATION.md",
 		"README.md",
 		"LICENSE"
 	],
@@ -274,6 +275,10 @@
 			"types": "./dist/state-select/index.d.ts",
 			"import": "./dist/state-select/index.js"
 		},
+		"./status-indicator": {
+			"types": "./dist/status-indicator/index.d.ts",
+			"import": "./dist/status-indicator/index.js"
+		},
 		"./switch": {
 			"types": "./dist/switch/index.d.ts",
 			"import": "./dist/switch/index.js"

package/src/styles/_border.scss

@@ -70,13 +70,13 @@
 
 // TODO: unused
 .outlineSolid {
-	outline: var(--border-width) solid var(--content-accent);
+	outline: var(--border-width) solid var(--accent-text);
 	outline-offset: var(--focus-offset);
 }
 
 // TODO: unused
 .outlineDashed {
-	outline: var(--border-width) dashed var(--content-accent);
+	outline: var(--border-width) dashed var(--accent-text);
 	outline-offset: var(--focus-offset);
 }
 

package/src/styles/_color.scss

@@ -33,7 +33,7 @@
 
 // TODO: unused
 .surfaceAccent {
-	background-color: var(--surface-accent);
+	background-color: var(--accent-fill);
 }
 
 .surfaceBackdrop {
@@ -62,31 +62,31 @@
 }
 
 .contentAccent {
-	color: var(--content-accent);
+	color: var(--accent-text);
 }
 
 .statusSuccess {
-	color: var(--status-success-text);
+	color: var(--success-text);
 }
 
 .statusError {
-	color: var(--status-error-text);
+	color: var(--error-text);
 }
 
 .textColorDanger {
-	color: var(--status-error-text);
+	color: var(--error-text);
 }
 
 .statusWarning {
-	color: var(--status-warning-text);
+	color: var(--warning-text);
 }
 
 .statusInfo {
-	color: var(--status-info-text);
+	color: var(--info-text);
 }
 
 .statusBrand {
-	color: var(--status-brand-text);
+	color: var(--brand-text);
 }
 
 .statusNone {

package/src/styles/_components.scss

@@ -3,12 +3,12 @@
 
 	&:hover:not(.selected) {
 		// filter: contrast(0.9);
-		background-color: var(--surface-accent);
+		background-color: var(--accent-fill);
 	}
 
 	&.selected {
 		cursor: default;
-		// color: var(--content-accent);
+		// color: var(--accent-text);
 		background-color: var(--surface-1);
 	}
 }

package/src/styles/_normalize.scss

@@ -133,18 +133,18 @@ html,
 }
 
 .link {
-	color: var(--content-accent);
+	color: var(--accent-text);
 
 	&:visited {
-		color: var(--content-accent);
+		color: var(--accent-text);
 	}
 
 	&:hover {
-		color: var(--status-info-fill);
+		color: var(--info-fill);
 	}
 
 	&:active {
-		color: var(--status-error-fill);
+		color: var(--error-fill);
 	}
 }
 

package/src/styles/config/_index.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:meta";
+@use "sass:string";
 
 $root-token-defaults: (
 	"--font-family": (
@@ -72,8 +73,8 @@ $root-token-defaults: (
 	"--z-tooltip": 200,
 	"--z-image-viewer": 300,
 	"--z-notify": 400,
-	"--white": oklch(1 0 0),
-	"--black": oklch(0 0 0)
+	"--white": #ffffff,
+	"--black": #000000
 );
 
 $retina-token-defaults: (
@@ -191,110 +192,62 @@ $paragraph-spacing-preset-defaults: (
 
 $light-theme-defaults: (
 	tokens: (
-		"--surface-0": var(--hc-surface, #ffffff),
-		"--surface-1": var(--hc-surface, #f8f8f9),
-		"--surface-2": var(--hc-surface, #f1f1f3),
-		"--content-0": var(--hc-content, oklch(0.26 0.01 244)),
-		"--content-1": var(--hc-content, oklch(0.52 0.02 268)),
-		"--content-2": var(--hc-content, oklch(0.66 0.01 258)),
-		"--focus-ring": var(--hc-focus-ring, oklch(0.5 0.3 270)),
-		"--overlay-backdrop": var(--hc-overlay-backdrop, rgba(0, 0, 0, 0.1)),
-		"--overlay-glass": var(--hc-overlay-glass, rgba(255, 255, 255, 0.8)),
-		"--shadow-xs": 0 0 0.25em rgba(0, 0, 0, 0.15),
-		"--shadow-sm": 0 0 0.25em rgba(0, 0, 0, 0.25),
-		"--shadow-md": 0 0 0.5em rgba(0, 0, 0, 0.25),
-		"--shadow-lg": 0 0 1em rgba(0, 0, 0, 0.25),
-		"--interactive-color": inherit,
-		"--interactive-hover-color": var(--content-0),
-		"--interactive-active-color": var(--content-0),
-		"--interactive-selected-color": var(--content-0),
-		"--interactive-surface": transparent,
-		"--interactive-hover-surface": var(--surface-accent),
-		"--interactive-active-surface": var(--surface-accent),
-		"--interactive-selected-surface": var(--surface-accent),
-		"--interactive-border": transparent,
-		"--interactive-hover-border": var(--border-accent),
-		"--interactive-active-border": var(--border-accent),
-		"--interactive-selected-border": var(--border-accent)
-	),
-	accent: (
-		l: 0.55,
-		c: 0.22,
-		h: 245
+		"--surface-0": #ffffff,
+		"--surface-1": #f8f8f9,
+		"--surface-2": #f1f1f3,
+		"--content-0": #202529,
+		"--content-1": #646975,
+		"--content-2": #8e9298,
+		"--focus-ring": #3429ff,
+		"--overlay-backdrop": string.unquote("var(--hc-overlay-backdrop, #0000001a)"),
+		"--overlay-glass": string.unquote("var(--hc-overlay-glass, #ffffffcc)"),
+		"--shadow-xs": string.unquote("var(--hc-shadow-xs, 0 0 0.25em #00000026)"),
+		"--shadow-sm": string.unquote("var(--hc-shadow-sm, 0 0 0.25em #00000040)"),
+		"--shadow-md": string.unquote("var(--hc-shadow-md, 0 0 0.5em #00000040)"),
+		"--shadow-lg": string.unquote("var(--hc-shadow-lg, 0 0 1em #00000040)")
 	),
 	status: (
-		// Brand использует общий генератор состояний, но остаётся не статусом, а фирменным тоном UI.
+		accent: (
+			text: #0073e6,
+			border: #006eb3,
+			fill: #e2f1fa,
+			on-fill: #202529
+		),
 		brand: (
-				fill: (
-					l: 0.4,
-					c: 0.2,
-					h: 262
-				),
-				border: (
-					l: 0.5,
-					c: 0.2,
-					h: 262
-				)
-			),
+			text: #0036b0,
+			border: #1957d2,
+			fill: #1842d2,
+			on-fill: #ffffff
+		),
 		neutral: (
-			fill: (
-				l: 0.26,
-				c: 0.01,
-				h: 244
-			),
-			border: (
-				l: 0.86,
-				c: 0.016,
-				h: 245
-			)
+			text: #202529,
+			border: #c9d2db,
+			fill: #2e3338,
+			on-fill: #ffffff
 		),
 		error: (
-			fill: (
-				l: 0.52,
-				c: 0.19,
-				h: 15
-			),
-			border: (
-				l: 0.52,
-				c: 0.19,
-				h: 15
-			)
+			text: #bd1f44,
+			border: #bd1f44,
+			fill: #dc2447,
+			on-fill: #ffffff
 		),
 		warning: (
-			fill: (
-				l: 0.55,
-				c: 0.16,
-				h: 80
-			),
-			border: (
-				l: 0.55,
-				c: 0.16,
-				h: 80
-			)
+			text: #a16200,
+			border: #a16200,
+			fill: #b67400,
+			on-fill: #ffffff
 		),
 		success: (
-			fill: (
-				l: 0.5,
-				c: 0.14,
-				h: 170
-			),
-			border: (
-				l: 0.5,
-				c: 0.14,
-				h: 170
-			)
+			text: #007b57,
+			border: #007b57,
+			fill: #00906b,
+			on-fill: #ffffff
 		),
 		info: (
-			fill: (
-				l: 0.52,
-				c: 0.15,
-				h: 245
-			),
-			border: (
-				l: 0.52,
-				c: 0.15,
-				h: 245
-			)
+			text: #006eb8,
+			border: #006eb8,
+			fill: #007ed8,
+			on-fill: #ffffff
 		)
 	)
 );
@@ -304,106 +257,59 @@ $dark-theme-defaults: (
 		"--surface-0": #222a35,
 		"--surface-1": #27313f,
 		"--surface-2": #2d3646,
-		"--content-0": oklch(0.9 0.01 256),
-		"--content-1": oklch(0.8 0.02 256),
-		"--content-2": oklch(0.7 0.02 256),
-		"--focus-ring": oklch(0.88 0.2 94),
-		"--overlay-backdrop": rgba(30, 37, 47, 0.18),
-		"--overlay-glass": rgba(30, 37, 47, 0.8),
-		"--shadow-xs": 0 0 0.25em rgba(0, 0, 0, 0.15),
-		"--shadow-sm": 0 0 0.25em rgba(0, 0, 0, 0.25),
-		"--shadow-md": 0 0 0.5em rgba(0, 0, 0, 0.25),
-		"--shadow-lg": 0 0 1em rgba(0, 0, 0, 0.25),
-		"--interactive-color": inherit,
-		"--interactive-hover-color": var(--content-0),
-		"--interactive-active-color": var(--content-0),
-		"--interactive-selected-color": var(--content-0),
-		"--interactive-surface": transparent,
-		"--interactive-hover-surface": var(--surface-accent),
-		"--interactive-active-surface": var(--surface-accent),
-		"--interactive-selected-surface": var(--surface-accent),
-		"--interactive-border": transparent,
-		"--interactive-hover-border": var(--border-accent),
-		"--interactive-active-border": var(--border-accent),
-		"--interactive-selected-border": var(--border-accent)
-	),
-	accent: (
-		l: 0.7,
-		c: 0.2,
-		h: 245
+		"--content-0": #dadee5,
+		"--content-1": #b6bfcb,
+		"--content-2": #969fab,
+		"--focus-ring": #ffd300,
+		"--overlay-backdrop": string.unquote("var(--hc-overlay-backdrop, #1e252f2e)"),
+		"--overlay-glass": string.unquote("var(--hc-overlay-glass, #1e252fcc)"),
+		"--shadow-xs": string.unquote("var(--hc-shadow-xs, 0 0 0.25em #00000026)"),
+		"--shadow-sm": string.unquote("var(--hc-shadow-sm, 0 0 0.25em #00000040)"),
+		"--shadow-md": string.unquote("var(--hc-shadow-md, 0 0 0.5em #00000040)"),
+		"--shadow-lg": string.unquote("var(--hc-shadow-lg, 0 0 1em #00000040)")
 	),
 	status: (
+		accent: (
+			text: #00a5ff,
+			border: #4e8cbe,
+			fill: #103243,
+			on-fill: #dadee5
+		),
 		brand: (
-			fill: (
-				l: 0.75,
-				c: 0.2,
-				h: 272
-			),
-			border: (
-				l: 0.7,
-				c: 0.18,
-				h: 266
-			)
+			text: #84a0ff,
+			border: #6997ff,
+			fill: #97b5ff,
+			on-fill: #192045
 		),
 		neutral: (
-			fill: (
-				l: 0.75,
-				c: 0.02,
-				h: 256
-			),
-			border: (
-				l: 0.45,
-				c: 0.02,
-				h: 256
-			)
+			text: #a6afbb,
+			border: #4e5661,
+			fill: #b9c2cd,
+			on-fill: #222427
 		),
 		error: (
-			fill: (
-				l: 0.75,
-				c: 0.18,
-				h: 22
-			),
-			border: (
-				l: 0.75,
-				c: 0.18,
-				h: 22
-			)
+			text: #ff7879,
+			border: #ff7879,
+			fill: #ff8f8e,
+			on-fill: #3d1516
 		),
 		warning: (
-			fill: (
-				l: 0.77,
-				c: 0.14,
-				h: 75
-			),
-			border: (
-				l: 0.77,
-				c: 0.14,
-				h: 75
-			)
+			text: #e8a63d,
+			border: #e8a63d,
+			fill: #faba5b,
+			on-fill: #322004
 		),
 		success: (
-			fill: (
-				l: 0.75,
-				c: 0.14,
-				h: 165
-			),
-			border: (
-				l: 0.75,
-				c: 0.14,
-				h: 165
-			)
+			text: #3cc998,
+			border: #3cc998,
+			fill: #5edcab,
+			on-fill: #062b1e
 		),
 		info: (
-			fill: (
-				l: 0.75,
-				c: 0.16,
-				h: 258
-			),
-			border: (
-				l: 0.75,
-				c: 0.16,
-				h: 258
-			)
+			text: #6baeff,
+			border: #6baeff,
+			fill: #81c2ff,
+			on-fill: #12243f
 		)
 	)
 );
@@ -430,7 +336,14 @@ $dark-theme: map.deep-merge($dark-theme-defaults, $dark-theme-overrides);
 
 @mixin emit-declarations($tokens) {
 	@each $name, $value in $tokens {
-		#{$name}: #{meta.inspect($value)};
+		@if string.slice($name, 1, 2) == "--" and meta.type-of($value) == color {
+			$high-contrast-name: --hc-#{string.slice($name, 3)};
+
+			// Цвет остаётся fallback, а одноимённый --hc-* можно включить runtime-режимом контрастности.
+			#{$name}: var(#{$high-contrast-name}, #{meta.inspect($value)});
+		} @else {
+			#{$name}: #{meta.inspect($value)};
+		}
 	}
 }