rift-ds 1.16.0 → 1.18.0

package/bin/templates/blocks/app/dashboard/page.module.css

@@ -1,6 +1,7 @@
 /* The dashboard's grid. Four stats across on a desktop, two from the
-   laptop width down to a phone; the two panels sit side by side until the
-   tablet width, then stack. */
+   laptop width down to a phone, where each stat drops its delta under its
+   label once its tile is narrow (deltaPlacement="auto"); the two panels sit
+   side by side until the tablet width, then stack. */
 
 .stats {
   display: grid;
@@ -81,7 +82,7 @@
 
 @media (max-width: 600px) {
   .stats {
-    gap: var(--gap-400);
+    gap: var(--gap-300);
   }
 
   .panels {

package/bin/templates/blocks/app/dashboard/page.tsx

@@ -85,7 +85,7 @@ export default function DashboardPage() {
               value={stat.value}
               delta={stat.delta}
               trend={stat.trend}
-              deltaPlacement="inline"
+              deltaPlacement="auto"
             />
           </Panel>
         ))}

package/bin/templates/blocks/components/blocks/AppShell.module.css

@@ -29,6 +29,7 @@
 }
 
 .content {
+  position: relative;
   width: 100%;
   max-width: 1440px;
   min-width: 0;
@@ -40,12 +41,61 @@
 
 /* ---------------------------------------------------------- top bar */
 
+/* The bar holds one inset off the top of the page and the content runs
+   under it. Once the page scrolls (data-stuck), the page colour fills the
+   strip above it, fading out across the bar, and the blur behind it
+   dissolves a few rows below. */
 .topBar {
+  position: sticky;
+  top: var(--shell-inset);
+  z-index: var(--layer-sticky);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-200);
   min-height: var(--control-height-default);
+  /* Room between the bar and the page header under it. */
+  margin-bottom: var(--gap-400);
+}
+
+.topBar::before {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--shell-inset));
+  bottom: 0;
+  inset-inline: calc(-1 * var(--padding-400));
+  z-index: -1;
+  background: linear-gradient(to bottom, var(--color-bg-page-primary) var(--shell-inset), transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.topBar[data-stuck]::before {
+  opacity: 1;
+}
+
+.topBarBlur:global(.ds-progressive-blur) {
+  position: absolute;
+  top: calc(-1 * var(--shell-inset));
+  bottom: calc(-1 * var(--gap-1000));
+  inset-inline: calc(-1 * var(--padding-400));
+  height: auto;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.topBarBlur:global(.ds-progressive-blur--tinted) {
+  opacity: 1;
+}
+
+/* A one-pixel marker at the bar's resting place. Absolute, so the
+   column's gap skips it; it keeps its static place at the column's top. */
+.topBarMarker {
+  position: absolute;
+  width: 1px;
+  height: 1px;
 }
 
 .search {

package/bin/templates/blocks/components/blocks/AppShell.tsx

@@ -7,13 +7,17 @@
  * set. This file is yours: rename the product, change the navigation, and
  * grow it with your app.
  *
+ * The top bar sticks to the top of the page and the content scrolls under
+ * it: bare while the page is at the top, then a fill above it and the
+ * library's ProgressiveBlur behind it fade in once the page scrolls.
+ *
  * Responsive by construction: above 768px the sidebar floats beside the
  * page and the content moves over by its width; below it the sidebar
  * becomes a drawer behind its own menu button, the search field folds to
  * its icon, and the content runs edge to edge at a tighter gutter.
  */
 
-import { useState, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { AiButton } from 'rift-ds/components/AiButton/AiButton';
 import {
   AppSidebar,
@@ -22,6 +26,7 @@ import {
 } from 'rift-ds/components/AppSidebar/AppSidebar';
 import { Breadcrumb, type BreadcrumbItem } from 'rift-ds/components/Breadcrumb/Breadcrumb';
 import { CommandPaletteTrigger } from 'rift-ds/components/CommandPaletteTrigger/CommandPaletteTrigger';
+import { ProgressiveBlur } from 'rift-ds/components/ProgressiveBlur/ProgressiveBlur';
 import { ThemeToggle } from 'rift-ds/components/ThemeToggle/ThemeToggle';
 import styles from './AppShell.module.css';
 
@@ -69,6 +74,18 @@ export interface AppShellProps {
 export function AppShell({ activeKey, breadcrumb, title, actions, children }: AppShellProps) {
   const [expanded, setExpanded] = useState(true);
 
+  // The top bar is stuck once the marker at its resting place scrolls out
+  // of view; the fill and the blur behind the bar follow.
+  const markerRef = useRef<HTMLDivElement>(null);
+  const [stuck, setStuck] = useState(false);
+  useEffect(() => {
+    const marker = markerRef.current;
+    if (!marker) return;
+    const observer = new IntersectionObserver(([entry]) => setStuck(!entry.isIntersecting));
+    observer.observe(marker);
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className={styles.shell}>
       <AppSidebar
@@ -78,21 +95,23 @@ export function AppShell({ activeKey, breadcrumb, title, actions, children }: Ap
         expanded={expanded}
         onExpandedChange={setExpanded}
         logoText={PRODUCT_NAME}
-        floating
+        layout="floating"
       />
 
       <div className={`${styles.main} ${expanded ? styles.mainExpanded : ''}`}>
         <div className={styles.content}>
-          <header className={styles.topBar}>
+          <div ref={markerRef} className={styles.topBarMarker} aria-hidden="true" />
+          <header className={styles.topBar} data-stuck={stuck ? '' : undefined}>
+            <ProgressiveBlur className={styles.topBarBlur} tinted={stuck} />
             {/* Wire both to your command palette: CommandPalette from
                 rift-ds, opened from here and from Cmd+K. */}
-            <CommandPaletteTrigger size="compact" className={styles.search} />
+            <CommandPaletteTrigger className={styles.search} />
             <div className={styles.topBarActions}>
-              <CommandPaletteTrigger size="compact" iconOnly className={styles.searchIcon} />
+              <CommandPaletteTrigger iconOnly className={styles.searchIcon} />
               {/* The AI entry. Point it at your chat: `npx rift-ds init chat`
                   scaffolds one, and ChatLauncher opens it. */}
-              <AiButton size="compact" />
-              <ThemeToggle size="compact" showLabels={false} />
+              <AiButton />
+              <ThemeToggle showLabels={false} />
             </div>
           </header>
 

package/chat/ChatLauncher.d.ts

@@ -44,6 +44,16 @@ export interface ChatLauncherProps {
     widget?: Omit<ChatWidgetProps, 'fullscreenEnabled' | 'placementEnabled' | 'compact' | 'phone'>;
     /** Rendered inside the panel after the widget: for a host's extra chrome. */
     children?: ReactNode;
+    /**
+     * How the docked panel sits on the page. `raised` (the default) is a glass
+     * card with the floating shadow, inset by `--ds-chat-inset`. `inset` is
+     * flat: the app surface colour, no shadow, border or blur, and the
+     * `--ds-shell-inset` gap, so it matches AppLayout's `inset` content
+     * surface beside it. The overlay below the dock threshold takes the same
+     * gap but keeps its shadow, since it still covers the page; the floating
+     * card and the takeover keep their own look.
+     */
+    surface?: 'raised' | 'inset';
 }
 /**
  * The site-wide panel. Mount it once, after the page content, so it sits
@@ -68,4 +78,4 @@ export interface ChatLauncherProps {
  * touch the host's body). The panel's geometry reads `--ds-chat-width`,
  * `--ds-chat-inset` and `--ds-chat-float-height`, defaulted on `:root`.
  */
-export declare function ChatLauncher({ label, icon, summary, hidden, panelId, hostAttribute, panelLabel, aiButtonLabels, widget, children, }: ChatLauncherProps): import("react").JSX.Element | null;
+export declare function ChatLauncher({ label, icon, summary, hidden, panelId, hostAttribute, panelLabel, aiButtonLabels, widget, children, surface, }: ChatLauncherProps): import("react").JSX.Element | null;

package/chat/ChatLauncher.js

@@ -44,7 +44,8 @@ function ChatLauncher({
   panelLabel = "Chat",
   aiButtonLabels,
   widget,
-  children
+  children,
+  surface = "raised"
 }) {
   const { open, setOpen, panelPhase, view, side, floating, returnFocusRef, send } = useChatWidget();
   const launchSuggestion = (id) => {
@@ -270,6 +271,10 @@ function ChatLauncher({
     side === "left" ? "ds-chat-launcher__panel--left" : "",
     isFloating ? "ds-chat-launcher__panel--floating" : "",
     isFull ? "ds-chat-launcher__panel--full" : "",
+    // Inset: the dock and the overlay both sit at the shell's gap; only the
+    // dock goes flat, since the overlay still covers the page.
+    surface === "inset" && !isFloating && !isFull ? "ds-chat-launcher__panel--inset" : "",
+    surface === "inset" && docked && !isFloating && !isFull ? "ds-chat-launcher__panel--flat" : "",
     panelPhase === "closing" ? "ds-chat-launcher__panel--closing" : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -332,6 +337,7 @@ function ChatLauncher({
         className: [
           "ds-chat-launcher__dock-handle",
           side === "left" ? "ds-chat-launcher__dock-handle--left" : "",
+          surface === "inset" ? "ds-chat-launcher__dock-handle--inset" : "",
           resizing ? "ds-chat-launcher__dock-handle--resizing" : ""
         ].filter(Boolean).join(" "),
         "aria-hidden": "true",

package/chat/ChatThreads.d.ts

@@ -11,6 +11,8 @@ export interface ChatThreadsProps {
     logoText?: string;
     /** The signed-in person, shown on the inline rail. */
     profile?: ThreadPanelProfile;
+    /** Rendered in the rail's footer in both seats (above the profile row on the inline rail; the sheet has none): a theme toggle, a link out. Fades out while the inline rail is collapsed. */
+    footerSlot?: ReactNode;
     /** Whether the inline rail can collapse to its icon strip. */
     collapsible?: boolean;
     /**
@@ -38,4 +40,4 @@ export interface ChatThreadsProps {
  * thread lifecycle (`useThreads`). The widget seats it inline on a wide
  * host and as a slide-over sheet on a narrow one, and tells it which.
  */
-export declare function ChatThreads({ overlay, close, logo, logoText, profile, collapsible, defaultExpanded, historyLabel, threadPanelLabels, actionLabels, }: ChatThreadsProps): import("react").JSX.Element;
+export declare function ChatThreads({ overlay, close, logo, logoText, profile, footerSlot, collapsible, defaultExpanded, historyLabel, threadPanelLabels, actionLabels, }: ChatThreadsProps): import("react").JSX.Element;

package/chat/ChatThreads.js

@@ -9,6 +9,7 @@ function ChatThreads({
   logo,
   logoText,
   profile,
+  footerSlot,
   collapsible = true,
   defaultExpanded = false,
   historyLabel = "Chat history",
@@ -65,7 +66,8 @@ function ChatThreads({
       logoText: overlay ? logoText : void 0,
       expanded: overlay || !collapsible ? true : expanded,
       onExpandedChange: overlay || !collapsible ? void 0 : setExpanded,
-      profile: overlay ? void 0 : profile
+      profile: overlay ? void 0 : profile,
+      footerSlot
     }
   );
 }

package/chat/ChatWidget.css

@@ -995,6 +995,22 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   left: var(--ds-chat-inset); /* ds-allow(physical): the left dock is the screen's left edge */
 }
 
+/* The inset surface (ChatLauncher's surface="inset"). Docked and as an
+   overlay, the panel is held off the edges by the shell's gap rather than
+   the chat's own, so it lines up with AppLayout's inset content surface.
+   Docked, it is also flat: a plane on the app surface colour with no
+   shadow, border or blur. The overlay keeps its shadow over the page. */
+.ds-chat-launcher__panel--inset {
+  --ds-chat-inset: var(--ds-shell-inset, 10px); /* AppSidebar.css declares the gap; the fallback mirrors it */
+}
+
+.ds-chat-launcher__panel--flat {
+  background: var(--color-bg-app-surface);
+  border-color: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
 /* Fullscreen view: a true viewport takeover. The stronger blur keeps the
    transcript readable while the page's colours still shine through. The
    border fades rather than vanishing, so the geometry never snaps mid-glide. */
@@ -1047,6 +1063,11 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   left: calc(var(--ds-chat-inset) + var(--ds-chat-width) - 10px); /* ds-allow(physical): the dock grip tracks the docked card's screen edge */
 }
 
+/* The inset surface's dock sits at the shell's gap, so its grip does too. */
+.ds-chat-launcher__dock-handle--inset {
+  --ds-chat-inset: var(--ds-shell-inset, 10px); /* AppSidebar.css declares the gap; the fallback mirrors it */
+}
+
 .ds-chat-launcher__dock-handle::after {
   content: "";
   width: 4px;

package/components/AppLayout/AppLayout.css

@@ -19,7 +19,7 @@
   /* The rail's width plus, while it shows, the side panel's. */
   margin-inline-start: calc(var(--ds-app-layout-rail, 64px) + var(--ds-app-layout-panel, 0px));
   padding: var(--padding-1000) var(--padding-500);
-  transition: margin-left var(--motion-duration-slow) var(--motion-ease-emphasized);
+  transition: margin-inline-start var(--motion-duration-slow) var(--motion-ease-emphasized);
   min-width: 0;
 }
 
@@ -47,6 +47,72 @@
   gap: var(--gap-1000);
 }
 
+/* ============================================
+   FLOATING LAYOUT — the rail floats as a glass
+   card, so the main column clears its inset on
+   both sides of it
+   ============================================ */
+.ds-app-layout--floating .ds-app-layout__main {
+  margin-inline-start: calc(
+    var(--ds-app-layout-rail, 64px) + var(--ds-app-layout-panel, 0px) +
+      var(--ds-sidebar-float-inset, 20px) * 2
+  );
+}
+
+/* ============================================
+   INSET LAYOUT — the rail flush on the shell
+   colour, the content full width in a surface
+   inset from the other three edges. The page
+   holds the viewport and the surface scrolls.
+   The rail's own item inset is the gap on its
+   side, so the selected item sits evenly
+   between the two edges.
+   ============================================ */
+.ds-app-layout--inset {
+  height: 100dvh;
+  min-height: 0;
+  background-color: var(--color-bg-app-shell);
+}
+
+.ds-app-layout--inset .ds-app-layout__main {
+  padding: var(--ds-shell-inset);
+  padding-inline-start: 0;
+  min-height: 0;
+}
+
+.ds-app-layout__surface {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+  background-color: var(--color-bg-app-surface);
+  border-radius: var(--radius-600);
+}
+
+.ds-app-layout__scroller {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--padding-1000) var(--padding-1000);
+  /* The scrollbar stays invisible until the surface scrolls (data-scrolling
+     is set by the scroll handler and cleared once it settles). */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.ds-app-layout__scroller[data-scrolling] {
+  scrollbar-color: var(--color-bg-container-border) transparent;
+}
+
+/* Full width in the surface, and a size container: content inside can
+   restack by the room the surface gives it (an open chat panel or an
+   expanded rail narrows it without the viewport changing) with
+   @container ds-app-layout-content queries. */
+.ds-app-layout--inset .ds-app-layout__content {
+  max-width: none;
+  container: ds-app-layout-content / inline-size;
+}
+
 /* ============================================
    RESPONSIVE
    ============================================ */
@@ -56,7 +122,29 @@
     padding: var(--padding-500) var(--padding-400);
   }
 
-  .ds-app-layout--expanded .ds-app-layout__main {
+  .ds-app-layout--expanded .ds-app-layout__main,
+  .ds-app-layout--floating .ds-app-layout__main {
     margin-inline-start: 0;
   }
+
+  /* Phones: the rail is a drawer, so the inset surface runs edge to edge
+     and the page scrolls normally. */
+  .ds-app-layout--inset {
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .ds-app-layout--inset .ds-app-layout__main {
+    padding: 0;
+  }
+
+  .ds-app-layout__surface {
+    overflow: visible;
+    border-radius: 0;
+  }
+
+  .ds-app-layout__scroller {
+    overflow-y: visible;
+    padding: var(--padding-500) var(--padding-400);
+  }
 }

package/components/AppLayout/AppLayout.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { AppSidebarSection, AppSidebarProfile } from '../AppSidebar/AppSidebar';
+import { AppSidebarSection, AppSidebarProfile, AppSidebarLayout } from '../AppSidebar/AppSidebar';
 import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by AppLayout itself — everything else falls through to the outer wrapper `<div>`. */
 type AppLayoutOwnProps = {
@@ -23,6 +23,14 @@ type AppLayoutOwnProps = {
     logo?: React.ReactNode;
     /** Page content — centred in the main area */
     children: React.ReactNode;
+    /**
+     * How the rail and the content meet the page. `flush` (the default) runs
+     * the rail edge to edge with the content centred beside it. `floating`
+     * floats the rail as a glass card, the content still centred. `inset` runs
+     * the rail flush on the app shell colour and sets the content full width
+     * in a surface inset from the other edges, which scrolls inside itself.
+     */
+    layout?: AppSidebarLayout;
     /**
      * Colour scheme: 'dark' pins the layout to the dark theme (the historical
      * behaviour and the default); 'inherit' drops the pin so the layout
@@ -42,7 +50,7 @@ export interface AppLayoutProps extends AppLayoutOwnProps, Omit<React.ComponentP
 }
 /**
  * AppLayout — full-page template with a collapsible sidebar
- * and a centred content area.
+ * and a content area, centred or set in an inset surface (see `layout`).
  *
  * The forwarded ref and any unrecognised props target the outer wrapper
  * `<div>`. With `theme="inherit"` a `data-theme` passed by the consumer

package/components/AppLayout/AppLayout.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef, useEffect } from "react";
 import { AppSidebar } from "../AppSidebar/AppSidebar.js";
+import { MOTION_SCROLL_SETTLE_MS } from "../../tokens/motion.js";
 import "./AppLayout.css";
 const AppLayout = React.forwardRef(
   ({
@@ -15,6 +16,7 @@ const AppLayout = React.forwardRef(
     logoText,
     logo,
     children,
+    layout = "flush",
     theme = "dark",
     linkComponent,
     className = "",
@@ -25,9 +27,20 @@ const AppLayout = React.forwardRef(
     const handleExpandedChange = useCallback((next) => {
       setExpanded(next);
     }, []);
+    const scrollTimer = useRef(void 0);
+    useEffect(() => () => clearTimeout(scrollTimer.current), []);
+    const handleSurfaceScroll = useCallback((event) => {
+      const scroller = event.currentTarget;
+      scroller.dataset.scrolling = "";
+      clearTimeout(scrollTimer.current);
+      scrollTimer.current = setTimeout(() => {
+        delete scroller.dataset.scrolling;
+      }, MOTION_SCROLL_SETTLE_MS);
+    }, []);
     const classes = [
       baseClass,
       expanded ? `${baseClass}--expanded` : "",
+      layout !== "flush" ? `${baseClass}--${layout}` : "",
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs(
@@ -51,10 +64,15 @@ const AppLayout = React.forwardRef(
               onExpandedChange: handleExpandedChange,
               logoText,
               logo,
+              layout,
               linkComponent
             }
           ),
-          /* @__PURE__ */ jsx("main", { className: `${baseClass}__main`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
+          /* @__PURE__ */ jsx("main", { className: `${baseClass}__main`, children: layout === "inset" ? (
+            // The surface clips to its rounded corners and the scroller
+            // inside it scrolls, so the scrollbar never squares a corner.
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__surface`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__scroller`, onScroll: handleSurfaceScroll, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) }) })
+          ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
         ]
       }
     );