@12-apps/ui 6.41.1 → 6.41.2

package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   SettingsLayout
-} from "../../../../chunk-RZ2VZ7SL.js";
+} from "../../../../chunk-JMEPGXJG.js";
 import "../../../../chunk-TNYKM4UU.js";
 import "../../../../chunk-V5EWCJBT.js";
 import "../../../../chunk-BXC6GRLE.js";
-import "../../../../chunk-TCNTIGMY.js";
+import "../../../../chunk-TDXEO2UI.js";
 import "../../../../chunk-6KEXHOIF.js";
-import "../../../../chunk-CKHFYTIX.js";
+import "../../../../chunk-TBMGYQJF.js";
 import "../../../../chunk-DBFRCTI5.js";
 import "../../../../chunk-NYFNF7I5.js";
-import "../../../../chunk-SLJAQA2X.js";
+import "../../../../chunk-GT2RCOHM.js";
 import "../../../../chunk-HPK33ACY.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";

package/dist/_internal/components/layout/SettingsLayout/SettingsPanel.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   SettingsPanel
-} from "../../../../chunk-TCNTIGMY.js";
+} from "../../../../chunk-TDXEO2UI.js";
 import "../../../../chunk-6KEXHOIF.js";
-import "../../../../chunk-CKHFYTIX.js";
+import "../../../../chunk-TBMGYQJF.js";
 import "../../../../chunk-DBFRCTI5.js";
 import "../../../../chunk-NYFNF7I5.js";
-import "../../../../chunk-SLJAQA2X.js";
+import "../../../../chunk-GT2RCOHM.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/layout/SettingsLayout/SettingsSectionChips.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   SettingsSectionChips
-} from "../../../../chunk-CKHFYTIX.js";
+} from "../../../../chunk-TBMGYQJF.js";
 import "../../../../chunk-DBFRCTI5.js";
 import "../../../../chunk-NYFNF7I5.js";
-import "../../../../chunk-SLJAQA2X.js";
+import "../../../../chunk-GT2RCOHM.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/layout/SettingsLayout/SettingsSectionChips.scroll.js

@@ -1,8 +1,14 @@
 import {
+  isRtlStrip,
+  physicalScrollLeft,
+  toRawScrollLeft,
   watchVisitorScroll
-} from "../../../../chunk-SLJAQA2X.js";
+} from "../../../../chunk-GT2RCOHM.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
+  isRtlStrip,
+  physicalScrollLeft,
+  toRawScrollLeft,
   watchVisitorScroll
 };
 //# sourceMappingURL=SettingsSectionChips.scroll.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-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-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":[]}

