virtual-tree-canvas 0.3.0 → 0.3.2

package/README.md

@@ -131,7 +131,8 @@ tree.setModel(model, meta, {
   presentation: 'pane',
   flatRoot: true,    // render root properties directly
   enforceMeta: true, // fields without metadata are readonly/disabled
-  filter: true       // use the header as a filter input
+  filter: true,      // use the header as a filter input
+  markUpdated: false // do not show update dots for local user edits
 });
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "High-performance Canvas2D virtual tree/table widget for very large hierarchical datasets.",
   "type": "module",
   "main": "./src/index.js",
@@ -29,7 +29,7 @@
   },
   "scripts": {
     "demo": "python3 -m http.server 4173 --bind localhost",
-    "test": "node --test test/tree-view-controller.test.js test/theme-icons.test.js test/tree-columns.test.js test/benchmark.test.js test/tree-worker-operations.test.js test/model-inspector.test.js"
+    "test": "node --test test/tree-view-controller.test.js test/theme-icons.test.js test/tree-columns.test.js test/benchmark.test.js test/tree-worker-operations.test.js test/model-inspector.test.js test/dynamic-state.test.js"
   },
   "keywords": [
     "tree",

package/src/core/dynamic-state.js

@@ -0,0 +1,47 @@
+const hasOwn = Object.prototype.hasOwnProperty;
+
+const knownDynamicStateKeys = new Set([
+  'value',
+  'status',
+  'progress',
+  'pulse',
+  'color',
+  'selected',
+  'highlighted',
+  'visible',
+  'updated',
+  'updatedAt',
+  'icon',
+]);
+
+/**
+ * @param {import('./types.js').NodeDynamicState} target
+ * @param {import('./types.js').NodeDynamicState} state
+ */
+export function mergeDynamicState(target, state) {
+  if (!state) return target;
+
+  if (hasOwn.call(state, 'value') && target.value !== state.value) target.value = state.value;
+  if (hasOwn.call(state, 'status') && target.status !== state.status) target.status = state.status;
+  if (hasOwn.call(state, 'progress') && target.progress !== state.progress) target.progress = state.progress;
+  if (hasOwn.call(state, 'pulse') && target.pulse !== state.pulse) target.pulse = state.pulse;
+  if (hasOwn.call(state, 'color') && target.color !== state.color) target.color = state.color;
+  if (hasOwn.call(state, 'selected') && target.selected !== state.selected) target.selected = state.selected;
+  if (hasOwn.call(state, 'highlighted') && target.highlighted !== state.highlighted) target.highlighted = state.highlighted;
+  if (hasOwn.call(state, 'visible') && target.visible !== state.visible) target.visible = state.visible;
+  if (hasOwn.call(state, 'updated') && target.updated !== state.updated) target.updated = state.updated;
+  if (hasOwn.call(state, 'updatedAt') && target.updatedAt !== state.updatedAt) target.updatedAt = state.updatedAt;
+  if (hasOwn.call(state, 'icon') && target.icon !== state.icon) target.icon = state.icon;
+
+  for (const key in state) {
+    if (!hasOwn.call(state, key) || knownDynamicStateKeys.has(key)) continue;
+    if (target[key] !== state[key]) target[key] = state[key];
+  }
+
+  return target;
+}
+
+/** @param {import('./types.js').NodeDynamicState} state */
+export function cloneDynamicState(state) {
+  return mergeDynamicState({}, state);
+}

package/src/core/icon-registry.js

@@ -84,6 +84,9 @@ export class IconRegistry {
     this.register('control', drawControl);
     this.register('situation', drawSituation);
     this.register('damage', drawDamage);
+    this.register('inspector-object', drawInspectorObject);
+    this.register('inspector-array', drawInspectorArray);
+    this.register('inspector-value', drawInspectorValue);
   }
 }
 
@@ -420,3 +423,44 @@ function drawDamage(ctx, x, y, size, color) {
   ctx.lineTo(x + size * 0.82, y + size * 0.18);
   ctx.stroke();
 }
+
+function drawInspectorObject(ctx, x, y, size, color) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.2;
+  const left = x + size * 0.24;
+  const top = y + size * 0.22;
+  const width = size * 0.52;
+  const height = size * 0.56;
+  ctx.strokeRect(left, top, width, height);
+  ctx.beginPath();
+  ctx.moveTo(left + width * 0.28, top);
+  ctx.lineTo(left + width * 0.28, top + height);
+  ctx.moveTo(left + width * 0.72, top);
+  ctx.lineTo(left + width * 0.72, top + height);
+  ctx.stroke();
+}
+
+function drawInspectorArray(ctx, x, y, size, color) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.2;
+  const cx = x + size * 0.5;
+  const cy = y + size * 0.5;
+  ctx.beginPath();
+  ctx.arc(cx - size * 0.18, cy, size * 0.18, 0, Math.PI * 2);
+  ctx.arc(cx + size * 0.18, cy, size * 0.18, 0, Math.PI * 2);
+  ctx.stroke();
+}
+
+function drawInspectorValue(ctx, x, y, size, color) {
+  const cx = x + size * 0.5;
+  const cy = y + size * 0.5;
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1.25;
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.3, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.11, 0, Math.PI * 2);
+  ctx.fill();
+}

