virtual-tree-canvas 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.7.0 — 2026-09-10
+
+### Added
+
+- Configurable right-aligned row actions with icons, checkboxes, tooltips, disabled and pressed states, and keyboard activation.
+- Optional row data dragging with start, move, end and cancel events for application drop targets.
+- `preloadIcons` prepares action icon variants before the first interaction. Includes new trash and filled-star icons.
+- `showHeader` hides column headings independently of the filter.
+- `reorderable: false` prevents manual movement of individual rows while allowing their parent subtree to move.
+- Value formatting and semantic type colors for table columns, plus configurable status pills.
+
+### Fixed
+
+- Row actions preserve selection backgrounds and remain available on partially visible rows. Hover highlights the icon without covering the row.
+- Action icons render at their displayed size and current screen pixel density.
+- Canvas resizing repaints immediately after measurement; keyboard focus uses a subtle outer border.
+- Inspector checkboxes align with other value controls. Sliders and text inputs remain editable when row dragging is enabled.
+- Live refreshes preserve active editors, row drags, expansion state and action-button focus.
+- Flat lists no longer reserve unnecessary leaf-marker space. Sticky ancestor separators remain hidden before scrolling.
+- Focusing a row during dragging no longer scrolls ancestor panels.
+- Sorted and filtered tables can export rows while keeping manual reordering disabled.
+- Pointer cancellation and disposal release drag state.
+
 ## 0.6.0 — 2026-09-10
 
 ### Added

package/README.md

@@ -19,7 +19,7 @@ grow.
 - **Easy to style.** Built-in dark, light and tactical themes, type-based styling, and editable SVG icons.
 - **Ready for inspectors.** Turn plain JavaScript objects into compact editable forms or property tables.
 
-See [the changelog](./CHANGELOG.md) for the 0.6.0 migration notes and additions.
+See [the changelog](./CHANGELOG.md) for migration notes and additions.
 
 ## Install
 
@@ -135,8 +135,16 @@ and may rebuild the visible row list. For very large datasets,
 `enableWorkers()` moves search and filtered row rebuilds off the main thread
 when Workers are available.
 
+Row actions can also use checkboxes styled like inspector controls. Set `kind: 'checkbox'` and provide
+`checked` as a boolean or a function of `(node, state)`. The `rowaction` event
+includes `checked`; update your application state in response. Checkbox actions
+support `visible` and `disabled` and do not select or drag the row.
+
 ## Columns
 
+Use `showHeader: false` to hide column headings while keeping the filter available.
+The configured `headerHeight` is preserved when the header is shown again.
+
 ```js
 tree.setColumns([
   {
@@ -171,6 +179,11 @@ Available column kinds are `tree`, `status`, `value`, `progress`, `type`,
 Canvas2D content. Import `builtInColumns` or `defaultTreeTableColumns` to start
 from the default set.
 
+Text columns accept `format(value, node, state)` to customize displayed text and
+tooltips while sorting by the original `value`. For example,
+`format: value => value.toFixed(2)` displays two decimal places. By default,
+numeric text uses the same precision as inspector values (up to three decimals).
+
 ## Themes and icons
 
 Three themes are included:
@@ -181,6 +194,18 @@ import { darkTheme, lightTheme, tacticalTheme } from 'virtual-tree-canvas';
 tree.setTheme(tacticalTheme);
 ```
 
