@epicbagel/saas-kit 1.13.0 → 1.15.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
+};