@adecore/ui 0.35.4 → 0.36.0

package/dist/button-class.js

@@ -0,0 +1,92 @@
+import clsx from 'clsx';
+const BASE = 'inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50';
+const VARIANT = {
+  // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
+  primary: 'bg-accent text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+  // Drawn like a field, so it stands a step off any ground, a dialog's raised one included.
+  secondary: 'border border-field-border bg-field text-text hover:bg-surface-hover disabled:hover:bg-field',
+  ghost: 'text-text-muted hover:bg-surface-hover hover:text-text',
+  danger: 'bg-status-error text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+  // A step that forgets something rather than destroys it: softer than the filled button of a deletion that cannot come back.
+  'danger-outline': 'border border-status-error/35 text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+  positive: 'bg-positive text-positive-text hover:brightness-90 disabled:hover:brightness-100',
+  // Dark on a light theme, light on a dark one, matching what Apple's and GitHub's sign-in buttons ask for.
+  inverse: 'bg-text text-bg hover:opacity-90 disabled:hover:opacity-100'
+};
+/* 28 and 32 pixels are the compact and the normal control; 24 fits a header of 32. */
+const SIZE = {
+  xs: 'h-6 px-2',
+  sm: 'h-7 px-2.5',
+  md: 'h-8 px-3'
+};
+/* A pill is one size of its own, for a control that sits in a round row, so it takes the place of `size`. */
+const SHAPE = {
+  default: 'rounded-md text-xs',
+  pill: 'h-9 rounded-full px-3.5 text-sm'
+};
+export function buttonClass(variant, size, shape) {
+  return clsx(BASE, SHAPE[shape], VARIANT[variant], shape === 'default' && SIZE[size]);
+}
+/*
+ * A split button is one shape: the frame draws the radius, the outline of an outlined variant and the
+ * height, and clips both halves, which carry the ground and its hover each on their own.
+ */
+const SPLIT_FRAME = {
+  primary: '',
+  secondary: 'border border-field-border',
+  ghost: '',
+  danger: '',
+  'danger-outline': 'border border-status-error/35',
+  positive: '',
+  inverse: ''
+};
+const SPLIT_HALF = {
+  primary: VARIANT.primary,
+  secondary: 'bg-field text-text hover:bg-surface-hover disabled:hover:bg-field',
+  ghost: VARIANT.ghost,
+  danger: VARIANT.danger,
+  'danger-outline': 'text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+  positive: VARIANT.positive,
+  inverse: VARIANT.inverse
+};
+/* The short line between the halves: a light alpha of the text over a filled ground, the border's alpha elsewhere. */
+const SPLIT_SEPARATOR = {
+  primary: 'before:bg-current/30',
+  secondary: 'before:bg-border-strong',
+  ghost: 'before:bg-border-strong',
+  danger: 'before:bg-current/30',
+  'danger-outline': 'before:bg-status-error/35',
+  positive: 'before:bg-current/30',
+  inverse: 'before:bg-current/30'
+};
+const SPLIT_HEIGHT = {
+  xs: 'h-6',
+  sm: 'h-7',
+  md: 'h-8'
+};
+/* Half the height of the button, centered by auto margins, which land on whole pixels in the bordered frames too. */
+const SPLIT_SEPARATOR_HEIGHT = {
+  xs: 'before:h-3',
+  sm: 'before:h-3.5',
+  md: 'before:h-4'
+};
+const SPLIT_PADDING = {
+  action: {
+    xs: 'px-2',
+    sm: 'px-2.5',
+    md: 'px-3'
+  },
+  // The chevron half is narrower than a half with a word in it.
+  menu: {
+    xs: 'px-1',
+    sm: 'px-1.5',
+    md: 'px-2'
+  }
+};
+export function splitFrameClass(variant, size) {
+  return clsx('inline-flex shrink-0 items-stretch overflow-clip rounded-md', SPLIT_HEIGHT[size], SPLIT_FRAME[variant]);
+}
+/* The frame clips the focus outline, so a half draws it inside its own edge. */
+export function splitHalfClass(variant, size, half) {
+  return clsx('inline-flex items-center justify-center gap-1.5 text-xs font-medium focus-visible:-outline-offset-2 disabled:opacity-50', SPLIT_HALF[variant], SPLIT_PADDING[half][size], half === 'menu' && clsx('relative before:absolute before:inset-y-0 before:left-0 before:my-auto before:w-px before:content-[""]', SPLIT_SEPARATOR_HEIGHT[size], SPLIT_SEPARATOR[variant]));
+}

