@jielga/tmdatagrid 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/styles.css

@@ -1,2 +1,2 @@
-._root_1e2oi_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_1e2oi_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_1e2oi_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_1e2oi_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_1e2oi_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_1e2oi_8{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;--dg-row-selected-bg:var(--mantine-primary-color-light);--dg-row-highlight-bg:var(--mantine-primary-color-light-hover);--dg-row-group-bg:var(--mantine-color-body);--dg-row-striped-bg:color-mix(in srgb, var(--mantine-color-text) 3.5%, var(--mantine-color-body));--dg-z-pinned-cell:2;--dg-z-focused-cell:3;--dg-z-pinned-row:4;--dg-z-pinned-row-pinned-cell:5;--dg-z-summary-row:4;--dg-z-summary-pinned-cell:5;--dg-z-header:6;--dg-z-header-pinned-cell:7;text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._columnsPanel_1492o_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_1492o_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_1492o_11{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_1492o_18{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}._detailsToggle_n39tz_3{width:100%;height:100%;color:inherit;justify-content:center;align-items:center;display:flex}._detailsToggle_n39tz_3:hover ._chevron_n39tz_12{color:var(--mantine-color-text)}._chevron_n39tz_12{color:var(--mantine-color-dimmed);align-items:center;transition:transform .12s;display:flex}._chevron_n39tz_12[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_n39tz_12{transition:none}}._groupToggle_1954o_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_1954o_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_1954o_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_1954o_14{transition:none}}._groupLabel_1954o_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_1954o_44{color:var(--mantine-color-dimmed);font-variant-numeric:tabular-nums;flex:none}._filterPanel_izakx_4{top:calc(var(--dg-header-height) + 2px);left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_izakx_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._filterPanelHeader_izakx_22{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-xs);display:flex}._filterPanelFooter_izakx_30{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);display:flex}._filterPills_14wl0_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_14wl0_3 ._pill_14wl0_15{background-color:var(--lightningcss-light,var(--mantine-color-gray-1))var(--lightningcss-dark,var(--mantine-color-dark-5));color:var(--lightningcss-light,var(--mantine-color-black))var(--lightningcss-dark,var(--mantine-color-dark-0));border:1px solid var(--lightningcss-light,var(--mantine-color-gray-3))var(--lightningcss-dark,var(--mantine-color-dark-3))}._pillLabel_14wl0_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_14wl0_27:hover{text-decoration:underline}._footer_te0a3_1{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._footer_te0a3_1[data-paging-suspended=true]{opacity:.55}._tableWrapper_15qzd_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_15qzd_10{flex:1;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_15qzd_21{display:grid}._headerRow_15qzd_27{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._headerRow_15qzd_27[data-dg-header-last]:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--dg-header-shadow-color,#00000024), transparent);opacity:0;height:6px;position:absolute;inset:100% 0 auto}@supports (animation-timeline:scroll()){._headerRow_15qzd_27[data-dg-header-last]:after{animation:linear both _dg-header-shadow_15qzd_1;animation-timeline:scroll();animation-range:0 24px}}@keyframes _dg-header-shadow_15qzd_1{0%{opacity:0}to{opacity:1}}._bodyRow_15qzd_76{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_15qzd_76[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_15qzd_76:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_15qzd_76[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_15qzd_76[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_15qzd_76[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_15qzd_76[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_15qzd_76[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_15qzd_76:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_15qzd_143{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._bodyCell_15qzd_143[data-control-column=true]{padding:0}._grid_15qzd_21[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_15qzd_143[data-selected=true]{background-color:color-mix(in srgb, var(--mantine-primary-color-filled) 14%, var(--row-bg));--dg-edge-top:transparent;--dg-edge-bottom:transparent;--dg-edge-left:transparent;--dg-edge-right:transparent;box-shadow:inset 0 1px 0 0 var(--dg-edge-top), inset 0 -1px 0 0 var(--dg-edge-bottom), inset 1px 0 0 0 var(--dg-edge-left), inset -1px 0 0 0 var(--dg-edge-right)}._bodyCell_15qzd_143[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_15qzd_143[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_15qzd_143[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_15qzd_143[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_15qzd_143[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_15qzd_141{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_15qzd_143[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_15qzd_243{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorActions_15qzd_252{flex:none;align-items:center;display:flex}._bodyCell_15qzd_143[data-dirty],._bodyCell_15qzd_143[data-invalid]{position:relative}._bodyCell_15qzd_143[data-dirty]:after,._bodyCell_15qzd_143[data-invalid]:after{content:"";border:5px solid #0000;border-top-color:var(--mantine-primary-color-filled);border-right-color:var(--mantine-primary-color-filled);position:absolute;top:0;right:0}._bodyCell_15qzd_143[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_15qzd_143[data-align=right]{justify-content:flex-end}._bodyCell_15qzd_143[data-align=center]{justify-content:center}._bodyCell_15qzd_143[data-align=left] ._cellContent_15qzd_141{flex:auto}._detailsCell_15qzd_303{border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);padding:var(--dg-padding);-webkit-user-select:text;user-select:text;cursor:auto;grid-column:1/-1}._messageRow_15qzd_15{justify-content:center;justify-self:start;align-items:center;gap:var(--mantine-spacing-xs);width:100cqi;padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex;position:sticky;left:0}._bodyRow_15qzd_76[data-deleted=true]{opacity:.55;pointer-events:none;text-decoration:line-through}._entryBlock_15qzd_347{grid-column:1/-1;grid-template-columns:subgrid;top:var(--dg-header-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._entryRow_15qzd_356{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_15qzd_369{grid-column:1/-1;grid-template-columns:subgrid;top:calc(var(--dg-header-height,0px) + var(--dg-entry-height,0px));z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedTopBlock_15qzd_369>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_15qzd_382{grid-column:1/-1;grid-template-columns:subgrid;bottom:var(--dg-summary-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedBottomBlock_15qzd_382>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_15qzd_395{padding:0 calc(var(--dg-padding) / 2);border-bottom:2px solid var(--mantine-primary-color-filled);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;display:flex}._entryCell_15qzd_395[data-control-column=true]{justify-content:center;padding:0}._entryCell_15qzd_395[data-align=right]{justify-content:flex-end}._entryCell_15qzd_395[data-align=center]{justify-content:center}._matchHighlight_15qzd_422{background-color:var(--dg-match-highlight-bg,var(--lightningcss-light,var(--mantine-color-yellow-2))var(--lightningcss-dark,#fab00559));color:inherit;border-radius:2px}._summaryRow_15qzd_434{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_15qzd_443{padding:0 var(--dg-padding);border-top:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;font-weight:600;display:flex}._summaryCell_15qzd_443[data-control-column=true]{padding:0}._summaryCell_15qzd_443[data-align=right]{justify-content:flex-end}._summaryCell_15qzd_443[data-align=center]{justify-content:center}._stickyLeft_1vw51_16:after,._stickyRight_1vw51_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_1vw51_16:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);left:100%}._stickyRight_1vw51_17:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);right:100%}@supports (animation-timeline:scroll()){._stickyLeft_1vw51_16:after,._stickyRight_1vw51_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_1vw51_16:after{animation-name:_stickyEdgeIn_1vw51_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_1vw51_17:after{animation-name:_stickyEdgeOut_1vw51_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_1vw51_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_1vw51_1{0%{opacity:1}to{opacity:0}}._headerCell_188ed_1{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-font-size);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;display:flex;position:relative}._headerCell_188ed_1[data-align=right]{justify-content:flex-end}._headerCell_188ed_1[data-align=center]{justify-content:center}._headerCell_188ed_1[data-control-column=true]{padding:0}._headerCellFiltered_188ed_35 ._headerTitle_188ed_35{color:var(--mantine-primary-color-filled)}._headerTitle_188ed_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_188ed_1[data-align=right] ._headerTitle_188ed_35{text-align:right}._headerCell_188ed_1[data-align=center] ._headerTitle_188ed_35{justify-content:center;display:flex}._headerActions_188ed_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_188ed_1[data-align=right] ._headerActions_188ed_58{order:-1;margin-left:0;margin-right:auto}._headerAction_188ed_58{display:none}._headerCell_188ed_1:hover ._headerAction_188ed_58,._headerCell_188ed_1:focus-within ._headerAction_188ed_58,._headerAction_188ed_58[data-pinned-visible=true]{display:flex}._headerCellSortable_188ed_87{cursor:pointer}._sortAction_188ed_93[data-sorted=false]{opacity:.55}._sortAction_188ed_93[data-sorted=false]:hover{opacity:1}._sortIndex_188ed_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_188ed_115{opacity:.4}._headerCellDropBefore_188ed_119:before,._headerCellDropAfter_188ed_120:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_188ed_119:before{left:0}._headerCellDropAfter_188ed_120:before{right:0}._columnSeparator_188ed_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_188ed_152{cursor:col-resize;touch-action:none}._columnSeparator_188ed_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_188ed_1:hover ._columnSeparator_188ed_140:after,._headerCell_188ed_1:focus-within ._columnSeparator_188ed_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_188ed_152:hover:after,._columnSeparatorActive_188ed_175:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_188ed_181{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_4my8t_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_4my8t_10{flex:1}
+._root_1wvkg_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_1wvkg_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_1wvkg_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_1wvkg_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_1wvkg_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_1wvkg_8{--dg-radius:var(--mantine-radius-md);--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;--dg-row-selected-bg:var(--mantine-primary-color-light);--dg-row-highlight-bg:var(--mantine-primary-color-light-hover);--dg-row-group-bg:var(--mantine-color-body);--dg-row-striped-bg:color-mix(in srgb, var(--mantine-color-text) 3.5%, var(--mantine-color-body));--dg-row-new-bg:color-mix(in srgb, var(--mantine-color-green-6) 8%, var(--mantine-color-body));--dg-z-pinned-cell:2;--dg-z-focused-cell:3;--dg-z-pinned-row:4;--dg-z-pinned-row-pinned-cell:5;--dg-z-summary-row:4;--dg-z-summary-pinned-cell:5;--dg-z-header:6;--dg-z-header-pinned-cell:7;text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--dg-radius);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._columnsPanel_1492o_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_1492o_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_1492o_11{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_1492o_18{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}._detailsToggle_n39tz_3{width:100%;height:100%;color:inherit;justify-content:center;align-items:center;display:flex}._detailsToggle_n39tz_3:hover ._chevron_n39tz_12{color:var(--mantine-color-text)}._chevron_n39tz_12{color:var(--mantine-color-dimmed);align-items:center;transition:transform .12s;display:flex}._chevron_n39tz_12[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_n39tz_12{transition:none}}._tableWrapper_uqiy9_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_uqiy9_10{flex:1;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_uqiy9_21{display:grid}._headerRow_uqiy9_27{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._headerRow_uqiy9_27[data-dg-header-last]:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--dg-header-shadow-color,#00000024), transparent);opacity:0;height:6px;position:absolute;inset:100% 0 auto}@supports (animation-timeline:scroll()){._headerRow_uqiy9_27[data-dg-header-last]:after{animation:linear both _dg-header-shadow_uqiy9_1;animation-timeline:scroll();animation-range:0 24px}}@keyframes _dg-header-shadow_uqiy9_1{0%{opacity:0}to{opacity:1}}._bodyRow_uqiy9_76{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_uqiy9_76[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_uqiy9_76:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_uqiy9_76[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_uqiy9_76[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_uqiy9_76[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_uqiy9_76[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_uqiy9_76[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_uqiy9_76:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_uqiy9_143{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._bodyCell_uqiy9_143[data-control-column=true]{padding:0}._grid_uqiy9_21[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_uqiy9_143[data-selected=true]{background-color:color-mix(in srgb, var(--mantine-primary-color-filled) 14%, var(--row-bg));--dg-edge-top:transparent;--dg-edge-bottom:transparent;--dg-edge-left:transparent;--dg-edge-right:transparent;box-shadow:inset 0 1px 0 0 var(--dg-edge-top), inset 0 -1px 0 0 var(--dg-edge-bottom), inset 1px 0 0 0 var(--dg-edge-left), inset -1px 0 0 0 var(--dg-edge-right)}._bodyCell_uqiy9_143[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_uqiy9_141{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_uqiy9_143[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_uqiy9_243{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorActions_uqiy9_252{flex:none;align-items:center;display:flex}._bodyCell_uqiy9_143[data-dirty],._bodyCell_uqiy9_143[data-invalid]{position:relative}._bodyCell_uqiy9_143[data-dirty]:after,._bodyCell_uqiy9_143[data-invalid]:after{content:"";border:5px solid #0000;border-top-color:var(--mantine-primary-color-filled);border-right-color:var(--mantine-primary-color-filled);position:absolute;top:0;right:0}._bodyCell_uqiy9_143[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_uqiy9_143[data-align=right]{justify-content:flex-end}._bodyCell_uqiy9_143[data-align=center]{justify-content:center}._bodyCell_uqiy9_143[data-align=left] ._cellContent_uqiy9_141{flex:auto}._detailsCell_uqiy9_303{border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);padding:var(--dg-padding);-webkit-user-select:text;user-select:text;cursor:auto;grid-column:1/-1}._messageRow_uqiy9_15{justify-content:center;justify-self:start;align-items:center;gap:var(--mantine-spacing-xs);width:100cqi;padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex;position:sticky;left:0}._bodyRow_uqiy9_76[data-deleted=true]{opacity:.55;text-decoration:line-through}._bodyRow_uqiy9_76[data-deleted=true] ._bodyCell_uqiy9_143:not([data-control-column=true]){pointer-events:none}._entryBlock_uqiy9_353{grid-column:1/-1;grid-template-columns:subgrid;top:var(--dg-header-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._entryRow_uqiy9_362,._entryFlowBlock_uqiy9_371{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_uqiy9_384{grid-column:1/-1;grid-template-columns:subgrid;top:calc(var(--dg-header-height,0px) + var(--dg-entry-height,0px));z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedTopBlock_uqiy9_384>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_uqiy9_397{grid-column:1/-1;grid-template-columns:subgrid;bottom:var(--dg-summary-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedBottomBlock_uqiy9_397>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_uqiy9_410{padding:0 calc(var(--dg-padding) / 2);border-bottom:2px solid var(--mantine-primary-color-filled);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;display:flex}._entryCell_uqiy9_410[data-control-column=true]{justify-content:center;padding:0}._entryRow_uqiy9_362[data-confirmed=true] ._entryCell_uqiy9_410{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--dg-row-new-bg,var(--mantine-color-body))}._entryRow_uqiy9_362[data-confirmed=true] ._entryCell_uqiy9_410[data-control-column=true]{padding:0}._rowStateIndicator_uqiy9_440{width:22px;height:22px;color:var(--mantine-color-dimmed);flex:none;justify-content:center;align-items:center;display:inline-flex}._rowStateIndicator_uqiy9_440[data-error]{color:var(--mantine-color-error)}._entryCell_uqiy9_410[data-align=right]{justify-content:flex-end}._entryCell_uqiy9_410[data-align=center]{justify-content:center}._matchHighlight_uqiy9_466{background-color:var(--dg-match-highlight-bg,var(--lightningcss-light,var(--mantine-color-yellow-2))var(--lightningcss-dark,#fab00559));color:inherit;border-radius:2px}._summaryRow_uqiy9_478{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_uqiy9_487{padding:0 var(--dg-padding);border-top:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;font-weight:600;display:flex}._summaryCell_uqiy9_487[data-control-column=true]{padding:0}._summaryCell_uqiy9_487[data-align=right]{justify-content:flex-end}._summaryCell_uqiy9_487[data-align=center]{justify-content:center}._groupToggle_1954o_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_1954o_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_1954o_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_1954o_14{transition:none}}._groupLabel_1954o_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_1954o_44{color:var(--mantine-color-dimmed);font-variant-numeric:tabular-nums;flex:none}._filterPanel_izakx_4{top:calc(var(--dg-header-height) + 2px);left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_izakx_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._filterPanelHeader_izakx_22{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-xs);display:flex}._filterPanelFooter_izakx_30{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);display:flex}._filterPills_14wl0_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_14wl0_3 ._pill_14wl0_15{background-color:var(--lightningcss-light,var(--mantine-color-gray-1))var(--lightningcss-dark,var(--mantine-color-dark-5));color:var(--lightningcss-light,var(--mantine-color-black))var(--lightningcss-dark,var(--mantine-color-dark-0));border:1px solid var(--lightningcss-light,var(--mantine-color-gray-3))var(--lightningcss-dark,var(--mantine-color-dark-3))}._pillLabel_14wl0_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_14wl0_27:hover{text-decoration:underline}._footer_te0a3_1{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._footer_te0a3_1[data-paging-suspended=true]{opacity:.55}._stickyLeft_1vw51_16:after,._stickyRight_1vw51_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_1vw51_16:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);left:100%}._stickyRight_1vw51_17:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);right:100%}@supports (animation-timeline:scroll()){._stickyLeft_1vw51_16:after,._stickyRight_1vw51_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_1vw51_16:after{animation-name:_stickyEdgeIn_1vw51_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_1vw51_17:after{animation-name:_stickyEdgeOut_1vw51_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_1vw51_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_1vw51_1{0%{opacity:1}to{opacity:0}}._headerCell_188ed_1{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-font-size);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;display:flex;position:relative}._headerCell_188ed_1[data-align=right]{justify-content:flex-end}._headerCell_188ed_1[data-align=center]{justify-content:center}._headerCell_188ed_1[data-control-column=true]{padding:0}._headerCellFiltered_188ed_35 ._headerTitle_188ed_35{color:var(--mantine-primary-color-filled)}._headerTitle_188ed_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_188ed_1[data-align=right] ._headerTitle_188ed_35{text-align:right}._headerCell_188ed_1[data-align=center] ._headerTitle_188ed_35{justify-content:center;display:flex}._headerActions_188ed_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_188ed_1[data-align=right] ._headerActions_188ed_58{order:-1;margin-left:0;margin-right:auto}._headerAction_188ed_58{display:none}._headerCell_188ed_1:hover ._headerAction_188ed_58,._headerCell_188ed_1:focus-within ._headerAction_188ed_58,._headerAction_188ed_58[data-pinned-visible=true]{display:flex}._headerCellSortable_188ed_87{cursor:pointer}._sortAction_188ed_93[data-sorted=false]{opacity:.55}._sortAction_188ed_93[data-sorted=false]:hover{opacity:1}._sortIndex_188ed_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_188ed_115{opacity:.4}._headerCellDropBefore_188ed_119:before,._headerCellDropAfter_188ed_120:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_188ed_119:before{left:0}._headerCellDropAfter_188ed_120:before{right:0}._columnSeparator_188ed_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_188ed_152{cursor:col-resize;touch-action:none}._columnSeparator_188ed_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_188ed_1:hover ._columnSeparator_188ed_140:after,._headerCell_188ed_1:focus-within ._columnSeparator_188ed_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_188ed_152:hover:after,._columnSeparatorActive_188ed_175:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_188ed_181{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_4my8t_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_4my8t_10{flex:1}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "description": "A React data grid built on TanStack Table v9 and Mantine - always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
   "license": "MIT",
   "type": "module",

package/skills/appearance/SKILL.md

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.0'
+  library_version: '2.0.0-beta.2'
 sources:
   - 'Jielga/TMDataGrid:src/docs/styling.md'
   - 'Jielga/TMDataGrid:src/docs/toolbar.md'
@@ -44,13 +44,15 @@ and selects the size of every Mantine control the grid renders.
 | `xl` | 72px | 60px | `lg` | 18px |
 
 Row height is also required by the virtualizer **as a number**, so it cannot be
-defined in CSS alone. For a height outside the scale set `meta.rowHeight`, not
-the variable. `SIZE_ROW_HEIGHT` is the exported source of these values.
+defined in CSS alone. For a height outside the scale, set `meta.rowHeight`
+rather than the variable. `SIZE_ROW_HEIGHT` is the exported source of these
+values.
 
 ## CSS variables
 
 `style` accepts custom properties and `className` reaches the same element from
-a stylesheet. Both are per instance - a grid is themed without a provider.
+a stylesheet. Both are per instance, so a grid can be themed without a
+provider.
 
 ```tsx
 <TMDataGrid
@@ -62,17 +64,17 @@ a stylesheet. Both are per instance - a grid is themed without a provider.
 
 **Metrics:** `--dg-row-height`, `--dg-header-height`, `--dg-summary-height`,
 `--dg-entry-height`, `--dg-font-size`, `--dg-padding`. All default from `size`.
-The generated lanes are exempt from padding: they are fixed 36px tracks that
+The generated lanes are excluded from padding: they are fixed 36px tracks that
 centre their control.
 
-**Colours:** `--row-bg` (one row's own background - set this, never
+**Colours:** `--row-bg` (one row's own background; set this, never
 `background`), `--dg-row-selected-bg`, `--dg-row-highlight-bg`,
 `--dg-row-striped-bg`, `--dg-row-group-bg`, `--dg-match-highlight-bg`,
 `--dg-header-shadow-color`.
 
 **Layout internals:** `--dg-sticky-edge-range` (`20px`), the `--dg-edge-*`
-markers the grid sets on cell-range borders, and the `--dg-z-*` stacking ladder -
-change those only to slot something of your own between two layers.
+markers the grid sets on cell-range borders, and the `--dg-z-*` stacking order.
+Change those only to place something of your own between two layers.
 
 One stylesheet import, once, anywhere:
 
@@ -87,7 +89,8 @@ two, never both.
 ## Layout
 
 The grid fills the box you give it and scrolls inside it. It does not size
-itself to its content - a virtualized grid has no content height to measure.
+itself to its content, because a virtualized grid has no content height to
+measure.
 
 ```tsx
 <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
@@ -97,16 +100,15 @@ itself to its content - a virtualized grid has no content height to measure.
 </div>
 ```
 
-`minHeight: 0` is the part everyone forgets: a flex item's default
-`min-height: auto` refuses to shrink below its content, so without it the grid
-grows past the viewport instead of scrolling.
+`minHeight: 0` is required: a flex item's default `min-height: auto` will not
+shrink below its content, so without it the grid grows past the viewport instead
+of scrolling.
 
 ## Toolbar
 
-The toolbar is a flex row and nothing more. No slots API, no `actions` prop -
-your buttons sit beside the built-in ones because they are all just children,
-and `TMDataGrid.Spacer` pushes what follows to the right. That is the whole
-layout system.
+The toolbar is a flex row. There is no slots API and no `actions` prop: your
+buttons sit beside the built-in ones because they are all children of the same
+element, and `TMDataGrid.Spacer` pushes what follows to the right.
 
 ```tsx
 <TMDataGrid.Toolbar>
@@ -121,11 +123,11 @@ layout system.
 ```
 
 Each built-in renders nothing when its feature is off, so a read-only grid needs
-no conditionals: `FilterButton` under `enableColumnFilters: false` is simply
-absent.
+no conditionals: `FilterButton` under `enableColumnFilters: false` renders
+nothing at all.
 
-A button of your own reads the grid from context - `{ table, ui, features,
-labels, controlSize, resetSettings }`:
+A button of your own reads the grid from context, which returns
+`{ table, ui, features, labels, controlSize, resetSettings }`:
 
 ```tsx
 import {
@@ -148,9 +150,9 @@ function ExportButton() {
 }
 ```
 
-`getGridCapabilities(table, features)` answers `canSortAny`, `canFilterAny`,
+`getGridCapabilities(table, features)` returns `canSortAny`, `canFilterAny`,
 `canHideAny`, `canPinAny`, `canReorderAny`, `canGroupAny`, `canSelectRows`,
-`canPaginate` and `canSearch`. `getColumnCapabilities(column, features)` answers
+`canPaginate` and `canSearch`. `getColumnCapabilities(column, features)` returns
 the same for one column as `canSort`, `canFilter`, `canHide`, `canPin`,
 `canResize`, `canReorder` and `canGroup`.
 
@@ -158,13 +160,13 @@ the same for one column as `canSort`, `canFilter`, `canHide`, `canPin`,
 
 `features` comes back from `useTMDataGrid` and is re-derived from the options
 object on every render. It is required **in addition to** TanStack's `getCanX()`
-methods because it is what makes the result reactive: `column.getCanSort()` is a
+methods because it is what makes the result reactive. `column.getCanSort()` is a
 method call on a column object whose identity survives an options change, so
 under the React Compiler that call is memoized and a grid whose `enableSorting`
-flipped to `false` would carry on rendering sort indicators. `features` supplies
+changed to `false` would carry on rendering sort indicators. `features` supplies
 a value that changes; `getCanX()` still decides the outcome.
 
-The same rule applies anywhere in your app: read state through
+The same rule applies elsewhere in your application: read state through
 `useSelector(table.store, …)` and options through `features`, rather than
 calling methods on a long-lived object.
 
@@ -180,8 +182,8 @@ import { TMDATAGRID_LABELS_SV } from "@jielga/tmdatagrid";
 const grid = useTMDataGrid({ data, columns, labels: TMDATAGRID_LABELS_SV });
 ```
 
-Labels that carry a value are functions, so a language can put the value where
-its grammar wants it:
+Labels that carry a value are functions, so each language can place the value
+where its grammar requires:
 
 ```tsx
 const labels = {
@@ -190,10 +192,10 @@ const labels = {
 } satisfies TMDataGridLabelsOverride;
 ```
 
-`TMDataGridLabels` is the full dictionary type, which is what makes a new
-translation a typed exercise rather than a guess. The resolved dictionary comes
-back as `grid.labels` and from `useTMDataGridContext().labels`, so a component
-of your own uses the same strings as the built-in chrome.
+`TMDataGridLabels` is the full dictionary type, so a missing key in a new
+translation is a compile error. The resolved dictionary comes back as
+`grid.labels` and from `useTMDataGridContext().labels`, so a component of your
+own uses the same strings as the built-in parts.
 
 ## Common mistakes
 
@@ -229,7 +231,7 @@ Source: `src/docs/styling.md` (Layout).
 ### HIGH Setting `--dg-row-height` to change density
 
 The virtualizer needs the row height as a number, and takes it from
-`meta.rowHeight` or `size` - not from the variable. Setting the variable alone
+`meta.rowHeight` or `size`, not from the variable. Setting the variable alone
 leaves the measurement and the render disagreeing, so rows overlap or gaps open
 as you scroll.
 
@@ -266,8 +268,9 @@ Source: `src/docs/toolbar.md` (Why `features` is a second argument).
 
 ### MEDIUM An inline `labels` object
 
-The chrome re-renders when the labels object changes identity, and an inline
-literal is a new object every render. Keep it at module scope, or `useMemo` it.
+The grid re-renders when the labels object changes identity, and an inline
+literal is a new object on every render. Define it at module scope, or memoize
+it.
 
 Wrong:
 

package/skills/cell-selection/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.0'
+  library_version: '2.0.0-beta.2'
 sources:
   - 'Jielga/TMDataGrid:src/docs/cell-selection.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/cellNavigation.ts'
@@ -24,9 +24,9 @@ sources:
 
 # TMDataGrid - Cell selection
 
-A cell cursor the arrow keys move, a rectangle of cells that can be dragged out,
-and a Ctrl+C that pastes into Excel as cells rather than as one string. Off by
-default.
+A cell cursor moved with the arrow keys, a rectangle of cells that can be
+dragged out, and a Ctrl+C that pastes into Excel as cells rather than as one
+string. Off by default.
 
 ```tsx
 const grid = useTMDataGrid({ data, columns, cellSelection: "range" });
@@ -38,15 +38,15 @@ const grid = useTMDataGrid({ data, columns, cellSelection: "range" });
 | `"single"` | One focused cell, moved with the arrow keys |
 | `"range"` | As `"single"`, plus a rectangle, Ctrl+C and the export menu |
 
-Setting `editMode` defaults `cellSelection` to `"single"`, since editing
+Setting `editing` defaults `cellSelection` to `"single"`, since editing
 navigates by cursor. An explicit `cellSelection` always wins.
 
 Turning it on changes three things about the body:
 
 - The tab stop moves from the row to a cell, so the whole grid is **one** Tab
-  stop and the arrow keys walk it.
+  stop and the arrow keys move within it.
 - The grid reports itself as a `grid` of `gridcell`s rather than a `table` of
-  `cell`s, which is what tells a screen reader those keys are live.
+  `cell`s, which tells a screen reader those keys are live.
 - The focused cell takes `data-focused`, selected ones `data-selected` and
   `data-edge-*`.
 
@@ -97,10 +97,11 @@ cell works either way.
 ## Where the selection lives
 
 `ui.state.focusedCell` is a `{ rowId, columnId }` pair, and `ui.state.cellRange`
-is two of them, the anchor and the moving corner. **Ids rather than indices**, so
-sorting, filtering and column reordering carry the selection with the cells
-instead of leaving it over whatever slid into those positions. A range whose
-corner is filtered away paints nothing, and comes back when the filter lifts.
+is two of them: the anchor and the moving corner. They hold **ids rather than
+indices**, so sorting, filtering and column reordering move the selection with
+the cells instead of leaving it over whatever took those positions. A range
+whose corner is filtered away paints nothing, and returns when the filter is
+cleared.
 
 ```tsx
 const focusedCell = useSelector(grid.ui, (state) => state.focusedCell);
@@ -111,11 +112,10 @@ grid.ui.actions.setFocusedCell({ rowId: "42", columnId: "salary" });
 One rectangle at a time; Ctrl+drag for a second, disjoint block is not
 supported.
 
-The generated lanes (checkbox, tree, details) are part of the selection - they
-take the tint and the outline so the block stays a rectangle - but are never
-*exported*, since they hold controls rather than values. A block covering
-nothing else has nothing to copy, and the Copy and Export items say so by being
-disabled.
+The generated lanes (checkbox, tree, details) are part of the selection: they
+take the tint and the outline so the block stays a rectangle. They are never
+*exported*, because they hold controls rather than values. A block covering
+nothing else has nothing to copy, and the Copy and Export items are disabled.
 
 ## Copy and export
 
@@ -130,7 +130,7 @@ below a divider, so nothing is lost by turning cell selection on.
 
 The CSV is written for a Nordic Excel: a `sep=;` first line, a UTF-8 BOM, CRLF
 endings, semicolons between fields and a comma as the decimal mark. That
-combination is what makes the file open straight into columns with å ä ö intact.
+combination opens straight into columns with å ä ö intact.
 
 ```tsx
 <TMDataGrid.Table
@@ -179,7 +179,7 @@ Source: `src/docs/cell-selection.md` (One tab stop).
 
 The grid reports `grid` and `gridcell` once cell selection is on, so a test or a
 query written against `getByRole("cell")` stops resolving the moment the option
-is set - including when `editMode` turns it on implicitly.
+is set - including when `editing` turns it on implicitly.
 
 Source: `src/docs/cell-selection.md`, and the `testing` skill.
 
@@ -218,7 +218,7 @@ Source: `src/docs/cell-selection.md` (Copy and export).
 
 | Name | Kind | Type | Default | What it does |
 | --- | --- | --- | --- | --- |
-| `cellSelection` | Option | `"none" \| "single" \| "range"` | `"none"`, or `"single"` under `editMode` | Turns the cursor, and the rectangle, on. |
+| `cellSelection` | Option | `"none" \| "single" \| "range"` | `"none"`, or `"single"` under `editing` | Turns the cursor, and the rectangle, on. |
 | `onFocusedCellChange` | Callback | `(cell \| null) => void` | – | Follows the cursor. |
 | `cellExport` | Table prop | `TMDataGridCellExportOptions` | Nordic Excel | Separator, decimal mark, headers, file name. |
 | `ui.state.focusedCell` | UI state | `{ rowId, columnId } \| null` | `null` | The cursor. |

package/skills/columns/SKILL.md

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.0'
+  library_version: '2.0.0-beta.2'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
   - 'Jielga/TMDataGrid:src/docs/column-layout.md'
@@ -69,9 +69,9 @@ column model.
 | `filter` | `TMDataGridColumnFilterOptions` | – | How this column filters. See below. |
 | `edit` | `TMDataGridColumnEditOptions` | – | How this column is edited. See below. |
 
-What the column **is** stays flat; what a stage **does** with it sits in that
-stage's namespace. `type` and `options` are the shared ground both stages read,
-which is why they are not inside either.
+What the column **is** stays flat; what the filter panel and the edit engine do
+with it sits in their namespaces. `type` and `options` are read by both stages,
+which is why they are in neither.
 
 `meta.filter`:
 
@@ -99,7 +99,7 @@ meta: {
 ```
 
 `enableOrdering` lives in `meta` because column ordering is the one feature
-TanStack defines no column option for. `meta.edit` only acts once `editMode` is
+TanStack defines no column option for. `meta.edit` only acts once `editing` is
 set: see the `editing` skill. `meta.filter` belongs to the `filtering` skill.
 
 ### Column types
@@ -246,7 +246,7 @@ asks for it.
 | Checkbox | `SELECT_COLUMN_ID` | Selection is on and the mode has checkboxes |
 | Tree | `GROUP_COLUMN_ID` | A column is grouped |
 | Details | `DETAILS_COLUMN_ID` | `renderDetails` is set |
-| Edit | `EDIT_COLUMN_ID` | Row mode, `onRowDelete`, or batch with `onEditCommitBatch` |
+| Edit | `EDIT_COLUMN_ID` | Row mode, draft mode, or `editing.onRowDelete` |
 
 They are structural: fixed width, no column menu, and they cannot be sorted,
 filtered, resized, re-pinned or moved. The checkbox lane anchors the left pinned
@@ -350,10 +350,10 @@ columnHelper.accessor("priority", { header: "Priority", sortFn: byRank });
 Source: `@tanstack/table-core` `rowSortingFeature.types.d.ts`, and
 `src/tmdatagrid/useTMDataGrid.tsx` (the registered `sortFns`).
 
-### MEDIUM Autosize measured against the whole data set
+### MEDIUM Expecting autosize to measure every row
 
 Autosizing fits the **mounted** rows plus overscan, not every row, because
-virtualization means the rest have no DOM to measure. A column autosized at the
+virtualization leaves the rest with no DOM to measure. A column autosized at the
 top of a long list can be too narrow for a value further down.
 
 Source: `src/docs/column-layout.md` (Autosizing).
@@ -387,7 +387,7 @@ Source: `src/docs/column-layout.md` (Regions).
 | `isColumnReorderable` | Export | `(column, features) => boolean` | – | Whether this column may move at all. |
 | `autosizeColumn` | Export | `({ table, columnId, container }) => void` | – | Fits a column to its mounted content. |
 | `measureColumnContentWidth` | Export | `(args) => number` | – | The measurement behind it. |
-| `getColumnLabel` · `getColumnType` · `getColumnDefaultOperator` · `isControlColumn` | Exports | – | – | What the chrome reads off a column. |
+| `getColumnLabel` · `getColumnType` · `getColumnDefaultOperator` · `isControlColumn` | Exports | – | – | What the built-in controls read off a column. |
 | `SELECT_COLUMN_ID` · `GROUP_COLUMN_ID` · `DETAILS_COLUMN_ID` · `EDIT_COLUMN_ID` · `ROW_NUMBER_COLUMN_ID` | Exports | ids | – | The generated lanes. |
 | `TMDataGrid.ColumnsButton` · `TMDataGrid.ColumnsPanel` | Components | – | – | Manage columns, and Reset layout. |
 

package/skills/data/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.0'
+  library_version: '2.0.0-beta.2'
 sources:
   - 'Jielga/TMDataGrid:src/docs/pagination.md'
   - 'Jielga/TMDataGrid:src/docs/scrolling.md'
@@ -28,8 +28,8 @@ sources:
 ## Pagination
 
 **Off by default.** The grid renders every filtered and sorted row and relies on
-virtualization, which handles any row count - so paging is a choice about how
-the reader navigates, not a performance workaround. Three modes:
+virtualization, which handles any row count. Paging is not needed for
+performance. Three modes:
 
 ```tsx
 // 1. None (default). TMDataGrid.Footer renders nothing.
@@ -50,12 +50,12 @@ const grid = useTMDataGrid({
 ```
 
 Initial page size is 25, through `initialState.pagination`. `enablePagination`
-is one of the two switches the grid defines itself, and the one switch that
+is defined by the grid rather than by TanStack, and is the only grid option that
 defaults to off.
 
 `TMDataGrid.Footer` takes a `renderPagination` slot handed three things: the
-`state` the pager shows, the `actions` it can take, and `Controls` - the
-built-in pieces, already wired.
+`state` the pager shows, the `actions` it can take, and `Controls`, the built-in
+pieces, already wired.
 
 ```tsx
 <TMDataGrid.Footer
@@ -74,35 +74,34 @@ built-in pieces, already wired.
 />
 ```
 
-`Controls.PageSize`, `Controls.Range` and `Controls.Pager` are exactly what the
-default footer renders, in that order - so a custom layout keeps the parts it
-likes rather than rebuilding them to look the same, greying out under a
-suspended pager included.
+`Controls.PageSize`, `Controls.Range` and `Controls.Pager` are what the default
+footer renders, in that order, so a custom layout can keep the parts it wants
+instead of rebuilding them. They behave exactly as before, including greying out
+under a suspended pager.
 
 `state` carries `pageIndex`, `pageSize`, `pageCount`, `rowCount`,
 `canPreviousPage`, `canNextPage`, `from`, `to` and `isPagingActive`. `actions`
 carries `setPageIndex`, `setPageSize`, `previousPage`, `nextPage`, `firstPage`
 and `lastPage`. `getTMDataGridPaginationApi(table)` returns the same
-`{ state, actions }` outside the Footer; `Controls` are bound to the grid
-context, so they exist only inside the slot.
+`{ state, actions }` outside the Footer. `Controls` is bound to the grid
+context, so those components work only inside the slot.
 
-Grouping suspends the pager and wins: it greys out and the range becomes
-`Grouped · all N rows`. `isPagingActive(table, features)` is the live state -
-whether the pager is slicing anything right now - while
+Grouping suspends the pager: it greys out and the range becomes
+`Grouped · all N rows`. `isPagingActive(table, features)` is the live state,
+whether the pager is slicing anything right now, while
 `getGridCapabilities(...).canPaginate` is the configuration. The two differ
-exactly while a grouping is active.
+while a grouping is active.
 
 ## Scrolling
 
-Virtualization is **always on**. There is no flag, no threshold and no "enable
-for large data sets": only the rows within the viewport plus a small overscan
-are ever mounted.
+Virtualization is **always on**. There is no flag and no threshold: only the
+rows within the viewport plus a small overscan are mounted.
 
-`overscan` (default `6`) is the one knob - raise it if a fast scroll flashes
+`overscan` (default `6`) is the only setting: raise it if a fast scroll flashes
 blank rows, lower it when rows are expensive. Row height comes from
 `meta.rowHeight`, or from `size` when that is not set, and rows are **fixed
-height**, so the virtualizer's estimate is exact and the scrollbar is honest.
-Row details are the exception: a row showing a panel is measured after it
+height**, so the virtualizer's estimate is exact and the scrollbar does not
+drift. Row details are the exception: a row showing a panel is measured after it
 mounts.
 
 ```tsx
@@ -117,20 +116,21 @@ const grid = useTMDataGrid({
 grid.scrollToRow({ rowId: "42", align: "center" });
 ```
 
-`scrollToRow` exists because the row may not be mounted, which is exactly what
-`element.scrollIntoView()` cannot handle. `align` is `"start"`, `"center"`,
-`"end"` or `"auto"`. `scrollerRef` is the scroll container itself.
+`scrollToRow` exists because the target row may not be mounted, and
+`element.scrollIntoView()` cannot find an element that is not rendered. `align`
+is `"start"`, `"center"`, `"end"` or `"auto"`. `scrollerRef` is the scroll
+container itself.
 
 `TMDataGrid.Table` reports arrivals at each edge - `onScrollToTop`,
 `onScrollToBottom`, `onScrollToLeft`, `onScrollToRight` - firing **once** on
-arrival rather than on every scroll event. For loading more rows prefer
-`onReachEnd` (the `server-side` skill): it fires rows early rather than at the
-very bottom, and latches per row count so a pending fetch is never asked twice.
+arrival rather than on every scroll event. For loading more rows use
+`onReachEnd` (the `server-side` skill) instead: it fires a number of rows before
+the bottom, and latches per row count so a pending fetch is not requested twice.
 
-Two depth cues are scroll-driven animations on the compositor, with no scroll
-listener and no React render: a shadow under the sticky header once rows scroll
-beneath it, and a band beside a pinned lane while it is actually covering
-something.
+Two depth cues are scroll-driven animations run on the compositor, with no
+scroll listener and no React render: a shadow under the sticky header once rows
+scroll beneath it, and a band beside a pinned lane while it is covering
+content.
 
 ## Empty states
 
@@ -138,12 +138,12 @@ There are four ways to have nothing to show, and an empty body shows exactly one
 of them, in this order:
 
 1. **Loading** - `meta.loading` is true: a centred loader. A grid that is
-   fetching never claims to be empty.
-2. **Entry rows** - an open entry row from `edit.addRow()`: only the entry
-   block, with no message competing with the form.
+   fetching never reports itself as empty.
+2. **Entry rows** - an open entry row from `edit.addRow()`: the entry block
+   only, with no message beside the form.
 3. **`renderEmptyState`** - your node, centred where the message would be.
-4. **Filtered-empty** - a filter or search is active: `labels.noResults`,
-   because this emptiness is the reader's own doing.
+4. **Filtered-empty** - a filter or search is active: `labels.noResults`, since
+   clearing the filter will bring rows back.
 5. **Truly-empty** - no data at all: `labels.noRows`.
 
 `renderEmptyState` replaces the last two with one render prop, and
@@ -163,12 +163,12 @@ of them, in this order:
 />
 ```
 
-An empty grid is where a reader is most likely to be stuck, so it is worth
-giving them the action that unsticks them.
+An empty grid is a good place to offer the action that fills it, such as
+clearing the filters or creating the first record.
 
 The body's loading state only appears while the grid is **empty**. A
-server-driven grid refetching with rows still on screen keeps showing them;
-`TMDataGrid.LoadingIndicator` is the signal for that case, a small spinner while
+server-driven grid refetching with rows still on screen keeps showing them.
+`TMDataGrid.LoadingIndicator` covers that case: a small spinner while
 `meta.loading` is true. `TMDataGrid.SummaryCount` shows visible rows out of
 total, where the total is `meta.totalRowCount` when provided and the pre-filtered
 count otherwise.
@@ -178,17 +178,17 @@ count otherwise.
 ### CRITICAL Turning pagination on to make a large grid fast
 
 Virtualization is already unconditional, so paging a 200 000-row grid changes
-nothing about rendering cost - it only takes navigation away from the reader.
-Reach for it when the reader should move page by page, not for performance.
+nothing about rendering cost. It only changes how users navigate. Enable it when
+they should move page by page, not for performance.
 
 Source: `src/docs/pagination.md`, `src/docs/scrolling.md`.
 
 ### CRITICAL A variable row height
 
 The virtualizer needs one number, and rows are fixed height so the scrollbar
-stays honest. Styling a taller row through CSS leaves the measurement and the
+stays accurate. Styling a taller row through CSS leaves the measurement and the
 render disagreeing: rows overlap or gaps open as you scroll, and the effect
-depends on scroll position, so it looks intermittent.
+depends on scroll position, so it appears intermittent.
 
 Wrong:
 
@@ -215,16 +215,16 @@ Correct:
 grid.scrollToRow({ rowId: "4000", align: "center" });
 ```
 
-`scrollToRow` returns `false` when the row is not in the current view - filtered
-out, on another page, or an id matching no row - and nothing scrolled.
+`scrollToRow` returns `false` when the row is not in the current view (filtered
+out, on another page, or an id matching no row) and nothing scrolled.
 
 Source: `src/docs/scrolling.md` (Scrolling to a row).
 
 ### HIGH Loading more rows from `onScrollToBottom`
 
-It fires at the very bottom, so the reader waits at the end of the list for the
-fetch. `onReachEnd` fires rows early and latches per row count, so a pending
-fetch is never asked twice.
+It fires at the very bottom, so the user waits at the end of the list for the
+fetch. `onReachEnd` fires a number of rows earlier and latches per row count, so
+a pending fetch is not requested twice.
 
 Source: `src/docs/scrolling.md` (Edge callbacks).
 
@@ -249,7 +249,7 @@ Source: `src/docs/loading-and-empty.md` (Counting what is there).
 
 ### MEDIUM Rendering an empty message while data is loading
 
-The order exists so a fetching grid never claims to be empty. A hand-rolled
+The order exists so a fetching grid never reports itself as empty. A hand-rolled
 `data.length === 0 ? <Empty /> : <Grid />` outside the grid flashes "No rows to
 show" on every load.
 
@@ -281,7 +281,7 @@ Source: `src/docs/pagination.md` (Grouping suspends it).
 | `TMDataGrid.Footer` | Component | `pageSizeOptions`, `pagination` | `[10, 25, 50, 100]` | The footer bar. Renders nothing when paging is off. |
 | `Footer` `renderPagination` | Slot | `({ state, actions, Controls }) => ReactNode` | Built-in pager | Replaces the pager, and hands over its pieces. |
 | `getTMDataGridPaginationApi` | Export | `(table) => { state, actions }` | – | The pager API, outside the Footer. |
-| `TMDataGridPaginationState` · `TMDataGridPaginationActions` · `TMDataGridPaginationControls` | Exports | types | – | The three halves of the slot argument. |
+| `TMDataGridPaginationState` · `TMDataGridPaginationActions` · `TMDataGridPaginationControls` | Exports | types | – | The three parts of the slot argument. |
 | `isPagingActive` | Export | `(table, features) => boolean` | – | Whether the pager is slicing anything right now. |
 | `overscan` | Option | `number` | `6` | Rows kept mounted beyond each edge of the viewport. |
 | `meta.rowHeight` | Option | `number` | From `size` | Row height in pixels. The virtualizer needs a number. |
@@ -289,7 +289,7 @@ Source: `src/docs/pagination.md` (Grouping suspends it).
 | `scrollerRef` | Hook return | `RefObject<HTMLDivElement>` | – | The scroll container. |
 | `onScrollToTop` · `onScrollToBottom` · `onScrollToLeft` · `onScrollToRight` | Table props | `() => void` | – | Fire once on arriving at that edge. |
 | `TMDataGridScrollAlign` | Export | `"start" \| "center" \| "end" \| "auto"` | – | The `align` argument. |
-| `meta.loading` | Option | `boolean` | `false` | A fetch is in flight. Outranks every empty message. |
+| `meta.loading` | Option | `boolean` | `false` | A fetch is in flight. Takes precedence over every empty message. |
 | `meta.noResultsLabel` | Option | `string` | `labels.noResults` | The filtered-empty message, without a render prop. |
 | `meta.totalRowCount` | Option | `number` | Pre-filtered count | The total `SummaryCount` reports. |
 | `renderEmptyState` | Table prop | `({ hasActiveFilters, table }) => ReactNode` | – | Replaces both built-in empty messages. |