+Inspector values and columns with `kind: 'value'` use `theme.valueColors` to
+distinguish numbers, strings, booleans, enums and empty values. Read-only values
+retain their contrast; disabled controls remain dimmed. Override individual
+colors, for example `tree.setTheme({ valueColors: { number: '#8bd5ee' } })`.
+A value column can specify `valueType: 'enum'` or a
+`valueType(value, node, state)` callback when its semantic type differs from the
+raw value. Formatting and sorting are unaffected.
+
+Columns with `kind: 'status'` display compact pills using `theme.statuses`, for
+example `{ Live: { label: 'Live', color: '#56ba95' } }`. Their width adapts to
+the label within the column.
+
 Themes can map domain types to a colour and icon:
 
 ```js
@@ -328,7 +353,7 @@ npm test
 
 ## Manual row order
 
-`rowReorder: true` adds a dedicated handle and Up/Down controls to a data table. Dragging commits only on drop; Escape or dropping outside cancels. Alt+Up / Alt+Down moves the focused row. Edge scrolling works while dragging.
+`rowReorder: true` adds a dedicated handle and Up/Down controls to a data table. Set `reorderable: false` on derived or fixed nodes to hide their ordering controls and prevent moving them manually; their parent can still move with its subtree. Dragging commits only on drop; Escape or dropping outside cancels. Alt+Up / Alt+Down moves the focused row. Edge scrolling works while dragging.
 
 ```js
 const tree = new TreeViewController({
@@ -359,4 +384,55 @@ Open [the reorder demo](./examples/reorder-table.html) through a local HTTP serv
 
 ## Icon catalogue
 
-63 SVGs are included, with a [visual sheet](./docs/icon-catalog.html) and a [reference of available icons](./docs/icon-catalog.md). `builtinIconNames` exposes available IDs.
+65 SVGs are included, with a [visual sheet](./docs/icon-catalog.html) and a [reference of available icons](./docs/icon-catalog.md). `builtinIconNames` exposes available IDs.
+
+## Row actions and data dragging
+
+Actions are optional accessible buttons on the right of visible rows. Their icon names use
+`IconRegistry`, including registered custom icons. The host handles the action;
+clicking a button does not select or expand the row.
+
+```js
+const favorites = new Set();
+const view = new TreeView(host, {
+  nodes,
+  rowActions: [{
+    id: 'favorite', preloadIcons: ['star', 'star-filled'], icon: node => favorites.has(node.id) ? 'star-filled' : 'star', label: 'Toggle favorite',
+    visible: node => !node.data?.group,
+    disabled: node => node.data?.unavailable === true,
+    pressed: node => favorites.has(node.id)
+  }],
+  rowDrag: node => node.data?.reference ?? null
+});
+view.on('rowaction', ({detail}) => {
+  if (favorites.has(detail.nodeId)) favorites.delete(detail.nodeId);
+  else favorites.add(detail.nodeId);
+  view.controller.requestRender();
+});
+```
+
+`rowActions` accepts unique `id` and accessible `label` strings. `icon`, `visible`,
+`disabled` and `pressed` may be functions receiving `(node, dynamicState)`.
+`visible`, `disabled` and `pressed` also accept booleans. Buttons remain focusable
+with Tab and work with Enter/Space. Only visible-row buttons are mounted; live
+value updates preserve their identity and focus.
+
+`rowDrag(node, dynamicState)` returns a payload, or `null` to disable dragging
+that row. Drag from a row label or the row-order handle. Editors, checkboxes,
+action buttons and expand/collapse controls retain their normal behavior.
+
+The controller emits `rowdragstart`, `rowdragmove`, `rowdragend` and
+`rowdragcancel`. Details contain `nodeId`, `payload`, `label` and, except on
+cancellation, `originalEvent` with client coordinates. Connect these events to
+your application's drop manager to highlight destinations and handle the drop.
+The payload is captured at pointer-down; use a stable reference instead of a
+snapshot of a live value. The library never moves or deletes exported data.
+
+Dragging uses Pointer Events within a document. Escape, pointer cancellation,
+loss of pointer capture, removal of the source row and destruction cancel the
+gesture. Live value refreshes preserve an ongoing drag. Sorting and filtering
+disable manual row reordering but still allow exporting rows. Clear the filter
+and cycle the column header through ascending, descending and unsorted to
+restore manual ordering. With `rowReorder: true`, Alt+Up/Down also reorders rows.
+
+For actions whose `icon` callback changes between variants, supply `preloadIcons: ['star', 'star-filled']`. The visible action layer prepares these icons in both normal and pressed colors at the current pixel ratio before interaction.

package/docs/icon-catalog.json

@@ -376,5 +376,17 @@
     "label": "Munición",
     "category": "Tiempo y simulación",
     "available": true
+  },
+  {
+    "id": "trash",
+    "label": "Eliminar",
+    "category": "Interfaz",
+    "available": true
+  },
+  {
+    "id": "star-filled",
+    "label": "Favorito activo",
+    "category": "Interfaz",
+    "available": true
   }
 ]

