@cube-dev/ui-kit 0.158.0 → 0.159.0

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

@@ -0,0 +1,104 @@
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+import { __Menu } from "../../actions/Menu/Menu.js";
+import { normalizeMenuAction } from "./row-menu.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data/TableBase/column-menu.tsx
+/**
+* Menu keys the table itself honours.
+*
+* Sorting is the only capability the table owns, so it is the only thing that
+* can be a reserved key. `pin` and `hide` deliberately are not: `column.pin` and
+* `column.isHidden` are read-only declarative inputs with no controlled state
+* behind them, and reserving those keys would fix an API in string literals
+* before the state that backs it exists. They stay ordinary consumer keys and
+* are reported through `onColumnMenuAction` like anything else.
+*/
+const COLUMN_MENU_SORT_KEYS = [
+	"sort-asc",
+	"sort-desc",
+	"clear-sort"
+];
+function isColumnMenuSortKey(key) {
+	return COLUMN_MENU_SORT_KEYS.includes(key);
+}
+/** The direction a reserved key asks for. `clear-sort` asks for none. */
+const COLUMN_MENU_SORT_DIRECTION = {
+	"sort-asc": "asc",
+	"sort-desc": "desc",
+	"clear-sort": null
+};
+/**
+* Whether a reserved key would do nothing if pressed.
+*
+* Redundancy is signalled by disabling the item rather than by ticking the
+* active one. A tick would mean `isSelected`, which `MenuItem` only honours when
+* the whole `Menu` runs at `selectionMode !== 'none'` (`MenuItem.tsx:43`) — and
+* switching the menu into a selection mode would turn the consumer's own items
+* into radios too, and could be overridden from `menuProps`. Disabling is local
+* to the item and cannot leak.
+*/
+function isSortKeyRedundant(key, ctx) {
+	if (!ctx.isSortable) return true;
+	if (key === "clear-sort") return ctx.sort == null || ctx.disallowSortRemoval;
+	return ctx.sort === COLUMN_MENU_SORT_DIRECTION[key];
+}
+/**
+* Fills in default labels and disabled state for the reserved sort keys.
+*
+* `Children.forEach` rather than `Children.toArray`, because `toArray` rewrites
+* every key with a `.$` prefix — which breaks `selectedKeys` matching inside
+* `Menu`. Same reason `TabButton` does it this way.
+*
+* A label or an `isDisabled` the consumer wrote always wins; this only supplies
+* what was left out, so `<Menu.Item key="sort-asc" />` is the short form and
+* `<Menu.Item key="sort-asc">Oldest first</Menu.Item>` still says what it says.
+*/
+function processColumnMenuItems(children, ctx) {
+	const result = [];
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) {
+			result.push(child);
+			return;
+		}
+		const element = child;
+		const childProps = element.props;
+		const key = element.key == null ? null : normalizeMenuAction(element.key);
+		if (key != null && isColumnMenuSortKey(key)) {
+			result.push(cloneElement(element, {
+				children: childProps.children ?? ctx.labels[key],
+				isDisabled: childProps.isDisabled ?? isSortKeyRedundant(key, ctx)
+			}));
+			return;
+		}
+		if (childProps.children != null && typeof childProps.children !== "string" && typeof childProps.children !== "number") {
+			result.push(cloneElement(element, { children: processColumnMenuItems(childProps.children, ctx) }));
+			return;
+		}
+		result.push(child);
+	});
+	return result;
+}
+/**
+* The reserved sort items, ready to drop into `header.menu`.
+*
+* ```tsx
+* header: { menu: <>{columnSortMenu()}<Menu.Item key="pin">Pin</Menu.Item></> }
+* ```
+*
+* Exists because `Menu.Item` requires `children` — it comes from react-stately's
+* `ItemProps` — so `<Menu.Item key="sort-asc" />` does not typecheck, and a
+* consumer filling the label in by hand would hardcode one language and lose the
+* translated one the table supplies. Passing `null` satisfies the type and reads
+* as "the table fills this in", which `processColumnMenuItems` then does.
+*
+* Hand-written keys still work — this is a convenience, not the only route.
+*/
+function columnSortMenu(keys = COLUMN_MENU_SORT_KEYS) {
+	return keys.map((key) => /* @__PURE__ */ jsx(__Menu.Item, { children: null }, key));
+}
+
+//#endregion
+export { COLUMN_MENU_SORT_DIRECTION, COLUMN_MENU_SORT_KEYS, columnSortMenu, isColumnMenuSortKey, processColumnMenuItems };
+//# sourceMappingURL=column-menu.js.map

