virtual-tree-canvas 0.1.0 → 0.3.0

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.1.0",
+  "version": "0.3.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,242 @@ 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;
+  const r = size * 0.42;
+
+  ctx.beginPath();
+  ctx.moveTo(cx, y + 1);
+  ctx.lineTo(cx + r * 0.28, cy - r * 0.28);
+  ctx.lineTo(x + size - 1, y + size * 0.2);
+  ctx.lineTo(cx + r * 0.55, cy + r * 0.05);
+  ctx.lineTo(x + size * 0.92, y + size * 0.76);
+  ctx.lineTo(cx + r * 0.22, cy + r * 0.32);
+  ctx.lineTo(cx + r * 0.08, y + size - 1);
+  ctx.lineTo(cx - r * 0.18, cy + r * 0.34);
+  ctx.lineTo(x + size * 0.14, y + size * 0.86);
+  ctx.lineTo(cx - r * 0.42, cy + r * 0.12);
+  ctx.lineTo(x + 1, y + size * 0.38);
+  ctx.lineTo(cx - r * 0.3, cy - r * 0.18);
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+
+  ctx.fillStyle = '#fff7ed';
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.13, 0, Math.PI * 2);
+  ctx.fill();
+
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.1;
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.08, y + size * 0.08);
+  ctx.lineTo(x + size * 0.2, y + size * 0.2);
+  ctx.moveTo(x + size * 0.84, y + size * 0.88);
+  ctx.lineTo(x + size * 0.94, y + size * 0.98);
+  ctx.moveTo(x + size * 0.9, y + size * 0.06);
+  ctx.lineTo(x + size * 0.82, y + size * 0.18);
+  ctx.stroke();
+}

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,