virtual-tree-canvas 0.3.4 → 0.3.6

package/package.json

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

package/src/core/icon-registry.js

@@ -110,19 +110,86 @@ function drawFolder(ctx, x, y, size, color) {
 }
 
 function drawAircraft(ctx, x, y, size, color) {
+  const cx = x + size * 0.5;
+  ctx.save();
+  ctx.strokeStyle = color;
   ctx.fillStyle = color;
+  ctx.lineWidth = 1.35;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
   ctx.beginPath();
-  ctx.moveTo(x + size * 0.5, y + 1);
-  ctx.lineTo(x + size * 0.62, y + size * 0.58);
-  ctx.lineTo(x + size - 1, y + size * 0.72);
-  ctx.lineTo(x + size * 0.58, y + size * 0.78);
-  ctx.lineTo(x + size * 0.54, y + size - 1);
-  ctx.lineTo(x + size * 0.46, y + size - 1);
-  ctx.lineTo(x + size * 0.42, y + size * 0.78);
-  ctx.lineTo(x + 1, y + size * 0.72);
-  ctx.lineTo(x + size * 0.38, y + size * 0.58);
+  ctx.moveTo(cx, y + 1.5);
+  ctx.lineTo(cx + size * 0.08, y + size * 0.56);
+  ctx.lineTo(cx + size * 0.05, y + size - 2);
+  ctx.lineTo(cx - size * 0.05, y + size - 2);
+  ctx.lineTo(cx - size * 0.08, y + size * 0.56);
   ctx.closePath();
   ctx.fill();
+
+  ctx.beginPath();
+  ctx.moveTo(cx - size * 0.08, y + size * 0.54);
+  ctx.lineTo(x + 1.5, y + size * 0.76);
+  ctx.lineTo(cx - size * 0.03, y + size * 0.68);
+  ctx.lineTo(cx + size * 0.03, y + size * 0.68);
+  ctx.lineTo(x + size - 1.5, y + size * 0.76);
+  ctx.lineTo(cx + size * 0.08, y + size * 0.54);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(cx - size * 0.05, y + size * 0.82);
+  ctx.lineTo(x + size * 0.25, y + size - 1.5);
+  ctx.moveTo(cx + size * 0.05, y + size * 0.82);
+  ctx.lineTo(x + size * 0.75, y + size - 1.5);
+  ctx.stroke();
+  ctx.restore();
+}
+
+function drawTask(ctx, x, y, size, color) {
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1.35;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  roundIconRect(ctx, x + 3.5, y + 2.5, size - 7, size - 5, 2);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.4, y + 2.5);
+  ctx.lineTo(x + size * 0.6, y + 2.5);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(x + 5.2, y + size * 0.48);
+  ctx.lineTo(x + size * 0.38, y + size * 0.63);
+  ctx.lineTo(x + size * 0.6, y + size * 0.38);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.62, y + size * 0.6);
+  ctx.lineTo(x + size - 4.5, y + size * 0.6);
+  ctx.moveTo(x + 5, y + size * 0.78);
+  ctx.lineTo(x + size - 4.5, y + size * 0.78);
+  ctx.stroke();
+  ctx.restore();
+}
+
+function roundIconRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  if (typeof ctx.roundRect === 'function') {
+    ctx.roundRect(x, y, width, height, radius);
+    return;
+  }
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+  ctx.lineTo(x + radius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
 }
 
 function drawRadar(ctx, x, y, size, color) {
@@ -163,17 +230,6 @@ function drawError(ctx, x, y, size, color) {
   ctx.stroke();
 }
 
-function drawTask(ctx, x, y, size, color) {
-  ctx.strokeStyle = color;
-  ctx.lineWidth = 1.5;
-  ctx.strokeRect(x + 3, y + 2, size - 6, size - 4);
-  ctx.beginPath();
-  ctx.moveTo(x + 5, y + size * 0.52);
-  ctx.lineTo(x + size * 0.42, y + size - 5);
-  ctx.lineTo(x + size - 5, y + 5);
-  ctx.stroke();
-}
-
 function drawBus(ctx, x, y, size, color) {
   const left = x + size * 0.22;
   const right = x + size * 0.82;

package/src/core/theme-manager.js

@@ -4,20 +4,32 @@ export const darkTheme = {
   font: '12px Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
   monoFont: '12px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace',
   colors: {
-    background: '#0b1020',
-    row: '#0b1020',
-    rowHover: '#111827',
-    rowSelected: '#1e3a8a',
-    rowHighlighted: '#3b0764',
-    text: '#e5e7eb',
-    textMuted: '#94a3b8',
-    guide: '#1f2937',
-    chevron: '#94a3b8',
+    background: '#0a0f1c',
+    row: '#0a0f1c',
+    rowAlt: '#0c1322',
+    rowGroup: '#101827',
+    rowHover: '#111b2d',
+    rowActive: '#15243a',
+    rowSelected: '#16345f',
+    rowHighlighted: '#27144a',
+    rowFocus: '#38bdf8',
+    text: '#e8edf4',
+    textStrong: '#f8fafc',
+    textMuted: '#8ea0b5',
+    textSubtle: '#617086',
+    guide: '#1b2637',
+    chevron: '#8ea0b5',
     focus: '#38bdf8',
-    progressTrack: '#1f2937',
-    progressFill: '#22c55e',
+    progressTrack: '#182235',
+    progressFill: '#3dd889',
+    control: '#121b2b',
+    controlHover: '#17263a',
+    controlActive: '#1c3350',
+    badgeFill: '#132132',
     badgeText: '#ffffff',
-    border: '#1f2937',
+    border: '#1b2637',
+    borderStrong: '#2b3b52',
+    shadow: 'rgba(0,0,0,.24)',
   },
   types: {
     root: { icon: 'folder', color: '#38bdf8' },
@@ -58,18 +70,30 @@ export const lightTheme = {
   colors: {
     background: '#f8fafc',
     row: '#ffffff',
-    rowHover: '#e2e8f0',
-    rowSelected: '#bfdbfe',
+    rowAlt: '#f8fafc',
+    rowGroup: '#f1f5f9',
+    rowHover: '#edf2f7',
+    rowActive: '#e0f2fe',
+    rowSelected: '#dbeafe',
     rowHighlighted: '#f3e8ff',
+    rowFocus: '#0284c7',
     text: '#0f172a',
+    textStrong: '#020617',
     textMuted: '#64748b',
+    textSubtle: '#94a3b8',
     guide: '#cbd5e1',
     chevron: '#64748b',
     focus: '#0284c7',
     progressTrack: '#e2e8f0',
     progressFill: '#16a34a',
+    control: '#ffffff',
+    controlHover: '#f1f5f9',
+    controlActive: '#e0f2fe',
     badgeText: '#ffffff',
+    badgeFill: '#e2e8f0',
     border: '#e2e8f0',
+    borderStrong: '#cbd5e1',
+    shadow: 'rgba(15,23,42,.1)',
   },
 };
 
@@ -78,18 +102,27 @@ export const tacticalTheme = {
   colors: {
     background: '#050806',
     row: '#050806',
+    rowAlt: '#07100a',
+    rowGroup: '#0a1710',
     rowHover: '#0d1f13',
+    rowActive: '#102c1a',
     rowSelected: '#12351f',
     rowHighlighted: '#372b0a',
+    rowFocus: '#7ddc92',
     text: '#d7ffe3',
+    textStrong: '#edfff2',
     textMuted: '#7fa88c',
+    textSubtle: '#5f806a',
     guide: '#183321',
     chevron: '#7fa88c',
     focus: '#7ddc92',
     progressTrack: '#102217',
     progressFill: '#45d483',
     badgeText: '#031006',
+    badgeFill: '#102217',
     border: '#183321',
+    borderStrong: '#295337',
+    shadow: 'rgba(0,0,0,.3)',
   },
   types: {
     ...darkTheme.types,

package/src/index.d.ts

@@ -62,6 +62,8 @@ export class TreeRowRenderer {
 
 export class TreeViewController {
   canvas?: HTMLCanvasElement;
+  inputController?: TreeViewInputController | null;
+  cellEditor?: CellEditorManager | null;
   viewport: {
     viewportWidth: number;
     viewportHeight: number;
@@ -71,7 +73,11 @@ export class TreeViewController {
   rowModel: any;
   expansion: any;
   selection: any;
-  constructor(options?: Record<string, any>);
+  constructor(options?: Record<string, any> & { nativeScrollbars?: boolean });
+  initialize(canvas: HTMLCanvasElement): this;
+  attachCellEditor(options?: { host?: HTMLElement | null }): CellEditorManager;
+  attachInput(options?: { cellEditor?: CellEditorManager | null }): TreeViewInputController;
+  destroy(): void;
   on(type: string, listener: (event: any) => void): any;
   off(type: string, listener: (event: any) => void): void;
   setData(nodes: TreeNode[]): void;
@@ -79,6 +85,7 @@ export class TreeViewController {
   setColumns(columns: Column[]): void;
   setDynamicState(patches: DynamicPatch[]): void;
   setTheme(theme: any): void;
+  setLayoutMetrics(options?: { rowHeight?: number; indentWidth?: number; headerHeight?: number }): void;
   resize(width: number, height: number): void;
   render(time?: number): void;
   renderMeasured(time?: number): any;
@@ -89,6 +96,7 @@ export class TreeViewController {
   clearFilter(): void;
   focusNode(nodeId: string, options?: Record<string, any>): boolean;
   scrollToNode(nodeId: string, align?: TreeViewAlign): boolean;
+  scrollTo(x: number, y: number): void;
   getSelection(): string[];
   setSelection(ids: string[]): void;
   clearSelection(): void;
@@ -97,12 +105,12 @@ export class TreeViewController {
 }
 
 export class TreeViewInputController {
-  constructor(options?: Record<string, any>);
+  constructor(options: { controller: TreeViewController; cellEditor?: CellEditorManager | null });
   destroy(): void;
 }
 
 export class CellEditorManager {
-  constructor(options?: Record<string, any>);
+  constructor(options: { controller: TreeViewController; host?: HTMLElement | null });
   destroy(): void;
   close(): void;
 }

package/src/input/tree-view-input-controller.js

@@ -1,20 +1,15 @@
 export class TreeViewInputController {
   /**
    * @param {{
-   *   canvas: HTMLCanvasElement,
-   *   viewport: import('../core/tree-view-viewport.js').TreeViewViewport,
-   *   rowModel: import('../core/visible-row-model.js').VisibleRowModel,
-   *   expansion: import('../core/tree-expansion-manager.js').TreeExpansionManager,
-   *   selection: import('../core/selection-manager.js').TreeSelectionManager,
-   *   controller?: import('../tree-view-controller.js').TreeViewController,
-   *   onRowsChanged?: () => void,
-   *   onSelectionChanged?: () => void,
-   *   onHoverChanged?: (id: string | null) => void
+   *   controller: import('../tree-view-controller.js').TreeViewController,
+   *   cellEditor?: import('../inspector/cell-editor-manager.js').CellEditorManager | null
    * }} options
    */
   constructor(options) {
-    Object.assign(this, options);
-    this.anchorRowIndex = null;
+    if (!options?.controller) throw new TypeError('TreeViewInputController requires a TreeViewController');
+    if (!options.controller.canvas) throw new Error('TreeViewInputController requires an initialized TreeViewController canvas');
+    this.controller = options.controller;
+    this.canvas = options.controller.canvas;
     this.hoveredId = null;
     this.resizeDrag = null;
     this.cellEditor = options.cellEditor ?? null;
@@ -44,11 +39,7 @@ export class TreeViewInputController {
   #onWheel = (event) => {
     event.preventDefault();
     this.cellEditor?.close?.();
-    if (this.controller) {
-      this.controller.scrollBy(event.shiftKey ? event.deltaY : event.deltaX, event.deltaY);
-      return;
-    }
-    this.viewport.scrollBy(event.shiftKey ? event.deltaY : event.deltaX, event.deltaY);
+    this.controller.scrollBy(event.shiftKey ? event.deltaY : event.deltaX, event.deltaY);
   };
 
   #onMouseMove = (event) => {
@@ -56,7 +47,7 @@ export class TreeViewInputController {
       const rect = this.canvas.getBoundingClientRect();
       const clientX = event.clientX - rect.left;
       const nextWidth = this.resizeDrag.startWidth + (clientX - this.resizeDrag.startX);
-      this.controller?.resizeColumn(this.resizeDrag.columnId, nextWidth);
+      this.controller.resizeColumn(this.resizeDrag.columnId, nextWidth);
       event.preventDefault();
       return;
     }
@@ -67,19 +58,15 @@ export class TreeViewInputController {
     if (id === this.hoveredId && key === this.hoveredHitKey) return;
     this.hoveredId = id;
     this.hoveredHitKey = key;
-    if (this.controller?.setHoverHit) this.controller.setHoverHit(hit);
-    else this.controller?.setHover(id);
-    this.onHoverChanged?.(id);
+    this.controller.setHoverHit(hit);
   };
 
   #onMouseLeave = () => {
     if (!this.resizeDrag) this.canvas.style.cursor = '';
     this.hoveredId = null;
     this.hoveredHitKey = null;
-    this.controller?.setActiveHit?.(null);
-    if (this.controller?.setHoverHit) this.controller.setHoverHit(null);
-    else this.controller?.setHover(null);
-    this.onHoverChanged?.(null);
+    this.controller.setActiveHit(null);
+    this.controller.setHoverHit(null);
   };
 
   #onClick = (event) => {
@@ -88,43 +75,30 @@ export class TreeViewInputController {
     if (!hit) return;
     if (hit.area === 'header') {
       if (hit.part === 'filter' && this.cellEditor?.handleHeaderClick(event, hit)) return;
-      if (!this.resizeDrag && hit.part === 'label' && hit.column) this.controller?.sortBy(hit.column.id);
+      if (!this.resizeDrag && hit.part === 'label' && hit.column) this.controller.sortBy(hit.column.id);
       return;
     }
     if (hit.part === 'chevron' && hit.row.hasChildren) {
-      if (this.controller) {
-        this.controller.toggle(hit.row.nodeId);
-        this.onRowsChanged?.();
-        return;
-      }
-      this.expansion.toggle(hit.row.nodeId);
-      this.rowModel.rebuild();
-      this.viewport.setContentSize(this.rowModel.contentWidth, this.rowModel.contentHeight);
-      this.onRowsChanged?.();
+      this.controller.toggle(hit.row.nodeId);
       return;
     }
     if (this.cellEditor?.handleClick(event, hit)) return;
-    if (this.controller) {
-      this.controller.clickNode(hit.row.nodeId, {
-        shiftKey: event.shiftKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        multi: this.canvas.dataset.multi === 'true',
-      });
-      this.onSelectionChanged?.();
-      return;
-    }
-    this.#selectRow(hit.row.rowIndex, event);
+    this.controller.clickNode(hit.row.nodeId, {
+      shiftKey: event.shiftKey,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      multi: this.canvas.dataset.multi === 'true',
+    });
   };
 
   #onDoubleClick = (event) => {
     const hit = this.#hitTest(event);
-    if (hit?.area === 'row') this.controller?.doubleClickNode(hit.row.nodeId, event);
+    if (hit?.area === 'row') this.controller.doubleClickNode(hit.row.nodeId, event);
   };
 
   #onMouseDown = (event) => {
     const hit = this.#hitTest(event);
-    this.controller?.setActiveHit?.(hit);
+    this.controller.setActiveHit(hit);
     if (this.cellEditor?.handlePointerDown(event, hit)) {
       event.preventDefault();
       return;
@@ -143,103 +117,20 @@ export class TreeViewInputController {
   #onMouseUp = () => {
     this.resizeDrag = null;
     this.canvas.style.cursor = '';
-    this.controller?.setActiveHit?.(null);
+    this.controller.setActiveHit(null);
   };
 
   #onKeyDown = (event) => {
-    if (this.controller?.handleKey(event)) {
+    if (this.controller.handleKey(event)) {
       event.preventDefault();
-      this.onSelectionChanged?.();
-      return;
-    }
-    if (!this.rowModel.rows.length) return;
-    const currentRow = this.#focusedRowIndex();
-    let target = currentRow;
-    if (event.key === 'ArrowDown') target = Math.min(this.rowModel.rows.length - 1, currentRow + 1);
-    else if (event.key === 'ArrowUp') target = Math.max(0, currentRow - 1);
-    else if (event.key === 'Home') target = 0;
-    else if (event.key === 'End') target = this.rowModel.rows.length - 1;
-    else if (event.key === 'ArrowRight') {
-      const row = this.rowModel.getRow(currentRow);
-      if (row?.hasChildren && !row.expanded) this.#toggleAndRebuild(row.nodeId);
-      else if (row?.expanded) target = Math.min(this.rowModel.rows.length - 1, currentRow + 1);
-    } else if (event.key === 'ArrowLeft') {
-      const row = this.rowModel.getRow(currentRow);
-      if (row?.expanded) this.#toggleAndRebuild(row.nodeId);
-      else {
-        const node = row ? this.rowModel.model.index.getNode(row.nodeId) : null;
-        const parentRow = node?.parentId ? this.rowModel.getRowById(node.parentId) : null;
-        if (parentRow) target = parentRow.rowIndex;
-      }
-    } else if (event.key === 'Enter' || event.key === ' ') {
-      const row = this.rowModel.getRow(currentRow);
-      if (row) this.selection.toggle(row.nodeId);
-      this.onSelectionChanged?.();
-      event.preventDefault();
-      return;
-    } else return;
-
-    const row = this.rowModel.getRow(target);
-    if (row) {
-      this.selection.select(row.nodeId);
-      this.anchorRowIndex = target;
-      this.viewport.scrollRowIntoView(target);
-      this.onSelectionChanged?.();
     }
-    event.preventDefault();
   };
 
-  #selectRow(rowIndex, event) {
-    const row = this.rowModel.getRow(rowIndex);
-    if (!row) return;
-    if (event.shiftKey && this.anchorRowIndex !== null) {
-      this.selection.selected.clear();
-      const start = Math.min(this.anchorRowIndex, rowIndex);
-      const end = Math.max(this.anchorRowIndex, rowIndex);
-      for (let i = start; i <= end; i++) this.selection.selected.add(this.rowModel.rows[i].nodeId);
-      this.selection.focused = row.nodeId;
-      this.selection.dispatchEvent(new Event('change'));
-    } else if (event.ctrlKey || event.metaKey || this.canvas.dataset.multi === 'true') {
-      this.selection.toggle(row.nodeId);
-      this.anchorRowIndex = rowIndex;
-    } else {
-      this.selection.select(row.nodeId);
-      this.anchorRowIndex = rowIndex;
-    }
-    this.onSelectionChanged?.();
-  }
-
-  #focusedRowIndex() {
-    if (this.selection.focused) {
-      const row = this.rowModel.getRowById(this.selection.focused);
-      if (row) return row.rowIndex;
-    }
-    return Math.max(0, Math.floor(this.viewport.scrollY / this.rowModel.rowHeight));
-  }
-
-  #toggleAndRebuild(id) {
-    this.expansion.toggle(id);
-    this.rowModel.rebuild();
-    this.viewport.setContentSize(this.rowModel.contentWidth, this.rowModel.contentHeight);
-    this.onRowsChanged?.();
-  }
-
   #hitTest(event) {
     const rect = this.canvas.getBoundingClientRect();
     const clientX = event.clientX - rect.left;
     const clientY = event.clientY - rect.top;
-    if (this.controller) return this.controller.hitTest(clientX, clientY);
-    const x = clientX + this.viewport.scrollX;
-    const y = clientY - (this.viewport.headerHeight ?? 0) + this.viewport.scrollY;
-    if (clientY < (this.viewport.headerHeight ?? 0)) return { area: 'header', part: 'header', x, y: clientY };
-    const rowIndex = Math.floor(y / this.rowModel.rowHeight);
-    const row = this.rowModel.getRow(rowIndex);
-    if (!row) return null;
-    const rowX = row.depth * this.rowModel.indentWidth;
-    const chevronLeft = rowX + 4;
-    const chevronRight = chevronLeft + 18;
-    const part = x >= chevronLeft && x <= chevronRight ? 'chevron' : x <= rowX + 42 ? 'icon' : 'body';
-    return { area: 'row', row, x, y, part };
+    return this.controller.hitTest(clientX, clientY);
   }
 }
 

package/src/inspector/cell-editor-manager.js

@@ -1,8 +1,10 @@
 export class CellEditorManager {
-  constructor({ controller, canvas, host = null }) {
+  constructor({ controller, host = null }) {
+    if (!controller) throw new TypeError('CellEditorManager requires a TreeViewController');
+    if (!controller.canvas) throw new Error('CellEditorManager requires an initialized TreeViewController canvas');
     this.controller = controller;
-    this.canvas = canvas;
-    this.host = host ?? canvas.parentElement ?? document.body;
+    this.canvas = controller.canvas;
+    this.host = host ?? controller.canvas.parentElement ?? document.body;
     this.overlay = null;
     this.rangeDrag = null;
     this.onMouseMove = this.#onMouseMove.bind(this);

package/src/renderers/tree-row-renderer.js

@@ -1,8 +1,6 @@
 import { IconRegistry } from '../core/icon-registry.js';
 
 const DISABLED_ALPHA = 0.72;
-const SCROLL_INDICATOR_HOLD_MS = 1600;
-const SCROLL_INDICATOR_FADE_MS = 700;
 
 export class TreeRowRenderer {
   constructor({ iconRegistry } = {}) {
@@ -11,8 +9,6 @@ export class TreeRowRenderer {
     this.scene = null;
     this.iconRegistry = iconRegistry ?? new IconRegistry();
     this.renderedRows = 0;
-    this.scrollIndicatorState = null;
-    this.scrollIndicatorVisibleUntil = 0;
   }
 
   /** @param {HTMLCanvasElement} canvas */
@@ -55,7 +51,6 @@ export class TreeRowRenderer {
     ctx.translate(viewport.renderInsetX ?? 0, viewport.renderInsetY ?? 0);
     this.#drawHeader(ctx);
     this.#drawRows(ctx);
-    this.#drawScrollIndicator(ctx, time);
     ctx.restore();
   }
 
@@ -143,56 +138,6 @@ export class TreeRowRenderer {
     ctx.restore();
   }
 
-  #drawScrollIndicator(ctx, time) {
-    const { viewport, theme, rows } = this.scene;
-    const maxY = Math.max(0, viewport.contentHeight - viewport.rowViewportHeight);
-    if (maxY <= 0 || viewport.viewportHeight <= viewport.headerHeight + 12) return;
-    const alpha = this.#scrollIndicatorAlpha(viewport, rows?.length ?? 0, time);
-    if (alpha <= 0) return;
-
-    const trackTop = viewport.headerHeight + 4;
-    const trackHeight = Math.max(1, viewport.viewportHeight - viewport.headerHeight - 8);
-    const thumbHeight = Math.max(18, Math.min(trackHeight, trackHeight * (viewport.rowViewportHeight / viewport.contentHeight)));
-    const thumbY = trackTop + (trackHeight - thumbHeight) * (viewport.scrollY / maxY);
-    const x = Math.max(2, viewport.viewportWidth - 4);
-
-    ctx.save();
-    ctx.lineCap = 'round';
-    ctx.lineWidth = 2;
-    ctx.globalAlpha = 0.28 * alpha;
-    ctx.strokeStyle = theme.colors.guide;
-    ctx.beginPath();
-    ctx.moveTo(x, trackTop);
-    ctx.lineTo(x, trackTop + trackHeight);
-    ctx.stroke();
-
-    ctx.globalAlpha = 0.9 * alpha;
-    ctx.strokeStyle = theme.colors.focus;
-    ctx.beginPath();
-    ctx.moveTo(x, thumbY);
-    ctx.lineTo(x, thumbY + thumbHeight);
-    ctx.stroke();
-    ctx.restore();
-  }
-
-  #scrollIndicatorAlpha(viewport, rowCount, time) {
-    const nextState = {
-      scrollY: viewport.scrollY,
-      contentHeight: viewport.contentHeight,
-      rowViewportHeight: viewport.rowViewportHeight,
-      viewportHeight: viewport.viewportHeight,
-      rowCount,
-    };
-    if (!sameScrollIndicatorState(this.scrollIndicatorState, nextState)) {
-      this.scrollIndicatorState = nextState;
-      this.scrollIndicatorVisibleUntil = time + SCROLL_INDICATOR_HOLD_MS;
-      return 1;
-    }
-    if (time <= this.scrollIndicatorVisibleUntil) return 1;
-    const fade = 1 - ((time - this.scrollIndicatorVisibleUntil) / SCROLL_INDICATOR_FADE_MS);
-    return clamp01(fade);
-  }
-
   #drawRow(ctx, row) {
     const { columns, nodes, dynamicState, selection, hoverNodeId, hoverPart, activeNodeId, activePart, focusNodeId, searchMatches, theme, viewport } = this.scene;
     const node = nodes[row.nodeIndex];
@@ -421,10 +366,7 @@ export class TreeRowRenderer {
     const valueWidth = Math.min(64, Math.max(42, width * 0.28));
     const gap = 8;
     const barWidth = Math.max(24, width - valueWidth - gap);
-    ctx.fillStyle = theme.colors.progressTrack;
-    ctx.fillRect(x, y, barWidth, 8);
-    ctx.fillStyle = theme.colors.progressFill;
-    ctx.fillRect(x, y, barWidth * ratio, 8);
+    this.#drawMeterBar(ctx, x, y + 0.5, barWidth, 7, ratio, theme.colors.progressFill, theme);
     this.#drawControlSurface(ctx, x + barWidth + gap, y - 6, valueWidth, 20, theme, {
       hovered: Boolean(state.hoveredNumber),
       active: Boolean(state.activeNumber),
@@ -495,27 +437,53 @@ export class TreeRowRenderer {
   #drawStatusCell(ctx, { rect, style, theme }) {
     const badgeWidth = Math.min(58, rect.width - 12);
     const x = rect.x + (rect.width - badgeWidth) / 2;
-    const y = rect.y + (rect.height - 16) / 2;
-    ctx.fillStyle = style.status.color;
-    roundRect(ctx, x, y, badgeWidth, 16, 8);
+    const y = rect.y + (rect.height - 17) / 2;
+    const statusColor = style.status.color;
+    const baseFill = theme.colors.badgeFill ?? theme.colors.progressTrack;
+    ctx.fillStyle = mixColor(baseFill, statusColor, 0.18);
+    roundRect(ctx, x, y, badgeWidth, 17, 8);
     ctx.fill();
-    ctx.fillStyle = theme.colors.badgeText;
+    ctx.strokeStyle = mixColor(theme.colors.border, statusColor, 0.42);
+    ctx.stroke();
+    ctx.fillStyle = mixColor(theme.colors.text, statusColor, 0.36);
     ctx.font = '10px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
-    drawTruncatedText(ctx, style.status.label, x + badgeWidth / 2, y + 8, badgeWidth - 8);
+    drawTruncatedText(ctx, style.status.label, x + badgeWidth / 2, y + 8.5, badgeWidth - 8);
     ctx.textAlign = 'left';
   }
 
   #drawProgressCell(ctx, { state, rect, theme, style }) {
     if (state.progress === undefined) return this.#drawTextCell(ctx, { state, rect, theme, style, column: { align: 'right', value: () => '' }, node: {} });
+    const ratio = clamp01(state.progress);
     const barX = rect.x + 10;
-    const barY = rect.y + (rect.height - 8) / 2;
+    const barHeight = 7;
+    const barY = rect.y + (rect.height - barHeight) / 2;
     const barWidth = Math.max(20, rect.width - 20);
+    const fillColor = state.color ?? theme.colors.progressFill;
+    this.#drawMeterBar(ctx, barX, barY, barWidth, barHeight, ratio, fillColor, theme);
+  }
+
+  #drawMeterBar(ctx, x, y, width, height, ratio, fillColor, theme) {
+    const radius = height / 2;
     ctx.fillStyle = theme.colors.progressTrack;
-    ctx.fillRect(barX, barY, barWidth, 8);
-    ctx.fillStyle = state.color ?? theme.colors.progressFill;
-    ctx.fillRect(barX, barY, barWidth * clamp01(state.progress), 8);
+    roundRect(ctx, x, y, width, height, radius);
+    ctx.fill();
+    ctx.strokeStyle = mixColor(theme.colors.border, fillColor, 0.22);
+    ctx.stroke();
+
+    const fillWidth = width * clamp01(ratio);
+    if (fillWidth <= 0) return;
+    ctx.save();
+    roundRect(ctx, x, y, width, height, radius);
+    ctx.clip();
+    ctx.fillStyle = fillColor;
+    roundRect(ctx, x, y, Math.max(1, fillWidth), height, Math.min(radius, fillWidth / 2));
+    ctx.fill();
+    ctx.globalAlpha = 0.28;
+    ctx.fillStyle = mixColor(fillColor, '#ffffff', 0.38);
+    ctx.fillRect(x + 1, y + 1, Math.max(0, fillWidth - 2), 1);
+    ctx.restore();
   }
 
   #drawTextCell(ctx, { node, state, rect, column, theme }) {
@@ -578,15 +546,6 @@ function resolveNodeStyle(theme, node, state = {}) {
   };
 }
 
-function sameScrollIndicatorState(a, b) {
-  return Boolean(a) &&
-    a.scrollY === b.scrollY &&
-    a.contentHeight === b.contentHeight &&
-    a.rowViewportHeight === b.rowViewportHeight &&
-    a.viewportHeight === b.viewportHeight &&
-    a.rowCount === b.rowCount;
-}
-
 function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {
   const safeWidth = Math.max(1, width);
   const rightPadding = 14;

package/src/tree-view-controller.js

@@ -12,7 +12,9 @@ import {
   TreeViewViewport,
   VisibleRowModel,
 } from './core/index.js';
+import { CellEditorManager } from './inspector/cell-editor-manager.js';
 import { formatInspectorValue, getAtPath, inspectorColumns, inspectorPaneColumns, ModelInspectorBuilder, setAtPath } from './inspector/index.js';
+import { TreeViewInputController } from './input/tree-view-input-controller.js';
 import { TreeRowRenderer } from './renderers/index.js';
 
 export class TreeViewController {
@@ -40,6 +42,7 @@ export class TreeViewController {
     this.themeManager = options.themeManager ?? new ThemeManager();
     this.iconRegistry = options.iconRegistry ?? new IconRegistry();
     this.renderer = options.renderer ?? new TreeRowRenderer({ themeManager: this.themeManager, iconRegistry: this.iconRegistry });
+    this.nativeScrollbars = options.nativeScrollbars !== false;
     this.initialExpandDepth = options.initialExpandDepth ?? 1;
     this.searchHighlights = new Set();
     this.filterQuery = '';
@@ -57,20 +60,61 @@ export class TreeViewController {
     this.workerRevision = 0;
     this.sortValueSnapshot = null;
     this.inspector = null;
+    this.inputController = null;
+    this.cellEditor = null;
     this.scene = this.createRenderScene();
 
     if (options.canvas) this.initialize(options.canvas);
+    if (options.editable !== false && (options.host || options.editable)) this.attachCellEditor({ host: options.host });
+    if (options.canvas && options.input !== false) this.attachInput();
   }
 
   initialize(canvas) {
+    if (!canvas || typeof canvas.getContext !== 'function') {
+      throw new TypeError('TreeViewController.initialize requires an HTMLCanvasElement');
+    }
     this.canvas = canvas;
     this.renderer.initialize(canvas);
     this.renderer.setScene(this.scene);
     this.#resizeToCanvasClientSize();
     this.#observeCanvasSize();
+    this.#setupNativeScrollbars();
     return this;
   }
 
+  attachCellEditor(options = {}) {
+    if (!this.canvas) throw new Error('TreeViewController.attachCellEditor requires an initialized canvas');
+    this.cellEditor?.destroy?.();
+    this.cellEditor = new CellEditorManager({
+      controller: this,
+      host: options.host,
+    });
+    return this.cellEditor;
+  }
+
+  attachInput(options = {}) {
+    if (!this.canvas) throw new Error('TreeViewController.attachInput requires an initialized canvas');
+    this.inputController?.destroy?.();
+    this.inputController = new TreeViewInputController({
+      controller: this,
+      cellEditor: options.cellEditor ?? this.cellEditor,
+    });
+    return this.inputController;
+  }
+
+  destroy() {
+    this.inputController?.destroy?.();
+    this.cellEditor?.destroy?.();
+    this.disableWorkers();
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#nativeScroll?.destroy?.();
+    this.#nativeScroll = null;
+    this.inputController = null;
+    this.cellEditor = null;
+    this.canvas = null;
+  }
+
   on(type, listener) {
     return this.events.on(type, listener);
   }
@@ -281,9 +325,28 @@ export class TreeViewController {
     if (beforeRowHeight !== nextTheme.rowHeight || beforeIndentWidth !== nextTheme.indentWidth) {
       this.#rebuildRows();
     }
+    this.#nativeScroll?.applyTheme?.(nextTheme);
     this.events.emit('themechange', { theme: nextTheme });
   }
 
+  setLayoutMetrics(options = {}) {
+    const rowHeight = options.rowHeight ?? this.rowModel.rowHeight;
+    const indentWidth = options.indentWidth ?? this.rowModel.indentWidth;
+    const headerHeight = options.headerHeight ?? this.viewport.headerHeight;
+    assertPositiveNumber(rowHeight, 'rowHeight');
+    assertPositiveNumber(indentWidth, 'indentWidth');
+    assertNonNegativeNumber(headerHeight, 'headerHeight');
+    const rowsChanged = this.rowModel.rowHeight !== rowHeight || this.rowModel.indentWidth !== indentWidth;
+    this.rowModel.rowHeight = rowHeight;
+    this.rowModel.indentWidth = indentWidth;
+    this.viewport.rowHeight = rowHeight;
+    this.viewport.indentWidth = indentWidth;
+    this.viewport.headerHeight = headerHeight;
+    if (rowsChanged) this.#rebuildRows();
+    else this.#syncContentSize();
+    this.events.emit('layoutchange', this.getViewportState());
+  }
+
   registerIcon(name, imageOrUrl) {
     return this.iconRegistry.register(name, imageOrUrl);
   }
@@ -582,6 +645,11 @@ export class TreeViewController {
     this.events.emit('viewportchange', this.getViewportState());
   }
 
+  scrollTo(x, y) {
+    this.viewport.scrollTo(x, y);
+    this.events.emit('viewportchange', this.getViewportState());
+  }
+
   render(time = performance.now()) {
     this.renderMeasured(time);
   }
@@ -876,6 +944,132 @@ export class TreeViewController {
     if (width > 0 && height > 0) this.resize(width, height);
   }
 
+  #setupNativeScrollbars() {
+    if (!this.nativeScrollbars || !this.canvas || typeof document === 'undefined') return;
+    const host = this.canvas.parentElement;
+    if (!host) return;
+
+    this.#nativeScroll?.destroy?.();
+    ensureNativeScrollbarStyles(document);
+
+    const previousHostPosition = host.style.position;
+    let hostPositionChanged = false;
+    if (typeof getComputedStyle === 'function' && getComputedStyle(host).position === 'static') {
+      host.style.position = 'relative';
+      hostPositionChanged = true;
+    }
+
+    const vertical = document.createElement('div');
+    const verticalSpacer = document.createElement('div');
+    const horizontal = document.createElement('div');
+    const horizontalSpacer = document.createElement('div');
+    const corner = document.createElement('div');
+
+    vertical.className = 'virtual-tree-canvas-scrollbar virtual-tree-canvas-scrollbar-y';
+    horizontal.className = 'virtual-tree-canvas-scrollbar virtual-tree-canvas-scrollbar-x';
+    corner.className = 'virtual-tree-canvas-scrollbar-corner';
+    vertical.appendChild(verticalSpacer);
+    horizontal.appendChild(horizontalSpacer);
+    applyNativeScrollbarTheme([vertical, horizontal, corner], this.themeManager.get());
+
+    const size = nativeScrollbarSize();
+    Object.assign(vertical.style, {
+      position: 'absolute',
+      top: `${this.viewport.headerHeight}px`,
+      right: '0',
+      bottom: '0',
+      width: `${size}px`,
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      zIndex: '4',
+    });
+    Object.assign(horizontal.style, {
+      position: 'absolute',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      height: `${size}px`,
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      zIndex: '4',
+    });
+    Object.assign(corner.style, {
+      position: 'absolute',
+      right: '0',
+      bottom: '0',
+      width: `${size}px`,
+      height: `${size}px`,
+      zIndex: '4',
+      background: 'transparent',
+      pointerEvents: 'none',
+    });
+    Object.assign(verticalSpacer.style, {
+      width: '1px',
+      minHeight: '1px',
+    });
+    Object.assign(horizontalSpacer.style, {
+      height: '1px',
+      minWidth: '1px',
+    });
+
+    host.appendChild(vertical);
+    host.appendChild(horizontal);
+    host.appendChild(corner);
+
+    let syncing = false;
+    const sync = () => {
+      const maxX = Math.max(0, this.viewport.contentWidth - this.viewport.viewportWidth);
+      const maxY = Math.max(0, this.viewport.contentHeight - this.viewport.rowViewportHeight);
+      const showX = maxX > 0;
+      const showY = maxY > 0;
+
+      vertical.style.display = showY ? 'block' : 'none';
+      horizontal.style.display = showX ? 'block' : 'none';
+      corner.style.display = showX && showY ? 'block' : 'none';
+      vertical.style.bottom = showX ? `${size}px` : '0';
+      horizontal.style.right = showY ? `${size}px` : '0';
+      vertical.style.top = `${this.viewport.headerHeight}px`;
+
+      verticalSpacer.style.height = `${Math.ceil(maxY + vertical.clientHeight)}px`;
+      horizontalSpacer.style.width = `${Math.ceil(maxX + horizontal.clientWidth)}px`;
+
+      syncing = true;
+      vertical.scrollTop = this.viewport.scrollY;
+      horizontal.scrollLeft = this.viewport.scrollX;
+      syncing = false;
+    };
+    const onVerticalScroll = () => {
+      if (syncing) return;
+      this.viewport.scrollTo(this.viewport.scrollX, vertical.scrollTop);
+      this.events.emit('viewportchange', this.getViewportState());
+    };
+    const onHorizontalScroll = () => {
+      if (syncing) return;
+      this.viewport.scrollTo(horizontal.scrollLeft, this.viewport.scrollY);
+      this.events.emit('viewportchange', this.getViewportState());
+    };
+    const onViewportChange = () => sync();
+
+    vertical.addEventListener('scroll', onVerticalScroll, { passive: true });
+    horizontal.addEventListener('scroll', onHorizontalScroll, { passive: true });
+    this.viewport.addEventListener('change', onViewportChange);
+    sync();
+
+    this.#nativeScroll = {
+      sync,
+      applyTheme: (theme) => applyNativeScrollbarTheme([vertical, horizontal, corner], theme),
+      destroy: () => {
+        vertical.removeEventListener('scroll', onVerticalScroll);
+        horizontal.removeEventListener('scroll', onHorizontalScroll);
+        this.viewport.removeEventListener('change', onViewportChange);
+        vertical.remove();
+        horizontal.remove();
+        corner.remove();
+        if (hostPositionChanged) host.style.position = previousHostPosition;
+      },
+    };
+  }
+
   #computeInspectorPaneLabelEnd(visibleRange) {
     const column = this.columnModel.columns.find((item) => item.kind === 'inspectorPane');
     if (!column) return 0;
@@ -938,6 +1132,145 @@ export class TreeViewController {
   }
 
   #resizeObserver = null;
+  #nativeScroll = null;
+}
+
+const NATIVE_SCROLLBAR_STYLE_ID = 'virtual-tree-canvas-native-scrollbar-style';
+
+function ensureNativeScrollbarStyles(doc) {
+  if (!doc || typeof doc.createElement !== 'function') return;
+  if (typeof doc.getElementById === 'function' && doc.getElementById(NATIVE_SCROLLBAR_STYLE_ID)) return;
+  const style = doc.createElement('style');
+  style.id = NATIVE_SCROLLBAR_STYLE_ID;
+  style.textContent = `
+.virtual-tree-canvas-scrollbar {
+  --vtc-scrollbar-size: 12px;
+  --vtc-scrollbar-track: rgba(15, 23, 42, 0.32);
+  --vtc-scrollbar-thumb: rgba(148, 163, 184, 0.58);
+  --vtc-scrollbar-thumb-hover: rgba(148, 163, 184, 0.78);
+  --vtc-scrollbar-thumb-active: rgba(56, 189, 248, 0.76);
+  --vtc-scrollbar-thumb-border: rgba(255, 255, 255, 0.08);
+  background: var(--vtc-scrollbar-track);
+  scrollbar-color: var(--vtc-scrollbar-thumb) var(--vtc-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+.virtual-tree-canvas-scrollbar:hover {
+  scrollbar-color: var(--vtc-scrollbar-thumb-hover) var(--vtc-scrollbar-track);
+}
+
+.virtual-tree-canvas-scrollbar::-webkit-scrollbar {
+  width: var(--vtc-scrollbar-size);
+  height: var(--vtc-scrollbar-size);
+}
+
+.virtual-tree-canvas-scrollbar::-webkit-scrollbar-track {
+  background: var(--vtc-scrollbar-track);
+}
+
+.virtual-tree-canvas-scrollbar::-webkit-scrollbar-thumb {
+  min-width: 28px;
+  min-height: 28px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, var(--vtc-scrollbar-thumb-highlight), transparent 52%),
+    var(--vtc-scrollbar-thumb);
+  background-clip: content-box;
+  box-shadow: inset 0 0 0 1px var(--vtc-scrollbar-thumb-border);
+}
+
+.virtual-tree-canvas-scrollbar:hover::-webkit-scrollbar-thumb {
+  background:
+    linear-gradient(180deg, var(--vtc-scrollbar-thumb-highlight), transparent 52%),
+    var(--vtc-scrollbar-thumb-hover);
+  background-clip: content-box;
+}
+
+.virtual-tree-canvas-scrollbar::-webkit-scrollbar-thumb:active {
+  background:
+    linear-gradient(180deg, var(--vtc-scrollbar-thumb-highlight), transparent 52%),
+    var(--vtc-scrollbar-thumb-active);
+  background-clip: content-box;
+}
+
+.virtual-tree-canvas-scrollbar::-webkit-scrollbar-corner,
+.virtual-tree-canvas-scrollbar-corner {
+  background: var(--vtc-scrollbar-track);
+}
+`;
+  const target = doc.head ?? doc.body ?? doc.documentElement;
+  target?.appendChild?.(style);
+}
+
+function applyNativeScrollbarTheme(elements, theme) {
+  const colors = theme?.colors ?? {};
+  const track = alphaHex(colors.row ?? colors.background ?? '#0b1020', 0.74);
+  const thumb = mixHex(colors.borderStrong ?? colors.border ?? '#334155', colors.textMuted ?? colors.focus ?? '#94a3b8', 0.55);
+  const hover = mixHex(thumb, colors.focus ?? '#38bdf8', 0.32);
+  const active = mixHex(thumb, colors.focus ?? '#38bdf8', 0.52);
+  const highlight = alphaHex('#ffffff', 0.2);
+  const border = alphaHex('#ffffff', 0.09);
+  for (const element of elements) {
+    if (!element?.style?.setProperty) continue;
+    element.style.setProperty('--vtc-scrollbar-track', track);
+    element.style.setProperty('--vtc-scrollbar-thumb', thumb);
+    element.style.setProperty('--vtc-scrollbar-thumb-hover', hover);
+    element.style.setProperty('--vtc-scrollbar-thumb-active', active);
+    element.style.setProperty('--vtc-scrollbar-thumb-highlight', highlight);
+    element.style.setProperty('--vtc-scrollbar-thumb-border', border);
+  }
+}
+
+function mixHex(a, b, amount) {
+  const from = parseHexColor(a);
+  const to = parseHexColor(b);
+  if (!from || !to) return amount >= 0.5 ? b : a;
+  const t = Math.max(0, Math.min(1, amount));
+  const value = from.map((channel, index) => Math.round(channel + (to[index] - channel) * t));
+  return `rgb(${value[0]}, ${value[1]}, ${value[2]})`;
+}
+
+function alphaHex(value, alpha) {
+  const color = parseHexColor(value);
+  if (!color) return value;
+  return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${Math.max(0, Math.min(1, alpha))})`;
+}
+
+function parseHexColor(value) {
+  const text = String(value ?? '').trim();
+  const match = /^#([0-9a-f]{6})$/i.exec(text);
+  if (!match) return null;
+  const number = Number.parseInt(match[1], 16);
+  return [(number >> 16) & 255, (number >> 8) & 255, number & 255];
+}
+
+function nativeScrollbarSize() {
+  if (typeof document === 'undefined') return 14;
+  const probe = document.createElement('div');
+  Object.assign(probe.style, {
+    position: 'absolute',
+    top: '-9999px',
+    width: '100px',
+    height: '100px',
+    overflow: 'scroll',
+  });
+  document.body?.appendChild(probe);
+  const size = Math.max(10, probe.offsetWidth - probe.clientWidth || 14);
+  probe.remove();
+  return size;
+}
+
+function assertPositiveNumber(value, name) {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+    throw new TypeError(`${name} must be a positive number`);
+  }
+}
+
+function assertNonNegativeNumber(value, name) {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
+    throw new TypeError(`${name} must be a non-negative number`);
+  }
 }
 
 function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {