rift-ds 1.8.0 → 1.9.0

package/README.md

@@ -13,7 +13,7 @@ An open source React design system built for AI products and coding agents: comp
 
 ## Why Rift DS
 
-- **<!-- component-count -->150<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. React is the only required peer dependency.
+- **<!-- component-count -->152<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. React is the only required peer dependency.
 - **AI patterns, the whole chat and templates, ready to use.** Composer, streaming chat thread, tool calls, reasoning and thread panel are in the box, the complete AI chat ships assembled as one widget that one command scaffolds, and the docs site has complete template screens built from them.
 - **Fully themeable.** The shipped themes are complete looks to start from, each in light and dark. One `data-brand` attribute applies a theme, and a few CSS overrides make your own.
 - **Ready for coding agents.** One command installs the agent skills, and a public MCP endpoint serves every component's props, so your agent builds with the library as it actually is. No key, no account.
@@ -94,13 +94,13 @@ import 'rift-ds/tokens/presets/presets.css';
 
 ## Components
 
-<!-- component-count -->150<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
+<!-- component-count -->152<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
 
 <details>
 <summary>The full list</summary>
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
+Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Artifact card · Artifact panel · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
 <!-- component-list:end -->
 
 </details>

package/chat/ChatAgentPane.d.ts

@@ -10,12 +10,15 @@ export interface ChatAgentPaneProps {
     onTabChange?: (id: string) => void;
     /** The widget seated the pane as a bottom sheet, where it fills the width instead of holding its own column. */
     overlay: boolean;
+    /** Fires from the pane's own close button, a cross in its top trailing corner. Omit for a pane with no close of its own. */
+    onClose?: () => void;
 }
 /**
  * The built-in agent pane: an AgentRail the widget seats on the
- * conversation's trailing edge (inline at 860px and up, a bottom sheet
- * below). A host hands it the agent's profile and panes; the widget owns
- * whether it is up, so `onCollapse` is deliberately unwired here: the
- * header's agent toggle is the one control, both ways.
+ * conversation's trailing edge (inline from ASIDE_RAIL_MIN_WIDTH, a bottom sheet
+ * below, the artifact panel's own rule). A host hands it the agent's profile and panes; the widget owns
+ * whether it is up. The header's agent toggle opens and closes it, and the
+ * pane carries a close of its own in its top corner, where a panel's way
+ * out is looked for.
  */
-export declare function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay }: ChatAgentPaneProps): import("react").JSX.Element;
+export declare function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay, onClose }: ChatAgentPaneProps): import("react").JSX.Element;

package/chat/ChatAgentPane.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { AgentRail } from "../components/AgentRail/AgentRail.js";
 import "./ChatAgentPane.css";
