virtual-tree-canvas 0.4.0 → 0.6.0

package/src/index.d.ts

@@ -1,10 +1,39 @@
+export const builtinIconNames: readonly string[];
+export interface RowReorderDetail {
+  nodeId: string;
+  parentId: string | null;
+  fromIndex: number;
+  toIndex: number;
+  siblingOrder: string[];
+  order: string[];
+  source: 'api' | 'pointer' | 'button' | 'keyboard';
+}
+
+export interface TreeViewOptions {
+  nativeScrollbars?: boolean;
+  iconsBaseUrl?: string | URL;
+  iconRegistry?: IconRegistry;
+  rowReorder?: boolean;
+  autoRender?: boolean;
+  tooltip?: boolean;
+  canvas?: HTMLCanvasElement;
+  host?: HTMLElement;
+  [key: string]: any;
+}
+
+export class TreeTooltip {
+  constructor(options: { controller: TreeViewController; host?: HTMLElement });
+  hide(): void;
+  destroy(): void;
+}
+
 export type TreeViewAlign = 'start' | 'center' | 'end' | 'nearest';
 
 export type IconDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, size: number, color: string) => void;
 export type IconSource = string | CanvasImageSource | IconDrawFunction;
 
 export class IconRegistry {
-  constructor(options?: { pixelRatio?: number });
+  constructor(options?: { pixelRatio?: number; iconsBaseUrl?: string | URL });
   register(name: string, icon: IconSource): any;
   get(name: string): any;
   onChange(listener: () => void): () => void;
@@ -33,6 +62,10 @@ export type MetaRule = {
   max?: number;
   step?: number;
   integer?: boolean;
+  /** Display-only suffix for numeric values. Never appended to the model value. */
+  unit?: string;
+  /** Display decimal places (0–20). Editing retains the original precision. */
+  precision?: number;
   readonly?: boolean;
   disabled?: boolean;
   updated?: boolean;
@@ -85,16 +118,46 @@ export class TreeViewController {
   rowModel: any;
   expansion: any;
   selection: any;
-  constructor(options?: Record<string, any> & { nativeScrollbars?: boolean });
+  constructor(options?: TreeViewOptions);
+  iconRegistry: IconRegistry;
+  tooltip?: TreeTooltip | null;
+  rowReorder: boolean;
+  editable: boolean;
+  initialExpandDepth: number;
+  filterOptions: {caseSensitive: boolean; wholeWord: boolean};
+  model: any;
+  inspector: any;
+  columnModel: any;
+  setEditable(enabled: boolean): void;
+  setInitialExpandDepth(depth: number): void;
+  setIconResolver(resolver: TreeViewConfiguration['iconResolver']): void;
+  setInspectorOptions(options: {filter?: boolean; markUpdated?: boolean}): void;
+  setHeaderFilter(enabled: boolean): void;
+  setInspectorValue(path: string, value: any, options?: InspectorWriteOptions): boolean;
+  updateInspectorValue(nodeId: string, value: any, editorType?: string, options?: InspectorWriteOptions): boolean;
+  closeEditor(): void;
+  clearSearch(): void;
+  getSearchState(): TreeSearchState;
+  nextSearchResult(): string | null;
+  previousSearchResult(): string | null;
+  setRowReorder(enabled: boolean): void;
+  canReorderRows(): boolean;
+  getRowOrder(parentId?: string | null): string[];
+  moveRow(nodeId: string, targetIndex: number, options?: {source?: RowReorderDetail["source"]}): boolean;
+  moveRowBy(nodeId: string, offset: number, options?: {source?: RowReorderDetail["source"]}): boolean;
+  requestRender(force?: boolean): void;
+  cancelRender(): void;
+  attachTooltip(options?: {host?: HTMLElement}): TreeTooltip;
   initialize(canvas: HTMLCanvasElement): this;
   attachCellEditor(options?: { host?: HTMLElement | null }): CellEditorManager;
   attachInput(options?: { cellEditor?: CellEditorManager | null }): TreeViewInputController;
   destroy(): void;
-  on(type: string, listener: (event: any) => void): any;
+  on<K extends keyof TreeViewEvents>(type: K, listener: (event: TreeViewEvent<K>) => void): () => void;
+  on(type: string, listener: (event: any) => void): () => void;
   off(type: string, listener: (event: any) => void): void;
-  setData(nodes: TreeNode[]): void;
+  setData(nodes: TreeNode[], options?: { iconResolver?: TreeViewConfiguration['iconResolver'] }): void;
   setModel(model: any, meta?: Record<string, MetaRule>, options?: Record<string, any>): void;
-  setColumns(columns: Column[]): void;
+  setColumns(columns: Column[] | null): void;
   setDynamicState(patches: DynamicPatch[]): void;
   setTheme(theme: any): void;
   setLayoutMetrics(options?: { rowHeight?: number; indentWidth?: number; headerHeight?: number }): void;
@@ -125,5 +188,103 @@ export class TreeViewInputController {
 export class CellEditorManager {
   constructor(options: { controller: TreeViewController; host?: HTMLElement | null });
   destroy(): void;
+  setEditable(enabled: boolean): void;
   close(): void;
 }
+
+export interface InspectorWriteOptions { emit?: boolean; source?: string }
+export interface TreeViewConfiguration {
+  mode?: 'tree' | 'inspector';
+  presentation?: 'pane' | 'table';
+  nodes?: TreeNode[];
+  model?: any;
+  meta?: Record<string, MetaRule> | null;
+  columns?: Column[] | null;
+  theme?: string | Record<string, any>;
+  flatRoot?: boolean;
+  enforceMeta?: boolean;
+  filter?: boolean;
+  filterPlacement?: 'auto' | 'bar' | 'header';
+  markUpdated?: boolean;
+  editable?: boolean;
+  rowReorder?: boolean;
+  initialExpandDepth?: number;
+  rowHeight?: number;
+  indentWidth?: number;
+  headerHeight?: number;
+  iconResolver?: ((node: TreeNode) => string | Partial<TreeNode> | null | undefined) | null;
+  fontFamily?: string | null;
+}
+export const treeViewOptionNames: readonly (keyof TreeViewConfiguration)[];
+export function validateTreeViewOptions(options: TreeViewConfiguration): void;
+
+export class TreeView {
+  constructor(host: HTMLElement, options?: TreeViewConfiguration & Pick<TreeViewOptions, 'iconsBaseUrl' | 'iconRegistry' | 'nativeScrollbars'>);
+  readonly controller: TreeViewController;
+  readonly element: HTMLDivElement;
+  readonly canvas: HTMLCanvasElement;
+  readonly destroyed: boolean;
+  configure(options: TreeViewConfiguration): this;
+  flush(): void;
+  destroy(): void;
+  setData(nodes: TreeNode[]): void;
+  setModel(model: any, meta?: Record<string, MetaRule>): void;
+  setColumns(columns: Column[] | null): void;
+  setTheme(theme: string | Record<string, any>): void;
+  setDynamicState(patches: DynamicPatch[]): void;
+  setInspectorValue(path: string, value: any, options?: InspectorWriteOptions): boolean;
+  on<K extends keyof TreeViewEvents>(type: K, listener: (event: TreeViewEvent<K>) => void): () => void;
+  on(type: string, listener: (event: any) => void): () => void;
+  off(type: string, listener: (event: any) => void): void;
+  setFilter(query?: string | ((node: TreeNode, state: Record<string, any>) => boolean), options?: {caseSensitive?: boolean; wholeWord?: boolean}): void;
+  clearFilter(): void;
+  getRowOrder(parentId?: string | null): string[];
+  moveRow(id: string, index: number, options?: {source?: RowReorderDetail['source']}): boolean;
+  moveRowBy(id: string, offset: number, options?: {source?: RowReorderDetail['source']}): boolean;
+  getSelection(): string[];
+  setSelection(ids: string[]): void;
+  clearSelection(): void;
+  search(query: string, options?: Record<string, any>): any;
+  clearSearch(): void;
+  getSearchState(): TreeSearchState;
+  nextSearchResult(): string | null;
+  previousSearchResult(): string | null;
+  focusNode(id: string, options?: Record<string, any>): boolean;
+  scrollToNode(id: string, align?: TreeViewAlign): boolean;
+  expandAll(): void;
+  collapseAll(): void;
+  registerIcon(name: string, source: IconSource): any;
+}
+
+/** Public event details shared by the DOM view and the controller. */
+export interface InspectorValueChange {
+  path: string;
+  oldValue: any;
+  newValue: any;
+  model: any;
+  nodeId: string;
+  editorType: string;
+  source: string;
+}
+export interface TreeSearchState {
+  query: string;
+  results: string[];
+  cursor: number;
+  current: string | null;
+  count: number;
+}
+export interface TreeViewEvents {
+  valuechange: InspectorValueChange;
+  modelchange: {model: any; meta?: Record<string, MetaRule>; path?: string; structural?: boolean; action?: string; value?: any} & Partial<InspectorValueChange>;
+  action: {path: string; label: string; nodeId: string; model: any; source: string};
+  rowreorder: RowReorderDetail;
+  selectionchange: {selection: string[]; focusedId: string | null};
+  focuschange: {nodeId: string | null};
+  filterchange: {query: string; options: {caseSensitive: boolean; wholeWord: boolean}; visibleRows: number; worker?: boolean};
+  searchchange: Omit<TreeSearchState, 'count'>;
+  nodeclick: {nodeId: string; row: any; originalEvent: any};
+  nodedblclick: {nodeId: string; row: any; originalEvent: any};
+  editablechange: {editable: boolean};
+  rowreorderchange: {enabled: boolean};
+}
+export type TreeViewEvent<K extends keyof TreeViewEvents> = {type: K; detail: TreeViewEvents[K]};

package/src/index.js

@@ -4,3 +4,6 @@ export * from './inspector/index.js';
 export * from './renderers/index.js';
 export * from './tree-view-controller.js';
 export * from './benchmark/index.js';
+export { builtinIconNames } from './assets/icons.js';
+export { TreeView } from './tree-view.js';
+export { treeViewOptionNames, validateTreeViewOptions } from './core/view-options.js';

package/src/input/index.js

@@ -1,2 +1,3 @@
 export * from './pointer-controller.js';
 export * from './tree-view-input-controller.js';
+export * from './tree-tooltip.js';

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

@@ -0,0 +1,143 @@
+let nextStatusId = 0;
+
+/** Pointer interaction for the optional row-order column; persistence belongs to the host. */
+export class RowReorderInput {
+  constructor(controller) {
+    this.controller = controller;
+    this.canvas = controller.canvas;
+    this.view = this.canvas.ownerDocument?.defaultView ?? globalThis.window;
+    this.gesture = null;
+    this.frame = null;
+    this.previousTouchAction = this.canvas.style.touchAction;
+    this.canvas.addEventListener('pointerdown', this.onDown);
+    this.canvas.addEventListener('keydown', this.onKey);
+    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.cancel();
+      this.syncMode();
+    }));
+    this.stops.push(controller.on('rowreorder', event => {
+      if (!this.status) return;
+      const { nodeId, toIndex, siblingOrder } = event.detail;
+      const label = controller.model.index.getNode(nodeId)?.label ?? nodeId;
+      this.status.textContent = `${label}: position ${toIndex + 1} of ${siblingOrder.length}`;
+    }));
+    const doc = this.canvas.ownerDocument;
+    if (doc?.createElement && this.canvas.parentElement) {
+      this.status = doc.createElement('span');
+      this.status.id = `vtc-row-order-status-${nextStatusId++}`;
+      this.status.setAttribute('aria-live', 'polite');
+      Object.assign(this.status.style, { position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clipPath: 'inset(50%)' });
+      this.canvas.parentElement.appendChild(this.status);
+    }
+    this.syncMode();
+  }
+
+  syncMode() {
+    this.canvas.style.touchAction = this.controller.canReorderRows() ? 'none' : this.previousTouchAction;
+  }
+
+  onDown = event => {
+    if (event.button !== 0 || !this.controller.canReorderRows() || this.gesture) return;
+    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();
+    this.controller.cellEditor?.close?.();
+    this.controller.focusedId = hit.row.nodeId;
+    this.gesture = { id: hit.row.nodeId, part: hit.part, pointerId: event.pointerId,
+      startX: point.x, startY: point.y, point, dragging: false };
+    this.canvas.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+  };
+
+  onMove = event => {
+    const gesture = this.gesture;
+    if (!gesture || event.pointerId !== gesture.pointerId) return;
+    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;
+    gesture.dragging = true;
+    this.canvas.style.cursor = 'grabbing';
+    this.updateTarget();
+    this.scheduleScroll();
+    event.preventDefault();
+  };
+
+  onUp = event => {
+    const gesture = this.gesture;
+    if (!gesture || event.pointerId !== gesture.pointerId) return;
+    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 (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' });
+      if (gesture.part === 'rowDown') this.controller.moveRowBy(gesture.id, 1, { source: 'button' });
+    }
+  };
+
+  onCancel = event => { if (this.gesture?.pointerId === event.pointerId) this.cancel(); };
+  onKey = event => {
+    if (event.key === 'Escape' && this.gesture) {
+      this.cancel();
+      event.preventDefault();
+    }
+  };
+
+  point(event) {
+    const rect = this.canvas.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  }
+
+  updateTarget() {
+    const gesture = this.gesture;
+    this.controller.setRowDrop(gesture ? this.controller.getRowDropTarget(gesture.id, gesture.point.x, gesture.point.y) : null);
+  }
+
+  scheduleScroll() {
+    if (this.frame !== null || !this.gesture?.dragging) return;
+    const viewport = this.controller.viewport;
+    const y = this.gesture.point.y - viewport.renderInsetY;
+    const top = viewport.headerHeight;
+    const bottom = top + viewport.rowViewportHeight;
+    const delta = y < top + 24 ? -10 : y > bottom - 24 ? 10 : 0;
+    if (!delta) return;
+    const schedule = this.view.requestAnimationFrame?.bind(this.view) ?? (callback => setTimeout(callback, 16));
+    this.frame = schedule(() => {
+      this.frame = null;
+      if (!this.gesture?.dragging) return;
+      const previous = viewport.scrollY;
+      this.controller.scrollBy(0, delta);
+      this.updateTarget();
+      if (viewport.scrollY !== previous) this.scheduleScroll();
+    });
+  }
+
+  cancel = () => {
+    const gesture = this.gesture;
+    this.gesture = null;
+    if (this.frame !== null) (this.view.cancelAnimationFrame?.bind(this.view) ?? clearTimeout)(this.frame);
+    this.frame = null;
+    if (gesture && this.canvas.hasPointerCapture?.(gesture.pointerId)) this.canvas.releasePointerCapture(gesture.pointerId);
+    this.canvas.style.cursor = '';
+    this.controller.setRowDrop(null);
+  };
+
+  destroy() {
+    this.cancel();
+    this.canvas.removeEventListener('pointerdown', this.onDown);
+    this.canvas.removeEventListener('keydown', this.onKey);
+    this.view.removeEventListener('pointermove', this.onMove);
+    this.view.removeEventListener('pointerup', this.onUp);
+    this.view.removeEventListener('pointercancel', this.onCancel);
+    this.view.removeEventListener('blur', this.cancel);
+    this.canvas.style.touchAction = this.previousTouchAction;
+    for (const stop of this.stops) stop();
+    this.status?.remove();
+  }
+}

package/src/input/tree-filter-bar.js

@@ -0,0 +1,55 @@
+/** A view of controller filter state. No duplicated query or toggle state. */
+export class TreeFilterBar {
+  constructor(controller, document) {
+    this.controller = controller;
+    this.element = document.createElement('div');
+    this.element.className = 'vtc-filter';
+    this.input = document.createElement('input');
+    this.input.type = 'search';
+    this.input.placeholder = 'Filter';
+    this.input.setAttribute('aria-label', 'Filter rows');
+    this.caseButton = this.button(document, 'Aa', 'Match case');
+    this.wholeButton = this.button(document, 'W', 'Match whole word');
+    this.element.append(this.input, this.caseButton, this.wholeButton);
+    this.input.addEventListener('input', this.onInput);
+    this.caseButton.addEventListener('click', this.onCase);
+    this.wholeButton.addEventListener('click', this.onWhole);
+    this.stop = controller.on('filterchange', () => this.sync());
+    this.sync();
+  }
+
+  button(document, label, title) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    button.title = title;
+    button.setAttribute('aria-label', title);
+    return button;
+  }
+
+  onInput = () => this.controller.setFilter(this.input.value, this.controller.filterOptions);
+  onCase = () => this.toggle('caseSensitive');
+  onWhole = () => this.toggle('wholeWord');
+
+  toggle(key) {
+    const options = this.controller.filterOptions;
+    this.controller.setFilter(this.input.value, { ...options, [key]: !options[key] });
+    this.input.focus();
+  }
+
+  sync() {
+    this.input.value = this.controller.filterQuery;
+    this.caseButton.setAttribute('aria-pressed', String(this.controller.filterOptions.caseSensitive));
+    this.wholeButton.setAttribute('aria-pressed', String(this.controller.filterOptions.wholeWord));
+  }
+
+  setVisible(visible) { this.element.hidden = !visible; }
+
+  destroy() {
+    this.stop();
+    this.input.removeEventListener('input', this.onInput);
+    this.caseButton.removeEventListener('click', this.onCase);
+    this.wholeButton.removeEventListener('click', this.onWhole);
+    this.element.remove();
+  }
+}

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

