virtual-tree-canvas 0.5.0 → 0.7.0

package/src/input/tree-tooltip.js

@@ -0,0 +1,55 @@
+/** DOM tooltip shared by framework adapters and standalone canvas hosts. */
+export class TreeTooltip {
+  constructor({ controller, host = controller.canvas?.parentElement }) {
+    this.controller = controller;
+    this.canvas = controller.canvas;
+    this.host = host;
+    if (!this.canvas || !host?.ownerDocument) throw new Error('TreeTooltip requires a mounted canvas and host');
+    this.element = host.ownerDocument.createElement('div');
+    this.element.className = 'virtual-tree-canvas-tooltip';
+    this.element.setAttribute('role', 'tooltip');
+    Object.assign(this.element.style, {
+      position: 'absolute', display: 'none', pointerEvents: 'none', zIndex: '20',
+      maxWidth: 'calc(100% - 16px)', padding: '6px 8px', borderRadius: '5px',
+      background: 'var(--vtc-tooltip-background, #111827)', color: 'var(--vtc-tooltip-color, #e5e7eb)',
+      border: '1px solid var(--vtc-tooltip-border, #374151)',
+      font: '12px/1.35 var(--font-family, ui-monospace, monospace)', overflowWrap: 'anywhere'
+    });
+    host.appendChild(this.element);
+    this.canvas.addEventListener('mousemove', this.onMove);
+    this.canvas.addEventListener('mouseleave', this.hide);
+    this.canvas.addEventListener('wheel', this.hide);
+    this.canvas.addEventListener('pointerdown', this.hide);
+    this.stops = ['viewportchange', 'filterchange', 'datachange', 'rowdrag'].map(type => controller.on(type, this.hide));
+  }
+
+  onMove = event => {
+    const rect = this.canvas.getBoundingClientRect();
+    const hit = this.controller.hitTest(event.clientX - rect.left, event.clientY - rect.top);
+    let text;
+    if (['rowDrag', 'rowUp', 'rowDown'].includes(hit?.part)) {
+      text = this.controller.canReorderRows()
+        ? { rowDrag: 'Drag to reorder. Alt + Up/Down also moves the focused row.', rowUp: 'Move up', rowDown: 'Move down' }[hit.part]
+        : 'Clear sorting and filtering to reorder rows.';
+    } else text = this.controller.getTooltipForHit(hit)?.text;
+    if (!text || this.controller.rowReorderInput?.gesture) return this.hide();
+    const hostRect = this.host.getBoundingClientRect();
+    this.element.textContent = text;
+    this.element.style.display = 'block';
+    const x = event.clientX - hostRect.left + 12;
+    const y = event.clientY - hostRect.top + 14;
+    this.element.style.left = `${Math.max(8, Math.min(x, hostRect.width - this.element.offsetWidth - 8))}px`;
+    this.element.style.top = `${Math.max(8, Math.min(y, hostRect.height - this.element.offsetHeight - 8))}px`;
+  };
+
+  hide = () => { this.element.style.display = 'none'; };
+
+  destroy() {
+    this.canvas.removeEventListener('mousemove', this.onMove);
+    this.canvas.removeEventListener('mouseleave', this.hide);
+    this.canvas.removeEventListener('wheel', this.hide);
+    this.canvas.removeEventListener('pointerdown', this.hide);
+    for (const stop of this.stops) stop();
+    this.element.remove();
+  }
+}

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

