virtual-tree-canvas 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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

@@ -71,7 +71,7 @@ export class TreeViewController {
   rowModel: any;
   expansion: any;
   selection: any;
-  constructor(options?: Record<string, any>);
+  constructor(options?: Record<string, any> & { nativeScrollbars?: boolean });
   on(type: string, listener: (event: any) => void): any;
   off(type: string, listener: (event: any) => void): void;
   setData(nodes: TreeNode[]): void;
@@ -89,6 +89,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;

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

@@ -101,7 +101,10 @@ export class CellEditorManager {
       padding: data.editorType === 'color' ? '0 2px' : data.editorType === 'select' ? '0 22px 0 8px' : '0 8px',
       textAlign: data.editorType === 'number' || data.editorType === 'range' ? 'right' : 'left',
     });
+    let committed = false;
     const commit = () => {
+      if (committed) return;
+      committed = true;
       const nextValue = parseEditorValue(element, data);
       this.controller.updateInspectorValue(node.id, nextValue, data.editorType);
       this.#removeOverlay();
@@ -110,6 +113,9 @@ export class CellEditorManager {
       if (event.key === 'Enter') commit();
       else if (event.key === 'Escape') this.#removeOverlay();
     });
+    if (data.editorType === 'select') {
+      element.addEventListener('change', commit);
+    }
     element.addEventListener('blur', commit);
     ensureOverlayHost(this.host);
     this.host.append(element);

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

@@ -40,6 +40,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 = '';
@@ -68,6 +69,7 @@ export class TreeViewController {
     this.renderer.setScene(this.scene);
     this.#resizeToCanvasClientSize();
     this.#observeCanvasSize();
+    this.#setupNativeScrollbars();
     return this;
   }
 
@@ -281,6 +283,7 @@ export class TreeViewController {
     if (beforeRowHeight !== nextTheme.rowHeight || beforeIndentWidth !== nextTheme.indentWidth) {
       this.#rebuildRows();
     }
+    this.#nativeScroll?.applyTheme?.(nextTheme);
     this.events.emit('themechange', { theme: nextTheme });
   }
 
@@ -582,6 +585,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 +884,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 +1072,133 @@ 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 inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {