rift-ds 1.17.0 → 1.19.0

package/behaviors/useAnchoredPosition.d.ts

@@ -4,7 +4,9 @@
  * hover cards, tooltips).
  *
  * The panel stays where it is in the DOM, so it keeps the trigger's stacking
- * context and any theme scoped above it, but is `position: fixed`, placed
+ * context (a tooltip excepted, which paints in the top layer through
+ * src/behaviors/useTopLayer) and any theme scoped above it, but is
+ * `position: fixed`, placed
  * from the anchor's rectangle. A fixed panel is not clipped by an ancestor's
  * `overflow`, which is what lets a menu inside a table's scroll wrapper, a
  * rail or a card show whole. Portals would escape the same way but would

package/behaviors/useAnchoredPosition.js

@@ -2,6 +2,7 @@
 import { useRef, useLayoutEffect } from "react";
 import { isRtl } from "./direction.js";
 function fixedContainingBlock(element) {
+  if (element.matches(":popover-open")) return null;
   for (let node = element.parentElement; node; node = node.parentElement) {
     const style = getComputedStyle(node);
     const read = (property) => style.getPropertyValue(property).trim();

package/behaviors/useTopLayer.d.ts

@@ -0,0 +1,35 @@
+import { RefObject } from 'react';
+/**
+ * Lifts a panel into the browser's top layer while `open`, so it paints
+ * above everything on the page: every z-index, every stacking context, every
+ * `overflow` clip. Tooltips always sit here; no layer token can rank above
+ * the top layer, so nothing a page or a host does can cover one.
+ *
+ * The panel renders with `popover="manual"` and this hook calls
+ * `showPopover()` / `hidePopover()`. A panel that must stay in the
+ * accessibility tree at rest (SegmentedControl's segment labels, which are
+ * the segments' names) cannot carry the attribute, since a closed popover is
+ * `display: none`; the hook adds it for as long as the panel is shown and
+ * takes it off again. A manual popover has no light dismiss
+ * and closes no other popover, so dismissal stays with the shared layer
+ * stack (src/behaviors/useLayer). The panel keeps its place in the DOM, so
+ * it still inherits the custom properties of any theme scoped above it; only
+ * where it paints changes.
+ *
+ * Call it before useAnchoredPosition in the component: layout effects run in
+ * order, and the anchored hook must see the panel already in the top layer,
+ * where the viewport is its containing block whatever its ancestors
+ * transform (`fixedContainingBlock` returns null for an open popover).
+ *
+ * The panel's CSS adds `overlay` to its transition list with
+ * `allow-discrete`, so the exit fade still plays in the top layer, and sets
+ * `overflow: visible` over the popover default so an arrow outside the box
+ * still draws. A browser without the Popover API leaves the panel where it
+ * was, stacking at its layer token.
+ */
+export declare function useTopLayer({ open, panelRef, target, }: {
+    open: boolean;
+    panelRef: RefObject<HTMLElement | null>;
+    /** Changes when the ref is pointed at a different panel, as useAnchoredPosition's `target`. */
+    target?: unknown;
+}): void;

package/behaviors/useTopLayer.js

@@ -0,0 +1,22 @@
+"use client";
+import { useLayoutEffect } from "react";
+function useTopLayer({
+  open,
+  panelRef,
+  target
+}) {
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!open || !panel || typeof panel.showPopover !== "function") return;
+    const added = !panel.hasAttribute("popover");
+    if (added) panel.setAttribute("popover", "manual");
+    if (!panel.matches(":popover-open")) panel.showPopover();
+    return () => {
+      if (panel.isConnected && panel.matches(":popover-open")) panel.hidePopover();
+      if (added) panel.removeAttribute("popover");
+    };
+  }, [open, panelRef, target]);
+}
+export {
+  useTopLayer
+};

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
@@ -83,16 +100,18 @@ export function AppShell({ activeKey, breadcrumb, title, actions, children }: Ap
 
       <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.js

@@ -82,6 +82,29 @@ function ChatLauncher({
   }, [showPanel, isDocked, side, takeover, hostAttribute]);
   useScrollLock(modal && !takeover);
   const panelRef = useRef(null);
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    const vv = window.visualViewport;
+    if (!showPanel || !takeover || !panel || !vv) return;
+    let frame = 0;
+    const sync = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        panel.style.setProperty("--ds-chat-viewport-height", `${vv.height}px`);
+        panel.style.setProperty("--ds-chat-viewport-top", `${vv.offsetTop}px`);
+      });
+    };
+    sync();
+    vv.addEventListener("resize", sync);
+    vv.addEventListener("scroll", sync);
+    return () => {
+      cancelAnimationFrame(frame);
+      vv.removeEventListener("resize", sync);
+      vv.removeEventListener("scroll", sync);
+      panel.style.removeProperty("--ds-chat-viewport-height");
+      panel.style.removeProperty("--ds-chat-viewport-top");
+    };
+  }, [showPanel, takeover]);
   const wasOpen = useRef(false);
   useEffect(() => {
     if (wasOpen.current && !open) {

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

@@ -1207,13 +1207,18 @@ html[data-chat-resizing] .ds-chat-launcher__panel--floating .ds-chat-header {
    way the browser handles any page with a field at the bottom. The launcher
    reads the same threshold as TAKEOVER_QUERY; this rule covers the first
    render, before a media query has been read, so the two must stay in step.
-   No transition: there is no card form to glide from. */
+   No transition: there is no card form to glide from. Once open, the
+   launcher writes the visual viewport's height and pan here, so the
+   composer ends at the keyboard and the header stays on screen; 100dvh is
+   the first paint's height and the fallback without visualViewport. */
 @media (max-width: 719px) {
   .ds-chat-launcher__panel {
     position: relative;
-    top: auto;
+    /* A relative offset, not a transform: a transform would become the
+       containing block of every fixed popup inside the panel. */
+    top: var(--ds-chat-viewport-top, 0px);
     left: auto;
-    height: 100dvh;
+    height: var(--ds-chat-viewport-height, 100dvh);
     width: 100%;
     max-width: none;
     border: none;

package/components/AiButton/AiButton.css

@@ -279,6 +279,7 @@
    focus outline is its signal, as on Button, and a widened ring inside it
    would read as two concentric strokes. */
 .ds-ai-button:hover::before,
+.ds-ai-button[aria-expanded='true']::before,
 .ds-ai-button--busy::before,
 .ds-ai-button--done::before,
 .ds-ai-button--error::before {
@@ -287,6 +288,7 @@
 }
 
 .ds-ai-button:hover::after,
+.ds-ai-button[aria-expanded='true']::after,
 .ds-ai-button--busy::after,
 .ds-ai-button--done::after,
 .ds-ai-button--error::after {
@@ -339,6 +341,15 @@
   --icon-size: var(--icon-size-500);
 }
 
+.ds-ai-button--icon-only {
+  width: var(--control-height-default);
+  padding: 0;
+}
+
+.ds-ai-button--compact.ds-ai-button--icon-only {
+  width: var(--control-height-compact);
+}
+
 /* Reduced motion: the ring and glow stay, the turning stops. */
 /* ds-allow(motion): parks a looping animation, which the collapsed duration would strobe rather than stop (the ring's turn and the busy spin), and drops the status icon's entrance. */
 @media (prefers-reduced-motion: reduce) {

package/components/AiButton/AiButton.d.ts

@@ -21,6 +21,8 @@ type AiButtonOwnProps = {
     label?: string;
     /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
     icon?: string | React.ReactNode;
+    /** Draws the button as a circle holding only its icon, for a tight bar. The label stays as its accessible name. */
+    iconOnly?: boolean;
     /** Button size */
     size?: 'default' | 'compact';
     /** Whether the button is disabled */

package/components/AiButton/AiButton.js

@@ -26,6 +26,7 @@ const AiButton = React.forwardRef(
   ({
     label = "Ask AI",
     icon = "auto_awesome",
+    iconOnly = false,
     size = "default",
     disabled,
     state: status,
@@ -164,6 +165,7 @@ const AiButton = React.forwardRef(
       }
     };
     const classes = [
+      iconOnly ? `${baseClass}--icon-only` : "",
       baseClass,
       `${baseClass}--${size}`,
       disabled && `${baseClass}--disabled`,
@@ -183,7 +185,7 @@ const AiButton = React.forwardRef(
         },
         shownStatus
       ) }),
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
+      /* @__PURE__ */ jsx("span", { className: iconOnly ? "ds-visually-hidden" : `${baseClass}__text`, children: label })
     ] });
     const control = href && !disabled ? /* @__PURE__ */ jsx(
       Link,