package/dist/components/data/TableBase/column-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu.js","names":["Menu"],"sources":["../../../../src/components/data/TableBase/column-menu.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement } from 'react';\n\nimport { Menu } from '../../actions/Menu';\n\nimport { normalizeMenuAction } from './row-menu';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport type { CubeTableSortDirection } from './types';\n\n/**\n * Menu keys the table itself honours.\n *\n * Sorting is the only capability the table owns, so it is the only thing that\n * can be a reserved key. `pin` and `hide` deliberately are not: `column.pin` and\n * `column.isHidden` are read-only declarative inputs with no controlled state\n * behind them, and reserving those keys would fix an API in string literals\n * before the state that backs it exists. They stay ordinary consumer keys and\n * are reported through `onColumnMenuAction` like anything else.\n */\nexport const COLUMN_MENU_SORT_KEYS = [\n  'sort-asc',\n  'sort-desc',\n  'clear-sort',\n] as const;\n\nexport type CubeColumnMenuSortKey = (typeof COLUMN_MENU_SORT_KEYS)[number];\n\nexport function isColumnMenuSortKey(key: string): key is CubeColumnMenuSortKey {\n  return (COLUMN_MENU_SORT_KEYS as readonly string[]).includes(key);\n}\n\n/** The direction a reserved key asks for. `clear-sort` asks for none. */\nexport const COLUMN_MENU_SORT_DIRECTION: Record<\n  CubeColumnMenuSortKey,\n  CubeTableSortDirection | null\n> = {\n  'sort-asc': 'asc',\n  'sort-desc': 'desc',\n  'clear-sort': null,\n};\n\nexport interface CubeColumnMenuContext {\n  isSortable: boolean;\n  /** This column's current direction, or `null` when it is unsorted. */\n  sort: CubeTableSortDirection | null;\n  disallowSortRemoval: boolean;\n  /** Default labels, so `TableView` owns the i18n lookup and this stays pure. */\n  labels: Record<CubeColumnMenuSortKey, string>;\n}\n\ninterface MenuItemLikeProps {\n  children?: ReactNode;\n  isDisabled?: boolean;\n}\n\n/**\n * Whether a reserved key would do nothing if pressed.\n *\n * Redundancy is signalled by disabling the item rather than by ticking the\n * active one. A tick would mean `isSelected`, which `MenuItem` only honours when\n * the whole `Menu` runs at `selectionMode !== 'none'` (`MenuItem.tsx:43`) — and\n * switching the menu into a selection mode would turn the consumer's own items\n * into radios too, and could be overridden from `menuProps`. Disabling is local\n * to the item and cannot leak.\n */\nfunction isSortKeyRedundant(\n  key: CubeColumnMenuSortKey,\n  ctx: CubeColumnMenuContext,\n): boolean {\n  if (!ctx.isSortable) return true;\n\n  if (key === 'clear-sort') {\n    return ctx.sort == null || ctx.disallowSortRemoval;\n  }\n\n  return ctx.sort === COLUMN_MENU_SORT_DIRECTION[key];\n}\n\n/**\n * Fills in default labels and disabled state for the reserved sort keys.\n *\n * `Children.forEach` rather than `Children.toArray`, because `toArray` rewrites\n * every key with a `.$` prefix — which breaks `selectedKeys` matching inside\n * `Menu`. Same reason `TabButton` does it this way.\n *\n * A label or an `isDisabled` the consumer wrote always wins; this only supplies\n * what was left out, so `<Menu.Item key=\"sort-asc\" />` is the short form and\n * `<Menu.Item key=\"sort-asc\">Oldest first</Menu.Item>` still says what it says.\n */\nexport function processColumnMenuItems(\n  children: ReactNode,\n  ctx: CubeColumnMenuContext,\n): ReactNode {\n  const result: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      result.push(child);\n\n      return;\n    }\n\n    const element = child as ReactElement<MenuItemLikeProps>;\n    const childProps = element.props;\n    const key = element.key == null ? null : normalizeMenuAction(element.key);\n\n    if (key != null && isColumnMenuSortKey(key)) {\n      result.push(\n        cloneElement(element, {\n          children: childProps.children ?? ctx.labels[key],\n          isDisabled: childProps.isDisabled ?? isSortKeyRedundant(key, ctx),\n        }),\n      );\n\n      return;\n    }\n\n    // A `Menu.Section` holds the items; recurse so a reserved key inside one is\n    // still resolved. Guarded on a non-text child so an ordinary item whose\n    // label happens to be an element is not walked for no reason.\n    if (\n      childProps.children != null &&\n      typeof childProps.children !== 'string' &&\n      typeof childProps.children !== 'number'\n    ) {\n      result.push(\n        cloneElement(element, {\n          children: processColumnMenuItems(childProps.children, ctx),\n        }),\n      );\n\n      return;\n    }\n\n    result.push(child);\n  });\n\n  // `Children.forEach` preserves order, and each entry keeps the key it was\n  // written with — so React still reconciles these by key, not by index.\n  return result;\n}\n\n/**\n * The reserved sort items, ready to drop into `header.menu`.\n *\n * ```tsx\n * header: { menu: <>{columnSortMenu()}<Menu.Item key=\"pin\">Pin</Menu.Item></> }\n * ```\n *\n * Exists because `Menu.Item` requires `children` — it comes from react-stately's\n * `ItemProps` — so `<Menu.Item key=\"sort-asc\" />` does not typecheck, and a\n * consumer filling the label in by hand would hardcode one language and lose the\n * translated one the table supplies. Passing `null` satisfies the type and reads\n * as \"the table fills this in\", which `processColumnMenuItems` then does.\n *\n * Hand-written keys still work — this is a convenience, not the only route.\n */\nexport function columnSortMenu(\n  keys: readonly CubeColumnMenuSortKey[] = COLUMN_MENU_SORT_KEYS,\n): ReactNode {\n  return keys.map((key) => <Menu.Item key={key}>{null}</Menu.Item>);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAa,wBAAwB;CACnC;CACA;CACA;CACD;AAID,SAAgB,oBAAoB,KAA2C;AAC7E,QAAQ,sBAA4C,SAAS,IAAI;;;AAInE,MAAa,6BAGT;CACF,YAAY;CACZ,aAAa;CACb,cAAc;CACf;;;;;;;;;;;AA0BD,SAAS,mBACP,KACA,KACS;AACT,KAAI,CAAC,IAAI,WAAY,QAAO;AAE5B,KAAI,QAAQ,aACV,QAAO,IAAI,QAAQ,QAAQ,IAAI;AAGjC,QAAO,IAAI,SAAS,2BAA2B;;;;;;;;;;;;;AAcjD,SAAgB,uBACd,UACA,KACW;CACX,MAAM,SAAsB,EAAE;AAE9B,UAAS,QAAQ,WAAW,UAAU;AACpC,MAAI,CAAC,eAAe,MAAM,EAAE;AAC1B,UAAO,KAAK,MAAM;AAElB;;EAGF,MAAM,UAAU;EAChB,MAAM,aAAa,QAAQ;EAC3B,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO,oBAAoB,QAAQ,IAAI;AAEzE,MAAI,OAAO,QAAQ,oBAAoB,IAAI,EAAE;AAC3C,UAAO,KACL,aAAa,SAAS;IACpB,UAAU,WAAW,YAAY,IAAI,OAAO;IAC5C,YAAY,WAAW,cAAc,mBAAmB,KAAK,IAAI;IAClE,CAAC,CACH;AAED;;AAMF,MACE,WAAW,YAAY,QACvB,OAAO,WAAW,aAAa,YAC/B,OAAO,WAAW,aAAa,UAC/B;AACA,UAAO,KACL,aAAa,SAAS,EACpB,UAAU,uBAAuB,WAAW,UAAU,IAAI,EAC3D,CAAC,CACH;AAED;;AAGF,SAAO,KAAK,MAAM;GAClB;AAIF,QAAO;;;;;;;;;;;;;;;;;AAkBT,SAAgB,eACd,OAAyC,uBAC9B;AACX,QAAO,KAAK,KAAK,QAAQ,oBAACA,OAAK,kBAAgB,QAAN,IAAuB,CAAC"}

