virtual-tree-canvas 0.1.0 → 0.2.0

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "High-performance Canvas2D virtual tree/table widget for very large hierarchical datasets.",
   "type": "module",
   "main": "./src/index.js",
+  "types": "./src/index.d.ts",
   "sideEffects": false,
   "exports": {
-    ".": "./src/index.js",
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
     "./core": "./src/core/index.js",
     "./inspector": "./src/inspector/index.js",
     "./renderers": "./src/renderers/index.js",

package/src/core/icon-registry.js

@@ -74,6 +74,16 @@ export class IconRegistry {
     this.register('error', drawError);
     this.register('task', drawTask);
     this.register('track', drawTrack);
+    this.register('point', drawPoint);
+    this.register('munition', drawMunition);
+    this.register('air', drawAircraft);
+    this.register('ground', drawGroundVehicle);
+    this.register('surface', drawSurfaceVehicle);
+    this.register('subsurface', drawSubsurfaceVehicle);
+    this.register('space', drawSpaceVehicle);
+    this.register('control', drawControl);
+    this.register('situation', drawSituation);
+    this.register('damage', drawDamage);
   }
 }
 
@@ -171,3 +181,231 @@ function drawTrack(ctx, x, y, size, color) {
   ctx.lineTo(x + size - 1, y + size / 2);
   ctx.stroke();
 }