package/dist/command-palette/parts.d.ts

@@ -13,7 +13,7 @@ type AutocompleteProps<ItemValue> = Omit<Autocomplete.Root.Props<ItemValue>, 'op
 };
 type DialogProps = Pick<ComponentProps<typeof DialogRoot>, 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete'>;
 export type CommandPaletteRootProps<ItemValue> = AutocompleteProps<ItemValue> & DialogProps;
-export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, value, onValueChange, items, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
+export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, highlightItemOnHover, value, onValueChange, items, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
 export type CommandPalettePopupProps = Omit<DialogPopupProps, 'size'> & {
     size?: keyof typeof SIZE;
 };
@@ -26,7 +26,7 @@ export type CommandPaletteInputProps = Omit<ComponentProps<typeof Autocomplete.I
     className?: string;
 };
 export declare function CommandPaletteInput({ leading, trailing, escapeHint, mono, className, ref, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
-export declare function CommandPaletteList({ className, ref, ...props }: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
+export declare function CommandPaletteList({ className, ref, onFocus, ...props }: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
 export type CommandPaletteFooterProps = useRender.ComponentProps<'div'>;
 export declare function CommandPaletteFooter({ render, className, ref, ...props }: CommandPaletteFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/command-palette/parts.js

@@ -1,5 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
 import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -24,156 +25,91 @@ const SIZE = {
  * is Base UI's autocomplete, so the query, the items and their filter work as in a combobox. The
  * first row is highlighted and stays so while the pointer leaves the list, which is what Enter runs.
  */
-export function CommandPaletteRoot(t0) {
-  const $ = _c(33);
-  let children;
-  let defaultOpen;
-  let items;
-  let onOpenChange;
-  let onOpenChangeComplete;
-  let onValueChange;
-  let open;
-  let props;
-  let t1;
-  let t2;
-  let value;
-  if ($[0] !== t0) {
-    ({
-      open,
-      defaultOpen,
-      onOpenChange,
-      onOpenChangeComplete,
-      autoHighlight: t1,
-      keepHighlight: t2,
-      value,
-      onValueChange,
-      items,
-      children,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = defaultOpen;
-    $[3] = items;
-    $[4] = onOpenChange;
-    $[5] = onOpenChangeComplete;
-    $[6] = onValueChange;
-    $[7] = open;
-    $[8] = props;
-    $[9] = t1;
-    $[10] = t2;
-    $[11] = value;
-  } else {
-    children = $[1];
-    defaultOpen = $[2];
-    items = $[3];
-    onOpenChange = $[4];
-    onOpenChangeComplete = $[5];
-    onValueChange = $[6];
-    open = $[7];
-    props = $[8];
-    t1 = $[9];
-    t2 = $[10];
-    value = $[11];
-  }
-  const autoHighlight = t1 === undefined ? "always" : t1;
-  const keepHighlight = t2 === undefined ? true : t2;
+export function CommandPaletteRoot({
+  open,
+  defaultOpen,
+  onOpenChange,
+  onOpenChangeComplete,
+  autoHighlight = 'always',
+  keepHighlight = true,
+  highlightItemOnHover = true,
+  value,
+  onValueChange,
+  items,
+  children,
+  ...props
+}) {
   const inputRef = useRef(null);
   const listRef = useRef(null);
+  const [focusHighlight, setFocusHighlight] = useState(false);
+  /*
+   * Base UI moves the highlight to the first row for a typed query only. For a query the app sets,
+   * the list is empty for one commit that is never painted: Base UI drops the highlight then and
+   * puts it on the first row of what comes back.
+   */
   const [settledValue, setSettledValue] = useState(value);
   const resetting = value !== undefined && value !== settledValue;
-  let t3;
-  let t4;
-  if ($[12] !== resetting || $[13] !== value) {
-    t3 = () => {
-      if (!resetting) {
-        return;
+  useLayoutEffect(() => {
+    if (!resetting) {
+      return;
+    }
+    if (listRef.current !== null) {
+      listRef.current.scrollTop = 0;
+    }
+    // The rows may come back only after Base UI has seen the empty list in a commit of its own.
+    // oxlint-disable-next-line react/set-state-in-effect
+    setSettledValue(value);
+  }, [resetting, value]);
+  const highlight = row => {
+    if (row.hasAttribute('data-highlighted')) {
+      return;
+    }
+    // Base UI has no imperative highlight action and disables highlighting on item focus.
+    // Enable pointer navigation just for this event when the app has disabled hover highlighting.
+    if (!highlightItemOnHover) {
+      flushSync(() => setFocusHighlight(true));
+    }
+    try {
+      row.dispatchEvent(new MouseEvent('mousemove', {
+        bubbles: true,
+        movementX: 1
+      }));
+    } finally {
+      if (!highlightItemOnHover) {
+        flushSync(() => setFocusHighlight(false));
       }
-      if (listRef.current !== null) {
-        listRef.current.scrollTop = 0;
-      }
-      setSettledValue(value);
-    };
-    t4 = [resetting, value];
-    $[12] = resetting;
-    $[13] = value;
-    $[14] = t3;
-    $[15] = t4;
-  } else {
-    t3 = $[14];
-    t4 = $[15];
-  }
-  useLayoutEffect(t3, t4);
-  let t5;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
-      input: inputRef,
-      list: listRef
-    };
-    $[16] = t5;
-  } else {
-    t5 = $[16];
-  }
-  let t6;
-  if ($[17] !== onValueChange) {
-    t6 = (next, details) => {
-      if (details.reason === "input-change") {
-        setSettledValue(next);
-      }
-      onValueChange?.(next, details);
-    };
-    $[17] = onValueChange;
-    $[18] = t6;
-  } else {
-    t6 = $[18];
-  }
-  const t7 = resetting ? NO_ITEMS : items;
-  let t8;
-  if ($[19] !== autoHighlight || $[20] !== children || $[21] !== keepHighlight || $[22] !== props || $[23] !== t6 || $[24] !== t7 || $[25] !== value) {
-    t8 = /*#__PURE__*/_jsx(PaletteRefsContext, {
-      value: t5,
+    }
+  };
+  return /*#__PURE__*/_jsx(DialogRoot, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    onOpenChangeComplete: onOpenChangeComplete,
+    children: /*#__PURE__*/_jsx(PaletteRefsContext, {
+      value: {
+        input: inputRef,
+        list: listRef,
+        highlight
+      },
       children: /*#__PURE__*/_jsx(Autocomplete.Root, {
         ...props,
         value: value,
-        onValueChange: t6,
-        items: t7,
+        onValueChange: (next, details) => {
+          if (details.reason === 'input-change') {
+            setSettledValue(next);
+          }
+          onValueChange?.(next, details);
+        },
+        items: resetting ? NO_ITEMS : items,
         inline: true,
         open: true,
         autoHighlight: autoHighlight,
         keepHighlight: keepHighlight,
+        highlightItemOnHover: highlightItemOnHover || focusHighlight,
         children: children
       })
-    });
-    $[19] = autoHighlight;
-    $[20] = children;
-    $[21] = keepHighlight;
-    $[22] = props;
-    $[23] = t6;
-    $[24] = t7;
-    $[25] = value;
-    $[26] = t8;
-  } else {
-    t8 = $[26];
-  }
-  let t9;
-  if ($[27] !== defaultOpen || $[28] !== onOpenChange || $[29] !== onOpenChangeComplete || $[30] !== open || $[31] !== t8) {
-    t9 = /*#__PURE__*/_jsx(DialogRoot, {
-      open: open,
-      defaultOpen: defaultOpen,
-      onOpenChange: onOpenChange,
-      onOpenChangeComplete: onOpenChangeComplete,
-      children: t8
-    });
-    $[27] = defaultOpen;
-    $[28] = onOpenChange;
-    $[29] = onOpenChangeComplete;
-    $[30] = open;
-    $[31] = t8;
-    $[32] = t9;
-  } else {
-    t9 = $[32];
-  }
-  return t9;
+    })
+  });
 }
 /*
  * The dialog's surface. It hangs from a fixed line near the top instead of the middle: the list
@@ -369,24 +305,28 @@ export function CommandPaletteInput(t0) {
 }
 /* The rows. It scrolls on its own, so the field and the footer stay put. */
 export function CommandPaletteList(t0) {
-  const $ = _c(16);
+  const $ = _c(21);
   let className;
+  let onFocus;
   let props;
   let ref;
   if ($[0] !== t0) {
     ({
       className,
       ref,
+      onFocus,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = className;
-    $[2] = props;
-    $[3] = ref;
+    $[2] = onFocus;
+    $[3] = props;
+    $[4] = ref;
   } else {
     className = $[1];
-    props = $[2];
-    ref = $[3];
+    onFocus = $[2];
+    props = $[3];
+    ref = $[4];
   }
   const {
     t
@@ -394,47 +334,68 @@ export function CommandPaletteList(t0) {
   const refs = useContext(PaletteRefsContext);
   const t1 = refs?.list;
   let t2;
-  if ($[4] !== ref || $[5] !== t1) {
+  if ($[5] !== ref || $[6] !== t1) {
     t2 = mergeRefs(ref, t1);
-    $[4] = ref;
-    $[5] = t1;
-    $[6] = t2;
+    $[5] = ref;
+    $[6] = t1;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
   let t3;
-  if ($[7] !== t) {
+  if ($[8] !== t) {
     t3 = t("palette.results");
-    $[7] = t;
-    $[8] = t3;
+    $[8] = t;
+    $[9] = t3;
   } else {
-    t3 = $[8];
+    t3 = $[9];
   }
   let t4;
-  if ($[9] !== className) {
+  if ($[10] !== className) {
     t4 = withClass("max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5", className);
-    $[9] = className;
-    $[10] = t4;
+    $[10] = className;
+    $[11] = t4;
   } else {
-    t4 = $[10];
+    t4 = $[11];
   }
   let t5;
-  if ($[11] !== props || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
-    t5 = /*#__PURE__*/_jsx(Autocomplete.List, {
+  if ($[12] !== onFocus || $[13] !== refs) {
+    t5 = event => {
+      onFocus?.(event);
+      const row = event.target.closest("[role=\"option\"]");
+      if (row === null || !event.currentTarget.contains(row) || refs?.input.current == null) {
+        return;
+      }
+      refs.highlight(row);
+      refs.input.current.focus({
+        preventScroll: true
+      });
+    };
+    $[12] = onFocus;
+    $[13] = refs;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== props || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Autocomplete.List, {
       ref: t2,
       "aria-label": t3,
       className: t4,
-      ...props
+      ...props,
+      onFocus: t5
     });
-    $[11] = props;
-    $[12] = t2;
-    $[13] = t3;
-    $[14] = t4;
-    $[15] = t5;
+    $[15] = props;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = t6;
   } else {
-    t5 = $[15];
+    t6 = $[20];
   }
-  return t5;
+  return t6;
 }
 /* Under the list: the keys that work here, a count, an action that leaves the palette. */
 export function CommandPaletteFooter(t0) {

package/dist/file-tree/empty-lines.d.ts

@@ -0,0 +1,11 @@
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+export type FileTreeEmptyLabel = (row: FileTreeVisibleRow) => string | undefined;
+export declare function emptyLineOf(directory: string): string;
+export declare function isEmptyLine(path: string): boolean;
+export declare function directoryOfEmptyLine(path: string): string;
+export declare function emptyLineChanges(rows: readonly FileTreeVisibleRow[], labelOf: FileTreeEmptyLabel, has: (path: string) => boolean, added: Iterable<string>): {
+    add: string[];
+    remove: string[];
+};
+export declare function pastEmptyLine(model: FileTree, key: string): string | null;
+export declare function skipEmptyLine(model: FileTree, key: string): boolean;

package/dist/file-tree/empty-lines.js

@@ -0,0 +1,89 @@
+import { pathOfRow } from './helpers.js';
+/*
+ * The engine draws only rows it holds, so the line under an open, empty directory is a child the
+ * wrapper adds and removes itself. U+FDD0 is a noncharacter, which no real file name carries.
+ */
+const EMPTY_LINE_NAME = '﷐empty';
+export function emptyLineOf(directory) {
+  return `${directory}${EMPTY_LINE_NAME}`;
+}
+export function isEmptyLine(path) {
+  return path.endsWith(`/${EMPTY_LINE_NAME}`);
+}
+export function directoryOfEmptyLine(path) {
+  return path.slice(0, -EMPTY_LINE_NAME.length);
+}
+/*
+ * The lines to add and the ones to take away: an open directory whose label is not undefined and
+ * that holds nothing besides its own line gets one, every other line the wrapper added goes.
+ */
+export function emptyLineChanges(rows, labelOf, has, added) {
+  const wanted = new Set();
+  rows.forEach((row, index) => {
+    if (row.kind !== 'directory' || !row.isExpanded) {
+      return;
+    }
+    const line = emptyLineOf(row.path);
+    for (let next = index + 1; next < rows.length && rows[next].depth > row.depth; next++) {
+      if (rows[next].path !== line) {
+        return;
+      }
+    }
+    if (labelOf(row) !== undefined) {
+      wanted.add(line);
+    }
+  });
+  return {
+    add: [...wanted].filter(line => !has(line)),
+    remove: [...added].filter(line => !wanted.has(line) && has(line))
+  };
+}
+/*
+ * Where an arrow, Home or End goes instead when the row it would land on is a line: past it, or
+ * nowhere (the focused path itself) where nothing lies past it. Null when no line is in the way.
+ */
+export function pastEmptyLine(model, key) {
+  const index = model.getFocusedIndex();
+  const focused = model.getFocusedPath();
+  if (index < 0 || focused === null) {
+    return null;
+  }
+  const count = model.getVisibleCount();
+  const at = position => position >= 0 && position < count ? model.getVisibleRows(position, position)[0] ?? null : null;
+  const lineAt = position => {
+    const row = at(position);
+    return row !== null && isEmptyLine(row.path);
+  };
+  const pathAt = position => {
+    const row = at(position);
+    return row === null ? focused : pathOfRow(row);
+  };
+  if ((key === 'ArrowDown' || key === 'ArrowRight') && lineAt(index + 1)) {
+    return key === 'ArrowDown' ? pathAt(index + 2) : focused;
+  }
+  if (key === 'ArrowUp' && lineAt(index - 1)) {
+    return pathAt(index - 2);
+  }
+  if (key === 'End' && lineAt(count - 1)) {
+    return pathAt(count - 2);
+  }
+  return null;
+}
+/* Focus that still lands on a line, through a key with a modifier or the engine giving focus back to the line's element, goes on the way the last key went. */
+export function skipEmptyLine(model, key) {
+  const path = model.getFocusedPath();
+  if (path === null || !isEmptyLine(path)) {
+    return false;
+  }
+  if (key === 'ArrowUp' || key === 'PageUp') {
+    model.focusPreviousItem();
+    return true;
+  }
+  if (key === 'ArrowDown' || key === 'PageDown' || key === 'End') {
+    model.focusNextItem();
+  }
+  if (model.getFocusedPath() === path) {
+    model.focusPath(directoryOfEmptyLine(path));
+  }
+  return true;
+}

package/dist/file-tree/highlight.d.ts

@@ -0,0 +1,4 @@
+export declare const MATCH_HIGHLIGHT = "adecore-tree-match";
+export declare function matchHighlight(): Highlight | null;
+export declare function matchRanges(text: string, query: string): [number, number][];
+export declare function rangesOfMatches(rows: readonly HTMLElement[], query: string): Range[];

package/dist/file-tree/highlight.js

@@ -0,0 +1,75 @@
+/* The name a tree's shadow stylesheet colors with `::highlight()`. One registry entry is shared by every tree on the page. */
+export const MATCH_HIGHLIGHT = 'adecore-tree-match';
+// The copies of a name the engine keeps for truncation, which the tree's stylesheet hides.
+const HIDDEN_PARTS = '[data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]';
+let shared = null;
+/* Null where the browser has no CSS Custom Highlight API; the names are then drawn without a mark. */
+export function matchHighlight() {
+  if (typeof CSS === 'undefined' || !('highlights' in CSS) || typeof Highlight === 'undefined') {
+    return null;
+  }
+  if (shared === null) {
+    shared = new Highlight();
+  }
+  if (CSS.highlights.get(MATCH_HIGHLIGHT) !== shared) {
+    CSS.highlights.set(MATCH_HIGHLIGHT, shared);
+  }
+  return shared;
+}
+/* Every place `query` occurs in `text`, ignoring case, as `[start, end)` pairs that do not overlap. */
+export function matchRanges(text, query) {
+  const wanted = query.toLowerCase();
+  const haystack = text.toLowerCase();
+  // A letter that lowercases to more than one would shift every offset after it.
+  if (wanted === '' || haystack.length !== text.length) {
+    return [];
+  }
+  const found = [];
+  let at = haystack.indexOf(wanted);
+  while (at !== -1) {
+    found.push([at, at + wanted.length]);
+    at = haystack.indexOf(wanted, at + wanted.length);
+  }
+  return found;
+}
+/* The ranges over the visible text of each row's name where `query` occurs. */
+export function rangesOfMatches(rows, query) {
+  const ranges = [];
+  if (query === '') {
+    return ranges;
+  }
+  for (const row of rows) {
+    const content = row.querySelector('[data-item-section="content"]');
+    if (content === null) {
+      continue;
+    }
+    const nodes = [];
+    const walker = row.ownerDocument.createTreeWalker(content, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+      if (node.parentElement?.closest(HIDDEN_PARTS) === null) {
+        nodes.push(node);
+      }
+    }
+    const starts = [];
+    let text = '';
+    for (const node of nodes) {
+      starts.push(text.length);
+      text += node.data;
+    }
+    // The node an offset falls in, and the offset inside it; an end may sit at the end of a node.
+    const locate = (offset, end) => {
+      let index = nodes.length - 1;
+      while (index > 0 && (end ? starts[index] >= offset : starts[index] > offset)) {
+        index--;
+      }
+      return [nodes[index], offset - starts[index]];
+    };
+    for (const [start, end] of matchRanges(text, query)) {
+      const range = row.ownerDocument.createRange();
+      range.setStart(...locate(start, false));
+      range.setEnd(...locate(end, true));
+      ranges.push(range);
+    }
+  }
+  return ranges;
+}

package/dist/file-tree/parts.d.ts

@@ -2,6 +2,9 @@ import { type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import type { LucideIcon } from 'lucide-react';
+import type { FileTreeEmptyLabel } from './empty-lines.ts';
+import { type FileTreeDecorationOrder } from './use-slots.ts';
 export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     model: FileTree;
     label?: string;
@@ -15,6 +18,11 @@ export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     onExpandedPathsChange?(paths: readonly string[]): void;
     renderControl?(row: FileTreeVisibleRow): ReactNode;
     renderDecoration?(row: FileTreeVisibleRow): ReactNode;
+    decorationOrder?: FileTreeDecorationOrder;
+    rowIcon?(row: FileTreeVisibleRow): LucideIcon | undefined;
+    fitContent?: boolean;
+    highlight?: string;
+    emptyLabel?: FileTreeEmptyLabel;
     treeProps?: Omit<PierreProps, 'model'>;
 };
-export declare function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, treeProps, render, className, ref, children, onClick, onKeyDownCapture, ...props }: FileTreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, decorationOrder, rowIcon, fitContent, highlight, emptyLabel, treeProps, render, className, ref, children, onClick, onKeyDownCapture, style, ...props }: FileTreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;