package/docs/icon-catalog.md

@@ -1,6 +1,6 @@
 # Catálogo de iconos
 
-Los 63 iconos incluidos están disponibles en `resources/icons/`.
+Los 65 iconos incluidos están disponibles en `resources/icons/`.
 Consulta la [galería visual](./icon-catalog.html) para verlos sobre fondos claros
 u oscuros y comparar tamaños. `builtinIconNames` permite enumerar sus IDs desde JavaScript.
 
@@ -165,3 +165,7 @@ view.setData([{ id: 'operator-1', label: 'Operador', icon: 'person' }]);
 | `clock` | Reloj |
 | `calendar` | Calendario |
 | `munition` | Munición |
+
+- `trash`: eliminar un elemento o quitarlo de una lista.
+
+- `star-filled`: favorito activo; combina con `star` para el estado inactivo.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "High-performance Canvas2D virtual tree/table widget for very large hierarchical datasets.",
   "type": "module",
   "main": "./src/index.js",

package/resources/icons/star-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/></svg>

package/resources/icons/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7m4-7v7"/></svg>

package/src/assets/icons.js

@@ -60,6 +60,8 @@ export const builtinIconNames = Object.freeze([
   'snow',
   'space',
   'star',
+  'star-filled',
+  'trash',
   'storm',
   'subsurface',
   'sun',

package/src/core/theme-manager.js

@@ -32,6 +32,7 @@ export const darkTheme = {
     borderStrong: '#2b3b52',
     shadow: 'rgba(0,0,0,.24)',
   },
+  valueColors: { number: '#8bd5ee', bigint: '#8bd5ee', string: '#dde5ef', boolean: '#86d6b5', enum: '#c4b5fd', null: '#9aa9bc', undefined: '#9aa9bc' },
   types: {
     root: { icon: 'folder', color: '#38bdf8' },
     system: { icon: 'folder', color: '#818cf8' },
@@ -68,6 +69,7 @@ export const darkTheme = {
 
 export const lightTheme = {
   ...darkTheme,
+  valueColors: { number: '#075985', bigint: '#075985', string: '#182438', boolean: '#176249', enum: '#6b3fa0', null: '#576579', undefined: '#576579' },
   colors: {
     background: '#f8fafc',
     row: '#ffffff',
@@ -228,6 +230,7 @@ function mergeTheme(base, override) {
     ...base,
     ...override,
     colors: { ...base.colors, ...(override.colors ?? {}) },
+    valueColors: { ...base.valueColors, ...(override.valueColors ?? {}) },
     types: { ...base.types, ...(override.types ?? {}) },
     statuses: { ...base.statuses, ...(override.statuses ?? {}) },
   };

package/src/core/tree-cell-layout.js

@@ -0,0 +1,9 @@
+/** Share tree-cell positions between painting, hit testing and tooltips. */
+export function treeCellLayout(depth, indentWidth, hasHierarchy) {
+  const indent = depth * indentWidth;
+  return {
+    chevronX: hasHierarchy ? indent + 10 : null,
+    iconX: indent + (hasHierarchy ? 27 : 8),
+    labelX: indent + (hasHierarchy ? 50 : 31),
+  };
+}

package/src/core/tree-column-model.js

@@ -69,6 +69,7 @@ export class TreeColumnModel {
     if (!this.columns.some((column) => column.kind === 'tree' || column.kind === 'inspectorPane')) {
       this.columns.unshift(normalizeColumn(builtInColumns.tree, 0));
     }
+    this.setRowActions(this.rowActionCount ?? 0);
     this.setRowReorder(this.rowReorder);
     this.#layout();
   }
@@ -83,6 +84,14 @@ export class TreeColumnModel {
     this.#layout();
   }
 
+  setRowActions(count) {
+    this.rowActionCount = count;
+    this.columns = this.columns.filter(column => column.id !== '__vtc_actions');
+    if (count) this.columns.push(normalizeColumn({ id: '__vtc_actions', label: '', kind: 'text',
+      width: count * 28, minWidth: count * 28, sortable: false, resizable: false, value: () => '' }, 0));
+    this.#layout();
+  }
+
   /** @param {number} x */
   getColumnAt(x) {
     return this.columns.find((column) => x >= column.x && x < column.x + column.width) ?? null;
@@ -101,11 +110,11 @@ export class TreeColumnModel {
   }
 
   moveColumn(id, targetIndex) {
-    if (id === '__vtc_row_order') return false;
+    if (id === '__vtc_row_order' || id === '__vtc_actions') return false;
     const currentIndex = this.columns.findIndex((column) => column.id === id);
     if (currentIndex === -1) return false;
     const [column] = this.columns.splice(currentIndex, 1);
-    const nextIndex = Math.max(this.rowReorder ? 1 : 0, Math.min(this.columns.length, targetIndex));
+    const nextIndex = Math.max(this.rowReorder ? 1 : 0, Math.min(this.columns.length - (this.rowActionCount ? 1 : 0), targetIndex));
     this.columns.splice(nextIndex, 0, column);
     if (!this.columns.some((item) => item.kind === 'tree')) this.columns.unshift(normalizeColumn(builtInColumns.tree, 0));
     this.#layout();
@@ -158,6 +167,8 @@ function normalizeColumn(column, index) {
     sortable: source.sortable ?? true,
     resizable: source.resizable ?? true,
     value: source.value ?? ((node) => node[source.id] ?? ''),
+    format: source.format,
+    valueType: source.valueType,
     render: source.render,
     x: 0,
   };

package/src/core/types.js

@@ -7,6 +7,7 @@
  * @property {string} [icon]
  * @property {string} [image]
  * @property {string[]} [tags]
+ * @property {boolean} [reorderable] Allow manual reordering of this node (defaults to true).
  * @property {any} [data]
  */
 

package/src/core/view-options.js

@@ -4,14 +4,21 @@ export const treeViewDefaults = Object.freeze({
   mode: 'tree', presentation: 'pane', nodes: Object.freeze([]), model: null, meta: null,
   columns: null, theme: 'dark', flatRoot: true, enforceMeta: false,
   filter: true, filterPlacement: 'auto', markUpdated: true, editable: true,
-  rowReorder: false, initialExpandDepth: 1, rowHeight: undefined,
-  indentWidth: undefined, headerHeight: 28, iconResolver: null, fontFamily: null,
+  rowActions: Object.freeze([]), rowDrag: null, rowReorder: false, initialExpandDepth: 1, rowHeight: undefined,
+  indentWidth: undefined, showHeader: true, headerHeight: 28, iconResolver: null, fontFamily: null,
 });
 export const treeViewOptionNames = Object.freeze(Object.keys(treeViewDefaults));
 
 export function validateTreeViewOptions(options) {
   if (!options || typeof options !== 'object' || Array.isArray(options)) throw new TypeError('Options must be an object');
   for (const [key, value] of Object.entries(options)) {
+    if (key === 'rowActions' && (!Array.isArray(value) || value.some(action => !action || typeof action.id !== 'string' || !action.id || typeof action.label !== 'string') || new Set(value.map(action => action.id)).size !== value.length)) throw new TypeError('rowActions requires unique ids and labels');
+    if (key === 'rowActions') for (const action of value) {
+      if (action.kind !== undefined && !['button','checkbox'].includes(action.kind)) throw new TypeError('row action kind must be button or checkbox');
+      for (const property of ['visible', 'disabled', 'pressed', 'checked']) if (action[property] !== undefined && !['boolean', 'function'].includes(typeof action[property])) throw new TypeError(`${property} must be boolean or a function`);
+      if (action.icon !== undefined && !['string', 'function'].includes(typeof action.icon)) throw new TypeError('action icon must be a name or a function');
+    }
+    if (key === 'rowDrag' && value !== null && typeof value !== 'function') throw new TypeError('rowDrag must be a function or null');
     if (key === 'theme') resolveTheme(value);
     if (key === 'mode' && !['tree', 'inspector'].includes(value)) throw new TypeError('mode must be tree or inspector');
     if (key === 'presentation' && !['pane', 'table'].includes(value)) throw new TypeError('presentation must be pane or table');
@@ -25,6 +32,6 @@ export function validateTreeViewOptions(options) {
     if (key === 'initialExpandDepth' && (!Number.isInteger(value) || value < 0)) throw new TypeError('initialExpandDepth must be a non-negative integer');
     if (key === 'iconResolver' && value !== null && typeof value !== 'function') throw new TypeError('iconResolver must be a function or null');
     if (key === 'fontFamily' && value !== null && typeof value !== 'string') throw new TypeError('fontFamily must be a string or null');
-    if (['flatRoot', 'enforceMeta', 'filter', 'markUpdated', 'editable', 'rowReorder'].includes(key) && typeof value !== 'boolean') throw new TypeError(`${key} must be boolean`);
+    if (['flatRoot', 'enforceMeta', 'filter', 'markUpdated', 'editable', 'rowReorder', 'showHeader'].includes(key) && typeof value !== 'boolean') throw new TypeError(`${key} must be boolean`);
   }
 }

package/src/core/visible-row-model.js

@@ -151,7 +151,7 @@ export class VisibleRowModel extends EventTarget {
   /** @param {import('./tree-view-viewport.js').TreeViewViewport} viewport */
   getStickyRows(viewport) {
     const rowViewportHeight = viewport.rowViewportHeight ?? viewport.viewportHeight;
-    if (rowViewportHeight < this.rowHeight * 2) return [];
+    if (viewport.scrollY <= 0 || rowViewportHeight < this.rowHeight * 2) return [];
     const max = Math.max(0, Math.min(6, Math.floor(rowViewportHeight / this.rowHeight) - 1));
     const first = Math.max(0, Math.floor(viewport.scrollY / this.rowHeight));
     let row = this.getRow(first);

package/src/index.d.ts

@@ -1,3 +1,16 @@
+export interface RowAction {
+  kind?: 'button' | 'checkbox';
+  checked?: boolean | ((node: TreeNode, state: Record<string, any>) => boolean);
+  id: string;
+  label: string;
+  icon?: string | ((node: TreeNode, state: Record<string, any>) => string);
+  /** Icon variants to rasterize before the first action. */
+  preloadIcons?: string[];
+  visible?: boolean | ((node: TreeNode, state: Record<string, any>) => boolean);
+  disabled?: boolean | ((node: TreeNode, state: Record<string, any>) => boolean);
+  pressed?: boolean | ((node: TreeNode, state: Record<string, any>) => boolean);
+}
+export type RowDragResolver = ((node: TreeNode, state: Record<string, any>) => any | null) | null;
 export const builtinIconNames: readonly string[];
 export interface RowReorderDetail {
   nodeId: string;
@@ -14,6 +27,8 @@ export interface TreeViewOptions {
   iconsBaseUrl?: string | URL;
   iconRegistry?: IconRegistry;
   rowReorder?: boolean;
+  rowActions?: RowAction[];
+  rowDrag?: RowDragResolver;
   autoRender?: boolean;
   tooltip?: boolean;
   canvas?: HTMLCanvasElement;
@@ -49,6 +64,7 @@ export type TreeNode = {
   icon?: string;
   image?: string;
   tags?: string[];
+  reorderable?: boolean;
   data?: any;
 };
 
@@ -89,8 +105,12 @@ export type Column = {
   minWidth?: number;
   align?: 'left' | 'center' | 'right';
   kind?: string;
+  /** Optional semantic type for value-column coloring; defaults to the raw value type. */
+  valueType?: string | ((value: any, node: TreeNode, state: Record<string, any>) => string);
   sortable?: boolean;
   value?: (node: TreeNode, state: Record<string, any>) => string | number | boolean;
+  /** Formats displayed text and tooltips without changing sorting values. */
+  format?: (value: any, node: TreeNode, state: Record<string, any>) => string;
   render?: (ctx: CanvasRenderingContext2D, cell: any) => void;
 };
 
@@ -128,6 +148,10 @@ export class TreeViewController {
   model: any;
   inspector: any;
   columnModel: any;
+  setRowActions(actions: RowAction[]): void;
+  setRowDrag(resolver: RowDragResolver): void;
+  sortBy(id: string, direction?: string): boolean;
+  clearSort(): void;
   setEditable(enabled: boolean): void;
   setInitialExpandDepth(depth: number): void;
   setIconResolver(resolver: TreeViewConfiguration['iconResolver']): void;
@@ -141,7 +165,7 @@ export class TreeViewController {
   nextSearchResult(): string | null;
   previousSearchResult(): string | null;
   setRowReorder(enabled: boolean): void;
-  canReorderRows(): boolean;
+  canReorderRows(nodeId?: string): boolean;
   getRowOrder(parentId?: string | null): string[];
   moveRow(nodeId: string, targetIndex: number, options?: {source?: RowReorderDetail["source"]}): boolean;
   moveRowBy(nodeId: string, offset: number, options?: {source?: RowReorderDetail["source"]}): boolean;
@@ -176,6 +200,7 @@ export class TreeViewController {
   getSelection(): string[];
   setSelection(ids: string[]): void;
   clearSelection(): void;
+  toggle(nodeId: string): boolean;
   expandAll(): void;
   collapseAll(): void;
 }
@@ -208,9 +233,13 @@ export interface TreeViewConfiguration {
   markUpdated?: boolean;
   editable?: boolean;
   rowReorder?: boolean;
+  rowActions?: RowAction[];
+  rowDrag?: RowDragResolver;
   initialExpandDepth?: number;
   rowHeight?: number;
   indentWidth?: number;
+  /** Hide column headings without hiding the filter bar. Defaults to true; inspector panes may hide headings automatically. */
+  showHeader?: boolean;
   headerHeight?: number;
   iconResolver?: ((node: TreeNode) => string | Partial<TreeNode> | null | undefined) | null;
   fontFamily?: string | null;
@@ -273,7 +302,18 @@ export interface TreeSearchState {
   current: string | null;
   count: number;
 }
+export interface RowDragDetail {
+  nodeId: string;
+  payload: any;
+  label: string;
+  originalEvent: PointerEvent;
+}
 export interface TreeViewEvents {
+  rowaction: {checked?: boolean; actionId: string; nodeId: string; node: TreeNode; originalEvent: MouseEvent};
+  rowdragstart: RowDragDetail;
+  rowdragmove: RowDragDetail;
+  rowdragend: RowDragDetail;
+  rowdragcancel: Omit<RowDragDetail, 'originalEvent'>;
   valuechange: InspectorValueChange;
   modelchange: {model: any; meta?: Record<string, MetaRule>; path?: string; structural?: boolean; action?: string; value?: any} & Partial<InspectorValueChange>;
   action: {path: string; label: string; nodeId: string; model: any; source: string};
@@ -288,3 +328,10 @@ export interface TreeViewEvents {
   rowreorderchange: {enabled: boolean};
 }
 export type TreeViewEvent<K extends keyof TreeViewEvents> = {type: K; detail: TreeViewEvents[K]};
+
+/** Formats an inspector value using its options and precision. */
+export function formatInspectorValue(value: any, meta?: MetaRule): string;
+
+export class ModelInspectorBuilder {
+  build(model: any, meta?: Record<string, MetaRule>, options?: {flatRoot?: boolean; enforceMeta?: boolean}): TreeNode[];
+}

package/src/input/row-actions.js

@@ -0,0 +1,115 @@
+import { drawCheckbox } from '../renderers/checkbox.js';
+/** Accessible buttons for visible rows. Actions and their meaning belong to the host. */
+export class RowActions {
+  constructor(controller) {
+    this.controller = controller;
+    this.buttons = new Map();
+    this.preparedIcons = new Set();
+    this.element = controller.canvas.ownerDocument.createElement('div');
+    Object.assign(this.element.style, { position: 'absolute', overflow: 'hidden', pointerEvents: 'none', zIndex: '2' });
+    const style = controller.canvas.ownerDocument.createElement('style');
+    style.textContent = `
+      .vtc-row-action { appearance:none; display:flex; align-items:center; justify-content:center;
+        background:transparent; color:inherit; outline:none; }
+      .vtc-row-action:hover:not(:disabled) canvas { filter:brightness(1.45) drop-shadow(0 0 2px var(--vtc-action-focus)); }
+      .vtc-row-action:focus-visible { outline:1px solid var(--vtc-action-focus); outline-offset:-2px; }
+    `;
+    this.element.append(style);
+    controller.canvas.parentElement?.append(this.element);
+    this.element.addEventListener('pointerdown', event => event.stopPropagation());
+  }
+
+  render(scene) {
+    const { viewport, theme, rows, visibleRange, stickyRows } = scene;
+    const ratio = Math.max(1, this.element.ownerDocument.defaultView.devicePixelRatio || 1);
+    for (const action of this.controller.rowActions) {
+      const icons = action.preloadIcons ?? (typeof action.icon === 'string' ? [action.icon] : []);
+      for (const icon of icons) for (const color of [theme.colors.text, theme.colors.textMuted]) {
+        const key = JSON.stringify([icon, color, ratio]);
+        if (this.preparedIcons.has(key)) continue;
+        this.preparedIcons.add(key);
+        void this.controller.iconRegistry.prepare({icons:[icon],size:16,color,pixelRatio:ratio});
+      }
+    }
+    const column = scene.columns.find(c => c.id === '__vtc_actions');
+    const used = new Set();
+    const width = column?.width ?? 0;
+    this.element.style.setProperty('--vtc-action-focus', theme.colors.focus);
+    Object.assign(this.element.style, { background:'transparent', left: `${viewport.renderInsetX + Math.max(0, viewport.contentViewportWidth - width)}px`, top: `${viewport.renderInsetY + viewport.headerHeight}px`,
+      width: `${width}px`, height: `${viewport.rowViewportHeight}px` });
+    if (column) {
+      const visible = new Map();
+      const stickyBottom = stickyRows.reduce((end, row) => Math.max(end, row.stickyY + row.height), 0);
+      for (let i = visibleRange.first; i <= visibleRange.last; i++) {
+        const row = rows[i];
+        if (row && row.y + row.height - viewport.scrollY > stickyBottom) visible.set(row.nodeId, {row, y:row.y - viewport.scrollY});
+      }
+      for (const row of stickyRows) visible.set(row.nodeId, {row, y:row.stickyY, sticky:true});
+      for (const {row, y, sticky} of visible.values()) {
+        if (y + row.height <= 0 || y >= viewport.rowViewportHeight) continue;
+        const node = this.controller.model.index.getNode(row.nodeId);
+        const state = this.controller.model.dynamicState.get(node.id) ?? {};
+        this.controller.rowActions.forEach((action, index) => {
+          const resolve = value => typeof value === 'function' ? value(node, state) : value;
+          if (resolve(action.visible) === false) return;
+          const key = JSON.stringify([node.id, action.id, action.kind]);
+          used.add(key);
+          let button = this.buttons.get(key);
+          if (!button) {
+            button = this.element.ownerDocument.createElement('button');
+            button.type = 'button';
+            if (action.kind === 'checkbox') button.setAttribute('role','checkbox');
+            button.className = 'vtc-row-action';
+            button.dataset.nodeId = node.id;
+            button.dataset.action = action.id;
+            Object.assign(button.style, { position:'absolute', pointerEvents:'auto', width:'26px', padding:'3px', border:'0', borderRadius:'3px', cursor:'pointer' });
+            const icon = this.element.ownerDocument.createElement('canvas');
+            Object.assign(icon.style, {width:'16px',height:'16px',display:'block'});
+            button.append(icon);
+            button.onclick = event => {
+              event.stopPropagation();
+              const current = this.controller.model.index.getNode(button.dataset.nodeId);
+              const spec = this.controller.rowActions.find(item => item.id === button.dataset.action);
+              const currentState = this.controller.model.dynamicState.get(current?.id) ?? {};
+              if (!current || !spec || (typeof spec.disabled === 'function' ? spec.disabled(current, currentState) : spec.disabled)) return;
+              this.controller.events.emit('rowaction', { actionId: spec.id, nodeId: current.id, node: current, ...(spec.kind === 'checkbox' ? {checked:!(typeof spec.checked === 'function' ? spec.checked(current,currentState) : spec.checked)} : {}), originalEvent: event });
+            };
+            this.buttons.set(key, button);
+            this.element.append(button);
+          }
+          button.title = action.label;
+          button.setAttribute('aria-label', `${action.label}: ${node.label ?? node.id}`);
+          if (action.pressed !== undefined) button.setAttribute('aria-pressed', String(Boolean(resolve(action.pressed))));
+          else button.removeAttribute('aria-pressed');
+          button.disabled = Boolean(resolve(action.disabled));
+          Object.assign(button.style, { left:`${index * 28 + 1}px`, top:`${y + 1}px`, height:`${row.height - 2}px`,
+            clipPath:sticky ? 'none' : `inset(${Math.max(0, stickyBottom - y - 1)}px 0 0)`, opacity:button.disabled ? '0.3':'1' });
+          const canvas = button.firstChild;
+          const ratio = Math.max(1, this.element.ownerDocument.defaultView.devicePixelRatio || 1);
+          const size = action.kind === 'checkbox' ? 18 : 16;
+          canvas.style.width = canvas.style.height = `${size}px`;
+          const pixels = Math.round(size * ratio);
+          if (canvas.width !== pixels || canvas.height !== pixels) canvas.width = canvas.height = pixels;
+          const ctx = canvas.getContext('2d');
+          ctx.setTransform(pixels / size, 0, 0, pixels / size, 0, 0);
+          ctx.clearRect(0,0,size,size);
+          if (action.kind === 'checkbox') {
+            const checked = Boolean(resolve(action.checked));
+            button.setAttribute('aria-checked', String(checked));
+            drawCheckbox(ctx,1,1,checked,theme);
+            return;
+          }
+          this.controller.iconRegistry.draw(ctx, resolve(action.icon) ?? 'star', 0,0,16,resolve(action.pressed) ? theme.colors.text : theme.colors.textMuted);
+        });
+      }
+    }
+    let refocus = false;
+    for (const [key, button] of this.buttons) if (!used.has(key)) {
+      refocus ||= this.element.getRootNode().activeElement === button;
+      button.remove(); this.buttons.delete(key);
+    }
+    if (refocus) (this.buttons.values().next().value ?? this.controller.canvas).focus({preventScroll:true});
+  }
+
+  destroy() { this.element.remove(); this.buttons.clear(); }
+}