+
+function drawPoint(ctx, x, y, size, color) {
+  const cx = x + size / 2;
+  const cy = y + size / 2;
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1.4;
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.22, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.42, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(cx, y + 1);
+  ctx.lineTo(cx, y + size * 0.22);
+  ctx.moveTo(cx, y + size * 0.78);
+  ctx.lineTo(cx, y + size - 1);
+  ctx.moveTo(x + 1, cy);
+  ctx.lineTo(x + size * 0.22, cy);
+  ctx.moveTo(x + size * 0.78, cy);
+  ctx.lineTo(x + size - 1, cy);
+  ctx.stroke();
+}
+
+function drawMunition(ctx, x, y, size, color) {
+  const cx = x + size * 0.5;
+  const bodyTop = y + size * 0.25;
+  const bodyBottom = y + size * 0.76;
+  ctx.fillStyle = color;
+
+  ctx.beginPath();
+  ctx.moveTo(cx, y + 1);
+  ctx.lineTo(cx + size * 0.17, bodyTop);
+  ctx.lineTo(cx - size * 0.17, bodyTop);
+  ctx.closePath();
+  ctx.fill();
+
+  ctx.fillRect(cx - size * 0.11, bodyTop, size * 0.22, bodyBottom - bodyTop);
+
+  ctx.beginPath();
+  ctx.moveTo(cx - size * 0.11, y + size * 0.63);
+  ctx.lineTo(x + 1, y + size - 2);
+  ctx.lineTo(cx - size * 0.11, y + size * 0.82);
+  ctx.closePath();
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.moveTo(cx + size * 0.11, y + size * 0.63);
+  ctx.lineTo(x + size - 1, y + size - 2);
+  ctx.lineTo(cx + size * 0.11, y + size * 0.82);
+  ctx.closePath();
+  ctx.fill();
+
+  ctx.strokeStyle = 'rgba(255,255,255,.35)';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(cx, bodyTop + 1);
+  ctx.lineTo(cx, bodyBottom - 1);
+  ctx.stroke();
+
+  ctx.strokeStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(cx - size * 0.12, bodyBottom);
+  ctx.lineTo(cx, y + size - 1);
+  ctx.lineTo(cx + size * 0.12, bodyBottom);
+  ctx.stroke();
+}
+
+function drawGroundVehicle(ctx, x, y, size, color) {
+  ctx.fillStyle = color;
+  const bodyY = y + size * 0.42;
+  ctx.fillRect(x + size * 0.16, bodyY, size * 0.68, size * 0.26);
+  ctx.fillRect(x + size * 0.34, y + size * 0.26, size * 0.28, size * 0.2);
+  ctx.fillRect(x + size * 0.62, y + size * 0.34, size * 0.3, size * 0.06);
+  ctx.beginPath();
+  ctx.arc(x + size * 0.28, y + size * 0.76, size * 0.09, 0, Math.PI * 2);
+  ctx.arc(x + size * 0.5, y + size * 0.76, size * 0.09, 0, Math.PI * 2);
+  ctx.arc(x + size * 0.72, y + size * 0.76, size * 0.09, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function drawSurfaceVehicle(ctx, x, y, size, color) {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(x + 1, y + size * 0.58);
+  ctx.lineTo(x + size * 0.82, y + size * 0.58);
+  ctx.lineTo(x + size - 1, y + size * 0.72);
+  ctx.lineTo(x + size * 0.18, y + size * 0.82);
+  ctx.closePath();
+  ctx.fill();
+
+  ctx.fillRect(x + size * 0.34, y + size * 0.34, size * 0.24, size * 0.2);
+  ctx.fillRect(x + size * 0.46, y + size * 0.18, size * 0.08, size * 0.18);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.2;
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.18, y + size * 0.88);
+  ctx.quadraticCurveTo(x + size * 0.34, y + size * 0.78, x + size * 0.5, y + size * 0.88);
+  ctx.quadraticCurveTo(x + size * 0.66, y + size * 0.98, x + size * 0.82, y + size * 0.88);
+  ctx.stroke();
+}
+
+function drawSubsurfaceVehicle(ctx, x, y, size, color) {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.ellipse(x + size * 0.5, y + size * 0.58, size * 0.38, size * 0.18, 0, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillRect(x + size * 0.44, y + size * 0.28, size * 0.12, size * 0.18);
+  ctx.fillRect(x + size * 0.38, y + size * 0.26, size * 0.24, size * 0.06);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.2;
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.16, y + size * 0.86);
+  ctx.quadraticCurveTo(x + size * 0.32, y + size * 0.78, x + size * 0.5, y + size * 0.86);
+  ctx.quadraticCurveTo(x + size * 0.68, y + size * 0.94, x + size * 0.84, y + size * 0.86);
+  ctx.stroke();
+}
+
+function drawSpaceVehicle(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.2;
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.16, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.strokeRect(x + size * 0.12, y + size * 0.32, size * 0.24, size * 0.36);
+  ctx.strokeRect(x + size * 0.64, y + size * 0.32, size * 0.24, size * 0.36);
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.36, cy);
+  ctx.lineTo(x + size * 0.64, cy);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.ellipse(cx, cy, size * 0.42, size * 0.18, -0.45, 0, Math.PI * 2);
+  ctx.stroke();
+}
+
+function drawControl(ctx, x, y, size, color) {
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1.3;
+  const cx = x + size * 0.5;
+  const baseY = y + size * 0.68;
+
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.22, baseY);
+  ctx.lineTo(x + size * 0.78, baseY);
+  ctx.lineTo(x + size * 0.88, y + size * 0.88);
+  ctx.lineTo(x + size * 0.12, y + size * 0.88);
+  ctx.closePath();
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(cx, baseY);
+  ctx.lineTo(x + size * 0.42, y + size * 0.32);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.arc(x + size * 0.4, y + size * 0.28, size * 0.13, 0, Math.PI * 2);
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.arc(x + size * 0.66, y + size * 0.78, size * 0.055, 0, Math.PI * 2);
+  ctx.arc(x + size * 0.78, y + size * 0.78, size * 0.055, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function drawSituation(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.42, 0, Math.PI * 2);
+  ctx.moveTo(cx - size * 0.42, cy);
+  ctx.lineTo(cx + size * 0.42, cy);
+  ctx.moveTo(cx, cy - size * 0.42);
+  ctx.lineTo(cx, cy + size * 0.42);
+  ctx.stroke();
+
+  ctx.globalAlpha = 0.55;
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.25, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.globalAlpha = 1;
+
+  ctx.beginPath();
+  ctx.moveTo(cx, cy);
+  ctx.lineTo(x + size * 0.82, y + size * 0.26);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.arc(x + size * 0.68, y + size * 0.38, size * 0.055, 0, Math.PI * 2);
+  ctx.arc(x + size * 0.36, y + size * 0.62, size * 0.045, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function drawDamage(ctx, x, y, size, color) {
+  const cx = x + size * 0.5;
+  const cy = y + size * 0.52;
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1.4;
+
+  ctx.beginPath();
+  ctx.moveTo(cx, y + 1);
+  ctx.lineTo(x + size * 0.9, y + size * 0.34);
+  ctx.lineTo(x + size * 0.68, y + size * 0.42);
+  ctx.lineTo(x + size - 1, y + size * 0.64);
+  ctx.lineTo(x + size * 0.62, y + size * 0.6);
+  ctx.lineTo(x + size * 0.72, y + size - 1);
+  ctx.lineTo(cx, y + size * 0.72);
+  ctx.lineTo(x + size * 0.28, y + size - 1);
+  ctx.lineTo(x + size * 0.38, y + size * 0.6);
+  ctx.lineTo(x + 1, y + size * 0.64);
+  ctx.lineTo(x + size * 0.32, y + size * 0.42);
+  ctx.lineTo(x + size * 0.1, y + size * 0.34);
+  ctx.closePath();
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.12, 0, Math.PI * 2);
+  ctx.fill();
+}

package/src/core/theme-manager.js

@@ -22,8 +22,18 @@ export const darkTheme = {
     root: { icon: 'folder', color: '#38bdf8' },
     system: { icon: 'folder', color: '#818cf8' },
     platform: { icon: 'aircraft', color: '#60a5fa' },
+    air: { icon: 'air', color: '#60a5fa' },
+    ground: { icon: 'ground', color: '#a3e635' },
+    surface: { icon: 'surface', color: '#22d3ee' },
+    subsurface: { icon: 'subsurface', color: '#38bdf8' },
+    space: { icon: 'space', color: '#c084fc' },
+    munition: { icon: 'munition', color: '#fb7185' },
     sensor: { icon: 'radar', color: '#34d399' },
     track: { icon: 'track', color: '#a78bfa' },
+    geometry: { icon: 'point', color: '#38bdf8' },
+    control: { icon: 'control', color: '#f59e0b' },
+    situation: { icon: 'situation', color: '#2dd4bf' },
+    damage: { icon: 'damage', color: '#fb7185' },
     warning: { icon: 'warning', color: '#facc15' },
     error: { icon: 'error', color: '#ef4444' },
     task: { icon: 'task', color: '#f97316' },
@@ -77,8 +87,18 @@ export const tacticalTheme = {
     ...darkTheme.types,
     root: { icon: 'folder', color: '#7ddc92' },
     platform: { icon: 'aircraft', color: '#93c572' },
+    air: { icon: 'air', color: '#93c572' },
+    ground: { icon: 'ground', color: '#c7f36f' },
+    surface: { icon: 'surface', color: '#67e8f9' },
+    subsurface: { icon: 'subsurface', color: '#7dd3fc' },
+    space: { icon: 'space', color: '#d8b4fe' },
+    munition: { icon: 'munition', color: '#ff8fab' },
     sensor: { icon: 'radar', color: '#45d483' },
     track: { icon: 'track', color: '#d6f264' },
+    geometry: { icon: 'point', color: '#7ddc92' },
+    control: { icon: 'control', color: '#ffd166' },
+    situation: { icon: 'situation', color: '#8be9d9' },
+    damage: { icon: 'damage', color: '#ff8fab' },
     warning: { icon: 'warning', color: '#ffd166' },
     error: { icon: 'error', color: '#ff5c5c' },
   },
@@ -159,4 +179,3 @@ function mergeTheme(base, override) {
     statuses: { ...base.statuses, ...(override.statuses ?? {}) },
   };
 }
-

package/src/core/tree-worker-operations.js

@@ -59,6 +59,7 @@ export function rebuildWorkerRows(state, options = {}) {
   const rowHeight = options.rowHeight ?? 28;
   const indentWidth = options.indentWidth ?? 18;
   const expanded = new Set(options.expandedIds ?? []);
+  const filterCollapsed = new Set(options.filterCollapsedIds ?? []);
   const query = normalize(options.filterQuery ?? '');
   const sort = options.sort ?? { columnId: null, direction: null };
   const sortValues = options.sortValues ? new Map(options.sortValues) : null;
@@ -81,7 +82,8 @@ export function rebuildWorkerRows(state, options = {}) {
     if (!isIncluded(id)) return;
     const nodeIndex = state.idToIndex.get(id);
     if (nodeIndex === undefined) return;
-    const expandedRow = expanded.has(id);
+    const children = sortIds(state.childrenByParent.get(id) ?? []);
+    const expandedRow = (expanded.has(id) || Boolean(query && children.length > 0)) && !filterCollapsed.has(id);
     const rowIndex = rows.length;
     rows.push({
       nodeId: id,
@@ -94,8 +96,8 @@ export function rebuildWorkerRows(state, options = {}) {
       hasChildren: hasChildren(id),
     });
     maxDepth = Math.max(maxDepth, depth);
-    if (!expandedRow && !query) return;
-    for (const childId of sortIds(state.childrenByParent.get(id) ?? [])) visit(childId, depth + 1);
+    if (!expandedRow) return;
+    for (const childId of children) visit(childId, depth + 1);
   };
 
   for (const rootId of sortIds(state.roots)) visit(rootId, 0);

package/src/core/visible-row-model.js

@@ -33,6 +33,7 @@ export class VisibleRowModel extends EventTarget {
     this.contentHeight = 0;
     this.sortComparator = null;
     this.filterPredicate = null;
+    this.filterCollapsed = new Set();
   }
 
   setSortComparator(comparator) {
@@ -41,6 +42,15 @@ export class VisibleRowModel extends EventTarget {
 
   setFilterPredicate(predicate) {
     this.filterPredicate = predicate;
+    this.filterCollapsed.clear();
+  }
+
+  collapseFilterBranch(id) {
+    this.filterCollapsed.add(id);
+  }
+
+  expandFilterBranch(id) {
+    return this.filterCollapsed.delete(id);
   }
 
   applyRows({ rows, contentHeight, contentWidth }) {
@@ -84,8 +94,10 @@ export class VisibleRowModel extends EventTarget {
       if (!subtreeIncluded(id)) return;
       const nodeIndex = this.model.index.idToIndex.get(id);
       if (nodeIndex === undefined) return;
+      const children = sortedChildren(id);
       const hasChildren = this.expansion.hasChildren(id);
-      const expanded = this.expansion.isExpanded(id);
+      const autoExpanded = Boolean(this.filterPredicate && children.length > 0);
+      const expanded = (this.expansion.isExpanded(id) || autoExpanded) && !this.filterCollapsed.has(id);
       const rowIndex = this.rows.length;
       this.rows.push({
         nodeId: id,
@@ -99,8 +111,8 @@ export class VisibleRowModel extends EventTarget {
       });
       this.rowIndexById.set(id, rowIndex);
       maxDepth = Math.max(maxDepth, depth);
-      if (!expanded && !this.filterPredicate) return;
-      for (const childId of sortedChildren(id)) visit(childId, depth + 1);
+      if (!expanded) return;
+      for (const childId of children) visit(childId, depth + 1);
     };
 
     const roots = this.model.index.roots.filter((rootId) => subtreeIncluded(rootId));

package/src/index.d.ts

@@ -0,0 +1,108 @@
+export type TreeViewAlign = 'start' | 'center' | 'end' | 'nearest';
+
+export type TreeNode = {
+  id: string;
+  parentId?: string | null;
+  label?: string;
+  type?: string;
+  icon?: string;
+  image?: string;
+  tags?: string[];
+  data?: any;
+};
+
+export type DynamicPatch = {
+  id: string;
+  state?: Record<string, any>;
+} & Record<string, any>;
+
+export type MetaRule = {
+  min?: number;
+  max?: number;
+  step?: number;
+  integer?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  updated?: boolean;
+  description?: string;
+  color?: boolean;
+  options?: Record<string, string | number | boolean>;
+  button?: string;
+  label?: string;
+  fullWidthButton?: boolean;
+  itemType?: 'object' | 'number' | 'string' | 'boolean';
+  itemTitle?: (i: number, item: any) => string;
+  itemFactory?: () => any;
+  type?: string;
+  icon?: string;
+};
+
+export type Column = {
+  id: string;
+  label?: string;
+  width?: number;
+  minWidth?: number;
+  align?: 'left' | 'center' | 'right';
+  kind?: string;
+  sortable?: boolean;
+  value?: (node: TreeNode, state: Record<string, any>) => string | number | boolean;
+  render?: (ctx: CanvasRenderingContext2D, cell: any) => void;
+};
+
+export const themes: Record<string, any>;
+
+export class TreeRowRenderer {
+  renderedRows: number;
+  constructor(options?: Record<string, any>);
+  initialize(canvas: HTMLCanvasElement): void;
+  setScene(scene: any): void;
+  updateDynamicState(patches: DynamicPatch[]): void;
+  render(scene?: any, time?: number): void;
+}
+
+export class TreeViewController {
+  canvas?: HTMLCanvasElement;
+  viewport: {
+    viewportWidth: number;
+    viewportHeight: number;
+    [key: string]: any;
+  };
+  filterQuery: string;
+  rowModel: any;
+  expansion: any;
+  selection: any;
+  constructor(options?: Record<string, any>);
+  on(type: string, listener: (event: any) => void): any;
+  off(type: string, listener: (event: any) => void): void;
+  setData(nodes: TreeNode[]): void;
+  setModel(model: any, meta?: Record<string, MetaRule>, options?: Record<string, any>): void;
+  setColumns(columns: Column[]): void;
+  setDynamicState(patches: DynamicPatch[]): void;
+  setTheme(theme: any): void;
+  resize(width: number, height: number): void;
+  render(time?: number): void;
+  renderMeasured(time?: number): any;
+  hitTest(clientX: number, clientY: number): any;
+  getTooltipForHit(hit: any): any;
+  search(query: string, options?: Record<string, any>): any;
+  setFilter(queryOrPredicate?: string | ((node: any, state: any) => boolean)): void;
+  clearFilter(): void;
+  focusNode(nodeId: string, options?: Record<string, any>): boolean;
+  scrollToNode(nodeId: string, align?: TreeViewAlign): boolean;
+  getSelection(): string[];
+  setSelection(ids: string[]): void;
+  clearSelection(): void;
+  expandAll(): void;
+  collapseAll(): void;
+}
+
+export class TreeViewInputController {
+  constructor(options?: Record<string, any>);
+  destroy(): void;
+}
+
+export class CellEditorManager {
+  constructor(options?: Record<string, any>);
+  destroy(): void;
+  close(): void;
+}

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

@@ -43,6 +43,7 @@ export class TreeViewInputController {
 
   #onWheel = (event) => {
     event.preventDefault();
+    this.cellEditor?.close?.();
     if (this.controller) {
       this.controller.scrollBy(event.shiftKey ? event.deltaY : event.deltaX, event.deltaY);
       return;

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

@@ -15,11 +15,18 @@ export class CellEditorManager {
     window.removeEventListener('mouseup', this.onMouseUp);
   }
 
+  close() {
+    this.#removeOverlay();
+    this.rangeDrag = null;
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+  }
+
   handlePointerDown(event, hit) {
     if (!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 !== 'number') {
+    if (data.editorType === 'range' && hit.part === 'range') {
       this.rangeDrag = { hit, data };
       this.#updateRangeFromEvent(event);
       window.addEventListener('mousemove', this.onMouseMove);
@@ -47,7 +54,13 @@ export class CellEditorManager {
       this.controller.updateInspectorValue(node.id, !data.value, 'checkbox');
       return true;
     }
-    if (data.editorType === 'range' && hit.part !== 'number') return true;
+    if (data.editorType === 'range') {
+      if (hit.part === 'range') return true;
+      if (hit.part !== 'number') {
+        this.#toggleRangeMinMax(node, data);
+        return true;
+      }
+    }
     if (this.overlay) return true;
     this.#showOverlay(node, hit);
     return true;
@@ -62,7 +75,7 @@ export class CellEditorManager {
   #showOverlay(node, hit, options = {}) {
     this.#removeOverlay();
     const data = node.data;
-    const rect = this.#overlayRect(hit);
+    const rect = this.#clampRectToHost(this.#overlayRect(hit), 4);
     const hostRect = this.host.getBoundingClientRect();
     const element = createEditorElement(data);
     Object.assign(element.style, {
@@ -98,7 +111,7 @@ export class CellEditorManager {
     ensureOverlayHost(this.host);
     this.host.append(element);
     this.overlay = element;
-    element.focus();
+    element.focus({ preventScroll: true });
     element.select?.();
     if (options.showPicker && element.showPicker) {
       requestAnimationFrame(() => {
@@ -113,7 +126,13 @@ export class CellEditorManager {
 
   #showHeaderFilterOverlay(hit) {
     this.#removeOverlay();
-    const rect = this.controller.getHeaderClientRect(hit);
+    const headerRect = this.controller.getHeaderClientRect(hit);
+    const rect = this.#clampRectToHost({
+      x: headerRect.x + 8,
+      y: headerRect.y + 5,
+      width: Math.max(24, Math.min(headerRect.width, this.controller.viewport.viewportWidth) - 16),
+      height: Math.max(20, headerRect.height - 10),
+    }, 0);
     const hostRect = this.host.getBoundingClientRect();
     const element = document.createElement('input');
     element.type = 'search';
@@ -121,12 +140,12 @@ export class CellEditorManager {
     element.placeholder = 'Filter inspector';
     Object.assign(element.style, {
       position: 'absolute',
-      left: `${rect.x - hostRect.left + 8}px`,
-      top: `${rect.y - hostRect.top + 5}px`,
-      width: `${Math.max(24, rect.width - 16)}px`,
-      height: `${Math.max(20, rect.height - 10)}px`,
+      left: `${rect.x - hostRect.left}px`,
+      top: `${rect.y - hostRect.top}px`,
+      width: `${Math.max(24, rect.width)}px`,
+      height: `${Math.max(20, rect.height)}px`,
       minWidth: '0',
-      maxWidth: `${Math.max(24, rect.width - 16)}px`,
+      maxWidth: `${Math.max(24, rect.width)}px`,
       zIndex: 20,
       boxSizing: 'border-box',
       margin: '0',
@@ -147,7 +166,7 @@ export class CellEditorManager {
     ensureOverlayHost(this.host);
     this.host.append(element);
     this.overlay = element;
-    element.focus();
+    element.focus({ preventScroll: true });
     element.select();
   }
 
@@ -184,8 +203,9 @@ export class CellEditorManager {
   #overlayRect(hit) {
     if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
     const rect = this.controller.getCellClientRect(hit);
-    const editorLeft = Math.min(Math.max(210, rect.width * 0.42), rect.width - 180);
-    const editorWidth = Math.max(80, rect.width - editorLeft - 14);
+    const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.viewportWidth));
+    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 };
@@ -196,8 +216,9 @@ export class CellEditorManager {
   #rangeBarRect(hit) {
     const rect = this.controller.getCellClientRect(hit);
     if (hit.column?.kind === 'inspectorPane') {
-      const editorLeft = Math.min(Math.max(210, rect.width * 0.42), rect.width - 180);
-      const editorWidth = Math.max(80, rect.width - editorLeft - 14);
+      const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.viewportWidth));
+      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 };
@@ -206,10 +227,31 @@ export class CellEditorManager {
     return { x: rect.x + 10, y: rect.y + rect.height / 2 - 4, width: Math.max(24, rect.width - 20 - valueWidth - 8), height: 8 };
   }
 
+  #clampRectToHost(rect, inset = 0) {
+    const hostRect = this.host.getBoundingClientRect();
+    const minX = hostRect.left + inset;
+    const minY = hostRect.top + inset;
+    const maxX = hostRect.right - inset;
+    const maxY = hostRect.bottom - inset;
+    const width = Math.max(24, Math.min(rect.width, maxX - minX));
+    const height = Math.max(18, Math.min(rect.height, maxY - minY));
+    const x = Math.max(minX, Math.min(rect.x, maxX - width));
+    const y = Math.max(minY, Math.min(rect.y, maxY - height));
+    return { x, y, width, height };
+  }
+
   #removeOverlay() {
     this.overlay?.remove();
     this.overlay = null;
   }
+
+  #toggleRangeMinMax(node, data) {
+    const meta = data.meta ?? {};
+    const min = Number.isFinite(meta.min) ? meta.min : 0;
+    const max = Number.isFinite(meta.max) ? meta.max : 100;
+    const current = typeof data.value === 'number' && Number.isFinite(data.value) ? data.value : min;
+    this.controller.updateInspectorValue(node.id, current <= min ? max : min, 'range');
+  }
 }
 
 function createEditorElement(data) {

package/src/inspector/model-inspector-builder.js

@@ -30,7 +30,8 @@ export class ModelInspectorBuilder {
       id,
       parentId,
       label,
-      type: inspectorNodeType(valueType, editorType),
+      type: rule.type ?? inspectorNodeType(valueType, editorType),
+      icon: rule.icon,
       data: {
         inspector: true,
         path,

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

@@ -47,11 +47,13 @@ export class TreeRowRenderer {
     ctx.translate(viewport.renderInsetX ?? 0, viewport.renderInsetY ?? 0);
     this.#drawHeader(ctx);
     this.#drawRows(ctx);
+    this.#drawScrollIndicator(ctx);
     ctx.restore();
   }
 
   #drawHeader(ctx) {
     const { viewport, columns, theme, sort, headerFilter, filterQuery } = this.scene;
+    if (viewport.headerHeight <= 0) return;
     const colors = theme.colors;
     ctx.save();
     ctx.fillStyle = colors.row;
@@ -65,10 +67,10 @@ export class TreeRowRenderer {
         this.#drawHeaderFilter(ctx, column, viewport, theme, filterQuery);
       } else {
         ctx.fillStyle = colors.textMuted;
-        ctx.fillText(column.label, column.x + 10, viewport.headerHeight / 2, column.width - 20);
+        drawTruncatedText(ctx, column.label, column.x + 10, viewport.headerHeight / 2, column.width - 20);
       }
       if (sort?.columnId === column.id && sort.direction) {
-        ctx.fillText(sort.direction === 'asc' ? '^' : 'v', column.x + column.width - 16, viewport.headerHeight / 2, 12);
+        drawTruncatedText(ctx, sort.direction === 'asc' ? '^' : 'v', column.x + column.width - 16, viewport.headerHeight / 2, 12);
       }
       ctx.strokeStyle = colors.border;
       ctx.beginPath();
@@ -89,7 +91,9 @@ export class TreeRowRenderer {
     const colors = theme.colors;
     const x = column.x + 8;
     const y = 5;
-    const width = Math.max(40, column.width - 16);
+    const visibleRight = viewport.scrollX + viewport.viewportWidth;
+    const visibleWidth = Math.max(1, Math.min(column.x + column.width, visibleRight) - column.x);
+    const width = Math.max(40, visibleWidth - 16);
     const height = Math.max(18, viewport.headerHeight - 10);
     ctx.fillStyle = colors.progressTrack;
     roundRect(ctx, x, y, width, height, 4);
@@ -97,13 +101,16 @@ export class TreeRowRenderer {
     ctx.strokeStyle = colors.border;
     ctx.stroke();
     ctx.fillStyle = filterQuery ? colors.text : colors.textMuted;
-    ctx.fillText(filterQuery || 'Filter inspector', x + 8, viewport.headerHeight / 2, width - 16);
+    drawTruncatedText(ctx, filterQuery || 'Filter inspector', x + 8, viewport.headerHeight / 2, width - 16);
   }
 
   #drawRows(ctx) {
     const { rows, visibleRange, viewport } = this.scene;
     this.renderedRows = visibleRange.count;
     ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, viewport.headerHeight, viewport.viewportWidth, viewport.rowViewportHeight);
+    ctx.clip();
     ctx.translate(-viewport.scrollX, viewport.headerHeight - viewport.scrollY);
     for (let i = visibleRange.first; i <= visibleRange.last; i++) {
       const row = rows[i];
@@ -112,6 +119,36 @@ export class TreeRowRenderer {
     ctx.restore();
   }
 
+  #drawScrollIndicator(ctx) {
+    const { viewport, theme } = this.scene;
+    const maxY = Math.max(0, viewport.contentHeight - viewport.rowViewportHeight);
+    if (maxY <= 0 || viewport.viewportHeight <= viewport.headerHeight + 12) return;
+
+    const trackTop = viewport.headerHeight + 4;
+    const trackHeight = Math.max(1, viewport.viewportHeight - viewport.headerHeight - 8);
+    const thumbHeight = Math.max(18, Math.min(trackHeight, trackHeight * (viewport.rowViewportHeight / viewport.contentHeight)));
+    const thumbY = trackTop + (trackHeight - thumbHeight) * (viewport.scrollY / maxY);
+    const x = Math.max(2, viewport.viewportWidth - 4);
+
+    ctx.save();
+    ctx.lineCap = 'round';
+    ctx.lineWidth = 2;
+    ctx.globalAlpha = 0.28;
+    ctx.strokeStyle = theme.colors.guide;
+    ctx.beginPath();
+    ctx.moveTo(x, trackTop);
+    ctx.lineTo(x, trackTop + trackHeight);
+    ctx.stroke();
+
+    ctx.globalAlpha = 0.9;
+    ctx.strokeStyle = theme.colors.focus;
+    ctx.beginPath();
+    ctx.moveTo(x, thumbY);
+    ctx.lineTo(x, thumbY + thumbHeight);
+    ctx.stroke();
+    ctx.restore();
+  }
+
   #drawRow(ctx, row) {
     const { columns, nodes, dynamicState, selection, hoverNodeId, focusNodeId, searchMatches, theme, viewport } = this.scene;
     const node = nodes[row.nodeIndex];
@@ -123,10 +160,11 @@ export class TreeRowRenderer {
     const hovered = hoverNodeId === row.nodeId;
     const focused = focusNodeId === row.nodeId;
     const y = row.y;
-    const rowWidth = Math.max(viewport.contentWidth, viewport.scrollX + viewport.viewportWidth);
+    const visibleX = viewport.scrollX;
+    const visibleWidth = viewport.viewportWidth;
 
     ctx.fillStyle = selected ? colors.rowSelected : highlighted ? colors.rowHighlighted : hovered ? colors.rowHover : colors.row;
-    ctx.fillRect(0, y, rowWidth, row.height);
+    ctx.fillRect(visibleX, y, visibleWidth, row.height);
 
     this.#drawIndentGuides(ctx, row, colors);
 
@@ -142,20 +180,15 @@ export class TreeRowRenderer {
 
     ctx.strokeStyle = colors.border;
     ctx.beginPath();
-    ctx.moveTo(0, y + row.height + 0.5);
-    ctx.lineTo(rowWidth, y + row.height + 0.5);
+    ctx.moveTo(visibleX, y + row.height + 0.5);
+    ctx.lineTo(visibleX + visibleWidth, y + row.height + 0.5);
     ctx.stroke();
 
-    if (state.updated && node.data?.inspector) {
-      ctx.fillStyle = theme.colors.focus;
-      ctx.beginPath();
-      ctx.arc(rowWidth - 10, y + row.height / 2, 3, 0, Math.PI * 2);
-      ctx.fill();
-    }
+    if (state.updated && node.data?.inspector) this.#drawUpdatedMarker(ctx, row, theme);
 
     if (focused) {
       ctx.strokeStyle = colors.focus;
-      ctx.strokeRect(1.5, y + 2.5, rowWidth - 3, row.height - 5);
+      ctx.strokeRect(visibleX + 1.5, y + 2.5, visibleWidth - 3, row.height - 5);
     }
   }
 
@@ -174,25 +207,35 @@ export class TreeRowRenderer {
     else this.#drawTextCell(ctx, cell);
   }
 
-  #drawInspectorPaneCell(ctx, { node, row, rect, theme }) {
+  #drawInspectorPaneCell(ctx, { node, row, rect, theme, style }) {
+    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 ?? {};
     const colors = theme.colors;
     const indentX = rect.x + row.depth * theme.indentWidth;
-    const labelX = indentX + 28;
     const cy = rect.y + rect.height / 2;
-    this.#drawChevron(ctx, indentX + 10, cy, row, colors);
+    let labelX = indentX + 28;
+    if (!row.hasChildren && node.icon) {
+      this.iconRegistry.draw(ctx, style.icon, indentX + 3, rect.y + 6, 15, style.color);
+      labelX = indentX + 24;
+    } else if (!row.hasChildren) {
+      labelX = indentX + 24;
+    } else {
+      this.#drawChevron(ctx, indentX + 10, cy, row, colors);
+    }
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
     ctx.globalAlpha = data.disabled ? 0.45 : 1;
     ctx.fillStyle = data.valueType === 'object' || data.valueType === 'array' ? colors.text : colors.textMuted;
-    ctx.fillText(node.label ?? node.id, labelX, cy, 180);
+    const layout = inspectorPaneLayout(rect.width, row.depth, theme.indentWidth, data.editorType, this.scene.inspectorPaneLabelEnd);
+    drawTruncatedText(ctx, node.label ?? node.id, labelX, cy, Math.max(20, rect.x + layout.editorLeft - labelX - 8));
 
-    const editorX = rect.x + Math.min(Math.max(210, rect.width * 0.42), rect.width - 180);
-    const editorWidth = Math.max(80, rect.x + rect.width - editorX - 14);
+    const editorX = rect.x + layout.editorLeft;
+    const editorWidth = layout.editorWidth;
     if (data.valueType === 'array') {
       ctx.fillStyle = colors.textMuted;
-      ctx.fillText(data.valueText, editorX, cy, Math.max(20, editorWidth - 58));
+      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);
     } else if (data.valueType === 'object') {
@@ -202,12 +245,14 @@ export class TreeRowRenderer {
         node,
         rect: { x: editorX, y: rect.y, width: editorWidth, height: rect.height },
         theme,
+        suppressUpdatedMarker: true,
       });
     }
+    if (data.meta?.updated) this.#drawUpdatedMarker(ctx, row, theme);
     ctx.globalAlpha = 1;
   }
 
-  #drawInspectorValueCell(ctx, { node, rect, theme }) {
+  #drawInspectorValueCell(ctx, { node, rect, theme, suppressUpdatedMarker = false }) {
     const data = node.data ?? {};
     const meta = data.meta ?? {};
     const disabled = data.disabled;
@@ -237,7 +282,7 @@ export class TreeRowRenderer {
       ctx.fill();
       ctx.fillStyle = theme.colors.text;
       ctx.textAlign = 'center';
-      ctx.fillText(meta.button ?? node.label, x + (meta.fullWidthButton ? width : Math.min(width, 140)) / 2, rect.y + rect.height / 2);
+      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));
       ctx.textAlign = 'left';
     } else if (data.editorType === 'select') {
       ctx.fillStyle = theme.colors.rowHover;
@@ -245,12 +290,12 @@ export class TreeRowRenderer {
       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;
-      ctx.fillText('v', x + Math.min(width, 180) - 14, rect.y + rect.height / 2);
+      drawTruncatedText(ctx, 'v', x + Math.min(width, 180) - 14, rect.y + rect.height / 2, 10);
     } else {
       this.#drawMutedText(ctx, data.valueText, x, rect.y + rect.height / 2, width, theme, readonly);
     }
 
-    if (meta.updated) {
+    if (meta.updated && !suppressUpdatedMarker) {
       ctx.fillStyle = theme.colors.focus;
       ctx.beginPath();
       ctx.arc(rect.x + rect.width - 10, rect.y + rect.height / 2, 3, 0, Math.PI * 2);
@@ -259,6 +304,15 @@ export class TreeRowRenderer {
     ctx.globalAlpha = 1;
   }
 
+  #drawUpdatedMarker(ctx, row, theme) {
+    const x = Math.max(6, row.depth * theme.indentWidth - 8);
+    const y = row.y + row.height / 2;
+    ctx.fillStyle = theme.colors.focus;
+    ctx.beginPath();
+    ctx.arc(x, y, 3, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
   #drawInspectorTypeCell(ctx, { node, rect, theme }) {
     this.#drawMutedText(ctx, node.data?.valueType ?? '', rect.x + 10, rect.y + rect.height / 2, rect.width - 20, theme);
   }
@@ -299,7 +353,7 @@ export class TreeRowRenderer {
     ctx.fill();
     ctx.fillStyle = theme.colors.text;
     ctx.textAlign = 'right';
-    ctx.fillText(String(data.valueText ?? ''), x + barWidth + gap + valueWidth - 6, y + 4, valueWidth - 10);
+    drawTruncatedText(ctx, String(data.valueText ?? ''), x + barWidth + gap + valueWidth - 6, y + 4, valueWidth - 10);
     ctx.textAlign = 'left';
   }
 
@@ -310,7 +364,7 @@ export class TreeRowRenderer {
     ctx.fillStyle = theme.colors.text;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
-    ctx.fillText(label, x + width / 2, y + height / 2, width - 4);
+    drawTruncatedText(ctx, label, x + width / 2, y + height / 2, width - 4);
     ctx.textAlign = 'left';
   }
 
@@ -319,7 +373,7 @@ export class TreeRowRenderer {
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
-    ctx.fillText(String(text ?? ''), x, y, Math.max(10, width));
+    drawTruncatedText(ctx, String(text ?? ''), x, y, Math.max(10, width));
   }
 
   #drawTreeCell(ctx, { node, row, rect, theme, style }) {
@@ -332,7 +386,7 @@ export class TreeRowRenderer {
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
-    ctx.fillText(node.label ?? node.id, x + 50, cy, Math.max(40, rect.x + rect.width - x - 56));
+    drawTruncatedText(ctx, node.label ?? node.id, x + 50, cy, Math.max(40, rect.x + rect.width - x - 56));
   }
 
   #drawStatusCell(ctx, { rect, style, theme }) {
@@ -346,7 +400,7 @@ export class TreeRowRenderer {
     ctx.font = '10px system-ui, sans-serif';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
-    ctx.fillText(style.status.label, x + badgeWidth / 2, y + 8, badgeWidth - 8);
+    drawTruncatedText(ctx, style.status.label, x + badgeWidth / 2, y + 8, badgeWidth - 8);
     ctx.textAlign = 'left';
   }
 
@@ -370,7 +424,7 @@ export class TreeRowRenderer {
     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;
-    ctx.fillText(String(value ?? ''), x, rect.y + rect.height / 2, rect.width - 20);
+    drawTruncatedText(ctx, String(value ?? ''), x, rect.y + rect.height / 2, rect.width - 20);
     ctx.textAlign = 'left';
   }
 
@@ -421,6 +475,22 @@ 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));
 }
@@ -438,6 +508,29 @@ function roundRect(ctx, x, y, width, height, radius) {
   ctx.quadraticCurveTo(x, y, x + radius, y);
 }
 
+function drawTruncatedText(ctx, text, x, y, maxWidth) {
+  const value = String(text ?? '');
+  const width = Math.max(0, maxWidth);
+  if (!value || width <= 0) return;
+  ctx.fillText(fitText(ctx, value, width), x, y);
+}
+
+function fitText(ctx, text, maxWidth) {
+  if (ctx.measureText(text).width <= maxWidth) return text;
+  const ellipsis = '...';
+  const ellipsisWidth = ctx.measureText(ellipsis).width;
+  if (ellipsisWidth > maxWidth) 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;
+    else high = mid - 1;
+  }
+  return `${text.slice(0, low)}${ellipsis}`;
+}
+
 function formatTime(value) {
   return new Date(value).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
 }

package/src/tree-view-controller.js

@@ -86,17 +86,21 @@ export class TreeViewController {
   setModel(model, meta = {}, options = {}) {
     const builder = new ModelInspectorBuilder();
     const presentation = options.presentation ?? options.mode ?? 'table';
+    const previousExpanded = new Set(this.model.expanded);
+    const shouldPreserveExpansion = Boolean(this.inspector);
     const inspectorOptions = {
       presentation,
       flatRoot: Boolean(options.flatRoot),
       enforceMeta: Boolean(options.enforceMeta),
       filter: Boolean(options.filter),
+      markUpdated: options.markUpdated !== false,
     };
     const nodes = builder.build(model, meta, inspectorOptions);
     this.inspector = { model, meta, builder, presentation, options: inspectorOptions };
     this.setColumns(presentation === 'pane' ? inspectorPaneColumns() : inspectorColumns());
     this.model.setTree(nodes);
-    this.expansion.expandToDepth(this.initialExpandDepth);
+    if (shouldPreserveExpansion) this.#restoreExpansion(previousExpanded);
+    else this.expansion.expandToDepth(this.initialExpandDepth);
     this.searchIndex.rebuild(this.model);
     this.#rebuildRows();
     this.events.emit('modelchange', { model, meta, structural: true });
@@ -113,7 +117,9 @@ export class TreeViewController {
     data.value = newValue;
     data.valueType = Array.isArray(newValue) ? 'array' : newValue === null ? 'null' : typeof newValue === 'object' ? 'object' : typeof newValue;
     data.valueText = formatInspectorValue(newValue, data.meta);
-    this.setDynamicState([{ id: nodeId, state: { updated: true } }]);
+    if (this.inspector.options.markUpdated !== false) {
+      this.setDynamicState([{ id: nodeId, state: { updated: true } }]);
+    }
     const detail = { path: data.path, oldValue, newValue, nodeId, editorType };
     this.events.emit('valuechange', detail);
     this.events.emit('modelchange', { model: this.inspector.model, path: data.path, oldValue, newValue, nodeId });
@@ -275,6 +281,11 @@ export class TreeViewController {
   }
 
   expand(nodeId) {
+    if (this.filterQuery && this.rowModel.expandFilterBranch(nodeId)) {
+      this.#rebuildRows();
+      this.events.emit('expand', { nodeId, filter: true });
+      return true;
+    }
     if (!this.expansion.expand(nodeId)) return false;
     this.#rebuildRows();
     this.events.emit('expand', { nodeId });
@@ -282,14 +293,19 @@ export class TreeViewController {
   }
 
   collapse(nodeId) {
-    if (!this.expansion.collapse(nodeId)) return false;
+    const row = this.rowModel.getRowById(nodeId);
+    const shouldCollapseFilterBranch = Boolean(this.filterQuery && row?.expanded);
+    const changed = this.expansion.collapse(nodeId);
+    if (shouldCollapseFilterBranch) this.rowModel.collapseFilterBranch(nodeId);
+    if (!changed && !shouldCollapseFilterBranch) return false;
     this.#rebuildRows();
-    this.events.emit('collapse', { nodeId });
+    this.events.emit('collapse', { nodeId, filter: shouldCollapseFilterBranch });
     return true;
   }
 
   toggle(nodeId) {
-    return this.expansion.isExpanded(nodeId) ? this.collapse(nodeId) : this.expand(nodeId);
+    const row = this.rowModel.getRowById(nodeId);
+    return (row?.expanded ?? this.expansion.isExpanded(nodeId)) ? this.collapse(nodeId) : this.expand(nodeId);
   }
 
   expandAll() {
@@ -573,12 +589,17 @@ export class TreeViewController {
       searchMatches: this.searchHighlights,
       sort: this.columnModel.sort,
       sortValues: this.sortValueSnapshot ? Array.from(this.sortValueSnapshot) : null,
+      inspectorPaneLabelEnd: this.#computeInspectorPaneLabelEnd(visibleRange),
       filterQuery: this.filterQuery,
       headerFilter: Boolean(this.inspector?.options?.filter),
       stats: this.getStats(),
     };
   }
 
+  closeEditor() {
+    this.events.emit('editorclose', {});
+  }
+
   hitTest(clientX, clientY) {
     const localX = clientX - (this.viewport.renderInsetX ?? 0);
     const localY = clientY - (this.viewport.renderInsetY ?? 0);
@@ -609,7 +630,7 @@ export class TreeViewController {
         if (localX >= column.width - 54 && localX <= column.width - 32) part = 'arrayAdd';
         else if (localX >= column.width - 28 && localX <= column.width - 6) part = 'arrayRemove';
         else {
-          const editorLeft = Math.min(Math.max(210, column.width * 0.42), column.width - 180);
+          const editorLeft = this.getInspectorPaneLayout(this.#visibleInspectorPaneWidth(column), row, node?.data?.editorType).editorLeft;
           if (localX >= editorLeft) part = 'editor';
           else {
             const treeX = row.depth * this.rowModel.indentWidth;
@@ -618,8 +639,8 @@ export class TreeViewController {
         }
         return { area: 'row', part, row, column, x, y: rowY };
       }
-      const editorLeft = Math.min(Math.max(210, column.width * 0.42), column.width - 180);
-      if (localX >= editorLeft) part = this.#inspectorEditorPart(row, localX - editorLeft, column.width - editorLeft);
+      const layout = this.getInspectorPaneLayout(this.#visibleInspectorPaneWidth(column), row, node?.data?.editorType);
+      if (localX >= layout.editorLeft) part = this.#inspectorEditorPart(row, localX - layout.editorLeft, layout.editorWidth);
       else {
         const treeX = row.depth * this.rowModel.indentWidth;
         if (localX >= treeX + 4 && localX <= treeX + 22) part = 'chevron';
@@ -642,13 +663,23 @@ export class TreeViewController {
     if (!data?.inspector) return 'cell';
     if (data.editorType === 'checkbox') return 'checkbox';
     if (data.editorType === 'range') {
-      const numberLeft = Math.max(50, editorWidth - 64);
+      const width = Math.max(24, editorWidth - 20);
+      const valueWidth = Math.min(64, Math.max(42, width * 0.28));
+      const numberLeft = editorWidth - valueWidth - 10;
       return localEditorX >= numberLeft ? 'number' : 'range';
     }
     if (data.editorType === 'button') return 'button';
     return 'editor';
   }
 
+  #visibleInspectorPaneWidth(column) {
+    return Math.max(1, Math.min(column.width, this.viewport.scrollX + this.viewport.viewportWidth - column.x));
+  }
+
+  getInspectorPaneLayout(width, row = null, editorType = '') {
+    return inspectorPaneLayout(width, row?.depth ?? 0, this.rowModel.indentWidth, editorType, this.#computeInspectorPaneLabelEnd(this.rowModel.getVisibleRange(this.viewport, 4)));
+  }
+
   getCellClientRect(hit) {
     if (!hit?.row || !hit.column || !this.canvas) return { x: 0, y: 0, width: 0, height: 0 };
     const rect = this.canvas.getBoundingClientRect();
@@ -671,8 +702,57 @@ export class TreeViewController {
     };
   }
 
+  getTooltipForHit(hit) {
+    if (!hit?.row || !hit.column) return null;
+    const node = this.model.nodes[hit.row.nodeIndex];
+    if (!node) return null;
+    const state = this.model.dynamicState.get(hit.row.nodeId) ?? {};
+    const rect = this.getCellClientRect(hit);
+    let text = '';
+    let width = rect.width;
+
+    if (hit.column.kind === 'inspectorPane') {
+      const data = node.data ?? {};
+      const visibleWidth = this.#visibleInspectorPaneWidth(hit.column);
+      const layout = this.getInspectorPaneLayout(visibleWidth, hit.row, data.editorType);
+      if (hit.part === 'label' || hit.part === 'chevron') {
+        const labelX = hit.row.depth * this.rowModel.indentWidth + (hit.row.hasChildren ? 28 : 24);
+        text = node.label ?? node.id;
+        width = Math.max(0, layout.editorLeft - labelX - 8);
+      } else if (hit.part === 'arrayAdd' || hit.part === 'arrayRemove') {
+        return null;
+      } else {
+        text = inspectorTooltipValue(node);
+        width = Math.max(0, layout.editorWidth - 20);
+      }
+    } else if (hit.column.kind === 'tree') {
+      const labelX = hit.row.depth * this.rowModel.indentWidth + 50;
+      text = node.label ?? node.id;
+      width = Math.max(0, hit.column.width - labelX - 6);
+    } else if (hit.column.kind === 'inspectorValue') {
+      text = inspectorTooltipValue(node);
+      width = Math.max(0, hit.column.width - 20);
+    } else if (hit.column.kind === 'inspectorType') {
+      text = node.data?.valueType ?? '';
+      width = Math.max(0, hit.column.width - 20);
+    } else if (hit.column.kind === 'inspectorDescription') {
+      text = node.data?.meta?.description ?? '';
+      width = Math.max(0, hit.column.width - 20);
+    } else if (typeof hit.column.value === 'function') {
+      const value = hit.column.value(node, state);
+      text = value == null ? '' : String(value);
+      width = Math.max(0, hit.column.width - 20);
+    }
+
+    text = String(text ?? '');
+    if (!text || !isProbablyTruncated(text, width)) return null;
+    return { text, rect, nodeId: node.id, part: hit.part, columnId: hit.column.id };
+  }
+
   resize(width, height) {
     this.viewport.resize(width, height);
+    this.#fitInspectorPaneColumn(width);
+    this.#syncContentSize();
     this.events.emit('viewportchange', this.getViewportState());
   }
 
@@ -726,6 +806,13 @@ export class TreeViewController {
     this.setDynamicState(this.patchBatcher.flush());
   }
 
+  #restoreExpansion(expandedIds) {
+    this.model.expanded.clear();
+    for (const id of expandedIds) {
+      if (this.model.index.getNode(id) && this.expansion.hasChildren(id)) this.model.expanded.add(id);
+    }
+  }
+
   #focusedRowIndex() {
     if (this.focusedId) {
       const row = this.rowModel.getRowById(this.focusedId);
@@ -740,12 +827,41 @@ export class TreeViewController {
     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();
+    }
+  }
+
+  #computeInspectorPaneLabelEnd(visibleRange) {
+    const column = this.columnModel.columns.find((item) => item.kind === 'inspectorPane');
+    if (!column) return 0;
+    let labelEnd = 0;
+    for (let i = visibleRange.first; i <= visibleRange.last; i++) {
+      const row = this.rowModel.rows[i];
+      if (!row) continue;
+      const node = this.model.nodes[row.nodeIndex];
+      if (!node) continue;
+      const indentX = row.depth * this.rowModel.indentWidth;
+      const labelX = indentX + (row.hasChildren ? 28 : 24);
+      const labelWidth = String(node.label ?? node.id ?? '').length * 6.4;
+      labelEnd = Math.max(labelEnd, labelX + labelWidth + 12);
     }
+    return Math.min(labelEnd, Math.max(90, this.#visibleInspectorPaneWidth(column) - 72));
+  }
+
+  #fitInspectorPaneColumn(width) {
+    const column = this.columnModel.columns.length === 1 ? this.columnModel.columns[0] : null;
+    if (column?.kind !== 'inspectorPane' && column?.kind !== 'tree') return;
+    if (column.kind === 'inspectorPane' && this.inspector?.options?.presentation !== 'pane') return;
+    const nextWidth = Math.max(column.minWidth, Math.floor(width));
+    if (Math.abs(column.width - nextWidth) < 1) return;
+    this.columnModel.resizeColumn(column.id, nextWidth);
   }
 
   #workerRowOptions(overrides = {}) {
     return {
       expandedIds: Array.from(this.expansion.model.expanded),
+      filterCollapsedIds: Array.from(this.rowModel.filterCollapsed ?? []),
       rowHeight: this.rowModel.rowHeight,
       indentWidth: this.rowModel.indentWidth,
       sort: this.columnModel.sort,
@@ -777,6 +893,22 @@ export class TreeViewController {
   }
 }
 
+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 createDefaultArrayItem(meta = {}) {
   if (meta.itemFactory) return meta.itemFactory();
   if (meta.itemType === 'number') return 0;
@@ -820,6 +952,19 @@ function matchesFilter(node, state, path, query) {
   return values.some((value) => String(value ?? '').toLowerCase().includes(query));
 }
 
+function inspectorTooltipValue(node) {
+  const data = node.data ?? {};
+  if (data.editorType === 'checkbox') return '';
+  if (data.editorType === 'button') return data.meta?.button ?? node.label ?? '';
+  if (data.valueType === 'object') return '';
+  return data.valueText ?? data.value ?? '';
+}
+
+function isProbablyTruncated(text, width) {
+  if (width <= 0) return Boolean(text);
+  return String(text).length * 6.4 > width;
+}
+
 function now() {
   return globalThis.performance?.now?.() ?? Date.now();
 }