@@ -18,7 +18,7 @@ export class TreeViewInputController {
     this.canvas.addEventListener('wheel', this.#onWheel, { passive: false });
     this.canvas.addEventListener('mousedown', this.#onMouseDown);
     this.canvas.addEventListener('mousemove', this.#onMouseMove);
-    window.addEventListener('mouseup', this.#onMouseUp);
+    (this.canvas.ownerDocument.defaultView ?? window).addEventListener('mouseup', this.#onMouseUp);
     this.canvas.addEventListener('mouseleave', this.#onMouseLeave);
     this.canvas.addEventListener('click', this.#onClick);
     this.canvas.addEventListener('dblclick', this.#onDoubleClick);
@@ -29,7 +29,7 @@ export class TreeViewInputController {
     this.canvas.removeEventListener('wheel', this.#onWheel);
     this.canvas.removeEventListener('mousedown', this.#onMouseDown);
     this.canvas.removeEventListener('mousemove', this.#onMouseMove);
-    window.removeEventListener('mouseup', this.#onMouseUp);
+    (this.canvas.ownerDocument.defaultView ?? window).removeEventListener('mouseup', this.#onMouseUp);
     this.canvas.removeEventListener('mouseleave', this.#onMouseLeave);
     this.canvas.removeEventListener('click', this.#onClick);
     this.canvas.removeEventListener('dblclick', this.#onDoubleClick);
@@ -43,6 +43,7 @@ export class TreeViewInputController {
   };
 
   #onMouseMove = (event) => {
+    if (this.controller.rowReorderInput?.gesture) return;
     if (this.resizeDrag) {
       const rect = this.canvas.getBoundingClientRect();
       const clientX = event.clientX - rect.left;
@@ -70,9 +71,10 @@ export class TreeViewInputController {
   };
 
   #onClick = (event) => {
-    this.canvas.focus();
+    if (this.controller.rowReorderInput?.suppressClick) { this.controller.rowReorderInput.suppressClick = false; event.preventDefault(); return; }
     const hit = this.#hitTest(event);
     if (!hit) return;
+    if (['rowDrag', 'rowUp', 'rowDown'].includes(hit.part)) 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);
@@ -83,6 +85,7 @@ export class TreeViewInputController {
       return;
     }
     if (this.cellEditor?.handleClick(event, hit)) return;
+    this.canvas.focus({ preventScroll: true });
     this.controller.clickNode(hit.row.nodeId, {
       shiftKey: event.shiftKey,
       ctrlKey: event.ctrlKey,
@@ -97,7 +100,9 @@ export class TreeViewInputController {
   };
 
   #onMouseDown = (event) => {
+    if (this.controller.rowReorderInput?.gesture) return;
     const hit = this.#hitTest(event);
+    if (['rowDrag', 'rowUp', 'rowDown'].includes(hit?.part)) return;
     this.controller.setActiveHit(hit);
     if (this.cellEditor?.handlePointerDown(event, hit)) {
       event.preventDefault();
@@ -135,6 +140,8 @@ export class TreeViewInputController {
 }
 
 function cursorForHit(hit) {
+  if (hit?.part === 'rowDrag') return 'grab';
+  if (hit?.part === 'rowUp' || hit?.part === 'rowDown') return 'pointer';
   if (hit?.area === 'header' && hit.part === 'resize') return 'col-resize';
   if (hit?.area === 'header' && hit.part === 'filter') return 'text';
   if (hit?.area !== 'row') return '';

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

@@ -6,35 +6,58 @@ export class CellEditorManager {
     if (!controller.canvas) throw new Error('CellEditorManager requires an initialized TreeViewController canvas');
     this.controller = controller;
     this.canvas = controller.canvas;
+    this.view = this.canvas.ownerDocument.defaultView;
     this.host = host ?? controller.canvas.parentElement ?? document.body;
+    this.editable = true;
     this.overlay = null;
     this.rangeDrag = null;
+    this.overlayKind = null;
+    this.overlayNode = null;
+    this.stopFilter = controller.on('filterchange', ({ detail }) => {
+      if (this.overlayKind === 'filter' && this.overlay) this.overlay.value = detail.query;
+    });
     this.onMouseMove = this.#onMouseMove.bind(this);
     this.onMouseUp = this.#onMouseUp.bind(this);
   }
 
+  setEditable(enabled) {
+    this.editable = enabled;
+    if (!enabled) this.close();
+  }
+
   destroy() {
+    this.stopFilter();
     this.#removeOverlay();
-    window.removeEventListener('mousemove', this.onMouseMove);
-    window.removeEventListener('mouseup', this.onMouseUp);
+    this.view.removeEventListener('mousemove', this.onMouseMove);
+    this.view.removeEventListener('mouseup', this.onMouseUp);
   }
 
   close() {
     this.#removeOverlay();
     this.rangeDrag = null;
-    window.removeEventListener('mousemove', this.onMouseMove);
-    window.removeEventListener('mouseup', this.onMouseUp);
+    this.view.removeEventListener('mousemove', this.onMouseMove);
+    this.view.removeEventListener('mouseup', this.onMouseUp);
+  }
+
+  /** Keep an in-progress edit while values refresh; cancel if its editor changes. */
+  reconcile(nodes) {
+    const previous = this.overlayNode ?? this.rangeDrag?.node;
+    if (!previous) return;
+    const next = nodes.find(node => node.id === previous.id);
+    const signature = data => JSON.stringify([data.editorType, data.readonly, data.disabled,
+      ...['min', 'max', 'step', 'integer', 'options', 'unit'].map(key => data.meta?.[key])]);
+    if (!next || signature(previous.data) !== signature(next.data)) this.close();
   }
 
   handlePointerDown(event, hit) {
-    if (!this.#isEditableHit(hit)) return false;
+    if (!this.editable || !this.#isEditableHit(hit)) return false;
     const data = hit.row ? this.controller.model.nodes[hit.row.nodeIndex]?.data : null;
     if (!data || data.readonly || data.disabled) return false;
     if (data.editorType === 'range' && hit.part === 'range') {
-      this.rangeDrag = { hit, data };
+      this.rangeDrag = { hit, data, node: this.controller.model.nodes[hit.row.nodeIndex] };
       this.#updateRangeFromEvent(event);
-      window.addEventListener('mousemove', this.onMouseMove);
-      window.addEventListener('mouseup', this.onMouseUp);
+      this.view.addEventListener('mousemove', this.onMouseMove);
+      this.view.addEventListener('mouseup', this.onMouseUp);
       return true;
     }
     if (shouldOpenOverlayOnPointerDown(data, hit)) {
@@ -46,7 +69,7 @@ export class CellEditorManager {
   }
 
   handleClick(event, hit) {
-    if (!this.#isEditableHit(hit)) return false;
+    if (!this.editable || !this.#isEditableHit(hit)) return false;
     const node = this.controller.model.nodes[hit.row.nodeIndex];
     const data = node?.data;
     if (!data || data.disabled) return false;
@@ -108,7 +131,7 @@ export class CellEditorManager {
     });
     let committed = false;
     const commit = () => {
-      if (committed) return;
+      if (committed || this.overlay !== element) return;
       committed = true;
       const nextValue = parseEditorValue(element, data);
       this.controller.updateInspectorValue(node.id, nextValue, data.editorType);
@@ -125,6 +148,8 @@ export class CellEditorManager {
     ensureOverlayHost(this.host);
     this.host.append(element);
     this.overlay = element;
+    this.overlayKind = 'value';
+    this.overlayNode = node;
     element.focus({ preventScroll: true });
     element.select?.();
     if (options.showPicker && element.showPicker) {
@@ -180,6 +205,7 @@ export class CellEditorManager {
     ensureOverlayHost(this.host);
     this.host.append(element);
     this.overlay = element;
+    this.overlayKind = 'filter';
     element.focus({ preventScroll: true });
     element.select();
   }
@@ -206,8 +232,8 @@ export class CellEditorManager {
 
   #onMouseUp() {
     this.rangeDrag = null;
-    window.removeEventListener('mousemove', this.onMouseMove);
-    window.removeEventListener('mouseup', this.onMouseUp);
+    this.view.removeEventListener('mousemove', this.onMouseMove);
+    this.view.removeEventListener('mouseup', this.onMouseUp);
   }
 
   #isEditableHit(hit) {
@@ -257,8 +283,11 @@ export class CellEditorManager {
   }
 
   #removeOverlay() {
-    this.overlay?.remove();
+    const overlay = this.overlay;
     this.overlay = null;
+    this.overlayKind = null;
+    this.overlayNode = null;
+    overlay?.remove();
   }
 
   #toggleRangeMinMax(node, data) {

package/src/inspector/pane-layout.js

@@ -0,0 +1,12 @@
+export function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {
+  const safeWidth = Math.max(1, width);
+  const rightPadding = 14;
+  const minEditor = Math.min(170, Math.max(96, safeWidth * 0.45));
+  const minLabelEnd = Math.max(88, depth * indentWidth + 104);
+  const preferredLeft = Math.max(minLabelEnd, labelEnd, safeWidth * 0.32);
+  const maxLeft = Math.max(64, safeWidth - rightPadding - minEditor);
+  const editorLeft = Math.max(64, Math.min(preferredLeft, maxLeft));
+  const editorWidth = Math.max(56, safeWidth - rightPadding - editorLeft);
+  return { editorLeft, editorWidth };
+}
+

package/src/renderers/checkbox.js

@@ -0,0 +1,14 @@
+export function drawCheckbox(ctx, x, y, checked, theme) {
+    ctx.beginPath();
+    ctx.roundRect(x, y, 16, 16, 3);
+    ctx.fillStyle = theme.colors.progressTrack;
+    ctx.fill();
+    ctx.strokeStyle = checked ? theme.colors.progressFill : theme.colors.textMuted;
+    ctx.stroke();
+    if (!checked) return;
+    ctx.fillStyle = theme.colors.progressFill;
+    ctx.beginPath();
+    ctx.roundRect(x + 4, y + 4, 8, 8, 1.5);
+    ctx.fill();
+  }
+

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

@@ -1,3 +1,7 @@
+import { drawCheckbox } from './checkbox.js';
+import { treeCellLayout } from '../core/tree-cell-layout.js';
+import { formatInspectorValue } from '../inspector/editor-resolver.js';
+import { inspectorPaneLayout } from '../inspector/pane-layout.js';
 import { numericLayout } from '../inspector/numeric-layout.js';
 import { IconRegistry } from '../core/icon-registry.js';
 
@@ -10,7 +14,8 @@ export class TreeRowRenderer {
     this.scene = null;
     this.iconRegistry = iconRegistry ?? new IconRegistry();
     this.renderedRows = 0;
-    this.iconRenderQueued = false;
+    this.iconRenderFrame = null;
+    this.invalidate = null;
     this.preparedIconThemeKey = null;
     this.stopIconListener = this.iconRegistry.onChange?.(() => this.#scheduleIconRender()) ?? null;
   }
@@ -26,7 +31,15 @@ export class TreeRowRenderer {
     this.scene = scene;
   }
 
+  setInvalidationHandler(invalidate) { this.invalidate = invalidate; }
+
   destroy() {
+    if (this.iconRenderFrame !== null) {
+      const view = this.canvas?.ownerDocument?.defaultView ?? globalThis;
+      (view.cancelAnimationFrame?.bind(view) ?? clearTimeout)(this.iconRenderFrame);
+    }
+    this.iconRenderFrame = null;
+    this.invalidate = null;
     this.stopIconListener?.();
     this.stopIconListener = null;
     this.canvas = null;
@@ -42,7 +55,7 @@ export class TreeRowRenderer {
     if (scene?.rows) this.scene = scene;
     if (!this.canvas || !this.ctx || !this.scene) return;
     const { viewport, theme } = this.scene;
-    const dpr = Math.max(1, window.devicePixelRatio || 1);
+    const dpr = Math.max(1, this.canvas.ownerDocument?.defaultView?.devicePixelRatio || 1);
     const viewportWidth = Math.max(0, viewport.viewportWidth);
     const viewportHeight = Math.max(0, viewport.viewportHeight);
     if (viewportWidth <= 0 || viewportHeight <= 0) return;
@@ -65,15 +78,18 @@ export class TreeRowRenderer {
     this.#drawHeader(ctx);
     this.#drawRows(ctx);
     this.#drawStickyRows(ctx);
+    this.#drawRowDrop(ctx);
     ctx.restore();
   }
 
   #scheduleIconRender() {
-    if (this.iconRenderQueued) return;
-    this.iconRenderQueued = true;
-    const schedule = globalThis.requestAnimationFrame ?? ((callback) => setTimeout(callback, 0));
-    schedule(() => {
-      this.iconRenderQueued = false;
+    if (!this.canvas) return;
+    if (this.invalidate) return this.invalidate();
+    if (this.iconRenderFrame !== null) return;
+    const view = this.canvas.ownerDocument?.defaultView ?? globalThis;
+    const schedule = view.requestAnimationFrame?.bind(view) ?? (callback => setTimeout(callback, 0));
+    this.iconRenderFrame = schedule(() => {
+      this.iconRenderFrame = null;
       this.render();
     });
   }
@@ -107,7 +123,7 @@ export class TreeRowRenderer {
     ctx.textBaseline = 'middle';
 
     for (const column of columns) {
-      if (headerFilter && column.kind === 'inspectorPane') {
+      if (headerFilter && column === columns.find(item => item.kind !== 'rowOrder' && item.id !== '__vtc_actions')) {
         this.#drawHeaderFilter(ctx, column, viewport, theme, filterQuery);
       } else {
         ctx.fillStyle = colors.textMuted;
@@ -145,7 +161,7 @@ export class TreeRowRenderer {
     ctx.strokeStyle = colors.border;
     ctx.stroke();
     ctx.fillStyle = filterQuery ? colors.text : colors.textMuted;
-    drawTruncatedText(ctx, filterQuery || 'Filter inspector', x + 8, viewport.headerHeight / 2, width - 16);
+    drawTruncatedText(ctx, filterQuery || 'Filter rows', x + 8, viewport.headerHeight / 2, width - 16);
   }
 
   #drawSortIndicator(ctx, x, y, direction, theme) {
@@ -200,6 +216,7 @@ export class TreeRowRenderer {
     }
     ctx.restore();
 
+    if (!stickyRows.some(row => row.stickyY > row.y - viewport.scrollY)) return;
     const bottom = viewport.headerHeight + height;
     ctx.strokeStyle = theme.colors.border;
     ctx.beginPath();
@@ -222,7 +239,8 @@ export class TreeRowRenderer {
     const visibleX = viewport.scrollX;
     const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
 
-    ctx.fillStyle = selected ? colors.rowSelected : highlighted ? colors.rowHighlighted : hovered ? colors.rowHover : colors.row;
+    const background = selected ? colors.rowSelected : highlighted ? colors.rowHighlighted : hovered ? colors.rowHover : colors.row;
+    ctx.fillStyle = background;
     ctx.fillRect(visibleX, y, visibleWidth, row.height);
 
     this.#drawIndentGuides(ctx, row, colors);
@@ -249,6 +267,12 @@ export class TreeRowRenderer {
       ctx.stroke();
     }
 
+    const actions = columns.find(column => column.id === '__vtc_actions');
+    if (actions) {
+      ctx.fillStyle = background;
+      ctx.fillRect(visibleX + Math.max(0, visibleWidth - actions.width), y, actions.width, row.height);
+    }
+
     ctx.strokeStyle = colors.border;
     ctx.beginPath();
     ctx.moveTo(visibleX, y + row.height + 0.5);
@@ -268,7 +292,8 @@ export class TreeRowRenderer {
       cell.column.render(ctx, cell);
       return;
     }
-    if (cell.column.kind === 'tree') this.#drawTreeCell(ctx, cell);
+    if (cell.column.kind === 'rowOrder') this.#drawRowOrder(ctx, cell);
+    else if (cell.column.kind === 'tree') this.#drawTreeCell(ctx, cell);
     else if (cell.column.kind === 'inspectorPane') this.#drawInspectorPaneCell(ctx, cell);
     else if (cell.column.kind === 'inspectorValue') this.#drawInspectorValueCell(ctx, cell);
     else if (cell.column.kind === 'inspectorType') this.#drawInspectorTypeCell(ctx, cell);
@@ -278,6 +303,43 @@ export class TreeRowRenderer {
     else this.#drawTextCell(ctx, cell);
   }
 
+  #drawRowOrder(ctx, { node, row, rect, theme }) {
+    if (node.reorderable === false) return;
+    const siblings = this.scene.childrenByParent?.get(node.parentId ?? null) ?? [];
+    const enabled = this.scene.canReorderRows && siblings.length > 1;
+    const cy = rect.y + row.height / 2;
+    ctx.save();
+    ctx.strokeStyle = theme.colors.textMuted;
+    ctx.fillStyle = theme.colors.textMuted;
+    ctx.lineWidth = 1.5;
+    ctx.globalAlpha = enabled || this.scene.rowDrag?.(node, this.scene.dynamicState.get(node.id) ?? {}) != null ? 1 : 0.3;
+    for (const dx of [10, 14]) for (const dy of [-4, 0, 4]) ctx.fillRect(rect.x + dx, cy + dy, 1.5, 1.5);
+    for (const [center, direction, available] of [[36, -1, siblings[0] !== node.id], [60, 1, siblings.at(-1) !== node.id]]) {
+      ctx.globalAlpha = enabled && available ? 1 : 0.3;
+      ctx.beginPath();
+      ctx.moveTo(rect.x + center - 4, cy - direction * 2);
+      ctx.lineTo(rect.x + center, cy + direction * 2);
+      ctx.lineTo(rect.x + center + 4, cy - direction * 2);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  #drawRowDrop(ctx) {
+    const { rowDrop, viewport, theme } = this.scene;
+    if (!rowDrop) return;
+    const y = viewport.headerHeight + rowDrop.y - viewport.scrollY;
+    if (y < viewport.headerHeight || y > viewport.headerHeight + viewport.rowViewportHeight) return;
+    ctx.save();
+    ctx.strokeStyle = theme.colors.focus;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(3, y);
+    ctx.lineTo(viewport.contentViewportWidth - 3, y);
+    ctx.stroke();
+    ctx.restore();
+  }
+
   #drawInspectorPaneCell(ctx, { node, row, rect, theme, style, hovered, hoverPart, activePart }) {
     const visibleRight = this.scene.viewport.scrollX + (this.scene.viewport.contentViewportWidth ?? this.scene.viewport.viewportWidth);
     rect = { ...rect, width: Math.max(1, Math.min(rect.x + rect.width, visibleRight) - rect.x) };
@@ -343,6 +405,7 @@ export class TreeRowRenderer {
     const meta = data.meta ?? {};
     const disabled = data.disabled;
     const readonly = data.readonly;
+    const valueColor = resolveValueColor(theme, data.value, data.editorType === 'select' ? 'enum' : data.valueType);
     const x = rect.x + 10;
     const y = rect.y + 5;
     const fullWidth = Math.max(24, rect.width - 20);
@@ -362,7 +425,7 @@ export class TreeRowRenderer {
     }
 
     if (data.editorType === 'checkbox') {
-      this.#drawCheckbox(ctx, x, rect.y + rect.height / 2 - 8, Boolean(data.value), theme);
+      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, {
         hoveredNumber: hovered && hoverPart === 'number',
@@ -373,7 +436,7 @@ export class TreeRowRenderer {
       ctx.fillRect(x, y + 2, 28, height - 4);
       ctx.strokeStyle = theme.colors.border;
       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);
+      this.#drawMutedText(ctx, String(data.value ?? ''), x + 38, rect.y + rect.height / 2, width - 38, theme, false, null, valueColor);
     } else if (data.editorType === 'button') {
       const buttonWidth = meta.fullWidthButton ? width : Math.min(width, 140);
       this.#drawControlSurface(ctx, x, y, buttonWidth, height, theme, {
@@ -392,17 +455,17 @@ export class TreeRowRenderer {
         active: activePart === 'editor',
         disabled: readonly || disabled,
       });
-      this.#drawMutedText(ctx, data.valueText, x + 8, rect.y + rect.height / 2, selectWidth - 30, theme);
+      this.#drawMutedText(ctx, data.valueText, x + 8, rect.y + rect.height / 2, selectWidth - 30, theme, false, null, valueColor);
       this.#drawSelectChevron(ctx, x + selectWidth - 18, rect.y + rect.height / 2, theme, disabled);
     } else {
       if (numeric.unit) {
         ctx.font = theme.monoFont ?? theme.font;
-        ctx.fillStyle = readonly ? theme.colors.textMuted : theme.colors.text;
+        ctx.fillStyle = valueColor;
         ctx.textAlign = 'right';
         drawTruncatedText(ctx, data.valueText, x + width, rect.y + rect.height / 2, width);
         ctx.textAlign = 'left';
       } else {
-        this.#drawMutedText(ctx, data.valueText, x, rect.y + rect.height / 2, width, theme, readonly);
+        this.#drawMutedText(ctx, data.valueText, x, rect.y + rect.height / 2, width, theme, false, null, valueColor);
       }
     }
 
@@ -432,17 +495,6 @@ export class TreeRowRenderer {
     this.#drawMutedText(ctx, node.data?.meta?.description ?? '', rect.x + 10, rect.y + rect.height / 2, rect.width - 20, theme);
   }
 
-  #drawCheckbox(ctx, x, y, checked, theme) {
-    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();
-    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, state = {}) {
     const meta = data.meta ?? {};
@@ -457,7 +509,7 @@ export class TreeRowRenderer {
       hovered: Boolean(state.hoveredNumber),
       active: Boolean(state.activeNumber),
     });
-    ctx.fillStyle = theme.colors.text;
+    ctx.fillStyle = resolveValueColor(theme, data.value);
     ctx.font = theme.monoFont ?? theme.font;
     ctx.textAlign = 'right';
     drawTruncatedText(ctx, String(data.valueText ?? ''), x + barWidth + gap + valueWidth - 6, y + 4, valueWidth - 10);
@@ -499,8 +551,8 @@ export class TreeRowRenderer {
     ctx.fill();
   }
 
-  #drawMutedText(ctx, text, x, y, width, theme, readonly = false, font = null) {
-    ctx.fillStyle = readonly ? theme.colors.textMuted : theme.colors.text;
+  #drawMutedText(ctx, text, x, y, width, theme, readonly = false, font = null, color = null) {
+    ctx.fillStyle = color ?? (readonly ? theme.colors.textMuted : theme.colors.text);
     ctx.font = font ?? theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
@@ -509,19 +561,20 @@ export class TreeRowRenderer {
 
   #drawTreeCell(ctx, { node, row, rect, theme, style }) {
     const colors = theme.colors;
-    const x = rect.x + row.depth * theme.indentWidth;
+    const layout = treeCellLayout(row.depth, theme.indentWidth, this.scene.childrenByParent.size > 1);
     const cy = rect.y + rect.height / 2;
-    this.#drawChevron(ctx, x + 10, cy, row, colors);
-    this.iconRegistry.draw(ctx, style.icon, x + 27, rect.y + 6, 15, style.color);
+    if (row.hasChildren) this.#drawChevron(ctx, rect.x + layout.chevronX, cy, row, colors);
+    this.iconRegistry.draw(ctx, style.icon, rect.x + layout.iconX, rect.y + 6, 15, style.color);
     ctx.fillStyle = colors.text;
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
-    drawTruncatedText(ctx, node.label ?? node.id, x + 50, cy, Math.max(40, rect.x + rect.width - x - 56));
+    drawTruncatedText(ctx, node.label ?? node.id, rect.x + layout.labelX, cy, Math.max(0, rect.width - layout.labelX - 6));
   }
 
   #drawStatusCell(ctx, { rect, style, theme }) {
-    const badgeWidth = Math.min(58, rect.width - 12);
+    ctx.font = theme.font;
+    const badgeWidth = Math.max(0, Math.min(ctx.measureText(style.status.label).width + 18, rect.width - 12));
     const x = rect.x + (rect.width - badgeWidth) / 2;
     const y = rect.y + (rect.height - 17) / 2;
     const statusColor = style.status.color;
@@ -532,7 +585,7 @@ export class TreeRowRenderer {
     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.font = theme.font;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
     drawTruncatedText(ctx, style.status.label, x + badgeWidth / 2, y + 8.5, badgeWidth - 8);
@@ -574,10 +627,14 @@ export class TreeRowRenderer {
 
   #drawTextCell(ctx, { node, state, rect, column, theme }) {
     let value = column.value(node, state);
-    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 = column.kind === 'type' || column.kind === 'updated' || typeof value === 'number' ? theme.monoFont ?? theme.font : theme.font;
+    const numeric = typeof value === 'number';
+    const valueType = typeof column.valueType === 'function' ? column.valueType(value, node, state) : column.valueType;
+    const valueColor = resolveValueColor(theme, value, valueType);
+    if (column.format) value = column.format(value, node, state);
+    else if (column.kind === 'updated' && numeric) value = formatTime(value);
+    else if (numeric) value = formatInspectorValue(value);
+    ctx.fillStyle = column.kind === 'type' ? resolveNodeStyle(theme, node, state).color : column.kind === 'value' ? valueColor : theme.colors.textMuted;
+    ctx.font = column.kind === 'type' || column.kind === 'updated' || numeric ? 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;
@@ -599,13 +656,8 @@ export class TreeRowRenderer {
   }
 
   #drawChevron(ctx, x, y, row, colors) {
-    ctx.fillStyle = row.hasChildren ? colors.chevron : colors.textMuted;
-    if (!row.hasChildren) {
-      ctx.beginPath();
-      ctx.arc(x, y, 1.5, 0, Math.PI * 2);
-      ctx.fill();
-      return;
-    }
+    if (!row.hasChildren) return;
+    ctx.fillStyle = colors.chevron;
     ctx.beginPath();
     if (row.expanded) {
       ctx.moveTo(x - 5, y - 2);
@@ -632,21 +684,6 @@ function resolveNodeStyle(theme, node, state = {}) {
   };
 }
 
-function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {
-  const safeWidth = Math.max(1, width);
-  const rightPadding = 14;
-  if (editorType === 'checkbox') {
-    const editorWidth = 34;
-    return { editorLeft: Math.max(64, safeWidth - rightPadding - editorWidth), editorWidth };
-  }
-  const minEditor = Math.min(170, Math.max(96, safeWidth * 0.45));
-  const minLabelEnd = Math.max(88, depth * indentWidth + 104);
-  const preferredLeft = Math.max(minLabelEnd, labelEnd, safeWidth * 0.32);
-  const maxLeft = Math.max(64, safeWidth - rightPadding - minEditor);
-  const editorLeft = Math.max(64, Math.min(preferredLeft, maxLeft));
-  const editorWidth = Math.max(56, safeWidth - rightPadding - editorLeft);
-  return { editorLeft, editorWidth };
-}
 
 function clamp01(value) {
   return Math.max(0, Math.min(1, value));
@@ -744,3 +781,7 @@ function formatTime(value) {
   if (!Number.isFinite(time)) return '';
   return timeFormatter.format(time);
 }
+
+function resolveValueColor(theme, value, type) {
+  return theme.valueColors?.[type ?? (value === null ? 'null' : typeof value)] ?? theme.colors.text;
+}