@jsenv/navi 0.27.82 → 0.27.84

package/dist/jsenv_navi.js

@@ -6788,10 +6788,7 @@ const TYPO_PROPS = {
   // combo from MDN's own text-box example, most useful for compact things
   // like buttons/badges/labels. Use textBox/textBoxTrim/textBoxEdge
   // directly for any other combination.
-  textBoxCrop: applyToCssPropWhenTruthy(
-    "textBox",
-    "trim-both cap alphabetic",
-  ),
+  textBoxCrop: applyToCssPropWhenTruthy("textBox", "trim-both cap alphabetic"),
 };
 const VISUAL_PROPS = {
   outline: PASS_THROUGH,
@@ -6827,6 +6824,8 @@ const VISUAL_PROPS = {
   overflowY: PASS_THROUGH,
   objectFit: PASS_THROUGH,
   accentColor: PASS_THROUGH,
+  scrollbarWidth: PASS_THROUGH,
+  scrollbarGutter: PASS_THROUGH,
 };
 const CONTENT_PROPS = {
   align: applyOnTwoProps("alignX", "alignY"),
@@ -18968,6 +18967,17 @@ CONSTRAINT_ATTRIBUTE_SET.add("data-single-space");
  */
 
 
+// Our own compact/custom duration notation interpolates raw numbers
+// directly (unlike Intl.DurationFormat, which groups thousands on its own,
+// e.g. "5 400 secondes") — this keeps that consistent without reimplementing
+// locale-aware grouping. Falls back to the raw value as-is for a
+// non-numeric mid-edit value (e.g. "2a"), which Intl.NumberFormat can't
+// format anyway.
+const formatCompactNumber = (value, lang) => {
+  const n = Number(value);
+  return Number.isFinite(n) ? new Intl.NumberFormat(lang).format(n) : value;
+};
+
 /**
  * Formats a date as a human-readable day string.
  *
@@ -19221,15 +19231,20 @@ const formatTime = (date, lang) => {
  * "compact" uses our own notation that omits the minute symbol when hours are present.
  *
  * @param {number} minutes
- * @param {{ lang?: string, format?: "long"|"short"|"narrow"|"compact", alwaysShowHours?: boolean }} [options]
- * @param {boolean} [options.alwaysShowHours=false] - Normally a zero-hours
- *   component is dropped entirely (a real 5-minute duration should print as
- *   "5 minutes", not "0 hours 5 minutes") — set this to keep it (e.g. "0 h
- *   et 5 min"/"0h 5min"/"0h05") instead. Only meaningful when `minutes` is
- *   itself less than 60, i.e. the hours component would otherwise be zero;
- *   used by `<Time type="time">` for a time-of-day at midnight, where
- *   dropping the hour would make it indistinguishable from an actual
- *   duration (see time.jsx's own TimeTime).
+ * @param {{ lang?: string, format?: "long"|"short"|"narrow"|"compact", clockStyle?: boolean }} [options]
+ * @param {boolean} [options.clockStyle=false] - Set this when `minutes`
+ *   represents a time-of-day rather than a real duration (used by
+ *   `<Time type="time">`, see time.jsx's own TimeTime) — affects two
+ *   things at once, both consequences of a clock's "0" being a meaningful
+ *   hour rather than "no hours":
+ *   - a zero-hours component is normally dropped entirely (a real 5-minute
+ *     duration should print as "5 minutes", not "0 hours 5 minutes"); this
+ *     keeps it instead (e.g. "0 h et 5 min"/"0h 5min"/"00h05") so midnight
+ *     doesn't collapse to something indistinguishable from an actual
+ *     5-minute duration.
+ *   - `format: "compact"` also zero-pads a single-digit hour to 2 digits
+ *     (e.g. "5h30" → "05h30"), so it reads closer to a "05:30" clock.
+ *   Must not be set for plain duration formatting.
  *
  * @example
  * formatMinuteDuration(90, { lang: "fr" })                       // "1 heure 30 minutes" (long, default)
@@ -19237,20 +19252,21 @@ const formatTime = (date, lang) => {
  * formatMinuteDuration(90, { lang: "fr", format: "narrow" })    // "1h 30min" (Intl narrow)
  * formatMinuteDuration(90, { lang: "fr", format: "compact" })   // "1h30" (custom, no minute symbol)
  * formatMinuteDuration(45, { lang: "en", format: "compact" })   // "45min"
- * formatMinuteDuration(5, { lang: "fr", format: "narrow", alwaysShowHours: true }) // "0h 5min"
+ * formatMinuteDuration(5, { lang: "fr", format: "narrow", clockStyle: true }) // "0h 5min"
+ * formatMinuteDuration(330, { lang: "fr", format: "compact", clockStyle: true }) // "05h30"
  */
 const formatMinuteDuration = (
   minutes,
-  { lang = languagesSignal.value, format = "long", alwaysShowHours = false } = {},
+  { lang = languagesSignal.value, format = "long", clockStyle = false } = {},
 ) => {
   const h = Math.floor(minutes / 60);
   const m = minutes % 60;
   if (format !== "compact" && typeof Intl.DurationFormat !== "undefined") {
     const fmt = new Intl.DurationFormat(lang, {
       style: format, // "long", "short", or "narrow"
-      ...(alwaysShowHours ? { hoursDisplay: "always" } : {}),
+      ...(clockStyle ? { hoursDisplay: "always" } : {}),
     });
-    if (h === 0 && !alwaysShowHours) {
+    if (h === 0 && !clockStyle) {
       return fmt.format({ minutes: m });
     }
     if (m === 0) {
@@ -19261,13 +19277,16 @@ const formatMinuteDuration = (
   // format="compact": "1h30", "45min", "2h" — no minute symbol when hours are present
   const hSym = naviI18n("time.duration.hour_symbol", undefined, { lang });
   const mSym = naviI18n("time.duration.minute_symbol", undefined, { lang });
-  if (h === 0 && !alwaysShowHours) {
+  const hStr = clockStyle
+    ? String(h).padStart(2, "0")
+    : formatCompactNumber(h, lang);
+  if (h === 0 && !clockStyle) {
     return `${m}${mSym}`;
   }
   if (m === 0) {
-    return `${h}${hSym}`;
+    return `${hStr}${hSym}`;
   }
-  return `${h}${hSym}${String(m).padStart(2, "0")}`;
+  return `${hStr}${hSym}${String(m).padStart(2, "0")}`;
 };
 
 /**
@@ -19322,7 +19341,9 @@ const formatSecondDuration = (
   const mSym = naviI18n("time.duration.minute_symbol", undefined, { lang });
   const sSym = naviI18n("time.duration.second_symbol", undefined, { lang });
   const parts = [];
-  if (h > 0) parts.push(`${h}${hSym}`);
+  // m/s are always 0-59 by construction (never need grouping); h can be
+  // arbitrarily large for a long duration.
+  if (h > 0) parts.push(`${formatCompactNumber(h, lang)}${hSym}`);
   if (m > 0) parts.push(`${m}${mSym}`);
   if (s > 0 || parts.length === 0) parts.push(`${s}${sSym}`);
   return parts.join("");
@@ -19423,36 +19444,40 @@ const formatDuration = (
   const parts = [];
 
   if (hasNonZero("years")) {
-    parts.push(`${duration.years}${sym("year")}`);
+    parts.push(`${formatCompactNumber(duration.years, lang)}${sym("year")}`);
   }
   if (hasNonZero("months")) {
-    parts.push(`${duration.months}${sym("month")}`);
+    parts.push(`${formatCompactNumber(duration.months, lang)}${sym("month")}`);
   }
   if (hasNonZero("weeks")) {
-    parts.push(`${duration.weeks}${sym("week")}`);
+    parts.push(`${formatCompactNumber(duration.weeks, lang)}${sym("week")}`);
   }
   if (hasNonZero("days")) {
-    parts.push(`${duration.days}${sym("day")}`);
+    parts.push(`${formatCompactNumber(duration.days, lang)}${sym("day")}`);
   }
 
-  // Hours + minutes: when both present, pad minutes to 2 digits after the h symbol
+  // Hours + minutes: when both present, pad minutes to 2 digits after the h
+  // symbol — minutes stays a plain 2-digit pad (it's always 0-59 by
+  // convention), only hours goes through grouping.
   const hSym = sym("hour");
   const mSym = sym("minute");
   if (hasNonZero("hours") && hasNonZero("minutes")) {
     parts.push(
-      `${duration.hours}${hSym}${String(duration.minutes).padStart(2, "0")}`,
+      `${formatCompactNumber(duration.hours, lang)}${hSym}${String(duration.minutes).padStart(2, "0")}`,
     );
   } else if (hasNonZero("hours")) {
-    parts.push(`${duration.hours}${hSym}`);
+    parts.push(`${formatCompactNumber(duration.hours, lang)}${hSym}`);
   } else if (hasNonZero("minutes")) {
-    parts.push(`${duration.minutes}${mSym}`);
+    parts.push(`${formatCompactNumber(duration.minutes, lang)}${mSym}`);
   }
 
   if (hasNonZero("seconds")) {
-    parts.push(`${duration.seconds}${sym("second")}`);
+    parts.push(`${formatCompactNumber(duration.seconds, lang)}${sym("second")}`);
   }
   if (hasNonZero("milliseconds")) {
-    parts.push(`${duration.milliseconds}${sym("millisecond")}`);
+    parts.push(
+      `${formatCompactNumber(duration.milliseconds, lang)}${sym("millisecond")}`,
+    );
   }
   return parts.join("") || "0";
 };
@@ -33397,7 +33422,21 @@ const InputTextualWithSuggestions = props => {
 // Nice side effect is that input_group.jsx will see all input is selected
 // and arrow left/right will always nav between inputs.
 // (Otherwise we would prevent left/right + show calllout about readonly)
+//
+// Not on touch: .select() there triggers the native mobile text-selection UI
+// (handles + magnifier), which makes no sense for a picker (opens a
+// popover/dialog on tap, not meant for text selection) and isn't wanted on a
+// plain readonly text input either. onPointerDown tracks the pointer type
+// that initiated the interaction (same convention as button_ui.jsx's own
+// `e.pointerType !== "touch"` check) so the focus handler — which fires
+// right after, but as a plain FocusEvent with no pointerType of its own —
+// can also skip select() for that same interaction.
 const useAutoSelectReadOnly = (props) => {
+  const lastPointerTypeRef = useRef(null);
+  const onPointerDown = (e) => {
+    props.onPointerDown?.(e);
+    lastPointerTypeRef.current = e.pointerType;
+  };
   const onFocus = (e) => {
     props.onFocus(e);
     if (e.defaultPrevented) {
@@ -33406,6 +33445,9 @@ const useAutoSelectReadOnly = (props) => {
     if (!e.target.readOnly) {
       return;
     }
+    if (lastPointerTypeRef.current === "touch") {
+      return;
+    }
     e.preventDefault();
     e.target.select();
   };
@@ -33417,11 +33459,14 @@ const useAutoSelectReadOnly = (props) => {
     if (!e.target.readOnly) {
       return;
     }
+    if (lastPointerTypeRef.current === "touch") {
+      return;
+    }
     e.preventDefault();
     e.target.select();
   };
 
-  return { onFocus, onMouseDown };
+  return { onFocus, onMouseDown, onPointerDown };
 };
 
 installImportMetaCssBuild(import.meta);/**
@@ -39974,22 +40019,27 @@ const TimeTime = ({
   // other hour keeps at least its own "N hour(s)" wording as a hint that
   // this is a time-of-day, not a duration — only hour 0 loses that hint
   // entirely.
+  // clockStyle: this is always a time-of-day here, never a duration — keeps
+  // a zero hour instead of dropping it (midnight would otherwise be
+  // indistinguishable from an actual 5-minute duration), and in
+  // format="compact" also zero-pads a single-digit hour so "5h30"/"0h05"
+  // read as "05h30"/"00h05", closer to a "HH:MM" clock.
   let text;
   if (date.getHours() !== 0) {
     text = formatMinuteDuration(totalMinutes, {
       lang,
-      format
+      format,
+      clockStyle: true
     });
   } else if (format !== "long") {
     // short/narrow/compact: keep the "0 h"/"0h" hour part instead of
-    // dropping it (formatMinuteDuration's own alwaysShowHours) — e.g.
-    // "0 h et 5 min"/"0h 5min"/"0h05" — rather than substituting a
-    // translated "midnight" word, which would look out of place squeezed
-    // into these otherwise terse, symbol-based formats.
+    // dropping it — e.g. "0 h et 5 min"/"0h 5min"/"00h05" — rather than
+    // substituting a translated "midnight" word, which would look out of
+    // place squeezed into these otherwise terse, symbol-based formats.
     text = formatMinuteDuration(totalMinutes, {
       lang,
       format,
-      alwaysShowHours: true
+      clockStyle: true
     });
   } else {
     const midnightWord = naviI18n("time.midnight", undefined, {
@@ -40004,7 +40054,7 @@ const TimeTime = ({
       text = formatMinuteDuration(totalMinutes, {
         lang,
         format,
-        alwaysShowHours: true
+        clockStyle: true
       });
     } else {
       // Swap just the "0 heure(s)" part of the Intl-generated duration
@@ -40475,7 +40525,11 @@ const createItemTracker = (onChange) => {
       }
 
       // Build allItems and visibleItems in a single pass over allOrderedKeys.
-      // Visible items are those without data.hidden — same relative order as orderedKeys.
+      // Visible items are those without data.hidden or data.filtered — same
+      // relative order as orderedKeys (syncItem already excludes both from
+      // orderedKeys; this must match or consumers relying on visibleCountSignal
+      // for virtual-scroll accounting, e.g. list.jsx's filler sizing, would
+      // count filtered-out items as if they still took up space).
       const prevAllItems = itemsSignal.peek();
       const prevVisibleItems = visibleItemsSignal.peek();
       let allItemsChanged = prevAllItems.length !== allOrderedKeys.length;
@@ -40494,7 +40548,7 @@ const createItemTracker = (onChange) => {
         if (item.match === false) {
           newNoMatchCount++;
         }
-        if (!item.hidden) {
+        if (!item.hidden && !item.filtered) {
           const visibleIdx = visibleItems.length;
           visibleItems.push(item);
           if (!visibleItemsChanged && item !== prevVisibleItems[visibleIdx]) {
@@ -41218,10 +41272,9 @@ const ListItemSelectable = props => {
   const {
     index,
     id = defaultId,
-    highlight,
+    matchInfo,
     hidden,
     filtered,
-    matchScore,
     defaultSelected,
     selected,
     pointed,
@@ -41263,10 +41316,9 @@ const ListItemSelectable = props => {
   return jsxs(Next, {
     id: id,
     index: index,
-    highlight: highlight,
+    matchInfo: matchInfo,
     filtered: filtered,
     hidden: hidden,
-    matchScore: matchScore,
     "aria-selected": checked,
     selected: checked,
     "navi-selectable": "",
@@ -41580,6 +41632,7 @@ const css$m = /* css */`
       flex-wrap: inherit;
       overflow: auto;
       overscroll-behavior: inherit; /* inherit select behavior */
+      scrollbar-width: inherit;
     }
 
     &[data-expand-x] {
@@ -41871,7 +41924,7 @@ const ListUI = props => {
   import.meta.css = [css$m, "@jsenv/navi/src/control/list/list.jsx"];
   const {
     ref,
-    renderBudget = RENDER_BUDGET_DEFAULT,
+    renderBudget: renderBudgetProp = RENDER_BUDGET_DEFAULT,
     renderBudgetSkipCheck,
     role,
     fallback,
@@ -41892,6 +41945,15 @@ const ListUI = props => {
     spacing,
     ...rest
   } = props;
+  // Accept a string (e.g. from an HTML attribute: renderBudget="50") the
+  // same way a bare number would work — arithmetic below (renderBudget / 2,
+  // start + renderBudget, etc.) would silently misbehave on a raw string
+  // ("+" concatenates instead of adding).
+  let renderBudget = renderBudgetProp;
+  if (typeof renderBudget === "string") {
+    const parsed = Number(renderBudget);
+    renderBudget = Number.isFinite(parsed) ? parsed : RENDER_BUDGET_DEFAULT;
+  }
   if (renderBudget < 30 && !renderBudgetSkipCheck) {
     console.warn(`List: renderBudget=${renderBudget} is too low. A renderBudget below 30 is not supported: on large screens or when the list grows, items outside the window would appear as blank space instead of rendered content. Use a value of at least 30, or omit the prop to use the default (${RENDER_BUDGET_DEFAULT}).`);
   }
@@ -42021,7 +42083,7 @@ const ListFirstResolver = props => {
  *   action?: (value: any) => void,
  *   uiAction?: (value: any) => void,
  *   popover?: boolean,
- *   renderBudget?: number,
+ *   renderBudget?: number | string,
  *   virtualItemSize?: number,
  *   fallback?: import("ignore:preact").ComponentChildren,
  *   searchFallback?: import("ignore:preact").ComponentChildren,
@@ -42282,6 +42344,7 @@ const useListScrollSync = ({
   // (pour l'instant pas grave car on travaille pour le mode select qui fermera le dialog au select)
   const savedScrollRef = useRef(null);
   const topMatchScoresKeyRef = useRef("");
+  const restoreScrollRafRef = useRef(null);
   useLayoutEffect(() => {
     const listScrollContainerEl = ref.current?.querySelector(`.navi_list_scroll_container`);
     if (!listScrollContainerEl) {
@@ -42298,7 +42361,20 @@ const useListScrollSync = ({
       savedScrollRef.current = null;
       debugScroll("Restoring scroll to", savedScroll);
       updateRenderWindow(savedScroll.renderWindow.start, savedScroll.renderWindow.end, "restore scroll window");
-      const raf = requestAnimationFrame(() => {
+      // Tracked in a ref rather than cancelled via this effect's own cleanup:
+      // updateRenderWindow above triggers a re-render, which re-runs this
+      // effect (it has no dependency array — it needs to reactively poll
+      // tracker state on every render) *before* the RAF below fires. That
+      // second invocation sees savedScrollRef.current already nulled and
+      // bails out early — if the RAF were tied to this invocation's cleanup,
+      // it would get cancelled right there with nothing to replace it,
+      // silently dropping the scroll restore (renderWindow ends up correct,
+      // but scrollTop stays wherever it was, showing blank filler space).
+      if (restoreScrollRafRef.current) {
+        cancelAnimationFrame(restoreScrollRafRef.current);
+      }
+      restoreScrollRafRef.current = requestAnimationFrame(() => {
+        restoreScrollRafRef.current = null;
         const left = savedScroll.left;
         const top = savedScroll.top;
         // use scrollTo to respect eventual css scroll-behavior: smooth;
@@ -42321,13 +42397,11 @@ const useListScrollSync = ({
           event: new CustomEvent("navi_scroll_restore")
         });
       });
-      return () => {
-        cancelAnimationFrame(raf);
-      };
+      return undefined;
     }
     const visibleItems = tracker.visibleItemsSignal.peek();
     const topItems = visibleItems.slice(0, renderBudget);
-    const topMatchScoresKey = topItems.map(i => `${i.id}:${i.matchScore ?? ""}`).join(",");
+    const topMatchScoresKey = topItems.map(i => `${i.id}:${i.matchInfo?.matchScore ?? ""}`).join(",");
     const currentTopMatchScore = topMatchScoresKeyRef.current;
     if (topMatchScoresKey === currentTopMatchScore) {
       // no changes in top matches -> no need to scroll
@@ -42742,9 +42816,13 @@ const ListItemUI = props => {
   const renderWindow = useContext(RenderWindowContext);
   const tracker = useContext(ListItemTrackerContext);
   const searchNoMatchMode = useContext(SearchNoMatchModeContext);
-  // Derive filtered/hidden/nonMatching from the `match` prop + searchNoMatchMode context.
-  // The `match` prop replaces the older `filtered`/`hidden` per-item props.
-  if (props.match === false) {
+  // There is no standalone match/matchScore/highlight prop — participation
+  // in a matching system (search, filter…) only goes through `matchInfo`
+  // (e.g. useSearchText's getItemMatchInfo(item): { match, matchScore,
+  // matchRanges }), so there is exactly one way to wire it up.
+  const matchInfo = props.matchInfo;
+  // Derive filtered/hidden/muted from matchInfo.match + searchNoMatchMode context.
+  if (matchInfo?.match === false) {
     if (searchNoMatchMode === "remove") {
       props.filtered = true;
     } else if (searchNoMatchMode === "invisible_and_inert") {
@@ -42813,7 +42891,7 @@ const ListItemReal = props => {
     id,
     hidden,
     muted,
-    highlight,
+    matchInfo,
     children,
     ...rest
   } = props;
@@ -42831,8 +42909,9 @@ const ListItemReal = props => {
     pendingScroll.resolve(itemEl);
   }, [needScrollOnMount]);
 
-  // CSS Highlight API: mark matching text ranges when highlight prop is set.
-  useSearchHighlight(ref, highlight, [children, hidden]);
+  // CSS Highlight API: mark matching text ranges from matchInfo.matchRanges,
+  // if any (there is no standalone highlight prop — see ListItem's own doc).
+  useSearchHighlight(ref, matchInfo?.matchRanges, [children, hidden]);
   const columnsOverrideProps = useListItemColumnsOverrideProps(rest.style);
   return jsx(Box, {
     as: "li",
@@ -42845,9 +42924,7 @@ const ListItemReal = props => {
     ...rest,
     ...columnsOverrideProps,
     index: undefined,
-    selected: undefined,
-    matchScore: undefined,
-    match: undefined
+    selected: undefined
     // We use aria-hidden and not hidden because hidden would be forced to
     // display: none while here we want to keep it in the DOM to avoid layout shift
     // but visually hidden
@@ -42926,7 +43003,21 @@ const LIST_ITEM_PSEUDO_ELEMENTS = ["::highlight"];
  *   filtered  — when true, item is excluded from visible count and removed from DOM entirely
  *   hidden    — when true, item is excluded from visible count (no virtual scroll height)
  *               but stays in DOM with the native HTML hidden attribute
- *   highlight — array of [start, end] ranges to highlight via CSS Highlight API
+ *   matchInfo — participation in a matching system (search, filter…): the
+ *               object useSearchText's getItemMatchInfo(item) returns
+ *               (or any object shaped the same way):
+ *                 <ListItem matchInfo={getItemMatchInfo(item)} />
+ *               There is no standalone match/matchScore/highlight prop —
+ *               matchInfo is the only way to wire this up:
+ *                 match       — false is interpreted per the List's own
+ *                               searchNoMatchMode ("remove" -> filtered,
+ *                               "invisible_and_inert" -> hidden,
+ *                               "muted" -> muted).
+ *                 matchScore  — this item's search relevance score (higher =
+ *                               more relevant). Only read for search-driven
+ *                               scroll-to-top-match behavior.
+ *                 matchRanges — array of [start, end] ranges to highlight via
+ *                               CSS Highlight API.
  *   ...rest   — forwarded to the rendered <li> element
  */
 const ListItem = createComponentResolver([ListItemFirstResolver, ListItemSelectableResolver, ListItemHeaderOrFooterResolver, ListItemPresentationResolver, ListItemUI]);
@@ -44586,7 +44677,8 @@ const mergeRanges = (ranges) => {
  *
  * const [orderedItems, getItemMatchInfo] = useSearch(search, items, searchPerson);
  * // getItemMatchInfo(item).matchRanges is { ".name": [[start,end],…], ".address": [[start,end],…] }
- * // Pass it to <ListItem highlight={matchRanges} /> — ListItem handles the object format.
+ * // Pass the whole thing: <ListItem matchInfo={getItemMatchInfo(item)} />
+ * // — ListItem handles the per-selector object format for matchRanges.
  * ```
  *
  * Each field config:
@@ -44626,7 +44718,9 @@ const createSearch = (fields) => {
  * followed by non-matched items in their natural order. No item is hidden.
  * Returns [orderedItems, getItemMatchInfo].
  *   - orderedItems: all items, reordered
- *   - getItemMatchInfo(item): { match, score, ranges }
+ *   - getItemMatchInfo(item): { match, matchScore, matchRanges } — pass the
+ *     whole thing straight to <ListItem matchInfo={getItemMatchInfo(item)} />,
+ *     there is no need to destructure the three fields by hand.
  *
  * When searchText is empty, natural order is preserved and all items match with score 0.
  *
@@ -44679,8 +44773,8 @@ const buildMatchInfo = (searchText, items, matchFn) => {
     if (!result.match) {
       nonMatched.push({
         item,
-        score: result.matchScore,
-        ranges: result.matchRanges,
+        matchScore: result.matchScore,
+        matchRanges: result.matchRanges,
       });
       continue;
     }
@@ -44700,23 +44794,23 @@ const buildMatchInfo = (searchText, items, matchFn) => {
       }
     }
     if (lo < scoreEntries.length && scoreEntries[lo][0] === score) {
-      scoreEntries[lo][1].push({ item, ranges: result.matchRanges });
+      scoreEntries[lo][1].push({ item, matchRanges: result.matchRanges });
     } else {
       scoreEntries.splice(lo, 0, [
         score,
-        [{ item, ranges: result.matchRanges }],
+        [{ item, matchRanges: result.matchRanges }],
       ]);
     }
   }
 
   const matchInfoMap = new Map();
   for (const [score, bucket] of scoreEntries) {
-    for (const { item, ranges } of bucket) {
-      matchInfoMap.set(item, { match: true, score, ranges });
+    for (const { item, matchRanges } of bucket) {
+      matchInfoMap.set(item, { match: true, matchScore: score, matchRanges });
     }
   }
-  for (const { item, score, ranges } of nonMatched) {
-    matchInfoMap.set(item, { match: false, score, ranges });
+  for (const { item, matchScore, matchRanges } of nonMatched) {
+    matchInfoMap.set(item, { match: false, matchScore, matchRanges });
   }
 
   return { scoreEntries, nonMatched, matchInfoMap };