package/dist/{chunk-TCNTIGMY.js → chunk-TDXEO2UI.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6KEXHOIF.js";
 import {
   SettingsSectionChips
-} from "./chunk-CKHFYTIX.js";
+} from "./chunk-TBMGYQJF.js";
 import {
   TOUCH_TARGET,
   atLeastRail,
@@ -167,4 +167,4 @@ function SettingsPanel({
 export {
   SettingsPanel
 };
-//# sourceMappingURL=chunk-TCNTIGMY.js.map
+//# sourceMappingURL=chunk-TDXEO2UI.js.map

package/dist/layout/SettingsLayout.js

@@ -1,19 +1,19 @@
 import {
   SettingsLayout
-} from "../chunk-RZ2VZ7SL.js";
+} from "../chunk-JMEPGXJG.js";
 import "../chunk-TNYKM4UU.js";
 import "../chunk-V5EWCJBT.js";
 import "../chunk-BXC6GRLE.js";
-import "../chunk-TCNTIGMY.js";
+import "../chunk-TDXEO2UI.js";
 import "../chunk-6KEXHOIF.js";
 import {
   SettingsSectionChips
-} from "../chunk-CKHFYTIX.js";
+} from "../chunk-TBMGYQJF.js";
 import {
   SettingsStatusMarker
 } from "../chunk-DBFRCTI5.js";
 import "../chunk-NYFNF7I5.js";
-import "../chunk-SLJAQA2X.js";
+import "../chunk-GT2RCOHM.js";
 import "../chunk-HPK33ACY.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";

package/dist/types/components/layout/SettingsLayout/SettingsSectionChips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsSectionChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAejE,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEnF,MAAM,WAAW,yBAAyB;IACxC,yEAAyE;IACzE,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC;CACtB;AA+LD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,YAAY,EACZ,SAAS,EACT,aAAa,EACb,YAAY,EACZ,YAAY,GACb,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoC/C;yBA3Ce,oBAAoB"}
+{"version":3,"file":"SettingsSectionChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAejE,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEnF,MAAM,WAAW,yBAAyB;IACxC,yEAAyE;IACzE,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC;CACtB;AA2MD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,YAAY,EACZ,SAAS,EACT,aAAa,EACb,YAAY,EACZ,YAAY,GACb,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4C/C;yBAnDe,oBAAoB"}

package/dist/types/components/layout/SettingsLayout/SettingsSectionChips.scroll.d.ts

@@ -12,10 +12,14 @@ interface VisitorScrollWatch {
      * strip must not scroll itself under it: that would yank a drag in progress.
      */
     isUndecided: () => boolean;
-    /** Where the strip last aimed itself, in its own pixels; `NaN` before it has. */
+    /**
+     * Where the strip last aimed itself, PHYSICAL pixels (see {@link physicalScrollLeft}) —
+     * direction-blind, like every other geometry read in this file. `NaN` before it has.
+     */
     aimedAt: () => number;
     /**
-     * The strip is about to scroll itself to `left`. Records the aim and NOTHING
+     * The strip is about to scroll itself to `left` (physical pixels). Records the
+     * aim and NOTHING
      * else: it used to disarm too, and a re-centre landing between a visitor's key
      * press (or wheel, or pan) and the first tick of the scroll it causes wiped
      * the arming — their scroll went unclaimed, read as the strip's own. Left
@@ -27,6 +31,20 @@ interface VisitorScrollWatch {
     onSettled: (listener: () => void) => void;
     detach: () => void;
 }
+/** True when the strip's own computed direction is right-to-left. */
+export declare function isRtlStrip(strip: HTMLElement): boolean;
+/**
+ * `strip.scrollLeft`, renumbered so `0` is always the strip's physical LEFT
+ * edge and larger is always further physically right — whatever `direction`
+ * and whatever convention this engine uses to report it raw (FUT-2775).
+ *
+ * Every geometry read in this file (`getBoundingClientRect`) is already in
+ * that same physical, direction-blind coordinate space, so this is what makes
+ * `scrollLeft` combinable with it at all.
+ */
+export declare function physicalScrollLeft(strip: HTMLElement): number;
+/** The inverse of {@link physicalScrollLeft}: a physical offset back to this engine's raw `scrollLeft`. */
+export declare function toRawScrollLeft(strip: HTMLElement, physical: number): number;
 /**
  * Tell a scroll the VISITOR made from every other one.
  *

package/dist/types/components/layout/SettingsLayout/SettingsSectionChips.scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsSectionChips.scroll.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAkBH,UAAU,kBAAkB;IAC1B,4DAA4D;IAC5D,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B;;;OAGG;IACH,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,iFAAiF;IACjF,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB;;;;;;;OAOG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wEAAwE;IACxE,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,kBAAkB,CA0EzE"}
+{"version":3,"file":"SettingsSectionChips.scroll.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAoCH,UAAU,kBAAkB;IAC1B,4DAA4D;IAC5D,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B;;;OAGG;IACH,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB;;;;;;;;OAQG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wEAAwE;IACxE,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AA4ED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAItD;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAQ7D;AAED,2GAA2G;AAC3G,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAO5E;AA6ED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,kBAAkB,CA6EzE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.41.1",
+  "version": "6.41.2",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts

@@ -21,6 +21,24 @@ const LANDED_SLACK = 1;
  */
 const QUIET_BEFORE_SETTLED_MS = 250;
 
+/**
+ * How much `scrollLeft` has to move, tick to tick, before a `scroll` event is
+ * even a CANDIDATE for arming (FUT-2775). Below this, a browser's own rounding
+ * or a repeated event carrying no real motion cannot arm anything by itself.
+ *
+ * This alone does not stop the false latch the ticket describes: the strip's
+ * own `scrollTo` produces real per-tick deltas well past this line, same as a
+ * drag would. It only rules out a scroll event that moved nothing.
+ */
+const SCROLL_DELTA_EPSILON = 2;
+
+/**
+ * How far a pointer or touch has to travel from where it went down before it
+ * counts as having MOVED, rather than merely resting (FUT-2775). Below this,
+ * an held-still finger's sub-pixel tremor does not count as a drag.
+ */
+const POINTER_MOVE_EPSILON = 2;
+
 interface VisitorScrollWatch {
   /** True once the visitor has moved the strip themselves. */
   hasScrolled: () => boolean;
@@ -29,10 +47,14 @@ interface VisitorScrollWatch {
    * strip must not scroll itself under it: that would yank a drag in progress.
    */
   isUndecided: () => boolean;
-  /** Where the strip last aimed itself, in its own pixels; `NaN` before it has. */
+  /**
+   * Where the strip last aimed itself, PHYSICAL pixels (see {@link physicalScrollLeft}) —
+   * direction-blind, like every other geometry read in this file. `NaN` before it has.
+   */
   aimedAt: () => number;
   /**
-   * The strip is about to scroll itself to `left`. Records the aim and NOTHING
+   * The strip is about to scroll itself to `left` (physical pixels). Records the
+   * aim and NOTHING
    * else: it used to disarm too, and a re-centre landing between a visitor's key
    * press (or wheel, or pan) and the first tick of the scroll it causes wiped
    * the arming — their scroll went unclaimed, read as the strip's own. Left
@@ -62,13 +84,172 @@ interface WatchState {
   aimed: number;
   quiet: ReturnType<typeof setTimeout> | undefined;
   settled: () => void;
+  /** `scrollLeft` as of the last `scroll` tick, updated every tick regardless of arming. */
+  lastScrollLeft: number;
+  /** Where a `pointerdown` on the strip landed, in viewport `clientX`. `NaN` while up. */
+  pointerDownAt: number;
+  /** True once that pointer has travelled past {@link POINTER_MOVE_EPSILON} from `pointerDownAt`. */
+  pointerMoved: boolean;
+  /** Same pair, for `touchstart`/`touchmove` — a distinct event stream on some engines. */
+  touchDownAt: number;
+  touchMoved: boolean;
+}
+
+type RtlScrollType = 'default' | 'negative' | 'reverse';
+
+let cachedRtlScrollType: RtlScrollType | undefined;
+
+/**
+ * Which of the three incompatible conventions this engine reports an RTL
+ * scroller's `scrollLeft` in, probed once and cached (FUT-2775).
+ *
+ * Per the CSSOM View spec, an RTL scroller's `scrollLeft` is `0` at its
+ * (right-hand) start and goes NEGATIVE toward the end — `'negative'` below,
+ * what every current evergreen engine implements. Older WebKit mirrored that
+ * (`'reverse'`: `0` at the start, growing toward `+max`), and older
+ * Chromium/Safari ignored `dir` altogether and kept the plain left-to-right
+ * numbering (`'default'`). A hidden probe, not a version sniff, tells them
+ * apart — the same technique `@mui/utils`'s `detectScrollType` uses for
+ * `Tabs`; reimplemented here rather than taking a new dependency for one
+ * probe.
+ */
+function detectRtlScrollType(doc: Document): RtlScrollType {
+  if (cachedRtlScrollType) return cachedRtlScrollType;
+  // The exact pixel values below are the probe's mechanism, not a design size:
+  // what matters is only that the INNER box is wider than the OUTER one, so the
+  // outer one has something to scroll — same technique `@mui/utils` uses,
+  // detached and off-screen either way.
+  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: RtlScrollType = '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;
+}
+
+/** True when the strip's own computed direction is right-to-left. */
+export function isRtlStrip(strip: HTMLElement): boolean {
+  const view = strip.ownerDocument.defaultView;
+  const getComputedStyle = view?.getComputedStyle ?? globalThis.getComputedStyle;
+  return getComputedStyle(strip).direction === 'rtl';
+}
+
+/**
+ * `strip.scrollLeft`, renumbered so `0` is always the strip's physical LEFT
+ * edge and larger is always further physically right — whatever `direction`
+ * and whatever convention this engine uses to report it raw (FUT-2775).
+ *
+ * Every geometry read in this file (`getBoundingClientRect`) is already in
+ * that same physical, direction-blind coordinate space, so this is what makes
+ * `scrollLeft` combinable with it at all.
+ */
+export function physicalScrollLeft(strip: HTMLElement): number {
+  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;
+}
+
+/** The inverse of {@link physicalScrollLeft}: a physical offset back to this engine's raw `scrollLeft`. */
+export function toRawScrollLeft(strip: HTMLElement, physical: number): number {
+  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;
 }
 
 /** Whether the strip came to rest where it last aimed itself — clamped as the browser would. */
 function restsOnAim(strip: HTMLElement, aimed: number): boolean {
   const reachable = Math.min(aimed, strip.scrollWidth - strip.clientWidth);
   // Written so that `NaN` — the strip never aimed — reads as "not on aim".
-  return Math.abs(strip.scrollLeft - reachable) <= LANDED_SLACK;
+  return Math.abs(physicalScrollLeft(strip) - reachable) <= LANDED_SLACK;
+}
+
+/** The pointer/touch/keydown/wheel listeners that arm `state`, split out of `watchVisitorScroll` (line budget). */
+function createGestureListeners(state: WatchState): { onStrip: Listeners; onView: Listeners } {
+  // `MouseEvent`, not `PointerEvent`: a real `PointerEvent` IS one (it extends
+  // `MouseEvent`), so this reads `clientX` off it just the same in a browser —
+  // but jsdom (this file's own test environment) has never implemented
+  // `PointerEvent` at all, and the bare identifier throws a `ReferenceError`
+  // the moment anything evaluates `instanceof PointerEvent`, pointer event or
+  // not. Same reasoning as feature-checking `scrollTo` elsewhere in this file:
+  // nothing in here is worth a crash over which constructor a probe prefers.
+  const onPointerDown = (event: Event): void => {
+    state.pointer = true;
+    state.pointerMoved = false;
+    state.pointerDownAt = event instanceof MouseEvent ? event.clientX : Number.NaN;
+  };
+  const onPointerMove = (event: Event): void => {
+    if (!(event instanceof MouseEvent) || Number.isNaN(state.pointerDownAt)) return;
+    if (Math.abs(event.clientX - state.pointerDownAt) > POINTER_MOVE_EPSILON) state.pointerMoved = true;
+  };
+  const onPointerUp = (): void => {
+    state.pointer = false;
+    state.pointerDownAt = Number.NaN;
+  };
+  const onTouchStart = (event: Event): void => {
+    state.touch = true;
+    state.touchMoved = false;
+    state.touchDownAt = event instanceof TouchEvent ? (event.touches[0]?.clientX ?? Number.NaN) : Number.NaN;
+  };
+  const onTouchMove = (event: Event): void => {
+    if (!(event instanceof TouchEvent) || Number.isNaN(state.touchDownAt)) return;
+    const clientX = event.touches[0]?.clientX;
+    if (clientX !== undefined && Math.abs(clientX - state.touchDownAt) > POINTER_MOVE_EPSILON) {
+      state.touchMoved = true;
+    }
+  };
+  const onTouchEnd = (): void => {
+    state.touch = false;
+    state.touchDownAt = Number.NaN;
+  };
+  const onPointerCancel = (): void => {
+    state.nudged = true;
+    onPointerUp();
+  };
+  const onKeydown = (): void => {
+    state.nudged = true;
+  };
+  const onWheel = (event: Event): void => {
+    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],
+    ],
+  };
 }
 
 /**
@@ -115,12 +296,12 @@ export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
     aimed: Number.NaN,
     quiet: undefined,
     settled: () => undefined,
+    lastScrollLeft: physicalScrollLeft(strip),
+    pointerDownAt: Number.NaN,
+    pointerMoved: false,
+    touchDownAt: Number.NaN,
+    touchMoved: false,
   };
-  const set =
-    (key: 'pointer' | 'touch' | 'nudged', value: boolean) =>
-    (): void => {
-      state[key] = value;
-    };
   const settle = (): void => {
     // Only a scroll that was UNDER JUDGEMENT disarms. Chromium can end the
     // strip's own smooth scroll with a `scrollend` when another scroll cuts it
@@ -132,33 +313,36 @@ export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
     if (!restsOnAim(strip, state.aimed)) state.scrolled = true;
     state.settled();
   };
-  const onWheel = (event: Event): void => {
-    if (horizontalDelta(event) !== 0) state.nudged = true;
-  };
   const onScroll = (): void => {
-    if (state.pointer || state.touch || state.nudged) state.undecided = true;
+    const now = physicalScrollLeft(strip);
+    const movedFarEnough = Math.abs(now - state.lastScrollLeft) > SCROLL_DELTA_EPSILON;
+    state.lastScrollLeft = now;
+    // Pointer/touch need BOTH signals (FUT-2775): the pointer/finger must have
+    // itself MOVED since going down, AND this tick's delta must be real. Either
+    // alone still latches on the other's shape — a pointer merely resting on
+    // the strip while its OWN `scrollTo` produces real per-tick deltas would
+    // arm under a delta-only check (`pointerMoved`/`touchMoved` rules that out);
+    // a pointer that drifts a sub-epsilon amount while resting would arm under
+    // a moved-only check with no delta floor (`movedFarEnough` rules that out).
+    const pointerDrag = state.pointer && state.pointerMoved && movedFarEnough;
+    const touchDrag = state.touch && state.touchMoved && movedFarEnough;
+    // `nudged` (a keypress, a sideways wheel, the browser taking the pointer
+    // over to pan) is already a discrete, one-shot gesture with no "resting
+    // pointer coincides with an unrelated animation" shape to rule out — unlike
+    // pointer/touch, requiring a delta on the SAME tick that arms it would only
+    // race the strip's own scroll ending before a qualifying tick arrives (seen:
+    // it broke the existing "keeps a wheel/drag scroll" stories against a real
+    // browser's `scrollend` timing). So it arms as it always has.
+    if (pointerDrag || touchDrag || state.nudged) state.undecided = true;
     if (!state.undecided || hasScrollEnd) return;
     // Every tick while undecided, armed or not: a quiet spell that began while
     // the strip was still moving would judge it mid-flight, away from its aim.
     clearTimeout(state.quiet);
     state.quiet = setTimeout(settle, QUIET_BEFORE_SETTLED_MS);
   };
-  const onStrip: Listeners = [
-    ['pointerdown', set('pointer', true)],
-    ['touchstart', set('touch', true)],
-    ['pointercancel', set('nudged', true)],
-    ['keydown', set('nudged', true)],
-    ['wheel', onWheel],
-    ['scroll', onScroll],
-    ['scrollend', settle],
-  ];
-  // A gesture can END off the strip, so its end is heard on the window.
-  const onView: Listeners = [
-    ['pointerup', set('pointer', false)],
-    ['pointercancel', set('pointer', false)],
-    ['touchend', set('touch', false)],
-    ['touchcancel', set('touch', false)],
-  ];
+  const gestures = createGestureListeners(state);
+  const onStrip: Listeners = [...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 {

package/src/components/layout/SettingsLayout/SettingsSectionChips.tsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box/index.js';
 import { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React, { useEffect, useRef, type RefObject } from 'react';
 
-import { watchVisitorScroll } from './SettingsSectionChips.scroll';
+import { physicalScrollLeft, toRawScrollLeft, watchVisitorScroll } from './SettingsSectionChips.scroll';
 import { SettingsStatusMarker } from './SettingsStatusMarker';
 import { TOUCH_TARGET } from './SettingsLayout.styles';
 import { rem, sxRem } from '../../../tokens/relative';
@@ -48,11 +48,20 @@ function prefersReducedMotion(): boolean {
  * it. The clamp hid that for the last chip; a middle one was simply off-centre.
  * The boxes are both in viewport coordinates, so their difference is the strip's
  * own, whatever the host wraps it in.
+ *
+ * Read and returned in PHYSICAL pixels (`physicalScrollLeft`, FUT-2775): the
+ * bounding-rect arithmetic above is already direction-blind, and an RTL
+ * scroller's raw `scrollLeft` is not — the CSSOM View spec has it `0` at the
+ * strip's right-hand start and NEGATIVE past it, not `0`-to-`scrollWidth` like
+ * an LTR one. `Math.max(0, …)` alone, against that raw value, would clamp every
+ * legitimate RTL target straight back to the start. Physical throughout keeps
+ * this comparable to {@link VisitorScrollWatch.aimedAt}; the caller converts to
+ * this engine's raw `scrollLeft` (`toRawScrollLeft`) only at the `scrollTo` call.
  */
 function centredScrollLeft(strip: HTMLElement, chip: HTMLElement): number {
   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));
 }