-function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay }) {
+function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay, onClose }) {
   const [ownTab, setOwnTab] = useState(tabs[0]?.id ?? "");
   const current = activeTab ?? ownTab;
   return /* @__PURE__ */ jsx(
@@ -13,6 +13,9 @@ function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay }) {
       profile,
       tabs,
       activeTab: current,
+      onCollapse: onClose,
+      collapseVariant: "close",
+      collapseLabel: "Close the agent panel",
       onTabChange: (id) => {
         setOwnTab(id);
         onTabChange?.(id);

package/chat/ChatArtifactCard.d.ts

@@ -0,0 +1,13 @@
+import { ChatArtifact } from './types';
+export interface ChatArtifactCardProps {
+    /** The artifact this tile stands for. */
+    artifact: ChatArtifact;
+}
+/**
+ * An artifact's place in the thread: an ArtifactCard wired to the provider,
+ * which opens its artifact in the artifact panel. Pressing the tile of the
+ * artifact already on stage closes the panel again, so the tile is one
+ * control both ways. The widget draws it for every `artifact` card; a host
+ * building its own thread renders it the same way.
+ */
+export declare function ChatArtifactCard({ artifact }: ChatArtifactCardProps): import("react").JSX.Element;

package/chat/ChatArtifactCard.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ArtifactCard } from "../components/ArtifactCard/ArtifactCard.js";
+import { useChatWidget } from "./context.js";
+function ChatArtifactCard({ artifact }) {
+  const { artifact: onStage, openArtifact, closeArtifact } = useChatWidget();
+  const open = onStage?.id === artifact.id;
+  return /* @__PURE__ */ jsx(
+    ArtifactCard,
+    {
+      title: artifact.title,
+      meta: artifact.meta,
+      icon: artifact.icon,
+      open,
+      onClick: () => open ? closeArtifact() : openArtifact(artifact)
+    }
+  );
+}
+export {
+  ChatArtifactCard
+};

package/chat/ChatArtifactPane.d.ts

@@ -0,0 +1,18 @@
+import { ChatArtifact } from './types';
+export interface ChatArtifactPaneProps {
+    /** The artifact on stage, or null for the empty state: the panel opened before the conversation has made anything. */
+    artifact: ChatArtifact | null;
+    /** Whether the widget is showing the pane at its expanded size. */
+    expanded?: boolean;
+    /** Fires with the next state from the expand toggle; omit where the seat has one size. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Fires from the pane's close button; omit where another control closes the seat. */
+    onClose?: () => void;
+}
+/**
+ * The built-in artifact pane: an ArtifactPanel drawn from a `ChatArtifact`.
+ * A kind the provider's `artifactRenderers` knows is live React content;
+ * otherwise the artifact's document, URL or source decides the preview. The
+ * widget owns the seat (beside the conversation, or a sheet over it).
+ */
+export declare function ChatArtifactPane({ artifact, expanded, onExpandedChange, onClose }: ChatArtifactPaneProps): import("react").JSX.Element;

package/chat/ChatArtifactPane.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ArtifactPanel } from "../components/ArtifactPanel/ArtifactPanel.js";
+import { EmptyState } from "../components/EmptyState/EmptyState.js";
+import { useChatWidget } from "./context.js";
+const FRAMEABLE_URL = /^(?:https?:\/\/|\/(?!\/))/i;
+function ChatArtifactPane({ artifact, expanded, onExpandedChange, onClose }) {
+  const { artifactRenderers } = useChatWidget();
+  if (!artifact) {
+    return /* @__PURE__ */ jsx(ArtifactPanel, { title: "Artifacts", icon: "space_dashboard", onClose, children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__artifact-empty", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        size: "compact",
+        icon: "draft",
+        title: "Nothing here yet",
+        description: "What the chat makes for you, like a dashboard or a page, opens in this panel."
+      }
+    ) }) });
+  }
+  const custom = Object.hasOwn(artifactRenderers, artifact.kind);
+  const render = artifactRenderers[artifact.kind];
+  const src = artifact.url && FRAMEABLE_URL.test(artifact.url) ? artifact.url : void 0;
+  return /* @__PURE__ */ jsx(
+    ArtifactPanel,
+    {
+      title: artifact.title,
+      meta: artifact.meta,
+      icon: artifact.icon,
+      html: custom ? void 0 : artifact.html,
+      src: custom ? void 0 : src,
+      code: artifact.code ?? (custom ? void 0 : artifact.html),
+      language: artifact.language ?? (artifact.code === void 0 && artifact.html !== void 0 ? "html" : void 0),
+      expanded,
+      onExpandedChange,
+      onClose,
+      children: custom ? render(artifact) : void 0
+    },
+    artifact.id
+  );
+}
+export {
+  ChatArtifactPane
+};

package/chat/ChatProvider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChatCardRenderers, ChatLinkRenderer, FeedbackSink } from './context';
+import { ChatArtifactRenderers, ChatCardRenderers, ChatLinkRenderer, FeedbackSink } from './context';
 import { FollowupsSource } from './followups';
 import { ChatPlacement } from './placement';
 import { ThreadsOptions } from './threads';
