@12-apps/ui 6.41.0 → 6.41.2

package/dist/chunk-BR2T72JI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Autocomplete/useAutocomplete.ts"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\n\nimport {\n  defaultGetKey,\n  defaultGetLabel,\n  defaultGetSuggestionType,\n  defaultGetUrl,\n  defaultOpenLink,\n  filterSuggestions,\n  firstGhostSuggestion,\n  type MatchMode,\n} from './Autocomplete.helpers';\nimport { handleAutocompleteKey, type KeyContext } from './Autocomplete.keys';\nimport type { AutocompleteProps } from './Autocomplete.types';\n\ntype Setter<V> = React.Dispatch<React.SetStateAction<V>>;\n\n/** All mutable state + refs for one Autocomplete instance. */\ninterface AutocompleteState<T> {\n  open: boolean;\n  setOpen: Setter<boolean>;\n  activeIndex: number;\n  setActiveIndex: Setter<number>;\n  ghost: string;\n  setGhost: Setter<string>;\n  inputValue: string;\n  setInputValue: Setter<string>;\n  composition: boolean;\n  setComposition: Setter<boolean>;\n  filteredSuggestions: T[];\n  setFilteredSuggestions: Setter<T[]>;\n  isInputFocused: boolean;\n  setIsInputFocused: Setter<boolean>;\n  justCompletedGhost: boolean;\n  setJustCompletedGhost: Setter<boolean>;\n  userClosedDropdown: boolean;\n  setUserClosedDropdown: Setter<boolean>;\n  /**\n   * Mirrors `userClosedDropdown`, set synchronously wherever the state is\n   * (see {@link setDeliberateClose}). An effect scheduled by one render and\n   * flushed after a LATER render has already changed this flag reads a\n   * stale, closed-over `userClosedDropdown` — but `.current` on a ref is\n   * dereferenced live, so it always reflects the latest write regardless of\n   * which render's closure is doing the reading (FUT-2780).\n   */\n  userClosedDropdownRef: React.RefObject<boolean>;\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  listRef: React.RefObject<HTMLUListElement | null>;\n  debounceRef: React.RefObject<number | undefined>;\n}\n\nfunction useAutocompleteState<T>(value: string, suggestions: T[]): AutocompleteState<T> {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [ghost, setGhost] = useState('');\n  const [inputValue, setInputValue] = useState(value);\n  const [composition, setComposition] = useState(false);\n  const [filteredSuggestions, setFilteredSuggestions] = useState<T[]>(suggestions);\n  const [isInputFocused, setIsInputFocused] = useState(false);\n  const [justCompletedGhost, setJustCompletedGhost] = useState(false);\n  const [userClosedDropdown, setUserClosedDropdown] = useState(false);\n  const userClosedDropdownRef = useRef(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLUListElement | null>(null);\n  const debounceRef = useRef<number | undefined>(undefined);\n  return {\n    open, setOpen, activeIndex, setActiveIndex, ghost, setGhost, inputValue, setInputValue,\n    composition, setComposition, filteredSuggestions, setFilteredSuggestions, isInputFocused,\n    setIsInputFocused, justCompletedGhost, setJustCompletedGhost, userClosedDropdown,\n    setUserClosedDropdown, userClosedDropdownRef, inputRef, listRef, debounceRef,\n  };\n}\n\n/**\n * Set the \"this close was deliberate\" flag in both the ref effects read\n * synchronously (live, even from a stale closure) and the state the rest of\n * the component reads for render — every call site that touches\n * `userClosedDropdown` goes through this so the two never drift (FUT-2780).\n */\nfunction setDeliberateClose<T>(s: AutocompleteState<T>, closed: boolean): void {\n  s.userClosedDropdownRef.current = closed;\n  s.setUserClosedDropdown(closed);\n}\n\n// ---- effects (one tiny hook each; explicit params keep deps complete) --------\n\nfunction useValueSync(value: string, setInputValue: Setter<string>): void {\n  useEffect(() => setInputValue(value), [value, setInputValue]);\n}\n\nfunction useDebounceCleanup(debounceRef: React.RefObject<number | undefined>): void {\n  useEffect(\n    () => () => {\n      if (debounceRef.current) window.clearTimeout(debounceRef.current);\n    },\n    [debounceRef],\n  );\n}\n\nfunction useScrollActiveIntoView(\n  activeIndex: number,\n  optionIdPrefix: string,\n  listRef: React.RefObject<HTMLUListElement | null>,\n): void {\n  useEffect(() => {\n    if (activeIndex < 0 || !listRef.current) return;\n    document\n      .getElementById(`${optionIdPrefix}-${activeIndex}`)\n      ?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, optionIdPrefix, listRef]);\n}\n\nfunction useGhostFlagReset(justCompletedGhost: boolean, setJustCompletedGhost: Setter<boolean>): void {\n  useEffect(() => {\n    if (!justCompletedGhost) return;\n    const timer = setTimeout(() => setJustCompletedGhost(false), 50);\n    return () => clearTimeout(timer);\n  }, [justCompletedGhost, setJustCompletedGhost]);\n}\n\nfunction useLoadingOpen(\n  isLoading: boolean,\n  inputValue: string,\n  disabled: boolean,\n  userClosedDropdownRef: React.RefObject<boolean>,\n  setOpen: Setter<boolean>,\n  setActiveIndex: Setter<number>,\n): void {\n  useEffect(() => {\n    if (isLoading && inputValue.trim().length > 0 && !disabled && !userClosedDropdownRef.current) setOpen(true);\n    if (disabled) {\n      setOpen(false);\n      setActiveIndex(-1);\n    }\n  }, [isLoading, inputValue, disabled, userClosedDropdownRef, setOpen, setActiveIndex]);\n}\n\n/** Inputs to the auto-open check, all primitive/stable so effect deps stay complete. */\ninterface AutoOpenArgs {\n  inputValue: string;\n  isInputFocused: boolean;\n  composition: boolean;\n  justCompletedGhost: boolean;\n  userClosedDropdownRef: React.RefObject<boolean>;\n  activeIndex: number;\n  setOpen: Setter<boolean>;\n  setActiveIndex: Setter<number>;\n}\n\n/** Auto-open the dropdown once local filtering has a fresh result set. */\nfunction maybeAutoOpen(a: AutoOpenArgs, hasResults: boolean): void {\n  const canAutoOpen =\n    a.inputValue.trim() &&\n    a.isInputFocused &&\n    !a.composition &&\n    !a.justCompletedGhost &&\n    !a.userClosedDropdownRef.current;\n  if (!canAutoOpen) return;\n  a.setOpen(true);\n  if (hasResults && a.activeIndex === -1) a.setActiveIndex(0);\n}\n\nfunction useLocalFilter<T>(p: AutocompleteProps<T>, s: AutocompleteState<T>): void {\n  const propSuggestions = p.suggestions;\n  const getLabel = p.getLabel ?? defaultGetLabel;\n  const matchMode: MatchMode = p.matchMode ?? 'contains';\n  const async = Boolean(p.async);\n  const {\n    inputValue, isInputFocused, composition, justCompletedGhost, userClosedDropdown, activeIndex,\n    setFilteredSuggestions, setOpen, setActiveIndex, userClosedDropdownRef,\n  } = s;\n  useEffect(() => {\n    const suggestions = propSuggestions ?? [];\n    if (async || !inputValue) {\n      setFilteredSuggestions(suggestions);\n      return;\n    }\n    const filtered = filterSuggestions(suggestions, inputValue, matchMode, getLabel);\n    setFilteredSuggestions(filtered);\n    maybeAutoOpen(\n      { inputValue, isInputFocused, composition, justCompletedGhost, userClosedDropdownRef, activeIndex, setOpen, setActiveIndex },\n      filtered.length > 0,\n    );\n    // `userClosedDropdown` (state) stays a dependency so this effect still\n    // reruns on every change of it, same as before — only the VALUE read\n    // inside `maybeAutoOpen` moved to the ref (see `userClosedDropdownRef`'s\n    // doc comment).\n  }, [\n    propSuggestions, inputValue, async, getLabel, matchMode, isInputFocused, composition,\n    justCompletedGhost, userClosedDropdown, activeIndex, setFilteredSuggestions, setOpen, setActiveIndex,\n    userClosedDropdownRef,\n  ]);\n}\n\nfunction useGhostText<T>(p: AutocompleteProps<T>, s: AutocompleteState<T>): void {\n  const getLabel = p.getLabel ?? defaultGetLabel;\n  const getType = p.getSuggestionType ?? defaultGetSuggestionType;\n  const showGhost = p.showGhostText ?? true;\n  const { inputValue, filteredSuggestions, isInputFocused, composition, setGhost } = s;\n  useEffect(() => {\n    if (!inputValue || !isInputFocused || composition || !showGhost) {\n      setGhost('');\n      return;\n    }\n    const first = firstGhostSuggestion(filteredSuggestions, inputValue, getLabel, getType);\n    setGhost(first ? getLabel(first).slice(inputValue.length) : '');\n  }, [inputValue, filteredSuggestions, isInputFocused, composition, showGhost, getLabel, getType, setGhost]);\n}\n\n// ---- selection (split by mode to keep each function under the complexity bar) -\n\nfunction commitMultiSelect<T>(item: T, p: AutocompleteProps<T>, s: AutocompleteState<T>, onChange: (v: string) => void): void {\n  const getKey = p.getKey ?? defaultGetKey;\n  const current = p.selectedItems ?? [];\n  if (!current.some((sel) => getKey(sel) === getKey(item))) p.onSelectedItemsChange?.([...current, item]);\n  s.setInputValue('');\n  onChange('');\n  setDeliberateClose(s, false);\n}\n\nfunction commitSingleSelect<T>(item: T, p: AutocompleteProps<T>, s: AutocompleteState<T>, onChange: (v: string) => void): void {\n  const label = (p.getLabel ?? defaultGetLabel)(item);\n  s.setInputValue(label);\n  onChange(label);\n}\n\n/** Apply a pick: open a link suggestion, or commit a search one to the input. */\nfunction commitPick<T>(\n  item: T,\n  linkUrl: string | null,\n  p: AutocompleteProps<T>,\n  s: AutocompleteState<T>,\n  onChange: (v: string) => void,\n): void {\n  if (linkUrl !== null) (p.openLink ?? defaultOpenLink)(linkUrl, item);\n  else if (p.multiple) commitMultiSelect(item, p, s, onChange);\n  else commitSingleSelect(item, p, s, onChange);\n}\n\nfunction runSelectItem<T>(item: T, p: AutocompleteProps<T>, s: AutocompleteState<T>, onChange: (v: string) => void): void {\n  const url = (p.getUrl ?? defaultGetUrl)(item);\n  const isLink = (p.getSuggestionType ?? defaultGetSuggestionType)(item) === 'link' && Boolean(url);\n  // A single-select pick (search or link) ends the current search: the list\n  // stays closed until the user types again. `multiple` mode is unchanged —\n  // commitMultiSelect already clears inputValue and resets the flag itself,\n  // so the empty-input branch of the filter effect keeps the list closed.\n  const isSingleSelectPick = isLink || !p.multiple;\n  commitPick(item, isLink ? (url as string) : null, p, s, onChange);\n  s.setOpen(false);\n  s.setActiveIndex(-1);\n  p.onSelect?.(item);\n  s.inputRef.current?.focus();\n  // Set LAST so a re-fired `onFocus` cannot clear the flag. The close itself\n  // relies on the input never blurring during a pick (the option's\n  // `onMouseDown` preventDefault, and Enter keeps focus): `onFocus` reopens a\n  // non-empty input directly, without reading this flag. The REF half is set\n  // in the same synchronous tick as the pick, so an effect scheduled by an\n  // earlier keystroke — and still pending when this runs — reads the\n  // up-to-date value instead of the one it closed over (FUT-2780).\n  if (isSingleSelectPick) setDeliberateClose(s, true);\n}\n\nfunction buildKeyContext<T>(\n  p: AutocompleteProps<T>,\n  s: AutocompleteState<T>,\n  selectItem: (item: T) => void,\n  onChange: (v: string) => void,\n): KeyContext<T> {\n  return {\n    open: s.open, activeIndex: s.activeIndex, filteredSuggestions: s.filteredSuggestions,\n    maxVisibleItems: p.maxVisibleItems ?? 10, allowFreeText: p.allowFreeText ?? true,\n    inputValue: s.inputValue, ghost: s.ghost, isInputFocused: s.isInputFocused,\n    multiple: Boolean(p.multiple), selectedItems: p.selectedItems ?? [],\n    getLabel: p.getLabel ?? defaultGetLabel,\n    getSuggestionType: p.getSuggestionType ?? defaultGetSuggestionType,\n    setOpen: s.setOpen, setActiveIndex: s.setActiveIndex,\n    setUserClosedDropdown: (closed: boolean) => setDeliberateClose(s, closed),\n    setInputValue: s.setInputValue, setGhost: s.setGhost, setJustCompletedGhost: s.setJustCompletedGhost,\n    debouncedOnChange: onChange, selectItem, onSelectedItemsChange: p.onSelectedItemsChange,\n  };\n}\n\n/** The full view-model the presentational component renders. */\nexport interface AutocompleteView<T> {\n  id: string;\n  listId: string;\n  optionIdPrefix: string;\n  state: AutocompleteState<T>;\n  visibleSuggestions: T[];\n  activeDescendant: string | undefined;\n  selectItem: (item: T) => void;\n  removeSelectedItem: (item: T) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onFocus: () => void;\n  onBlur: () => void;\n  onClickAway: () => void;\n}\n\n/** Wire state, effects, and (plain, per-render) handlers for the Autocomplete component. */\nexport function useAutocomplete<T>(p: AutocompleteProps<T>): AutocompleteView<T> {\n  const componentId = useId();\n  const id = p.id || componentId;\n  const optionIdPrefix = `${id}-option`;\n  const s = useAutocompleteState<T>(p.value, p.suggestions ?? []);\n\n  const debouncedOnChange = (val: string): void => {\n    if (s.debounceRef.current) window.clearTimeout(s.debounceRef.current);\n    s.debounceRef.current = window.setTimeout(() => p.onChange(val), p.debounceMs ?? 150);\n  };\n\n  useValueSync(p.value, s.setInputValue);\n  useDebounceCleanup(s.debounceRef);\n  useScrollActiveIntoView(s.activeIndex, optionIdPrefix, s.listRef);\n  useGhostFlagReset(s.justCompletedGhost, s.setJustCompletedGhost);\n  useLoadingOpen(\n    Boolean(p.isLoading),\n    s.inputValue,\n    Boolean(p.disabled),\n    s.userClosedDropdownRef,\n    s.setOpen,\n    s.setActiveIndex,\n  );\n  useLocalFilter(p, s);\n  useGhostText(p, s);\n\n  const selectItem = (item: T): void => runSelectItem(item, p, s, debouncedOnChange);\n\n  return {\n    id,\n    listId: `${id}-listbox`,\n    optionIdPrefix,\n    state: s,\n    visibleSuggestions: s.filteredSuggestions.slice(0, p.maxVisibleItems ?? 10),\n    activeDescendant: s.activeIndex >= 0 ? `${optionIdPrefix}-${s.activeIndex}` : undefined,\n    selectItem,\n    removeSelectedItem: (item: T): void => {\n      const getKey = p.getKey ?? defaultGetKey;\n      p.onSelectedItemsChange?.((p.selectedItems ?? []).filter((sel) => getKey(sel) !== getKey(item)));\n      s.inputRef.current?.focus();\n    },\n    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>): void =>\n      handleAutocompleteKey(e, s.composition, buildKeyContext(p, s, selectItem, debouncedOnChange)),\n    onInputChange: (e: React.ChangeEvent<HTMLInputElement>): void => {\n      s.setInputValue(e.target.value);\n      debouncedOnChange(e.target.value);\n      if (!s.open || s.filteredSuggestions.length === 0) s.setActiveIndex(-1);\n      setDeliberateClose(s, false);\n    },\n    onFocus: (): void => {\n      s.setIsInputFocused(true);\n      setDeliberateClose(s, false);\n      if (!s.inputValue.trim()) return;\n      s.setOpen(true);\n      if (s.filteredSuggestions.length > 0 && s.activeIndex === -1) s.setActiveIndex(0);\n    },\n    onBlur: (): void => {\n      window.setTimeout(() => s.setIsInputFocused(false), 150);\n    },\n    onClickAway: (): void => {\n      s.setOpen(false);\n      s.setActiveIndex(-1);\n      setDeliberateClose(s, true);\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-UGPRBJWB.js → chunk-DH77PLFF.js}