package/src/core/patch-batcher.js

@@ -1,3 +1,5 @@
+import { cloneDynamicState, mergeDynamicState } from './dynamic-state.js';
+
 export class PatchBatcher {
   constructor() {
     /** @type {Map<string, import('./types.js').NodeDynamicState>} */
@@ -7,8 +9,8 @@ export class PatchBatcher {
   /** @param {string} id @param {import('./types.js').NodeDynamicState} state */
   set(id, state) {
     const current = this.pending.get(id);
-    if (current) Object.assign(current, state);
-    else this.pending.set(id, { ...state });
+    if (current) mergeDynamicState(current, state);
+    else this.pending.set(id, cloneDynamicState(state));
   }
 
   /** @param {Array<import('./types.js').DynamicPatch>} patches */
@@ -26,4 +28,3 @@ export class PatchBatcher {
     return this.pending.size;
   }
 }
-

package/src/core/theme-manager.js

@@ -1,7 +1,8 @@
 export const darkTheme = {
   rowHeight: 28,
   indentWidth: 18,
-  font: '12px system-ui, sans-serif',
+  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',
@@ -37,6 +38,12 @@ export const darkTheme = {
     warning: { icon: 'warning', color: '#facc15' },
     error: { icon: 'error', color: '#ef4444' },
     task: { icon: 'task', color: '#f97316' },
+    object: { icon: 'inspector-object', color: '#7dd3fc' },
+    array: { icon: 'inspector-array', color: '#a78bfa' },
+    string: { icon: 'inspector-value', color: '#94a3b8' },
+    number: { icon: 'inspector-value', color: '#34d399' },
+    boolean: { icon: 'inspector-value', color: '#22c55e' },
+    null: { icon: 'inspector-value', color: '#64748b' },
   },
   statuses: {
     0: { label: 'OK', color: '#22c55e' },

package/src/core/tree-model.js

@@ -1,4 +1,5 @@
 import { TreeIndex } from './tree-index.js';
+import { mergeDynamicState } from './dynamic-state.js';
 
 /**
  * Owns structural nodes, expanded state, and per-node dynamic state.
@@ -68,7 +69,7 @@ export class TreeModel extends EventTarget {
     for (const patch of patches) {
       const current = this.dynamicState.get(patch.id);
       if (!current) continue;
-      Object.assign(current, patch.state);
+      mergeDynamicState(current, patch.state);
     }
   }
 

package/src/core/types.js

@@ -20,6 +20,9 @@
  * @property {boolean} [selected]
  * @property {boolean} [highlighted]
  * @property {boolean} [visible]
+ * @property {boolean} [updated]
+ * @property {number} [updatedAt]
+ * @property {string} [icon]
  */
 
 /**
@@ -41,4 +44,3 @@
  * @property {string} id
  * @property {NodeDynamicState} state
  */
-

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

@@ -61,18 +61,24 @@ export class TreeViewInputController {
       return;
     }
     const hit = this.#hitTest(event);
-    this.canvas.style.cursor = hit?.area === 'header' && hit.part === 'resize' ? 'col-resize' : '';
+    this.canvas.style.cursor = cursorForHit(hit);
     const id = hit?.row?.nodeId ?? null;
-    if (id === this.hoveredId) return;
+    const key = hitKey(hit);
+    if (id === this.hoveredId && key === this.hoveredHitKey) return;
     this.hoveredId = id;
-    this.controller?.setHover(id);
+    this.hoveredHitKey = key;
+    if (this.controller?.setHoverHit) this.controller.setHoverHit(hit);
+    else this.controller?.setHover(id);
     this.onHoverChanged?.(id);
   };
 
   #onMouseLeave = () => {
     if (!this.resizeDrag) this.canvas.style.cursor = '';
     this.hoveredId = null;
-    this.controller?.setHover(null);
+    this.hoveredHitKey = null;
+    this.controller?.setActiveHit?.(null);
+    if (this.controller?.setHoverHit) this.controller.setHoverHit(null);
+    else this.controller?.setHover(null);
     this.onHoverChanged?.(null);
   };
 
@@ -118,6 +124,7 @@ export class TreeViewInputController {
 
   #onMouseDown = (event) => {
     const hit = this.#hitTest(event);
+    this.controller?.setActiveHit?.(hit);
     if (this.cellEditor?.handlePointerDown(event, hit)) {
       event.preventDefault();
       return;
@@ -136,6 +143,7 @@ export class TreeViewInputController {
   #onMouseUp = () => {
     this.resizeDrag = null;
     this.canvas.style.cursor = '';
+    this.controller?.setActiveHit?.(null);
   };
 
   #onKeyDown = (event) => {
@@ -234,3 +242,18 @@ export class TreeViewInputController {
     return { area: 'row', row, x, y, part };
   }
 }
+
+function cursorForHit(hit) {
+  if (hit?.area === 'header' && hit.part === 'resize') return 'col-resize';
+  if (hit?.area === 'header' && hit.part === 'filter') return 'text';
+  if (hit?.area !== 'row') return '';
+  if (hit.part === 'button' || hit.part === 'checkbox' || hit.part === 'arrayAdd' || hit.part === 'arrayRemove' || hit.part === 'chevron') return 'pointer';
+  if (hit.part === 'editor' || hit.part === 'number') return 'text';
+  if (hit.part === 'range') return 'ew-resize';
+  return '';
+}
+
+function hitKey(hit) {
+  if (!hit?.row || !hit.column) return null;
+  return `${hit.row.nodeId}:${hit.column.id}:${hit.part}`;
+}

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

@@ -78,6 +78,7 @@ export class CellEditorManager {
     const rect = this.#clampRectToHost(this.#overlayRect(hit), 4);
     const hostRect = this.host.getBoundingClientRect();
     const element = createEditorElement(data);
+    element.className = `vtc-editor vtc-editor-${data.editorType}`;
     Object.assign(element.style, {
       position: 'absolute',
       left: `${rect.x - hostRect.left}px`,
@@ -90,12 +91,14 @@ export class CellEditorManager {
       boxSizing: 'border-box',
       margin: '0',
       outline: 'none',
-      border: '1px solid #38bdf8',
-      borderRadius: '3px',
-      background: '#0b1020',
+      appearance: 'none',
+      border: '1px solid rgba(56, 189, 248, 0.65)',
+      borderRadius: '6px',
+      background: '#0f172a',
       color: '#e5e7eb',
-      font: '12px system-ui, sans-serif',
-      padding: data.editorType === 'color' ? '0 2px' : '0 6px',
+      boxShadow: '0 0 0 1px rgba(15, 23, 42, 0.8), 0 8px 20px rgba(0, 0, 0, 0.28)',
+      font: editorFont(data),
+      padding: data.editorType === 'color' ? '0 2px' : data.editorType === 'select' ? '0 22px 0 8px' : '0 8px',
       textAlign: data.editorType === 'number' || data.editorType === 'range' ? 'right' : 'left',
     });
     const commit = () => {
@@ -154,7 +157,7 @@ export class CellEditorManager {
       borderRadius: '4px',
       background: '#0b1020',
       color: '#e5e7eb',
-      font: '12px system-ui, sans-serif',
+      font: SANS_FONT,
       padding: '0 8px',
     });
     element.addEventListener('input', () => this.controller.setFilter(element.value));
@@ -267,7 +270,10 @@ function createEditorElement(data) {
     return select;
   }
   const input = document.createElement('input');
-  input.type = data.editorType === 'color' ? 'color' : data.editorType === 'number' || data.editorType === 'range' ? 'number' : 'text';
+  input.type = data.editorType === 'color' ? 'color' : 'text';
+  if (data.editorType === 'number' || data.editorType === 'range') {
+    input.inputMode = data.meta.integer ? 'numeric' : 'decimal';
+  }
   input.value = data.value ?? '';
   if (data.meta.min !== undefined) input.min = data.meta.min;
   if (data.meta.max !== undefined) input.max = data.meta.max;
@@ -288,7 +294,13 @@ function ensureOverlayHost(host) {
 }
 
 function parseEditorValue(element, data) {
-  if (data.editorType === 'number' || data.editorType === 'range') return data.meta.integer ? Number.parseInt(element.value, 10) : Number(element.value);
+  if (data.editorType === 'number' || data.editorType === 'range') {
+    const value = data.meta.integer ? Number.parseInt(element.value, 10) : Number(element.value);
+    if (!Number.isFinite(value)) return data.value;
+    const min = Number.isFinite(data.meta.min) ? data.meta.min : -Infinity;
+    const max = Number.isFinite(data.meta.max) ? data.meta.max : Infinity;
+    return Math.max(min, Math.min(max, value));
+  }
   if (data.editorType === 'select') {
     const values = Object.values(data.meta.options ?? {});
     const match = values.find((value) => String(value) === element.value);
@@ -296,3 +308,10 @@ function parseEditorValue(element, data) {
   }
   return element.value;
 }
+
+const SANS_FONT = '12px Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
+const MONO_FONT = '12px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace';
+
+function editorFont(data) {
+  return data.editorType === 'number' || data.editorType === 'range' ? MONO_FONT : SANS_FONT;
+}

package/src/renderers/canvas2d-renderer.js

@@ -28,19 +28,21 @@ export class Canvas2DRenderer {
     if (!this.canvas || !this.ctx || !this.scene) return;
     const { viewport } = frameState;
     const dpr = Math.max(1, window.devicePixelRatio || 1);
-    const width = Math.floor(this.canvas.clientWidth * dpr);
-    const height = Math.floor(this.canvas.clientHeight * dpr);
+    const viewportWidth = Math.max(0, viewport.viewportWidth);
+    const viewportHeight = Math.max(0, viewport.viewportHeight);
+    if (viewportWidth <= 0 || viewportHeight <= 0) return;
+    const width = Math.floor(viewportWidth * dpr);
+    const height = Math.floor(viewportHeight * dpr);
     if (this.canvas.width !== width || this.canvas.height !== height) {
       this.canvas.width = width;
       this.canvas.height = height;
-      viewport.resize(this.canvas.clientWidth, this.canvas.clientHeight);
     }
 
     const ctx = this.ctx;
     const theme = this.themeManager?.get() ?? {};
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = theme.background ?? '#101419';
-    ctx.fillRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+    ctx.fillRect(0, 0, viewportWidth, viewportHeight);
 
     this.visibleNodeIndices = cullLayoutNodes(this.scene.layout.nodes, viewport.getWorldBounds());
     const visibleSet = new Set(this.visibleNodeIndices);

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

@@ -35,19 +35,21 @@ export class TreeRowRenderer {
     if (!this.canvas || !this.ctx || !this.scene) return;
     const { viewport, theme } = this.scene;
     const dpr = Math.max(1, window.devicePixelRatio || 1);
-    const width = Math.floor(this.canvas.clientWidth * dpr);
-    const height = Math.floor(this.canvas.clientHeight * dpr);
+    const viewportWidth = Math.max(0, viewport.viewportWidth);
+    const viewportHeight = Math.max(0, viewport.viewportHeight);
+    if (viewportWidth <= 0 || viewportHeight <= 0) return;
+    const width = Math.floor(viewportWidth * dpr);
+    const height = Math.floor(viewportHeight * dpr);
     if (this.canvas.width !== width || this.canvas.height !== height) {
       this.canvas.width = width;
       this.canvas.height = height;
-      viewport.resize(this.canvas.clientWidth, this.canvas.clientHeight);
     }
 
     const ctx = this.ctx;
     const colors = theme.colors;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = colors.background;
-    ctx.fillRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+    ctx.fillRect(0, 0, viewportWidth, viewportHeight);
 
     ctx.save();
     ctx.translate(viewport.renderInsetX ?? 0, viewport.renderInsetY ?? 0);
@@ -76,7 +78,7 @@ export class TreeRowRenderer {
         drawTruncatedText(ctx, column.label, column.x + 10, viewport.headerHeight / 2, column.width - 20);
       }
       if (sort?.columnId === column.id && sort.direction) {
-        drawTruncatedText(ctx, sort.direction === 'asc' ? '^' : 'v', column.x + column.width - 16, viewport.headerHeight / 2, 12);
+        this.#drawSortIndicator(ctx, column.x + column.width - 16, viewport.headerHeight / 2, sort.direction, theme);
       }
       ctx.strokeStyle = colors.border;
       ctx.beginPath();
@@ -110,6 +112,22 @@ export class TreeRowRenderer {
     drawTruncatedText(ctx, filterQuery || 'Filter inspector', x + 8, viewport.headerHeight / 2, width - 16);
   }
 
+  #drawSortIndicator(ctx, x, y, direction, theme) {
+    ctx.fillStyle = theme.colors.focus;
+    ctx.beginPath();
+    if (direction === 'asc') {
+      ctx.moveTo(x, y + 3);
+      ctx.lineTo(x + 5, y - 3);
+      ctx.lineTo(x + 10, y + 3);
+    } else {
+      ctx.moveTo(x, y - 3);
+      ctx.lineTo(x + 5, y + 3);
+      ctx.lineTo(x + 10, y - 3);
+    }
+    ctx.closePath();
+    ctx.fill();
+  }
+
   #drawRows(ctx) {
     const { rows, visibleRange, viewport } = this.scene;
     this.renderedRows = visibleRange.count;
@@ -176,7 +194,7 @@ export class TreeRowRenderer {
   }
 
   #drawRow(ctx, row) {
-    const { columns, nodes, dynamicState, selection, hoverNodeId, focusNodeId, searchMatches, theme, viewport } = this.scene;
+    const { columns, nodes, dynamicState, selection, hoverNodeId, hoverPart, activeNodeId, activePart, focusNodeId, searchMatches, theme, viewport } = this.scene;
     const node = nodes[row.nodeIndex];
     const state = dynamicState.get(row.nodeId) ?? {};
     const style = resolveNodeStyle(theme, node, state);
@@ -196,7 +214,19 @@ export class TreeRowRenderer {
 
     for (const column of columns) {
       const rect = { x: column.x, y, width: column.width, height: row.height };
-      this.#drawCell(ctx, { node, state, row, column, rect, theme, style });
+      this.#drawCell(ctx, {
+        node,
+        state,
+        row,
+        column,
+        rect,
+        theme,
+        style,
+        selected,
+        hovered,
+        hoverPart: hoverNodeId === row.nodeId ? hoverPart : null,
+        activePart: activeNodeId === row.nodeId ? activePart : null,
+      });
       ctx.strokeStyle = colors.border;
       ctx.beginPath();
       ctx.moveTo(column.x + column.width + 0.5, y);
@@ -233,7 +263,7 @@ export class TreeRowRenderer {
     else this.#drawTextCell(ctx, cell);
   }
 
-  #drawInspectorPaneCell(ctx, { node, row, rect, theme, style }) {
+  #drawInspectorPaneCell(ctx, { node, row, rect, theme, style, hovered, hoverPart, activePart }) {
     const visibleRight = this.scene.viewport.scrollX + this.scene.viewport.viewportWidth;
     rect = { ...rect, width: Math.max(1, Math.min(rect.x + rect.width, visibleRight) - rect.x) };
     const data = node.data ?? {};
@@ -270,13 +300,22 @@ export class TreeRowRenderer {
     if (data.valueType === 'array') {
       ctx.fillStyle = colors.textMuted;
       drawTruncatedText(ctx, data.valueText, editorX, cy, Math.max(20, editorWidth - 58));
-      this.#drawSmallButton(ctx, rect.x + rect.width - 54, rect.y + 5, 22, rect.height - 10, '+', theme);
-      this.#drawSmallButton(ctx, rect.x + rect.width - 28, rect.y + 5, 22, rect.height - 10, '-', theme);
+      this.#drawSmallButton(ctx, rect.x + rect.width - 54, rect.y + 5, 22, rect.height - 10, '+', theme, {
+        hovered: hovered && hoverPart === 'arrayAdd',
+        active: activePart === 'arrayAdd',
+      });
+      this.#drawSmallButton(ctx, rect.x + rect.width - 28, rect.y + 5, 22, rect.height - 10, '-', theme, {
+        hovered: hovered && hoverPart === 'arrayRemove',
+        active: activePart === 'arrayRemove',
+      });
     } else {
       this.#drawInspectorValueCell(ctx, {
         node,
         rect: { x: editorX, y: rect.y, width: editorWidth, height: rect.height },
         theme,
+        hovered,
+        hoverPart,
+        activePart,
         suppressUpdatedMarker: true,
       });
     }
@@ -284,7 +323,7 @@ export class TreeRowRenderer {
     ctx.globalAlpha = 1;
   }
 
-  #drawInspectorValueCell(ctx, { node, rect, theme, suppressUpdatedMarker = false }) {
+  #drawInspectorValueCell(ctx, { node, rect, theme, hovered = false, hoverPart = null, activePart = null, suppressUpdatedMarker = false }) {
     const data = node.data ?? {};
     const meta = data.meta ?? {};
     const disabled = data.disabled;
@@ -299,9 +338,12 @@ export class TreeRowRenderer {
     ctx.globalAlpha = disabled ? DISABLED_ALPHA : 1;
 
     if (data.editorType === 'checkbox') {
-      this.#drawCheckbox(ctx, x, rect.y + rect.height / 2 - 7, Boolean(data.value), theme);
+      this.#drawCheckbox(ctx, x, rect.y + rect.height / 2 - 8, Boolean(data.value), theme);
     } else if (data.editorType === 'range') {
-      this.#drawInspectorRange(ctx, x, rect.y + rect.height / 2 - 4, width, data, theme);
+      this.#drawInspectorRange(ctx, x, rect.y + rect.height / 2 - 4, width, data, theme, {
+        hoveredNumber: hovered && hoverPart === 'number',
+        activeNumber: activePart === 'number',
+      });
     } else if (data.editorType === 'color') {
       ctx.fillStyle = String(data.value || '#000000');
       ctx.fillRect(x, y + 2, 28, height - 4);
@@ -309,20 +351,25 @@ export class TreeRowRenderer {
       ctx.strokeRect(x + 0.5, y + 2.5, 28, height - 4);
       this.#drawMutedText(ctx, String(data.value ?? ''), x + 38, rect.y + rect.height / 2, width - 38, theme);
     } else if (data.editorType === 'button') {
-      ctx.fillStyle = readonly || disabled ? theme.colors.progressTrack : theme.colors.rowHover;
-      roundRect(ctx, x, y, meta.fullWidthButton ? width : Math.min(width, 140), height, 4);
-      ctx.fill();
+      const buttonWidth = meta.fullWidthButton ? width : Math.min(width, 140);
+      this.#drawControlSurface(ctx, x, y, buttonWidth, height, theme, {
+        hovered: hovered && hoverPart === 'button',
+        active: activePart === 'button',
+        disabled: readonly || disabled,
+      });
       ctx.fillStyle = theme.colors.text;
       ctx.textAlign = 'center';
-      drawTruncatedText(ctx, meta.button ?? node.label, x + (meta.fullWidthButton ? width : Math.min(width, 140)) / 2, rect.y + rect.height / 2, Math.max(10, (meta.fullWidthButton ? width : Math.min(width, 140)) - 12));
+      drawTruncatedText(ctx, meta.button ?? node.label, x + buttonWidth / 2, rect.y + rect.height / 2, Math.max(10, buttonWidth - 12));
       ctx.textAlign = 'left';
     } else if (data.editorType === 'select') {
-      ctx.fillStyle = theme.colors.rowHover;
-      roundRect(ctx, x, y, Math.min(width, 180), height, 4);
-      ctx.fill();
-      this.#drawMutedText(ctx, data.valueText, x + 8, rect.y + rect.height / 2, Math.min(width, 180) - 22, theme);
-      ctx.fillStyle = theme.colors.chevron;
-      drawTruncatedText(ctx, 'v', x + Math.min(width, 180) - 14, rect.y + rect.height / 2, 10);
+      const selectWidth = Math.min(width, 180);
+      this.#drawControlSurface(ctx, x, y, selectWidth, height, theme, {
+        hovered: hovered && hoverPart === 'editor',
+        active: activePart === 'editor',
+        disabled: readonly || disabled,
+      });
+      this.#drawMutedText(ctx, data.valueText, x + 8, rect.y + rect.height / 2, selectWidth - 30, theme);
+      this.#drawSelectChevron(ctx, x + selectWidth - 18, rect.y + rect.height / 2, theme, disabled);
     } else {
       this.#drawMutedText(ctx, data.valueText, x, rect.y + rect.height / 2, width, theme, readonly);
     }