package/dist/components/data/TableBase/column-tint.js

@@ -0,0 +1,168 @@
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+import { getPaletteConfig } from "../../../tokens/palette-config.js";
+import { hashString } from "../../../tokens/color-theme.js";
+
+//#region src/components/data/TableBase/column-tint.ts
+const THEMES = new Set([
+	"primary",
+	"purple",
+	"success",
+	"danger",
+	"warning",
+	"note"
+]);
+const DEFAULT_SCOPE = [
+	"header",
+	"body",
+	"totals"
+];
+const EMPTY = {
+	slots: /* @__PURE__ */ new Map(),
+	scopes: /* @__PURE__ */ new Map(),
+	configs: [],
+	cellStyles: null,
+	headerCellStyles: null
+};
+/**
+* A theme name is only a theme name when the palette has one — otherwise the
+* string is a colour. `'note'` is a theme; `'#0ea5e9'` and `'red'` are colours.
+*/
+function isThemeName(value) {
+	return THEMES.has(value);
+}
+/**
+* The seed for a palette theme, read from the live palette config so a re-seeded
+* `success` hue moves the columns tinted with it.
+*
+* `primary` and `purple` are the brand itself, which is why they read `hue`
+* rather than a `themes` entry — the palette derives them from the brand hue too.
+*/
+function themeSeed(theme) {
+	const config = getPaletteConfig();
+	if (theme === "primary" || theme === "purple") return {
+		hue: config.hue,
+		saturation: config.saturation
+	};
+	return config.themes[theme];
+}
+/** Normalizes any spec into a theme config, or `null` for the manual form. */
+function tintConfig(color) {
+	if (typeof color === "string") return isThemeName(color) ? themeSeed(color) : { hue: color };
+	if ("fill" in color) return null;
+	return {
+		hue: color.hue,
+		saturation: color.saturation
+	};
+}
+/**
+* A stable identity for a spec, so two columns asking for the same colour share
+* one slot — and therefore one set of generated rules.
+*
+* For a derived spec that identity is the theme's own content hash, which makes it
+* shared across TABLES as well: the tokens are registered globally under the same
+* name. The manual form has no theme, so it is keyed on its literal values.
+*/
+function manualKey(paint) {
+	return `raw-${hashString(`${paint.fill}|${paint.fillBand}|${paint.text}|${paint.headerText}`)}`;
+}
+/**
+* Maps a table's columns onto tint slots and the style maps that paint them.
+*
+* Pure. The colour maths lives in `src/tokens/color-theme.ts`; this is only the
+* mapping from columns to `data-tint` values and tasty state maps.
+*/
+function buildColumnTints(columns, { resolveTheme }) {
+	const tinted = columns.filter((column) => !column.isStructural && column.color != null);
+	if (!tinted.length) return EMPTY;
+	const slots = /* @__PURE__ */ new Map();
+	const scopes = /* @__PURE__ */ new Map();
+	const configs = [];
+	const paints = /* @__PURE__ */ new Map();
+	for (const column of tinted) {
+		const color = column.color;
+		const config = tintConfig(color);
+		let slot;
+		let paint;
+		if (config) {
+			const theme = resolveTheme(config);
+			slot = theme.name;
+			paint = {
+				fill: theme.colors.surface,
+				fillBand: theme.colors["surface-2"],
+				text: theme.colors["surface-2-text"],
+				headerText: theme.colors["surface-2-text-soft"]
+			};
+			if (!paints.has(slot)) configs.push(config);
+		} else {
+			const manual = color;
+			paint = {
+				fill: manual.fill,
+				fillBand: manual.fillBand ?? manual.fill,
+				text: manual.text ?? "#row-text",
+				headerText: manual.text ?? "#row-text"
+			};
+			slot = manualKey(paint);
+		}
+		slots.set(column.key, slot);
+		scopes.set(column.key, column.colorScope ?? DEFAULT_SCOPE);
+		paints.set(slot, paint);
+	}
+	return {
+		slots,
+		scopes,
+		configs,
+		cellStyles: cellTintStyles(paints),
+		headerCellStyles: headerTintStyles(paints)
+	};
+}
+/**
+* `#cell-base` / `#cell-text` for the body.
+*
+* The band and the pinned-total fill share ONE grouped key rather than two
+* entries with the same value: tasty coalesces entries in a state map that
+* serialize identically, promotes them to the group's maximum priority and
+* negates them against everything below — which would silently turn the plain
+* tint branch into `false`. See `src/components/data/AGENTS.md`.
+*/
+function cellTintStyles(paints) {
+	const base = { "": "#row-base" };
+	const text = { "": "#row-text" };
+	for (const [slot, paint] of paints) {
+		base[`@own(tint=${slot})`] = paint.fill;
+		if (paint.fillBand !== paint.fill) base[`@own(tint=${slot}) & (@own(odd) | @own(pinned))`] = paint.fillBand;
+		text[`@own(tint=${slot})`] = paint.text;
+	}
+	return {
+		"#cell-base": base,
+		"#cell-text": text
+	};
+}
+/**
+* The header takes the deeper band unconditionally, mirroring how the neutral
+* header sits on `#surface-2` rather than `#surface`.
+*/
+function headerTintStyles(paints) {
+	const base = { "": "#row-base" };
+	const text = { "": "#row-text" };
+	for (const [slot, paint] of paints) {
+		base[`@own(tint=${slot})`] = paint.fillBand;
+		text[`@own(tint=${slot})`] = paint.headerText;
+	}
+	return {
+		"#cell-base": base,
+		"#cell-text": text
+	};
+}
+/**
+* The `data-tint` value for one part of a column, or `undefined` when the column
+* is untinted or its scope excludes that part.
+*/
+function tintSlot(tints, columnKey, scope) {
+	const slot = tints.slots.get(columnKey);
+	if (slot == null) return void 0;
+	return tints.scopes.get(columnKey)?.includes(scope) ? slot : void 0;
+}
+
+//#endregion
+export { buildColumnTints, tintSlot };
+//# sourceMappingURL=column-tint.js.map

