rift-ds 1.9.0 → 1.10.0

package/components/AppSidebar/AppSidebar.js

@@ -4,6 +4,7 @@ import React, { useState, useRef, useEffect, useCallback, useId } from "react";
 import { useLayer } from "../../behaviors/useLayer.js";
 import { useFocusScope } from "../../behaviors/useFocusScope.js";
 import { useScrollLock } from "../../behaviors/useScrollLock.js";
+import { mediaAbove, mediaBelow, BREAKPOINT_TABLET_PX, BREAKPOINT_MOBILE_PX } from "../../tokens/breakpoints.js";
 import { Avatar } from "../Avatar/Avatar.js";
 import { PixelAvatar } from "../PixelAvatar/PixelAvatar.js";
 import { SidebarPanel } from "../SidebarPanel/SidebarPanel.js";
@@ -71,7 +72,7 @@ const AppSidebar = ({
     onExpandedChange?.(next);
   }, [isExpanded, onExpandedChange]);
   useEffect(() => {
-    const band = window.matchMedia("(min-width: 769px) and (max-width: 959px)");
+    const band = window.matchMedia(`${mediaAbove(BREAKPOINT_MOBILE_PX)} and ${mediaBelow(BREAKPOINT_TABLET_PX)}`);
     const onChange = () => {
       if (band.matches) {
         setInternalExpanded(false);
@@ -91,7 +92,7 @@ const AppSidebar = ({
   useScrollLock(mobileOpen);
   useEffect(() => {
     if (!mobileOpen) return;
-    const query = window.matchMedia("(min-width: 769px)");
+    const query = window.matchMedia(mediaAbove(BREAKPOINT_MOBILE_PX));
     const onChange = () => {
       if (query.matches) setMobileOpen(false);
     };

package/components/Attachment/Attachment.css

@@ -703,7 +703,7 @@ button.ds-attachment-group__single:focus-visible {
 .ds-attachment-viewer {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: var(--layer-modal);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -934,6 +934,7 @@ button.ds-attachment-group__single:focus-visible {
    Below 30rem there is no room for a floating dialog and its margin, so
    the panel takes the whole viewport. */
 
+/* ds-allow(breakpoint): a rem query, so a reader with a larger default font gets the full-screen sheet sooner; it is the sheet step (480px) at the default size, and rewriting it in px would change when a large-text reader sees it. */
 @media (max-width: 30rem) {
   .ds-attachment-viewer {
     padding: 0;
@@ -966,6 +967,7 @@ button.ds-attachment-group__single:focus-visible {
   /* Flush with the surface it covers, corners and all, so the edge reads
      as the surface's own outline lighting up */
   inset: 0;
+  /* ds-allow(stacking): local order, above the surface the drop zone covers; it never leaves that surface's stacking context. */
   z-index: 10;
   display: flex;
   align-items: center;

package/components/BottomNav/BottomNav.css

@@ -26,7 +26,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 80;
+  z-index: var(--layer-nav);
 }
 
 .ds-bottom-nav__bar {

package/components/Chart/Chart.css

@@ -201,6 +201,7 @@
    RESPONSIVE — stack header on small screens
    ============================================ */
 
+/* ds-allow(breakpoint): the phone step on its other edge (below 600px, not at or below it); aligning it would change this rule at exactly 600px. */
 @media (max-width: 599px) {
   .ds-chart {
     padding: var(--padding-400);

package/components/ChatThread/ChatThread.css

@@ -169,3 +169,24 @@
 .ds-chat-thread__jump-icon {
   --icon-size: var(--icon-size-600);
 }
+
+/* ============================================
+   BOTTOM-UP — the classic message thread
+   Turns stack from the bottom edge: a short
+   conversation sits just above the composer
+   rather than at the top of an empty column.
+   The content fills the viewport at least and
+   pushes its turns to the end of it.
+   ============================================ */
+
+.ds-chat-thread--bottom-up {
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-chat-thread--bottom-up .ds-chat-thread__content {
+  box-sizing: border-box;
+  flex: 1 0 auto;
+  justify-content: flex-end;
+  width: 100%;
+}

package/components/ChatThread/ChatThread.d.ts

@@ -10,6 +10,16 @@ type ChatThreadOwnProps = {
      * edit-last-turn) neither re-anchors nor resizes the spacer.
      */
     anchor?: boolean;
+    /**
+     * Which way the conversation reads. `top-down` (the default) is the send
+     * choreography above: each new turn floats to the top of the viewport and
+     * the answer streams in below it. `bottom-up` is the classic message
+     * thread: turns stack from the bottom edge, the newest always just above
+     * the composer, and the view follows a streaming answer down for as long
+     * as the reader stays at the bottom. Scrolling up to reread lets go;
+     * returning to the bottom, or the next send, takes hold again.
+     */
+    flow?: 'top-down' | 'bottom-up';
     /** Accessible name for the scrollable conversation region. */
     ariaLabel?: string;
     /** Accessible name for the scroll-to-bottom control. */
@@ -26,7 +36,8 @@ export interface ChatThreadProps extends ChatThreadOwnProps, Omit<React.Componen
  * pure-CSS fade at either end so content scrolling out passes through it,
  * and the send choreography — a newly appended turn floats to the top of
  * the viewport while the prior conversation is pushed upward, leaving the
- * response room to stream in below.
+ * response room to stream in below. `flow="bottom-up"` swaps that for the
+ * classic thread, stacked from the bottom and following the newest turn.
  *
  * A trailing spacer grows just enough that even a short newest exchange can
  * reach the top, so the anchor position never depends on how much has been

package/components/ChatThread/ChatThread.js

@@ -8,6 +8,7 @@ const JUMP_THRESHOLD_PX = 24;
 const ChatThread = React.forwardRef(
   ({
     anchor = true,
+    flow = "top-down",
     ariaLabel = "Conversation",
     jumpLabel = "Scroll to the latest message",
     className = "",
@@ -22,6 +23,18 @@ const ChatThread = React.forwardRef(
     const prevCount = useRef(0);
     const mounted = useRef(false);
     const anchorTop = useRef(null);
+    const bottomUp = flow === "bottom-up";
+    const flowRef = useRef(flow);
+    flowRef.current = flow;
+    const stuck = useRef(true);
+    const lastScrollTop = useRef(0);
+    const scrollToEnd = (behavior) => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const top = container.scrollHeight - container.clientHeight;
+      if (behavior) container.scrollTo({ top, behavior });
+      else container.scrollTo({ top });
+    };
     const sizeSpacer = () => {
       const container = scrollRef.current;
       const content = contentRef.current;
@@ -45,6 +58,7 @@ const ChatThread = React.forwardRef(
         const wasClamped = top != null && container.scrollTop < top && container.scrollTop >= container.scrollHeight - container.clientHeight - 1;
         sizeSpacer();
         if (top != null && wasClamped) container.scrollTo({ top, behavior: "instant" });
+        if (flowRef.current === "bottom-up" && stuck.current) scrollToEnd("instant");
         updateJump();
       });
       observer.observe(container);
@@ -78,6 +92,19 @@ const ChatThread = React.forwardRef(
       mounted.current = true;
       if (childCount === previous) return;
       prevCount.current = childCount;
+      if (bottomUp) {
+        anchorTop.current = null;
+        spacer.style.height = "0px";
+        if (childCount < previous) {
+          container.scrollTo({ top: 0 });
+          return;
+        }
+        if (childCount === 0 || !anchor) return;
+        stuck.current = true;
+        scrollToEnd(isFirstRun ? "instant" : void 0);
+        updateJump();
+        return;
+      }
       if (childCount < previous) {
         anchorTop.current = null;
         spacer.style.height = "0px";
@@ -124,6 +151,13 @@ const ChatThread = React.forwardRef(
     useEffect(updateJump);
     const handleScroll = (e) => {
       onScroll?.(e);
+      if (bottomUp) {
+        const container = e.currentTarget;
+        const atEnd = container.scrollHeight - container.scrollTop - container.clientHeight <= JUMP_THRESHOLD_PX;
+        if (atEnd) stuck.current = true;
+        else if (container.scrollTop < lastScrollTop.current) stuck.current = false;
+        lastScrollTop.current = container.scrollTop;
+      }
       updateJump();
       setScrolling(true);
       window.clearTimeout(settleTimer.current);
@@ -139,7 +173,12 @@ const ChatThread = React.forwardRef(
       container.scrollTo({ top: content.offsetHeight - container.clientHeight });
     };
     useEffect(() => () => window.clearTimeout(settleTimer.current), []);
-    const classes = [baseClass, scrolling ? `${baseClass}--scrolling` : "", className].filter(Boolean).join(" ");
+    const classes = [
+      baseClass,
+      bottomUp ? `${baseClass}--bottom-up` : "",
+      scrolling ? `${baseClass}--scrolling` : "",
+      className
+    ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs(
       "div",
       {

package/components/ColorPicker/ColorPicker.css

@@ -98,7 +98,7 @@
   border: var(--border-025) solid var(--color-input-border-primary);
   border-radius: var(--radius-300);
   box-shadow: var(--shadow-floating);
-  z-index: 10;
+  z-index: var(--layer-dropdown);
 }
 
 /* Saturation / brightness area */

package/components/Combobox/Combobox.css

@@ -186,7 +186,7 @@
   list-style: none;
   max-height: 280px;
   overflow-y: auto;
-  z-index: 10;
+  z-index: var(--layer-dropdown);
   box-shadow: var(--shadow-floating);
   animation: ds-combobox-appear var(--motion-duration-fast) var(--motion-ease-entrance);
 }

package/components/CommandPalette/CommandPalette.css

@@ -6,7 +6,7 @@
 .ds-command-palette {
   position: fixed;
   inset: 0;
-  z-index: 110; /* above Dialog and Drawer */
+  z-index: var(--layer-command); /* above Dialog and Drawer */
   display: flex;
   align-items: flex-start;
   justify-content: center;

package/components/Composer/Composer.css

@@ -570,7 +570,7 @@
 .ds-composer__mention-menu {
   position: absolute;
   left: 0;
-  z-index: 10;
+  z-index: var(--layer-dropdown);
   /* A list, not a text field */
   cursor: default;
 }

package/components/ContextMenu/ContextMenu.css

@@ -18,7 +18,7 @@
 
 .ds-context-menu__panel {
   position: fixed;
-  z-index: 50;
+  z-index: var(--layer-floating);
   min-width: 200px;
 
   /* Appearance — same recipe as DropdownMenu */

package/components/Dialog/Dialog.css

@@ -6,7 +6,7 @@
 .ds-dialog {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: var(--layer-modal);
   display: flex;
   align-items: center;
   justify-content: center;

package/components/Drawer/Drawer.css

@@ -6,7 +6,7 @@
 .ds-drawer {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: var(--layer-modal);
   display: flex;
   visibility: hidden; /* keeps panel controls out of the tab order when closed */
   pointer-events: none;

package/components/Dropdown/Dropdown.css

@@ -109,7 +109,7 @@
   list-style: none;
   max-height: 240px;
   overflow-y: auto;
-  z-index: 10;
+  z-index: var(--layer-dropdown);
   box-shadow: var(--shadow-floating);
 
   /* Animation */

package/components/DropdownMenu/DropdownMenu.css

@@ -35,7 +35,7 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 50;
+  z-index: var(--layer-floating);
   min-width: 200px;
   margin-top: var(--gap-050); /* 2px offset from trigger */
 

package/components/FilterBar/FilterBar.css

@@ -126,7 +126,7 @@
   position: absolute;
   top: calc(100% + var(--gap-050));
   left: 0;
-  z-index: 10;
+  z-index: var(--layer-dropdown);
   min-width: 100%;
   max-height: 280px;
   overflow-y: auto;

package/components/HoverCard/HoverCard.css

@@ -18,7 +18,7 @@
 .ds-hover-card__panel {
   /* Rendered as a <span> so the card survives inside a <p>. */
   position: absolute;
-  z-index: 50;
+  z-index: var(--layer-floating);
   min-width: 240px;
   max-width: 320px;
   padding: var(--padding-400);

package/components/Lightbox/Lightbox.css

@@ -6,7 +6,7 @@
 .ds-lightbox {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: var(--layer-modal);
   opacity: 0;
   visibility: hidden; /* keeps panel controls out of the tab order when closed */
   pointer-events: none;

package/components/ModelPicker/ModelPicker.css

@@ -75,7 +75,7 @@
 .ds-model-picker__panel {
   position: absolute;
   left: 0;
-  z-index: 10;
+  z-index: var(--layer-dropdown);
   min-width: 260px;
   display: flex;
   flex-direction: column;

package/components/Popover/Popover.css

@@ -23,7 +23,7 @@
 
 .ds-popover__panel {
   position: absolute;
-  z-index: 10;
+  z-index: var(--layer-dropdown);
   min-width: 200px;
   padding: var(--padding-400); /* 16px */
   border: var(--border-025) solid var(--color-bg-container-border);

package/components/PromptSuggestions/PromptSuggestions.css

@@ -480,3 +480,70 @@
     transform: translateX(100%);
   }
 }
+
+/* ============================================
+   KEPT — the record of a choice
+   A row that stays on screen after use keeps
+   the choice in view with QuestionCard's own
+   treatment: the taken suggestion outlined
+   solid in the strongest ink, doubled by an
+   inset ring so it does not grow, and the rest
+   faded behind a dashed line. No check: a chip
+   is a line of text, and it keeps its shape.
+   Nothing in the row answers the pointer.
+   ============================================ */
+
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__item:not(.ds-prompt-suggestions__item--kept) {
+  opacity: 0.4;
+}
+
+.ds-prompt-suggestions--kept .ds-chip,
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__tile,
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__card {
+  border-style: dashed;
+  border-color: var(--color-text-tertiary);
+  /* A record carries no fill, like QuestionCard's rows once answered: the
+     outline alone says which way the conversation went. */
+  background-color: transparent;
+}
+
+.ds-prompt-suggestions__item--kept .ds-chip,
+.ds-prompt-suggestions__item--kept .ds-prompt-suggestions__tile,
+.ds-prompt-suggestions__item--kept .ds-prompt-suggestions__card,
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__item--kept .ds-prompt-suggestions__tile:hover {
+  border-style: solid;
+  border-color: var(--color-text-primary);
+  box-shadow: inset 0 0 0 var(--border-025) var(--color-text-primary);
+  color: var(--color-text-primary);
+}
+
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__tile,
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__card {
+  cursor: default;
+}
+
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__tile:hover {
+  background-color: var(--color-bg-container-primary-semi);
+}
+
+.ds-prompt-suggestions--kept .ds-prompt-suggestions__card:hover {
+  transform: none;
+}
+
+.ds-prompt-suggestions--kept
+  .ds-prompt-suggestions__item:not(.ds-prompt-suggestions__item--kept)
+  .ds-prompt-suggestions__card:hover {
+  box-shadow: none;
+}
+
+.ds-prompt-suggestions__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/PromptSuggestions/PromptSuggestions.d.ts

@@ -57,6 +57,14 @@ type PromptSuggestionsOwnProps = {
      * the quieter row for placements alongside a live conversation.
      */
     size?: 'default' | 'compact';
+    /**
+     * The `id` of the suggestion already taken. Set, the row becomes the
+     * record of that choice: the taken suggestion outlined solid in the
+     * strongest ink, the rest faded behind a dashed line, and none of them
+     * tappable any more. The same treatment QuestionCard gives a pick. For a row that stays
+     * on screen after use, such as the follow-ups under an earlier answer.
+     */
+    value?: string;
     /** Accessible name for the list. */
     ariaLabel?: string;
     /** Additional CSS classes */

package/components/PromptSuggestions/PromptSuggestions.js

@@ -15,6 +15,7 @@ const PromptSuggestions = React.forwardRef(
     pendingCount = 3,
     entrance = true,
     size = "default",
+    value,
     ariaLabel = "Suggested prompts",
     className = "",
     ...rest
@@ -28,8 +29,9 @@ const PromptSuggestions = React.forwardRef(
       },
       []
     );
+    const kept = value !== void 0;
     const choose = (id) => {
-      if (chosenId || chooseTimer.current) return;
+      if (kept || chosenId || chooseTimer.current) return;
       setChosenId(id);
       chooseTimer.current = window.setTimeout(() => {
         chooseTimer.current = null;
@@ -45,6 +47,7 @@ const PromptSuggestions = React.forwardRef(
       `${baseClass}--${size}`,
       `${baseClass}--${arrangement}`,
       chosenId ? `${baseClass}--choosing` : "",
+      kept ? `${baseClass}--kept` : "",
       entrance ? "" : `${baseClass}--still`,
       className
     ].filter(Boolean).join(" ");
@@ -64,39 +67,44 @@ const PromptSuggestions = React.forwardRef(
             block === "card" && /* @__PURE__ */ jsx("span", { className: `${baseClass}__cover` }),
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton-bar` })
           ] })
-        ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton-bar` }) }) }, index)) : suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton-bar` }) }) }, index)) : suggestions.map((suggestion) => /* @__PURE__ */ jsxs(
           "div",
           {
             role: "listitem",
-            className: `${baseClass}__item${chosenId === suggestion.id ? ` ${baseClass}__item--chosen` : ""}`,
+            className: `${baseClass}__item${chosenId === suggestion.id ? ` ${baseClass}__item--chosen` : ""}${value === suggestion.id ? ` ${baseClass}__item--kept` : ""}`,
             onAnimationEnd: (event) => {
               if (event.animationName === "ds-prompt-suggestions-choose") {
                 setChosenId(null);
               }
             },
-            children: block ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: `${baseClass}__${block}`,
-                onClick: () => choose(suggestion.id),
-                children: [
-                  block === "card" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__cover`, children: suggestion.icon != null && renderIcon(suggestion.icon) }) : suggestion.icon != null && renderIcon(suggestion.icon),
-                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
-                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: suggestion.label }),
-                    suggestion.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: suggestion.description })
-                  ] })
-                ]
-              }
-            ) : /* @__PURE__ */ jsx(
-              Chip,
-              {
-                label: suggestion.label,
-                icon: suggestion.icon,
-                size: chipSize,
-                onClick: () => choose(suggestion.id)
-              }
-            )
+            children: [
+              block ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__${block}`,
+                  disabled: kept,
+                  onClick: () => choose(suggestion.id),
+                  children: [
+                    block === "card" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__cover`, children: suggestion.icon != null && renderIcon(suggestion.icon) }) : suggestion.icon != null && renderIcon(suggestion.icon),
+                    /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+                      /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: suggestion.label }),
+                      suggestion.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: suggestion.description })
+                    ] }),
+                    value === suggestion.id && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " (chosen)" })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: suggestion.label,
+                  icon: suggestion.icon,
+                  size: chipSize,
+                  onClick: kept ? void 0 : () => choose(suggestion.id)
+                }
+              ),
+              !block && value === suggestion.id && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " (chosen)" })
+            ]
           },
           suggestion.id
         ))