@@ -346,7 +393,7 @@ export class TreeRowRenderer {
   }
 
   #drawInspectorTypeCell(ctx, { node, rect, theme }) {
-    this.#drawMutedText(ctx, node.data?.valueType ?? '', rect.x + 10, rect.y + rect.height / 2, rect.width - 20, theme);
+    this.#drawMutedText(ctx, node.data?.valueType ?? '', rect.x + 10, rect.y + rect.height / 2, rect.width - 20, theme, false, theme.monoFont);
   }
 
   #drawInspectorDescriptionCell(ctx, { node, rect, theme }) {
@@ -354,20 +401,18 @@ export class TreeRowRenderer {
   }
 
   #drawCheckbox(ctx, x, y, checked, theme) {
-    ctx.strokeStyle = theme.colors.textMuted;
-    ctx.strokeRect(x + 0.5, y + 0.5, 14, 14);
-    if (!checked) return;
-    ctx.strokeStyle = theme.colors.progressFill;
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(x + 3, y + 7);
-    ctx.lineTo(x + 6, y + 11);
-    ctx.lineTo(x + 12, y + 3);
+    roundRect(ctx, x, y, 16, 16, 3);
+    ctx.fillStyle = theme.colors.progressTrack;
+    ctx.fill();
+    ctx.strokeStyle = checked ? theme.colors.progressFill : theme.colors.textMuted;
     ctx.stroke();
