@oxyhq/bloom 0.79.1 → 0.80.0

package/lib/commonjs/scroll/index.web.js

@@ -165,22 +165,51 @@ function useScrollRestoration(target, options) {
     // than what the scroll listener already saved live.
     let lastObservedOffset = null;
 
-    // The 0 WE wrote, which a real browser dispatches back as a `scroll`
-    // event (jsdom does not, so the test for this emits it explicitly).
-    // Persisting it would record an offset the user never chose, under a key
-    // another LIVE screen may share — the two-live-entries trade content
-    // keying makes (see `deriveScrollKey`) means a sibling showing the same
-    // content can save a real offset between our write and its echo, and the
-    // echo would clobber it.
+    // The offset WE last wrote, which a real browser dispatches back as a
+    // `scroll` event (jsdom does not, so the tests for this emit it
+    // explicitly). Both writers arm it: the reset, and every frame of the
+    // restore loop. Persisting either records an offset the user never
+    // chose — the reset's 0 under a key another LIVE screen may share (the
+    // two-live-entries trade content keying makes, see `deriveScrollKey`),
+    // and the loop's intermediate value as a PARTIAL that outlives an
+    // interrupted restore.
+    //
+    // A `restoring` FLAG covering the loop's duration is the obvious
+    // alternative and is wrong. It could only be cleared by a takeover
+    // event, so a session whose scroll came from a source that fires none —
+    // `scrollIntoView` from another component, a focus-driven scroll — would
+    // suppress saves indefinitely and never record the user's position at
+    // all: an unbounded corruption traded for a bounded one. Arming a VALUE
+    // is bounded to one event per write and covers every way the loop can
+    // end (stuck, capped, aborted), because each frame re-arms.
     let echoOffset = null;
+
+    // The largest offset reachable when we last PERSISTED one. A browser
+    // clamp is recognised against this rather than against the previous
+    // OBSERVATION, and that distinction is the whole mechanism: Chrome
+    // dispatches TWO `scroll` events for one clamp, so an
+    // observation-relative test sees the shrink on the first and nothing on
+    // the second, which then saves the clamped value anyway. Measured.
+    let maxOffsetAtLastSave = scroller.getMaxOffset();
     const save = () => {
       const offset = scroller.getOffset();
+      const maxOffset = scroller.getMaxOffset();
       // Ignore a spurious 0 produced by the navigator collapsing a hidden
       // background screen: while collapsed the container cannot scroll, so
       // its `scrollTop` is forced to 0. Persisting it would clobber the good
       // offset recorded by earlier live saves (problem A). A genuine
       // scroll-to-top keeps the container scrollable and is saved normally.
-      if (offset === 0 && !scroller.canScroll()) return;
+      if (offset === 0 && maxOffset <= 0) return;
+      // A partial clamp: the reachable range SHRANK and the offset is sitting
+      // exactly at the new bottom. That is what the browser does to a tab
+      // whose document has been taken over by a shorter sibling — the two
+      // together are a signature a genuine scroll does not have, because
+      // reaching the bottom on your own does not shrink the page in the same
+      // breath. Suppressing keeps the pre-clamp offset, which on return
+      // simply clamps to the same place if the content really did shrink.
+      if (maxOffset < maxOffsetAtLastSave && Math.abs(offset - maxOffset) <= RESTORE_STICK_TOLERANCE_PX) {
+        return;
+      }
       if (offset === echoOffset) {
         // Our own write coming back. Consume the arming so a real scroll to
         // the same offset later is saved normally.
@@ -189,6 +218,7 @@ function useScrollRestoration(target, options) {
       }
       echoOffset = null;
       lastObservedOffset = offset;
+      maxOffsetAtLastSave = maxOffset;
       store.save(scrollKey, offset);
     };
 
@@ -228,22 +258,26 @@ function useScrollRestoration(target, options) {
       // single write while it is still collapsed would be clamped to 0 and
       // never re-applied (problem B).
       //
-      // KNOWN PROPERTY, not a bug: each of these writes echoes back as a
-      // `scroll` event and IS persisted (only the reset arms `echoOffset`,
-      // and `canScroll()` is always true for the `'window'` sentinel so the
-      // collapsed-container guard never fires there). A loop that reaches
-      // the target self-heals on its last echo. A loop that exhausts the cap
-      // leaves the CLAMPED offset stored — which is the right thing to
-      // remember when the content genuinely shrank, since that is as far as
-      // the user can now scroll.
+      // Every write the loop makes is suppressed from the save path (see
+      // `echoOffset` below), so an interrupted restore leaves the ORIGINAL
+      // target stored rather than a partial. Nothing is lost on the success
+      // path: `targetOffset` came out of the store, so persisting it again
+      // would write back the same number.
       let framesLeft = RESTORE_FRAME_CAP;
       const applyOffset = () => {
         rafId = null;
         scroller.setOffset(targetOffset);
         framesLeft -= 1;
+        // `getOffset` re-reads the value the browser actually took, which is
+        // clamped to the content height it has reached so far. Arm it as the
+        // echo to swallow: this write is about to come back as a `scroll`
+        // event, and persisting a PARTIAL offset we wrote ourselves is how a
+        // restore that is aborted or capped corrupts the stored position.
+        const landed = scroller.getOffset();
+        echoOffset = landed;
         // Stop once the write took effect (content grew tall enough) or we
-        // exhaust the frame budget. `getOffset` re-reads the clamped value.
-        const reached = Math.abs(scroller.getOffset() - targetOffset) <= RESTORE_STICK_TOLERANCE_PX;
+        // exhaust the frame budget.
+        const reached = Math.abs(landed - targetOffset) <= RESTORE_STICK_TOLERANCE_PX;
         if (!reached && framesLeft > 0) {
           rafId = requestAnimationFrame(applyOffset);
         }

package/lib/commonjs/scroll/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_context","_scrollableWeb","_store","RESTORE_FRAME_CAP","RESTORE_STICK_TOLERANCE_PX","WEB_BINDING","onScroll","undefined","USER_TAKEOVER_EVENTS","useScrollRestoration","target","options","store","adapter","useScrollRestorationContext","contentId","useScreenContentId","enabled","scrollKey","deriveScrollKey","key","resetKeyRef","useRef","useScreenFocusEffect","useCallback","scroller","createScroller","element","window","resolveScrollEventTarget","lastObservedOffset","echoOffset","save","offset","getOffset","canScroll","targetOffset","read","isReset","has","alreadyReset","current","rafId","stopRestore","cancelAnimationFrame","setOffset","requestAnimationFrame","framesLeft","applyOffset","reached","Math","abs","type","addEventListener","passive","removeEventListener","EventTarget","handle","getScrollableNode","node"],"sourceRoot":"../../../src","sources":["scroll/index.web.tsx"],"mappings":";;;;;;;;;;;;AAwCA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AA5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,iBAAiB,GAAG,EAAE;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,0BAA0B,GAAG,CAAC;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAqC,GAAG;EAAEC,QAAQ,EAAEA,CAAA,KAAMC;AAAU,CAAC;;AAE3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,oBAAoB,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,CAAC;;AAE9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,oBAAoBA,CAClCC,MAA+B,EAC/BC,OAAqC,EACX;EAC1B,MAAM;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oCAA2B,EAAC,CAAC;EACxD,MAAMC,SAAS,GAAGF,OAAO,CAACG,kBAAkB,CAAC,CAAC;EAC9C,MAAMC,OAAO,GAAGN,OAAO,EAAEM,OAAO,IAAI,IAAI;EACxC,MAAMC,SAAS,GAAG,IAAAC,sBAAe,EAACJ,SAAS,EAAEJ,OAAO,EAAES,GAAG,CAAC;;EAE1D;EACA;EACA;EACA;EACA;EACA,MAAMC,WAAW,GAAG,IAAAC,aAAM,EA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","ignoreList":[]}
+{"version":3,"names":["_react","require","_context","_scrollableWeb","_store","RESTORE_FRAME_CAP","RESTORE_STICK_TOLERANCE_PX","WEB_BINDING","onScroll","undefined","USER_TAKEOVER_EVENTS","useScrollRestoration","target","options","store","adapter","useScrollRestorationContext","contentId","useScreenContentId","enabled","scrollKey","deriveScrollKey","key","resetKeyRef","useRef","useScreenFocusEffect","useCallback","scroller","createScroller","element","window","resolveScrollEventTarget","lastObservedOffset","echoOffset","maxOffsetAtLastSave","getMaxOffset","save","offset","getOffset","maxOffset","Math","abs","targetOffset","read","isReset","has","alreadyReset","current","rafId","stopRestore","cancelAnimationFrame","setOffset","requestAnimationFrame","framesLeft","applyOffset","landed","reached","type","addEventListener","passive","removeEventListener","EventTarget","handle","getScrollableNode","node"],"sourceRoot":"../../../src","sources":["scroll/index.web.tsx"],"mappings":";;;;;;;;;;;;AAwCA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AA5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,iBAAiB,GAAG,EAAE;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,0BAA0B,GAAG,CAAC;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAqC,GAAG;EAAEC,QAAQ,EAAEA,CAAA,KAAMC;AAAU,CAAC;;AAE3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,oBAAoB,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,CAAC;;AAE9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,oBAAoBA,CAClCC,MAA+B,EAC/BC,OAAqC,EACX;EAC1B,MAAM;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oCAA2B,EAAC,CAAC;EACxD,MAAMC,SAAS,GAAGF,OAAO,CAACG,kBAAkB,CAAC,CAAC;EAC9C,MAAMC,OAAO,GAAGN,OAAO,EAAEM,OAAO,IAAI,IAAI;EACxC,MAAMC,SAAS,GAAG,IAAAC,sBAAe,EAACJ,SAAS,EAAEJ,OAAO,EAAES,GAAG,CAAC;;EAE1D;EACA;EACA;EACA;EACA;EACA,MAAMC,WAAW,GAAG,IAAAC,aAAM,EA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","ignoreList":[]}

package/lib/commonjs/scroll/scrollable.web.js

@@ -48,7 +48,12 @@ function createScroller(target) {
       setOffset: offset => {
         if (typeof window !== 'undefined') window.scrollTo(0, offset);
       },
-      canScroll: () => true
+      getMaxOffset: () => {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+          return 0;
+        }
+        return Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+      }
     };
   }
   return {
@@ -60,9 +65,10 @@ function createScroller(target) {
       const element = resolveElement(target);
       if (element) element.scrollTop = offset;
     },
-    canScroll: () => {
+    getMaxOffset: () => {
       const element = resolveElement(target);
-      return element ? element.scrollHeight > element.clientHeight : false;
+      if (!element) return 0;
+      return Math.max(0, element.scrollHeight - element.clientHeight);
     }
   };
 }

package/lib/commonjs/scroll/scrollable.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["isElement","value","HTMLElement","hasGetScrollableNode","getScrollableNode","resolveElement","target","current","node","createScroller","getOffset","window","scrollY","setOffset","offset","scrollTo","canScroll","element","scrollTop","scrollHeight","clientHeight"],"sourceRoot":"../../../src","sources":["scroll/scrollable.web.ts"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;;AAkBA,SAASA,SAASA,CAACC,KAAc,EAAwB;EACvD,OAAO,OAAOC,WAAW,KAAK,WAAW,IAAID,KAAK,YAAYC,WAAW;AAC3E;AAEA,SAASC,oBAAoBA,CAC3BF,KAAc,EACkD;EAChE,OACE,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,OAAQA,KAAK,CAAsBG,iBAAiB,KAAK,UAAU;AAEvE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAACC,MAA+B,EAAsB;EAC3E,IAAIA,MAAM,KAAK,QAAQ,EAAE,OAAO,IAAI;EAEpC,MAAMC,OAAO,GAAID,MAAM,CAA0BC,OAAO;EACxD,IAAIA,OAAO,IAAI,IAAI,EAAE,OAAO,IAAI;EAEhC,IAAIP,SAAS,CAACO,OAAO,CAAC,EAAE,OAAOA,OAAO;EAEtC,IAAIJ,oBAAoB,CAACI,OAAO,CAAC,EAAE;IACjC,MAAMC,IAAI,GAAGD,OAAO,CAACH,iBAAiB,CAAC,CAAC;IACxC,IAAIJ,SAAS,CAACQ,IAAI,CAAC,EAAE,OAAOA,IAAI;EAClC;EAEA,OAAO,IAAI;AACb;;AAEA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAACH,MAA+B,EAAoB;EAChF,IAAIA,MAAM,KAAK,QAAQ,EAAE;IACvB,OAAO;MACLI,SAAS,EAAEA,CAAA,KAAO,OAAOC,MAAM,KAAK,WAAW,GAAG,CAAC,GAAGA,MAAM,CAACC,OAAQ;MACrEC,SAAS,EAAGC,MAAM,IAAK;QACrB,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAEA,MAAM,CAACI,QAAQ,CAAC,CAAC,EAAED,MAAM,CAAC;MAC/D,CAAC;MACDE,SAAS,EAAEA,CAAA,KAAM;IACnB,CAAC;EACH;EAEA,OAAO;IACLN,SAAS,EAAEA,CAAA,KAAM;MACf,MAAMO,OAAO,GAAGZ,cAAc,CAACC,MAAM,CAAC;MACtC,OAAOW,OAAO,GAAGA,OAAO,CAACC,SAAS,GAAG,CAAC;IACxC,CAAC;IACDL,SAAS,EAAGC,MAAM,IAAK;MACrB,MAAMG,OAAO,GAAGZ,cAAc,CAACC,MAAM,CAAC;MACtC,IAAIW,OAAO,EAAEA,OAAO,CAACC,SAAS,GAAGJ,MAAM;IACzC,CAAC;IACDE,SAAS,EAAEA,CAAA,KAAM;MACf,MAAMC,OAAO,GAAGZ,cAAc,CAACC,MAAM,CAAC;MACtC,OAAOW,OAAO,GAAGA,OAAO,CAACE,YAAY,GAAGF,OAAO,CAACG,YAAY,GAAG,KAAK;IACtE;EACF,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["isElement","value","HTMLElement","hasGetScrollableNode","getScrollableNode","resolveElement","target","current","node","createScroller","getOffset","window","scrollY","setOffset","offset","scrollTo","getMaxOffset","document","Math","max","documentElement","scrollHeight","innerHeight","element","scrollTop","clientHeight"],"sourceRoot":"../../../src","sources":["scroll/scrollable.web.ts"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;;AA+BA,SAASA,SAASA,CAACC,KAAc,EAAwB;EACvD,OAAO,OAAOC,WAAW,KAAK,WAAW,IAAID,KAAK,YAAYC,WAAW;AAC3E;AAEA,SAASC,oBAAoBA,CAC3BF,KAAc,EACkD;EAChE,OACE,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,OAAQA,KAAK,CAAsBG,iBAAiB,KAAK,UAAU;AAEvE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAACC,MAA+B,EAAsB;EAC3E,IAAIA,MAAM,KAAK,QAAQ,EAAE,OAAO,IAAI;EAEpC,MAAMC,OAAO,GAAID,MAAM,CAA0BC,OAAO;EACxD,IAAIA,OAAO,IAAI,IAAI,EAAE,OAAO,IAAI;EAEhC,IAAIP,SAAS,CAACO,OAAO,CAAC,EAAE,OAAOA,OAAO;EAEtC,IAAIJ,oBAAoB,CAACI,OAAO,CAAC,EAAE;IACjC,MAAMC,IAAI,GAAGD,OAAO,CAACH,iBAAiB,CAAC,CAAC;IACxC,IAAIJ,SAAS,CAACQ,IAAI,CAAC,EAAE,OAAOA,IAAI;EAClC;EAEA,OAAO,IAAI;AACb;;AAEA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAACH,MAA+B,EAAoB;EAChF,IAAIA,MAAM,KAAK,QAAQ,EAAE;IACvB,OAAO;MACLI,SAAS,EAAEA,CAAA,KAAO,OAAOC,MAAM,KAAK,WAAW,GAAG,CAAC,GAAGA,MAAM,CAACC,OAAQ;MACrEC,SAAS,EAAGC,MAAM,IAAK;QACrB,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAEA,MAAM,CAACI,QAAQ,CAAC,CAAC,EAAED,MAAM,CAAC;MAC/D,CAAC;MACDE,YAAY,EAAEA,CAAA,KAAM;QAClB,IAAI,OAAOL,MAAM,KAAK,WAAW,IAAI,OAAOM,QAAQ,KAAK,WAAW,EAAE;UACpE,OAAO,CAAC;QACV;QACA,OAAOC,IAAI,CAACC,GAAG,CACb,CAAC,EACDF,QAAQ,CAACG,eAAe,CAACC,YAAY,GAAGV,MAAM,CAACW,WACjD,CAAC;MACH;IACF,CAAC;EACH;EAEA,OAAO;IACLZ,SAAS,EAAEA,CAAA,KAAM;MACf,MAAMa,OAAO,GAAGlB,cAAc,CAACC,MAAM,CAAC;MACtC,OAAOiB,OAAO,GAAGA,OAAO,CAACC,SAAS,GAAG,CAAC;IACxC,CAAC;IACDX,SAAS,EAAGC,MAAM,IAAK;MACrB,MAAMS,OAAO,GAAGlB,cAAc,CAACC,MAAM,CAAC;MACtC,IAAIiB,OAAO,EAAEA,OAAO,CAACC,SAAS,GAAGV,MAAM;IACzC,CAAC;IACDE,YAAY,EAAEA,CAAA,KAAM;MAClB,MAAMO,OAAO,GAAGlB,cAAc,CAACC,MAAM,CAAC;MACtC,IAAI,CAACiB,OAAO,EAAE,OAAO,CAAC;MACtB,OAAOL,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEI,OAAO,CAACF,YAAY,GAAGE,OAAO,CAACE,YAAY,CAAC;IACjE;EACF,CAAC;AACH","ignoreList":[]}

package/lib/commonjs/tabs/Tabs.js

@@ -6,83 +6,227 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabsTrigger = exports.TabsContent = exports.Tabs = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _useTheme = require("../theme/use-theme.js");
 var _usePressAnimation = require("../hooks/usePressAnimation.js");
 var _tokens = require("../styles/tokens.js");
 var _shadows = require("../design-tokens/shadows");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const TabsContext = /*#__PURE__*/(0, _react.createContext)({
-  value: '',
-  onValueChange: () => {},
-  variant: 'underline',
-  fullWidth: false,
-  reportTriggerLayout: () => {}
-});
-const TabsBarComponent = ({
+/**
+ * Underline travel. The same spring the floating `TabBar` highlight uses, so the
+ * two strips read as one motion language; stated here rather than imported
+ * because they are separate component families and a shared constant would tie
+ * their feel together permanently.
+ */
+const SLIDE_SPRING = {
+  duration: 420,
+  dampingRatio: 0.82
+};
+
+/** Visibility, not travel — see {@link TabsContextValue.indicatorOpacity}. */
+const HIGHLIGHT_FADE = {
+  duration: 160
+};
+
+/**
+ * Fraction of the distance to the neighbour a drag must cover before releasing
+ * commits. Below it the underline springs home and nothing navigates.
+ */
+const COMMIT_THRESHOLD = 0.4;
+
+/**
+ * How far the underline may stray past the first/last tab, and how heavily that
+ * travel is damped. A rubber-band is reserved for the edge, where "there is
+ * nothing there" is the true message; used anywhere else it would promise a
+ * neighbour that is about to arrive, which is the opposite of what happens.
+ */
+const EDGE_RUBBER_BAND_DAMPING = 0.25;
+const EDGE_RUBBER_BAND_MAX = 32;
+
+/** Above this the count renders as "99+", so a large tally cannot stretch a tab. */
+const MAX_DISPLAYED_COUNT = 99;
+function formatCount(count) {
+  return count > MAX_DISPLAYED_COUNT ? `${MAX_DISPLAYED_COUNT}+` : String(count);
+}
+const TabsContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * The imperative surface a horizontal drag gesture drives the underline through.
+ *
+ * It lives here rather than in the gesture's own code because every quantity the
+ * drag needs — where the neighbouring trigger is, how wide it is, whether there
+ * IS a neighbour — is measured layout the strip already holds and nothing
+ * outside it can see. The gesture supplies one number, the finger's delta; the
+ * strip decides what that means.
+ *
+ * Obtained via a `ref` on `Tabs`. The gesture belongs in the LAYOUT beside the
+ * strip, never inside a tab screen — a gesture mounted in a screen is destroyed
+ * by the navigation it commits, mid-release.
+ */
+
+function useTabsContext(component) {
+  const ctx = (0, _react.useContext)(TabsContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within a Tabs`);
+  }
+  return ctx;
+}
+const TabsBarComponent = /*#__PURE__*/(0, _react.forwardRef)(function TabsBar({
   value,
   onValueChange,
+  hasSelection = true,
   variant = 'underline',
   fullWidth = false,
   children,
   style,
   testID
-}) => {
+}, dragRef) {
   const theme = (0, _useTheme.useTheme)();
   const isUnderline = variant === 'underline';
 
-  // Shared sliding underline: one indicator that translates + resizes between
-  // triggers. Triggers report their measured {x, width}; the container drives
-  // these Animated values imperatively (no re-render on measure or slide).
-  const indicatorX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const indicatorWidth = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  // One shared underline that translates + resizes between triggers. Triggers
+  // report their measured {x, width}; whoever owns the selection drives these
+  // shared values IMPERATIVELY, and `useAnimatedStyle` below only ever READS
+  // them. That split is what makes the animation work on web, where returning
+  // an animation from inside a mapper silently does nothing.
+  const indicatorX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const indicatorWidth = (0, _reactNativeReanimated.useSharedValue)(0);
+  // Starts hidden: a strip whose active trigger has not been measured yet must
+  // not flash an underline at the origin on its first frame.
+  const indicatorOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
+  // Live drag, added to the settled position/width rather than replacing them,
+  // so a release can fold the delta into the base without a visible jump.
+  const dragOffset = (0, _reactNativeReanimated.useSharedValue)(0);
+  const dragWidthDelta = (0, _reactNativeReanimated.useSharedValue)(0);
   const triggerLayoutsRef = (0, _react.useRef)({});
   const indicatorPlacedRef = (0, _react.useRef)(false);
+  const scrollRef = (0, _react.useRef)(null);
+  const viewportWidthRef = (0, _react.useRef)(0);
+  // The value the underline currently belongs to, from EITHER path. A ref
+  // because the layout callback below must see the latest selection without
+  // being re-created — and therefore re-firing — on every selection change.
+  const selectedValueRef = (0, _react.useRef)(value);
   const moveIndicator = (0, _react.useCallback)((target, animate) => {
     if (animate) {
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(indicatorX, {
-        toValue: target.x,
-        duration: 200,
-        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: false
-      }), _reactNative.Animated.timing(indicatorWidth, {
-        toValue: target.width,
-        duration: 200,
-        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: false
-      })]).start();
+      indicatorX.value = (0, _reactNativeReanimated.withSpring)(target.x, SLIDE_SPRING);
+      indicatorWidth.value = (0, _reactNativeReanimated.withSpring)(target.width, SLIDE_SPRING);
     } else {
-      indicatorX.setValue(target.x);
-      indicatorWidth.setValue(target.width);
+      indicatorX.value = target.x;
+      indicatorWidth.value = target.width;
     }
-  }, [indicatorX, indicatorWidth]);
+    indicatorOpacity.value = (0, _reactNativeReanimated.withTiming)(1, HIGHLIGHT_FADE);
+  }, [indicatorX, indicatorWidth, indicatorOpacity]);
+
+  // Keep the active tab in view when the strip overflows its viewport. Centring
+  // is what makes a ROUTED strip usable: arriving at a tab that is scrolled out
+  // of sight — via a deep link, a Back, or simply a long tab set — must not
+  // look like an empty selection.
+  const revealTrigger = (0, _react.useCallback)((target, animate) => {
+    const viewport = viewportWidthRef.current;
+    if (fullWidth || viewport <= 0) return;
+    const centred = target.x + target.width / 2 - viewport / 2;
+    scrollRef.current?.scrollTo({
+      x: Math.max(0, centred),
+      animated: animate
+    });
+  }, [fullWidth]);
+  const applySelection = (0, _react.useCallback)(tabValue => {
+    const target = triggerLayoutsRef.current[tabValue];
+    // Not measured yet — `reportTriggerLayout` places it on arrival.
+    if (!target) return;
+    const animate = indicatorPlacedRef.current;
+    moveIndicator(target, animate);
+    revealTrigger(target, animate);
+    indicatorPlacedRef.current = true;
+  }, [moveIndicator, revealTrigger]);
   const reportTriggerLayout = (0, _react.useCallback)((tabValue, layout) => {
     triggerLayoutsRef.current[tabValue] = layout;
-    // Snap onto the active trigger the moment it's first measured (mount) or
+    // Snap onto the active trigger the moment it is first measured (mount), or
     // when its size changes — never slide in from the origin.
-    if (tabValue === value) {
+    if (tabValue === selectedValueRef.current) {
       moveIndicator(layout, false);
+      revealTrigger(layout, false);
       indicatorPlacedRef.current = true;
     }
-  }, [value, moveIndicator]);
+  }, [moveIndicator, revealTrigger]);
+  const reportFocused = (0, _react.useCallback)(tabValue => {
+    selectedValueRef.current = tabValue;
+    applySelection(tabValue);
+  }, [applySelection]);
 
-  // Slide the indicator to the newly-selected trigger. Syncing an imperative
-  // Animated value to the controlled `value` prop is a legitimate effect
-  // (external-system sync); the first placement snaps, later changes animate.
+  // CONTROLLED path only: the bar owns the underline when `value` is provided.
+  // Syncing an imperative animation to a controlled prop is a legitimate effect
+  // (external-system sync). On the focus-driven path each trigger reports
+  // instead, so this stays out of the way and there is only ever one writer.
   (0, _react.useEffect)(() => {
-    if (!isUnderline) return;
-    const target = triggerLayoutsRef.current[value];
-    if (!target) return; // not measured yet — reportTriggerLayout will place it
-    moveIndicator(target, indicatorPlacedRef.current);
-    indicatorPlacedRef.current = true;
-  }, [value, isUnderline, moveIndicator]);
+    if (value === undefined) return;
+    selectedValueRef.current = value;
+    applySelection(value);
+  }, [value, applySelection]);
+
+  // Nothing is focused — fade out where it stands. Position is deliberately
+  // untouched: see `TabsProps.hasSelection`. Placing this AFTER the controlled
+  // effect is what lets a later re-selection snap back rather than travel,
+  // because `indicatorPlacedRef` is left alone here.
+  (0, _react.useEffect)(() => {
+    if (hasSelection) return;
+    indicatorOpacity.value = (0, _reactNativeReanimated.withTiming)(0, HIGHLIGHT_FADE);
+  }, [hasSelection, indicatorOpacity]);
+  (0, _react.useImperativeHandle)(dragRef, () => ({
+    drag(translationX) {
+      const current = selectedValueRef.current;
+      if (current === undefined) return null;
+      // Ordered by measured position, so "the neighbour" means the tab next
+      // to it ON SCREEN. Deriving it from child order instead would be wrong
+      // the moment a caller reorders or conditionally renders a trigger.
+      const ordered = Object.entries(triggerLayoutsRef.current).sort((a, b) => a[1].x - b[1].x);
+      const index = ordered.findIndex(([tabValue]) => tabValue === current);
+      const from = ordered[index]?.[1];
+      if (from === undefined) return null;
+
+      // Opposite the finger: dragging LEFT reveals the NEXT tab, which is to
+      // the right, so that is where the underline goes.
+      const travel = -translationX;
+      const neighbour = ordered[index + (travel > 0 ? 1 : -1)];
+      if (neighbour === undefined) {
+        // First or last tab. Resist, never commit — the rubber-band is the
+        // honest signal that there is nothing in that direction.
+        const damped = Math.min(Math.abs(travel) * EDGE_RUBBER_BAND_DAMPING, EDGE_RUBBER_BAND_MAX);
+        dragOffset.value = Math.sign(travel) * damped;
+        dragWidthDelta.value = 0;
+        return null;
+      }
+      const [neighbourValue, to] = neighbour;
+      const distance = to.x - from.x;
+      // Clamped at the neighbour: the underline stops exactly where releasing
+      // would leave it, so it never promises travel the commit cannot deliver.
+      const progress = Math.min(Math.abs(travel) / Math.abs(distance), 1);
+      dragOffset.value = distance * progress;
+      dragWidthDelta.value = (to.width - from.width) * progress;
+      return progress >= COMMIT_THRESHOLD ? neighbourValue : null;
+    },
+    release(committed) {
+      if (committed === null) {
+        dragOffset.value = (0, _reactNativeReanimated.withSpring)(0, SLIDE_SPRING);
+        dragWidthDelta.value = (0, _reactNativeReanimated.withSpring)(0, SLIDE_SPRING);
+        return;
+      }
+      // Fold, do not zero — see `TabsDragController.release`.
+      indicatorX.value += dragOffset.value;
+      indicatorWidth.value += dragWidthDelta.value;
+      dragOffset.value = 0;
+      dragWidthDelta.value = 0;
+    }
+  }), [dragOffset, dragWidthDelta, indicatorX, indicatorWidth]);
   const contextValue = (0, _react.useMemo)(() => ({
-    value,
+    selectedValue: value,
     onValueChange,
     variant,
     fullWidth,
-    reportTriggerLayout
-  }), [value, onValueChange, variant, fullWidth, reportTriggerLayout]);
+    reportTriggerLayout,
+    reportFocused
+  }), [value, onValueChange, variant, fullWidth, reportTriggerLayout, reportFocused]);
   const containerStyle = (0, _react.useMemo)(() => {
     const base = {
       flexDirection: 'row',
@@ -107,20 +251,42 @@ const TabsBarComponent = ({
     }
     return base;
   }, [variant, theme]);
-  const indicator = isUnderline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+
+  // Deps: every shared value the mapper READS is listed. On web WITHOUT the
+  // react-native-worklets babel plugin — the production reality for Bloom's
+  // Vite consumers — reanimated cannot auto-detect a worklet's reads and drives
+  // the mapper off this array instead: omit one and the mapper runs ONCE and
+  // freezes at the first frame while the shared value keeps animating
+  // underneath, with no error anywhere. Native (plugin present) auto-tracks and
+  // ignores the extras, so listing them is correct on both platforms. Same rule
+  // as `TabBarBase` and `BottomSheetBase`. Do NOT strip these.
+  const indicatorStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    // The drag deltas ADD to the settled values rather than replacing them,
+    // which is what lets a release fold them into the base with no jump.
+    width: Math.max(indicatorWidth.value + dragWidthDelta.value, 0),
+    opacity: indicatorOpacity.value,
+    transform: [{
+      translateX: indicatorX.value + dragOffset.value
+    }]
+  }), [indicatorWidth, dragWidthDelta, indicatorOpacity, indicatorX, dragOffset]);
+
+  // The underline is a sibling of the triggers INSIDE the scrollable content,
+  // so the two share one coordinate space: a trigger's `onLayout` x is already
+  // relative to the container the underline is absolutely positioned in. That
+  // is why nothing here subtracts a scroll offset — an underline parked outside
+  // the scroller would have to, and would lag by a frame on every scroll event.
+  const indicator = isUnderline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
     pointerEvents: "none",
     testID: testID ? `${testID}-indicator` : undefined,
-    style: {
+    style: [{
       position: 'absolute',
       left: 0,
       bottom: 0,
       height: 2,
-      backgroundColor: theme.colors.primary,
-      width: indicatorWidth,
-      transform: [{
-        translateX: indicatorX
-      }]
-    }
+      borderTopLeftRadius: 2,
+      borderTopRightRadius: 2,
+      backgroundColor: theme.colors.primary
+    }, indicatorStyle]
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabsContext.Provider, {
     value: contextValue,
@@ -129,41 +295,66 @@ const TabsBarComponent = ({
       testID: testID,
       children: [children, indicator]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      ref: scrollRef,
       horizontal: true,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [containerStyle, style],
+      onLayout: e => {
+        viewportWidthRef.current = e.nativeEvent.layout.width;
+      },
       testID: testID,
       children: [children, indicator]
     })
   });
-};
+});
 const TabComponent = ({
   value,
   label,
   icon,
+  count,
+  isFocused,
   disabled = false,
+  onPress: onPressProp,
   style,
   textStyle
 }) => {
   const theme = (0, _useTheme.useTheme)();
   const {
-    value: selectedValue,
+    selectedValue,
     onValueChange,
     variant,
     fullWidth,
-    reportTriggerLayout
-  } = (0, _react.useContext)(TabsContext);
-  const isSelected = value === selectedValue;
+    reportTriggerLayout,
+    reportFocused
+  } = useTabsContext('TabsTrigger');
+  // The two paths meet here: an explicit `isFocused` (router adapter) wins;
+  // otherwise selection comes from the bar's controlled `value`.
+  const isSelected = isFocused ?? value === selectedValue;
   const {
     scaleAnim,
     onPressIn,
     onPressOut
   } = (0, _usePressAnimation.usePressAnimation)(0.97);
+  const resolvedCount = count ?? 0;
+  const showCount = resolvedCount > 0;
+
+  // FOCUS-DRIVEN path only. This covers programmatic navigation too — a deep
+  // link, a browser Back, a back gesture — because nothing here asks HOW the
+  // change happened: the trigger simply re-renders focused and the underline
+  // follows. On the controlled path the bar drives the underline instead, so
+  // this stays out of the way to avoid two writers on one shared value.
+  (0, _react.useEffect)(() => {
+    if (isFocused !== true) return;
+    reportFocused(value);
+  }, [isFocused, value, reportFocused]);
   const handlePress = (0, _react.useCallback)(() => {
-    if (!disabled) {
-      onValueChange(value);
-    }
-  }, [value, disabled, onValueChange]);
+    if (disabled) return;
+    onPressProp?.();
+    // On the focus-driven path navigation is the caller's job (the router
+    // adapter's trigger performs it), so reporting a selection here as well
+    // would fight the router for the same underline.
+    if (isFocused === undefined) onValueChange?.(value);
+  }, [value, disabled, onValueChange, onPressProp, isFocused]);
   const tabStyle = (0, _react.useMemo)(() => {
     const base = {
       flexDirection: 'row',
@@ -238,6 +429,7 @@ const TabComponent = ({
       onPressOut: onPressOut,
       disabled: disabled,
       accessibilityRole: "tab",
+      accessibilityLabel: showCount ? `${label}, ${resolvedCount}` : label,
       accessibilityState: {
         selected: isSelected,
         disabled
@@ -245,7 +437,15 @@ const TabComponent = ({
       children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [labelStyle, textStyle],
         children: label
-      })]
+      }), showCount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          fontSize: 11,
+          fontWeight: '600',
+          color: theme.colors.textTertiary
+        },
+        numberOfLines: 1,
+        children: formatCount(resolvedCount)
+      }) : null]
     })
   });
 };
@@ -255,8 +455,8 @@ const TabPanelComponent = ({
   style
 }) => {
   const {
-    value: selectedValue
-  } = (0, _react.useContext)(TabsContext);
+    selectedValue
+  } = useTabsContext('TabsContent');
   if (value !== selectedValue) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: style,