virtual-tree-canvas 0.6.0 → 0.7.0

package/src/input/row-reorder-input.js

@@ -11,14 +11,18 @@ export class RowReorderInput {
     this.previousTouchAction = this.canvas.style.touchAction;
     this.canvas.addEventListener('pointerdown', this.onDown);
     this.canvas.addEventListener('keydown', this.onKey);
+    this.canvas.addEventListener('lostpointercapture', this.onCancel);
     this.view.addEventListener('pointermove', this.onMove);
     this.view.addEventListener('pointerup', this.onUp);
     this.view.addEventListener('pointercancel', this.onCancel);
     this.view.addEventListener('blur', this.cancel);
-    this.stops = ['datachange', 'filterchange', 'sortchange', 'rowreorderchange'].map(type => controller.on(type, () => {
+    this.stops = ['filterchange', 'sortchange', 'rowreorderchange'].map(type => controller.on(type, () => {
       this.cancel();
       this.syncMode();
     }));
+    this.stops.push(controller.on('datachange', () => {
+      if (this.gesture && !controller.model.index.getNode(this.gesture.id)) this.cancel();
+    }));
     this.stops.push(controller.on('rowreorder', event => {
       if (!this.status) return;
       const { nodeId, toIndex, siblingOrder } = event.detail;
@@ -37,21 +41,28 @@ export class RowReorderInput {
   }
 
   syncMode() {
-    this.canvas.style.touchAction = this.controller.canReorderRows() ? 'none' : this.previousTouchAction;
+    this.canvas.style.touchAction = (this.controller.canReorderRows() || this.controller.rowDrag) ? 'none' : this.previousTouchAction;
   }
 
   onDown = event => {
-    if (event.button !== 0 || !this.controller.canReorderRows() || this.gesture) return;
+    if (event.button !== 0 || event.isPrimary === false || this.gesture) return;
+    this.suppressClick = false;
     const point = this.point(event);
     const hit = this.controller.hitTest(point.x, point.y);
-    if (!hit?.row || !['rowDrag', 'rowUp', 'rowDown'].includes(hit.part)) return;
-    this.canvas.focus();
+    if (!hit?.row) return;
+    const node = this.controller.model.index.getNode(hit.row.nodeId);
+    const payload = this.controller.rowDrag?.(node, this.controller.model.dynamicState.get(node.id) ?? {}) ?? null;
+    const orderPart = ['rowDrag', 'rowUp', 'rowDown'].includes(hit.part);
+    if (orderPart && node.reorderable === false) return;
+    if (orderPart ? !this.controller.canReorderRows() && !(payload != null && hit.part === 'rowDrag') : payload == null || !['label', 'row', 'icon', 'cell'].includes(hit.part)) return;
+    this.canvas.focus({ preventScroll: true });
     this.controller.cellEditor?.close?.();
     this.controller.focusedId = hit.row.nodeId;
-    this.gesture = { id: hit.row.nodeId, part: hit.part, pointerId: event.pointerId,
+    this.gesture = { id: hit.row.nodeId, part: orderPart ? hit.part : 'rowDrag', payload, pointerId: event.pointerId,
       startX: point.x, startY: point.y, point, dragging: false };
     this.canvas.setPointerCapture?.(event.pointerId);
-    event.preventDefault();
+    event.stopPropagation();
+    if (orderPart) event.preventDefault();
   };
 
   onMove = event => {
@@ -60,7 +71,9 @@ export class RowReorderInput {
     gesture.point = this.point(event);
     if (gesture.part !== 'rowDrag') return;
     if (!gesture.dragging && Math.hypot(gesture.point.x - gesture.startX, gesture.point.y - gesture.startY) < 5) return;
+    if (!gesture.dragging && gesture.payload != null) this.emitDrag('rowdragstart', event);
     gesture.dragging = true;
+    if (gesture.payload != null) this.emitDrag('rowdragmove', event);
     this.canvas.style.cursor = 'grabbing';
     this.updateTarget();
     this.scheduleScroll();
@@ -73,7 +86,9 @@ export class RowReorderInput {
     gesture.point = this.point(event);
     const target = gesture.dragging ? this.controller.getRowDropTarget(gesture.id, gesture.point.x, gesture.point.y) : null;
     const hit = this.controller.hitTest(gesture.point.x, gesture.point.y);
-    this.cancel();
+    if (gesture.dragging && gesture.payload != null) this.emitDrag('rowdragend', event);
+    this.suppressClick = gesture.dragging;
+    this.cancel(false);
     if (target) this.controller.moveRow(gesture.id, target.index, { source: 'pointer' });
     else if (!gesture.dragging && hit?.row?.nodeId === gesture.id && hit.part === gesture.part) {
       if (gesture.part === 'rowUp') this.controller.moveRowBy(gesture.id, -1, { source: 'button' });
@@ -102,6 +117,7 @@ export class RowReorderInput {
   scheduleScroll() {
     if (this.frame !== null || !this.gesture?.dragging) return;
     const viewport = this.controller.viewport;
+    if (this.gesture.point.x < 0 || this.gesture.point.x > viewport.viewportWidth || this.gesture.point.y < 0 || this.gesture.point.y > viewport.viewportHeight) return;
     const y = this.gesture.point.y - viewport.renderInsetY;
     const top = viewport.headerHeight;
     const bottom = top + viewport.rowViewportHeight;
@@ -118,8 +134,16 @@ export class RowReorderInput {
     });
   }
 
-  cancel = () => {
+  emitDrag(type, originalEvent) {
+    const gesture = this.gesture;
+    if (gesture) this.controller.events.emit(type, { nodeId: gesture.id, payload: gesture.payload,
+      label: this.controller.model.index.getNode(gesture.id)?.label ?? gesture.id, originalEvent });
+  }
+
+  cancel = (notify = true) => {
     const gesture = this.gesture;
+    if (gesture?.dragging) this.suppressClick = true;
+    if (notify && gesture?.dragging && gesture.payload != null) this.emitDrag('rowdragcancel');
     this.gesture = null;
     if (this.frame !== null) (this.view.cancelAnimationFrame?.bind(this.view) ?? clearTimeout)(this.frame);
     this.frame = null;
@@ -132,6 +156,7 @@ export class RowReorderInput {
     this.cancel();
     this.canvas.removeEventListener('pointerdown', this.onDown);
     this.canvas.removeEventListener('keydown', this.onKey);
+    this.canvas.removeEventListener('lostpointercapture', this.onCancel);
     this.view.removeEventListener('pointermove', this.onMove);
     this.view.removeEventListener('pointerup', this.onUp);
     this.view.removeEventListener('pointercancel', this.onCancel);

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);
@@ -71,7 +71,7 @@ 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;
@@ -85,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,
@@ -99,6 +100,7 @@ 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);

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

@@ -6,11 +6,13 @@ 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;
     });
@@ -26,15 +28,25 @@ export class CellEditorManager {
   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) {
@@ -42,10 +54,10 @@ export class CellEditorManager {
     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)) {
@@ -137,6 +149,7 @@ export class CellEditorManager {
     this.host.append(element);
     this.overlay = element;
     this.overlayKind = 'value';
+    this.overlayNode = node;
     element.focus({ preventScroll: true });
     element.select?.();
     if (options.showPicker && element.showPicker) {
@@ -219,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) {
@@ -273,6 +286,7 @@ export class CellEditorManager {
     const overlay = this.overlay;
     this.overlay = null;
     this.overlayKind = null;
+    this.overlayNode = null;
     overlay?.remove();
   }
 

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';
 
@@ -51,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;
@@ -119,7 +123,7 @@ export class TreeRowRenderer {
     ctx.textBaseline = 'middle';
 
     for (const column of columns) {
-      if (headerFilter && column === columns.find(item => item.kind !== 'rowOrder')) {
+      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;
@@ -212,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();
@@ -234,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);
@@ -261,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);
@@ -292,6 +304,7 @@ export class TreeRowRenderer {
   }
 
   #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;
@@ -299,7 +312,7 @@ export class TreeRowRenderer {
     ctx.strokeStyle = theme.colors.textMuted;
     ctx.fillStyle = theme.colors.textMuted;
     ctx.lineWidth = 1.5;
-    ctx.globalAlpha = enabled ? 1 : 0.3;
+    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;
@@ -392,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);
@@ -411,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',
@@ -422,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, {
@@ -441,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);
       }
     }
 
@@ -481,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 ?? {};
@@ -506,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);
@@ -548,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';
@@ -558,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;
@@ -581,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);
@@ -623,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;
@@ -648,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);
@@ -681,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));
@@ -793,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;
+}