-    ctx.lineWidth = 1;
+    if (!checked) return;
+    ctx.fillStyle = theme.colors.progressFill;
+    roundRect(ctx, x + 4, y + 4, 8, 8, 1.5);
+    ctx.fill();
   }
 
-  #drawInspectorRange(ctx, x, y, width, data, theme) {
+  #drawInspectorRange(ctx, x, y, width, data, theme, state = {}) {
     const meta = data.meta ?? {};
     const min = meta.min ?? 0;
     const max = meta.max ?? 100;
@@ -380,19 +425,20 @@ export class TreeRowRenderer {
     ctx.fillRect(x, y, barWidth, 8);
     ctx.fillStyle = theme.colors.progressFill;
     ctx.fillRect(x, y, barWidth * ratio, 8);
-    ctx.fillStyle = theme.colors.rowHover;
-    roundRect(ctx, x + barWidth + gap, y - 6, valueWidth, 20, 3);
-    ctx.fill();
+    this.#drawControlSurface(ctx, x + barWidth + gap, y - 6, valueWidth, 20, theme, {
+      hovered: Boolean(state.hoveredNumber),
+      active: Boolean(state.activeNumber),
+    });
     ctx.fillStyle = theme.colors.text;
+    ctx.font = theme.monoFont ?? theme.font;
     ctx.textAlign = 'right';
     drawTruncatedText(ctx, String(data.valueText ?? ''), x + barWidth + gap + valueWidth - 6, y + 4, valueWidth - 10);
     ctx.textAlign = 'left';