package/dist/components/data/TableBase/column-tint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-tint.js","names":[],"sources":["../../../../src/components/data/TableBase/column-tint.ts"],"sourcesContent":["import { hashString } from '../../../tokens/color-theme';\nimport { getPaletteConfig } from '../../../tokens/palette-config';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { ColorThemeConfig } from '../../../tokens/color-theme';\nimport type {\n  CubeResolvedColumn,\n  CubeTableColumnColor,\n  CubeTableColumnColorScope,\n  CubeTableColumnTheme,\n} from './types';\n\nconst THEMES = new Set<string>([\n  'primary',\n  'purple',\n  'success',\n  'danger',\n  'warning',\n  'note',\n]);\n\nconst DEFAULT_SCOPE: readonly CubeTableColumnColorScope[] = [\n  'header',\n  'body',\n  'totals',\n];\n\n/** The three paint values a tinted cell needs, as tasty colour strings. */\ninterface TintPaint {\n  fill: string;\n  fillBand: string;\n  text: string;\n  /** The header's text — muted, to match an untinted header. */\n  headerText: string;\n}\n\nexport interface ColumnTints {\n  /** `columnKey` → `data-tint` value. Absent means the column is not tinted. */\n  slots: Map<string, string>;\n  /** Which scopes each column's tint applies to. */\n  scopes: Map<string, readonly CubeTableColumnColorScope[]>;\n  /**\n   * Theme configs to register with `useColorTheme`, one per distinct derived\n   * spec. Empty when every column used the `{ fill, text }` escape hatch.\n   */\n  configs: ColorThemeConfig[];\n  /** Merge into `styles.Cell`. */\n  cellStyles: Styles | null;\n  /** Merge into `styles.HeaderCell`. */\n  headerCellStyles: Styles | null;\n}\n\nconst EMPTY: ColumnTints = {\n  slots: new Map(),\n  scopes: new Map(),\n  configs: [],\n  cellStyles: null,\n  headerCellStyles: null,\n};\n\n/**\n * A theme name is only a theme name when the palette has one — otherwise the\n * string is a colour. `'note'` is a theme; `'#0ea5e9'` and `'red'` are colours.\n */\nfunction isThemeName(value: string): value is CubeTableColumnTheme {\n  return THEMES.has(value);\n}\n\n/**\n * The seed for a palette theme, read from the live palette config so a re-seeded\n * `success` hue moves the columns tinted with it.\n *\n * `primary` and `purple` are the brand itself, which is why they read `hue`\n * rather than a `themes` entry — the palette derives them from the brand hue too.\n */\nfunction themeSeed(theme: CubeTableColumnTheme): {\n  hue: number;\n  saturation: number;\n} {\n  const config = getPaletteConfig();\n\n  if (theme === 'primary' || theme === 'purple') {\n    return { hue: config.hue, saturation: config.saturation };\n  }\n\n  return config.themes[theme];\n}\n\n/** Normalizes any spec into a theme config, or `null` for the manual form. */\nexport function tintConfig(\n  color: CubeTableColumnColor,\n): ColorThemeConfig | null {\n  if (typeof color === 'string') {\n    return isThemeName(color) ? themeSeed(color) : { hue: color };\n  }\n\n  if ('fill' in color) return null;\n\n  return { hue: color.hue, saturation: color.saturation };\n}\n\n/**\n * A stable identity for a spec, so two columns asking for the same colour share\n * one slot — and therefore one set of generated rules.\n *\n * For a derived spec that identity is the theme's own content hash, which makes it\n * shared across TABLES as well: the tokens are registered globally under the same\n * name. The manual form has no theme, so it is keyed on its literal values.\n */\nfunction manualKey(paint: TintPaint): string {\n  // Hashed, not literal: the values contain `#`, `.` and `|`, none of which\n  // survive being interpolated into a tasty `@own(tint=…)` state key.\n  return `raw-${hashString(\n    `${paint.fill}|${paint.fillBand}|${paint.text}|${paint.headerText}`,\n  )}`;\n}\n\nexport interface BuildColumnTintsOptions {\n  /**\n   * Resolves a derived spec to its theme. Injected rather than imported so the\n   * caller — which is a component and can run hooks — owns registration, and so\n   * this stays a pure function.\n   */\n  resolveTheme: (config: ColorThemeConfig) => {\n    name: string;\n    colors: Record<string, string>;\n  };\n}\n\n/**\n * Maps a table's columns onto tint slots and the style maps that paint them.\n *\n * Pure. The colour maths lives in `src/tokens/color-theme.ts`; this is only the\n * mapping from columns to `data-tint` values and tasty state maps.\n */\nexport function buildColumnTints<T>(\n  columns: readonly CubeResolvedColumn<T>[],\n  { resolveTheme }: BuildColumnTintsOptions,\n): ColumnTints {\n  const tinted = columns.filter(\n    (column) => !column.isStructural && column.color != null,\n  );\n\n  if (!tinted.length) return EMPTY;\n\n  const slots = new Map<string, string>();\n  const scopes = new Map<string, readonly CubeTableColumnColorScope[]>();\n  const configs: ColorThemeConfig[] = [];\n  const paints = new Map<string, TintPaint>();\n\n  for (const column of tinted) {\n    const color = column.color as CubeTableColumnColor;\n    const config = tintConfig(color);\n    let slot: string;\n    let paint: TintPaint;\n\n    if (config) {\n      const theme = resolveTheme(config);\n\n      slot = theme.name;\n      paint = {\n        fill: theme.colors.surface,\n        fillBand: theme.colors['surface-2'],\n        text: theme.colors['surface-2-text'],\n        headerText: theme.colors['surface-2-text-soft'],\n      };\n\n      if (!paints.has(slot)) configs.push(config);\n    } else {\n      const manual = color as {\n        fill: string;\n        fillBand?: string;\n        text?: string;\n      };\n\n      paint = {\n        fill: manual.fill,\n        // Without a band the column simply does not band — the caller asked for\n        // exactly these values, so inventing a second one would be a surprise.\n        fillBand: manual.fillBand ?? manual.fill,\n        text: manual.text ?? '#row-text',\n        // The manual form derives nothing, so the header takes the same text.\n        headerText: manual.text ?? '#row-text',\n      };\n      slot = manualKey(paint);\n    }\n\n    slots.set(column.key, slot);\n    scopes.set(column.key, column.colorScope ?? DEFAULT_SCOPE);\n    paints.set(slot, paint);\n  }\n\n  return {\n    slots,\n    scopes,\n    configs,\n    cellStyles: cellTintStyles(paints),\n    headerCellStyles: headerTintStyles(paints),\n  };\n}\n\n/**\n * `#cell-base` / `#cell-text` for the body.\n *\n * The band and the pinned-total fill share ONE grouped key rather than two\n * entries with the same value: tasty coalesces entries in a state map that\n * serialize identically, promotes them to the group's maximum priority and\n * negates them against everything below — which would silently turn the plain\n * tint branch into `false`. See `src/components/data/AGENTS.md`.\n */\nfunction cellTintStyles(paints: Map<string, TintPaint>): Styles {\n  const base: Record<string, string> = { '': '#row-base' };\n  const text: Record<string, string> = { '': '#row-text' };\n\n  for (const [slot, paint] of paints) {\n    base[`@own(tint=${slot})`] = paint.fill;\n    // Only worth a rule when it differs; an identical value here is exactly what\n    // the coalescing trap eats.\n    if (paint.fillBand !== paint.fill) {\n      base[`@own(tint=${slot}) & (@own(odd) | @own(pinned))`] = paint.fillBand;\n    }\n    text[`@own(tint=${slot})`] = paint.text;\n  }\n\n  return { '#cell-base': base, '#cell-text': text };\n}\n\n/**\n * The header takes the deeper band unconditionally, mirroring how the neutral\n * header sits on `#surface-2` rather than `#surface`.\n */\nfunction headerTintStyles(paints: Map<string, TintPaint>): Styles {\n  const base: Record<string, string> = { '': '#row-base' };\n  const text: Record<string, string> = { '': '#row-text' };\n\n  for (const [slot, paint] of paints) {\n    base[`@own(tint=${slot})`] = paint.fillBand;\n    text[`@own(tint=${slot})`] = paint.headerText;\n  }\n\n  return { '#cell-base': base, '#cell-text': text };\n}\n\n/**\n * The `data-tint` value for one part of a column, or `undefined` when the column\n * is untinted or its scope excludes that part.\n */\nexport function tintSlot(\n  tints: ColumnTints,\n  columnKey: string,\n  scope: CubeTableColumnColorScope,\n): string | undefined {\n  const slot = tints.slots.get(columnKey);\n\n  if (slot == null) return undefined;\n\n  return tints.scopes.get(columnKey)?.includes(scope) ? slot : undefined;\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 
-import { CubeTableAlign, CubeTableCellContext, CubeTableColumn, CubeTableColumnHeader, CubeTableHeaderContext, CubeTableRowContext, CubeTableRowSection, CubeTableSort, CubeTableSortDirection } from "./types.js";
+import { CubeTableAlign, CubeTableCellContext, CubeTableColumn, CubeTableColumnHeader, CubeTableHeaderContext, CubeTableRowContext, CubeTableRowSection, CubeTableRowSize, CubeTableSort, CubeTableSortDirection } from "./types.js";
 import { CubeTableRowRenderProps } from "./TableView.js";
 import "./styled.js";
-import "./use-table-columns.js";
+import "./use-table-columns.js";
+import { COLUMN_MENU_SORT_KEYS, CubeColumnMenuSortKey, columnSortMenu } from "./column-menu.js";

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

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
-import { Children } from "react";
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+import { Children, Fragment, isValidElement } from "react";
 
 //#region src/components/data/TableBase/row-menu.ts
 /**
@@ -17,14 +17,19 @@ const ROW_MENU_COLUMN_WIDTH = {
 	xlarge: 52
 };
 /**
-* Whether a resolved `rowMenu` actually contains anything.
+* Whether a resolved menu actually contains anything.
 *
-* A row whose resolver returns `null` — or an empty fragment — gets no trigger
-* at all, rather than one that opens an empty popover.
+* A resolver returning `null` — or an empty fragment — gets no trigger at all,
+* rather than one that opens an empty popover.
+*
+* Fragments are unwrapped rather than counted. `Children.toArray` drops nullish
+* and boolean children but keeps a fragment as a single node, so
+* `<>{canPin && <Menu.Item/>}</>` read as one item even with nothing in it — and
+* a menu assembled from conditions is the common case, not the exotic one.
 */
 function isMenuEmpty(menu) {
 	if (menu == null || menu === false) return true;
-	return Children.toArray(menu).length === 0;
+	return Children.toArray(menu).every((child) => isValidElement(child) && child.type === Fragment && isMenuEmpty(child.props.children));
 }
 /**
 * Strips the `.$` prefix React adds to keys when children pass through

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

@@ -1 +1 @@
-{"version":3,"file":"row-menu.js","names":[],"sources":["../../../../src/components/data/TableBase/row-menu.ts"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactNode } from 'react';\n\n/**\n * Reserved key for the `⋮` trigger column. Prefixed so it cannot collide with\n * a real data key, and structural so the value pipeline, sorting and search all\n * skip it.\n */\nexport const ROW_MENU_COLUMN_KEY = '__cube-row-menu__';\n\n/** Wide enough for one `ItemAction`, with no content width to spare. */\nexport const ROW_MENU_COLUMN_WIDTH: Record<string, number> = {\n  xsmall: 32,\n  small: 36,\n  medium: 44,\n  large: 48,\n  xlarge: 52,\n};\n\n/**\n * Whether a resolved `rowMenu` actually contains anything.\n *\n * A row whose resolver returns `null` — or an empty fragment — gets no trigger\n * at all, rather than one that opens an empty popover.\n */\nexport function isMenuEmpty(menu: ReactNode): boolean {\n  if (menu == null || menu === false) return true;\n\n  return Children.toArray(menu).length === 0;\n}\n\n/**\n * Strips the `.$` prefix React adds to keys when children pass through\n * `Children.toArray`, so the consumer sees the key it wrote on `Menu.Item`.\n */\nexport function normalizeMenuAction(action: unknown): string {\n  const value = String(action);\n\n  return value.startsWith('.$') ? value.slice(2) : value;\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,sBAAsB;;AAGnC,MAAa,wBAAgD;CAC3D,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACT;;;;;;;AAQD,SAAgB,YAAY,MAA0B;AACpD,KAAI,QAAQ,QAAQ,SAAS,MAAO,QAAO;AAE3C,QAAO,SAAS,QAAQ,KAAK,CAAC,WAAW;;;;;;AAO3C,SAAgB,oBAAoB,QAAyB;CAC3D,MAAM,QAAQ,OAAO,OAAO;AAE5B,QAAO,MAAM,WAAW,KAAK,GAAG,MAAM,MAAM,EAAE,GAAG"}
+{"version":3,"file":"row-menu.js","names":[],"sources":["../../../../src/components/data/TableBase/row-menu.ts"],"sourcesContent":["import { Children, Fragment, isValidElement } from 'react';\n\nimport type { ReactNode } from 'react';\n\n/**\n * Reserved key for the `⋮` trigger column. Prefixed so it cannot collide with\n * a real data key, and structural so the value pipeline, sorting and search all\n * skip it.\n */\nexport const ROW_MENU_COLUMN_KEY = '__cube-row-menu__';\n\n/** Wide enough for one `ItemAction`, with no content width to spare. */\nexport const ROW_MENU_COLUMN_WIDTH: Record<string, number> = {\n  xsmall: 32,\n  small: 36,\n  medium: 44,\n  large: 48,\n  xlarge: 52,\n};\n\n/**\n * Whether a resolved menu actually contains anything.\n *\n * A resolver returning `null` — or an empty fragment — gets no trigger at all,\n * rather than one that opens an empty popover.\n *\n * Fragments are unwrapped rather than counted. `Children.toArray` drops nullish\n * and boolean children but keeps a fragment as a single node, so\n * `<>{canPin && <Menu.Item/>}</>` read as one item even with nothing in it — and\n * a menu assembled from conditions is the common case, not the exotic one.\n */\nexport function isMenuEmpty(menu: ReactNode): boolean {\n  if (menu == null || menu === false) return true;\n\n  // `every` on an empty array is `true`, which is the base case: nothing left\n  // after `toArray` pruned the nullish children means nothing to show.\n  return Children.toArray(menu).every(\n    (child) =>\n      isValidElement(child) &&\n      child.type === Fragment &&\n      isMenuEmpty((child.props as { children?: ReactNode }).children),\n  );\n}\n\n/**\n * Strips the `.$` prefix React adds to keys when children pass through\n * `Children.toArray`, so the consumer sees the key it wrote on `Menu.Item`.\n */\nexport function normalizeMenuAction(action: unknown): string {\n  const value = String(action);\n\n  return value.startsWith('.$') ? value.slice(2) : value;\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,sBAAsB;;AAGnC,MAAa,wBAAgD;CAC3D,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACT;;;;;;;;;;;;AAaD,SAAgB,YAAY,MAA0B;AACpD,KAAI,QAAQ,QAAQ,SAAS,MAAO,QAAO;AAI3C,QAAO,SAAS,QAAQ,KAAK,CAAC,OAC3B,UACC,eAAe,MAAM,IACrB,MAAM,SAAS,YACf,YAAa,MAAM,MAAmC,SAAS,CAClE;;;;;;AAOH,SAAgB,oBAAoB,QAAyB;CAC3D,MAAM,QAAQ,OAAO,OAAO;AAE5B,QAAO,MAAM,WAAW,KAAK,GAAG,MAAM,MAAM,EAAE,GAAG"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { keyframes, tasty } from "@tenphi/tasty";
 
@@ -49,11 +49,13 @@ const CELL_STYLES = {
 		"": "$cell-padding-x",
 		"@own(kind=selection) | @own(kind=actions)": 0
 	},
+	"#cell-base": "#row-base",
+	"#cell-text": "#row-text",
 	fill: {
-		"": "#row-base #row-overlay",
-		"@own(cell-selected)": "#row-base #purple.10"
+		"": "#cell-base #row-overlay",
+		"@own(cell-selected)": "#cell-base #purple.10"
 	},
-	color: "#row-text",
+	color: "#cell-text",
 	opacity: "$dim",
 	position: {
 		"": "static",
@@ -123,6 +125,8 @@ const TableElement = tasty({
 		"#row-base": "#surface",
 		"#row-overlay": "#clear",
 		"#row-text": "#surface-text",
+		"#cell-base": "#row-base",
+		"#cell-text": "#row-text",
 		display: "grid",
 		gridRows: "max-content minmax(0, 1fr) max-content",
 		gridColumns: "minmax(0, 1fr)",
@@ -145,6 +149,7 @@ const TableElement = tasty({
 			gridRow: 2,
 			position: "relative",
 			overflow: "auto",
+			outline: "none",
 			scrollbar: "thin stable",
 			userSelect: {
 				"": "auto",
@@ -165,8 +170,8 @@ const TableElement = tasty({
 			},
 			maskImage: {
 				"": "none",
-				stale: "linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,1) 65%, rgba(0,0,0,1) 100%)",
-				"@media(prefers-reduced-motion)": "linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%)"
+				stale: "linear-gradient(90deg, #black 0%, #black 35%, #black.4 50%, #black 65%, #black 100%)",
+				"@media(prefers-reduced-motion)": "linear-gradient(90deg, #black 0%, #black 100%)"
 			},
 			maskSize: "300% 100%",
 			animation: {
@@ -217,12 +222,18 @@ const TableElement = tasty({
 				"@own(pin=start | pin=end)": 3
 			},
 			fill: {
-				"": "#row-base #row-overlay",
-				"@own(sortable) & @own(:hover)": "#row-base #surface-text.04"
+				"": "#cell-base #row-overlay",
+				"(@own(sortable) & @own(:hover)) | @own(menu-open)": "#cell-base #surface-text.04"
 			},
 			cursor: {
 				"": "default",
-				"@own(sortable)": "pointer"
+				"@own(sortable)": "pointer",
+				"@own(draggable) & !@own(sortable)": "grab",
+				"@own(dragging)": "grabbing"
+			},
+			opacity: {
+				"": 1,
+				"@own(dragging)": .4
 			},
 			userSelect: "none",
 			position: {
@@ -233,6 +244,10 @@ const TableElement = tasty({
 				"": "hidden",
 				"@own(resizable)": "visible"
 			},
+			"$sort-hint": {
+				"": 0,
+				"@own(sortable) & (@own(:hover) | @own(:focus-visible))": .4
+			},
 			"$resizer-offset": {
 				"": "-.5x",
 				"@own(last-column)": "0px"
@@ -274,6 +289,24 @@ const TableElement = tasty({
 			fill: "#resizer-line",
 			transition: "theme"
 		},
+		ColumnDropIndicator: {
+			$: "> Scroller > Table > Head > HeadRow > HeaderCell >",
+			position: "absolute",
+			top: 0,
+			bottom: 0,
+			width: "2bw",
+			insetInlineStart: {
+				"": "auto",
+				"@own(position=before)": 0
+			},
+			insetInlineEnd: {
+				"": "auto",
+				"@own(position=after)": 0
+			},
+			fill: "#purple",
+			radius: "1r",
+			zIndex: 4
+		},
 		RowLink: {
 			$: "> Scroller > Table > Body > Row > Cell >",
 			position: "absolute",
@@ -346,14 +379,10 @@ const TableElement = tasty({
 			height: "2x",
 			color: "#surface-text",
 			opacity: {
-				"": 0,
+				"": "$sort-hint",
 				"@own(sorted)": 1
 			},
-			scale: {
-				"": "1 1",
-				"@own(dir=desc)": "1 -1"
-			},
-			transition: "opacity, scale"
+			transition: "opacity"
 		},
 		Body: { $: "> Scroller > Table >" },
 		Row: {
@@ -425,7 +454,7 @@ const TableElement = tasty({
 				"@own(link)": 600
 			},
 			color: {
-				"": "#row-text",
+				"": "#cell-text",
 				"@own(link)": "#purple-text"
 			},
 			textDecoration: {