@@ -2,12 +2,12 @@ import {
   ClearAllControl,
   CloseSearchControl
 } from "./chunk-BM4KKGL7.js";
-import {
-  PillControl
-} from "./chunk-VWJEM2ER.js";
 import {
   MoreFilters
-} from "./chunk-FTQBVZ7V.js";
+} from "./chunk-TJ3334AJ.js";
+import {
+  PillControl
+} from "./chunk-NPPJ3IJP.js";
 import {
   CollapsedSearch,
   InlineKeyword
@@ -220,4 +220,4 @@ function FilterSlots({
 export {
   InlineFilterControls
 };
-//# sourceMappingURL=chunk-UGPRBJWB.js.map
+//# sourceMappingURL=chunk-DH77PLFF.js.map

package/dist/chunk-GT2RCOHM.js

@@ -0,0 +1,184 @@
+// src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts
+var LANDED_SLACK = 1;
+var QUIET_BEFORE_SETTLED_MS = 250;
+var SCROLL_DELTA_EPSILON = 2;
+var POINTER_MOVE_EPSILON = 2;
+function horizontalDelta(event) {
+  if (!(event instanceof WheelEvent)) return 0;
+  return event.deltaX !== 0 ? event.deltaX : event.shiftKey ? event.deltaY : 0;
+}
+var cachedRtlScrollType;
+function detectRtlScrollType(doc) {
+  if (cachedRtlScrollType) return cachedRtlScrollType;
+  const probe = doc.createElement("div");
+  const inner = doc.createElement("div");
+  inner.style.width = "10px";
+  probe.appendChild(inner);
+  probe.dir = "rtl";
+  probe.style.width = "4px";
+  probe.style.position = "absolute";
+  probe.style.top = "-1000px";
+  probe.style.overflow = "scroll";
+  doc.body.appendChild(probe);
+  let type = "reverse";
+  if (probe.scrollLeft > 0) {
+    type = "default";
+  } else {
+    probe.scrollLeft = 1;
+    if (probe.scrollLeft === 0) type = "negative";
+  }
+  doc.body.removeChild(probe);
+  cachedRtlScrollType = type;
+  return type;
+}
+function isRtlStrip(strip) {
+  const view = strip.ownerDocument.defaultView;
+  const getComputedStyle = view?.getComputedStyle ?? globalThis.getComputedStyle;
+  return getComputedStyle(strip).direction === "rtl";
+}
+function physicalScrollLeft(strip) {
+  const raw = strip.scrollLeft;
+  if (!isRtlStrip(strip)) return raw;
+  const max = strip.scrollWidth - strip.clientWidth;
+  const type = detectRtlScrollType(strip.ownerDocument);
+  if (type === "negative") return raw + max;
+  if (type === "reverse") return max - raw;
+  return raw;
+}
+function toRawScrollLeft(strip, physical) {
+  if (!isRtlStrip(strip)) return physical;
+  const max = strip.scrollWidth - strip.clientWidth;
+  const type = detectRtlScrollType(strip.ownerDocument);
+  if (type === "negative") return physical - max;
+  if (type === "reverse") return max - physical;
+  return physical;
+}
+function restsOnAim(strip, aimed) {
+  const reachable = Math.min(aimed, strip.scrollWidth - strip.clientWidth);
+  return Math.abs(physicalScrollLeft(strip) - reachable) <= LANDED_SLACK;
+}
+function createGestureListeners(state) {
+  const onPointerDown = (event) => {
+    state.pointer = true;
+    state.pointerMoved = false;
+    state.pointerDownAt = event instanceof MouseEvent ? event.clientX : Number.NaN;
+  };
+  const onPointerMove = (event) => {
+    if (!(event instanceof MouseEvent) || Number.isNaN(state.pointerDownAt)) return;
+    if (Math.abs(event.clientX - state.pointerDownAt) > POINTER_MOVE_EPSILON) state.pointerMoved = true;
+  };
+  const onPointerUp = () => {
+    state.pointer = false;
+    state.pointerDownAt = Number.NaN;
+  };
+  const onTouchStart = (event) => {
+    state.touch = true;
+    state.touchMoved = false;
+    state.touchDownAt = event instanceof TouchEvent ? event.touches[0]?.clientX ?? Number.NaN : Number.NaN;
+  };
+  const onTouchMove = (event) => {
+    if (!(event instanceof TouchEvent) || Number.isNaN(state.touchDownAt)) return;
+    const clientX = event.touches[0]?.clientX;
+    if (clientX !== void 0 && Math.abs(clientX - state.touchDownAt) > POINTER_MOVE_EPSILON) {
+      state.touchMoved = true;
+    }
+  };
+  const onTouchEnd = () => {
+    state.touch = false;
+    state.touchDownAt = Number.NaN;
+  };
+  const onPointerCancel = () => {
+    state.nudged = true;
+    onPointerUp();
+  };
+  const onKeydown = () => {
+    state.nudged = true;
+  };
+  const onWheel = (event) => {
+    if (horizontalDelta(event) !== 0) state.nudged = true;
+  };
+  return {
+    onStrip: [
+      ["pointerdown", onPointerDown],
+      ["pointermove", onPointerMove],
+      ["touchstart", onTouchStart],
+      ["touchmove", onTouchMove],
+      ["pointercancel", onPointerCancel],
+      ["keydown", onKeydown],
+      ["wheel", onWheel]
+    ],
+    // A gesture can END off the strip, so its end is heard on the window.
+    onView: [
+      ["pointerup", onPointerUp],
+      ["pointercancel", onPointerUp],
+      ["touchend", onTouchEnd],
+      ["touchcancel", onTouchEnd]
+    ]
+  };
+}
+function watchVisitorScroll(strip) {
+  const view = strip.ownerDocument.defaultView;
+  const hasScrollEnd = "onscrollend" in strip;
+  const state = {
+    pointer: false,
+    touch: false,
+    nudged: false,
+    undecided: false,
+    scrolled: false,
+    aimed: Number.NaN,
+    quiet: void 0,
+    settled: () => void 0,
+    lastScrollLeft: physicalScrollLeft(strip),
+    pointerDownAt: Number.NaN,
+    pointerMoved: false,
+    touchDownAt: Number.NaN,
+    touchMoved: false
+  };
+  const settle = () => {
+    if (!state.undecided) return;
+    state.undecided = false;
+    state.nudged = false;
+    if (!restsOnAim(strip, state.aimed)) state.scrolled = true;
+    state.settled();
+  };
+  const onScroll = () => {
+    const now = physicalScrollLeft(strip);
+    const movedFarEnough = Math.abs(now - state.lastScrollLeft) > SCROLL_DELTA_EPSILON;
+    state.lastScrollLeft = now;
+    const pointerDrag = state.pointer && state.pointerMoved && movedFarEnough;
+    const touchDrag = state.touch && state.touchMoved && movedFarEnough;
+    if (pointerDrag || touchDrag || state.nudged) state.undecided = true;
+    if (!state.undecided || hasScrollEnd) return;
+    clearTimeout(state.quiet);
+    state.quiet = setTimeout(settle, QUIET_BEFORE_SETTLED_MS);
+  };
+  const gestures = createGestureListeners(state);
+  const onStrip = [...gestures.onStrip, ["scroll", onScroll], ["scrollend", settle]];
+  const onView = gestures.onView;
+  for (const [type, listener] of onStrip) strip.addEventListener(type, listener, { passive: true });
+  for (const [type, listener] of onView) view?.addEventListener(type, listener, { passive: true });
+  return {
+    hasScrolled: () => state.scrolled,
+    isUndecided: () => state.undecided,
+    aimedAt: () => state.aimed,
+    beforeOwnScroll: (left) => {
+      state.aimed = left;
+    },
+    onSettled: (listener) => {
+      state.settled = listener;
+    },
+    detach: () => {
+      clearTimeout(state.quiet);
+      for (const [type, listener] of onStrip) strip.removeEventListener(type, listener);
+      for (const [type, listener] of onView) view?.removeEventListener(type, listener);
+    }
+  };
+}
+
+export {
+  isRtlStrip,
+  physicalScrollLeft,
+  toRawScrollLeft,
+  watchVisitorScroll
+};
+//# sourceMappingURL=chunk-GT2RCOHM.js.map

package/dist/chunk-GT2RCOHM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts"],"sourcesContent":["/**\n * Telling the strip's own scrolls from the visitor's (FUT-2606).\n *\n * Split from `SettingsSectionChips.tsx` so the chips stay a component file and\n * the rule for \"who moved the strip\" can be read in one place.\n */\n\n/**\n * How near to where the strip aimed itself it has to come to rest for the scroll\n * to count as the strip's own. A smooth scroll lands on a device pixel, and the\n * target it was given is fractional.\n */\nconst LANDED_SLACK = 1;\n\n/**\n * Where `scrollend` is missing: how long the strip has to go without a `scroll`\n * before it counts as settled. Generous on purpose — a busy main thread can go\n * several frames between ticks of a smooth scroll, and judging one mid-flight\n * would read the strip's own animation as the visitor's. Too long only delays a\n * re-centre; too short can latch the strip for good.\n */\nconst QUIET_BEFORE_SETTLED_MS = 250;\n\n/**\n * How much `scrollLeft` has to move, tick to tick, before a `scroll` event is\n * even a CANDIDATE for arming (FUT-2775). Below this, a browser's own rounding\n * or a repeated event carrying no real motion cannot arm anything by itself.\n *\n * This alone does not stop the false latch the ticket describes: the strip's\n * own `scrollTo` produces real per-tick deltas well past this line, same as a\n * drag would. It only rules out a scroll event that moved nothing.\n */\nconst SCROLL_DELTA_EPSILON = 2;\n\n/**\n * How far a pointer or touch has to travel from where it went down before it\n * counts as having MOVED, rather than merely resting (FUT-2775). Below this,\n * an held-still finger's sub-pixel tremor does not count as a drag.\n */\nconst POINTER_MOVE_EPSILON = 2;\n\ninterface VisitorScrollWatch {\n  /** True once the visitor has moved the strip themselves. */\n  hasScrolled: () => boolean;\n  /**\n   * True while a scroll the visitor MAY be making has not come to rest yet. The\n   * strip must not scroll itself under it: that would yank a drag in progress.\n   */\n  isUndecided: () => boolean;\n  /**\n   * Where the strip last aimed itself, PHYSICAL pixels (see {@link physicalScrollLeft}) —\n   * direction-blind, like every other geometry read in this file. `NaN` before it has.\n   */\n  aimedAt: () => number;\n  /**\n   * The strip is about to scroll itself to `left` (physical pixels). Records the\n   * aim and NOTHING\n   * else: it used to disarm too, and a re-centre landing between a visitor's key\n   * press (or wheel, or pan) and the first tick of the scroll it causes wiped\n   * the arming — their scroll went unclaimed, read as the strip's own. Left\n   * armed, the worst a stale arming does is put the strip's OWN next scroll\n   * under judgement, which rests on its aim, is not latched, and disarms.\n   */\n  beforeOwnScroll: (left: number) => void;\n  /** Called once an undecided scroll has come to rest and been judged. */\n  onSettled: (listener: () => void) => void;\n  detach: () => void;\n}\n\ntype Listeners = Array<[string, (event: Event) => void]>;\n\n/** A wheel's sideways travel: `deltaX`, or `deltaY` with Shift held, as browsers read it. */\nfunction horizontalDelta(event: Event): number {\n  if (!(event instanceof WheelEvent)) return 0;\n  return event.deltaX !== 0 ? event.deltaX : event.shiftKey ? event.deltaY : 0;\n}\n\ninterface WatchState {\n  pointer: boolean;\n  touch: boolean;\n  nudged: boolean;\n  undecided: boolean;\n  scrolled: boolean;\n  aimed: number;\n  quiet: ReturnType<typeof setTimeout> | undefined;\n  settled: () => void;\n  /** `scrollLeft` as of the last `scroll` tick, updated every tick regardless of arming. */\n  lastScrollLeft: number;\n  /** Where a `pointerdown` on the strip landed, in viewport `clientX`. `NaN` while up. */\n  pointerDownAt: number;\n  /** True once that pointer has travelled past {@link POINTER_MOVE_EPSILON} from `pointerDownAt`. */\n  pointerMoved: boolean;\n  /** Same pair, for `touchstart`/`touchmove` — a distinct event stream on some engines. */\n  touchDownAt: number;\n  touchMoved: boolean;\n}\n\ntype RtlScrollType = 'default' | 'negative' | 'reverse';\n\nlet cachedRtlScrollType: RtlScrollType | undefined;\n\n/**\n * Which of the three incompatible conventions this engine reports an RTL\n * scroller's `scrollLeft` in, probed once and cached (FUT-2775).\n *\n * Per the CSSOM View spec, an RTL scroller's `scrollLeft` is `0` at its\n * (right-hand) start and goes NEGATIVE toward the end — `'negative'` below,\n * what every current evergreen engine implements. Older WebKit mirrored that\n * (`'reverse'`: `0` at the start, growing toward `+max`), and older\n * Chromium/Safari ignored `dir` altogether and kept the plain left-to-right\n * numbering (`'default'`). A hidden probe, not a version sniff, tells them\n * apart — the same technique `@mui/utils`'s `detectScrollType` uses for\n * `Tabs`; reimplemented here rather than taking a new dependency for one\n * probe.\n */\nfunction detectRtlScrollType(doc: Document): RtlScrollType {\n  if (cachedRtlScrollType) return cachedRtlScrollType;\n  // The exact pixel values below are the probe's mechanism, not a design size:\n  // what matters is only that the INNER box is wider than the OUTER one, so the\n  // outer one has something to scroll — same technique `@mui/utils` uses,\n  // detached and off-screen either way.\n  const probe = doc.createElement('div');\n  const inner = doc.createElement('div');\n  inner.style.width = '10px';\n  probe.appendChild(inner);\n  probe.dir = 'rtl';\n  probe.style.width = '4px';\n  probe.style.position = 'absolute';\n  probe.style.top = '-1000px';\n  probe.style.overflow = 'scroll';\n  doc.body.appendChild(probe);\n  let type: RtlScrollType = 'reverse';\n  if (probe.scrollLeft > 0) {\n    type = 'default';\n  } else {\n    probe.scrollLeft = 1;\n    if (probe.scrollLeft === 0) type = 'negative';\n  }\n  doc.body.removeChild(probe);\n  cachedRtlScrollType = type;\n  return type;\n}\n\n/** True when the strip's own computed direction is right-to-left. */\nexport function isRtlStrip(strip: HTMLElement): boolean {\n  const view = strip.ownerDocument.defaultView;\n  const getComputedStyle = view?.getComputedStyle ?? globalThis.getComputedStyle;\n  return getComputedStyle(strip).direction === 'rtl';\n}\n\n/**\n * `strip.scrollLeft`, renumbered so `0` is always the strip's physical LEFT\n * edge and larger is always further physically right — whatever `direction`\n * and whatever convention this engine uses to report it raw (FUT-2775).\n *\n * Every geometry read in this file (`getBoundingClientRect`) is already in\n * that same physical, direction-blind coordinate space, so this is what makes\n * `scrollLeft` combinable with it at all.\n */\nexport function physicalScrollLeft(strip: HTMLElement): number {\n  const raw = strip.scrollLeft;\n  if (!isRtlStrip(strip)) return raw;\n  const max = strip.scrollWidth - strip.clientWidth;\n  const type = detectRtlScrollType(strip.ownerDocument);\n  if (type === 'negative') return raw + max;\n  if (type === 'reverse') return max - raw;\n  return raw;\n}\n\n/** The inverse of {@link physicalScrollLeft}: a physical offset back to this engine's raw `scrollLeft`. */\nexport function toRawScrollLeft(strip: HTMLElement, physical: number): number {\n  if (!isRtlStrip(strip)) return physical;\n  const max = strip.scrollWidth - strip.clientWidth;\n  const type = detectRtlScrollType(strip.ownerDocument);\n  if (type === 'negative') return physical - max;\n  if (type === 'reverse') return max - physical;\n  return physical;\n}\n\n/** Whether the strip came to rest where it last aimed itself — clamped as the browser would. */\nfunction restsOnAim(strip: HTMLElement, aimed: number): boolean {\n  const reachable = Math.min(aimed, strip.scrollWidth - strip.clientWidth);\n  // Written so that `NaN` — the strip never aimed — reads as \"not on aim\".\n  return Math.abs(physicalScrollLeft(strip) - reachable) <= LANDED_SLACK;\n}\n\n/** The pointer/touch/keydown/wheel listeners that arm `state`, split out of `watchVisitorScroll` (line budget). */\nfunction createGestureListeners(state: WatchState): { onStrip: Listeners; onView: Listeners } {\n  // `MouseEvent`, not `PointerEvent`: a real `PointerEvent` IS one (it extends\n  // `MouseEvent`), so this reads `clientX` off it just the same in a browser —\n  // but jsdom (this file's own test environment) has never implemented\n  // `PointerEvent` at all, and the bare identifier throws a `ReferenceError`\n  // the moment anything evaluates `instanceof PointerEvent`, pointer event or\n  // not. Same reasoning as feature-checking `scrollTo` elsewhere in this file:\n  // nothing in here is worth a crash over which constructor a probe prefers.\n  const onPointerDown = (event: Event): void => {\n    state.pointer = true;\n    state.pointerMoved = false;\n    state.pointerDownAt = event instanceof MouseEvent ? event.clientX : Number.NaN;\n  };\n  const onPointerMove = (event: Event): void => {\n    if (!(event instanceof MouseEvent) || Number.isNaN(state.pointerDownAt)) return;\n    if (Math.abs(event.clientX - state.pointerDownAt) > POINTER_MOVE_EPSILON) state.pointerMoved = true;\n  };\n  const onPointerUp = (): void => {\n    state.pointer = false;\n    state.pointerDownAt = Number.NaN;\n  };\n  const onTouchStart = (event: Event): void => {\n    state.touch = true;\n    state.touchMoved = false;\n    state.touchDownAt = event instanceof TouchEvent ? (event.touches[0]?.clientX ?? Number.NaN) : Number.NaN;\n  };\n  const onTouchMove = (event: Event): void => {\n    if (!(event instanceof TouchEvent) || Number.isNaN(state.touchDownAt)) return;\n    const clientX = event.touches[0]?.clientX;\n    if (clientX !== undefined && Math.abs(clientX - state.touchDownAt) > POINTER_MOVE_EPSILON) {\n      state.touchMoved = true;\n    }\n  };\n  const onTouchEnd = (): void => {\n    state.touch = false;\n    state.touchDownAt = Number.NaN;\n  };\n  const onPointerCancel = (): void => {\n    state.nudged = true;\n    onPointerUp();\n  };\n  const onKeydown = (): void => {\n    state.nudged = true;\n  };\n  const onWheel = (event: Event): void => {\n    if (horizontalDelta(event) !== 0) state.nudged = true;\n  };\n  return {\n    onStrip: [\n      ['pointerdown', onPointerDown],\n      ['pointermove', onPointerMove],\n      ['touchstart', onTouchStart],\n      ['touchmove', onTouchMove],\n      ['pointercancel', onPointerCancel],\n      ['keydown', onKeydown],\n      ['wheel', onWheel],\n    ],\n    // A gesture can END off the strip, so its end is heard on the window.\n    onView: [\n      ['pointerup', onPointerUp],\n      ['pointercancel', onPointerUp],\n      ['touchend', onTouchEnd],\n      ['touchcancel', onTouchEnd],\n    ],\n  };\n}\n\n/**\n * Tell a scroll the VISITOR made from every other one.\n *\n * The `scroll` event cannot say: the strip's own `scrollTo` fires it, and so does\n * the browser clamping a strip whose content shrank. So a scroll is only a\n * CANDIDATE when it arrives during something only a visitor does:\n *\n * - a finger held on the strip (`touchstart` until `touchend`) — a drag;\n * - a pointer held on it (`pointerdown` until `pointerup`);\n * - a key press, a SIDEWAYS wheel, or the browser taking a pointer over to pan\n *   it (`pointercancel`), each armed until the next scroll under judgement has\n *   been judged — whoever's it turns out to be.\n *\n * and the verdict waits until the strip comes to REST (`scrollend`, or a quiet\n * spell where the browser has no `scrollend`): it is the visitor's only if the\n * strip rests somewhere other than where it last aimed itself.\n *\n * Judged at rest rather than per `scroll` because the strip's own smooth scroll\n * fires `scroll` for a third of a second, and a visitor who presses Tab or puts\n * a finger on a chip to scroll the PAGE in that window is not scrolling the\n * strip. Every tick of that animation used to count as theirs, the strip stopped\n * re-centring for good, and the open chip could be left clipped (FUT-2606\n * again, by another door). A visitor who really drags or wheels the strip\n * mid-animation cancels it, so the strip rests where THEY left it — and that\n * still counts. The one loss: a visitor who happens to leave it within a pixel\n * of the strip's own aim is not told apart from it, and the strip there is\n * already where it would have put itself.\n *\n * A tap is a pointer held with no scroll under it, so it never counts. A\n * vertical wheel scrolls the PAGE — the strip is `overflowY: hidden` — and is\n * not armed at all.\n */\nexport function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {\n  const view = strip.ownerDocument.defaultView;\n  const hasScrollEnd = 'onscrollend' in strip;\n  const state: WatchState = {\n    pointer: false,\n    touch: false,\n    nudged: false,\n    undecided: false,\n    scrolled: false,\n    aimed: Number.NaN,\n    quiet: undefined,\n    settled: () => undefined,\n    lastScrollLeft: physicalScrollLeft(strip),\n    pointerDownAt: Number.NaN,\n    pointerMoved: false,\n    touchDownAt: Number.NaN,\n    touchMoved: false,\n  };\n  const settle = (): void => {\n    // Only a scroll that was UNDER JUDGEMENT disarms. Chromium can end the\n    // strip's own smooth scroll with a `scrollend` when another scroll cuts it\n    // off, fired BEFORE that scroll's first `scroll` (seen with an instant one);\n    // disarming there would hand the visitor's scroll to nobody.\n    if (!state.undecided) return;\n    state.undecided = false;\n    state.nudged = false;\n    if (!restsOnAim(strip, state.aimed)) state.scrolled = true;\n    state.settled();\n  };\n  const onScroll = (): void => {\n    const now = physicalScrollLeft(strip);\n    const movedFarEnough = Math.abs(now - state.lastScrollLeft) > SCROLL_DELTA_EPSILON;\n    state.lastScrollLeft = now;\n    // Pointer/touch need BOTH signals (FUT-2775): the pointer/finger must have\n    // itself MOVED since going down, AND this tick's delta must be real. Either\n    // alone still latches on the other's shape — a pointer merely resting on\n    // the strip while its OWN `scrollTo` produces real per-tick deltas would\n    // arm under a delta-only check (`pointerMoved`/`touchMoved` rules that out);\n    // a pointer that drifts a sub-epsilon amount while resting would arm under\n    // a moved-only check with no delta floor (`movedFarEnough` rules that out).\n    const pointerDrag = state.pointer && state.pointerMoved && movedFarEnough;\n    const touchDrag = state.touch && state.touchMoved && movedFarEnough;\n    // `nudged` (a keypress, a sideways wheel, the browser taking the pointer\n    // over to pan) is already a discrete, one-shot gesture with no \"resting\n    // pointer coincides with an unrelated animation\" shape to rule out — unlike\n    // pointer/touch, requiring a delta on the SAME tick that arms it would only\n    // race the strip's own scroll ending before a qualifying tick arrives (seen:\n    // it broke the existing \"keeps a wheel/drag scroll\" stories against a real\n    // browser's `scrollend` timing). So it arms as it always has.\n    if (pointerDrag || touchDrag || state.nudged) state.undecided = true;\n    if (!state.undecided || hasScrollEnd) return;\n    // Every tick while undecided, armed or not: a quiet spell that began while\n    // the strip was still moving would judge it mid-flight, away from its aim.\n    clearTimeout(state.quiet);\n    state.quiet = setTimeout(settle, QUIET_BEFORE_SETTLED_MS);\n  };\n  const gestures = createGestureListeners(state);\n  const onStrip: Listeners = [...gestures.onStrip, ['scroll', onScroll], ['scrollend', settle]];\n  const onView = gestures.onView;\n  for (const [type, listener] of onStrip) strip.addEventListener(type, listener, { passive: true });\n  for (const [type, listener] of onView) view?.addEventListener(type, listener, { passive: true });\n  return {\n    hasScrolled: () => state.scrolled,\n    isUndecided: () => state.undecided,\n    aimedAt: () => state.aimed,\n    beforeOwnScroll: (left) => {\n      state.aimed = left;\n    },\n    onSettled: (listener) => {\n      state.settled = listener;\n    },\n    detach: () => {\n      clearTimeout(state.quiet);\n      for (const [type, listener] of onStrip) strip.removeEventListener(type, listener);\n      for (const [type, listener] of onView) view?.removeEventListener(type, listener);\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-EIII4QU4.js → chunk-HFVYWHJT.js}

@@ -1,13 +1,13 @@
 import {
   FilterDialog,
   GridFilterPanel
-} from "./chunk-Y2UXX5IQ.js";
+} from "./chunk-BKZERHNC.js";
 import {
   DataViewsEmpty
 } from "./chunk-3UEZ6NUI.js";
 import {
   InlineFilterControls
-} from "./chunk-UGPRBJWB.js";
+} from "./chunk-DH77PLFF.js";
 import {
   GridHeaderRow
 } from "./chunk-KW3H5FUS.js";
@@ -20,7 +20,7 @@ import {
 import {
   toOverflowFields,
   useFilterOverflow
-} from "./chunk-ODW2D5PN.js";
+} from "./chunk-6QYKZMEE.js";
 import {
   ScopeTabsSlot
 } from "./chunk-6N2EDWMG.js";
@@ -238,4 +238,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-EIII4QU4.js.map
+//# sourceMappingURL=chunk-HFVYWHJT.js.map

package/dist/{chunk-VEEG4UXZ.js → chunk-IUD6N52Q.js}

@@ -1,6 +1,6 @@
 import {
   useAutocomplete
-} from "./chunk-M4P7NS2L.js";
+} from "./chunk-BR2T72JI.js";
 import {
   AutocompleteInput,
   ChipList,
@@ -131,4 +131,4 @@ export {
   Autocomplete,
   Autocomplete_default
 };
-//# sourceMappingURL=chunk-VEEG4UXZ.js.map
+//# sourceMappingURL=chunk-IUD6N52Q.js.map

package/dist/{chunk-RZ2VZ7SL.js → chunk-JMEPGXJG.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-BXC6GRLE.js";
 import {
   SettingsPanel
-} from "./chunk-TCNTIGMY.js";
+} from "./chunk-TDXEO2UI.js";
 import {
   atLeastRail
 } from "./chunk-NYFNF7I5.js";
@@ -135,4 +135,4 @@ SettingsLayout.displayName = "SettingsLayout";
 export {
   SettingsLayout
 };
-//# sourceMappingURL=chunk-RZ2VZ7SL.js.map
+//# sourceMappingURL=chunk-JMEPGXJG.js.map

package/dist/{chunk-J6KLT7HP.js → chunk-MEBQKYH4.js}

@@ -1,6 +1,6 @@
 import {
   DataViewsGrid
-} from "./chunk-VOJBLBXE.js";
+} from "./chunk-UT73NGRS.js";
 import {
   DeleteViewDialog
 } from "./chunk-DH5UJD2I.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-J6KLT7HP.js.map
+//# sourceMappingURL=chunk-MEBQKYH4.js.map

package/dist/{chunk-XVZG52CM.js → chunk-NOLSQK4J.js}

@@ -1,3 +1,6 @@
+import {
+  PillControl
+} from "./chunk-NPPJ3IJP.js";
 import {
   RangeBounds
 } from "./chunk-44USLRMT.js";
@@ -7,9 +10,6 @@ import {
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
-import {
-  MultiSelectDropdown
-} from "./chunk-3XS37SQT.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -33,43 +33,41 @@ import {
 import Checkbox from "@mui/material/Checkbox/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var INLINE_OPTION_LIMIT = 2;
+function sharesBarControl(field) {
+  const pill = field.pill;
+  if (!pill) return false;
+  return pill.control === "category" || pill.control === "multiselect" || pill.searchEnabled === true || pill.options.length > INLINE_OPTION_LIMIT;
+}
 function OverflowPill({
   field,
   values,
-  onToggle,
+  onTogglePill,
   onClear,
   testIdPrefix
 }) {
-  const copy = useDataViewsCopy();
-  const options = field.pill?.options ?? [];
-  if (options.length > INLINE_OPTION_LIMIT) {
+  const testId = `${testIdPrefix}-more-${field.id}`;
+  if (field.pill && sharesBarControl(field)) {
     return /* @__PURE__ */ jsx(
-      MultiSelectDropdown,
+      PillControl,
       {
-        extraOptionsHeading: copy.filters.optionsHeading,
-        clearText: copy.filters.clear,
-        clearLabel: copy.filters.clearRange(field.label),
-        label: field.pill?.label ?? field.label,
-        options,
-        selected: new Set(values),
-        onToggle,
-        onClear,
-        allLabel: copy.filters.allOption,
-        searchable: options.length > 6 ? true : void 0,
-        searchPlaceholder: copy.filters.optionSearchPlaceholder,
-        noResultsLabel: copy.filters.optionsEmpty,
-        layout: "pill",
-        "data-testid": `${testIdPrefix}-more-${field.id}`
+        fieldId: field.id,
+        pill: field.pill,
+        selected: values,
+        onTogglePill,
+        onClearField: onClear,
+        testIdPrefix,
+        testId
       }
     );
   }
+  const onToggle = (value, checked) => onTogglePill(field.id, value, checked);
   return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: (field.pill?.options ?? []).map((option) => {
     const checked = values.includes(option.value);
     return /* @__PURE__ */ jsxs(
       default2,
       {
         component: "label",
-        "data-testid": `${testIdPrefix}-more-${field.id}-${option.value}`,
+        "data-testid": `${testId}-${option.value}`,
         sx: {
           display: "inline-flex",
           alignItems: "center",
@@ -181,7 +179,7 @@ function MoreGroup({
       {
         field,
         values: pills[field.id] ?? [],
-        onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+        onTogglePill,
         onClear: () => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false)),
         testIdPrefix
       }
@@ -201,4 +199,4 @@ export {
   fieldClearing,
   MoreGroup
 };
-//# sourceMappingURL=chunk-XVZG52CM.js.map
+//# sourceMappingURL=chunk-NOLSQK4J.js.map

package/dist/chunk-NOLSQK4J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-more-fields.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * ONE FIELD, RENDERED INSIDE THE \"MAIS\" PANEL.\n *\n * Split from `data-views-more-filters` at the file-size gate, along the seam\n * that was already there: that module is the trigger, the panel and its\n * footer — the chrome — and this is what goes in it.\n *\n * A field with one or two options renders FLAT: inside a panel there is no\n * space to win back, and two labelled checkboxes are faster than a dropdown\n * needing a second click. Past that — or whenever the field asks for a tree or\n * a search — it is the bar's own {@link PillControl}; see `sharesBarControl`.\n */\nimport Checkbox from \"@mui/material/Checkbox/index.js\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { PillControl } from \"./data-views-category-pill\";\nimport type { OverflowField } from \"./data-views-overflow\";\nimport { RangeBounds } from \"./data-views-range-pill\";\nimport { isRangeSet } from \"./data-views-range-values\";\nimport type { RangeValue } from \"./data-views-types\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { fieldRadiusPx } from \"../../../tokens/field-radius\";\nimport { fieldHeight } from \"../../../tokens/field-height\";\nimport { fieldEdge } from \"../../../tokens/field-edge\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/** What each field's control needs, minus the panel's own chrome. */\nexport interface MoreFieldProps {\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onChangeRange: (fieldId: string, range: RangeValue) => void;\n  testIdPrefix: string;\n}\n\n/**\n * Above this many options a field is a DROPDOWN rather than a flat row of\n * checkboxes. Two options cost two lines and read faster laid out; a \"Cliente\"\n * with a dozen turns the panel into a scrolling wall and buries every field\n * under it, which is exactly what the overflow was meant to avoid.\n */\nconst INLINE_OPTION_LIMIT = 2;\n\n/**\n * Whether an overflowed pill keeps the SAME control it has on the bar.\n *\n * The panel used to build its own flat dropdown for every field past two\n * options, so a field's config only held while it fitted: `control:\n * \"category\"` lost its tree (subcategories flattened into one list, no\n * \"Marcar tudo\", no count footer) and `searchEnabled` lost its search, on\n * exactly the phone widths where most filters live in here. Anything the bar\n * would render as a dropdown now renders as the bar's own {@link PillControl};\n * only a plain two-option field — one that did not ask for a dropdown, a tree\n * or a search — stays a flat checkbox row, which is a panel layout rather than\n * a different control (the filter panel draws the same line).\n */\nfunction sharesBarControl<T extends Record<string, unknown>>(field: OverflowField<T>): boolean {\n  const pill = field.pill;\n  if (!pill) return false;\n  return (\n    pill.control === \"category\" ||\n    pill.control === \"multiselect\" ||\n    pill.searchEnabled === true ||\n    pill.options.length > INLINE_OPTION_LIMIT\n  );\n}\n\n/** One overflowed pill: the bar's control, or its options as checkboxes. */\nfunction OverflowPill<T extends Record<string, unknown>>({\n  field,\n  values,\n  onTogglePill,\n  onClear,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n  values: string[];\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onClear: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const testId = `${testIdPrefix}-more-${field.id}`;\n  if (field.pill && sharesBarControl(field)) {\n    return (\n      <PillControl\n        fieldId={field.id}\n        pill={field.pill}\n        selected={values}\n        onTogglePill={onTogglePill}\n        onClearField={onClear}\n        testIdPrefix={testIdPrefix}\n        testId={testId}\n      />\n    );\n  }\n  const onToggle = (value: string, checked: boolean) => onTogglePill(field.id, value, checked);\n  return (\n    <Box sx={{ display: \"flex\", flexWrap: \"wrap\", gap: 0.75 }}>\n      {(field.pill?.options ?? []).map((option) => {\n        const checked = values.includes(option.value);\n        return (\n          <Box\n            key={option.value}\n            component=\"label\"\n            data-testid={`${testId}-${option.value}`}\n            sx={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: 0.25,\n              pr: 1,\n              border: 1,\n              borderStyle: \"solid\",\n              minHeight: fieldHeight,\n              borderColor: (theme) => (checked ? theme.palette.primary.main : fieldEdge(theme)),\n              bgcolor: checked ? \"action.selected\" : \"transparent\",\n              borderRadius: fieldRadiusPx,\n              cursor: \"pointer\",\n              fontSize: sxRem(13),\n              color: checked ? \"primary.main\" : \"text.secondary\",\n            }}\n          >\n            <Checkbox\n              size=\"small\"\n              checked={checked}\n              onChange={(event) => onToggle(option.value, event.target.checked)}\n              inputProps={{ \"aria-label\": `${field.label}: ${option.label}` }}\n            />\n            {option.label}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n\n/**\n * One overflowed range: its presets and its two bounds, as the same controls\n * the pill uses.\n *\n * The whole control DELEGATES to {@link RangeBounds} rather than being built\n * here, which is the point — this panel used to render a raw\n * `<input type=\"date\">`, so the masked `dd/mm/aaaa` field existed only while\n * the filter FITTED on the bar. The moment \"Data\" overflowed it reverted to the\n * native control the mask replaced, and a merchant on a narrow screen never saw\n * the fix at all (FUT-744). `Valor` had the twin bug: a bare `type=\"number\"`\n * plus `Number(raw)` dropped the decimal comma this panel is meant to accept.\n *\n * That also retires the intrinsic-width workaround this pair used to need — a\n * native date input reports a wide minimum (its own mask plus the picker\n * glyph), which is what made two of them refuse to shrink and scrolled the\n * panel sideways. A text input has no such minimum.\n *\n * `RangeBounds` renders the preset chips ITSELF, above the inputs. This panel\n * must NOT render its own row as well: when the delegation above landed, the\n * chips it used to draw by hand stayed behind, and \"Data\" showed Hoje/Ontem/\n * Esta semana/Este mês/Este ano twice — two rows, duplicated test ids, and half\n * the panel's height spent saying the same thing (FUT-751).\n */\nfunction OverflowRange<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testIdPrefix: string;\n}): React.JSX.Element | null {\n  // `group === \"range\"` is what selects this component, so `range` is always\n  // set; the guard is for the type, not for a state the caller can reach.\n  if (!field.range) return null;\n  return (\n    <RangeBounds\n      field={field.range}\n      value={value}\n      onChange={onChange}\n      testId={`${testIdPrefix}-more-${field.id}`}\n    />\n  );\n}\n\n/**\n * Whether a field has anything applied, and how to unapply it — the two shapes\n * (a pill's selected values, a range's bounds) answered in one place so the\n * group that renders them stays a renderer.\n */\nexport function fieldClearing<T extends Record<string, unknown>>({\n  field,\n  pills,\n  ranges,\n  onTogglePill,\n  onChangeRange,\n}: {\n  field: OverflowField<T>;\n} & Pick<MoreFieldProps, \"pills\" | \"ranges\" | \"onTogglePill\" | \"onChangeRange\">): {\n  applied: boolean;\n  clear: () => void;\n} {\n  if (field.group === \"range\") {\n    return {\n      applied: isRangeSet(ranges[field.id] ?? {}),\n      clear: () => onChangeRange(field.id, {}),\n    };\n  }\n  const values = pills[field.id] ?? [];\n  return {\n    applied: values.length > 0,\n    clear: () => values.forEach((value) => onTogglePill(field.id, value, false)),\n  };\n}\n\n\n/** One labelled group in the panel: the field's name, then its control. */\nexport function MoreGroup<T extends Record<string, unknown>>({\n  field,\n  pills,\n  ranges,\n  onTogglePill,\n  onChangeRange,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n} & MoreFieldProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });\n  return (\n    <Box sx={{ mb: 1.5, \"&:last-of-type\": { mb: 0 } }}>\n      <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1, mb: 0.5 }}>\n        <Text variant=\"caption\" as=\"span\">\n          <Box component=\"span\" sx={{ color: \"text.secondary\" }}>\n            {field.label}\n            {field.group === \"range\" && isRangeSet(ranges[field.id] ?? {}) ? \" •\" : \"\"}\n          </Box>\n        </Text>\n        {/* The panel's equivalent of the pill's ✕. Without it a field applied\n            in here could only be cleared by finding it again on the bar —\n            which is where it goes the moment it becomes active, so the\n            operator has to close this panel to undo what they just did. */}\n        {applied && (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            onClick={clear}\n            data-testid={`${testIdPrefix}-more-${field.id}-clear`}\n            sx={{\n              ml: \"auto\",\n              border: 0,\n              p: 0,\n              bgcolor: \"transparent\",\n              cursor: \"pointer\",\n              font: \"inherit\",\n              fontSize: sxRem(12),\n              color: \"primary.main\",\n              \"&:hover\": { textDecoration: \"underline\" },\n            }}\n          >\n            {copy.filters.clear}\n          </Box>\n        )}\n      </Box>\n      {field.group === \"pill\" ? (\n        <OverflowPill\n          field={field}\n          values={pills[field.id] ?? []}\n          onTogglePill={onTogglePill}\n          onClear={() => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false))}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : (\n        <OverflowRange\n          field={field}\n          value={ranges[field.id] ?? {}}\n          onChange={(range) => onChangeRange(field.id, range)}\n          testIdPrefix={testIdPrefix}\n        />\n      )}\n    </Box>\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-VWJEM2ER.js → chunk-NPPJ3IJP.js}

@@ -33,10 +33,10 @@ function PillControl({
   onClearField,
   onOpenChange,
   testIdPrefix,
+  testId = `${testIdPrefix}-filter-${fieldId}`,
   layout = "pill"
 }) {
   const copy = useDataViewsCopy();
-  const testId = `${testIdPrefix}-filter-${fieldId}`;
   if (pill.control === "category") {
     return /* @__PURE__ */ jsx(
       CategorySelect,
@@ -79,4 +79,4 @@ export {
   emitPillDiff,
   PillControl
 };
-//# sourceMappingURL=chunk-VWJEM2ER.js.map
+//# sourceMappingURL=chunk-NPPJ3IJP.js.map

package/dist/chunk-NPPJ3IJP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-category-pill.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { CategorySelect } from \"../../form/CategorySelect\";\nimport { MultiSelectDropdown } from \"../../layout/ContentToolbar\";\n\nimport type { FilterFieldConfig, FilterOption } from \"./data-views-types\";\n\n/**\n * Diff a whole-array selection back into per-value toggles.\n *\n * The filter state's only channel is `onTogglePill(field, value, checked)`, but\n * a tree hands back the entire selection at once. Diffing here keeps that one\n * channel the single way a pill ever changes, rather than giving the\n * hierarchical control a private path into the state.\n */\nexport function emitPillDiff(\n  fieldId: string,\n  before: readonly string[],\n  after: readonly string[],\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void,\n): void {\n  const had = new Set(before);\n  const wants = new Set(after);\n  after.forEach((value) => {\n    if (!had.has(value)) onTogglePill(fieldId, value, true);\n  });\n  before.forEach((value) => {\n    if (!wants.has(value)) onTogglePill(fieldId, value, false);\n  });\n}\n\n/** A filter option as the category tree wants it. */\nconst toCategoryOption = (option: FilterOption) => ({\n  id: option.value,\n  name: option.label,\n  parentId: option.parentId ?? null,\n});\n\ninterface PillControlProps<T extends Record<string, unknown>> {\n  fieldId: string;\n  pill: FilterFieldConfig<T>;\n  selected: string[];\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onClearField: (fieldId: string) => void;\n  onOpenChange?: (open: boolean) => void;\n  testIdPrefix: string;\n  /**\n   * Overrides the `<prefix>-filter-<id>` test id — the \"Mais\" panel keys its\n   * fields `<prefix>-more-<id>` so a spec can tell which surface it drove.\n   */\n  testId?: string;\n  /** `stacked` in the filter panel, `pill` on the inline bar. */\n  layout?: \"stacked\" | \"pill\";\n}\n\n/**\n * One filter pill: the hierarchical category tree, or the flat multi-select.\n *\n * A category set nests, and flattening it into one list is what made \"Massas\"\n * (mercearia) indistinguishable from \"Massas\" (pratos principais). `control:\n * \"category\"` opts a field into the tree, which shows each hit under its parent.\n *\n * {@link FilterFieldConfig.allowParentSelection} decides whether a parent row is\n * itself tickable. It is forwarded rather than fixed here because it is a\n * per-SCREEN question: a filter over a catalogue where products sit on leaves\n * wants \"the whole category\" as one click, while one whose parents are pure\n * grouping would only offer a tick that means nothing.\n */\nexport function PillControl<T extends Record<string, unknown>>({\n  fieldId,\n  pill,\n  selected,\n  onTogglePill,\n  onClearField,\n  onOpenChange,\n  testIdPrefix,\n  testId = `${testIdPrefix}-filter-${fieldId}`,\n  layout = \"pill\",\n}: PillControlProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  if (pill.control === \"category\") {\n    return (\n      <CategorySelect\n        copy={copy.categorySelect}\n        placeholder={pill.label}\n        label={layout === \"stacked\" ? pill.label : undefined}\n        fullWidth={layout === \"stacked\"}\n        options={pill.options.map(toCategoryOption)}\n        allowParentSelection={pill.allowParentSelection ?? false}\n        value={selected}\n        onChange={(next) => emitPillDiff(fieldId, selected, next, onTogglePill)}\n        dataTestId={testId}\n      />\n    );\n  }\n  return (\n    <MultiSelectDropdown\n      extraOptionsHeading={copy.filters.optionsHeading}\n      clearText={copy.filters.clear}\n      clearLabel={copy.filters.clearRange(pill.label)}\n      label={pill.label}\n      options={pill.options}\n      selected={new Set(selected)}\n      onToggle={(value, checked) => onTogglePill(fieldId, value, checked)}\n      onClear={() => onClearField(fieldId)}\n      allLabel={copy.filters.allOption}\n      searchable={pill.searchEnabled ? true : undefined}\n      searchPlaceholder={copy.filters.optionSearchPlaceholder}\n      noResultsLabel={copy.filters.optionsEmpty}\n      layout={layout}\n      onOpenChange={onOpenChange}\n      data-testid={testId}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAmFM;AAnEC,SAAS,aACd,SACA,QACA,OACA,cACM;AACN,QAAM,MAAM,IAAI,IAAI,MAAM;AAC1B,QAAM,QAAQ,IAAI,IAAI,KAAK;AAC3B,QAAM,QAAQ,CAAC,UAAU;AACvB,QAAI,CAAC,IAAI,IAAI,KAAK,EAAG,cAAa,SAAS,OAAO,IAAI;AAAA,EACxD,CAAC;AACD,SAAO,QAAQ,CAAC,UAAU;AACxB,QAAI,CAAC,MAAM,IAAI,KAAK,EAAG,cAAa,SAAS,OAAO,KAAK;AAAA,EAC3D,CAAC;AACH;AAGA,IAAM,mBAAmB,CAAC,YAA0B;AAAA,EAClD,IAAI,OAAO;AAAA,EACX,MAAM,OAAO;AAAA,EACb,UAAU,OAAO,YAAY;AAC/B;AAgCO,SAAS,YAA+C;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,GAAG,YAAY,WAAW,OAAO;AAAA,EAC1C,SAAS;AACX,GAA2C;AACzC,QAAM,OAAO,iBAAiB;AAC9B,MAAI,KAAK,YAAY,YAAY;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX,aAAa,KAAK;AAAA,QAClB,OAAO,WAAW,YAAY,KAAK,QAAQ;AAAA,QAC3C,WAAW,WAAW;AAAA,QACtB,SAAS,KAAK,QAAQ,IAAI,gBAAgB;AAAA,QAC1C,sBAAsB,KAAK,wBAAwB;AAAA,QACnD,OAAO;AAAA,QACP,UAAU,CAAC,SAAS,aAAa,SAAS,UAAU,MAAM,YAAY;AAAA,QACtE,YAAY;AAAA;AAAA,IACd;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,qBAAqB,KAAK,QAAQ;AAAA,MAClC,WAAW,KAAK,QAAQ;AAAA,MACxB,YAAY,KAAK,QAAQ,WAAW,KAAK,KAAK;AAAA,MAC9C,OAAO,KAAK;AAAA,MACZ,SAAS,KAAK;AAAA,MACd,UAAU,IAAI,IAAI,QAAQ;AAAA,MAC1B,UAAU,CAAC,OAAO,YAAY,aAAa,SAAS,OAAO,OAAO;AAAA,MAClE,SAAS,MAAM,aAAa,OAAO;AAAA,MACnC,UAAU,KAAK,QAAQ;AAAA,MACvB,YAAY,KAAK,gBAAgB,OAAO;AAAA,MACxC,mBAAmB,KAAK,QAAQ;AAAA,MAChC,gBAAgB,KAAK,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/{chunk-CKHFYTIX.js → chunk-TBMGYQJF.js}

@@ -5,8 +5,10 @@ import {
   TOUCH_TARGET
 } from "./chunk-NYFNF7I5.js";
 import {
+  physicalScrollLeft,
+  toRawScrollLeft,
   watchVisitorScroll
-} from "./chunk-SLJAQA2X.js";
+} from "./chunk-GT2RCOHM.js";
 import {
   rem,
   sxRem
@@ -25,7 +27,7 @@ function prefersReducedMotion() {
 function centredScrollLeft(strip, chip) {
   const chipBox = chip.getBoundingClientRect();
   const visibleStart = strip.getBoundingClientRect().left + strip.clientLeft;
-  const chipCentre = chipBox.left - visibleStart + strip.scrollLeft + chipBox.width / 2;
+  const chipCentre = chipBox.left - visibleStart + physicalScrollLeft(strip) + chipBox.width / 2;
   const target = chipCentre - strip.clientWidth / 2;
   return Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
 }
@@ -46,7 +48,7 @@ function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
       const left = centredScrollLeft(strip, chip);
       if (Math.abs(left - visitor.aimedAt()) < 0.5) return;
       visitor.beforeOwnScroll(left);
-      strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+      strip.scrollTo({ left: toRawScrollLeft(strip, left), behavior: prefersReducedMotion() ? "auto" : "smooth" });
     };
     visitor.onSettled(centre);
     centre();
@@ -149,7 +151,15 @@ function SettingsSectionChips({
         display: "flex",
         alignItems: "center",
         gap: 0.75,
-        px: 0.25,
+        // The start side keeps its old, symmetric 0.25 — nothing sits flush
+        // against it once scrolled. The END side is where a scrolled-to-end
+        // chip's own border used to sit almost against the clip boundary
+        // (FUT-2775): sized like the gap BETWEEN chips (`gap` above) rather
+        // than invented fresh, so the last chip clears the edge by the same
+        // margin any two chips clear each other. Logical, not `pr`: the side
+        // that gets clipped is the strip's END, whichever edge that is.
+        paddingInlineStart: 0.25,
+        paddingInlineEnd: 0.75,
         py: 0.25,
         overflowX: "auto",
         overflowY: "hidden",
@@ -176,4 +186,4 @@ SettingsSectionChips.displayName = "SettingsSectionChips";
 export {
   SettingsSectionChips
 };
-//# sourceMappingURL=chunk-CKHFYTIX.js.map
+//# sourceMappingURL=chunk-TBMGYQJF.js.map

package/dist/chunk-TBMGYQJF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { physicalScrollLeft, toRawScrollLeft, watchVisitorScroll } from './SettingsSectionChips.scroll';\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = sxRem(34);\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Where the strip has to scroll for `chip`'s centre to sit on its own, clamped\n * to what the strip can scroll.\n *\n * Measured from the two boxes rather than from `chip.offsetLeft`. `offsetLeft`\n * counts from the nearest POSITIONED ancestor, and the strip is not one — nor\n * are the panel and layout around it — so it counted from whatever box the host\n * happened to position, and every target overshot by the strip's offset inside\n * it. The clamp hid that for the last chip; a middle one was simply off-centre.\n * The boxes are both in viewport coordinates, so their difference is the strip's\n * own, whatever the host wraps it in.\n *\n * Read and returned in PHYSICAL pixels (`physicalScrollLeft`, FUT-2775): the\n * bounding-rect arithmetic above is already direction-blind, and an RTL\n * scroller's raw `scrollLeft` is not — the CSSOM View spec has it `0` at the\n * strip's right-hand start and NEGATIVE past it, not `0`-to-`scrollWidth` like\n * an LTR one. `Math.max(0, …)` alone, against that raw value, would clamp every\n * legitimate RTL target straight back to the start. Physical throughout keeps\n * this comparable to {@link VisitorScrollWatch.aimedAt}; the caller converts to\n * this engine's raw `scrollLeft` (`toRawScrollLeft`) only at the `scrollTo` call.\n */\nfunction centredScrollLeft(strip: HTMLElement, chip: HTMLElement): number {\n  const chipBox = chip.getBoundingClientRect();\n  const visibleStart = strip.getBoundingClientRect().left + strip.clientLeft;\n  const chipCentre = chipBox.left - visibleStart + physicalScrollLeft(strip) + chipBox.width / 2;\n  const target = chipCentre - strip.clientWidth / 2;\n  return Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n}\n\n/** The chip for `id`, walked rather than selected. */\nfunction findChip(strip: HTMLElement, id: string): HTMLElement | undefined {\n  // An id is host data, and a section id carrying a quote would turn a selector\n  // string into a thrown SyntaxError — which here would take the whole strip\n  // down to centre one chip.\n  return Array.from(strip.children).find(\n    (node): node is HTMLElement => node instanceof HTMLElement && node.dataset.chipId === id,\n  );\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here — and\n * however the strip's content settles after it mounted.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * Centring ONCE is not enough (FUT-2606). A host can widen a chip after mount\n * with the ids unchanged — a status marker whose read resolves late, a web font\n * arriving — and a strip that fitted at mount then overflows with its last chip\n * clipped, because the one centring saw nothing to scroll. So the strip and\n * every chip are watched with a `ResizeObserver`, and a resize re-aims at the\n * active chip when its target has moved.\n *\n * Never against the visitor, though: once they have scrolled the strip\n * themselves, it is theirs until the open section changes\n * ({@link watchVisitorScroll}, which also says why the strip's OWN smooth scroll\n * never counts as theirs). A strip that yanks back mid-drag because a\n * marker loaded is worse than one that does not centre.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and reset the visitor's latch with it.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return undefined;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return undefined;\n    const visitor = watchVisitorScroll(strip);\n    const centre = (): void => {\n      const chip = findChip(strip, activeItemId);\n      // Not while a scroll that may be the visitor's is still moving: a resize\n      // mid-drag must not yank the strip. It is re-tried once that scroll rests.\n      if (!chip || visitor.hasScrolled() || visitor.isUndecided()) return;\n      // Physical pixels throughout (FUT-2775) — comparable to `aimedAt()` and to\n      // what `beforeOwnScroll` records; converted to this engine's raw\n      // `scrollLeft` only for the actual `scrollTo` call below.\n      const left = centredScrollLeft(strip, chip);\n      // Only when the target MOVED: a resize that leaves it where it was must not\n      // restart a smooth scroll that is already on its way there. The aim is a\n      // runtime-computed scroll offset, like the exempt `left` below — not a size.\n      if (Math.abs(left - visitor.aimedAt()) < 0.5) return;\n      visitor.beforeOwnScroll(left);\n      strip.scrollTo({ left: toRawScrollLeft(strip, left), behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n    };\n    visitor.onSettled(centre);\n    centre();\n    // Also feature-checked: without it the strip still centres once, as before.\n    const resizes = typeof ResizeObserver === 'function' ? new ResizeObserver(centre) : undefined;\n    resizes?.observe(strip);\n    for (const child of Array.from(strip.children)) resizes?.observe(child);\n    return () => {\n      resizes?.disconnect();\n      visitor.detach();\n    };\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: rem(theme, 13),\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: rem(theme, TOUCH_TARGET),\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        // The start side keeps its old, symmetric 0.25 — nothing sits flush\n        // against it once scrolled. The END side is where a scrolled-to-end\n        // chip's own border used to sit almost against the clip boundary\n        // (FUT-2775): sized like the gap BETWEEN chips (`gap` above) rather\n        // than invented fresh, so the last chip clears the edge by the same\n        // margin any two chips clear each other. Logical, not `pr`: the side\n        // that gets clipped is the strip's END, whichever edge that is.\n        paddingInlineStart: 0.25,\n        paddingInlineEnd: 0.75,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}