@@ -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;
@@ -73,6 +74,7 @@ export class TreeViewInputController {
     this.canvas.focus();
     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);
@@ -98,6 +100,7 @@ export class TreeViewInputController {
 
   #onMouseDown = (event) => {
     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 +138,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

@@ -1,3 +1,5 @@
+import { numericLayout } from './numeric-layout.js';
+
 export class CellEditorManager {
   constructor({ controller, host = null }) {
     if (!controller) throw new TypeError('CellEditorManager requires a TreeViewController');
@@ -5,13 +7,24 @@ export class CellEditorManager {
     this.controller = controller;
     this.canvas = controller.canvas;
     this.host = host ?? controller.canvas.parentElement ?? document.body;
+    this.editable = true;
     this.overlay = null;
     this.rangeDrag = null;
+    this.overlayKind = 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);
@@ -25,7 +38,7 @@ export class CellEditorManager {
   }
 
   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') {
@@ -44,7 +57,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;
@@ -81,6 +94,7 @@ export class CellEditorManager {
     const hostRect = this.host.getBoundingClientRect();
     const element = createEditorElement(data);
     element.className = `vtc-editor vtc-editor-${data.editorType}`;
+    element.setAttribute('aria-label', [node.label, numericLayout(rect.width, data).unit].filter(Boolean).join(' '));
     Object.assign(element.style, {
       position: 'absolute',
       left: `${rect.x - hostRect.left}px`,
@@ -105,7 +119,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);
@@ -122,6 +136,7 @@ export class CellEditorManager {
     ensureOverlayHost(this.host);
     this.host.append(element);
     this.overlay = element;
+    this.overlayKind = 'value';
     element.focus({ preventScroll: true });
     element.select?.();
     if (options.showPicker && element.showPicker) {
@@ -177,6 +192,7 @@ export class CellEditorManager {
     ensureOverlayHost(this.host);
     this.host.append(element);
     this.overlay = element;
+    this.overlayKind = 'filter';
     element.focus({ preventScroll: true });
     element.select();
   }
@@ -208,34 +224,36 @@ export class CellEditorManager {
   }
 
   #isEditableHit(hit) {
-    return hit?.area === 'row' && (hit.column?.kind === 'inspectorValue' || hit.column?.kind === 'inspectorPane');
+    return hit?.area === 'row' && hit.part !== 'unit' && (hit.column?.kind === 'inspectorValue' || hit.column?.kind === 'inspectorPane');
   }
 
-  #overlayRect(hit) {
-    if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
+  #editorContentRect(hit) {
     const rect = this.controller.getCellClientRect(hit);
+    if (hit.column?.kind !== 'inspectorPane') {
+      return { x: rect.x + 10, y: rect.y + 4, width: Math.max(24, rect.width - 20), height: rect.height - 8 };
+    }
     const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.contentViewportWidth));
     const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
     const { editorLeft, editorWidth } = this.controller.getInspectorPaneLayout(visibleWidth, hit.row, data.editorType);
-    if (hit.part === 'number') {
-      const valueWidth = Math.min(64, Math.max(42, (editorWidth - 20) * 0.28));
-      return { x: rect.x + editorLeft + editorWidth - valueWidth - 10, y: rect.y + 4, width: valueWidth, height: rect.height - 8 };
+    return { x: rect.x + editorLeft + 10, y: rect.y + 4, width: Math.max(24, editorWidth - 20), height: rect.height - 8 };
+  }
+
+  #overlayRect(hit) {
+    const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
+    const rect = this.#editorContentRect(hit);
+    const layout = numericLayout(rect.width, data);
+    if (hit.part === 'number' && data.editorType === 'range') {
+      return { ...rect, x: rect.x + layout.numberLeft, width: layout.valueWidth };
     }
-    return { x: rect.x + editorLeft + 10, y: rect.y + 4, width: editorWidth - 20, height: rect.height - 8 };
+    if (layout.unit) return { ...rect, width: layout.contentWidth };
+    if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
+    return rect;
   }
 
   #rangeBarRect(hit) {
-    const rect = this.controller.getCellClientRect(hit);
-    if (hit.column?.kind === 'inspectorPane') {
-      const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.contentViewportWidth));
-      const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
-      const { editorLeft, editorWidth } = this.controller.getInspectorPaneLayout(visibleWidth, hit.row, data.editorType);
-      const valueWidth = Math.min(64, Math.max(42, (editorWidth - 20) * 0.28));
-      const barWidth = Math.max(24, editorWidth - 20 - valueWidth - 8);
-      return { x: rect.x + editorLeft + 10, y: rect.y + rect.height / 2 - 4, width: barWidth, height: 8 };
-    }
-    const valueWidth = Math.min(64, Math.max(42, (rect.width - 20) * 0.28));
-    return { x: rect.x + 10, y: rect.y + rect.height / 2 - 4, width: Math.max(24, rect.width - 20 - valueWidth - 8), height: 8 };
+    const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
+    const rect = this.#editorContentRect(hit);
+    return { ...rect, y: rect.y + rect.height / 2 - 4, width: numericLayout(rect.width, data).barWidth, height: 8 };
   }
 
   #clampRectToHost(rect, inset = 0) {
@@ -252,8 +270,10 @@ export class CellEditorManager {
   }
 
   #removeOverlay() {
-    this.overlay?.remove();
+    const overlay = this.overlay;
     this.overlay = null;
+    this.overlayKind = null;
+    overlay?.remove();
   }
 
   #toggleRangeMinMax(node, data) {

package/src/inspector/editor-resolver.js

@@ -28,6 +28,11 @@ export function formatInspectorValue(value, meta = {}) {
   if (value === null) return 'null';
   if (value === undefined) return 'undefined';
   if (typeof value === 'object') return Array.isArray(value) ? `Array(${value.length})` : 'Object';
-  if (typeof value === 'number') return Number.isInteger(value) ? String(value) : String(Math.round(value * 1000) / 1000);
+  if (typeof value === 'number') {
+    if (Number.isFinite(value) && Number.isInteger(meta.precision) && meta.precision >= 0 && meta.precision <= 20) {
+      return value.toFixed(meta.precision);
+    }
+    return Number.isInteger(value) ? String(value) : String(Math.round(value * 1000) / 1000);
+  }
   return String(value);
 }