+    ctx.font = theme.font;
   }
 
-  #drawSmallButton(ctx, x, y, width, height, label, theme) {
-    ctx.fillStyle = theme.colors.rowHover;
-    roundRect(ctx, x, y, width, height, 3);
-    ctx.fill();
+  #drawSmallButton(ctx, x, y, width, height, label, theme, state = {}) {
+    this.#drawControlSurface(ctx, x, y, width, height, theme, state);
     ctx.fillStyle = theme.colors.text;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
@@ -400,9 +446,34 @@ export class TreeRowRenderer {
     ctx.textAlign = 'left';
   }
 
-  #drawMutedText(ctx, text, x, y, width, theme, readonly = false) {
+  #drawControlSurface(ctx, x, y, width, height, theme, { hovered = false, active = false, disabled = false } = {}) {
+    const colors = theme.colors;
+    ctx.fillStyle = disabled
+      ? colors.progressTrack
+      : active
+        ? mixColor(colors.rowHover, colors.focus, 0.36)
+        : hovered
+          ? mixColor(colors.rowHover, colors.focus, 0.18)
+          : colors.progressTrack;
+    roundRect(ctx, x, y, width, height, 5);
+    ctx.fill();
+    ctx.strokeStyle = active ? colors.focus : hovered ? mixColor(colors.border, colors.focus, 0.5) : colors.border;
+    ctx.stroke();
+  }
+
+  #drawSelectChevron(ctx, x, y, theme, disabled = false) {
+    ctx.fillStyle = disabled ? theme.colors.textMuted : theme.colors.chevron;
+    ctx.beginPath();
+    ctx.moveTo(x - 4, y - 2);
+    ctx.lineTo(x + 4, y - 2);
+    ctx.lineTo(x, y + 3);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  #drawMutedText(ctx, text, x, y, width, theme, readonly = false, font = null) {
     ctx.fillStyle = readonly ? theme.colors.textMuted : theme.colors.text;