@@ -122,13 +131,16 @@ function useCentreActiveChip(
       // Not while a scroll that may be the visitor's is still moving: a resize
       // mid-drag must not yank the strip. It is re-tried once that scroll rests.
       if (!chip || visitor.hasScrolled() || visitor.isUndecided()) return;
+      // Physical pixels throughout (FUT-2775) — comparable to `aimedAt()` and to
+      // what `beforeOwnScroll` records; converted to this engine's raw
+      // `scrollLeft` only for the actual `scrollTo` call below.
       const left = centredScrollLeft(strip, chip);
       // Only when the target MOVED: a resize that leaves it where it was must not
       // restart a smooth scroll that is already on its way there. The aim is a
       // runtime-computed scroll offset, like the exempt `left` below — not a size.
       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();
@@ -250,7 +262,15 @@ export 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',

package/dist/chunk-CKHFYTIX.js.map

@@ -1 +0,0 @@
-{"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 { 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 */\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 + strip.scrollLeft + 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      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, 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        px: 0.25,\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":[]}

package/dist/chunk-SLJAQA2X.js

@@ -1,82 +0,0 @@
-// src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts
-var LANDED_SLACK = 1;
-var QUIET_BEFORE_SETTLED_MS = 250;
-function horizontalDelta(event) {
-  if (!(event instanceof WheelEvent)) return 0;
-  return event.deltaX !== 0 ? event.deltaX : event.shiftKey ? event.deltaY : 0;
-}
-function restsOnAim(strip, aimed) {
-  const reachable = Math.min(aimed, strip.scrollWidth - strip.clientWidth);
-  return Math.abs(strip.scrollLeft - reachable) <= LANDED_SLACK;
-}
-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
-  };
-  const set = (key, value) => () => {
-    state[key] = value;
-  };
-  const settle = () => {
-    if (!state.undecided) return;
-    state.undecided = false;
-    state.nudged = false;
-    if (!restsOnAim(strip, state.aimed)) state.scrolled = true;
-    state.settled();
-  };
-  const onWheel = (event) => {
-    if (horizontalDelta(event) !== 0) state.nudged = true;
-  };
-  const onScroll = () => {
-    if (state.pointer || state.touch || state.nudged) state.undecided = true;
-    if (!state.undecided || hasScrollEnd) return;
-    clearTimeout(state.quiet);
-    state.quiet = setTimeout(settle, QUIET_BEFORE_SETTLED_MS);
-  };
-  const onStrip = [
-    ["pointerdown", set("pointer", true)],
-    ["touchstart", set("touch", true)],
-    ["pointercancel", set("nudged", true)],
-    ["keydown", set("nudged", true)],
-    ["wheel", onWheel],
-    ["scroll", onScroll],
-    ["scrollend", settle]
-  ];
-  const onView = [
-    ["pointerup", set("pointer", false)],
-    ["pointercancel", set("pointer", false)],
-    ["touchend", set("touch", false)],
-    ["touchcancel", set("touch", false)]
-  ];
-  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 {
-  watchVisitorScroll
-};
-//# sourceMappingURL=chunk-SLJAQA2X.js.map

