@cube-dev/ui-kit 0.164.0 → 0.165.0

package/dist/components/data/TableBase/row-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { Children, Fragment, isValidElement } from "react";
 
 //#region src/components/data/TableBase/row-menu.ts

package/dist/components/data/TableBase/styled.d.ts

@@ -2,5 +2,4 @@
 import "../../content/Item/index.js";
 import "../../../data/item-themes.js";
 import "../../../index.js";
-import { Styles } from "@tenphi/tasty";
-import "react";
+import { Styles } from "@tenphi/tasty";

package/dist/components/data/TableBase/styled.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
+import { Action } from "../../actions/Action/Action.js";
 import { keyframes, tasty } from "@tenphi/tasty";
 
 //#region src/components/data/TableBase/styled.ts
@@ -209,6 +210,26 @@ const TableElement = tasty({
 			"#row-text": "#dark-03",
 			$dim: 1
 		},
+		HeaderGroupCell: {
+			$: "> Scroller > Table > Head > HeadRow >",
+			...CELL_STYLES,
+			padding: 0,
+			paddingInline: 0,
+			height: "($header-height + 1bw)",
+			preset: "t3m",
+			border: "1bw #border bottom, $column-divider #border right",
+			fill: "#surface-3",
+			userSelect: "none",
+			position: {
+				"": "relative",
+				"@own(pin=start | pin=end)": "sticky"
+			},
+			overflow: "hidden",
+			zIndex: {
+				"": "auto",
+				"@own(pin=start | pin=end)": 3
+			}
+		},
 		HeaderCell: {
 			$: "> Scroller > Table > Head > HeadRow >",
 			...CELL_STYLES,
@@ -364,6 +385,29 @@ const TableElement = tasty({
 			placeItems: "center",
 			height: "100%"
 		},
+		TreeContent: {
+			$: "> Scroller > Table > Body > Row > Cell >",
+			display: "flex",
+			alignItems: "center",
+			gap: ".5x",
+			minWidth: 0,
+			padding: "left ($tree-indent * 2x)",
+			"$tree-indent": "($tree-level, 0)"
+		},
+		TreeValue: {
+			$: "> Scroller > Table > Body > Row > Cell > TreeContent >",
+			flexGrow: 1,
+			flexShrink: 1,
+			flexBasis: 0,
+			minWidth: 0,
+			overflow: "hidden"
+		},
+		TreeToggle: {
+			$: "> Scroller > Table > Body > Row > Cell > TreeContent >",
+			flexGrow: 0,
+			flexShrink: 0,
+			flexBasis: "auto"
+		},
 		SelectionBox: {
 			$: "> Scroller > Table",
 			display: "flex",
@@ -520,6 +564,35 @@ const TableElement = tasty({
 		}
 	}
 });
+const TREE_TOGGLE_STYLES = {
+	display: "grid",
+	placeItems: "center",
+	placeContent: "center",
+	flexGrow: 0,
+	flexShrink: 0,
+	flexBasis: "auto",
+	width: "3x",
+	height: "3x",
+	radius: true,
+	transition: "theme"
+};
+/** Disclosure control rendered in the configured tree column. */
+const TableTreeToggle = tasty(Action, {
+	qa: "TableTreeToggle",
+	styles: {
+		...TREE_TOGGLE_STYLES,
+		color: {
+			"": "#dark-02",
+			":hover": "#dark"
+		},
+		fill: {
+			"": "#clear",
+			":hover": "#dark.04"
+		}
+	}
+});
+/** Leaf placeholder matching the disclosure control's footprint. */
+const TableTreeTogglePlaceholder = tasty({ styles: TREE_TOGGLE_STYLES });
 /**
 * The header cell's content. `Item` lives INSIDE the `<th>`, never as the `<th>`
 * itself — it emits `aria-selected` unconditionally (`Item.tsx:964`), which on a
@@ -557,5 +630,5 @@ const TableHeaderItem = tasty(_Item, {
 });
 
 //#endregion
-export { TableElement, TableHeaderItem };
+export { TableElement, TableHeaderItem, TableTreeToggle, TableTreeTogglePlaceholder };
 //# sourceMappingURL=styled.js.map

package/dist/components/data/TableBase/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/data/TableBase/styled.ts"],"sourcesContent":["import { keyframes, tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\nimport type { Styles } from '@tenphi/tasty';\n\n/**\n * Geometry shared by the three row groups. They cannot share a sub-element key,\n * so they share a const — the same technique `Item.tsx` uses for\n * `DEFAULT_ICON_STYLES` / `ADDITION_STYLES`.\n */\n/**\n * The refresh sweep: a band of reduced opacity travelling left to right, the\n * way ag-grid marks a grid that is reloading.\n *\n * A mask rather than a coloured overlay, so the band genuinely lowers the\n * content's opacity instead of painting a surface-coloured stripe over it. That\n * costs nothing in theming — the gradient is pure black and alpha, with no\n * colour token to resolve — and it stays correct on any backdrop.\n *\n * `mask-position` runs 100% → 0% because a mask wider than its box moves the\n * OPPOSITE way to the position value: raising it slides the image left, which\n * would send the band right to left.\n */\nconst refreshSweep = keyframes({\n  '0%': { 'mask-position': '100% 0' },\n  '100%': { 'mask-position': '0% 0' },\n});\n\nconst ROW_STYLES: Styles = {\n  // The stretched `rowLink` anchor positions against this.\n  position: 'relative',\n};\n\nconst CELL_STYLES: Styles = {\n  boxSizing: 'border-box',\n  // Row height lives on the CELLS, not the `<tr>`: table layout ignores\n  // `min-height` on a row, and sizes it from its cells instead. `height` on a\n  // cell is treated as a minimum, so a wrapping or auto-height cell still grows\n  // the row.\n  //\n  // Cells are `border-box` and carry the 1px row separator, so the border is\n  // added on top: `$row-height` is the content box, and a default row occupies\n  // 41px in total.\n  height: '($row-height + 1bw)',\n  padding: '$cell-padding-y $cell-padding-x',\n  textAlign: {\n    '': 'start',\n    '@own(align=center)': 'center',\n    '@own(align=end)': 'end',\n  },\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  // An `autoHeight` column wraps and lets its row grow. `height` on a cell is a\n  // minimum in table layout, so the declared row height stays the floor.\n  whiteSpace: { '': 'nowrap', '@own(wrap)': 'normal' },\n  paddingBlock: { '': '$cell-padding-y', '@own(wrap)': '1x' },\n  // The checkbox column is a square affordance, not content: it centres its\n  // control and contributes no inline padding of its own.\n  paddingInline: {\n    '': '$cell-padding-x',\n    '@own(kind=selection) | @own(kind=actions)': 0,\n  },\n  // Pinned cells overlay the scrolling ones, so they must be opaque. Reading\n  // the row's inherited paint tokens means every row state is matched for free\n  // — no duplicated state matrix, no chance of the two drifting apart.\n  // Reading the row's inherited paint tokens means every row state is matched\n  // for free. A selected cell steps out of that and takes a flat accent tint:\n  // without it a wide range is a mesh of per-cell rings rather than one block,\n  // and the row's hover would keep moving underneath a selection the user has\n  // already committed to.\n  /**\n   * One more level of indirection than the row publishes, and the level a\n   * per-column tint plugs into.\n   *\n   * An untinted cell is simply its row. A tinted one swaps its own base and text\n   * — see `column-tint.ts`, which generates a `@own(tint=…)` branch per distinct\n   * column colour and merges it in through `styles.Cell` / `styles.HeaderCell`.\n   *\n   * The tint is pre-composed into the BASE rather than stacked as a second\n   * overlay, because `fill` has exactly two layers and the interaction paint\n   * needs the other one. That is what keeps hover, focus, selection and\n   * drop-target working over a tinted column instead of being displaced by it —\n   * and it is why the row band has to reach the cell (`data-odd` is mirrored onto\n   * body cells) rather than staying on the `<tr>`.\n   */\n  '#cell-base': '#row-base',\n  '#cell-text': '#row-text',\n  fill: {\n    '': '#cell-base #row-overlay',\n    '@own(cell-selected)': '#cell-base #purple.10',\n  },\n  color: '#cell-text',\n  opacity: '$dim',\n  position: { '': 'static', '@own(pin=start | pin=end)': 'sticky' },\n  insetInlineStart: { '': 'auto', '@own(pin=start)': '$pin-offset' },\n  insetInlineEnd: { '': 'auto', '@own(pin=end)': '$pin-offset' },\n  zIndex: { '': 'auto', '@own(pin=start | pin=end)': 1 },\n  // The innermost pinned column needs an edge, or content scrolling underneath\n  // reads as part of the pinned group. An inset box-shadow rather than a border\n  // so it costs no column width, and `#border` rather than `#shadow` so it\n  // matches the row dividers instead of reading as a hard black line on a dark\n  // surface.\n  // The pinned column's edge, and the selected cell's ring. Both are inset\n  // shadows and both share this map, so the two compose rather than one\n  // clobbering the other on a pinned selected cell.\n  //\n  // The ring is a shadow rather than an `outline`: an outline is drawn OUTSIDE\n  // the box, and pulling it back with a negative `outlineOffset` needs a value\n  // tasty will not resolve (`-1bw`), so the ring came out a pixel oversized on\n  // every side — over the row divider above and the column rule to the left. An\n  // inset shadow lands exactly on the cell's own edges and costs no layout.\n  shadow: {\n    '': false,\n    '@own(pin-edge) & @own(pin=start)': 'inset -1bw 0 0 0 #border',\n    '@own(pin-edge) & @own(pin=end)': 'inset 1bw 0 0 0 #border',\n    '@own(cell-selected)': 'inset 0 0 0 1bw #purple',\n    '@own(cell-selected) & @own(pin-edge) & @own(pin=start)':\n      'inset 0 0 0 1bw #purple, inset -1bw 0 0 0 #border',\n    '@own(cell-selected) & @own(pin-edge) & @own(pin=end)':\n      'inset 0 0 0 1bw #purple, inset 1bw 0 0 0 #border',\n  },\n  // The frame's rounded corner, mirrored onto the cell that meets it. Without\n  // it a selected cell there has its ring sliced off at 45°, since the root\n  // clips with a radius. One border-width smaller than the frame's, because the\n  // cell sits inside the frame's own border.\n  radius: {\n    '': 0,\n    // `1cr` is the card radius (`--card-radius`), used directly rather than\n    // aliased onto a token of our own — and emphatically not onto `$radius`,\n    // which is the kit's GLOBAL radius. Declaring that here handed every\n    // Button, Input and Tag rendered inside a cell the card's 10px instead of\n    // the 6px they inherit everywhere else, and took every `1r`/`2r` unit in\n    // the subtree with it.\n    '@own(corner=start)': '(1cr - 1bw) bottom-left',\n    '@own(corner=end)': '(1cr - 1bw) bottom-right',\n  },\n  // The vertical rule, resolved in two steps so the border maps below stay\n  // small. `$column-rule` is the TABLE's answer (root-level `column-dividers`);\n  // this narrows it per cell.\n  //\n  // A WIDTH rather than a colour. A transparent 1px border still occupies its\n  // px: with `border-box` cells that quietly took a pixel of content width from\n  // every column of every table, dividers or not.\n  //\n  // The trailing column is exempt: its rule lands flush against the frame in\n  // `card` shape and reads as a doubled edge, and in `plain` shape it is a line\n  // hanging off the end of the table with nothing after it.\n  '$column-divider': { '': '$column-rule', '@own(last-column)': '0px' },\n  transition: 'fill',\n};\n\nexport const TableElement = tasty({\n  qa: 'Table',\n  styles: {\n    /* ── tokens the root owns ─────────────────────────────────────────── */\n    // Rows are 40px at the default size and the header is one step tighter at\n    // 32px — the proportion the Cloud tables use. Each is the content height;\n    // the 1px separator is added on top (see `CELL_STYLES.height`).\n    '$row-height': {\n      '': '$size-lg',\n      'size=xsmall': '$size-sm',\n      'size=small': '$size-md',\n      'size=large': '$size-xl',\n      'size=xlarge': '7x',\n    },\n    '$header-height': {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n    // 16px. Matches the `cellHorizontalPadding` the Cloud tables ship (ag-grid's\n    // own default is 15px, which is off the 8px grid).\n    '$cell-padding-x': '2x',\n    '$cell-padding-y': 0,\n    '$pin-offset': '0px',\n    $dim: 1,\n    '$link-decoration': 'none',\n    '$resizer-hit': '1x',\n    '$resizer-offset': '-.5x',\n    '$resizer-line-width': '1bw',\n    '#resizer-line': '#clear',\n    // Vertical rules between columns: on for a grid read down a column, off for\n    // a list read across a row. See `TableView`'s `hasColumnDividers`.\n    '$column-rule': { '': '0px', 'column-dividers': '1bw' },\n    // Neutral defaults so a cell rendered outside a row still paints sanely.\n    '#row-base': '#surface',\n    '#row-overlay': '#clear',\n    '#row-text': '#surface-text',\n    // The cell-level pair defaults to the row's, and a tinted column overrides\n    // its own — see `CELL_STYLES`. Declared here too so the chain has a root even\n    // for a cell that is somehow outside a row.\n    '#cell-base': '#row-base',\n    '#cell-text': '#row-text',\n\n    /* ── frame ────────────────────────────────────────────────────────── */\n    display: 'grid',\n    gridRows: 'max-content minmax(0, 1fr) max-content',\n    gridColumns: 'minmax(0, 1fr)',\n    position: 'relative',\n    boxSizing: 'border-box',\n    fill: '#surface',\n    color: '#surface-text',\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': false, 'shape=card': true },\n    overflow: 'hidden',\n    // Bounded by the consumer (`height` / `maxHeight`). There is no page-scroll\n    // mode: an unbounded table simply sizes to its content.\n    height: 'max 100%',\n\n    /* ── the single scroller ──────────────────────────────────────────── */\n    Scroller: {\n      $: '>',\n      gridRow: 2,\n      position: 'relative',\n      overflow: 'auto',\n      /**\n       * No focus ring of its own.\n       *\n       * The scroller takes `tabIndex={-1}` so a cell press can move focus here\n       * and the range's shortcuts (Escape, ⌘/Ctrl+C) have somewhere to land. It\n       * is a mechanism, not a control the user aimed at — but the browser does\n       * not know that, and drew its default `outline: auto` around the whole\n       * scrollport. Three edges are clipped by the frame's `overflow: hidden`,\n       * so what actually shipped was a stray line across the bottom of the\n       * table, right above the footer.\n       *\n       * Nothing is lost by removing it: focus only ever arrives here alongside a\n       * selected cell, and that cell draws its own ring.\n       *\n       * `'none'`, not `false` — tasty reads `false` as \"no ring of the kit's\n       * own\" and emits no declaration at all, which leaves the browser's default\n       * in place. Verified: with `false` the Scroller's rule carried no\n       * `outline` property.\n       */\n      outline: 'none',\n      // A reserved gutter stops an appearing scrollbar from reflowing every\n      // column. With one scroller for head and body there is nothing else to\n      // keep in sync — this is the whole reason for the native-table design.\n      scrollbar: 'thin stable',\n      // Locked per axis, and only on an axis that can actually scroll.\n      //\n      // `none` rather than `contain`: both stop a swipe at the scroll edge from\n      // chaining to the page — which is what keeps a horizontal flick from\n      // triggering browser back-navigation — but `contain` still allows the\n      // rubber-band bounce, and bouncing a table drags its rows away from the\n      // sticky header and shows blank surface behind them.\n      //\n      // The non-scrollable axis stays `auto` on purpose. Chrome applies\n      // overscroll rules to any `overflow: auto` element, including one whose\n      // content fits, so locking both axes unconditionally makes a five-row\n      // table swallow the wheel and pin the page behind it.\n      // While a range drag is in progress the pointer is painting cells, not\n      // text — without this a drag across the grid leaves every cell it passed\n      // highlighted blue underneath the range.\n      userSelect: { '': 'auto', 'range-dragging': 'none' },\n      overscrollBehavior: {\n        '': 'auto',\n        'scroll-x & scroll-y': 'none',\n        'scroll-x & !scroll-y': 'none auto',\n        '!scroll-x & scroll-y': 'auto none',\n      },\n    },\n\n    Table: {\n      $: '> Scroller >',\n      // The whole table fades while a refresh is in flight — header included.\n      // Dimming only the rows left the header at full strength, which read as\n      // though the columns were current and only the data was not.\n      opacity: { '': 1, stale: 0.5 },\n      // `#black` throughout, but only its ALPHA is doing anything: a gradient\n      // mask defaults to `mask-mode: alpha`, so the colour channel is discarded\n      // and `#black.4` is simply \"40% through\". Any opaque token would render\n      // identically — `#black` is the conventional way to write it.\n      maskImage: {\n        '': 'none',\n        stale:\n          'linear-gradient(90deg, #black 0%, #black 35%, #black.4 50%, #black 65%, #black 100%)',\n        // A flat, fully opaque mask is a no-op, so there is nothing to sweep —\n        // the table still fades, it just does not move. A loading state can\n        // last a long time, and this one would otherwise animate continuously\n        // beside the data with no way to stop it. Written as its own gradient\n        // rather than `none` so it cannot merge with the default above.\n        '@media(prefers-reduced-motion)':\n          'linear-gradient(90deg, #black 0%, #black 100%)',\n      },\n      // Three times the width, so the band is a third of the table and there is\n      // an opaque stretch either side of it. The default `repeat` tiles\n      // seamlessly, both ends of the gradient being fully opaque.\n      //\n      // oxlint's `tasty(known-property)` flags this — its property list has\n      // `maskImage` but not `maskSize`, in either spelling. Tasty passes an\n      // unknown key through as raw CSS, so it emits fine: verified computing to\n      // `300% 100%` with the sweep running. The warning is the linter's gap.\n      maskSize: '300% 100%',\n      animation: {\n        '': 'none',\n        stale: `${refreshSweep} 1.4s linear infinite`,\n      },\n      // Belt and braces with the flat mask above, and the same shape `Spin`\n      // already uses.\n      animationPlayState: {\n        '': 'running',\n        '@media(prefers-reduced-motion)': 'paused',\n      },\n      transition: 'opacity',\n      // `fixed` makes `<colgroup>` authoritative, so the header and the body\n      // are guaranteed to agree on every column width.\n      tableLayout: 'fixed',\n      // `separate` is required: with `collapse`, a sticky `<thead>` loses its\n      // borders and they scroll away with the content.\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      // The exact width is set inline from the resolved layout; this is only\n      // the pre-measurement fallback.\n      width: '100%',\n      preset: 't3',\n    },\n\n    /* ── head ─────────────────────────────────────────────────────────── */\n    Head: {\n      $: '> Scroller > Table >',\n      position: { '': 'static', 'sticky-header': 'sticky' },\n      inset: { '': 'auto', 'sticky-header': '0 top' },\n      zIndex: 2,\n    },\n    HeadRow: {\n      $: '> Scroller > Table > Head >',\n      ...ROW_STYLES,\n      // Header rows never carry interaction paint; neutralise the inherited\n      // tokens so nothing can leak in from a row above.\n      '#row-base': '#surface-2',\n      '#row-overlay': '#clear',\n      '#row-text': '#dark-03',\n      $dim: 1,\n    },\n    HeaderCell: {\n      $: '> Scroller > Table > Head > HeadRow >',\n      ...CELL_STYLES,\n      // No padding at all: the `Item` inside fills the cell edge to edge and\n      // supplies the indent itself, per side. That is what lets a leading icon\n      // sit tighter than text and a trailing icon sit flush — see\n      // `TableHeaderItem`.\n      //\n      // `paddingInline` as well as the shorthand: the shared cell styles set\n      // the longhand for the checkbox column, and a longhand arriving through\n      // the spread outlives a `padding: 0` written after it.\n      padding: 0,\n      paddingInline: 0,\n      height: '($header-height + 1bw)',\n      // The header's typography lives here rather than on the `Item`, so a\n      // consumer can restyle it through `headerCellStyles` / `styles.HeaderCell`.\n      // The adapter supplies the real default via `headerPreset`; this is only\n      // the fallback for a `TableView` rendered without one.\n      preset: 't3m',\n      border: '1bw #border bottom, $column-divider #border right',\n      zIndex: { '': 'auto', '@own(pin=start | pin=end)': 3 },\n      // One entry, not two sharing a value: tasty coalesces entries in a state\n      // map that serialize identically, promotes them to the group's maximum\n      // priority and negates them against everything below — see the row state\n      // matrix below and `src/data/AGENTS.md`.\n      fill: {\n        '': '#cell-base #row-overlay',\n        '(@own(sortable) & @own(:hover)) | @own(menu-open)':\n          '#cell-base #surface-text.04',\n      },\n      // `pointer` wins on a sortable header: sorting is the primary action, and a\n      // native drag needs movement while a click does not, so both still work.\n      // `grab` is only honest where there is nothing else to click.\n      cursor: {\n        '': 'default',\n        '@own(sortable)': 'pointer',\n        '@own(draggable) & !@own(sortable)': 'grab',\n        '@own(dragging)': 'grabbing',\n      },\n      // Matches the row being dragged.\n      opacity: { '': 1, '@own(dragging)': 0.4 },\n      userSelect: 'none',\n      // The containing block for `Resizer`. Cells are `static` by default, so\n      // without this every handle resolves against the scroller instead and\n      // they all stack up at its right edge.\n      position: { '': 'relative', '@own(pin=start | pin=end)': 'sticky' },\n      // A cell clips its overflow so a long label cannot bleed into its\n      // neighbour, but the resize handle straddles the boundary on purpose and\n      // would lose its outer half. Only cells that actually have one opt out.\n      overflow: { '': 'hidden', '@own(resizable)': 'visible' },\n      /**\n       * How visible the sort arrow is when the column is NOT sorted — read by\n       * `SortIndicator`.\n       *\n       * Published as an inherited custom property because a sub-element's state\n       * keys resolve against the ROOT, not its DOM parent: from inside\n       * `SortIndicator`, `@own(:hover)` asks whether the 16px arrow itself is\n       * hovered, not the header cell it sits in. Same mechanism as `$dim` and\n       * `$resizer-offset`.\n       *\n       * `:focus-visible` as well as `:hover`, so a keyboard user gets the same\n       * hint. One grouped key rather than two entries sharing `.4`: a state map\n       * whose entries serialize identically gets coalesced and negated.\n       */\n      '$sort-hint': {\n        '': 0,\n        '@own(sortable) & (@own(:hover) | @own(:focus-visible))': 0.4,\n      },\n      // How far the handle hangs past this cell's trailing edge — read by\n      // `Resizer`. Published as an inherited custom property rather than asked\n      // for from the handle with `@parent(...)`: a sub-element's state keys\n      // resolve against the ROOT, so the handle cannot ask about the cell it\n      // sits in (the same reason `#row-base` and `$link-decoration` exist).\n      //\n      // The trailing column has no neighbour to straddle. Left hanging, it puts\n      // half its width past the table and the scroller gains a few pixels of\n      // horizontal scroll onto blank space.\n      '$resizer-offset': { '': '-.5x', '@own(last-column)': '0px' },\n    },\n\n    /**\n     * The column resize handle, on the header cell's trailing edge.\n     *\n     * Positioned with longhands rather than an `inset` shorthand: the\n     * arithmetic form compiled to garbage (`32px -24px 1px 16px`), which put\n     * the handle inside the body and collapsed its height. It sits fully inside\n     * the cell, so there is no negative offset to get wrong.\n     */\n    Resizer: {\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell >',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      // Centred on the boundary rather than tucked inside the cell: a handle\n      // you can only grab from one side of the line is half a target, and the\n      // focus ring would sit visibly off to the left of the edge it resizes.\n      // The offset is half of `$resizer-hit`.\n      right: '$resizer-offset',\n      // A 1px line is impossible to grab, so the hit area is wider than it.\n      width: '$resizer-hit',\n      zIndex: 2,\n      cursor: 'col-resize',\n      touchAction: 'none',\n      outline: {\n        '': 'none',\n        '@own(:focus-visible)': '1bw #focus',\n      },\n      outlineOffset: '1bw',\n\n      /**\n       * The line is a real child, not `&::after`: state maps inside a\n       * pseudo-element block do not compile — `width` and `fill` both came out\n       * empty — so the handle's own state is published as tokens instead, the\n       * same mechanism `#row-base` and `$link-decoration` use.\n       */\n      // Drawn at rest so the handle is discoverable — except when the table\n      // already rules its columns, where the cell's own border is that line and\n      // a second one 4px away reads as a doubled edge. (`column-dividers` has no\n      // `@own`: bare keys resolve against the root, which is where it lives.)\n      '#resizer-line': {\n        '': '#border',\n        'column-dividers': '#clear',\n        '@own(:hover) | @own(:focus-visible)': '#purple',\n      },\n      '$resizer-line-width': {\n        '': '1bw',\n        '@own(:hover) | @own(:focus-visible)': '2bw',\n      },\n    },\n\n    /**\n     * The visible column edge. Drawn at rest rather than only on hover — an\n     * affordance you have to find by hovering an 8px strip is one nobody finds.\n     * A table that rules its columns already draws that edge, so there the line\n     * only appears under the cursor (see `#resizer-line`).\n     */\n    ResizerLine: {\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell > Resizer >',\n      // Absolute rather than flex-aligned: `placeContent` maps to\n      // `align-content justify-content`, so the obvious-looking `'end center'`\n      // silently centred the line instead of ending it.\n      //\n      // Centred inside the handle, which is itself centred on the boundary, so\n      // the line lands exactly on the edge it represents and a thicker hover\n      // state grows evenly to both sides.\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: '50%',\n      translate: '-50% 0',\n      width: '$resizer-line-width',\n      fill: '#resizer-line',\n      transition: 'theme',\n    },\n\n    /**\n     * Where a dragged column would land.\n     *\n     * A distinct sub-element NAME from the row's `DropIndicator` rather than a\n     * second selector chain on the same one: two entries whose chains differ is\n     * exactly the shape that produced an indicator matching nothing at all.\n     *\n     * Positioned fully INSIDE the cell box. `HeaderCell` is `overflow: hidden`\n     * and only opts out to `visible` when it is resizable, so the centred\n     * `translate: -50%` the resizer line uses would lose its outer half on every\n     * non-resizable column.\n     */\n    ColumnDropIndicator: {\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell >',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      width: '2bw',\n      insetInlineStart: { '': 'auto', '@own(position=before)': 0 },\n      insetInlineEnd: { '': 'auto', '@own(position=after)': 0 },\n      fill: '#purple',\n      radius: '1r',\n      // Above the pinned header cell (3) and the resize handle (2).\n      zIndex: 4,\n    },\n\n    /**\n     * Centres the checkbox in its cell. A `<td>` cannot be a flex container\n     * without dropping out of table layout, so the centring lives on a wrapper\n     * inside it.\n     *\n     * Descendant rather than direct-child, so one entry covers both the header\n     * cell and the body cells.\n     */\n    /**\n     * The stretched row link. A `<tr>` cannot be wrapped in an `<a>`, so the\n     * anchor sits in the row-header cell and covers the row through `inset`.\n     * Its text comes from the row-header cell, so the accessible name is the\n     * row's name rather than \"link\".\n     *\n     * Below the cells' own content in the stacking order, so an in-cell button\n     * or menu trigger still takes its own clicks.\n     */\n    RowLink: {\n      $: '> Scroller > Table > Body > Row > Cell >',\n      position: 'absolute',\n      inset: 0,\n      zIndex: 0,\n      // The row already paints hover and focus; the link must add nothing.\n      fill: '#clear',\n      radius: 0,\n      outline: {\n        '': 'none',\n        // Keyboard focus still has to be visible, even though the row is what\n        // the user perceives as focused.\n        focused: '1bw #focus',\n      },\n    },\n\n    /**\n     * The line showing where a dragged row would land.\n     *\n     * Its own row, because a native table cannot hold an arbitrary element\n     * between two rows — the shape `ListBox` uses with `<li>`.\n     *\n     * The row and its cell collapse to nothing and the line is positioned out\n     * of flow, so inserting one mid-drag does not push the rows apart. The line\n     * then sits *over* the divider it replaces rather than beside it.\n     */\n    DropIndicatorRow: {\n      $: '> Scroller > Table > Body >',\n      height: 0,\n    },\n\n    DropIndicatorCell: {\n      $: '> Scroller > Table > Body > DropIndicatorRow >',\n      // Every one of these matters: a `<td>` carries UA padding, and any of\n      // them left in place gives the row real height and shifts the table.\n      padding: 0,\n      border: 0,\n      height: 0,\n      lineHeight: 0,\n      fontSize: 0,\n      // The containing block for the line below.\n      position: 'relative',\n      overflow: 'visible',\n    },\n\n    DropIndicator: {\n      $: '> Scroller > Table > Body > DropIndicatorRow > DropIndicatorCell >',\n      position: 'absolute',\n      insetInlineStart: 0,\n      insetInlineEnd: 0,\n      top: 0,\n      height: '2bw',\n      // Centred on the boundary, so it covers the row divider instead of\n      // sitting above or below it.\n      translate: '0 -50%',\n      fill: '#purple',\n      radius: '1r',\n      zIndex: 3,\n      outline: {\n        '': 'none',\n        // `@own`, not a bare `:focus-visible`: a sub-element's state keys\n        // resolve against the ROOT, so the plain form asked whether the whole\n        // table was focused. This is the keyboard drop target and needs its own.\n        '@own(:focus-visible)': '2bw #purple',\n      },\n      outlineOffset: '1bw',\n    },\n\n    /**\n     * Row numbers. Muted and tabular so they read as a ruler down the side\n     * rather than as a data column competing with the real ones.\n     */\n    RowNumber: {\n      $: '> Scroller > Table > Body > Row > Cell',\n      color: '#surface-text-soft',\n      fontVariantNumeric: 'tabular-nums',\n    },\n\n    /** Wraps the `⋮` trigger so it centres without becoming a table cell box. */\n    RowActions: {\n      $: '> Scroller > Table > Body > Row > Cell >',\n      position: 'relative',\n      // Above `RowLink`, or the stretched anchor would swallow its clicks.\n      zIndex: 1,\n      display: 'flex',\n      placeContent: 'center',\n      placeItems: 'center',\n      height: '100%',\n    },\n\n    SelectionBox: {\n      $: '> Scroller > Table',\n      display: 'flex',\n      placeContent: 'center',\n      placeItems: 'center',\n      height: '100%',\n    },\n\n    /**\n     * The sort arrow. Lives in the header `Item`'s `suffix`, so it participates\n     * in the header's grid rather than overlapping the label. Reserved space\n     * even when unsorted — otherwise the label shifts on every sort.\n     */\n    SortIndicator: {\n      // Descendant, not direct child: the indicator is handed to the header\n      // `Item` as a slot, so it renders inside Item's own `RightIcon` (or\n      // `Suffix`) wrapper rather than directly under the `<th>`.\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell',\n      display: 'grid',\n      placeItems: 'center',\n      width: '2x',\n      height: '2x',\n      color: '#surface-text',\n      // Hovering a sortable header previews the arrow it would get; sorting for\n      // real makes it solid. `$sort-hint` is the header cell's answer — see\n      // there for why this cannot just ask about hover itself.\n      //\n      // The preview points the right way for free: `data-dir` is absent while\n      // unsorted, so the `scale` map below leaves the chevron pointing up, and\n      // the first press of an unsorted column sorts ascending. The hint predicts\n      // the press rather than just advertising that one is possible.\n      opacity: {\n        '': '$sort-hint',\n        '@own(sorted)': 1,\n      },\n      // No `scale` flip any more: `TableView` renders the real\n      // `ArrowNarrowDownIcon` for `desc` rather than turning the up arrow over,\n      // so there is no transform left to animate. `opacity` still is — that is\n      // the hover hint fading in.\n      transition: 'opacity',\n    },\n\n    /* ── body ─────────────────────────────────────────────────────────── */\n    Body: {\n      $: '> Scroller > Table >',\n    },\n    Row: {\n      $: '> Scroller > Table > Body >',\n      ...ROW_STYLES,\n      // `position: relative` (below) is also the containing block for\n      // `RowLink`, which stretches over the whole row from inside the\n      // row-header cell, and for the drop indicator.\n      /**\n       * Totals and subtotals, pinned to the edges of the scroller.\n       *\n       * They live in `<tbody>` so they keep ordinary row styling, so the\n       * stickiness has to be stated here. The top offset is the header's own\n       * height — a pinned row sticks *under* the header, not over it.\n       */\n      position: { '': 'relative', '@own(pinned)': 'sticky' },\n      insetBlockStart: {\n        '': 'auto',\n        '@own(pinned=top)': '($header-height + 1bw)',\n      },\n      insetBlockEnd: { '': 'auto', '@own(pinned=bottom)': 0 },\n      zIndex: { '': 'auto', '@own(pinned)': 1 },\n\n      // The row being dragged, and a row that would receive a drop *on* it.\n      // Landing *between* rows is drawn by `DropIndicator` instead.\n      opacity: { '': 1, '@own(dragging)': 0.4 },\n      // An inset shadow rather than an outline: an outline on a `<tr>` is drawn\n      // outside the row and overlaps its neighbours, and `inside` is not a\n      // modifier `outline` accepts.\n      shadow: {\n        '': false,\n        '@own(drop-target)': 'inset 0 0 0 2bw #purple',\n      },\n      cursor: {\n        '': 'default',\n        '@own(clickable)': 'pointer',\n        '@own(draggable)': 'grab',\n        '@own(dragging)': 'grabbing',\n      },\n\n      /* ─── the row state matrix ─────────────────────────────────────────\n       * Three orthogonal maps rather than one. Deliberate: tasty coalesces\n       * entries in a single state map that share a serialized value, promoting\n       * them to the group's maximum priority and negating them against\n       * everything below — which silently turns a middle-priority compound\n       * rule into FALSE (see src/data/AGENTS.md). A combined\n       * `selected × hovered × focused × disabled × dimmed × odd` map is 64\n       * entries and would be riddled with collisions.\n       *\n       *   1. `odd` lives alone in `#row-base`, with two distinct values.\n       *   2. `dimmed` never appears in a fill map — it drives `$dim`/`#row-text`.\n       *   3. Every value string inside `#row-overlay` is unique.\n       *   4. The bare '' default is exempt from merging, so it may repeat a\n       *      value used elsewhere.\n       * ────────────────────────────────────────────────────────────────── */\n      '#row-base': {\n        '': '#surface',\n        '@own(odd)': '#surface-2',\n        // Opaque and distinct, because scrolling rows pass underneath it.\n        '@own(pinned)': '#surface-3',\n      },\n      '#row-overlay': {\n        '': '#surface-text.0',\n        '@own(:hover)': '#surface-text.04',\n        '@own(focused)': '#surface-text.06',\n        '@own(selected)': '#surface-text.09',\n        '@own(selected & :hover)': '#surface-text.12',\n        '@own(drop-target)': '#purple.10',\n        '@own(disabled)': '#surface-text.02',\n      },\n      '#row-text': {\n        '': '#surface-text',\n        '@own(dimmed)': '#surface-text-soft',\n        '@own(disabled)': '#surface-text-soft-2',\n      },\n      $dim: {\n        '': 1,\n        '@own(dimmed)': 0.6,\n      },\n      // Read by a row-header cell that carries a `rowLink`.\n      '$link-decoration': {\n        '': 'none',\n        '@own(:hover)': 'underline',\n      },\n    },\n    Cell: {\n      $: '> Scroller > Table > Body > Row >',\n      ...CELL_STYLES,\n      // A row-header cell is a `<th>`, which the UA renders bold. Weight is the\n      // table's decision, not the tag's — and a UA rule beats inheritance, so it\n      // has to be stated. Deliberately NOT in the shared cell styles: the header\n      // cell is a `<th>` as well, and there this would overwrite the weight its\n      // `preset` sets.\n      fontWeight: {\n        '': 'inherit',\n        // A row-header cell carrying a `rowLink` reads as a link, so it takes\n        // the weight `Link` does — colour alone is easy to miss in a dense\n        // table, and there is nothing else marking the row as navigable.\n        '@own(link)': 600,\n      },\n      color: {\n        '': '#cell-text',\n        '@own(link)': '#purple-text',\n      },\n      // Underline only while the row is hovered, matching how the kit's `Link`\n      // stays undecorated at rest.\n      //\n      // Read from a token the Row publishes rather than asking about the row\n      // from here: a sub-element's state keys resolve against the *root*, and\n      // `@parent(:hover)` did not constrain the rule at all — every linked cell\n      // came out underlined. Custom properties inherit through the DOM and\n      // ignore selector context, which is the same mechanism `$dim` and\n      // `#row-text` already use.\n      textDecoration: {\n        '': 'none',\n        '@own(link)': '$link-decoration',\n      },\n      // A bottom border separates two rows, so the last row has nothing to\n      // separate from. Whenever something else already draws that closing edge\n      // — the frame in `card` shape, or the footer's own top border — the row's\n      // border lands on top of it and reads as one thick 2px line.\n      //\n      // `last-row` is stamped on the cell by the renderer rather than derived\n      // in CSS, for two reasons:\n      //\n      //   1. Virtualization. The window is padded with spacer `<tr>`s, so\n      //      mid-scroll the last *mounted* row is not `:last-child` — the\n      //      trailing spacer is. A structural selector would move the missing\n      //      border around as you scroll; the stamped flag always marks the\n      //      last row of the DATA.\n      //   2. `@parent(:last-child, >)` asks \"is my parent the last child of my\n      //      grandparent\". Asked from the Row that is a question about the\n      //      table body, identical for every row, and an ancestor-constant\n      //      condition inside a mutually-exclusive map silently deletes the\n      //      default's `:not(...)` branch — which is how an earlier attempt\n      //      removed every divider at once. (`@own(:last-child)` is the form\n      //      that varies per row, but see 1.)\n      //\n      // `column-dividers` has no `@own`: a sub-element's bare state keys resolve\n      // against the ROOT, which is exactly right here — the vertical rule is a\n      // property of the table, not of one cell.\n      //\n      // Every value string is distinct, which is what keeps this map safe from\n      // tasty's identical-value merge (see src/data/AGENTS.md). That is also why\n      // the two \"no closing edge\" cases used to be OR'd into one key; the state\n      // row no longer needs it, since it is a `StateCell` rather than a `Cell`.\n      // Two groups, so the horizontal and the vertical rule vary independently:\n      // the trailing group's width is `$column-divider`, which already knows\n      // whether this table rules its columns and whether this is the last one.\n      // Directions a group does not name come out zero-width, which is how the\n      // middle entry drops the bottom edge without touching the rule.\n      //\n      // Three entries, three distinct values — a map whose entries share a\n      // serialized value gets merged and negated against everything below it\n      // (see src/data/AGENTS.md), which is what an exhaustive\n      // dividers × last-column × last-row matrix would have walked into.\n      border: {\n        '': '1bw #border bottom, $column-divider #border right',\n        // The frame or the footer already draws the closing edge; a second one\n        // on top of it reads as a single 2px line.\n        '(shape=card | has-footer) & @own(last-row)':\n          '$column-divider #border right',\n        // A pinned bottom row opens the pinned group, so the divider goes above\n        // it — the last scrolling row has already dropped its own bottom edge,\n        // and a total sitting at the frame's edge needs nothing below.\n        '@own(pinned=bottom)': '1bw #border top, $column-divider #border right',\n      },\n    },\n\n    /**\n     * The single full-span cell that carries the empty / no-results / error\n     * content.\n     *\n     * Deliberately NOT a `Cell`: a `Cell` paints `#row-base`/`#row-overlay`, so\n     * the state content picked up the row's banding and hover fill and lit up\n     * under the cursor as though it were a row of data to click. It is not a\n     * row, so it does not read the row's paint tokens at all.\n     */\n    StateCell: {\n      $: '> Scroller > Table > Body > Row >',\n      boxSizing: 'border-box',\n      fill: '#surface',\n      color: '#surface-text',\n      border: false,\n      textAlign: 'center',\n      verticalAlign: 'middle',\n    },\n\n    /**\n     * Empty / no-results / error content. Rendered as a full-span cell inside\n     * the table rather than as an absolutely-positioned overlay, so the column\n     * header stays visible and nothing has to be excluded from the scroll area.\n     */\n    StateContent: {\n      $: '> Scroller > Table > Body > Row > StateCell >',\n      display: 'grid',\n      placeItems: 'center',\n      placeContent: 'center',\n      gap: '1x',\n      padding: '8x 2x',\n      preset: 't3',\n      color: '#surface-text-soft',\n      textAlign: 'center',\n    },\n\n    /* ── foot (pinned totals) ─────────────────────────────────────────── */\n    /* ── consumer overlay ─────────────────────────────────────────────── */\n    /**\n     * Sits over the Scroller, not inside it, so it stays put while the rows\n     * underneath remain scrollable and readable.\n     *\n     * A refresh does NOT use this — it sweeps the table itself (see `Table`).\n     * A spinner parked in the middle of the rows covered the very content the\n     * \"keep showing the previous result\" behaviour exists to preserve.\n     */\n    Overlay: {\n      $: '>',\n      gridRow: 2,\n      position: 'absolute',\n      inset: 0,\n      display: 'flex',\n      placeContent: 'center',\n      placeItems: 'center',\n      // No scrim: the body already dims itself, and a second layer of dimming\n      // over the same rows only makes the previous result harder to read — the\n      // one thing this behaviour exists to preserve.\n      zIndex: 3,\n      pointerEvents: 'none',\n    },\n\n    Foot: {\n      $: '> Scroller > Table >',\n      position: 'sticky',\n      inset: '0 bottom',\n      zIndex: 2,\n    },\n    FootRow: {\n      $: '> Scroller > Table > Foot >',\n      ...ROW_STYLES,\n      '#row-base': '#surface-2',\n      '#row-overlay': '#clear',\n      '#row-text': '#surface-text',\n      $dim: 1,\n    },\n    FootCell: {\n      $: '> Scroller > Table > Foot > FootRow >',\n      ...CELL_STYLES,\n      border: '1bw #border top',\n      preset: 't3m',\n    },\n  },\n});\n\n/**\n * The header cell's content. `Item` lives INSIDE the `<th>`, never as the `<th>`\n * itself — it emits `aria-selected` unconditionally (`Item.tsx:964`), which on a\n * `columnheader` would claim the column is selected rather than sorted.\n *\n * Keeping it inside also means the `<th>` owns the interaction fill while\n * `Item` contributes only layout, and — the real prize — `Item`'s `Actions`\n * slot already stops click/pointer/Enter/Space propagation, so pressing a\n * column menu can never trigger the sort.\n */\nexport const TableHeaderItem = tasty(Item, {\n  as: 'div',\n  // Deliberately NOT `type=\"header\"`. That maps Item's preset onto the heading\n  // scale via state rules that outrank a plain override, and it renders the\n  // label as an `<h3>`, which would put every column name into the document\n  // outline.\n  styles: {\n    // `Item` is `inline-grid`; the header cell needs it to fill the `<th>`\n    // horizontally. Same fix as `TreeRowItem` in Tree/styled.ts. Its height is\n    // left alone so it keeps its natural `medium` size rather than stretching\n    // to whatever the row height happens to be.\n    display: 'grid',\n    width: '100%',\n    radius: 0,\n    // `Item` reserves a 1px transparent border for its focus/hover treatments.\n    // The `<th>` owns those here, and the border would inset the label by 1px\n    // against the body cells below.\n    border: 0,\n    // Typography and colour are the header CELL's decision, so they stay\n    // overridable through the table's own `styles`. See `HeaderCell`.\n    preset: 'inherit',\n    color: 'inherit',\n    // Zero: `Item` applies this to the label only, which would indent the label\n    // but not an icon beside it. The padding below sits on the `Item` box\n    // instead, so it moves whatever is actually first in the row.\n    '$inline-padding': 0,\n\n    /**\n     * The indent, per side, chosen for optical rather than geometric alignment.\n     *\n     * Text lines up with the body text below it at the full cell padding. An\n     * icon does not: at this size it is a small, light shape, and the same 16px\n     * reads as a gap — 8px sits right. A trailing icon (the sort arrow) wants\n     * none at all, so it hangs at the column edge rather than floating short of\n     * it.\n     *\n     * The `padding` shorthand rather than `paddingInline`: `Item` writes its own\n     * `padding`, and a shorthand landing after a longhand wipes it — the\n     * longhand form compiled away silently and every column kept the default.\n     *\n     * One map rather than per-side rules so the four combinations stay\n     * explicit, and every value string is distinct — a state map whose entries\n     * share a serialized value gets merged and negated (see\n     * src/data/AGENTS.md).\n     */\n    padding: {\n      '': '0 $cell-padding-x',\n      'has-icon': '1x left, $cell-padding-x right',\n      'has-right-icon': '$cell-padding-x left',\n      'has-icon & has-right-icon': '1x left',\n    },\n    // The `<th>` owns the interaction paint — neutralise Item's own ramp so the\n    // two do not stack.\n    fill: {\n      '': '#clear',\n      hovered: '#clear',\n      pressed: '#clear',\n      selected: '#clear',\n    },\n    // The default `c2` header preset uppercases its text. That is right for the\n    // column name and wrong for the sentence explaining it.\n    Description: { textTransform: 'none' },\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,eAAe,UAAU;CAC7B,MAAM,EAAE,iBAAiB,UAAU;CACnC,QAAQ,EAAE,iBAAiB,QAAQ;CACpC,CAAC;AAEF,MAAM,aAAqB,EAEzB,UAAU,YACX;AAED,MAAM,cAAsB;CAC1B,WAAW;CASX,QAAQ;CACR,SAAS;CACT,WAAW;EACT,IAAI;EACJ,sBAAsB;EACtB,mBAAmB;EACpB;CACD,eAAe;CACf,UAAU;CAGV,YAAY;EAAE,IAAI;EAAU,cAAc;EAAU;CACpD,cAAc;EAAE,IAAI;EAAmB,cAAc;EAAM;CAG3D,eAAe;EACb,IAAI;EACJ,6CAA6C;EAC9C;CAwBD,cAAc;CACd,cAAc;CACd,MAAM;EACJ,IAAI;EACJ,uBAAuB;EACxB;CACD,OAAO;CACP,SAAS;CACT,UAAU;EAAE,IAAI;EAAU,6BAA6B;EAAU;CACjE,kBAAkB;EAAE,IAAI;EAAQ,mBAAmB;EAAe;CAClE,gBAAgB;EAAE,IAAI;EAAQ,iBAAiB;EAAe;CAC9D,QAAQ;EAAE,IAAI;EAAQ,6BAA6B;EAAG;CAetD,QAAQ;EACN,IAAI;EACJ,oCAAoC;EACpC,kCAAkC;EAClC,uBAAuB;EACvB,0DACE;EACF,wDACE;EACH;CAKD,QAAQ;EACN,IAAI;EAOJ,sBAAsB;EACtB,oBAAoB;EACrB;CAYD,mBAAmB;EAAE,IAAI;EAAgB,qBAAqB;EAAO;CACrE,YAAY;CACb;AAED,MAAa,eAAe,MAAM;CAChC,IAAI;CACJ,QAAQ;EAKN,eAAe;GACb,IAAI;GACJ,eAAe;GACf,cAAc;GACd,cAAc;GACd,eAAe;GAChB;EACD,kBAAkB;GAChB,IAAI;GACJ,eAAe;GACf,cAAc;GACd,cAAc;GACd,eAAe;GAChB;EAGD,mBAAmB;EACnB,mBAAmB;EACnB,eAAe;EACf,MAAM;EACN,oBAAoB;EACpB,gBAAgB;EAChB,mBAAmB;EACnB,uBAAuB;EACvB,iBAAiB;EAGjB,gBAAgB;GAAE,IAAI;GAAO,mBAAmB;GAAO;EAEvD,aAAa;EACb,gBAAgB;EAChB,aAAa;EAIb,cAAc;EACd,cAAc;EAGd,SAAS;EACT,UAAU;EACV,aAAa;EACb,UAAU;EACV,WAAW;EACX,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAO;EACtC,QAAQ;GAAE,IAAI;GAAO,cAAc;GAAM;EACzC,UAAU;EAGV,QAAQ;EAGR,UAAU;GACR,GAAG;GACH,SAAS;GACT,UAAU;GACV,UAAU;GAoBV,SAAS;GAIT,WAAW;GAgBX,YAAY;IAAE,IAAI;IAAQ,kBAAkB;IAAQ;GACpD,oBAAoB;IAClB,IAAI;IACJ,uBAAuB;IACvB,wBAAwB;IACxB,wBAAwB;IACzB;GACF;EAED,OAAO;GACL,GAAG;GAIH,SAAS;IAAE,IAAI;IAAG,OAAO;IAAK;GAK9B,WAAW;IACT,IAAI;IACJ,OACE;IAMF,kCACE;IACH;GASD,UAAU;GACV,WAAW;IACT,IAAI;IACJ,OAAO,GAAG,aAAa;IACxB;GAGD,oBAAoB;IAClB,IAAI;IACJ,kCAAkC;IACnC;GACD,YAAY;GAGZ,aAAa;GAGb,gBAAgB;GAChB,eAAe;GAGf,OAAO;GACP,QAAQ;GACT;EAGD,MAAM;GACJ,GAAG;GACH,UAAU;IAAE,IAAI;IAAU,iBAAiB;IAAU;GACrD,OAAO;IAAE,IAAI;IAAQ,iBAAiB;IAAS;GAC/C,QAAQ;GACT;EACD,SAAS;GACP,GAAG;GACH,GAAG;GAGH,aAAa;GACb,gBAAgB;GAChB,aAAa;GACb,MAAM;GACP;EACD,YAAY;GACV,GAAG;GACH,GAAG;GASH,SAAS;GACT,eAAe;GACf,QAAQ;GAKR,QAAQ;GACR,QAAQ;GACR,QAAQ;IAAE,IAAI;IAAQ,6BAA6B;IAAG;GAKtD,MAAM;IACJ,IAAI;IACJ,qDACE;IACH;GAID,QAAQ;IACN,IAAI;IACJ,kBAAkB;IAClB,qCAAqC;IACrC,kBAAkB;IACnB;GAED,SAAS;IAAE,IAAI;IAAG,kBAAkB;IAAK;GACzC,YAAY;GAIZ,UAAU;IAAE,IAAI;IAAY,6BAA6B;IAAU;GAInE,UAAU;IAAE,IAAI;IAAU,mBAAmB;IAAW;GAexD,cAAc;IACZ,IAAI;IACJ,0DAA0D;IAC3D;GAUD,mBAAmB;IAAE,IAAI;IAAQ,qBAAqB;IAAO;GAC9D;EAUD,SAAS;GACP,GAAG;GACH,UAAU;GACV,KAAK;GACL,QAAQ;GAKR,OAAO;GAEP,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,aAAa;GACb,SAAS;IACP,IAAI;IACJ,wBAAwB;IACzB;GACD,eAAe;GAYf,iBAAiB;IACf,IAAI;IACJ,mBAAmB;IACnB,uCAAuC;IACxC;GACD,uBAAuB;IACrB,IAAI;IACJ,uCAAuC;IACxC;GACF;EAQD,aAAa;GACX,GAAG;GAQH,UAAU;GACV,KAAK;GACL,QAAQ;GACR,MAAM;GACN,WAAW;GACX,OAAO;GACP,MAAM;GACN,YAAY;GACb;EAcD,qBAAqB;GACnB,GAAG;GACH,UAAU;GACV,KAAK;GACL,QAAQ;GACR,OAAO;GACP,kBAAkB;IAAE,IAAI;IAAQ,yBAAyB;IAAG;GAC5D,gBAAgB;IAAE,IAAI;IAAQ,wBAAwB;IAAG;GACzD,MAAM;GACN,QAAQ;GAER,QAAQ;GACT;EAmBD,SAAS;GACP,GAAG;GACH,UAAU;GACV,OAAO;GACP,QAAQ;GAER,MAAM;GACN,QAAQ;GACR,SAAS;IACP,IAAI;IAGJ,SAAS;IACV;GACF;EAYD,kBAAkB;GAChB,GAAG;GACH,QAAQ;GACT;EAED,mBAAmB;GACjB,GAAG;GAGH,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,YAAY;GACZ,UAAU;GAEV,UAAU;GACV,UAAU;GACX;EAED,eAAe;GACb,GAAG;GACH,UAAU;GACV,kBAAkB;GAClB,gBAAgB;GAChB,KAAK;GACL,QAAQ;GAGR,WAAW;GACX,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,SAAS;IACP,IAAI;IAIJ,wBAAwB;IACzB;GACD,eAAe;GAChB;EAMD,WAAW;GACT,GAAG;GACH,OAAO;GACP,oBAAoB;GACrB;EAGD,YAAY;GACV,GAAG;GACH,UAAU;GAEV,QAAQ;GACR,SAAS;GACT,cAAc;GACd,YAAY;GACZ,QAAQ;GACT;EAED,cAAc;GACZ,GAAG;GACH,SAAS;GACT,cAAc;GACd,YAAY;GACZ,QAAQ;GACT;EAOD,eAAe;GAIb,GAAG;GACH,SAAS;GACT,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,OAAO;GASP,SAAS;IACP,IAAI;IACJ,gBAAgB;IACjB;GAKD,YAAY;GACb;EAGD,MAAM,EACJ,GAAG,wBACJ;EACD,KAAK;GACH,GAAG;GACH,GAAG;GAWH,UAAU;IAAE,IAAI;IAAY,gBAAgB;IAAU;GACtD,iBAAiB;IACf,IAAI;IACJ,oBAAoB;IACrB;GACD,eAAe;IAAE,IAAI;IAAQ,uBAAuB;IAAG;GACvD,QAAQ;IAAE,IAAI;IAAQ,gBAAgB;IAAG;GAIzC,SAAS;IAAE,IAAI;IAAG,kBAAkB;IAAK;GAIzC,QAAQ;IACN,IAAI;IACJ,qBAAqB;IACtB;GACD,QAAQ;IACN,IAAI;IACJ,mBAAmB;IACnB,mBAAmB;IACnB,kBAAkB;IACnB;GAiBD,aAAa;IACX,IAAI;IACJ,aAAa;IAEb,gBAAgB;IACjB;GACD,gBAAgB;IACd,IAAI;IACJ,gBAAgB;IAChB,iBAAiB;IACjB,kBAAkB;IAClB,2BAA2B;IAC3B,qBAAqB;IACrB,kBAAkB;IACnB;GACD,aAAa;IACX,IAAI;IACJ,gBAAgB;IAChB,kBAAkB;IACnB;GACD,MAAM;IACJ,IAAI;IACJ,gBAAgB;IACjB;GAED,oBAAoB;IAClB,IAAI;IACJ,gBAAgB;IACjB;GACF;EACD,MAAM;GACJ,GAAG;GACH,GAAG;GAMH,YAAY;IACV,IAAI;IAIJ,cAAc;IACf;GACD,OAAO;IACL,IAAI;IACJ,cAAc;IACf;GAUD,gBAAgB;IACd,IAAI;IACJ,cAAc;IACf;GAwCD,QAAQ;IACN,IAAI;IAGJ,8CACE;IAIF,uBAAuB;IACxB;GACF;EAWD,WAAW;GACT,GAAG;GACH,WAAW;GACX,MAAM;GACN,OAAO;GACP,QAAQ;GACR,WAAW;GACX,eAAe;GAChB;EAOD,cAAc;GACZ,GAAG;GACH,SAAS;GACT,YAAY;GACZ,cAAc;GACd,KAAK;GACL,SAAS;GACT,QAAQ;GACR,OAAO;GACP,WAAW;GACZ;EAYD,SAAS;GACP,GAAG;GACH,SAAS;GACT,UAAU;GACV,OAAO;GACP,SAAS;GACT,cAAc;GACd,YAAY;GAIZ,QAAQ;GACR,eAAe;GAChB;EAED,MAAM;GACJ,GAAG;GACH,UAAU;GACV,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,GAAG;GACH,GAAG;GACH,aAAa;GACb,gBAAgB;GAChB,aAAa;GACb,MAAM;GACP;EACD,UAAU;GACR,GAAG;GACH,GAAG;GACH,QAAQ;GACR,QAAQ;GACT;EACF;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,kBAAkB,MAAMA,OAAM;CACzC,IAAI;CAKJ,QAAQ;EAKN,SAAS;EACT,OAAO;EACP,QAAQ;EAIR,QAAQ;EAGR,QAAQ;EACR,OAAO;EAIP,mBAAmB;EAoBnB,SAAS;GACP,IAAI;GACJ,YAAY;GACZ,kBAAkB;GAClB,6BAA6B;GAC9B;EAGD,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,UAAU;GACX;EAGD,aAAa,EAAE,eAAe,QAAQ;EACvC;CACF,CAAC"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/data/TableBase/styled.ts"],"sourcesContent":["import { keyframes, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../../content/Item';\n\nimport type { Styles } from '@tenphi/tasty';\n\n/**\n * Geometry shared by the three row groups. They cannot share a sub-element key,\n * so they share a const — the same technique `Item.tsx` uses for\n * `DEFAULT_ICON_STYLES` / `ADDITION_STYLES`.\n */\n/**\n * The refresh sweep: a band of reduced opacity travelling left to right, the\n * way ag-grid marks a grid that is reloading.\n *\n * A mask rather than a coloured overlay, so the band genuinely lowers the\n * content's opacity instead of painting a surface-coloured stripe over it. That\n * costs nothing in theming — the gradient is pure black and alpha, with no\n * colour token to resolve — and it stays correct on any backdrop.\n *\n * `mask-position` runs 100% → 0% because a mask wider than its box moves the\n * OPPOSITE way to the position value: raising it slides the image left, which\n * would send the band right to left.\n */\nconst refreshSweep = keyframes({\n  '0%': { 'mask-position': '100% 0' },\n  '100%': { 'mask-position': '0% 0' },\n});\n\nconst ROW_STYLES: Styles = {\n  // The stretched `rowLink` anchor positions against this.\n  position: 'relative',\n};\n\nconst CELL_STYLES: Styles = {\n  boxSizing: 'border-box',\n  // Row height lives on the CELLS, not the `<tr>`: table layout ignores\n  // `min-height` on a row, and sizes it from its cells instead. `height` on a\n  // cell is treated as a minimum, so a wrapping or auto-height cell still grows\n  // the row.\n  //\n  // Cells are `border-box` and carry the 1px row separator, so the border is\n  // added on top: `$row-height` is the content box, and a default row occupies\n  // 41px in total.\n  height: '($row-height + 1bw)',\n  padding: '$cell-padding-y $cell-padding-x',\n  textAlign: {\n    '': 'start',\n    '@own(align=center)': 'center',\n    '@own(align=end)': 'end',\n  },\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  // An `autoHeight` column wraps and lets its row grow. `height` on a cell is a\n  // minimum in table layout, so the declared row height stays the floor.\n  whiteSpace: { '': 'nowrap', '@own(wrap)': 'normal' },\n  paddingBlock: { '': '$cell-padding-y', '@own(wrap)': '1x' },\n  // The checkbox column is a square affordance, not content: it centres its\n  // control and contributes no inline padding of its own.\n  paddingInline: {\n    '': '$cell-padding-x',\n    '@own(kind=selection) | @own(kind=actions)': 0,\n  },\n  // Pinned cells overlay the scrolling ones, so they must be opaque. Reading\n  // the row's inherited paint tokens means every row state is matched for free\n  // — no duplicated state matrix, no chance of the two drifting apart.\n  // Reading the row's inherited paint tokens means every row state is matched\n  // for free. A selected cell steps out of that and takes a flat accent tint:\n  // without it a wide range is a mesh of per-cell rings rather than one block,\n  // and the row's hover would keep moving underneath a selection the user has\n  // already committed to.\n  /**\n   * One more level of indirection than the row publishes, and the level a\n   * per-column tint plugs into.\n   *\n   * An untinted cell is simply its row. A tinted one swaps its own base and text\n   * — see `column-tint.ts`, which generates a `@own(tint=…)` branch per distinct\n   * column colour and merges it in through `styles.Cell` / `styles.HeaderCell`.\n   *\n   * The tint is pre-composed into the BASE rather than stacked as a second\n   * overlay, because `fill` has exactly two layers and the interaction paint\n   * needs the other one. That is what keeps hover, focus, selection and\n   * drop-target working over a tinted column instead of being displaced by it —\n   * and it is why the row band has to reach the cell (`data-odd` is mirrored onto\n   * body cells) rather than staying on the `<tr>`.\n   */\n  '#cell-base': '#row-base',\n  '#cell-text': '#row-text',\n  fill: {\n    '': '#cell-base #row-overlay',\n    '@own(cell-selected)': '#cell-base #purple.10',\n  },\n  color: '#cell-text',\n  opacity: '$dim',\n  position: { '': 'static', '@own(pin=start | pin=end)': 'sticky' },\n  insetInlineStart: { '': 'auto', '@own(pin=start)': '$pin-offset' },\n  insetInlineEnd: { '': 'auto', '@own(pin=end)': '$pin-offset' },\n  zIndex: { '': 'auto', '@own(pin=start | pin=end)': 1 },\n  // The innermost pinned column needs an edge, or content scrolling underneath\n  // reads as part of the pinned group. An inset box-shadow rather than a border\n  // so it costs no column width, and `#border` rather than `#shadow` so it\n  // matches the row dividers instead of reading as a hard black line on a dark\n  // surface.\n  // The pinned column's edge, and the selected cell's ring. Both are inset\n  // shadows and both share this map, so the two compose rather than one\n  // clobbering the other on a pinned selected cell.\n  //\n  // The ring is a shadow rather than an `outline`: an outline is drawn OUTSIDE\n  // the box, and pulling it back with a negative `outlineOffset` needs a value\n  // tasty will not resolve (`-1bw`), so the ring came out a pixel oversized on\n  // every side — over the row divider above and the column rule to the left. An\n  // inset shadow lands exactly on the cell's own edges and costs no layout.\n  shadow: {\n    '': false,\n    '@own(pin-edge) & @own(pin=start)': 'inset -1bw 0 0 0 #border',\n    '@own(pin-edge) & @own(pin=end)': 'inset 1bw 0 0 0 #border',\n    '@own(cell-selected)': 'inset 0 0 0 1bw #purple',\n    '@own(cell-selected) & @own(pin-edge) & @own(pin=start)':\n      'inset 0 0 0 1bw #purple, inset -1bw 0 0 0 #border',\n    '@own(cell-selected) & @own(pin-edge) & @own(pin=end)':\n      'inset 0 0 0 1bw #purple, inset 1bw 0 0 0 #border',\n  },\n  // The frame's rounded corner, mirrored onto the cell that meets it. Without\n  // it a selected cell there has its ring sliced off at 45°, since the root\n  // clips with a radius. One border-width smaller than the frame's, because the\n  // cell sits inside the frame's own border.\n  radius: {\n    '': 0,\n    // `1cr` is the card radius (`--card-radius`), used directly rather than\n    // aliased onto a token of our own — and emphatically not onto `$radius`,\n    // which is the kit's GLOBAL radius. Declaring that here handed every\n    // Button, Input and Tag rendered inside a cell the card's 10px instead of\n    // the 6px they inherit everywhere else, and took every `1r`/`2r` unit in\n    // the subtree with it.\n    '@own(corner=start)': '(1cr - 1bw) bottom-left',\n    '@own(corner=end)': '(1cr - 1bw) bottom-right',\n  },\n  // The vertical rule, resolved in two steps so the border maps below stay\n  // small. `$column-rule` is the TABLE's answer (root-level `column-dividers`);\n  // this narrows it per cell.\n  //\n  // A WIDTH rather than a colour. A transparent 1px border still occupies its\n  // px: with `border-box` cells that quietly took a pixel of content width from\n  // every column of every table, dividers or not.\n  //\n  // The trailing column is exempt: its rule lands flush against the frame in\n  // `card` shape and reads as a doubled edge, and in `plain` shape it is a line\n  // hanging off the end of the table with nothing after it.\n  '$column-divider': { '': '$column-rule', '@own(last-column)': '0px' },\n  transition: 'fill',\n};\n\nexport const TableElement = tasty({\n  qa: 'Table',\n  styles: {\n    /* ── tokens the root owns ─────────────────────────────────────────── */\n    // Rows are 40px at the default size and the header is one step tighter at\n    // 32px — the proportion the Cloud tables use. Each is the content height;\n    // the 1px separator is added on top (see `CELL_STYLES.height`).\n    '$row-height': {\n      '': '$size-lg',\n      'size=xsmall': '$size-sm',\n      'size=small': '$size-md',\n      'size=large': '$size-xl',\n      'size=xlarge': '7x',\n    },\n    '$header-height': {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n    // 16px. Matches the `cellHorizontalPadding` the Cloud tables ship (ag-grid's\n    // own default is 15px, which is off the 8px grid).\n    '$cell-padding-x': '2x',\n    '$cell-padding-y': 0,\n    '$pin-offset': '0px',\n    $dim: 1,\n    '$link-decoration': 'none',\n    '$resizer-hit': '1x',\n    '$resizer-offset': '-.5x',\n    '$resizer-line-width': '1bw',\n    '#resizer-line': '#clear',\n    // Vertical rules between columns: on for a grid read down a column, off for\n    // a list read across a row. See `TableView`'s `hasColumnDividers`.\n    '$column-rule': { '': '0px', 'column-dividers': '1bw' },\n    // Neutral defaults so a cell rendered outside a row still paints sanely.\n    '#row-base': '#surface',\n    '#row-overlay': '#clear',\n    '#row-text': '#surface-text',\n    // The cell-level pair defaults to the row's, and a tinted column overrides\n    // its own — see `CELL_STYLES`. Declared here too so the chain has a root even\n    // for a cell that is somehow outside a row.\n    '#cell-base': '#row-base',\n    '#cell-text': '#row-text',\n\n    /* ── frame ────────────────────────────────────────────────────────── */\n    display: 'grid',\n    gridRows: 'max-content minmax(0, 1fr) max-content',\n    gridColumns: 'minmax(0, 1fr)',\n    position: 'relative',\n    boxSizing: 'border-box',\n    fill: '#surface',\n    color: '#surface-text',\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': false, 'shape=card': true },\n    overflow: 'hidden',\n    // Bounded by the consumer (`height` / `maxHeight`). There is no page-scroll\n    // mode: an unbounded table simply sizes to its content.\n    height: 'max 100%',\n\n    /* ── the single scroller ──────────────────────────────────────────── */\n    Scroller: {\n      $: '>',\n      gridRow: 2,\n      position: 'relative',\n      overflow: 'auto',\n      /**\n       * No focus ring of its own.\n       *\n       * The scroller takes `tabIndex={-1}` so a cell press can move focus here\n       * and the range's shortcuts (Escape, ⌘/Ctrl+C) have somewhere to land. It\n       * is a mechanism, not a control the user aimed at — but the browser does\n       * not know that, and drew its default `outline: auto` around the whole\n       * scrollport. Three edges are clipped by the frame's `overflow: hidden`,\n       * so what actually shipped was a stray line across the bottom of the\n       * table, right above the footer.\n       *\n       * Nothing is lost by removing it: focus only ever arrives here alongside a\n       * selected cell, and that cell draws its own ring.\n       *\n       * `'none'`, not `false` — tasty reads `false` as \"no ring of the kit's\n       * own\" and emits no declaration at all, which leaves the browser's default\n       * in place. Verified: with `false` the Scroller's rule carried no\n       * `outline` property.\n       */\n      outline: 'none',\n      // A reserved gutter stops an appearing scrollbar from reflowing every\n      // column. With one scroller for head and body there is nothing else to\n      // keep in sync — this is the whole reason for the native-table design.\n      scrollbar: 'thin stable',\n      // Locked per axis, and only on an axis that can actually scroll.\n      //\n      // `none` rather than `contain`: both stop a swipe at the scroll edge from\n      // chaining to the page — which is what keeps a horizontal flick from\n      // triggering browser back-navigation — but `contain` still allows the\n      // rubber-band bounce, and bouncing a table drags its rows away from the\n      // sticky header and shows blank surface behind them.\n      //\n      // The non-scrollable axis stays `auto` on purpose. Chrome applies\n      // overscroll rules to any `overflow: auto` element, including one whose\n      // content fits, so locking both axes unconditionally makes a five-row\n      // table swallow the wheel and pin the page behind it.\n      // While a range drag is in progress the pointer is painting cells, not\n      // text — without this a drag across the grid leaves every cell it passed\n      // highlighted blue underneath the range.\n      userSelect: { '': 'auto', 'range-dragging': 'none' },\n      overscrollBehavior: {\n        '': 'auto',\n        'scroll-x & scroll-y': 'none',\n        'scroll-x & !scroll-y': 'none auto',\n        '!scroll-x & scroll-y': 'auto none',\n      },\n    },\n\n    Table: {\n      $: '> Scroller >',\n      // The whole table fades while a refresh is in flight — header included.\n      // Dimming only the rows left the header at full strength, which read as\n      // though the columns were current and only the data was not.\n      opacity: { '': 1, stale: 0.5 },\n      // `#black` throughout, but only its ALPHA is doing anything: a gradient\n      // mask defaults to `mask-mode: alpha`, so the colour channel is discarded\n      // and `#black.4` is simply \"40% through\". Any opaque token would render\n      // identically — `#black` is the conventional way to write it.\n      maskImage: {\n        '': 'none',\n        stale:\n          'linear-gradient(90deg, #black 0%, #black 35%, #black.4 50%, #black 65%, #black 100%)',\n        // A flat, fully opaque mask is a no-op, so there is nothing to sweep —\n        // the table still fades, it just does not move. A loading state can\n        // last a long time, and this one would otherwise animate continuously\n        // beside the data with no way to stop it. Written as its own gradient\n        // rather than `none` so it cannot merge with the default above.\n        '@media(prefers-reduced-motion)':\n          'linear-gradient(90deg, #black 0%, #black 100%)',\n      },\n      // Three times the width, so the band is a third of the table and there is\n      // an opaque stretch either side of it. The default `repeat` tiles\n      // seamlessly, both ends of the gradient being fully opaque.\n      //\n      // oxlint's `tasty(known-property)` flags this — its property list has\n      // `maskImage` but not `maskSize`, in either spelling. Tasty passes an\n      // unknown key through as raw CSS, so it emits fine: verified computing to\n      // `300% 100%` with the sweep running. The warning is the linter's gap.\n      maskSize: '300% 100%',\n      animation: {\n        '': 'none',\n        stale: `${refreshSweep} 1.4s linear infinite`,\n      },\n      // Belt and braces with the flat mask above, and the same shape `Spin`\n      // already uses.\n      animationPlayState: {\n        '': 'running',\n        '@media(prefers-reduced-motion)': 'paused',\n      },\n      transition: 'opacity',\n      // `fixed` makes `<colgroup>` authoritative, so the header and the body\n      // are guaranteed to agree on every column width.\n      tableLayout: 'fixed',\n      // `separate` is required: with `collapse`, a sticky `<thead>` loses its\n      // borders and they scroll away with the content.\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      // The exact width is set inline from the resolved layout; this is only\n      // the pre-measurement fallback.\n      width: '100%',\n      preset: 't3',\n    },\n\n    /* ── head ─────────────────────────────────────────────────────────── */\n    Head: {\n      $: '> Scroller > Table >',\n      position: { '': 'static', 'sticky-header': 'sticky' },\n      inset: { '': 'auto', 'sticky-header': '0 top' },\n      zIndex: 2,\n    },\n    HeadRow: {\n      $: '> Scroller > Table > Head >',\n      ...ROW_STYLES,\n      // Header rows never carry interaction paint; neutralise the inherited\n      // tokens so nothing can leak in from a row above.\n      '#row-base': '#surface-2',\n      '#row-overlay': '#clear',\n      '#row-text': '#dark-03',\n      $dim: 1,\n    },\n    HeaderGroupCell: {\n      $: '> Scroller > Table > Head > HeadRow >',\n      ...CELL_STYLES,\n      padding: 0,\n      paddingInline: 0,\n      height: '($header-height + 1bw)',\n      preset: 't3m',\n      border: '1bw #border bottom, $column-divider #border right',\n      fill: '#surface-3',\n      userSelect: 'none',\n      position: { '': 'relative', '@own(pin=start | pin=end)': 'sticky' },\n      overflow: 'hidden',\n      zIndex: { '': 'auto', '@own(pin=start | pin=end)': 3 },\n    },\n    HeaderCell: {\n      $: '> Scroller > Table > Head > HeadRow >',\n      ...CELL_STYLES,\n      // No padding at all: the `Item` inside fills the cell edge to edge and\n      // supplies the indent itself, per side. That is what lets a leading icon\n      // sit tighter than text and a trailing icon sit flush — see\n      // `TableHeaderItem`.\n      //\n      // `paddingInline` as well as the shorthand: the shared cell styles set\n      // the longhand for the checkbox column, and a longhand arriving through\n      // the spread outlives a `padding: 0` written after it.\n      padding: 0,\n      paddingInline: 0,\n      height: '($header-height + 1bw)',\n      // The header's typography lives here rather than on the `Item`, so a\n      // consumer can restyle it through `headerCellStyles` / `styles.HeaderCell`.\n      // The adapter supplies the real default via `headerPreset`; this is only\n      // the fallback for a `TableView` rendered without one.\n      preset: 't3m',\n      border: '1bw #border bottom, $column-divider #border right',\n      zIndex: { '': 'auto', '@own(pin=start | pin=end)': 3 },\n      // One entry, not two sharing a value: tasty coalesces entries in a state\n      // map that serialize identically, promotes them to the group's maximum\n      // priority and negates them against everything below — see the row state\n      // matrix below and `src/data/AGENTS.md`.\n      fill: {\n        '': '#cell-base #row-overlay',\n        '(@own(sortable) & @own(:hover)) | @own(menu-open)':\n          '#cell-base #surface-text.04',\n      },\n      // `pointer` wins on a sortable header: sorting is the primary action, and a\n      // native drag needs movement while a click does not, so both still work.\n      // `grab` is only honest where there is nothing else to click.\n      cursor: {\n        '': 'default',\n        '@own(sortable)': 'pointer',\n        '@own(draggable) & !@own(sortable)': 'grab',\n        '@own(dragging)': 'grabbing',\n      },\n      // Matches the row being dragged.\n      opacity: { '': 1, '@own(dragging)': 0.4 },\n      userSelect: 'none',\n      // The containing block for `Resizer`. Cells are `static` by default, so\n      // without this every handle resolves against the scroller instead and\n      // they all stack up at its right edge.\n      position: { '': 'relative', '@own(pin=start | pin=end)': 'sticky' },\n      // A cell clips its overflow so a long label cannot bleed into its\n      // neighbour, but the resize handle straddles the boundary on purpose and\n      // would lose its outer half. Only cells that actually have one opt out.\n      overflow: { '': 'hidden', '@own(resizable)': 'visible' },\n      /**\n       * How visible the sort arrow is when the column is NOT sorted — read by\n       * `SortIndicator`.\n       *\n       * Published as an inherited custom property because a sub-element's state\n       * keys resolve against the ROOT, not its DOM parent: from inside\n       * `SortIndicator`, `@own(:hover)` asks whether the 16px arrow itself is\n       * hovered, not the header cell it sits in. Same mechanism as `$dim` and\n       * `$resizer-offset`.\n       *\n       * `:focus-visible` as well as `:hover`, so a keyboard user gets the same\n       * hint. One grouped key rather than two entries sharing `.4`: a state map\n       * whose entries serialize identically gets coalesced and negated.\n       */\n      '$sort-hint': {\n        '': 0,\n        '@own(sortable) & (@own(:hover) | @own(:focus-visible))': 0.4,\n      },\n      // How far the handle hangs past this cell's trailing edge — read by\n      // `Resizer`. Published as an inherited custom property rather than asked\n      // for from the handle with `@parent(...)`: a sub-element's state keys\n      // resolve against the ROOT, so the handle cannot ask about the cell it\n      // sits in (the same reason `#row-base` and `$link-decoration` exist).\n      //\n      // The trailing column has no neighbour to straddle. Left hanging, it puts\n      // half its width past the table and the scroller gains a few pixels of\n      // horizontal scroll onto blank space.\n      '$resizer-offset': { '': '-.5x', '@own(last-column)': '0px' },\n    },\n\n    /**\n     * The column resize handle, on the header cell's trailing edge.\n     *\n     * Positioned with longhands rather than an `inset` shorthand: the\n     * arithmetic form compiled to garbage (`32px -24px 1px 16px`), which put\n     * the handle inside the body and collapsed its height. It sits fully inside\n     * the cell, so there is no negative offset to get wrong.\n     */\n    Resizer: {\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell >',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      // Centred on the boundary rather than tucked inside the cell: a handle\n      // you can only grab from one side of the line is half a target, and the\n      // focus ring would sit visibly off to the left of the edge it resizes.\n      // The offset is half of `$resizer-hit`.\n      right: '$resizer-offset',\n      // A 1px line is impossible to grab, so the hit area is wider than it.\n      width: '$resizer-hit',\n      zIndex: 2,\n      cursor: 'col-resize',\n      touchAction: 'none',\n      outline: {\n        '': 'none',\n        '@own(:focus-visible)': '1bw #focus',\n      },\n      outlineOffset: '1bw',\n\n      /**\n       * The line is a real child, not `&::after`: state maps inside a\n       * pseudo-element block do not compile — `width` and `fill` both came out\n       * empty — so the handle's own state is published as tokens instead, the\n       * same mechanism `#row-base` and `$link-decoration` use.\n       */\n      // Drawn at rest so the handle is discoverable — except when the table\n      // already rules its columns, where the cell's own border is that line and\n      // a second one 4px away reads as a doubled edge. (`column-dividers` has no\n      // `@own`: bare keys resolve against the root, which is where it lives.)\n      '#resizer-line': {\n        '': '#border',\n        'column-dividers': '#clear',\n        '@own(:hover) | @own(:focus-visible)': '#purple',\n      },\n      '$resizer-line-width': {\n        '': '1bw',\n        '@own(:hover) | @own(:focus-visible)': '2bw',\n      },\n    },\n\n    /**\n     * The visible column edge. Drawn at rest rather than only on hover — an\n     * affordance you have to find by hovering an 8px strip is one nobody finds.\n     * A table that rules its columns already draws that edge, so there the line\n     * only appears under the cursor (see `#resizer-line`).\n     */\n    ResizerLine: {\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell > Resizer >',\n      // Absolute rather than flex-aligned: `placeContent` maps to\n      // `align-content justify-content`, so the obvious-looking `'end center'`\n      // silently centred the line instead of ending it.\n      //\n      // Centred inside the handle, which is itself centred on the boundary, so\n      // the line lands exactly on the edge it represents and a thicker hover\n      // state grows evenly to both sides.\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: '50%',\n      translate: '-50% 0',\n      width: '$resizer-line-width',\n      fill: '#resizer-line',\n      transition: 'theme',\n    },\n\n    /**\n     * Where a dragged column would land.\n     *\n     * A distinct sub-element NAME from the row's `DropIndicator` rather than a\n     * second selector chain on the same one: two entries whose chains differ is\n     * exactly the shape that produced an indicator matching nothing at all.\n     *\n     * Positioned fully INSIDE the cell box. `HeaderCell` is `overflow: hidden`\n     * and only opts out to `visible` when it is resizable, so the centred\n     * `translate: -50%` the resizer line uses would lose its outer half on every\n     * non-resizable column.\n     */\n    ColumnDropIndicator: {\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell >',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      width: '2bw',\n      insetInlineStart: { '': 'auto', '@own(position=before)': 0 },\n      insetInlineEnd: { '': 'auto', '@own(position=after)': 0 },\n      fill: '#purple',\n      radius: '1r',\n      // Above the pinned header cell (3) and the resize handle (2).\n      zIndex: 4,\n    },\n\n    /**\n     * Centres the checkbox in its cell. A `<td>` cannot be a flex container\n     * without dropping out of table layout, so the centring lives on a wrapper\n     * inside it.\n     *\n     * Descendant rather than direct-child, so one entry covers both the header\n     * cell and the body cells.\n     */\n    /**\n     * The stretched row link. A `<tr>` cannot be wrapped in an `<a>`, so the\n     * anchor sits in the row-header cell and covers the row through `inset`.\n     * Its text comes from the row-header cell, so the accessible name is the\n     * row's name rather than \"link\".\n     *\n     * Below the cells' own content in the stacking order, so an in-cell button\n     * or menu trigger still takes its own clicks.\n     */\n    RowLink: {\n      $: '> Scroller > Table > Body > Row > Cell >',\n      position: 'absolute',\n      inset: 0,\n      zIndex: 0,\n      // The row already paints hover and focus; the link must add nothing.\n      fill: '#clear',\n      radius: 0,\n      outline: {\n        '': 'none',\n        // Keyboard focus still has to be visible, even though the row is what\n        // the user perceives as focused.\n        focused: '1bw #focus',\n      },\n    },\n\n    /**\n     * The line showing where a dragged row would land.\n     *\n     * Its own row, because a native table cannot hold an arbitrary element\n     * between two rows — the shape `ListBox` uses with `<li>`.\n     *\n     * The row and its cell collapse to nothing and the line is positioned out\n     * of flow, so inserting one mid-drag does not push the rows apart. The line\n     * then sits *over* the divider it replaces rather than beside it.\n     */\n    DropIndicatorRow: {\n      $: '> Scroller > Table > Body >',\n      height: 0,\n    },\n\n    DropIndicatorCell: {\n      $: '> Scroller > Table > Body > DropIndicatorRow >',\n      // Every one of these matters: a `<td>` carries UA padding, and any of\n      // them left in place gives the row real height and shifts the table.\n      padding: 0,\n      border: 0,\n      height: 0,\n      lineHeight: 0,\n      fontSize: 0,\n      // The containing block for the line below.\n      position: 'relative',\n      overflow: 'visible',\n    },\n\n    DropIndicator: {\n      $: '> Scroller > Table > Body > DropIndicatorRow > DropIndicatorCell >',\n      position: 'absolute',\n      insetInlineStart: 0,\n      insetInlineEnd: 0,\n      top: 0,\n      height: '2bw',\n      // Centred on the boundary, so it covers the row divider instead of\n      // sitting above or below it.\n      translate: '0 -50%',\n      fill: '#purple',\n      radius: '1r',\n      zIndex: 3,\n      outline: {\n        '': 'none',\n        // `@own`, not a bare `:focus-visible`: a sub-element's state keys\n        // resolve against the ROOT, so the plain form asked whether the whole\n        // table was focused. This is the keyboard drop target and needs its own.\n        '@own(:focus-visible)': '2bw #purple',\n      },\n      outlineOffset: '1bw',\n    },\n\n    /**\n     * Row numbers. Muted and tabular so they read as a ruler down the side\n     * rather than as a data column competing with the real ones.\n     */\n    RowNumber: {\n      $: '> Scroller > Table > Body > Row > Cell',\n      color: '#surface-text-soft',\n      fontVariantNumeric: 'tabular-nums',\n    },\n\n    /** Wraps the `⋮` trigger so it centres without becoming a table cell box. */\n    RowActions: {\n      $: '> Scroller > Table > Body > Row > Cell >',\n      position: 'relative',\n      // Above `RowLink`, or the stretched anchor would swallow its clicks.\n      zIndex: 1,\n      display: 'flex',\n      placeContent: 'center',\n      placeItems: 'center',\n      height: '100%',\n    },\n\n    /**\n     * Hierarchy chrome inside the consumer-selected tree column. The wrapper\n     * owns indentation so custom renderers, links and text truncation all move\n     * together as one row label.\n     */\n    TreeContent: {\n      $: '> Scroller > Table > Body > Row > Cell >',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '.5x',\n      minWidth: 0,\n      padding: 'left ($tree-indent * 2x)',\n      '$tree-indent': '($tree-level, 0)',\n    },\n\n    TreeValue: {\n      $: '> Scroller > Table > Body > Row > Cell > TreeContent >',\n      flexGrow: 1,\n      flexShrink: 1,\n      flexBasis: 0,\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n\n    TreeToggle: {\n      $: '> Scroller > Table > Body > Row > Cell > TreeContent >',\n      flexGrow: 0,\n      flexShrink: 0,\n      flexBasis: 'auto',\n    },\n\n    SelectionBox: {\n      $: '> Scroller > Table',\n      display: 'flex',\n      placeContent: 'center',\n      placeItems: 'center',\n      height: '100%',\n    },\n\n    /**\n     * The sort arrow. Lives in the header `Item`'s `suffix`, so it participates\n     * in the header's grid rather than overlapping the label. Reserved space\n     * even when unsorted — otherwise the label shifts on every sort.\n     */\n    SortIndicator: {\n      // Descendant, not direct child: the indicator is handed to the header\n      // `Item` as a slot, so it renders inside Item's own `RightIcon` (or\n      // `Suffix`) wrapper rather than directly under the `<th>`.\n      $: '> Scroller > Table > Head > HeadRow > HeaderCell',\n      display: 'grid',\n      placeItems: 'center',\n      width: '2x',\n      height: '2x',\n      color: '#surface-text',\n      // Hovering a sortable header previews the arrow it would get; sorting for\n      // real makes it solid. `$sort-hint` is the header cell's answer — see\n      // there for why this cannot just ask about hover itself.\n      //\n      // The preview points the right way for free: `data-dir` is absent while\n      // unsorted, so the `scale` map below leaves the chevron pointing up, and\n      // the first press of an unsorted column sorts ascending. The hint predicts\n      // the press rather than just advertising that one is possible.\n      opacity: {\n        '': '$sort-hint',\n        '@own(sorted)': 1,\n      },\n      // No `scale` flip any more: `TableView` renders the real\n      // `ArrowNarrowDownIcon` for `desc` rather than turning the up arrow over,\n      // so there is no transform left to animate. `opacity` still is — that is\n      // the hover hint fading in.\n      transition: 'opacity',\n    },\n\n    /* ── body ─────────────────────────────────────────────────────────── */\n    Body: {\n      $: '> Scroller > Table >',\n    },\n    Row: {\n      $: '> Scroller > Table > Body >',\n      ...ROW_STYLES,\n      // `position: relative` (below) is also the containing block for\n      // `RowLink`, which stretches over the whole row from inside the\n      // row-header cell, and for the drop indicator.\n      /**\n       * Totals and subtotals, pinned to the edges of the scroller.\n       *\n       * They live in `<tbody>` so they keep ordinary row styling, so the\n       * stickiness has to be stated here. The top offset is the header's own\n       * height — a pinned row sticks *under* the header, not over it.\n       */\n      position: { '': 'relative', '@own(pinned)': 'sticky' },\n      insetBlockStart: {\n        '': 'auto',\n        '@own(pinned=top)': '($header-height + 1bw)',\n      },\n      insetBlockEnd: { '': 'auto', '@own(pinned=bottom)': 0 },\n      zIndex: { '': 'auto', '@own(pinned)': 1 },\n\n      // The row being dragged, and a row that would receive a drop *on* it.\n      // Landing *between* rows is drawn by `DropIndicator` instead.\n      opacity: { '': 1, '@own(dragging)': 0.4 },\n      // An inset shadow rather than an outline: an outline on a `<tr>` is drawn\n      // outside the row and overlaps its neighbours, and `inside` is not a\n      // modifier `outline` accepts.\n      shadow: {\n        '': false,\n        '@own(drop-target)': 'inset 0 0 0 2bw #purple',\n      },\n      cursor: {\n        '': 'default',\n        '@own(clickable)': 'pointer',\n        '@own(draggable)': 'grab',\n        '@own(dragging)': 'grabbing',\n      },\n\n      /* ─── the row state matrix ─────────────────────────────────────────\n       * Three orthogonal maps rather than one. Deliberate: tasty coalesces\n       * entries in a single state map that share a serialized value, promoting\n       * them to the group's maximum priority and negating them against\n       * everything below — which silently turns a middle-priority compound\n       * rule into FALSE (see src/data/AGENTS.md). A combined\n       * `selected × hovered × focused × disabled × dimmed × odd` map is 64\n       * entries and would be riddled with collisions.\n       *\n       *   1. `odd` lives alone in `#row-base`, with two distinct values.\n       *   2. `dimmed` never appears in a fill map — it drives `$dim`/`#row-text`.\n       *   3. Every value string inside `#row-overlay` is unique.\n       *   4. The bare '' default is exempt from merging, so it may repeat a\n       *      value used elsewhere.\n       * ────────────────────────────────────────────────────────────────── */\n      '#row-base': {\n        '': '#surface',\n        '@own(odd)': '#surface-2',\n        // Opaque and distinct, because scrolling rows pass underneath it.\n        '@own(pinned)': '#surface-3',\n      },\n      '#row-overlay': {\n        '': '#surface-text.0',\n        '@own(:hover)': '#surface-text.04',\n        '@own(focused)': '#surface-text.06',\n        '@own(selected)': '#surface-text.09',\n        '@own(selected & :hover)': '#surface-text.12',\n        '@own(drop-target)': '#purple.10',\n        '@own(disabled)': '#surface-text.02',\n      },\n      '#row-text': {\n        '': '#surface-text',\n        '@own(dimmed)': '#surface-text-soft',\n        '@own(disabled)': '#surface-text-soft-2',\n      },\n      $dim: {\n        '': 1,\n        '@own(dimmed)': 0.6,\n      },\n      // Read by a row-header cell that carries a `rowLink`.\n      '$link-decoration': {\n        '': 'none',\n        '@own(:hover)': 'underline',\n      },\n    },\n    Cell: {\n      $: '> Scroller > Table > Body > Row >',\n      ...CELL_STYLES,\n      // A row-header cell is a `<th>`, which the UA renders bold. Weight is the\n      // table's decision, not the tag's — and a UA rule beats inheritance, so it\n      // has to be stated. Deliberately NOT in the shared cell styles: the header\n      // cell is a `<th>` as well, and there this would overwrite the weight its\n      // `preset` sets.\n      fontWeight: {\n        '': 'inherit',\n        // A row-header cell carrying a `rowLink` reads as a link, so it takes\n        // the weight `Link` does — colour alone is easy to miss in a dense\n        // table, and there is nothing else marking the row as navigable.\n        '@own(link)': 600,\n      },\n      color: {\n        '': '#cell-text',\n        '@own(link)': '#purple-text',\n      },\n      // Underline only while the row is hovered, matching how the kit's `Link`\n      // stays undecorated at rest.\n      //\n      // Read from a token the Row publishes rather than asking about the row\n      // from here: a sub-element's state keys resolve against the *root*, and\n      // `@parent(:hover)` did not constrain the rule at all — every linked cell\n      // came out underlined. Custom properties inherit through the DOM and\n      // ignore selector context, which is the same mechanism `$dim` and\n      // `#row-text` already use.\n      textDecoration: {\n        '': 'none',\n        '@own(link)': '$link-decoration',\n      },\n      // A bottom border separates two rows, so the last row has nothing to\n      // separate from. Whenever something else already draws that closing edge\n      // — the frame in `card` shape, or the footer's own top border — the row's\n      // border lands on top of it and reads as one thick 2px line.\n      //\n      // `last-row` is stamped on the cell by the renderer rather than derived\n      // in CSS, for two reasons:\n      //\n      //   1. Virtualization. The window is padded with spacer `<tr>`s, so\n      //      mid-scroll the last *mounted* row is not `:last-child` — the\n      //      trailing spacer is. A structural selector would move the missing\n      //      border around as you scroll; the stamped flag always marks the\n      //      last row of the DATA.\n      //   2. `@parent(:last-child, >)` asks \"is my parent the last child of my\n      //      grandparent\". Asked from the Row that is a question about the\n      //      table body, identical for every row, and an ancestor-constant\n      //      condition inside a mutually-exclusive map silently deletes the\n      //      default's `:not(...)` branch — which is how an earlier attempt\n      //      removed every divider at once. (`@own(:last-child)` is the form\n      //      that varies per row, but see 1.)\n      //\n      // `column-dividers` has no `@own`: a sub-element's bare state keys resolve\n      // against the ROOT, which is exactly right here — the vertical rule is a\n      // property of the table, not of one cell.\n      //\n      // Every value string is distinct, which is what keeps this map safe from\n      // tasty's identical-value merge (see src/data/AGENTS.md). That is also why\n      // the two \"no closing edge\" cases used to be OR'd into one key; the state\n      // row no longer needs it, since it is a `StateCell` rather than a `Cell`.\n      // Two groups, so the horizontal and the vertical rule vary independently:\n      // the trailing group's width is `$column-divider`, which already knows\n      // whether this table rules its columns and whether this is the last one.\n      // Directions a group does not name come out zero-width, which is how the\n      // middle entry drops the bottom edge without touching the rule.\n      //\n      // Three entries, three distinct values — a map whose entries share a\n      // serialized value gets merged and negated against everything below it\n      // (see src/data/AGENTS.md), which is what an exhaustive\n      // dividers × last-column × last-row matrix would have walked into.\n      border: {\n        '': '1bw #border bottom, $column-divider #border right',\n        // The frame or the footer already draws the closing edge; a second one\n        // on top of it reads as a single 2px line.\n        '(shape=card | has-footer) & @own(last-row)':\n          '$column-divider #border right',\n        // A pinned bottom row opens the pinned group, so the divider goes above\n        // it — the last scrolling row has already dropped its own bottom edge,\n        // and a total sitting at the frame's edge needs nothing below.\n        '@own(pinned=bottom)': '1bw #border top, $column-divider #border right',\n      },\n    },\n\n    /**\n     * The single full-span cell that carries the empty / no-results / error\n     * content.\n     *\n     * Deliberately NOT a `Cell`: a `Cell` paints `#row-base`/`#row-overlay`, so\n     * the state content picked up the row's banding and hover fill and lit up\n     * under the cursor as though it were a row of data to click. It is not a\n     * row, so it does not read the row's paint tokens at all.\n     */\n    StateCell: {\n      $: '> Scroller > Table > Body > Row >',\n      boxSizing: 'border-box',\n      fill: '#surface',\n      color: '#surface-text',\n      border: false,\n      textAlign: 'center',\n      verticalAlign: 'middle',\n    },\n\n    /**\n     * Empty / no-results / error content. Rendered as a full-span cell inside\n     * the table rather than as an absolutely-positioned overlay, so the column\n     * header stays visible and nothing has to be excluded from the scroll area.\n     */\n    StateContent: {\n      $: '> Scroller > Table > Body > Row > StateCell >',\n      display: 'grid',\n      placeItems: 'center',\n      placeContent: 'center',\n      gap: '1x',\n      padding: '8x 2x',\n      preset: 't3',\n      color: '#surface-text-soft',\n      textAlign: 'center',\n    },\n\n    /* ── foot (pinned totals) ─────────────────────────────────────────── */\n    /* ── consumer overlay ─────────────────────────────────────────────── */\n    /**\n     * Sits over the Scroller, not inside it, so it stays put while the rows\n     * underneath remain scrollable and readable.\n     *\n     * A refresh does NOT use this — it sweeps the table itself (see `Table`).\n     * A spinner parked in the middle of the rows covered the very content the\n     * \"keep showing the previous result\" behaviour exists to preserve.\n     */\n    Overlay: {\n      $: '>',\n      gridRow: 2,\n      position: 'absolute',\n      inset: 0,\n      display: 'flex',\n      placeContent: 'center',\n      placeItems: 'center',\n      // No scrim: the body already dims itself, and a second layer of dimming\n      // over the same rows only makes the previous result harder to read — the\n      // one thing this behaviour exists to preserve.\n      zIndex: 3,\n      pointerEvents: 'none',\n    },\n\n    Foot: {\n      $: '> Scroller > Table >',\n      position: 'sticky',\n      inset: '0 bottom',\n      zIndex: 2,\n    },\n    FootRow: {\n      $: '> Scroller > Table > Foot >',\n      ...ROW_STYLES,\n      '#row-base': '#surface-2',\n      '#row-overlay': '#clear',\n      '#row-text': '#surface-text',\n      $dim: 1,\n    },\n    FootCell: {\n      $: '> Scroller > Table > Foot > FootRow >',\n      ...CELL_STYLES,\n      border: '1bw #border top',\n      preset: 't3m',\n    },\n  },\n});\n\nconst TREE_TOGGLE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  flexGrow: 0,\n  flexShrink: 0,\n  flexBasis: 'auto',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/** Disclosure control rendered in the configured tree column. */\nexport const TableTreeToggle = tasty(Action, {\n  qa: 'TableTreeToggle',\n  styles: {\n    ...TREE_TOGGLE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/** Leaf placeholder matching the disclosure control's footprint. */\nexport const TableTreeTogglePlaceholder = tasty({\n  styles: TREE_TOGGLE_STYLES,\n});\n\n/**\n * The header cell's content. `Item` lives INSIDE the `<th>`, never as the `<th>`\n * itself — it emits `aria-selected` unconditionally (`Item.tsx:964`), which on a\n * `columnheader` would claim the column is selected rather than sorted.\n *\n * Keeping it inside also means the `<th>` owns the interaction fill while\n * `Item` contributes only layout, and — the real prize — `Item`'s `Actions`\n * slot already stops click/pointer/Enter/Space propagation, so pressing a\n * column menu can never trigger the sort.\n */\nexport const TableHeaderItem = tasty(Item, {\n  as: 'div',\n  // Deliberately NOT `type=\"header\"`. That maps Item's preset onto the heading\n  // scale via state rules that outrank a plain override, and it renders the\n  // label as an `<h3>`, which would put every column name into the document\n  // outline.\n  styles: {\n    // `Item` is `inline-grid`; the header cell needs it to fill the `<th>`\n    // horizontally. Same fix as `TreeRowItem` in Tree/styled.ts. Its height is\n    // left alone so it keeps its natural `medium` size rather than stretching\n    // to whatever the row height happens to be.\n    display: 'grid',\n    width: '100%',\n    radius: 0,\n    // `Item` reserves a 1px transparent border for its focus/hover treatments.\n    // The `<th>` owns those here, and the border would inset the label by 1px\n    // against the body cells below.\n    border: 0,\n    // Typography and colour are the header CELL's decision, so they stay\n    // overridable through the table's own `styles`. See `HeaderCell`.\n    preset: 'inherit',\n    color: 'inherit',\n    // Zero: `Item` applies this to the label only, which would indent the label\n    // but not an icon beside it. The padding below sits on the `Item` box\n    // instead, so it moves whatever is actually first in the row.\n    '$inline-padding': 0,\n\n    /**\n     * The indent, per side, chosen for optical rather than geometric alignment.\n     *\n     * Text lines up with the body text below it at the full cell padding. An\n     * icon does not: at this size it is a small, light shape, and the same 16px\n     * reads as a gap — 8px sits right. A trailing icon (the sort arrow) wants\n     * none at all, so it hangs at the column edge rather than floating short of\n     * it.\n     *\n     * The `padding` shorthand rather than `paddingInline`: `Item` writes its own\n     * `padding`, and a shorthand landing after a longhand wipes it — the\n     * longhand form compiled away silently and every column kept the default.\n     *\n     * One map rather than per-side rules so the four combinations stay\n     * explicit, and every value string is distinct — a state map whose entries\n     * share a serialized value gets merged and negated (see\n     * src/data/AGENTS.md).\n     */\n    padding: {\n      '': '0 $cell-padding-x',\n      'has-icon': '1x left, $cell-padding-x right',\n      'has-right-icon': '$cell-padding-x left',\n      'has-icon & has-right-icon': '1x left',\n    },\n    // The `<th>` owns the interaction paint — neutralise Item's own ramp so the\n    // two do not stack.\n    fill: {\n      '': '#clear',\n      hovered: '#clear',\n      pressed: '#clear',\n      selected: '#clear',\n    },\n    // The default `c2` header preset uppercases its text. That is right for the\n    // column name and wrong for the sentence explaining it.\n    Description: { textTransform: 'none' },\n  },\n});\n"],"mappings":"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"}

package/dist/components/data/TableBase/table-tree.js

@@ -0,0 +1,129 @@
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
+//#region src/components/data/TableBase/table-tree.ts
+/** Build identity and parent/child indexes without modifying consumer rows. */
+function buildTableTree(rows, getChildren, getKey) {
+	const byKey = /* @__PURE__ */ new Map();
+	const parentOf = /* @__PURE__ */ new Map();
+	const childrenOf = /* @__PURE__ */ new Map();
+	const duplicateKeys = [];
+	const cyclicKeys = [];
+	const visiting = /* @__PURE__ */ new Set();
+	const visitingRows = /* @__PURE__ */ new Set();
+	let sourceIndex = 0;
+	const visit = (input, parentKey, level) => {
+		const output = [];
+		input.forEach((row, siblingIndex) => {
+			const currentSourceIndex = sourceIndex++;
+			const key = getKey(row, currentSourceIndex);
+			if (visiting.has(key) || visitingRows.has(row)) {
+				cyclicKeys.push(key);
+				return;
+			}
+			if (byKey.has(key)) {
+				duplicateKeys.push(key);
+				return;
+			}
+			const node = {
+				key,
+				row,
+				parentKey,
+				level,
+				siblingIndex,
+				siblingCount: input.length,
+				sourceIndex: currentSourceIndex,
+				children: []
+			};
+			byKey.set(key, node);
+			parentOf.set(key, parentKey);
+			visiting.add(key);
+			visitingRows.add(row);
+			node.children = visit(getChildren(row) ?? [], key, level + 1);
+			visiting.delete(key);
+			visitingRows.delete(row);
+			childrenOf.set(key, node.children.map((child) => child.key));
+			output.push(node);
+		});
+		return output;
+	};
+	return {
+		roots: visit(rows, null, 0),
+		byKey,
+		parentOf,
+		childrenOf,
+		duplicateKeys,
+		cyclicKeys
+	};
+}
+function sortTableTree(nodes, compare) {
+	const sorted = nodes.map((node) => ({
+		...node,
+		children: sortTableTree(node.children, compare)
+	})).sort(compare);
+	return sorted.map((node, siblingIndex) => ({
+		...node,
+		siblingIndex,
+		siblingCount: sorted.length
+	}));
+}
+/**
+* Keep matching rows, their ancestor paths, and the complete subtree of a row
+* that matches itself. Every retained branch is opened while filtering so a
+* match can never remain hidden behind a collapsed ancestor.
+*/
+function filterTableTree(nodes, matches) {
+	const forcedExpandedKeys = /* @__PURE__ */ new Set();
+	const cloneComplete = (node) => {
+		const children = node.children.map(cloneComplete);
+		if (children.length) forcedExpandedKeys.add(node.key);
+		return {
+			...node,
+			children: reindexTableTree(children)
+		};
+	};
+	const visit = (node) => {
+		if (matches(node)) return cloneComplete(node);
+		const children = node.children.map(visit).filter((child) => child != null);
+		if (!children.length) return null;
+		forcedExpandedKeys.add(node.key);
+		return {
+			...node,
+			children: reindexTableTree(children)
+		};
+	};
+	return {
+		roots: reindexTableTree(nodes.map(visit).filter((node) => node != null)),
+		forcedExpandedKeys
+	};
+}
+/** Re-number a transformed sibling collection for its rendered treegrid. */
+function reindexTableTree(nodes) {
+	return nodes.map((node, siblingIndex) => ({
+		...node,
+		siblingIndex,
+		siblingCount: nodes.length,
+		children: reindexTableTree(node.children)
+	}));
+}
+function flattenTableTree(nodes, expandedKeys) {
+	const output = [];
+	const visit = (items) => {
+		for (const node of items) {
+			output.push(node);
+			if (expandedKeys == null || expandedKeys.has(node.key)) visit(node.children);
+		}
+	};
+	visit(nodes);
+	return output;
+}
+function isTableTreeDescendant(model, possibleDescendant, ancestor) {
+	let parent = model.parentOf.get(possibleDescendant);
+	while (parent != null) {
+		if (parent === ancestor) return true;
+		parent = model.parentOf.get(parent);
+	}
+	return false;
+}
+
+//#endregion
+export { buildTableTree, filterTableTree, flattenTableTree, isTableTreeDescendant, reindexTableTree, sortTableTree };
+//# sourceMappingURL=table-tree.js.map

package/dist/components/data/TableBase/table-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-tree.js","names":[],"sources":["../../../../src/components/data/TableBase/table-tree.ts"],"sourcesContent":["import type { Key } from '@react-types/shared';\n\nexport interface TableTreeNode<T> {\n  key: Key;\n  row: T;\n  parentKey: Key | null;\n  level: number;\n  siblingIndex: number;\n  siblingCount: number;\n  sourceIndex: number;\n  children: TableTreeNode<T>[];\n}\n\nexport interface TableTreeModel<T> {\n  roots: TableTreeNode<T>[];\n  byKey: Map<Key, TableTreeNode<T>>;\n  parentOf: Map<Key, Key | null>;\n  childrenOf: Map<Key, Key[]>;\n  duplicateKeys: Key[];\n  cyclicKeys: Key[];\n}\n\n/** Build identity and parent/child indexes without modifying consumer rows. */\nexport function buildTableTree<T>(\n  rows: readonly T[],\n  getChildren: (row: T) => readonly T[] | undefined,\n  getKey: (row: T, sourceIndex: number) => Key,\n): TableTreeModel<T> {\n  const byKey = new Map<Key, TableTreeNode<T>>();\n  const parentOf = new Map<Key, Key | null>();\n  const childrenOf = new Map<Key, Key[]>();\n  const duplicateKeys: Key[] = [];\n  const cyclicKeys: Key[] = [];\n  const visiting = new Set<Key>();\n  const visitingRows = new Set<T>();\n  let sourceIndex = 0;\n\n  const visit = (\n    input: readonly T[],\n    parentKey: Key | null,\n    level: number,\n  ): TableTreeNode<T>[] => {\n    const output: TableTreeNode<T>[] = [];\n\n    input.forEach((row, siblingIndex) => {\n      const currentSourceIndex = sourceIndex++;\n      const key = getKey(row, currentSourceIndex);\n\n      if (visiting.has(key) || visitingRows.has(row)) {\n        cyclicKeys.push(key);\n        return;\n      }\n\n      if (byKey.has(key)) {\n        duplicateKeys.push(key);\n        return;\n      }\n\n      const node: TableTreeNode<T> = {\n        key,\n        row,\n        parentKey,\n        level,\n        siblingIndex,\n        siblingCount: input.length,\n        sourceIndex: currentSourceIndex,\n        children: [],\n      };\n\n      byKey.set(key, node);\n      parentOf.set(key, parentKey);\n      visiting.add(key);\n      visitingRows.add(row);\n      node.children = visit(getChildren(row) ?? [], key, level + 1);\n      visiting.delete(key);\n      visitingRows.delete(row);\n      childrenOf.set(\n        key,\n        node.children.map((child) => child.key),\n      );\n      output.push(node);\n    });\n\n    return output;\n  };\n\n  const roots = visit(rows, null, 0);\n\n  return {\n    roots,\n    byKey,\n    parentOf,\n    childrenOf,\n    duplicateKeys,\n    cyclicKeys,\n  };\n}\n\nexport function sortTableTree<T>(\n  nodes: readonly TableTreeNode<T>[],\n  compare: (a: TableTreeNode<T>, b: TableTreeNode<T>) => number,\n): TableTreeNode<T>[] {\n  const sorted = nodes\n    .map((node) => ({\n      ...node,\n      children: sortTableTree(node.children, compare),\n    }))\n    .sort(compare);\n\n  return sorted.map((node, siblingIndex) => ({\n    ...node,\n    siblingIndex,\n    siblingCount: sorted.length,\n  }));\n}\n\nexport interface FilteredTableTree<T> {\n  roots: TableTreeNode<T>[];\n  forcedExpandedKeys: Set<Key>;\n}\n\n/**\n * Keep matching rows, their ancestor paths, and the complete subtree of a row\n * that matches itself. Every retained branch is opened while filtering so a\n * match can never remain hidden behind a collapsed ancestor.\n */\nexport function filterTableTree<T>(\n  nodes: readonly TableTreeNode<T>[],\n  matches: (node: TableTreeNode<T>) => boolean,\n): FilteredTableTree<T> {\n  const forcedExpandedKeys = new Set<Key>();\n\n  const cloneComplete = (node: TableTreeNode<T>): TableTreeNode<T> => {\n    const children = node.children.map(cloneComplete);\n    if (children.length) forcedExpandedKeys.add(node.key);\n\n    return { ...node, children: reindexTableTree(children) };\n  };\n\n  const visit = (node: TableTreeNode<T>): TableTreeNode<T> | null => {\n    if (matches(node)) return cloneComplete(node);\n\n    const children = node.children\n      .map(visit)\n      .filter((child): child is TableTreeNode<T> => child != null);\n\n    if (!children.length) return null;\n\n    forcedExpandedKeys.add(node.key);\n    return { ...node, children: reindexTableTree(children) };\n  };\n\n  return {\n    roots: reindexTableTree(\n      nodes.map(visit).filter((node): node is TableTreeNode<T> => node != null),\n    ),\n    forcedExpandedKeys,\n  };\n}\n\n/** Re-number a transformed sibling collection for its rendered treegrid. */\nexport function reindexTableTree<T>(\n  nodes: readonly TableTreeNode<T>[],\n): TableTreeNode<T>[] {\n  return nodes.map((node, siblingIndex) => ({\n    ...node,\n    siblingIndex,\n    siblingCount: nodes.length,\n    children: reindexTableTree(node.children),\n  }));\n}\n\nexport function flattenTableTree<T>(\n  nodes: readonly TableTreeNode<T>[],\n  expandedKeys?: ReadonlySet<Key>,\n): TableTreeNode<T>[] {\n  const output: TableTreeNode<T>[] = [];\n\n  const visit = (items: readonly TableTreeNode<T>[]) => {\n    for (const node of items) {\n      output.push(node);\n      if (expandedKeys == null || expandedKeys.has(node.key)) {\n        visit(node.children);\n      }\n    }\n  };\n\n  visit(nodes);\n  return output;\n}\n\nexport function tableTreeDescendantKeys<T>(node: TableTreeNode<T>): Key[] {\n  return flattenTableTree(node.children).map((child) => child.key);\n}\n\nexport function isTableTreeDescendant<T>(\n  model: Pick<TableTreeModel<T>, 'parentOf'>,\n  possibleDescendant: Key,\n  ancestor: Key,\n) {\n  let parent = model.parentOf.get(possibleDescendant);\n\n  while (parent != null) {\n    if (parent === ancestor) return true;\n    parent = model.parentOf.get(parent);\n  }\n\n  return false;\n}\n"],"mappings":"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"}

package/dist/components/data/TableBase/types.d.ts

@@ -23,6 +23,47 @@ interface CubeTableCellRange {
   fromColumnKey: string;
   toColumnKey: string;
 }
+interface CubeTableTreeRowState {
+  /** Zero-based depth in the hierarchy. */
+  level: number;
+  parentKey: Key$1 | null;
+  hasChildren: boolean;
+  isExpanded: boolean;
+}
+interface CubeTableRowExpandInfo<T = any> {
+  row: T;
+  rowKey: Key$1;
+  level: number;
+  parentKey: Key$1 | null;
+  expanded: boolean;
+}
+/** Shared root sizing contract used by both table adapters. */
+interface CubeTableLayoutProps {
+  /**
+   * Shrink-wraps the frame to its rendered rows instead of filling the
+   * available flex pane. This mode disables virtualization because there is no
+   * bounded vertical viewport to virtualize against.
+   *
+   * @default false
+   */
+  isAutoHeight?: boolean;
+}
+/** Shared opt-in hierarchy contract used by both table adapters. */
+interface CubeTableTreeProps<T = any> {
+  /**
+   * Returns a row's already-loaded children. Supplying this enables tree mode
+   * and makes `data` the top-level row collection.
+   */
+  getRowChildren?: (row: T) => readonly T[] | undefined;
+  /** Column that owns the indentation and disclosure control. */
+  treeColumnKey?: string;
+  /** Controlled expanded row keys. */
+  expandedKeys?: Key$1[];
+  /** Initially expanded row keys. */
+  defaultExpandedKeys?: Key$1[];
+  /** Called after a user expands or collapses a row. */
+  onExpand?: (keys: Key$1[], info: CubeTableRowExpandInfo<T>) => void;
+}
 interface CubeTableSort {
   /** `key` of the sorted column. */
   columnKey: string;
@@ -49,6 +90,8 @@ interface CubeTableCellContext<T = any> {
    */
   isRowFocused?: boolean;
   isDropTarget?: boolean;
+  /** Present only when `getRowChildren` enables tree mode. */
+  tree?: CubeTableTreeRowState;
 }
 interface CubeTableRowContext<T = any> {
   row: T;
@@ -59,6 +102,8 @@ interface CubeTableRowContext<T = any> {
   /** Not yet wired — always absent. See `CubeTableCellContext` for why. */
   isFocused?: boolean;
   isDropTarget?: boolean;
+  /** Present only when `getRowChildren` enables tree mode. */
+  tree?: CubeTableTreeRowState;
 }
 interface CubeTableHeaderContext {
   columnKey: string;
@@ -254,5 +299,5 @@ type CubeTableSelectionMode = 'none' | 'single' | 'multiple';
  */
 type CubeTableSelectAllMode = 'page' | 'filtered' | 'all';
 //#endregion
-export { CubeTableAlign, CubeTableCellContext, CubeTableCellRange, CubeTableColumn, CubeTableColumnHeader, CubeTableHeaderContext, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableRowSection, CubeTableRowSize, CubeTableSelectAllMode, CubeTableSelectionMode, CubeTableSort, CubeTableSortDirection };
+export { CubeTableAlign, CubeTableCellContext, CubeTableCellRange, CubeTableColumn, CubeTableColumnHeader, CubeTableHeaderContext, CubeTableLayoutProps, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableRowExpandInfo, CubeTableRowSection, CubeTableRowSize, CubeTableSelectAllMode, CubeTableSelectionMode, CubeTableSort, CubeTableSortDirection, CubeTableTreeProps, CubeTableTreeRowState };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/data/TableBase/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 //#region src/components/data/TableBase/types.ts
 /**
 * `asc | desc` rather than React Aria's `ascending | descending`: we do not use