@@ -33,6 +33,8 @@ export interface ChatProviderProps {
     feedback?: FeedbackSink | string | false;
     /** Draws `card` events by kind. */
     renderers?: ChatCardRenderers;
+    /** Draws an artifact's preview by kind, for artifacts that are live React content rather than a document or a URL. */
+    artifactRenderers?: ChatArtifactRenderers;
     /** Renders a same-site link in an answer. The default is a plain anchor; a Next.js host passes its Link. */
     renderLink?: ChatLinkRenderer;
     /** Which hrefs in an answer become links. Everything else renders as text. */
@@ -50,4 +52,4 @@ export interface ChatProviderProps {
  * clicking between pages for free. A hard reload starts clean by design:
  * no storage, no persistence.
  */
-export declare function ChatProvider({ transport, endpoint, defaultPlacement, followups, fallbackFollowups, feedback, renderers, renderLink, isInternalHref, threads: threadsOptions, placeholders, children, }: ChatProviderProps): import("react").JSX.Element;
+export declare function ChatProvider({ transport, endpoint, defaultPlacement, followups, fallbackFollowups, feedback, renderers, artifactRenderers, renderLink, isInternalHref, threads: threadsOptions, placeholders, children, }: ChatProviderProps): import("react").JSX.Element;

package/chat/ChatProvider.js

@@ -16,6 +16,7 @@ function ChatProvider({
   fallbackFollowups = DEFAULT_FALLBACK_FOLLOWUPS,
   feedback = "/api/chat/feedback",
   renderers,
+  artifactRenderers,
   renderLink = defaultRenderLink,
   isInternalHref = isInternalPath,
   threads: threadsOptions,
@@ -70,9 +71,14 @@ function ChatProvider({
   );
   const [starterRevealKey, setStarterRevealKey] = useState(null);
   const [starterSeed, setStarterSeed] = useState(() => Math.random());
+  const [artifact, setArtifact] = useState(null);
+  const openArtifact = useCallback((next) => setArtifact(next), []);
+  const closeArtifact = useCallback(() => setArtifact(null), []);
+  if (artifact && chat.turns.length === 0 && !chat.live) setArtifact(null);
   const { reset: resetChat } = chat;
   const reset = useCallback(() => {
     resetChat();
+    setArtifact(null);
     setStarterSeed(Math.random());
     setStarterRevealKey(null);
   }, [resetChat]);
@@ -121,6 +127,7 @@ function ChatProvider({
   const returnFocusRef = useRef(null);
   const toggleOpen = useCallback(() => setOpen(!open), [open, setOpen]);
   const renderersValue = useMemo(() => renderers ?? {}, [renderers]);
+  const artifactRenderersValue = useMemo(() => artifactRenderers ?? {}, [artifactRenderers]);
   const value = useMemo(
     () => ({
       ...chat,
@@ -146,6 +153,10 @@ function ChatProvider({
       returnFocusRef,
       threads,
       renderers: renderersValue,
+      artifact,
+      openArtifact,
+      closeArtifact,
+      artifactRenderers: artifactRenderersValue,
       renderLink,
       isInternalHref,
       submitFeedback
@@ -169,6 +180,10 @@ function ChatProvider({
       draft,
       threads,
       renderersValue,
+      artifact,
+      openArtifact,
+      closeArtifact,
+      artifactRenderersValue,
       renderLink,
       isInternalHref,
       submitFeedback

package/chat/ChatWidget.css

@@ -52,8 +52,9 @@
   padding-inline: var(--ds-chat-widget-inset);
 }
 
-/* With the controls lifted to the card's edge, the header row has nothing
-   40px tall left in it and would collapse to the title's own line. The row
+/* With a trailing panel seated inline, the controls stand over the panel's
+   top inset and the header row has nothing 40px tall left in it, so it
+   would collapse to the title's own line. The row
    holds the height its buttons were giving it: the control plus the
    header's own block padding either side. */
 .ds-chat-widget[data-lifted-actions] .ds-chat-header {
@@ -657,54 +658,240 @@
    own rounded card, inset on three sides. The top margin is the header
    row's exact height (the chat column's top padding, plus the header's own
    block padding either side of a 40px control), so the panel begins where
-   that row ends and the lifted controls sit in the clear above it. */
+   that row ends and the widget's controls sit in the clear above it. */
 .ds-chat-widget__aside-rail {
+  display: flex;
   flex: none;
+  /* The open and close glide, the artifact panel's own: the rail's width
+     runs from nothing to the pane's, and the card is the rail at every
+     frame, a whole rounded card growing from the trailing edge with its
+     content revealed behind the leading border. The target is the pane's
+     natural width, which the widget measures and hands over as
+     --ds-chat-aside-width (a rail holds a width of its own, so there is no
+     share of the row to animate as the artifact does). Closed, the rail
+     keeps no width, no inset and no border, and goes invisible once the
+     collapse has finished (the visibility delay), so nothing of it can be
+     seen, hovered or reached. The reduced-motion guard in tokens-motion.css
+     zeroes every duration here. */
+  width: 0;
+  min-width: 0;
   min-height: 0;
   margin: calc(var(--padding-200) + var(--padding-150) * 2 + 40px) 0 var(--padding-500) 0;
-  /* The open and close glide, the threads rail's own: a one-column grid
-     whose track runs 0fr to 1fr, so the pane's width animates without the
-     widget knowing it, while the pane's own card fades with it. Closed, the
-     rail keeps no width, no inset and no border, and goes invisible once
-     the collapse has finished (the visibility delay), so nothing of it can
-     be seen, hovered or reached. The reduced-motion guard in
-     tokens-motion.css zeroes every duration here. */
-  display: grid;
-  grid-template-columns: 0fr;
   opacity: 0;
   visibility: hidden;
+  overflow: hidden;
   transition:
-    grid-template-columns var(--motion-duration-slow) var(--motion-ease-emphasized),
+    width var(--motion-duration-slow) var(--motion-ease-emphasized),
     margin var(--motion-duration-slow) var(--motion-ease-emphasized),
     opacity var(--motion-duration-base) var(--motion-ease-standard),
     visibility 0s linear var(--motion-duration-slow);
 }
 
 .ds-chat-widget__aside-rail--open {
-  grid-template-columns: 1fr;
+  /* Before the first measurement there is no number to glide to, so the
+     rail simply takes its content's width. */
+  width: var(--ds-chat-aside-width, max-content);
   margin-right: var(--padding-500);
   opacity: 1;
   visibility: visible;
   transition:
-    grid-template-columns var(--motion-duration-slow) var(--motion-ease-emphasized),
+    width var(--motion-duration-slow) var(--motion-ease-emphasized),
     margin var(--motion-duration-slow) var(--motion-ease-emphasized),
     opacity var(--motion-duration-base) var(--motion-ease-standard) calc(var(--motion-duration-slow) - var(--motion-duration-base)),
     visibility 0s linear 0s;
 }
 
-/* The pane's card: the border and radius live here, inside the animated
-   track, so the collapsing rail never shows a sliver of frame. */
+/* The pane's card fills the rail, so the two are one shape through the
+   glide; the pane inside keeps its own width and is clipped by the card. A
+   trailing panel is a solid surface, the page's own ground, not the
+   widget's glass: it is a place to read and work in, and what shows through
+   glass (the host's page, an ambient background) would sit under its
+   content. */
 .ds-chat-widget__aside-rail-inner {
+  box-sizing: border-box;
   display: flex;
+  flex: 1 0 auto;
+  width: 100%;
   min-width: 0;
   min-height: 0;
   border: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-600);
+  background-color: var(--color-bg-page-primary);
   overflow: hidden;
 }
 
-/* The widget's controls, lifted out of the chat header to the card's own
-   right edge while the rail is seated inline. */
+/* The pane never squeezes with the card around it. */
+.ds-chat-widget__aside-rail-inner > * {
+  flex: none;
+}
+
+/* ============================================
+   THE ARTIFACT PANEL — the trailing seat's other tenant. Wide widgets seat
+   it beside the conversation as a second column; narrow ones raise it as a
+   tall bottom sheet. Unlike the agent rail it has no width of its own: it
+   shares the row with the conversation, a little the larger of the two.
+   ============================================ */
+
+/* Any child of the row that is the conversation takes the room the rails
+   leave, and can shrink under an artifact. */
+.ds-chat-widget__rails > .ds-chat-widget {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* The artifact's card floats exactly as the agent rail's does: inset from
+   the widget's edges, beginning under the header row (the same top margin,
+   the row's own height), with the widget's lifted controls in the clear
+   above it. The glide is the flex share running from nothing, the card
+   fading in behind it; closed, the rail keeps no width and no inset and
+   goes invisible once the collapse has finished. The reduced-motion guard
+   in tokens-motion.css zeroes every duration here. */
+.ds-chat-widget__artifact-rail {
+  display: flex;
+  flex: 0 1 0;
+  min-width: 0;
+  min-height: 0;
+  margin: calc(var(--padding-200) + var(--padding-150) * 2 + 40px) 0 var(--padding-500) 0;
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+  transition:
+    flex-grow var(--motion-duration-slow) var(--motion-ease-emphasized),
+    margin var(--motion-duration-slow) var(--motion-ease-emphasized),
+    opacity var(--motion-duration-base) var(--motion-ease-standard),
+    visibility 0s linear var(--motion-duration-slow);
+}
+
+.ds-chat-widget__artifact-rail--open {
+  flex-grow: 1.2;
+  margin-right: var(--padding-500);
+  opacity: 1;
+  visibility: visible;
+  transition:
+    flex-grow var(--motion-duration-slow) var(--motion-ease-emphasized),
+    margin var(--motion-duration-slow) var(--motion-ease-emphasized),
+    opacity var(--motion-duration-base) var(--motion-ease-standard) calc(var(--motion-duration-slow) - var(--motion-duration-base)),
+    visibility 0s linear 0s;
+}
+
+.ds-chat-widget__artifact-rail-inner {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  /* Solid, the agent pane's ground: see the aside rail's card. */
+  background-color: var(--color-bg-page-primary);
+  overflow: hidden;
+}
+
+/* The panel opened before the conversation has made anything. */
+.ds-chat-widget__artifact-empty {
+  display: grid;
+  place-items: center;
+  min-height: 100%;
+  padding: var(--padding-400);
+}
+
+/* Sized by the grip: the panel holds the width the visitor gave it, and
+   gives it back before the conversation drops under its floor (the 320px
+   mirrors ARTIFACT_MIN_COLUMN_WIDTH in queries.ts). */
+.ds-chat-widget__rails[data-artifact-sized] > .ds-chat-widget__artifact-rail--open {
+  flex: 0 1 var(--ds-chat-artifact-width);
+}
+
+.ds-chat-widget__rails[data-artifact-sized] > .ds-chat-widget {
+  flex: 1 0 320px;
+}
+
+/* The pointer drives the width frame by frame, so the glides stand down
+   and nothing under the drag selects. */
+.ds-chat-widget__rails[data-artifact-resizing] {
+  user-select: none;
+}
+
+.ds-chat-widget__rails[data-artifact-resizing] > .ds-chat-widget__artifact-rail {
+  transition: none;
+}
+
+/* The grip: the dock's widen grip, restated for the card's leading edge. A
+   20px grab zone straddling the border, with a hover-revealed 4×48px pill.
+   The seat itself has no width, so the row's layout never knows it is
+   there; the zone spans the card's own height. */
+.ds-chat-widget__artifact-grip {
+  position: relative;
+  z-index: 4;
+  flex: none;
+  width: 0;
+  margin: calc(var(--padding-200) + var(--padding-150) * 2 + 40px) 0 var(--padding-500) 0;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.ds-chat-widget__artifact-grip::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -10px;
+  width: 20px;
+}
+
+.ds-chat-widget__artifact-grip::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 24px);
+  left: -2px;
+  width: 4px;
+  height: 48px;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-chat-widget__artifact-grip:hover::after,
+.ds-chat-widget__artifact-grip--resizing::after {
+  background: var(--color-text-tertiary);
+}
+
+.ds-chat-widget__artifact-grip:active::after {
+  background: var(--color-text-secondary);
+}
+
+/* Expanded, the artifact has the widget: the conversation and the history
+   leave the row (and with them the tab order), and the card takes an inset
+   on its leading edge too. */
+.ds-chat-widget__rails[data-artifact-expanded] > .ds-chat-widget,
+.ds-chat-widget__rails[data-artifact-expanded] > .ds-chat-widget__threads-rail {
+  display: none;
+}
+
+.ds-chat-widget__rails[data-artifact-expanded] > .ds-chat-widget__artifact-rail--open {
+  flex: 1 1 0;
+  margin-left: var(--padding-500);
+}
+
+/* The sheet runs nearly the widget's height: a preview has no natural
+   height to hug, and a short frame is no preview. The strip left above it
+   keeps the header, and so the way back, in view. */
+.ds-chat-widget__aside-sheet--artifact {
+  height: 92%;
+  max-height: none;
+}
+
+/* The room the floating controls take in the header row while no panel is
+   up: as many 40px controls as the cluster holds, a gap between each. */
+.ds-chat-widget__actions-spacer {
+  flex: none;
+  width: calc(
+    var(--ds-chat-action-count) * 40px + (var(--ds-chat-action-count) - 1) * var(--gap-100)
+  );
+  height: 40px;
+}
+
+/* The widget's controls at the card's own top trailing corner, their one
+   home wherever a trailing panel can seat inline. */
 .ds-chat-widget__rail-actions {
   position: absolute;
   top: calc(var(--padding-200) + var(--padding-150));
@@ -726,8 +913,8 @@
   display: flex;
   flex-direction: column;
   max-height: 82%;
-  background-color: var(--color-bg-glass);
-  backdrop-filter: blur(24px);
+  /* The same solid ground the panel has inline: one panel, two seats. */
+  background-color: var(--color-bg-page-primary);
   border-top: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-600) var(--radius-600) 0 0;
   box-shadow: var(--shadow-floating);

package/chat/ChatWidget.d.ts

@@ -84,6 +84,8 @@ export interface ChatWidgetProps {
     }) => ReactNode;
     /** The built-in agent pane: who the agent is and what it has been doing. Seated like `aside`. */
     agent?: ChatAgentOptions;
+    /** Seat the artifact panel: a reply that carries an artifact draws a tile in the thread, and the tile (or the header's artifact button) opens the artifact beside the conversation on a wide host and as a bottom sheet on a narrow one. The trailing seat holds one panel at a time, so an open artifact stands in for the agent pane. Off, none of it exists: no header button, no tile, no panel. */
+    artifacts?: boolean;
     /** The composer's context note, naming what the chat is looking at. Omit for none. */
     contextLabel?: string | null;
     /** A widget slot on the welcome screen, under the composer and its
@@ -110,4 +112,4 @@ export interface ChatWidgetProps {
  * a stage card, a whole page). It reads all of its state from ChatProvider,
  * so the conversation is the same object wherever it shows.
  */
-export declare function ChatWidget({ fullscreenEnabled, closeEnabled, placementEnabled, compact, phone, title, placeholder, showStarters, logo, tagline, starters: startersInput, startersKey, composerActions, models, defaultModel, lockedModelDescription, fileAttachments, maxAttachments, maxAttachmentBytes, mentions, threads, threadsProps, tabs, aside, agent, contextLabel, widgets, widgetsLayout, widgetsWidth, disclaimer, }: ChatWidgetProps): import("react").JSX.Element;
+export declare function ChatWidget({ fullscreenEnabled, closeEnabled, placementEnabled, compact, phone, title, placeholder, showStarters, logo, tagline, starters: startersInput, startersKey, composerActions, models, defaultModel, lockedModelDescription, fileAttachments, maxAttachments, maxAttachmentBytes, mentions, threads, threadsProps, tabs, aside, agent, artifacts, contextLabel, widgets, widgetsLayout, widgetsWidth, disclaimer, }: ChatWidgetProps): import("react").JSX.Element;