@epicbagel/saas-kit 1.18.0 → 1.19.0

package/README.md

@@ -15,6 +15,15 @@ npm install @epicbagel/saas-kit
 Peer dependencies: `react` and `react-dom` (18 or 19), `lucide-react`
 (`>=0.400.0 <2`), `react-icons` (5) and `tailwindcss` (4.3 or later).
 
+## Frosted scroll navigation
+
+`ScrollNavigator frosted` gives its floating controls a translucent themed
+background with 16px backdrop blur. `MessageScrollerNavigator` forwards the same
+option. The default appearance, list layout and navigation behavior are unchanged.
+The surface stays opaque when backdrop blur is unsupported, reduced transparency
+is requested, or forced colours are active. Import the kit's `globals.css` (or
+`tokens.css` and `utilities.css`) as usual.
+
 ## Page header actions
 
 `PageHeaderActions` expands its actions on desktop and collapses them into

package/dist/{chunk-HSSSNAVX.cjs → chunk-23IETCLV.cjs}

@@ -1,7 +1,7 @@
 "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 _chunk6AMSRIQ4cjs = require('./chunk-6AMSRIQ4.cjs');
+var _chunkDMPSKGFMcjs = require('./chunk-DMPSKGFM.cjs');
 
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
@@ -23,7 +23,7 @@ function MessageScrollerProvider(props) {
 }
 function MessageScrollerNavigator(props) {
   const { scrollToMessage } = _messagescroller.useMessageScroller.call(void 0, );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6AMSRIQ4cjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDMPSKGFMcjs.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]);

package/dist/{chunk-V3XA7SDK.js → chunk-36LNA4WM.js}

@@ -58,6 +58,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
   scrollRoot,
   onNavigate,
   className,
+  frosted = false,
   ...props
 }, forwardedRef) {
   const rootRef = useRef(null);
@@ -195,7 +196,8 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
               "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"),
+              "data-frosted-surface": frosted ? "background" : void 0,
+              className: cn("fixed z-20 flex rounded-full border border-border/60 p-1 shadow-sm", !frosted && "bg-background/95 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);
@@ -249,7 +251,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
                     ))
                   }
                 ),
-                /* @__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: [
+                /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: cn("shrink-0 text-center text-[10px] tabular-nums", frosted ? "text-foreground" : "text-muted-foreground", row ? "px-2" : "pb-1"), children: [
                   placement.active + 1,
                   " / ",
                   items.length

package/dist/{chunk-6AMSRIQ4.cjs → chunk-DMPSKGFM.cjs}

@@ -58,6 +58,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
   scrollRoot,
   onNavigate,
   className,
+  frosted = false,
   ...props
 }, forwardedRef) {
   const rootRef = _react.useRef.call(void 0, null);
@@ -195,7 +196,8 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
               "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"),
+              "data-frosted-surface": frosted ? "background" : void 0,
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, "fixed z-20 flex rounded-full border border-border/60 p-1 shadow-sm", !frosted && "bg-background/95 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);
@@ -249,7 +251,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
                     ))
                   }
                 ),
-                /* @__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: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { "aria-hidden": "true", className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0 text-center text-[10px] tabular-nums", frosted ? "text-foreground" : "text-muted-foreground", row ? "px-2" : "pb-1"), children: [
                   placement.active + 1,
                   " / ",
                   items.length

package/dist/{chunk-EXXJXOUO.js → chunk-OUZSIA5G.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   ScrollNavigator
-} from "./chunk-V3XA7SDK.js";
+} from "./chunk-36LNA4WM.js";
 import {
   Button
 } from "./chunk-W326GKML.js";

package/dist/primitives/chat.cjs

@@ -26,8 +26,8 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
-require('../chunk-6AMSRIQ4.cjs');
+var _chunk23IETCLVcjs = require('../chunk-23IETCLV.cjs');
+require('../chunk-DMPSKGFM.cjs');
 
 
 
@@ -179,15 +179,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, _chunkHSSSNAVXcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkHSSSNAVXcjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunk23IETCLVcjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkHSSSNAVXcjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunk23IETCLVcjs.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"
@@ -196,7 +196,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, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -209,7 +209,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, 
-                    _chunkHSSSNAVXcjs.MessageScrollerItem,
+                    _chunk23IETCLVcjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
@@ -265,15 +265,15 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.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, _chunkHSSSNAVXcjs.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, _chunk23IETCLVcjs.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, _chunkHSSSNAVXcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23IETCLVcjs.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

@@ -26,8 +26,8 @@ import {
   MessageScrollerItem,
   MessageScrollerProvider,
   MessageScrollerViewport
-} from "../chunk-EXXJXOUO.js";
-import "../chunk-V3XA7SDK.js";
+} from "../chunk-OUZSIA5G.js";
+import "../chunk-36LNA4WM.js";
 import {
   Message,
   MessageAction,

package/dist/primitives/message-scroller.cjs

@@ -11,8 +11,8 @@
 
 
 
-var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
-require('../chunk-6AMSRIQ4.cjs');
+var _chunk23IETCLVcjs = require('../chunk-23IETCLV.cjs');
+require('../chunk-DMPSKGFM.cjs');
 require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-JDEXZGIY.cjs');
@@ -28,4 +28,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.MessageScroller = _chunkHSSSNAVXcjs.MessageScroller; exports.MessageScrollerButton = _chunkHSSSNAVXcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkHSSSNAVXcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkHSSSNAVXcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkHSSSNAVXcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkHSSSNAVXcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkHSSSNAVXcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkHSSSNAVXcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkHSSSNAVXcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkHSSSNAVXcjs.useMessageScrollerVisibility;
+exports.MessageScroller = _chunk23IETCLVcjs.MessageScroller; exports.MessageScrollerButton = _chunk23IETCLVcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunk23IETCLVcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunk23IETCLVcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunk23IETCLVcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunk23IETCLVcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunk23IETCLVcjs.MessageScrollerViewport; exports.useMessageScroller = _chunk23IETCLVcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunk23IETCLVcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunk23IETCLVcjs.useMessageScrollerVisibility;

package/dist/primitives/message-scroller.js

@@ -11,8 +11,8 @@ import {
   useMessageScroller,
   useMessageScrollerScrollable,
   useMessageScrollerVisibility
-} from "../chunk-EXXJXOUO.js";
-import "../chunk-V3XA7SDK.js";
+} from "../chunk-OUZSIA5G.js";
+import "../chunk-36LNA4WM.js";
 import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-W326GKML.js";

package/dist/primitives/scroll-navigator.cjs

@@ -2,10 +2,10 @@
 "use client";
 
 
-var _chunk6AMSRIQ4cjs = require('../chunk-6AMSRIQ4.cjs');
+var _chunkDMPSKGFMcjs = require('../chunk-DMPSKGFM.cjs');
 require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.ScrollNavigator = _chunk6AMSRIQ4cjs.ScrollNavigator;
+exports.ScrollNavigator = _chunkDMPSKGFMcjs.ScrollNavigator;

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

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Translucent, blurred floating controls with a solid fallback. Cards are unchanged. */
+    frosted?: boolean;
     /** Card columns above the small breakpoint; always one column on mobile. */
     columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */

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

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Translucent, blurred floating controls with a solid fallback. Cards are unchanged. */
+    frosted?: boolean;
     /** Card columns above the small breakpoint; always one column on mobile. */
     columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */

package/dist/primitives/scroll-navigator.js

@@ -2,7 +2,7 @@
 "use client";
 import {
   ScrollNavigator
-} from "../chunk-V3XA7SDK.js";
+} from "../chunk-36LNA4WM.js";
 import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-G6SRSWXB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [

package/src/styles/components/frosted-surface.css

@@ -0,0 +1,38 @@
+/* Opt-in chrome surfaces. Complete semantic colours keep every palette and
+ * mode working; unsupported blur, reduced transparency and forced colours
+ * retain an opaque, readable surface. No sizing or positioning lives here. */
+@layer components {
+  [data-frosted-surface="background"] { --color-frosted-surface: var(--color-background); }
+  [data-frosted-surface="card"] { --color-frosted-surface: var(--color-card); }
+  [data-frosted-surface="muted"] { --color-frosted-surface: var(--color-muted); }
+
+  [data-frosted-surface] {
+    background-color: var(--color-frosted-surface);
+  }
+
+  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    [data-frosted-surface] {
+      background-color: color-mix(in oklab, var(--color-frosted-surface) 70%, transparent);
+      -webkit-backdrop-filter: blur(16px);
+      backdrop-filter: blur(16px);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    [data-frosted-surface] {
+      background-color: var(--color-frosted-surface);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    [data-frosted-surface] {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+}

package/src/styles/components.css

@@ -4,3 +4,4 @@
 @import "./components/marker.css";
 @import "./components/message.css";
 @import "./components/message-scroller.css";
+@import "./components/frosted-surface.css";