package/dist/chunk-SLJAQA2X.js.map

@@ -1 +0,0 @@
-{"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\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  /** Where the strip last aimed itself, in its own pixels; `NaN` before it has. */\n  aimedAt: () => number;\n  /**\n   * The strip is about to scroll itself to `left`. Records the 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}\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(strip.scrollLeft - reachable) <= LANDED_SLACK;\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  };\n  const set =\n    (key: 'pointer' | 'touch' | 'nudged', value: boolean) =>\n    (): void => {\n      state[key] = value;\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 onWheel = (event: Event): void => {\n    if (horizontalDelta(event) !== 0) state.nudged = true;\n  };\n  const onScroll = (): void => {\n    if (state.pointer || state.touch || 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 onStrip: Listeners = [\n    ['pointerdown', set('pointer', true)],\n    ['touchstart', set('touch', true)],\n    ['pointercancel', set('nudged', true)],\n    ['keydown', set('nudged', true)],\n    ['wheel', onWheel],\n    ['scroll', onScroll],\n    ['scrollend', settle],\n  ];\n  // A gesture can END off the strip, so its end is heard on the window.\n  const onView: Listeners = [\n    ['pointerup', set('pointer', false)],\n    ['pointercancel', set('pointer', false)],\n    ['touchend', set('touch', false)],\n    ['touchcancel', set('touch', false)],\n  ];\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":";AAYA,IAAM,eAAe;AASrB,IAAM,0BAA0B;AA6BhC,SAAS,gBAAgB,OAAsB;AAC7C,MAAI,EAAE,iBAAiB,YAAa,QAAO;AAC3C,SAAO,MAAM,WAAW,IAAI,MAAM,SAAS,MAAM,WAAW,MAAM,SAAS;AAC7E;AAcA,SAAS,WAAW,OAAoB,OAAwB;AAC9D,QAAM,YAAY,KAAK,IAAI,OAAO,MAAM,cAAc,MAAM,WAAW;AAEvE,SAAO,KAAK,IAAI,MAAM,aAAa,SAAS,KAAK;AACnD;AAkCO,SAAS,mBAAmB,OAAwC;AACzE,QAAM,OAAO,MAAM,cAAc;AACjC,QAAM,eAAe,iBAAiB;AACtC,QAAM,QAAoB;AAAA,IACxB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,OAAO,OAAO;AAAA,IACd,OAAO;AAAA,IACP,SAAS,MAAM;AAAA,EACjB;AACA,QAAM,MACJ,CAAC,KAAqC,UACtC,MAAY;AACV,UAAM,GAAG,IAAI;AAAA,EACf;AACF,QAAM,SAAS,MAAY;AAKzB,QAAI,CAAC,MAAM,UAAW;AACtB,UAAM,YAAY;AAClB,UAAM,SAAS;AACf,QAAI,CAAC,WAAW,OAAO,MAAM,KAAK,EAAG,OAAM,WAAW;AACtD,UAAM,QAAQ;AAAA,EAChB;AACA,QAAM,UAAU,CAAC,UAAuB;AACtC,QAAI,gBAAgB,KAAK,MAAM,EAAG,OAAM,SAAS;AAAA,EACnD;AACA,QAAM,WAAW,MAAY;AAC3B,QAAI,MAAM,WAAW,MAAM,SAAS,MAAM,OAAQ,OAAM,YAAY;AACpE,QAAI,CAAC,MAAM,aAAa,aAAc;AAGtC,iBAAa,MAAM,KAAK;AACxB,UAAM,QAAQ,WAAW,QAAQ,uBAAuB;AAAA,EAC1D;AACA,QAAM,UAAqB;AAAA,IACzB,CAAC,eAAe,IAAI,WAAW,IAAI,CAAC;AAAA,IACpC,CAAC,cAAc,IAAI,SAAS,IAAI,CAAC;AAAA,IACjC,CAAC,iBAAiB,IAAI,UAAU,IAAI,CAAC;AAAA,IACrC,CAAC,WAAW,IAAI,UAAU,IAAI,CAAC;AAAA,IAC/B,CAAC,SAAS,OAAO;AAAA,IACjB,CAAC,UAAU,QAAQ;AAAA,IACnB,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,SAAoB;AAAA,IACxB,CAAC,aAAa,IAAI,WAAW,KAAK,CAAC;AAAA,IACnC,CAAC,iBAAiB,IAAI,WAAW,KAAK,CAAC;AAAA,IACvC,CAAC,YAAY,IAAI,SAAS,KAAK,CAAC;AAAA,IAChC,CAAC,eAAe,IAAI,SAAS,KAAK,CAAC;AAAA,EACrC;AACA,aAAW,CAAC,MAAM,QAAQ,KAAK,QAAS,OAAM,iBAAiB,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC;AAChG,aAAW,CAAC,MAAM,QAAQ,KAAK,OAAQ,OAAM,iBAAiB,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC;AAC/F,SAAO;AAAA,IACL,aAAa,MAAM,MAAM;AAAA,IACzB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,CAAC,SAAS;AACzB,YAAM,QAAQ;AAAA,IAChB;AAAA,IACA,WAAW,CAAC,aAAa;AACvB,YAAM,UAAU;AAAA,IAClB;AAAA,IACA,QAAQ,MAAM;AACZ,mBAAa,MAAM,KAAK;AACxB,iBAAW,CAAC,MAAM,QAAQ,KAAK,QAAS,OAAM,oBAAoB,MAAM,QAAQ;AAChF,iBAAW,CAAC,MAAM,QAAQ,KAAK,OAAQ,OAAM,oBAAoB,MAAM,QAAQ;AAAA,IACjF;AAAA,EACF;AACF;","names":[]}