@cube-dev/ui-kit 0.0.0-canary-0a0425e → 0.0.0-canary-b7944fa

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a0425e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a0425e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a0425e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-0a0425e";
+const VERSION = "0.0.0-canary-b7944fa";
 const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/data/DataTable.md

@@ -109,6 +109,20 @@ and everything it knows about the query, in Cloud.
 - **`columnWidths`** `Record<string, number>`
 - **`defaultColumnWidths`** `Record<string, number>`
 - **`onColumnResize`** `(columnKey: string, width: number, all: Record<string, number>) => void`
+- **`isColumnReorderable`** `boolean` (default: `false`) — Drag column headers sideways to reorder them.
+- **`columnOrder`** `string[]` — Controlled order, as column keys. Works with or without dragging.
+- **`defaultColumnOrder`** `string[]`
+- **`onColumnOrderChange`** `(order: string[]) => void` — The full key list, including hidden and pinned columns.
+
+Per column, on `CubeDataTableColumn`: `isReorderable`, `color` and `colorScope` —
+see [Column Colors](#column-colors) for the last two.
+
+#### Column menu
+
+- **`columnContextMenu`** `boolean | 'context-only'` (default: `true`) — Where a column's `header.menu` is exposed.
+- **`onColumnMenuAction`** `(action: string, columnKey: string) => void` — The pressed key, as written.
+- **`columnMenuTriggerProps`** `Record<string, any>`
+- **`columnMenuProps`** `Record<string, any>`
 
 #### Virtualization
 
@@ -119,7 +133,7 @@ and everything it knows about the query, in Cloud.
 #### Other
 
 - **`getRowProps`** `(ctx: CubeTableRowContext<T>) => Record<string, any>` — Per-row mods, styles and height.
-- **`storageKey`** `string` — Persists page size and column widths.
+- **`storageKey`** `string` — Persists page size, column widths and column order.
 - **`ariaLabel`** `string`
 
 #### `dataType`
@@ -286,12 +300,102 @@ succeeds.
 
 ### States
 
+### Column Menu
+
+A column exposes a menu through `header.menu`, opened from a `⋮` trigger in the
+header, by right-click, or with `Shift`+`F10`. The contents are opaque — the grid
+mounts the node and reports the pressed key back through `onColumnMenuAction`,
+which is what keeps Cube vocabulary out of the kit.
+
+Sorting is the exception, because it is the one thing the table itself can do.
+`columnSortMenu()` returns `sort-asc` / `sort-desc` / `clear-sort` items that the
+table labels from the current locale, disables when they would do nothing, and
+applies before telling the consumer. Everything else is yours:
+
+```tsx
+import { columnSortMenu, Menu } from '@cube-dev/ui-kit';
+
+const columns = [
+  {
+    key: 'revenue',
+    title: 'Revenue',
+    isSortable: true,
+    header: {
+      menu: (
+        <>
+          {columnSortMenu()}
+          <Menu.Item key="pin">Pin column</Menu.Item>
+        </>
+      ),
+    },
+  },
+];
+
+<DataTable
+  columns={columns}
+  onColumnMenuAction={(action, columnKey) => {
+    if (action === 'pin') pinColumn(columnKey);
+  }}
+/>;
+```
+
+Pressing the trigger never sorts the column: the header's `Item` swallows the
+click, which is why it sits *inside* the `<th>` rather than being it.
+
+### Column Reordering
+
+`isColumnReorderable` lets a user drag a header sideways, or move the focused
+column with `Alt`+`←` / `→`. Clicking still sorts and the resize handle still
+resizes.
+
+Structural and pinned columns stay put — `pin` is already the ordering authority
+for a pinned column — and a single column opts out with `isReorderable: false`.
+`columnOrder` works on its own too, so a column manager elsewhere in the page can
+drive the order without any dragging.
+
+A stale order is safe: keys for columns that no longer exist are ignored, and a
+column missing from the list lands after the neighbour it had in `columns`
+rather than being swept to the end.
+
+### Column Colors
+
+`column.color` tints a whole column — header, cells and pinned totals. It takes a
+palette theme name, any CSS color, a `{ hue, saturation }` seed, or a
+`{ fill, text }` pair for full manual control.
+
+Every form but the last is *derived*: only the hue and saturation are kept, and
+the tone ramp plus an AA/AAA text floor are re-solved for light, dark and
+high-contrast. A column cannot end up unreadable in a scheme nobody checked.
+
+```tsx
+const columns = [
+  { key: 'orders', title: 'Orders', color: 'note' },
+  { key: 'revenue', title: 'Revenue', color: 'success' },
+  { key: 'conversion', title: 'Conversion', color: '#0ea5e9' },
+  // Header only, cells left neutral.
+  { key: 'region', title: 'Region', color: 'danger', colorScope: ['header'] },
+];
+```
+
+Row banding survives inside a tinted column: the tint carries its own band one
+tone step away, so the stripe still reads down the column instead of being
+painted over.
+
+Under the hood each distinct color becomes a small adaptive theme named by a hash
+of its config, registered once per document — so ten columns sharing a color cost
+one set of tokens. That machinery is public as `useColorTheme` if you want it
+elsewhere.
+
 ## Accessibility
 
 The table is a `role="grid"` with document-absolute `aria-rowindex` /
 `aria-colindex`, and `aria-rowcount` counts pinned rows. Every sorted column
 carries `aria-sort`, not just the first.
 
+A header cell takes a tab stop when it is interactive — sortable, carrying a
+menu, or reorderable. `Shift`+`F10` opens the column menu from the keyboard, and
+`Alt`+`←` / `→` moves a reorderable column, so neither needs a pointer.
+
 ## Related Components
 
 - ItemTable — a list of things to act on.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-0a0425e",
+  "version": "0.0.0-canary-b7944fa",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -30,8 +30,7 @@
     "docs/components",
     "docs/tasty",
     "docs/glaze",
-    "docs/*.md",
-    "tasty.config.ts"
+    "docs/*.md"
   ],
   "scripts": {
     "start": "pnpm storybook",
@@ -124,7 +123,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.0.2",
+    "@tenphi/eslint-plugin-tasty": "^1.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

package/tasty.config.ts

@@ -1,390 +0,0 @@
-/**
- * Tasty Extension Configuration
- *
- * This file configures the tasty VSCode extension for the @cube-dev/ui-kit project.
- * It provides token names, units, presets, and state aliases for validation and autocomplete.
- *
- * Projects using @cube-dev/ui-kit can extend this config:
- * ```typescript
- * export default {
- *   extends: '@cube-dev/ui-kit',
- *   // Add project-specific tokens, presets, etc.
- * };
- * ```
- *
- * @see https://github.com/tenphi/tasty-vscode-extension for extension documentation
- */
-
-export default {
-  extends: '@tenphi/tasty',
-
-  /**
-   * Consumers re-export `tasty` from this package rather than from
-   * `@tenphi/tasty`, and the ESLint plugin only inspects `tasty({ styles })`
-   * calls whose import it can trace back to a tracked source. Without this,
-   * every downstream project sees zero findings. Unioned with the parent's
-   * list, so ui-kit's own `@tenphi/tasty` imports stay covered.
-   */
-  importSources: ['@cube-dev/ui-kit'],
-
-  tokens: [
-    // Declared in src/tasty-augment.d.ts but previously absent here, so the
-    // ESLint plugin reported them as unknown once story files started being
-    // linted. Keep the two lists in sync.
-    '#accent-surface-border',
-    '#black',
-    '#danger-border',
-    '#draft',
-    '#light-grey',
-    '#note-border',
-    '#pink-01',
-    '#pink-02',
-    '#primary-border',
-    '#success-border',
-    '#warning-border',
-    '#white',
-    // ---- Glaze: neutral surface ramp (default theme) ----
-    '#surface',
-    '#surface-2',
-    '#surface-3',
-    '#surface-4',
-    '#surface-inverse',
-    '#surface-text',
-    '#surface-text-soft',
-    '#surface-text-soft-2',
-    '#surface-2-text',
-    '#surface-2-text-soft',
-    '#surface-3-text',
-    '#surface-3-text-soft',
-
-    // ---- Glaze: accent system (default theme) ----
-    '#accent-surface',
-    '#accent-surface-2',
-    '#accent-surface-3',
-    '#accent-surface-hover',
-    '#accent-surface-text',
-    '#accent-text',
-    '#accent-text-soft',
-    '#accent-icon',
-    '#accent-disabled-surface',
-    '#accent-disabled-surface-text',
-
-    // ---- Glaze: per-theme primary / purple (purple is alias of primary) ----
-    '#primary',
-    '#primary-bg',
-    '#primary-text',
-    '#primary-text-soft',
-    '#primary-icon',
-    '#primary-hover',
-    '#primary-disabled',
-    '#primary-desaturated',
-    '#primary-surface',
-    '#primary-surface-text',
-    '#primary-accent-surface',
-    '#primary-accent-surface-2',
-    '#primary-accent-surface-3',
-    '#primary-accent-surface-hover',
-    '#primary-accent-surface-text',
-    '#primary-accent-text',
-    '#primary-accent-text-soft',
-    '#primary-accent-icon',
-    '#primary-accent-disabled-surface',
-    '#primary-accent-disabled-surface-text',
-    '#purple',
-    '#purple-bg',
-    '#purple-text',
-    '#purple-text-soft',
-    '#purple-icon',
-    '#purple-hover',
-    '#purple-disabled',
-    '#purple-surface',
-    '#purple-surface-text',
-    '#purple-accent-surface',
-    '#purple-accent-surface-2',
-    '#purple-accent-surface-3',
-    '#purple-accent-surface-hover',
-    '#purple-accent-surface-text',
-    '#purple-accent-text',
-    '#purple-accent-text-soft',
-    '#purple-accent-icon',
-    '#purple-accent-disabled-surface',
-    '#purple-accent-disabled-surface-text',
-
-    // ---- Glaze: per-theme danger ----
-    '#danger',
-    '#danger-bg',
-    '#danger-text',
-    '#danger-text-soft',
-    '#danger-icon',
-    '#danger-hover',
-    '#danger-disabled',
-    '#danger-desaturated',
-    '#danger-surface',
-    '#danger-surface-text',
-    '#danger-accent-surface',
-    '#danger-accent-surface-2',
-    '#danger-accent-surface-3',
-    '#danger-accent-surface-hover',
-    '#danger-accent-surface-text',
-    '#danger-accent-text',
-    '#danger-accent-text-soft',
-    '#danger-accent-icon',
-    '#danger-accent-disabled-surface',
-    '#danger-accent-disabled-surface-text',
-
-    // ---- Glaze: per-theme success ----
-    '#success',
-    '#success-bg',
-    '#success-text',
-    '#success-text-soft',
-    '#success-icon',
-    '#success-hover',
-    '#success-disabled',
-    '#success-desaturated',
-    '#success-surface',
-    '#success-surface-text',
-    '#success-accent-surface',
-    '#success-accent-surface-2',
-    '#success-accent-surface-3',
-    '#success-accent-surface-hover',
-    '#success-accent-surface-text',
-    '#success-accent-text',
-    '#success-accent-text-soft',
-    '#success-accent-icon',
-    '#success-accent-disabled-surface',
-    '#success-accent-disabled-surface-text',
-
-    // ---- Glaze: per-theme warning ----
-    '#warning',
-    '#warning-bg',
-    '#warning-text',
-    '#warning-text-soft',
-    '#warning-icon',
-    '#warning-hover',
-    '#warning-disabled',
-    '#warning-desaturated',
-    '#warning-surface',
-    '#warning-surface-text',
-    '#warning-accent-surface',
-    '#warning-accent-surface-2',
-    '#warning-accent-surface-3',
-    '#warning-accent-surface-hover',
-    '#warning-accent-surface-text',
-    '#warning-accent-text',
-    '#warning-accent-text-soft',
-    '#warning-accent-icon',
-    '#warning-accent-disabled-surface',
-    '#warning-accent-disabled-surface-text',
-
-    // ---- Glaze: per-theme note ----
-    '#note',
-    '#note-bg',
-    '#note-text',
-    '#note-text-soft',
-    '#note-icon',
-    '#note-hover',
-    '#note-disabled',
-    '#note-desaturated',
-    '#note-surface',
-    '#note-surface-text',
-    '#note-accent-surface',
-    '#note-accent-surface-2',
-    '#note-accent-surface-3',
-    '#note-accent-surface-hover',
-    '#note-accent-surface-text',
-    '#note-accent-text',
-    '#note-accent-text-soft',
-    '#note-accent-icon',
-    '#note-accent-disabled-surface',
-    '#note-accent-disabled-surface-text',
-
-    // ---- Glaze: PrismCode syntax palette ----
-    '#code-comment',
-    '#code-punctuation',
-    '#code-keyword',
-    '#code-string',
-    '#code-number',
-    '#code-function',
-    '#code-attribute',
-
-    // ---- Glaze: LoadingAnimation cube faces (opaque) ----
-    '#loading-face-1',
-    '#loading-face-2',
-    '#loading-face-3',
-
-    // ---- Glaze: shadows / overlays / focus / placeholder ----
-    '#shadow-sm',
-    '#shadow-md',
-    '#shadow-lg',
-    '#overlay',
-    '#focus',
-    '#placeholder',
-
-    // ---- Legacy aliases (mapped in src/tokens/colors.ts) ----
-    '#pink',
-    '#text',
-    '#dark',
-    '#dark-bg',
-    '#dark-01',
-    '#dark-02',
-    '#dark-03',
-    '#dark-04',
-    '#dark-05',
-    '#purple-01',
-    '#purple-02',
-    '#purple-03',
-    '#purple-04',
-    '#light',
-    '#border',
-    '#clear',
-    '#shadow',
-    '#minor',
-    '#disabled',
-    '#disabled-surface-text',
-    '#disabled-surface',
-    '#disabled-opacity',
-
-    // ---- Component-local custom tokens ----
-    '#scrollbar-thumb',
-    '#scrollbar-outline',
-    '#scrollbar-bg',
-    '#scrollbar-corner',
-    '#tabs-fade-left',
-    '#tabs-fade-right',
-    '#slider-thumb',
-    '#slider-thumb-hovered',
-    // ColorPicker: the color being edited, and the black/white that reads on
-    // top of it. Both are set as inline custom properties per render.
-    '#color-picker',
-    '#color-picker-contrast',
-    // ColorSwatchGroup: the color of an individual swatch, set inline per option.
-    '#color-swatch',
-
-    // Custom Property Tokens (from src/tokens/base.ts)
-    '$tab-indicator-size',
-    '$font-size',
-    '$line-height',
-    '$input-font-size',
-    '$input-line-height',
-    '$input-letter-spacing',
-    '$disabled-opacity',
-    '$stroke-width',
-    '$large-radius',
-    '$card-radius',
-    '$leaf-sharp-radius',
-    '$fade-width',
-    '$min-dialog-size',
-    '$disclosure-transition',
-    '$tab-transition',
-    '$fade-transition',
-    '$scrollbar-width',
-    '$scrollbar-outline-width',
-    '$scrollbar-radius',
-
-    // Spacing Tokens
-    '$space-xs',
-    '$space-sm',
-    '$space-md',
-    '$space-lg',
-    '$space-xl',
-
-    // Size Tokens
-    '$size-xs',
-    '$size-sm',
-    '$size-md',
-    '$size-lg',
-    '$size-xl',
-
-    // Shadow Tokens
-    '$item-shadow',
-    '$card-shadow',
-    '$dialog-shadow',
-
-    // Layout Tokens
-    '$max-content-width',
-    '$topbar-height',
-    '$devmodebar-height',
-    '$sidebar-width',
-    '$border-radius-base',
-    '$scrollbar-h-left',
-    '$scrollbar-h-width',
-  ],
-
-  // Note: Built-in units (x, r, cr, bw, ow, fs, lh, sf) are always available.
-  // No need to list them here - they're automatically included by the extension.
-
-  /**
-   * Valid recipe names for the `recipe` style property.
-   * These are defined in src/components/Root.tsx via configure().
-   */
-  recipes: [
-    'reset',
-    'button',
-    'input',
-    'input-autofill',
-    'input-placeholder',
-    'input-search-cancel-button',
-  ],
-
-  /**
-   * State alias names for autocomplete.
-   * These are predefined responsive and theme states.
-   */
-  states: ['@mobile', '@compact'],
-
-  /**
-   * Valid preset names for the `preset` style property.
-   * These are defined in src/tokens/typography.ts.
-   *
-   * Note: Preset modifiers (strong, italic, icon, tight) are built-in
-   * and can be combined with any preset using `/` separator (e.g., 't1 / strong', 'h2 / italic').
-   */
-  presets: [
-    // Base text
-    'default',
-
-    // Headings (h1-h6)
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-
-    // Text styles (t1-t4, with medium weight variants)
-    't1',
-    't2',
-    't2m',
-    't3',
-    't3m',
-    't4',
-    't4m',
-
-    // Markdown/prose styles (m1-m3)
-    'm1',
-    'm2',
-    'm3',
-
-    // Paragraph styles (p1-p4)
-    'p1',
-    'p2',
-    'p3',
-    'p4',
-
-    // Caption/uppercase styles (c1-c2)
-    'c1',
-    'c2',
-    'c3',
-
-    // Snippet / monospace styles (s2-s4)
-    's2',
-    's3',
-    's4',
-
-    // Tag typography
-    'tag',
-
-    // Inline semantic styles
-    'inline',
-  ],
-};