virtual-tree-canvas 0.3.8 → 0.4.0

package/src/core/search-index.js

@@ -13,12 +13,12 @@ export class TreeSearchIndex {
       const searchId = searchableNodeId(node);
       const record = {
         id: node.id,
-        searchId: normalize(searchId),
-        label: normalize(node.label ?? ''),
-        path: normalize(path),
-        tags: normalize((node.tags ?? []).join(' ')),
-        type: normalize(node.type ?? ''),
-        value: normalize(searchableNodeValue(node)),
+        searchId,
+        label: node.label ?? '',
+        path,
+        tags: (node.tags ?? []).join(' '),
+        type: node.type ?? '',
+        value: searchableNodeValue(node),
       };
       record.searchText = defaultSearchText(node, record);
       return record;
@@ -27,10 +27,10 @@ export class TreeSearchIndex {
 
   /**
    * @param {string} query
-   * @param {{ fields?: string[], limit?: number }} options
+   * @param {{ fields?: string[], limit?: number, caseSensitive?: boolean, wholeWord?: boolean }} options
    */
   search(query, options = {}) {
-    const q = query.trim().toLowerCase();
+    const q = normalizeSearchValue(query.trim(), options);
     this.lastQuery = query;
     if (!q) {
       this.results = [];
@@ -43,10 +43,10 @@ export class TreeSearchIndex {
     const defaultFields = isDefaultSearchFields(fields);
     for (const record of this.records) {
       if (defaultFields) {
-        if (record.searchText.includes(q)) results.push(record.id);
+        if (matchesSearch(normalizeSearchValue(record.searchText, options), q, options.wholeWord)) results.push(record.id);
       } else {
         for (const field of fields) {
-          if (searchFieldValue(record, field).includes(q)) {
+          if (matchesSearch(searchFieldValue(record, field, options), q, options.wholeWord)) {
             results.push(record.id);
             break;
           }
@@ -86,9 +86,9 @@ function isDefaultSearchFields(fields) {
   return fields.length === 5 && fields.includes('label') && fields.includes('id') && fields.includes('path') && fields.includes('tags') && fields.includes('type');
 }
 
-function searchFieldValue(record, field) {
-  if (field === 'id') return record.searchId || normalize(record.id);
-  return normalize(record[field] ?? '');
+function searchFieldValue(record, field, options) {
+  if (field === 'id') return normalizeSearchValue(record.searchId || record.id, options);
+  return normalizeSearchValue(record[field] ?? '', options);
 }
 
 function searchableNodeId(node) {
@@ -104,7 +104,7 @@ function searchableNodeValue(node) {
 function defaultSearchText(node, record) {
   if (node?.data?.inspector) {
     const data = node.data;
-    return normalize([
+    return [
       record.searchId,
       node.label ?? '',
       data.key ?? '',
@@ -112,11 +112,26 @@ function defaultSearchText(node, record) {
       data.valueType ?? '',
       record.tags,
       record.type,
-    ].join(' '));
+    ].join(' ');
   }
-  return normalize(`${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`);
+  return `${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`;
 }
 
-function normalize(value) {
-  return String(value ?? '').toLowerCase();
+function normalizeSearchValue(value, options = {}) {
+  const text = String(value ?? '');
+  return options.caseSensitive ? text : text.toLowerCase();
+}
+
+function matchesSearch(text, query, wholeWord = false) {
+  if (!wholeWord) return text.includes(query);
+  let index = text.indexOf(query);
+  while (index !== -1) {
+    if (!isWordChar(text[index - 1]) && !isWordChar(text[index + query.length])) return true;
+    index = text.indexOf(query, index + query.length);
+  }
+  return false;
+}
+
+function isWordChar(char) {
+  return typeof char === 'string' && /[\p{L}\p{N}_]/u.test(char);
 }

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

@@ -6,6 +6,8 @@ export class TreeWorkerClient {
     this.pending = new Map();
     this.ready = Promise.resolve();
     this.worker.addEventListener('message', this.#onMessage);
+    this.worker.addEventListener('error', this.#onError);
+    this.worker.addEventListener('messageerror', this.#onMessageError);
   }
 
   setData(nodes) {
@@ -27,6 +29,8 @@ export class TreeWorkerClient {
     for (const { reject } of this.pending.values()) reject(new Error('Tree worker destroyed'));
     this.pending.clear();
     this.worker.removeEventListener('message', this.#onMessage);
+    this.worker.removeEventListener('error', this.#onError);
+    this.worker.removeEventListener('messageerror', this.#onMessageError);
     this.worker.terminate();
   }
 
@@ -47,4 +51,17 @@ export class TreeWorkerClient {
     if (ok) pending.resolve(result);
     else pending.reject(new Error(error || 'Tree worker request failed'));
   };
+
+  #onError = (event) => {
+    this.#rejectPending(new Error(event.message || 'Tree worker failed'));
+  };
+
+  #onMessageError = () => {
+    this.#rejectPending(new Error('Tree worker returned an unreadable message'));
+  };
+
+  #rejectPending(error) {
+    for (const { reject } of this.pending.values()) reject(error);
+    this.pending.clear();
+  }
 }

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

@@ -44,14 +44,17 @@ export function createWorkerTreeState(nodes) {
   return { nodes, idToIndex, childrenByParent, parentById, roots, pathById, records };
 }
 
-export function searchWorkerTree(state, query, { fields = ['label', 'id', 'path', 'tags', 'type'], limit = 500 } = {}) {
-  const q = normalize(query);
+export function searchWorkerTree(state, query, options = {}) {
+  const { fields = ['label', 'id', 'path', 'tags', 'type'], limit = 500 } = options;
+  const q = normalizeSearchValue(String(query ?? '').trim(), options);
   if (!q) return [];
   const results = [];
   const defaultFields = fields.length === 5 && fields.includes('label') && fields.includes('id') && fields.includes('path') && fields.includes('tags') && fields.includes('type');
 
   for (const record of state.records) {
-    const matches = defaultFields ? record.searchText.includes(q) : fields.some((field) => searchFieldValue(record, field).includes(q));
+    const matches = defaultFields
+      ? matchesSearch(normalizeSearchValue(record.searchText, options), q, options.wholeWord)
+      : fields.some((field) => matchesSearch(searchFieldValue(record, field, options), q, options.wholeWord));
     if (!matches) continue;
     results.push(record.id);
     if (results.length >= limit) break;
@@ -64,10 +67,11 @@ export function rebuildWorkerRows(state, options = {}) {
   const indentWidth = options.indentWidth ?? 18;
   const expanded = new Set(options.expandedIds ?? []);
   const filterCollapsed = new Set(options.filterCollapsedIds ?? []);
-  const query = normalize(options.filterQuery ?? '');
+  const filterOptions = options.filterOptions ?? {};
+  const query = normalizeSearchValue(options.filterQuery ?? '', filterOptions);
   const sort = options.sort ?? { columnId: null, direction: null };
   const sortValues = options.sortValues ? new Map(options.sortValues) : null;
-  const includedIds = options.includedIds ? new Set(options.includedIds) : query ? getIncludedIdsForQuery(state, query).includedIds : null;
+  const includedIds = options.includedIds ? new Set(options.includedIds) : query ? getIncludedIdsForQuery(state, query, null, filterOptions).includedIds : null;
   const rows = [];
   let maxDepth = 0;
 
@@ -112,14 +116,14 @@ export function rebuildWorkerRows(state, options = {}) {
   };
 }
 
-export function getIncludedIdsForQuery(state, query, candidateIds = null) {
-  const q = normalize(query);
+export function getIncludedIdsForQuery(state, query, candidateIds = null, options = {}) {
+  const q = normalizeSearchValue(query, options);
   const includedIds = new Set();
   const matchingIds = [];
   const records = candidateIds ? idsToRecords(state, candidateIds) : state.records;
 
   for (const record of records) {
-    if (!(record.filterText ?? record.searchText).includes(q)) continue;
+    if (!matchesSearch(normalizeSearchValue(record.filterText ?? record.searchText, options), q, options.wholeWord)) continue;
     matchingIds.push(record.id);
     let id = record.id;
     while (id !== null && id !== undefined && !includedIds.has(id)) {
@@ -153,13 +157,9 @@ function columnValue(node, columnId) {
   return node[columnId] ?? '';
 }
 
-function normalize(value) {
-  return String(value ?? '').toLowerCase();
-}
-
-function searchFieldValue(record, field) {
-  if (field === 'id') return normalize(record.searchId || record.id);
-  return normalize(record[field]);
+function searchFieldValue(record, field, options) {
+  if (field === 'id') return normalizeSearchValue(record.searchId || record.id, options);
+  return normalizeSearchValue(record[field], options);
 }
 
 function searchableNodeId(node) {
@@ -175,7 +175,7 @@ function searchableNodeValue(node) {
 function defaultSearchText(node, record) {
   if (node?.data?.inspector) {
     const data = node.data;
-    return normalize([
+    return [
       record.searchId,
       node.label ?? '',
       data.key ?? '',
@@ -183,15 +183,15 @@ function defaultSearchText(node, record) {
       data.valueType ?? '',
       record.tags,
       record.type,
-    ].join(' '));
+    ].join(' ');
   }
-  return normalize(`${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`);
+  return `${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`;
 }
 
 function defaultFilterText(node, record) {
   if (node?.data?.inspector) {
     const data = node.data;
-    return normalize([
+    return [
       node.label ?? '',
       node.type ?? '',
       data.path ?? '',
@@ -199,7 +199,26 @@ function defaultFilterText(node, record) {
       data.valueText ?? '',
       data.meta?.description ?? '',
       ...Object.keys(data.meta?.options ?? {}),
-    ].join(' '));
+    ].join(' ');
   }
   return record.searchText;
 }
+
+function normalizeSearchValue(value, options = {}) {
+  const text = String(value ?? '');
+  return options.caseSensitive ? text : text.toLowerCase();
+}
+
+function matchesSearch(text, query, wholeWord = false) {
+  if (!wholeWord) return text.includes(query);
+  let index = text.indexOf(query);
+  while (index !== -1) {
+    if (!isWordChar(text[index - 1]) && !isWordChar(text[index + query.length])) return true;
+    index = text.indexOf(query, index + query.length);
+  }
+  return false;
+}
+
+function isWordChar(char) {
+  return typeof char === 'string' && /[\p{L}\p{N}_]/u.test(char);
+}

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

@@ -8,6 +8,7 @@
  * @property {number} height
  * @property {boolean} expanded
  * @property {boolean} hasChildren
+ * @property {number} [stickyY]
  */
 
 export class VisibleRowModel extends EventTarget {
@@ -146,4 +147,42 @@ export class VisibleRowModel extends EventTarget {
     const last = Math.min(this.rows.length - 1, Math.ceil((viewport.scrollY + rowViewportHeight) / this.rowHeight) + overscan);
     return { first, last, count: last >= first ? last - first + 1 : 0 };
   }
+
+  /** @param {import('./tree-view-viewport.js').TreeViewViewport} viewport */
+  getStickyRows(viewport) {
+    const rowViewportHeight = viewport.rowViewportHeight ?? viewport.viewportHeight;
+    if (rowViewportHeight < this.rowHeight * 2) return [];
+    const max = Math.max(0, Math.min(6, Math.floor(rowViewportHeight / this.rowHeight) - 1));
+    const first = Math.max(0, Math.floor(viewport.scrollY / this.rowHeight));
+    let row = this.getRow(first);
+    if (!row) return [];
+    let sticky = this.#getStickyPath(row);
+    for (let i = row.rowIndex + 1; i < this.rows.length; i++) {
+      const candidate = this.rows[i];
+      if (candidate.y - viewport.scrollY >= Math.min(sticky.length, max) * this.rowHeight) break;
+      const replaceAt = sticky.findIndex((ancestor) => ancestor.depth >= candidate.depth);
+      if (replaceAt === -1) {
+        if (candidate.hasChildren && sticky.length < max) sticky = [...sticky, candidate];
+      } else if (!candidate.hasChildren) {
+        sticky = sticky.slice(0, replaceAt);
+      } else {
+        sticky = [...sticky.slice(0, replaceAt), candidate];
+      }
+    }
+    return sticky
+      .slice(-max)
+      .map((ancestor, index) => ({
+        ...ancestor,
+        stickyY: Math.max(ancestor.y - viewport.scrollY, index * this.rowHeight),
+      }));
+  }
+
+  /** @param {TreeRow} row */
+  #getStickyPath(row) {
+    const ancestors = this.model.index.getAncestors(row.nodeId).reverse()
+      .map((id) => this.getRowById(id))
+      .filter((ancestor) => ancestor && ancestor.rowIndex < row.rowIndex);
+    if (row.hasChildren) ancestors.push(row);
+    return ancestors;
+  }
 }

package/src/index.d.ts

@@ -1,5 +1,17 @@
 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 });
+  register(name: string, icon: IconSource): any;
+  get(name: string): any;
+  onChange(listener: () => void): () => void;
+  prepare(options?: { icons?: Iterable<string>; size?: number; color?: string; pixelRatio?: number }): Promise<any[]>;
+  draw(ctx: CanvasRenderingContext2D, name: string, x: number, y: number, size: number, color: string): void;
+}
+
 export type TreeNode = {
   id: string;
   parentId?: string | null;
@@ -86,13 +98,14 @@ export class TreeViewController {
   setDynamicState(patches: DynamicPatch[]): void;
   setTheme(theme: any): void;
   setLayoutMetrics(options?: { rowHeight?: number; indentWidth?: number; headerHeight?: number }): void;
+  registerIcon(name: string, icon: IconSource): any;
   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;
+  search(query: string, options?: Record<string, any> & { caseSensitive?: boolean; wholeWord?: boolean }): any;
+  setFilter(queryOrPredicate?: string | ((node: any, state: any) => boolean), options?: { caseSensitive?: boolean; wholeWord?: boolean }): void;
   clearFilter(): void;
   focusNode(nodeId: string, options?: Record<string, any>): boolean;
   scrollToNode(nodeId: string, align?: TreeViewAlign): boolean;

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

@@ -9,6 +9,9 @@ export class TreeRowRenderer {
     this.scene = null;
     this.iconRegistry = iconRegistry ?? new IconRegistry();
     this.renderedRows = 0;
+    this.iconRenderQueued = false;
+    this.preparedIconThemeKey = null;
+    this.stopIconListener = this.iconRegistry.onChange?.(() => this.#scheduleIconRender()) ?? null;
   }
 
   /** @param {HTMLCanvasElement} canvas */
@@ -22,6 +25,14 @@ export class TreeRowRenderer {
     this.scene = scene;
   }
 
+  destroy() {
+    this.stopIconListener?.();
+    this.stopIconListener = null;
+    this.canvas = null;
+    this.ctx = null;
+    this.scene = null;
+  }
+
   updateDynamicState(_patches) {
     // Canvas2D reads the state map directly; patches still stay on the hot path.
   }
@@ -43,6 +54,7 @@ export class TreeRowRenderer {
 
     const ctx = this.ctx;
     const colors = theme.colors;
+    this.#prepareThemeIcons(theme, dpr);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = colors.background;
     ctx.fillRect(0, 0, viewportWidth, viewportHeight);
@@ -51,9 +63,33 @@ export class TreeRowRenderer {
     ctx.translate(viewport.renderInsetX ?? 0, viewport.renderInsetY ?? 0);
     this.#drawHeader(ctx);
     this.#drawRows(ctx);
+    this.#drawStickyRows(ctx);
     ctx.restore();
   }
 
+  #scheduleIconRender() {
+    if (this.iconRenderQueued) return;
+    this.iconRenderQueued = true;
+    const schedule = globalThis.requestAnimationFrame ?? ((callback) => setTimeout(callback, 0));
+    schedule(() => {
+      this.iconRenderQueued = false;
+      this.render();
+    });
+  }
+
+  #prepareThemeIcons(theme, pixelRatio) {
+    const iconColors = new Map([['placeholder', theme.colors.textMuted]]);
+    for (const style of Object.values(theme.types ?? {})) {
+      if (style?.icon) iconColors.set(style.icon, style.color ?? theme.colors.progressFill);
+    }
+    const key = `${pixelRatio}|${[...iconColors].map(([icon, color]) => `${icon}:${color}`).join(',')}`;
+    if (key === this.preparedIconThemeKey) return;
+    this.preparedIconThemeKey = key;
+    for (const [icon, color] of iconColors) {
+      this.iconRegistry.prepare?.({ icons: [icon], size: 15, color, pixelRatio });
+    }
+  }
+
   #drawHeader(ctx) {
     const { viewport, columns, theme, sort, headerFilter, filterQuery } = this.scene;
     if (viewport.headerHeight <= 0) return;
@@ -143,6 +179,34 @@ export class TreeRowRenderer {
     ctx.restore();
   }
 
+  #drawStickyRows(ctx) {
+    const { stickyRows = [], viewport, theme } = this.scene;
+    if (!stickyRows.length) return;
+    const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
+    const height = Math.min(
+      viewport.rowViewportHeight,
+      stickyRows.reduce((bottom, row, index) => Math.max(bottom, (row.stickyY ?? index * row.height) + row.height), 0)
+    );
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, viewport.headerHeight, visibleWidth, height);
+    ctx.clip();
+    ctx.translate(-viewport.scrollX, viewport.headerHeight);
+    for (let i = 0; i < stickyRows.length; i++) {
+      const row = stickyRows[i];
+      this.#drawRow(ctx, { ...row, y: row.stickyY ?? i * row.height });
+    }
+    ctx.restore();
+
+    const bottom = viewport.headerHeight + height;
+    ctx.strokeStyle = theme.colors.border;
+    ctx.beginPath();
+    ctx.moveTo(0, bottom + 0.5);
+    ctx.lineTo(visibleWidth, bottom + 0.5);
+    ctx.stroke();
+  }
+
   #drawRow(ctx, row) {
     const { columns, nodes, dynamicState, selection, hoverNodeId, hoverPart, activeNodeId, activePart, focusNodeId, searchMatches, theme, viewport } = this.scene;
     const node = nodes[row.nodeIndex];

package/src/tree-view-controller.js

@@ -46,6 +46,7 @@ export class TreeViewController {
     this.initialExpandDepth = options.initialExpandDepth ?? 1;
     this.searchHighlights = new Set();
     this.filterQuery = '';
+    this.filterOptions = { caseSensitive: false, wholeWord: false };
     this.hoverId = null;
     this.hoverPart = null;
     this.activeId = null;
@@ -112,6 +113,7 @@ export class TreeViewController {
     this.#nativeScroll = null;
     this.inputController = null;
     this.cellEditor = null;
+    this.renderer?.destroy?.();
     this.canvas = null;
   }
 
@@ -211,8 +213,14 @@ export class TreeViewController {
 
   enableWorkers(workerUrl) {
     if (this.workerClient) return Promise.resolve(this);
-    this.workerClient = new TreeWorkerClient(workerUrl);
-    return this.workerClient.setData(this.model.nodes).then(() => this);
+    const client = new TreeWorkerClient(workerUrl);
+    this.workerClient = client;
+    return client.setData(this.model.nodes)
+      .then(() => this)
+      .catch((error) => {
+        if (this.workerClient === client) this.disableWorkers();
+        throw error;
+      });
   }
 
   disableWorkers() {
@@ -271,38 +279,42 @@ export class TreeViewController {
     this.events.emit('sortchange', { columnId: null, direction: null });
   }
 
-  setFilter(queryOrPredicate = '') {
+  setFilter(queryOrPredicate = '', options = {}) {
     this.filterQuery = typeof queryOrPredicate === 'string' ? queryOrPredicate : '';
+    this.filterOptions = typeof queryOrPredicate === 'string'
+      ? { caseSensitive: Boolean(options.caseSensitive), wholeWord: Boolean(options.wholeWord) }
+      : { caseSensitive: false, wholeWord: false };
     if (typeof queryOrPredicate === 'function') {
       this.rowModel.setFilterPredicate(queryOrPredicate);
     } else {
-      const query = queryOrPredicate.trim().toLowerCase();
-      this.rowModel.setFilterPredicate(query ? (node, state) => matchesFilter(node, state, this.model.index.pathById.get(node.id) ?? '', query) : null);
+      const query = normalizeFilterValue(queryOrPredicate.trim(), this.filterOptions);
+      this.rowModel.setFilterPredicate(query ? (node, state) => matchesFilter(node, state, this.model.index.pathById.get(node.id) ?? '', query, this.filterOptions) : null);
     }
     this.#rebuildRows();
-    this.events.emit('filterchange', { query: this.filterQuery, visibleRows: this.rowModel.rows.length });
+    this.events.emit('filterchange', { query: this.filterQuery, options: this.filterOptions, visibleRows: this.rowModel.rows.length });
   }
 
   clearFilter() {
     this.setFilter('');
   }
 
-  async setFilterAsync(query = '') {
+  async setFilterAsync(query = '', options = {}) {
     if (!this.workerClient || typeof query !== 'string') {
-      this.setFilter(query);
+      this.setFilter(query, options);
       return this.rowModel.rows;
     }
     const totalStart = now();
     const revision = ++this.workerRevision;
     this.filterQuery = query;
-    const normalized = query.trim().toLowerCase();
-    this.rowModel.setFilterPredicate(normalized ? (node, state) => matchesFilter(node, state, this.model.index.pathById.get(node.id) ?? '', normalized) : null);
+    this.filterOptions = { caseSensitive: Boolean(options.caseSensitive), wholeWord: Boolean(options.wholeWord) };
+    const normalized = normalizeFilterValue(query.trim(), this.filterOptions);
+    this.rowModel.setFilterPredicate(normalized ? (node, state) => matchesFilter(node, state, this.model.index.pathById.get(node.id) ?? '', normalized, this.filterOptions) : null);
     const workerStart = now();
-    const result = await this.workerClient.rebuildRows(this.#workerRowOptions({ filterQuery: query }));
+    const result = await this.workerClient.rebuildRows(this.#workerRowOptions({ filterQuery: query, filterOptions: this.filterOptions }));
     const workerMs = now() - workerStart;
     if (revision !== this.workerRevision) return this.rowModel.rows;
     this.#applyWorkerRows(result);
-    this.events.emit('filterchange', { query: this.filterQuery, visibleRows: this.rowModel.rows.length, worker: true, workerMs, totalMs: now() - totalStart });
+    this.events.emit('filterchange', { query: this.filterQuery, options: this.filterOptions, visibleRows: this.rowModel.rows.length, worker: true, workerMs, totalMs: now() - totalStart });
     return this.rowModel.rows;
   }
 
@@ -393,7 +405,12 @@ export class TreeViewController {
 
   search(query, options = {}) {
     for (const id of this.searchHighlights) this.patchBatcher.set(id, { highlighted: false });
-    const results = this.searchIndex.search(query, { limit: options.limit ?? 500, fields: options.fields });
+    const results = this.searchIndex.search(query, {
+      limit: options.limit ?? 500,
+      fields: options.fields,
+      caseSensitive: options.caseSensitive,
+      wholeWord: options.wholeWord,
+    });
     this.searchHighlights = new Set(results);
     const expandedSizeBefore = this.expansion.model.expanded.size;
     for (const id of results) {
@@ -419,7 +436,12 @@ export class TreeViewController {
     const revision = ++this.workerRevision;
     for (const id of this.searchHighlights) this.patchBatcher.set(id, { highlighted: false });
     const searchStart = now();
-    const results = await this.workerClient.search(query, { limit: options.limit ?? 500, fields: options.fields });
+    const results = await this.workerClient.search(query, {
+      limit: options.limit ?? 500,
+      fields: options.fields,
+      caseSensitive: options.caseSensitive,
+      wholeWord: options.wholeWord,
+    });
     const searchMs = now() - searchStart;
     if (revision !== this.workerRevision) return this.searchIndex.results;
     this.searchIndex.lastQuery = query;
@@ -671,6 +693,7 @@ export class TreeViewController {
     return {
       rows: this.rowModel.rows,
       visibleRange,
+      stickyRows: this.rowModel.getStickyRows(this.viewport),
       viewport: this.viewport,
       columns: this.columnModel.columns,
       theme: this.themeManager.get(),
@@ -1143,6 +1166,7 @@ export class TreeViewController {
       indentWidth: this.rowModel.indentWidth,
       sort: this.columnModel.sort,
       filterQuery: this.filterQuery,
+      filterOptions: this.filterOptions,
       ...overrides,
     };
   }
@@ -1366,7 +1390,7 @@ function compareColumnValues(column, a, b, dynamicState, snapshot = null) {
   return String(aValue ?? '').localeCompare(String(bValue ?? ''), undefined, { numeric: true, sensitivity: 'base' });
 }
 
-function matchesFilter(node, state, path, query) {
+function matchesFilter(node, state, path, query, options = {}) {
   const inspector = node.data?.inspector;
   const values = inspector
     ? [
@@ -1387,7 +1411,26 @@ function matchesFilter(node, state, path, query) {
         state.status,
         state.value,
       ];
-  return values.some((value) => String(value ?? '').toLowerCase().includes(query));
+  return values.some((value) => matchesSearch(normalizeFilterValue(value, options), query, options.wholeWord));
+}
+
+function normalizeFilterValue(value, options = {}) {
+  const text = String(value ?? '');
+  return options.caseSensitive ? text : text.toLowerCase();
+}
+
+function matchesSearch(text, query, wholeWord = false) {
+  if (!wholeWord) return text.includes(query);
+  let index = text.indexOf(query);
+  while (index !== -1) {
+    if (!isWordChar(text[index - 1]) && !isWordChar(text[index + query.length])) return true;
+    index = text.indexOf(query, index + query.length);
+  }
+  return false;
+}
+
+function isWordChar(char) {
+  return typeof char === 'string' && /[\p{L}\p{N}_]/u.test(char);
 }
 
 function inspectorTooltipValue(node) {

package/src/workers/tree-worker.js

@@ -25,28 +25,37 @@ self.addEventListener('message', (event) => {
 });
 
 function rebuildRowsIncremental(payload) {
-  const query = String(payload.filterQuery ?? '').trim().toLowerCase();
+  const options = {
+    caseSensitive: Boolean(payload.filterOptions?.caseSensitive),
+    wholeWord: Boolean(payload.filterOptions?.wholeWord),
+  };
+  const query = normalizeFilterValue(payload.filterQuery ?? '', options);
   if (!query) return rebuildWorkerRows(state, payload);
 
-  let cached = filterCache.get(query);
+  const cacheKey = `${options.caseSensitive ? 1 : 0}:${options.wholeWord ? 1 : 0}:${query}`;
+  let cached = filterCache.get(cacheKey);
   if (!cached) {
-    const base = findBestPrefixCache(query);
-    const computed = getIncludedIdsForQuery(state, query, base?.matchingIds ?? null);
+    const base = findBestPrefixCache(query, options);
+    const computed = getIncludedIdsForQuery(state, query, base?.matchingIds ?? null, options);
     cached = {
+      query,
+      options,
       matchingIds: computed.matchingIds,
       includedIds: Array.from(computed.includedIds),
     };
-    filterCache.set(query, cached);
+    filterCache.set(cacheKey, cached);
     trimFilterCache();
   }
   return rebuildWorkerRows(state, { ...payload, includedIds: cached.includedIds });
 }
 
-function findBestPrefixCache(query) {
+function findBestPrefixCache(query, options = {}) {
   let best = null;
-  for (const [cachedQuery, cached] of filterCache) {
+  for (const cached of filterCache.values()) {
+    if (cached.options.caseSensitive !== Boolean(options.caseSensitive) || cached.options.wholeWord !== Boolean(options.wholeWord)) continue;
+    const cachedQuery = cached.query;
     if (!cachedQuery || cachedQuery === query || !query.startsWith(cachedQuery)) continue;
-    if (!best || cachedQuery.length > best.query.length) best = { query: cachedQuery, ...cached };
+    if (!best || cachedQuery.length > best.query.length) best = cached;
   }
   return best;
 }
@@ -57,3 +66,8 @@ function trimFilterCache(limit = 8) {
     filterCache.delete(oldest);
   }
 }
+
+function normalizeFilterValue(value, options = {}) {
+  const text = String(value ?? '').trim();
+  return options.caseSensitive ? text : text.toLowerCase();
+}