-    ctx.font = theme.font;
+    ctx.font = font ?? theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
     drawTruncatedText(ctx, String(text ?? ''), x, y, Math.max(10, width));
@@ -429,7 +500,7 @@ export class TreeRowRenderer {
     roundRect(ctx, x, y, badgeWidth, 16, 8);
     ctx.fill();
     ctx.fillStyle = theme.colors.badgeText;
-    ctx.font = '10px system-ui, sans-serif';
+    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);
@@ -452,7 +523,7 @@ export class TreeRowRenderer {
     if (column.kind === 'updated' && typeof value === 'number') value = formatTime(value);
     if (typeof value === 'number') value = Math.round(value).toString();
     ctx.fillStyle = column.kind === 'type' ? resolveNodeStyle(theme, node, state).color : theme.colors.textMuted;
-    ctx.font = theme.font;
+    ctx.font = column.kind === 'type' || column.kind === 'updated' || typeof value === 'number' ? theme.monoFont ?? theme.font : theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = column.align;
     const x = column.align === 'right' ? rect.x + rect.width - 10 : column.align === 'center' ? rect.x + rect.width / 2 : rect.x + 10;
@@ -538,6 +609,10 @@ function clamp01(value) {
 
 function roundRect(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);
@@ -549,6 +624,23 @@ function roundRect(ctx, x, y, width, height, radius) {
   ctx.quadraticCurveTo(x, y, x + radius, y);
 }
 
+function mixColor(a, b, amount) {
+  const from = parseHexColor(a);
+  const to = parseHexColor(b);
+  if (!from || !to) return amount >= 0.5 ? b : a;
+  const t = clamp01(amount);
+  const value = from.map((channel, index) => Math.round(channel + (to[index] - channel) * t));
+  return `rgb(${value[0]}, ${value[1]}, ${value[2]})`;
+}
+
+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 drawTruncatedText(ctx, text, x, y, maxWidth) {
   const value = String(text ?? '');
   const width = Math.max(0, maxWidth);
@@ -556,22 +648,54 @@ function drawTruncatedText(ctx, text, x, y, maxWidth) {
   ctx.fillText(fitText(ctx, value, width), x, y);
 }
 
+const TEXT_FIT_CACHE_LIMIT = 6000;
+const textFitCache = new Map();
+
 function fitText(ctx, text, maxWidth) {
-  if (ctx.measureText(text).width <= maxWidth) return text;
+  const safeWidth = Math.max(0, Math.floor(maxWidth));
+  const cacheKey = `${ctx.font}\u0000${safeWidth}\u0000${text}`;
+  const cached = textFitCache.get(cacheKey);
+  if (cached !== undefined) return cached;
+
+  let result = text;
+  if (ctx.measureText(text).width <= safeWidth) {
+    setTextFitCache(cacheKey, result);
+    return result;
+  }
   const ellipsis = '...';
   const ellipsisWidth = ctx.measureText(ellipsis).width;
-  if (ellipsisWidth > maxWidth) return '';
+  if (ellipsisWidth > safeWidth) {
+    setTextFitCache(cacheKey, '');
+    return '';
+  }
   let low = 0;
   let high = text.length;
   while (low < high) {
     const mid = Math.ceil((low + high) / 2);
     const candidate = text.slice(0, mid);
-    if (ctx.measureText(candidate).width + ellipsisWidth <= maxWidth) low = mid;
+    if (ctx.measureText(candidate).width + ellipsisWidth <= safeWidth) low = mid;
     else high = mid - 1;
   }
-  return `${text.slice(0, low)}${ellipsis}`;
+  result = `${text.slice(0, low)}${ellipsis}`;
+  setTextFitCache(cacheKey, result);
+  return result;
 }
 
+function setTextFitCache(key, value) {
+  textFitCache.set(key, value);
+  if (textFitCache.size <= TEXT_FIT_CACHE_LIMIT) return;
+  const firstKey = textFitCache.keys().next().value;
+  if (firstKey !== undefined) textFitCache.delete(firstKey);
+}
+
+const timeFormatter = new Intl.DateTimeFormat([], {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
 function formatTime(value) {
-  return new Date(value).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  const time = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(time)) return '';
+  return timeFormatter.format(time);
 }

package/src/tree-view-controller.js

@@ -44,6 +44,9 @@ export class TreeViewController {
     this.searchHighlights = new Set();
     this.filterQuery = '';
     this.hoverId = null;
+    this.hoverPart = null;
+    this.activeId = null;
+    this.activePart = null;
     this.focusedId = null;
     this.anchorRowIndex = null;
     this.lastPatchCount = 0;
@@ -63,6 +66,8 @@ export class TreeViewController {
     this.canvas = canvas;
     this.renderer.initialize(canvas);
     this.renderer.setScene(this.scene);
+    this.#resizeToCanvasClientSize();
+    this.#observeCanvasSize();
     return this;
   }
 
@@ -468,9 +473,27 @@ export class TreeViewController {
   setHover(nodeId) {
     if (this.hoverId === nodeId) return;
     this.hoverId = nodeId;
+    this.hoverPart = null;
     this.events.emit('nodehover', { nodeId });
   }
 
+  setHoverHit(hit) {
+    const nodeId = hit?.row?.nodeId ?? null;
+    const part = hit?.part ?? null;
+    if (this.hoverId === nodeId && this.hoverPart === part) return;
+    this.hoverId = nodeId;
+    this.hoverPart = part;
+    this.events.emit('nodehover', { nodeId, part });
+  }
+
+  setActiveHit(hit) {
+    const nodeId = hit?.row?.nodeId ?? null;
+    const part = hit?.part ?? null;
+    if (this.activeId === nodeId && this.activePart === part) return;
+    this.activeId = nodeId;
+    this.activePart = part;
+  }
+
   clickNode(nodeId, event = {}) {
     const row = this.rowModel.getRowById(nodeId);
     if (!row) return;
@@ -564,7 +587,6 @@ export class TreeViewController {
   }
 
   renderMeasured(time = performance.now()) {
-    this.#syncViewportFromCanvas();
     const sceneStart = performance.now();
     this.scene = this.createRenderScene();
     const sceneMs = performance.now() - sceneStart;
@@ -588,6 +610,9 @@ export class TreeViewController {
       dynamicState: this.model.dynamicState,
       selection: this.selection.selected,
       hoverNodeId: this.hoverId,
+      hoverPart: this.hoverPart,
+      activeNodeId: this.activeId,
+      activePart: this.activePart,
       focusNodeId: this.focusedId,
       searchMatches: this.searchHighlights,
       sort: this.columnModel.sort,
@@ -661,6 +686,8 @@ export class TreeViewController {
       else if (localX >= treeX + 26 && localX <= treeX + 44) part = 'icon';
       else if (localX >= treeX + 48) part = 'label';
       else part = 'cell';
+    } else if (column.kind === 'inspectorValue') {
+      part = this.#inspectorEditorPart(row, x - column.x, column.width);
     }
     return { area: 'row', part, row, column, x, y: rowY };
   }
@@ -830,15 +857,23 @@ export class TreeViewController {
     return Math.max(0, Math.floor(this.viewport.scrollY / this.rowModel.rowHeight));
   }
 
-  #syncViewportFromCanvas() {
+  #observeCanvasSize() {
+    if (!this.canvas || typeof ResizeObserver === 'undefined') return;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const width = Math.floor(entry?.contentRect?.width ?? 0);
+      const height = Math.floor(entry?.contentRect?.height ?? 0);
+      if (width > 0 && height > 0) this.resize(width, height);
+    });
+    this.#resizeObserver.observe(this.canvas);
+  }
+
+  #resizeToCanvasClientSize() {
     if (!this.canvas) return;
-    const width = this.canvas.clientWidth;
-    const height = this.canvas.clientHeight;
-    if (width > 0 && height > 0 && (this.viewport.viewportWidth !== width || this.viewport.viewportHeight !== height)) {
-      this.viewport.resize(width, height);
-      this.#fitInspectorPaneColumn(width);
-      this.#syncContentSize();
-    }
+    const width = Math.floor(this.canvas.clientWidth || this.canvas.getBoundingClientRect().width || 0);
+    const height = Math.floor(this.canvas.clientHeight || this.canvas.getBoundingClientRect().height || 0);
+    if (width > 0 && height > 0) this.resize(width, height);
   }
 
   #computeInspectorPaneLabelEnd(visibleRange) {
@@ -901,6 +936,8 @@ export class TreeViewController {
     this.#rebuildRows();
     if (focusId) this.focusedId = focusId;
   }
+
+  #resizeObserver = null;
 }
 
 function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {