@epicbagel/saas-kit 1.13.0 → 1.14.0

package/README.md

@@ -440,6 +440,25 @@ export function Appearance() {
 MIT. Some components and styles are adapted from shadcn/ui, and the file
 drop handling from AI SDK Elements (Apache-2.0); see `THIRD_PARTY_NOTICES.md`.
 
+## Scroll navigation
+
+`primitives/scroll-navigator` exports `ScrollNavigator`: pass an `items` array
+with stable `id`, accessible `label`, optional `imageSrc`/`fallback`, and
+`content`. It renders the list and a clickable avatar index while the list is
+visible. The item at the top of the scroll viewport is highlighted; the index
+scrolls independently for long lists. With insufficient left gutter, it uses
+a compact horizontal row above the content. Single-item lists have no index.
+
+It detects the nearest scrolling ancestor, supports an explicit `scrollRoot`
+and `topOffset` for sticky headers, and offers `onNavigate` for custom scroll
+controllers. Keyboard users Tab into the index, use arrows or Home/End, then
+Enter to jump. Reduced-motion preferences are respected. No data or selected
+record state changes when scrolling or navigating.
+
+Inside a `MessageScrollerProvider`, use `MessageScrollerNavigator` from
+`primitives/message-scroller` with the same props. It uses the thread's scroll
+controller so incoming messages do not undo a jump into a long list.
+
 ## Notes
 
 `primitives/notes` provides a reusable `Notes` area and `NoteComposer` for any

package/dist/chunk-34AS3OCC.cjs

@@ -0,0 +1,256 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+
+
+var _chunkWABCLRBRcjs = require('./chunk-WABCLRBR.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/scroll-navigator.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _jsxruntime = require('react/jsx-runtime');
+var GAP = 12;
+var RAIL_WIDTH = 56;
+var ROW_HEIGHT = 64;
+var initialPlacement = { mode: "row", top: 0, left: 0, width: 0, maxHeight: 0, active: 0, visible: false };
+function findScrollRoot(element) {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(parent).overflowY) && parent.scrollHeight > parent.clientHeight) return parent;
+  }
+  return null;
+}
+function viewportBounds(root) {
+  const viewport = window.visualViewport;
+  const top = _nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _ => _.offsetTop]), () => ( 0));
+  const left = _nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _2 => _2.offsetLeft]), () => ( 0));
+  const bounds = { top, left, right: left + (_nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _3 => _3.width]), () => ( innerWidth))), bottom: top + (_nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _4 => _4.height]), () => ( innerHeight))) };
+  for (let parent = root; parent; parent = parent.parentElement) {
+    const style = getComputedStyle(parent);
+    if (parent !== root && !/(auto|scroll|hidden|clip)/.test(`${style.overflowX} ${style.overflowY}`)) continue;
+    const rect = parent.getBoundingClientRect();
+    bounds.top = Math.max(bounds.top, rect.top + parent.clientTop);
+    bounds.left = Math.max(bounds.left, rect.left + parent.clientLeft);
+    bounds.right = Math.min(bounds.right, rect.left + parent.clientLeft + parent.clientWidth);
+    bounds.bottom = Math.min(bounds.bottom, rect.top + parent.clientTop + parent.clientHeight);
+  }
+  return bounds;
+}
+var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
+  items,
+  label = "Browse items",
+  topOffset = 0,
+  scrollRoot,
+  onNavigate,
+  className,
+  ...props
+}, forwardedRef) {
+  const rootRef = _react.useRef.call(void 0, null);
+  const targets = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const controls = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const indexRef = _react.useRef.call(void 0, null);
+  const scroller = _react.useRef.call(void 0, null);
+  const [placement, setPlacement] = _react.useState.call(void 0, initialPlacement);
+  const [focusId, setFocusId] = _react.useState.call(void 0, null);
+  const id = _react.useId.call(void 0, );
+  const keys = JSON.stringify(items.map((item) => item.id));
+  const navigable = items.length > 1;
+  _react.useLayoutEffect.call(void 0, () => {
+    const element = rootRef.current;
+    if (!element || !navigable) return;
+    let frame = 0;
+    let intersects = true;
+    const measure = () => {
+      frame = 0;
+      if (!intersects) {
+        setPlacement((previous) => previous.visible ? { ...previous, visible: false } : previous);
+        return;
+      }
+      const scrollElement = scrollRoot === void 0 ? findScrollRoot(element) : scrollRoot;
+      scroller.current = scrollElement;
+      const view = viewportBounds(scrollElement);
+      const box = element.getBoundingClientRect();
+      const mode = box.left - view.left >= RAIL_WIDTH + GAP ? "rail" : "row";
+      const top = Math.max(view.top + topOffset + GAP, box.top);
+      const bottom = Math.min(view.bottom, box.bottom) - GAP;
+      const visible = box.width > 0 && box.right > view.left && box.left < view.right && bottom - top >= ROW_HEIGHT;
+      const readingEdge = view.top + topOffset + GAP + (mode === "row" ? ROW_HEIGHT : 0);
+      const active = visible ? Math.max(0, items.findIndex((item) => (_nullishCoalesce(_optionalChain([targets, 'access', _5 => _5.current, 'access', _6 => _6.get, 'call', _7 => _7(item.id), 'optionalAccess', _8 => _8.getBoundingClientRect, 'call', _9 => _9(), 'access', _10 => _10.bottom]), () => ( 0))) > readingEdge + 1)) : 0;
+      const next = {
+        mode,
+        top,
+        left: mode === "rail" ? box.left - RAIL_WIDTH - GAP : Math.max(box.left, view.left),
+        width: mode === "rail" ? RAIL_WIDTH : Math.max(0, Math.min(box.right, view.right) - Math.max(box.left, view.left)),
+        maxHeight: Math.max(0, bottom - top),
+        active,
+        visible
+      };
+      setPlacement((previous) => Object.keys(next).every((key) => previous[key] === next[key]) ? previous : next);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const visibility = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+      intersects = _nullishCoalesce(_optionalChain([entries, 'access', _11 => _11[entries.length - 1], 'optionalAccess', _12 => _12.isIntersecting]), () => ( intersects));
+      schedule();
+    });
+    _optionalChain([visibility, 'optionalAccess', _13 => _13.observe, 'call', _14 => _14(element)]);
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    for (let parent = element; parent; parent = parent.parentElement) {
+      _optionalChain([resize, 'optionalAccess', _15 => _15.observe, 'call', _16 => _16(parent)]);
+    }
+    targets.current.forEach((target) => _optionalChain([resize, 'optionalAccess', _17 => _17.observe, 'call', _18 => _18(target)]));
+    document.addEventListener("scroll", schedule, { passive: true, capture: true });
+    window.addEventListener("resize", schedule);
+    _optionalChain([window, 'access', _19 => _19.visualViewport, 'optionalAccess', _20 => _20.addEventListener, 'call', _21 => _21("resize", schedule)]);
+    _optionalChain([window, 'access', _22 => _22.visualViewport, 'optionalAccess', _23 => _23.addEventListener, 'call', _24 => _24("scroll", schedule)]);
+    measure();
+    return () => {
+      cancelAnimationFrame(frame);
+      _optionalChain([resize, 'optionalAccess', _25 => _25.disconnect, 'call', _26 => _26()]);
+      _optionalChain([visibility, 'optionalAccess', _27 => _27.disconnect, 'call', _28 => _28()]);
+      document.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      _optionalChain([window, 'access', _29 => _29.visualViewport, 'optionalAccess', _30 => _30.removeEventListener, 'call', _31 => _31("resize", schedule)]);
+      _optionalChain([window, 'access', _32 => _32.visualViewport, 'optionalAccess', _33 => _33.removeEventListener, 'call', _34 => _34("scroll", schedule)]);
+    };
+  }, [keys, navigable, topOffset, scrollRoot]);
+  _react.useEffect.call(void 0, () => {
+    const index = indexRef.current;
+    const button = controls.current.get(_nullishCoalesce(_nullishCoalesce(focusId, () => ( _optionalChain([items, 'access', _35 => _35[placement.active], 'optionalAccess', _36 => _36.id]))), () => ( "")));
+    if (!index || !button || !placement.visible) return;
+    const horizontal = placement.mode === "row";
+    const start = horizontal ? button.offsetLeft : button.offsetTop;
+    const end = start + (horizontal ? button.offsetWidth : button.offsetHeight);
+    const position = horizontal ? index.scrollLeft : index.scrollTop;
+    const size = horizontal ? index.clientWidth : index.clientHeight;
+    const next = start < position ? start : end > position + size ? end - size : position;
+    if (horizontal) index.scrollLeft = next;
+    else index.scrollTop = next;
+  }, [placement.active, placement.mode, placement.visible, focusId, keys]);
+  function navigate(item) {
+    const target = targets.current.get(item.id);
+    if (!target) return;
+    const options = {
+      offset: topOffset + GAP + (placement.mode === "row" ? ROW_HEIGHT : 0),
+      behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+    };
+    if (_optionalChain([onNavigate, 'optionalCall', _37 => _37(item.id, target, options)]) === true) return;
+    const scrollElement = scroller.current;
+    const view = viewportBounds(scrollElement);
+    const top = (_nullishCoalesce(_optionalChain([scrollElement, 'optionalAccess', _38 => _38.scrollTop]), () => ( window.scrollY))) + target.getBoundingClientRect().top - view.top - options.offset;
+    if (scrollElement) scrollElement.scrollTo({ top, behavior: options.behavior });
+    else window.scrollTo({ top, behavior: options.behavior });
+  }
+  const activeId = _optionalChain([items, 'access', _39 => _39[placement.active], 'optionalAccess', _40 => _40.id]);
+  const tabId = focusId && items.some((item) => item.id === focusId) ? focusId : activeId;
+  const row = placement.mode === "row";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      ...props,
+      "data-slot": "scroll-navigator",
+      "data-orientation": row ? "horizontal" : "vertical",
+      ref: (element) => {
+        rootRef.current = element;
+        if (typeof forwardedRef === "function") forwardedRef(element);
+        else if (forwardedRef) forwardedRef.current = element;
+      },
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "relative min-w-0", navigable && row && "pt-16", className),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 flex-col gap-4", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            id: `${id}-${index}`,
+            "data-slot": "scroll-navigator-item",
+            "data-item-id": item.id,
+            ref: (element) => {
+              if (element) targets.current.set(item.id, element);
+              else targets.current.delete(item.id);
+            },
+            className: "min-w-0",
+            children: item.content
+          },
+          item.id
+        )) }),
+        navigable && placement.visible && _reactdom.createPortal.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "nav",
+            {
+              "aria-label": label,
+              "data-slot": "scroll-navigator-controls",
+              "data-orientation": row ? "horizontal" : "vertical",
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, "fixed z-20 flex rounded-full border border-border/60 bg-background/95 p-1 shadow-sm backdrop-blur-sm", row ? "items-center gap-1" : "flex-col items-center gap-1"),
+              style: { top: placement.top, left: placement.left, width: placement.width, maxHeight: placement.maxHeight },
+              onBlur: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) setFocusId(null);
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    ref: indexRef,
+                    "data-slot": "scroll-navigator-index",
+                    className: _chunkKWLSBTB2cjs.cn.call(void 0, "relative flex min-h-0 min-w-0 gap-1 overscroll-contain p-0.5 scrollbar-none", row ? "flex-1 overflow-x-auto" : "flex-col overflow-y-auto"),
+                    onKeyDown: (event) => {
+                      const current = items.findIndex((item) => controls.current.get(item.id) === document.activeElement);
+                      let next = current;
+                      if (event.key === "Home") next = 0;
+                      else if (event.key === "End") next = items.length - 1;
+                      else if (event.key === (row ? "ArrowRight" : "ArrowDown")) next = Math.min(items.length - 1, current + 1);
+                      else if (event.key === (row ? "ArrowLeft" : "ArrowUp")) next = Math.max(0, current - 1);
+                      else return;
+                      event.preventDefault();
+                      const button = controls.current.get(items[next].id);
+                      _optionalChain([button, 'optionalAccess', _41 => _41.focus, 'call', _42 => _42({ preventScroll: true })]);
+                      const index = indexRef.current;
+                      if (index && button) {
+                        if (row) index.scrollLeft = button.offsetLeft - (index.clientWidth - button.offsetWidth) / 2;
+                        else index.scrollTop = button.offsetTop - (index.clientHeight - button.offsetHeight) / 2;
+                      }
+                    },
+                    children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "button",
+                      {
+                        type: "button",
+                        ref: (element) => {
+                          if (element) controls.current.set(item.id, element);
+                          else controls.current.delete(item.id);
+                        },
+                        "aria-label": `${item.label}, ${index + 1} / ${items.length}`,
+                        title: item.label,
+                        "aria-controls": `${id}-${index}`,
+                        "aria-current": item.id === activeId ? "location" : void 0,
+                        tabIndex: item.id === tabId ? 0 : -1,
+                        onFocus: () => setFocusId(item.id),
+                        onClick: () => navigate(item),
+                        className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex size-11 shrink-0 items-center justify-center rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", item.id === activeId ? "border-primary bg-primary/10" : "border-transparent opacity-60 hover:bg-muted hover:opacity-100 focus-visible:opacity-100"),
+                        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWABCLRBRcjs.Avatar, { size: "xs", "aria-hidden": "true", children: [
+                          item.imageSrc ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWABCLRBRcjs.AvatarImage, { src: item.imageSrc, alt: "" }) : null,
+                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWABCLRBRcjs.AvatarFallback, { textSize: "micro", children: _nullishCoalesce(item.fallback, () => ( item.label.trim().split(/\s+/).map((word) => word[0]).slice(0, 2).join(""))) })
+                        ] })
+                      },
+                      item.id
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { "aria-hidden": "true", className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0 text-center text-[10px] tabular-nums text-muted-foreground", row ? "px-2" : "pb-1"), children: [
+                  placement.active + 1,
+                  " / ",
+                  items.length
+                ] })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+});
+
+
+
+exports.ScrollNavigator = ScrollNavigator;

package/dist/{chunk-5VMKDVB6.cjs → chunk-PD5UQEKY.cjs}

@@ -1,4 +1,7 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunk34AS3OCCcjs = require('./chunk-34AS3OCC.cjs');
 
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
@@ -18,6 +21,21 @@ var _jsxruntime = require('react/jsx-runtime');
 function MessageScrollerProvider(props) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _messagescroller.MessageScroller.Provider, { ...props });
 }
+function MessageScrollerNavigator(props) {
+  const { scrollToMessage } = _messagescroller.useMessageScroller.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34AS3OCCcjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
+    if (_optionalChain([props, 'access', _ => _.onNavigate, 'optionalCall', _2 => _2(id, target, options)]) === true) return true;
+    const message = target.closest("[data-message-id]");
+    const messageId = _optionalChain([message, 'optionalAccess', _3 => _3.dataset, 'access', _4 => _4.messageId]);
+    if (!messageId || !_optionalChain([message, 'optionalAccess', _5 => _5.parentElement])) return false;
+    const padding = Number.parseFloat(getComputedStyle(message.parentElement).paddingTop) || 0;
+    return scrollToMessage(messageId, {
+      align: "start",
+      behavior: options.behavior,
+      scrollMargin: message.getBoundingClientRect().top - target.getBoundingClientRect().top + options.offset - padding
+    });
+  } });
+}
 function MessageScroller({
   className,
   ...props
@@ -129,4 +147,5 @@ function MessageScrollerButton({
 
 
 
-exports.useMessageScroller = _messagescroller.useMessageScroller; exports.useMessageScrollerScrollable = _messagescroller.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _messagescroller.useMessageScrollerVisibility; exports.MessageScrollerProvider = MessageScrollerProvider; exports.MessageScroller = MessageScroller; exports.MessageScrollerViewport = MessageScrollerViewport; exports.MessageScrollerContent = MessageScrollerContent; exports.MessageScrollerItem = MessageScrollerItem; exports.MessageScrollerButton = MessageScrollerButton;
+
+exports.useMessageScroller = _messagescroller.useMessageScroller; exports.useMessageScrollerScrollable = _messagescroller.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _messagescroller.useMessageScrollerVisibility; exports.MessageScrollerProvider = MessageScrollerProvider; exports.MessageScrollerNavigator = MessageScrollerNavigator; exports.MessageScroller = MessageScroller; exports.MessageScrollerViewport = MessageScrollerViewport; exports.MessageScrollerContent = MessageScrollerContent; exports.MessageScrollerItem = MessageScrollerItem; exports.MessageScrollerButton = MessageScrollerButton;

package/dist/{chunk-2V7AVB2U.js → chunk-UBTLWSKK.js}

@@ -1,4 +1,7 @@
 "use client";
+import {
+  ScrollNavigator
+} from "./chunk-VT2WDFSU.js";
 import {
   Button
 } from "./chunk-W326GKML.js";
@@ -18,6 +21,21 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function MessageScrollerProvider(props) {
   return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Provider, { ...props });
 }
+function MessageScrollerNavigator(props) {
+  const { scrollToMessage } = useMessageScroller();
+  return /* @__PURE__ */ jsx(ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
+    if (props.onNavigate?.(id, target, options) === true) return true;
+    const message = target.closest("[data-message-id]");
+    const messageId = message?.dataset.messageId;
+    if (!messageId || !message?.parentElement) return false;
+    const padding = Number.parseFloat(getComputedStyle(message.parentElement).paddingTop) || 0;
+    return scrollToMessage(messageId, {
+      align: "start",
+      behavior: options.behavior,
+      scrollMargin: message.getBoundingClientRect().top - target.getBoundingClientRect().top + options.offset - padding
+    });
+  } });
+}
 function MessageScroller({
   className,
   ...props
@@ -124,6 +142,7 @@ export {
   useMessageScrollerScrollable,
   useMessageScrollerVisibility,
   MessageScrollerProvider,
+  MessageScrollerNavigator,
   MessageScroller,
   MessageScrollerViewport,
   MessageScrollerContent,

package/dist/chunk-VT2WDFSU.js

@@ -0,0 +1,256 @@
+"use client";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "./chunk-3OWGL4Q2.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/scroll-navigator.tsx
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GAP = 12;
+var RAIL_WIDTH = 56;
+var ROW_HEIGHT = 64;
+var initialPlacement = { mode: "row", top: 0, left: 0, width: 0, maxHeight: 0, active: 0, visible: false };
+function findScrollRoot(element) {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(parent).overflowY) && parent.scrollHeight > parent.clientHeight) return parent;
+  }
+  return null;
+}
+function viewportBounds(root) {
+  const viewport = window.visualViewport;
+  const top = viewport?.offsetTop ?? 0;
+  const left = viewport?.offsetLeft ?? 0;
+  const bounds = { top, left, right: left + (viewport?.width ?? innerWidth), bottom: top + (viewport?.height ?? innerHeight) };
+  for (let parent = root; parent; parent = parent.parentElement) {
+    const style = getComputedStyle(parent);
+    if (parent !== root && !/(auto|scroll|hidden|clip)/.test(`${style.overflowX} ${style.overflowY}`)) continue;
+    const rect = parent.getBoundingClientRect();
+    bounds.top = Math.max(bounds.top, rect.top + parent.clientTop);
+    bounds.left = Math.max(bounds.left, rect.left + parent.clientLeft);
+    bounds.right = Math.min(bounds.right, rect.left + parent.clientLeft + parent.clientWidth);
+    bounds.bottom = Math.min(bounds.bottom, rect.top + parent.clientTop + parent.clientHeight);
+  }
+  return bounds;
+}
+var ScrollNavigator = forwardRef(function ScrollNavigator2({
+  items,
+  label = "Browse items",
+  topOffset = 0,
+  scrollRoot,
+  onNavigate,
+  className,
+  ...props
+}, forwardedRef) {
+  const rootRef = useRef(null);
+  const targets = useRef(/* @__PURE__ */ new Map());
+  const controls = useRef(/* @__PURE__ */ new Map());
+  const indexRef = useRef(null);
+  const scroller = useRef(null);
+  const [placement, setPlacement] = useState(initialPlacement);
+  const [focusId, setFocusId] = useState(null);
+  const id = useId();
+  const keys = JSON.stringify(items.map((item) => item.id));
+  const navigable = items.length > 1;
+  useLayoutEffect(() => {
+    const element = rootRef.current;
+    if (!element || !navigable) return;
+    let frame = 0;
+    let intersects = true;
+    const measure = () => {
+      frame = 0;
+      if (!intersects) {
+        setPlacement((previous) => previous.visible ? { ...previous, visible: false } : previous);
+        return;
+      }
+      const scrollElement = scrollRoot === void 0 ? findScrollRoot(element) : scrollRoot;
+      scroller.current = scrollElement;
+      const view = viewportBounds(scrollElement);
+      const box = element.getBoundingClientRect();
+      const mode = box.left - view.left >= RAIL_WIDTH + GAP ? "rail" : "row";
+      const top = Math.max(view.top + topOffset + GAP, box.top);
+      const bottom = Math.min(view.bottom, box.bottom) - GAP;
+      const visible = box.width > 0 && box.right > view.left && box.left < view.right && bottom - top >= ROW_HEIGHT;
+      const readingEdge = view.top + topOffset + GAP + (mode === "row" ? ROW_HEIGHT : 0);
+      const active = visible ? Math.max(0, items.findIndex((item) => (targets.current.get(item.id)?.getBoundingClientRect().bottom ?? 0) > readingEdge + 1)) : 0;
+      const next = {
+        mode,
+        top,
+        left: mode === "rail" ? box.left - RAIL_WIDTH - GAP : Math.max(box.left, view.left),
+        width: mode === "rail" ? RAIL_WIDTH : Math.max(0, Math.min(box.right, view.right) - Math.max(box.left, view.left)),
+        maxHeight: Math.max(0, bottom - top),
+        active,
+        visible
+      };
+      setPlacement((previous) => Object.keys(next).every((key) => previous[key] === next[key]) ? previous : next);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const visibility = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+      intersects = entries[entries.length - 1]?.isIntersecting ?? intersects;
+      schedule();
+    });
+    visibility?.observe(element);
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    for (let parent = element; parent; parent = parent.parentElement) {
+      resize?.observe(parent);
+    }
+    targets.current.forEach((target) => resize?.observe(target));
+    document.addEventListener("scroll", schedule, { passive: true, capture: true });
+    window.addEventListener("resize", schedule);
+    window.visualViewport?.addEventListener("resize", schedule);
+    window.visualViewport?.addEventListener("scroll", schedule);
+    measure();
+    return () => {
+      cancelAnimationFrame(frame);
+      resize?.disconnect();
+      visibility?.disconnect();
+      document.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      window.visualViewport?.removeEventListener("resize", schedule);
+      window.visualViewport?.removeEventListener("scroll", schedule);
+    };
+  }, [keys, navigable, topOffset, scrollRoot]);
+  useEffect(() => {
+    const index = indexRef.current;
+    const button = controls.current.get(focusId ?? items[placement.active]?.id ?? "");
+    if (!index || !button || !placement.visible) return;
+    const horizontal = placement.mode === "row";
+    const start = horizontal ? button.offsetLeft : button.offsetTop;
+    const end = start + (horizontal ? button.offsetWidth : button.offsetHeight);
+    const position = horizontal ? index.scrollLeft : index.scrollTop;
+    const size = horizontal ? index.clientWidth : index.clientHeight;
+    const next = start < position ? start : end > position + size ? end - size : position;
+    if (horizontal) index.scrollLeft = next;
+    else index.scrollTop = next;
+  }, [placement.active, placement.mode, placement.visible, focusId, keys]);
+  function navigate(item) {
+    const target = targets.current.get(item.id);
+    if (!target) return;
+    const options = {
+      offset: topOffset + GAP + (placement.mode === "row" ? ROW_HEIGHT : 0),
+      behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+    };
+    if (onNavigate?.(item.id, target, options) === true) return;
+    const scrollElement = scroller.current;
+    const view = viewportBounds(scrollElement);
+    const top = (scrollElement?.scrollTop ?? window.scrollY) + target.getBoundingClientRect().top - view.top - options.offset;
+    if (scrollElement) scrollElement.scrollTo({ top, behavior: options.behavior });
+    else window.scrollTo({ top, behavior: options.behavior });
+  }
+  const activeId = items[placement.active]?.id;
+  const tabId = focusId && items.some((item) => item.id === focusId) ? focusId : activeId;
+  const row = placement.mode === "row";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "scroll-navigator",
+      "data-orientation": row ? "horizontal" : "vertical",
+      ref: (element) => {
+        rootRef.current = element;
+        if (typeof forwardedRef === "function") forwardedRef(element);
+        else if (forwardedRef) forwardedRef.current = element;
+      },
+      className: cn("relative min-w-0", navigable && row && "pt-16", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-4", children: items.map((item, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${id}-${index}`,
+            "data-slot": "scroll-navigator-item",
+            "data-item-id": item.id,
+            ref: (element) => {
+              if (element) targets.current.set(item.id, element);
+              else targets.current.delete(item.id);
+            },
+            className: "min-w-0",
+            children: item.content
+          },
+          item.id
+        )) }),
+        navigable && placement.visible && createPortal(
+          /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              "aria-label": label,
+              "data-slot": "scroll-navigator-controls",
+              "data-orientation": row ? "horizontal" : "vertical",
+              className: cn("fixed z-20 flex rounded-full border border-border/60 bg-background/95 p-1 shadow-sm backdrop-blur-sm", row ? "items-center gap-1" : "flex-col items-center gap-1"),
+              style: { top: placement.top, left: placement.left, width: placement.width, maxHeight: placement.maxHeight },
+              onBlur: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) setFocusId(null);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: indexRef,
+                    "data-slot": "scroll-navigator-index",
+                    className: cn("relative flex min-h-0 min-w-0 gap-1 overscroll-contain p-0.5 scrollbar-none", row ? "flex-1 overflow-x-auto" : "flex-col overflow-y-auto"),
+                    onKeyDown: (event) => {
+                      const current = items.findIndex((item) => controls.current.get(item.id) === document.activeElement);
+                      let next = current;
+                      if (event.key === "Home") next = 0;
+                      else if (event.key === "End") next = items.length - 1;
+                      else if (event.key === (row ? "ArrowRight" : "ArrowDown")) next = Math.min(items.length - 1, current + 1);
+                      else if (event.key === (row ? "ArrowLeft" : "ArrowUp")) next = Math.max(0, current - 1);
+                      else return;
+                      event.preventDefault();
+                      const button = controls.current.get(items[next].id);
+                      button?.focus({ preventScroll: true });
+                      const index = indexRef.current;
+                      if (index && button) {
+                        if (row) index.scrollLeft = button.offsetLeft - (index.clientWidth - button.offsetWidth) / 2;
+                        else index.scrollTop = button.offsetTop - (index.clientHeight - button.offsetHeight) / 2;
+                      }
+                    },
+                    children: items.map((item, index) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        ref: (element) => {
+                          if (element) controls.current.set(item.id, element);
+                          else controls.current.delete(item.id);
+                        },
+                        "aria-label": `${item.label}, ${index + 1} / ${items.length}`,
+                        title: item.label,
+                        "aria-controls": `${id}-${index}`,
+                        "aria-current": item.id === activeId ? "location" : void 0,
+                        tabIndex: item.id === tabId ? 0 : -1,
+                        onFocus: () => setFocusId(item.id),
+                        onClick: () => navigate(item),
+                        className: cn("flex size-11 shrink-0 items-center justify-center rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", item.id === activeId ? "border-primary bg-primary/10" : "border-transparent opacity-60 hover:bg-muted hover:opacity-100 focus-visible:opacity-100"),
+                        children: /* @__PURE__ */ jsxs(Avatar, { size: "xs", "aria-hidden": "true", children: [
+                          item.imageSrc ? /* @__PURE__ */ jsx(AvatarImage, { src: item.imageSrc, alt: "" }) : null,
+                          /* @__PURE__ */ jsx(AvatarFallback, { textSize: "micro", children: item.fallback ?? item.label.trim().split(/\s+/).map((word) => word[0]).slice(0, 2).join("") })
+                        ] })
+                      },
+                      item.id
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: cn("shrink-0 text-center text-[10px] tabular-nums text-muted-foreground", row ? "px-2" : "pb-1"), children: [
+                  placement.active + 1,
+                  " / ",
+                  items.length
+                ] })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+});
+
+export {
+  ScrollNavigator
+};

package/dist/primitives/chat.cjs

@@ -2,15 +2,15 @@
 "use client";
 
 
-var _chunkQWUMIAYDcjs = require('../chunk-QWUMIAYD.cjs');
 
 
-var _chunkYMI3X2YLcjs = require('../chunk-YMI3X2YL.cjs');
+var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
 
 
+var _chunkQWUMIAYDcjs = require('../chunk-QWUMIAYD.cjs');
 
 
-var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
+var _chunkYMI3X2YLcjs = require('../chunk-YMI3X2YL.cjs');
 
 
 
@@ -26,7 +26,8 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunk5VMKDVB6cjs = require('../chunk-5VMKDVB6.cjs');
+var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
+require('../chunk-34AS3OCC.cjs');
 
 
 
@@ -75,6 +76,7 @@ var _chunkFYRQFEU4cjs = require('../chunk-FYRQFEU4.cjs');
 
 var _chunk2KFZQJH5cjs = require('../chunk-2KFZQJH5.cjs');
 require('../chunk-PQUSJEXL.cjs');
+require('../chunk-WABCLRBR.cjs');
 require('../chunk-NKWHDI4C.cjs');
 
 
@@ -176,15 +178,15 @@ var ChatThread = _react.forwardRef.call(void 0,
     const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
     const anchorId = useArrivingUserTurnId(messages);
     const workspace = appearance === "workspace";
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunk5VMKDVB6cjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkPD5UQEKYcjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunk5VMKDVB6cjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkPD5UQEKYcjs.MessageScrollerContent,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
@@ -193,7 +195,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                 messages.map((m, index) => {
                   const isUser = m.role === "user";
                   if (m.status === "running") {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -206,7 +208,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                   const marker = markers[index];
                   const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                    _chunk5VMKDVB6cjs.MessageScrollerItem,
+                    _chunkPD5UQEKYcjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
@@ -262,15 +264,15 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
                 footer && // Always painted: content-visibility:auto would contain the
                 // footer's paint and layout, clipping a ring or shadow at its
                 // edge and re-parenting anything fixed inside it.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDown, { className: "h-4 w-4" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: scrollButtonLabel })
           ] })

package/dist/primitives/chat.js

@@ -1,16 +1,16 @@
 "use client";
 "use client";
+import {
+  Trace,
+  TraceLine,
+  TraceTitle
+} from "../chunk-Z45YKVAM.js";
 import {
   VoiceDictationButton
 } from "../chunk-JKVVTFAP.js";
 import {
   VoiceSessionControls
 } from "../chunk-KF4X37DP.js";
-import {
-  Trace,
-  TraceLine,
-  TraceTitle
-} from "../chunk-Z45YKVAM.js";
 import {
   Suggestion,
   Suggestions
@@ -26,7 +26,8 @@ import {
   MessageScrollerItem,
   MessageScrollerProvider,
   MessageScrollerViewport
-} from "../chunk-2V7AVB2U.js";
+} from "../chunk-UBTLWSKK.js";
+import "../chunk-VT2WDFSU.js";
 import {
   Message,
   MessageAction,
@@ -75,6 +76,7 @@ import {
   ActionDock
 } from "../chunk-42RTTHND.js";
 import "../chunk-QMA3WVB7.js";
+import "../chunk-3OWGL4Q2.js";
 import "../chunk-5OF6D3GH.js";
 import {
   Button

package/dist/primitives/message-scroller.cjs

@@ -10,7 +10,10 @@
 
 
 
-var _chunk5VMKDVB6cjs = require('../chunk-5VMKDVB6.cjs');
+
+var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
+require('../chunk-34AS3OCC.cjs');
+require('../chunk-WABCLRBR.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
@@ -23,4 +26,5 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.MessageScroller = _chunk5VMKDVB6cjs.MessageScroller; exports.MessageScrollerButton = _chunk5VMKDVB6cjs.MessageScrollerButton; exports.MessageScrollerContent = _chunk5VMKDVB6cjs.MessageScrollerContent; exports.MessageScrollerItem = _chunk5VMKDVB6cjs.MessageScrollerItem; exports.MessageScrollerProvider = _chunk5VMKDVB6cjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunk5VMKDVB6cjs.MessageScrollerViewport; exports.useMessageScroller = _chunk5VMKDVB6cjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunk5VMKDVB6cjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunk5VMKDVB6cjs.useMessageScrollerVisibility;
+
+exports.MessageScroller = _chunkPD5UQEKYcjs.MessageScroller; exports.MessageScrollerButton = _chunkPD5UQEKYcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkPD5UQEKYcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkPD5UQEKYcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkPD5UQEKYcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkPD5UQEKYcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkPD5UQEKYcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkPD5UQEKYcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkPD5UQEKYcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkPD5UQEKYcjs.useMessageScrollerVisibility;

package/dist/primitives/message-scroller.d.cts

@@ -3,14 +3,18 @@ import * as React from 'react';
 import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
 export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
 import { Button } from './button.cjs';
+import { ScrollNavigatorProps } from './scroll-navigator.cjs';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScroller$1.Provider>): react_jsx_runtime.JSX.Element;
+/** A list index inside a message. Jumps use the thread's own anchoring API,
+ * so incoming content cannot snap the reader back to the end of the thread. */
+declare function MessageScrollerNavigator(props: ScrollNavigatorProps): react_jsx_runtime.JSX.Element;
 declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Root>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Viewport>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Content>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScroller$1.Item>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScroller$1.Button> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): react_jsx_runtime.JSX.Element;
 
-export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerNavigator, MessageScrollerProvider, MessageScrollerViewport };

package/dist/primitives/message-scroller.d.ts

@@ -3,14 +3,18 @@ import * as React from 'react';
 import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
 export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
 import { Button } from './button.js';
+import { ScrollNavigatorProps } from './scroll-navigator.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScroller$1.Provider>): react_jsx_runtime.JSX.Element;
+/** A list index inside a message. Jumps use the thread's own anchoring API,
+ * so incoming content cannot snap the reader back to the end of the thread. */
+declare function MessageScrollerNavigator(props: ScrollNavigatorProps): react_jsx_runtime.JSX.Element;
 declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Root>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Viewport>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Content>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScroller$1.Item>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScroller$1.Button> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): react_jsx_runtime.JSX.Element;
 
-export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerNavigator, MessageScrollerProvider, MessageScrollerViewport };

package/dist/primitives/message-scroller.js

@@ -5,12 +5,15 @@ import {
   MessageScrollerButton,
   MessageScrollerContent,
   MessageScrollerItem,
+  MessageScrollerNavigator,
   MessageScrollerProvider,
   MessageScrollerViewport,
   useMessageScroller,
   useMessageScrollerScrollable,
   useMessageScrollerVisibility
-} from "../chunk-2V7AVB2U.js";
+} from "../chunk-UBTLWSKK.js";
+import "../chunk-VT2WDFSU.js";
+import "../chunk-3OWGL4Q2.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
@@ -18,6 +21,7 @@ export {
   MessageScrollerButton,
   MessageScrollerContent,
   MessageScrollerItem,
+  MessageScrollerNavigator,
   MessageScrollerProvider,
   MessageScrollerViewport,
   useMessageScroller,

package/dist/primitives/scroll-navigator.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+var _chunk34AS3OCCcjs = require('../chunk-34AS3OCC.cjs');
+require('../chunk-WABCLRBR.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.ScrollNavigator = _chunk34AS3OCCcjs.ScrollNavigator;

package/dist/primitives/scroll-navigator.d.cts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ScrollNavigatorItem {
+    /** Stable within this list. Separate lists can contain the same IDs. */
+    id: string;
+    label: string;
+    imageSrc?: string | null;
+    /** Initials or an icon; defaults to the label's initials. */
+    fallback?: ReactNode;
+    content: ReactNode;
+}
+interface ScrollNavigatorScrollOptions {
+    /** Space above the target, including the horizontal navigator when present. */
+    offset: number;
+    behavior: ScrollBehavior;
+}
+interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    items: readonly ScrollNavigatorItem[];
+    label?: string;
+    /** Space below a sticky header inside the scroll viewport, in pixels. */
+    topOffset?: number;
+    /** The nearest vertically scrolling ancestor is detected by default. */
+    scrollRoot?: HTMLElement | null;
+    /** Return true when a host scroller has handled the jump. */
+    onNavigate?: (id: string, target: HTMLElement, options: ScrollNavigatorScrollOptions) => boolean | void;
+}
+/**
+ * A list with an avatar index which follows the first item at the viewport's
+ * reading edge. The index lives only beside this list: it disappears before
+ * and after it. With no room in the left gutter it becomes a horizontal row.
+ * The row reserves space above the first item; later items scroll beneath it.
+ *
+ * Portalling the controls avoids clipping by cards, message bubbles and
+ * content-visibility containers. Their bounds still follow the list and its
+ * actual scroll viewport, never the full browser height of a nested pane.
+ */
+declare const ScrollNavigator: React.ForwardRefExoticComponent<ScrollNavigatorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ScrollNavigator, type ScrollNavigatorItem, type ScrollNavigatorProps, type ScrollNavigatorScrollOptions };

package/dist/primitives/scroll-navigator.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ScrollNavigatorItem {
+    /** Stable within this list. Separate lists can contain the same IDs. */
+    id: string;
+    label: string;
+    imageSrc?: string | null;
+    /** Initials or an icon; defaults to the label's initials. */
+    fallback?: ReactNode;
+    content: ReactNode;
+}
+interface ScrollNavigatorScrollOptions {
+    /** Space above the target, including the horizontal navigator when present. */
+    offset: number;
+    behavior: ScrollBehavior;
+}
+interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    items: readonly ScrollNavigatorItem[];
+    label?: string;
+    /** Space below a sticky header inside the scroll viewport, in pixels. */
+    topOffset?: number;
+    /** The nearest vertically scrolling ancestor is detected by default. */
+    scrollRoot?: HTMLElement | null;
+    /** Return true when a host scroller has handled the jump. */
+    onNavigate?: (id: string, target: HTMLElement, options: ScrollNavigatorScrollOptions) => boolean | void;
+}
+/**
+ * A list with an avatar index which follows the first item at the viewport's
+ * reading edge. The index lives only beside this list: it disappears before
+ * and after it. With no room in the left gutter it becomes a horizontal row.
+ * The row reserves space above the first item; later items scroll beneath it.
+ *
+ * Portalling the controls avoids clipping by cards, message bubbles and
+ * content-visibility containers. Their bounds still follow the list and its
+ * actual scroll viewport, never the full browser height of a nested pane.
+ */
+declare const ScrollNavigator: React.ForwardRefExoticComponent<ScrollNavigatorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ScrollNavigator, type ScrollNavigatorItem, type ScrollNavigatorProps, type ScrollNavigatorScrollOptions };

package/dist/primitives/scroll-navigator.js

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  ScrollNavigator
+} from "../chunk-VT2WDFSU.js";
+import "../chunk-3OWGL4Q2.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  ScrollNavigator
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -950,6 +950,16 @@
         "default": "./dist/primitives/scroll-area.cjs"
       }
     },
+    "./primitives/scroll-navigator": {
+      "import": {
+        "types": "./dist/primitives/scroll-navigator.d.ts",
+        "default": "./dist/primitives/scroll-navigator.js"
+      },
+      "require": {
+        "types": "./dist/primitives/scroll-navigator.d.cts",
+        "default": "./dist/primitives/scroll-navigator.cjs"
+      }
+    },
     "./primitives/search-input": {
       "import": {
         "types": "./dist/primitives/search-input.d.ts",