rift-ds 1.8.0 → 1.9.0

package/chat/demo-artifacts.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { DemoDashboardArtifact } from "./demo-card-components.js";
+const DEMO_ARTIFACT_RENDERERS = {
+  "demo-dashboard": () => /* @__PURE__ */ jsx(DemoDashboardArtifact, {})
+};
+const DEMO_DASHBOARD_ARTIFACT = {
+  id: "launch-dashboard",
+  title: "Launch dashboard",
+  kind: "demo-dashboard",
+  meta: "Dashboard",
+  icon: "space_dashboard"
+};
+const LAUNCH_PAGE_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>Acme Workspaces</title>
+<style>
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; color: #14181f; background: #f6f4ef; line-height: 1.5; }
+  header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; }
+  .brand { font-weight: 700; letter-spacing: -0.01em; }
+  nav { display: flex; gap: 20px; font-size: 14px; color: #55606e; }
+  .hero { padding: 56px 32px 40px; max-width: 720px; }
+  .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7a5cff; }
+  h1 { margin: 12px 0 16px; font-size: clamp(32px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
+  .lede { margin: 0 0 28px; font-size: 18px; color: #414b58; max-width: 52ch; }
+  .cta { display: inline-block; padding: 12px 22px; border-radius: 999px; background: #14181f; color: #fff; font-weight: 600; font-size: 15px; }
+  .ghost { margin-left: 16px; font-size: 15px; font-weight: 600; color: #14181f; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; padding: 8px 32px 48px; }
+  .card { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #e7e3da; }
+  .card h2 { margin: 0 0 6px; font-size: 16px; }
+  .card p { margin: 0; font-size: 14px; color: #55606e; }
+  footer { padding: 20px 32px 32px; font-size: 13px; color: #7b8592; }
+  @media (prefers-color-scheme: dark) {
+    body { color: #eef0f3; background: #101216; }
+    nav, .card p, footer { color: #98a1ad; }
+    .eyebrow { color: #a999ff; }
+    .lede { color: #c2c8d0; }
+    .cta { background: #eef0f3; color: #101216; }
+    .ghost { color: #eef0f3; }
+    .card { background: #181b21; border-color: #2a2e36; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <span class="brand">Acme</span>
+  <nav><span>Product</span><span>Plans</span><span>Sign in</span></nav>
+</header>
+<section class="hero">
+  <span class="eyebrow">Launching this week</span>
+  <h1>One workspace for the whole team.</h1>
+  <p class="lede">Shared projects, guest seats and ninety days of version history, ready the moment your team joins.</p>
+  <span class="cta">Start the free trial</span><span class="ghost">See the plans</span>
+</section>
+<section class="grid">
+  <div class="card"><h2>Shared workspaces</h2><p>Every project in one place, open to the people who need it.</p></div>
+  <div class="card"><h2>Guest seats</h2><p>Bring in a client or a contractor without buying a full seat.</p></div>
+  <div class="card"><h2>Version history</h2><p>Ninety days of every change, one click from restored.</p></div>
+</section>
+<footer>Acme is a made-up company. This page is a demo artifact.</footer>
+</body>
+</html>`;
+const DEMO_PAGE_ARTIFACT = {
+  id: "launch-page",
+  title: "Launch page",
+  kind: "html",
+  meta: "Web page",
+  icon: "web",
+  html: LAUNCH_PAGE_HTML
+};
+export {
+  DEMO_ARTIFACT_RENDERERS,
+  DEMO_DASHBOARD_ARTIFACT,
+  DEMO_PAGE_ARTIFACT
+};

package/chat/demo-card-components.d.ts

@@ -44,3 +44,5 @@ export declare function DemoStack({ card, renderers }: {
     card: DemoStackCard;
     renderers: ChatCardRenderers;
 }): import("react").JSX.Element;
+/** The dashboard's rows ask the chat, like the welcome board's. */
+export declare function DemoDashboardArtifact(): import("react").JSX.Element;

package/chat/demo-card-components.js

@@ -8,6 +8,8 @@ import { CodeBlock } from "../components/CodeBlock/CodeBlock.js";
 import { InterruptCard } from "../components/InterruptCard/InterruptCard.js";
 import { MessageCard } from "../components/MessageCard/MessageCard.js";
 import { ToolCall } from "../components/ToolCall/ToolCall.js";
+import { useChatWidget } from "./context.js";
+import { DemoBoard } from "./DemoWelcome.js";
 const RETRY_RUN_MS = 1400;
 function DemoToolCall({ card }) {
   const [status, setStatus] = useState(card.status);
@@ -51,8 +53,13 @@ function DemoStack({ card, renderers }) {
     return render ? /* @__PURE__ */ jsx("div", { children: render(item.data) }, index) : null;
   }) });
 }
+function DemoDashboardArtifact() {
+  const { send } = useChatWidget();
+  return /* @__PURE__ */ jsx("div", { className: "ds-chat-demo__artifact-board", children: /* @__PURE__ */ jsx(DemoBoard, { onAsk: (prompt) => send(prompt) }) });
+}
 export {
   DemoChart,
+  DemoDashboardArtifact,
   DemoInterrupt,
   DemoStack,
   DemoToolCall

package/chat/demo-script.js

@@ -1,3 +1,5 @@
+import { artifactCard } from "./artifacts.js";
+import { DEMO_DASHBOARD_ARTIFACT, DEMO_PAGE_ARTIFACT } from "./demo-artifacts.js";
 import { scriptChat } from "./sim.js";
 const TRIAL_SIGNUPS = [
   { week: "W1", signups: 320 },
@@ -192,7 +194,27 @@ const DEMO_SCRIPT = scriptChat().user("How do I get started?").assistant(
     ]
   }),
   followups: ["Go ahead and invite the other three", "How is the trial going?", "How do I get started?"]
-}).fallback(
+}).user("Build me a launch dashboard").assistant(
+  "Here is the launch on one board: what is running now, the trial signups, the projects and what is waiting on you. The rows that ask a question will ask it here.",
+  {
+    steps: [
+      { status: "Gathering the launch numbers", point: "Signups, seats and open work all belong on one board." },
+      { status: "Laying out the dashboard", point: "Too much for a card; build it as an artifact." }
+    ],
+    card: artifactCard(DEMO_DASHBOARD_ARTIFACT),
+    followups: ["Draft the launch page", "How is the trial going?", "Which plan fits a team of five?"]
+  }
+).user("Draft the launch page").assistant(
+  "A first draft of the launch page is up beside the chat: the headline, the three things the Team plan adds, and one call to action. The source is behind the Code view.",
+  {
+    steps: [
+      { status: "Reading the launch plan", point: "The page should lead with the workspace, then the plan." },
+      { status: "Writing the page", point: "One document, its own styles, no scripts." }
+    ],
+    card: artifactCard(DEMO_PAGE_ARTIFACT),
+    followups: ["Build me a launch dashboard", "What do the plans include?", "How is the trial going?"]
+  }
+).fallback(
   "The launch is on track overall. Three of the four readiness tracks are green, and the one item I would watch is the **legal review**, since it gates the pricing rollout.",
   {
     steps: [
@@ -203,7 +225,7 @@ const DEMO_SCRIPT = scriptChat().user("How do I get started?").assistant(
     followups: ["Which track is behind?", "Who owns the legal review?", "What happens if pricing slips?"]
   }
 ).fallback(
-  "This chat is a scripted preview of the widget, so free text gets one of a few written replies. The suggestion chips lead through the parts of the story that show off the rich content: a plan, a chart, a diff, a tool call and an approval.",
+  "This chat is a scripted preview of the widget, so free text gets one of a few written replies. The suggestion chips lead through the parts of the story that show off the rich content: a plan, a chart, a diff, a tool call, an approval and an artifact.",
   {
     steps: [{ status: "Reading the question", point: "Nothing scripted matches this one." }],
     followups: ["How do I get started?", "What do the plans include?", "How is the trial going?"]

package/chat/demo.css

@@ -44,3 +44,9 @@
 .ds-chat-demo__logo--three {
   background-color: var(--color-chart-series-3);
 }
+
+/* The dashboard artifact: the welcome board, given the inset a panel's
+   live content brings for itself. */
+.ds-chat-demo__artifact-board {
+  padding: var(--padding-400);
+}

package/chat/demo.d.ts

@@ -1,6 +1,7 @@
 import { SimTiming } from './sim';
 import { ChatTransport } from './types';
 export { DEMO_RENDERERS, type DemoProductCard, type DemoChartCard, type DemoSourcesCard, type DemoToolCallCard, type DemoDiffCard, type DemoPlanCard, type DemoInterruptCard, type DemoStackCard, } from './demo-cards';
+export { DEMO_ARTIFACT_RENDERERS, DEMO_DASHBOARD_ARTIFACT, DEMO_PAGE_ARTIFACT, } from './demo-artifacts';
 export { DEMO_SCRIPT, DEMO_STARTERS } from './demo-script';
 export { DEMO_MENTIONS, DEMO_MODELS, DEMO_THREAD_GROUPS, DEMO_PROJECTS, DEMO_THREAD_NAMES, DEMO_THREADS, DEMO_WELCOME_OPTIONS, type DemoWelcomeVariant, } from './demo-fixtures';
 export { demoAgentTabs } from './demo-agent';

package/chat/demo.js

@@ -2,13 +2,17 @@ import { createSimTransport } from "./sim.js";
 import { DEMO_SCRIPT } from "./demo-script.js";
 import { DEMO_STARTERS } from "./demo-script.js";
 import { DEMO_RENDERERS } from "./demo-cards.js";
+import { DEMO_ARTIFACT_RENDERERS, DEMO_DASHBOARD_ARTIFACT, DEMO_PAGE_ARTIFACT } from "./demo-artifacts.js";
 import { DEMO_MENTIONS, DEMO_MODELS, DEMO_PROJECTS, DEMO_THREADS, DEMO_THREAD_GROUPS, DEMO_THREAD_NAMES, DEMO_WELCOME_OPTIONS } from "./demo-fixtures.js";
 import { demoAgentTabs } from "./demo-agent.js";
 import { DemoBoard, DemoWelcome } from "./DemoWelcome.js";
 const createDemoTransport = (timing) => createSimTransport(DEMO_SCRIPT, timing);
 export {
+  DEMO_ARTIFACT_RENDERERS,
+  DEMO_DASHBOARD_ARTIFACT,
   DEMO_MENTIONS,
   DEMO_MODELS,
+  DEMO_PAGE_ARTIFACT,
   DEMO_PROJECTS,
   DEMO_RENDERERS,
   DEMO_SCRIPT,

package/chat/index.d.ts

@@ -19,8 +19,10 @@ export { ChatLauncher, CHAT_PANEL_ID, type ChatLauncherProps } from './ChatLaunc
 export { ChatThreads, type ChatThreadsProps } from './ChatThreads';
 export { ChatTabs, type ChatTabsProps } from './ChatTabs';
 export { ChatAgentPane, type ChatAgentPaneProps } from './ChatAgentPane';
-export { useChatWidget, isInternalPath, createFeedbackPoster, type ChatView, type ChatCardRenderers, type ChatLinkRenderer, type ChatWidgetContextValue, type FeedbackSink, } from './context';
-export { DOCK_QUERY, TAKEOVER_QUERY, THREADS_RAIL_MIN_WIDTH, ASIDE_RAIL_MIN_WIDTH, useTakeoverViewport, } from './queries';
+export { ChatArtifactPane, type ChatArtifactPaneProps } from './ChatArtifactPane';
+export { ChatArtifactCard, type ChatArtifactCardProps } from './ChatArtifactCard';
+export { useChatWidget, isInternalPath, createFeedbackPoster, type ChatView, type ChatArtifactRenderers, type ChatCardRenderers, type ChatLinkRenderer, type ChatWidgetContextValue, type FeedbackSink, } from './context';
+export { DOCK_QUERY, TAKEOVER_QUERY, THREADS_RAIL_MIN_WIDTH, ASIDE_RAIL_MIN_WIDTH, ARTIFACT_MIN_COLUMN_WIDTH, ASIDE_WITH_THREADS_MIN_WIDTH, useTakeoverViewport, } from './queries';
 export { useChat, DEFAULT_PLACEHOLDER_COPY, type ChatState, type ChatPlaceholderCopy, } from './useChat';
 export { useThreads, THREAD_NAMING_DELAY_MS, type ThreadsOptions, type ThreadsState } from './threads';
 export { createFetchTransport, DEFAULT_FETCH_COPY, FIRST_BYTE_TIMEOUT_MS, MAX_TRANSPORT_TURNS, type FetchTransportOptions, type FetchTransportCopy, } from './transport';
@@ -30,5 +32,6 @@ export { SUGGESTION_MAX_CHARS, fitsChip } from './suggestions';
 export { STARTER_COUNT, pickStarters, namedStarter, hashString, mulberry32, } from './starters';
 export { greetingFor, readGreeting, serverGreeting, subscribeClock, DEFAULT_GREETING_COPY, type GreetingCopy, } from './greeting';
 export { CHAT_PLACEMENTS, chatPlacement, DOCK_MIN_WIDTH, DOCK_MAX_WIDTH, FLOAT_MAX_SCALE, FLOAT_EDGE_GAP, dockWidthFromDrag, isFloatDragStart, clampFloatPosition, type ChatPlacement, type ChatSide, } from './placement';
-export { CHAT_EVENT_KINDS, type ChatCard, type ChatEvent, type ChatTransport, type ChatTransportMessage, type ChatTurn, type ChatModelOption, type ChatFeedbackVerdict, type LivePhase, type LiveResponse, type Starter, } from './types';
+export { artifactCard, cardArtifact } from './artifacts';
+export { ARTIFACT_CARD_KIND, CHAT_EVENT_KINDS, type ChatArtifact, type ChatCard, type ChatEvent, type ChatTransport, type ChatTransportMessage, type ChatTurn, type ChatModelOption, type ChatFeedbackVerdict, type LivePhase, type LiveResponse, type Starter, } from './types';
 export { chatWidget, chatWidgetRegistry, WIDGET_COUNT, type ChatWidgetMeta } from './registry';

package/chat/index.js

@@ -4,8 +4,10 @@ import { CHAT_PANEL_ID, ChatLauncher } from "./ChatLauncher.js";
 import { ChatThreads } from "./ChatThreads.js";
 import { ChatTabs } from "./ChatTabs.js";
 import { ChatAgentPane } from "./ChatAgentPane.js";
+import { ChatArtifactPane } from "./ChatArtifactPane.js";
+import { ChatArtifactCard } from "./ChatArtifactCard.js";
 import { createFeedbackPoster, isInternalPath, useChatWidget } from "./context.js";
-import { ASIDE_RAIL_MIN_WIDTH, DOCK_QUERY, TAKEOVER_QUERY, THREADS_RAIL_MIN_WIDTH, useTakeoverViewport } from "./queries.js";
+import { ARTIFACT_MIN_COLUMN_WIDTH, ASIDE_RAIL_MIN_WIDTH, ASIDE_WITH_THREADS_MIN_WIDTH, DOCK_QUERY, TAKEOVER_QUERY, THREADS_RAIL_MIN_WIDTH, useTakeoverViewport } from "./queries.js";
 import { DEFAULT_PLACEHOLDER_COPY, useChat } from "./useChat.js";
 import { THREAD_NAMING_DELAY_MS, useThreads } from "./threads.js";
 import { DEFAULT_FETCH_COPY, FIRST_BYTE_TIMEOUT_MS, MAX_TRANSPORT_TURNS, createFetchTransport } from "./transport.js";
@@ -15,14 +17,20 @@ import { SUGGESTION_MAX_CHARS, fitsChip } from "./suggestions.js";
 import { STARTER_COUNT, hashString, mulberry32, namedStarter, pickStarters } from "./starters.js";
 import { DEFAULT_GREETING_COPY, greetingFor, readGreeting, serverGreeting, subscribeClock } from "./greeting.js";
 import { CHAT_PLACEMENTS, DOCK_MAX_WIDTH, DOCK_MIN_WIDTH, FLOAT_EDGE_GAP, FLOAT_MAX_SCALE, chatPlacement, clampFloatPosition, dockWidthFromDrag, isFloatDragStart } from "./placement.js";
-import { CHAT_EVENT_KINDS } from "./types.js";
+import { artifactCard, cardArtifact } from "./artifacts.js";
+import { ARTIFACT_CARD_KIND, CHAT_EVENT_KINDS } from "./types.js";
 import { WIDGET_COUNT, chatWidget, chatWidgetRegistry } from "./registry.js";
 export {
+  ARTIFACT_CARD_KIND,
+  ARTIFACT_MIN_COLUMN_WIDTH,
   ASIDE_RAIL_MIN_WIDTH,
+  ASIDE_WITH_THREADS_MIN_WIDTH,
   CHAT_EVENT_KINDS,
   CHAT_PANEL_ID,
   CHAT_PLACEMENTS,
   ChatAgentPane,
+  ChatArtifactCard,
+  ChatArtifactPane,
   ChatLauncher,
   ChatProvider,
   ChatTabs,
@@ -49,6 +57,8 @@ export {
   THREADS_RAIL_MIN_WIDTH,
   THREAD_NAMING_DELAY_MS,
   WIDGET_COUNT,
+  artifactCard,
+  cardArtifact,
   chatPlacement,
   chatWidget,
   chatWidgetRegistry,

package/chat/queries.d.ts

@@ -2,7 +2,16 @@ export declare const DOCK_QUERY = "(min-width: 1440px)";
 export declare const TAKEOVER_QUERY = "(max-width: 719px)";
 /** The widget's own width thresholds for seating its rails inline. */
 export declare const THREADS_RAIL_MIN_WIDTH = 720;
-export declare const ASIDE_RAIL_MIN_WIDTH = 860;
+/** The trailing seat's threshold, one number for both of its tenants: at
+    this width and up the agent pane and the artifact panel sit beside the
+    conversation, below it each rises as a bottom sheet. */
+export declare const ASIDE_RAIL_MIN_WIDTH = 760;
+/** Below this the inline threads rail yields its room to a trailing panel
+    seated inline, and goes back behind the header's hamburger. */
+export declare const ASIDE_WITH_THREADS_MIN_WIDTH = 1040;
+/** The floor either column keeps while an artifact is dragged wider or
+    narrower: the conversation never loses more than this, nor the panel. */
+export declare const ARTIFACT_MIN_COLUMN_WIDTH = 320;
 /** Whether the viewport is a phone width (TAKEOVER_QUERY), false on the
     server and for the first client render. Shared by the launcher and any
     host stage, which both hand the widget its phone layout. */

package/chat/queries.js

@@ -3,7 +3,9 @@ import { useSyncExternalStore } from "react";
 const DOCK_QUERY = "(min-width: 1440px)";
 const TAKEOVER_QUERY = "(max-width: 719px)";
 const THREADS_RAIL_MIN_WIDTH = 720;
-const ASIDE_RAIL_MIN_WIDTH = 860;
+const ASIDE_RAIL_MIN_WIDTH = 760;
+const ASIDE_WITH_THREADS_MIN_WIDTH = 1040;
+const ARTIFACT_MIN_COLUMN_WIDTH = 320;
 const subscribeTakeover = (onChange) => {
   const media = window.matchMedia(TAKEOVER_QUERY);
   media.addEventListener("change", onChange);
@@ -14,7 +16,9 @@ function useTakeoverViewport() {
   return useSyncExternalStore(subscribeTakeover, readTakeover, () => false);
 }
 export {
+  ARTIFACT_MIN_COLUMN_WIDTH,
   ASIDE_RAIL_MIN_WIDTH,
+  ASIDE_WITH_THREADS_MIN_WIDTH,
   DOCK_QUERY,
   TAKEOVER_QUERY,
   THREADS_RAIL_MIN_WIDTH,

package/chat/registry.json.d.ts

@@ -35,6 +35,8 @@ declare const _default: {
         "AgentRail",
         "AgentStatus",
         "AiButton",
+        "ArtifactCard",
+        "ArtifactPanel",
         "AttachmentDropZone",
         "AttachmentGroup",
         "ChatHeader",
@@ -44,6 +46,7 @@ declare const _default: {
         "CodeBlock",
         "Composer",
         "DropdownMenu",
+        "EmptyState",
         "Mention",
         "ModelPicker",
         "PixelAvatar",
@@ -59,7 +62,9 @@ declare const _default: {
         "ChatLauncher",
         "ChatThreads",
         "ChatTabs",
-        "ChatAgentPane"
+        "ChatAgentPane",
+        "ChatArtifactPane",
+        "ChatArtifactCard"
       ]
     }
   ]

package/chat/registry.json.js

@@ -1,5 +1,5 @@
 const $comment = "The widget registry: the fourth kind of thing the package ships, between the components and the templates. One member by design. `parts` names the library components the widget composes (held to src/components/registry.json by scripts/validate-chat-widget.mjs), `subpaths` the package exports it occupies (held to scripts/package-manifest.mjs), `category` the component category whose section and sidebar group its page joins (held to src/components/registry.json), `peers` the optional peer dependencies each subpath needs (held to package.json). The widget's page under /components, the /docs/chat page, the chat corpus and the MCP tools read this file; never type its facts elsewhere.";
-const widgets = [{ "name": "ChatWidget", "slug": "ai-chat", "label": "AI chat", "category": "ai", "description": "The whole AI chat, assembled: the panel, the streaming replies, the history, the cards a reply can carry and the server handlers, set up with props.", "command": "init chat", "subpaths": { "./chat": "The widget, the provider, the launcher and the engine under them.", "./chat/server": "The streaming chat handler and its follow-ups and feedback siblings, for any web-standard route.", "./chat/upstash": "Rate limits, a daily budget and the exchange log over Upstash Redis, as the handlers' guardrails.", "./chat/demo": "A scripted conversation with rich cards and fixtures, for a preview that needs no key.", "./chat/chat.css": "The widget's stylesheet." }, "peers": { "./chat": ["react-markdown", "remark-gfm"], "./chat/server": ["@anthropic-ai/sdk"], "./chat/upstash": ["@upstash/ratelimit", "@upstash/redis"], "./chat/demo": ["recharts"] }, "parts": ["AgentRail", "AgentStatus", "AiButton", "AttachmentDropZone", "AttachmentGroup", "ChatHeader", "ChatMessage", "ChatThread", "CircularButton", "CodeBlock", "Composer", "DropdownMenu", "Mention", "ModelPicker", "PixelAvatar", "PromptSuggestions", "Prose", "Reasoning", "ThreadPanel", "ThreadTabs"], "documented": ["ChatWidget", "ChatProvider", "ChatLauncher", "ChatThreads", "ChatTabs", "ChatAgentPane"] }];
+const widgets = [{ "name": "ChatWidget", "slug": "ai-chat", "label": "AI chat", "category": "ai", "description": "The whole AI chat, assembled: the panel, the streaming replies, the history, the cards a reply can carry and the server handlers, set up with props.", "command": "init chat", "subpaths": { "./chat": "The widget, the provider, the launcher and the engine under them.", "./chat/server": "The streaming chat handler and its follow-ups and feedback siblings, for any web-standard route.", "./chat/upstash": "Rate limits, a daily budget and the exchange log over Upstash Redis, as the handlers' guardrails.", "./chat/demo": "A scripted conversation with rich cards and fixtures, for a preview that needs no key.", "./chat/chat.css": "The widget's stylesheet." }, "peers": { "./chat": ["react-markdown", "remark-gfm"], "./chat/server": ["@anthropic-ai/sdk"], "./chat/upstash": ["@upstash/ratelimit", "@upstash/redis"], "./chat/demo": ["recharts"] }, "parts": ["AgentRail", "AgentStatus", "AiButton", "ArtifactCard", "ArtifactPanel", "AttachmentDropZone", "AttachmentGroup", "ChatHeader", "ChatMessage", "ChatThread", "CircularButton", "CodeBlock", "Composer", "DropdownMenu", "EmptyState", "Mention", "ModelPicker", "PixelAvatar", "PromptSuggestions", "Prose", "Reasoning", "ThreadPanel", "ThreadTabs"], "documented": ["ChatWidget", "ChatProvider", "ChatLauncher", "ChatThreads", "ChatTabs", "ChatAgentPane", "ChatArtifactPane", "ChatArtifactCard"] }];
 const registry = {
   $comment,
   widgets

package/chat/types.d.ts

@@ -12,6 +12,42 @@ export interface ChatCard {
     /** Whatever the renderer for `kind` expects. Must survive JSON. */
     data: unknown;
 }
+/**
+ * Something the chat made that is worth more room than a turn can give it: a
+ * dashboard, a document, a page, a site. It travels as an ordinary card of
+ * kind `ARTIFACT_CARD_KIND`, so any transport that can send a card can send
+ * one; the thread draws it as a tile, and the tile opens the artifact panel
+ * beside the conversation.
+ */
+export interface ChatArtifact {
+    /** Stable identity: the same id reopened is the same artifact. */
+    id: string;
+    /** The artifact's name, on the tile and in the panel's header. */
+    title: string;
+    /**
+     * How to draw it. `html` frames the `html` document, `url` frames the
+     * `url`, `code` shows the `code` alone; any other kind is drawn by the
+     * provider's `artifactRenderers`. An unknown kind with no renderer falls
+     * back to whichever of `html`, `url` and `code` it carries.
+     */
+    kind: string;
+    /** A quiet line beside the name: what it is, or which version. */
+    meta?: string;
+    /** A Material Symbol name for the tile and the header. */
+    icon?: string;
+    /** A complete HTML document, drawn in a sandboxed frame. */
+    html?: string;
+    /** A page to frame. Only http(s) URLs and same-site paths are framed. */
+    url?: string;
+    /** The source, offered as the panel's Code view. An `html` artifact offers its document when this is absent. */
+    code?: string;
+    /** The source's language. */
+    language?: string;
+    /** Whatever a custom renderer for `kind` expects. Must survive JSON. */
+    data?: unknown;
+}
+/** The card kind an artifact travels as. Its `data` is a `ChatArtifact`. */
+export declare const ARTIFACT_CARD_KIND = "artifact";
 export type ChatEvent = 
 /** A live status step: the AgentStatus label, with an optional reasoning trace point. */
 {

package/chat/types.js

@@ -1,3 +1,4 @@
+const ARTIFACT_CARD_KIND = "artifact";
 const CHAT_EVENT_KINDS = [
   "status",
   "model",
@@ -12,5 +13,6 @@ const CHAT_EVENT_KINDS = [
   "error"
 ];
 export {
+  ARTIFACT_CARD_KIND,
   CHAT_EVENT_KINDS
 };

package/components/AgentRail/AgentRail.css

@@ -38,11 +38,12 @@
 }
 
 /* ============================================
-   COLLAPSE — the way out, pinned to the LEADING corner. The trailing one
-   belongs to the host: a rail seated at a card's edge puts the card's own
-   controls above it, and the collapse would sit under them. A chevron,
-   never a cross, for the same reason: two crosses a few pixels apart read
-   as two ways to dismiss the same thing.
+   COLLAPSE — the way out. By default a chevron pinned to the LEADING
+   corner: the trailing one usually belongs to the host, since a rail seated
+   at a card's edge puts the card's own controls above it, and two crosses a
+   few pixels apart read as two ways to dismiss the same thing. A host that
+   has weighed that and wants the way out where a panel's close is looked
+   for takes the close variant below: a cross in the trailing corner.
    ============================================ */
 
 .ds-agent-rail__collapse {
@@ -72,6 +73,14 @@
   transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
 }
 
+/* The close variant: a cross in the trailing corner, where a panel's own
+   way out usually sits. The host that asks for it has decided its controls
+   and this one do not collide. */
+.ds-agent-rail__collapse--close {
+  left: auto;
+  right: var(--padding-300);
+}
+
 .ds-agent-rail__collapse .material-symbols-rounded {
   --icon-size: var(--icon-size-600);
 }

package/components/AgentRail/AgentRail.d.ts

@@ -49,6 +49,8 @@ type AgentRailOwnProps = {
     onCollapse?: () => void;
     /** Accessible name for the collapse affordance. */
     collapseLabel?: string;
+    /** How the collapse affordance is drawn. `chevron` (the default) pins a chevron to the leading corner, clear of a host's own controls. `close` pins a cross to the trailing corner, for a rail that is its card's only way out or whose host wants the way out where a panel's close usually is. */
+    collapseVariant?: 'chevron' | 'close';
     /** Rendered under the pane, outside its scroll — a sign-out row, a quiet hint. */
     footer?: React.ReactNode;
     /** Additional CSS classes */

package/components/AgentRail/AgentRail.js

@@ -15,6 +15,7 @@ const AgentRail = React.forwardRef(
     ariaLabel,
     onCollapse,
     collapseLabel = "Collapse the agent panel",
+    collapseVariant = "chevron",
     footer,
     className = "",
     ...rest
@@ -26,10 +27,10 @@ const AgentRail = React.forwardRef(
         "button",
         {
           type: "button",
-          className: `${baseClass}__collapse`,
+          className: `${baseClass}__collapse${collapseVariant === "close" ? ` ${baseClass}__collapse--close` : ""}`,
           "aria-label": collapseLabel,
           onClick: onCollapse,
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: collapseVariant === "close" ? "close" : "chevron_right" })
         }
       ),
       profile && /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [

package/components/ArtifactCard/ArtifactCard.css

@@ -0,0 +1,106 @@
+/* ============================================
+   ARTIFACT CARD COMPONENT
+   An artifact's place in a conversation: a mark, the name over its kind,
+   and a cue for what a press does. One row, the width of a card, and a
+   toggle button: pressed while its artifact is on stage in the panel.
+   ============================================ */
+
+/* Base */
+
+.ds-artifact-card {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300);
+  width: 100%;
+  max-width: 360px;
+  padding: var(--padding-300);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  background-color: var(--color-bg-container-primary);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-artifact-card:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-artifact-card:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* States */
+
+/* On stage, the tile holds the "on stage" fill ThreadPanel's active row and
+   ThreadTabs' active tab wear. */
+.ds-artifact-card--open {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+/* The mark steps to the card's resting fill while the card holds the
+   on-stage one, so it stays a tile on the card instead of dissolving into
+   a fill of nearly its own value. */
+.ds-artifact-card--open .ds-artifact-card__mark {
+  background-color: var(--color-bg-container-primary);
+}
+
+.ds-artifact-card__mark {
+  --icon-size: var(--icon-size-600);
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  /* Concentric with the card: its radius less the padding between them,
+     computed from the live tokens so the corner holds under any theme's
+     radius scale, and squares off with a squared theme. */
+  border-radius: max(0px, calc(var(--radius-600) - var(--padding-300)));
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-icon-primary);
+}
+
+.ds-artifact-card__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ds-artifact-card__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-artifact-card__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+}
+
+.ds-artifact-card__cue {
+  --icon-size: var(--icon-size-500);
+  flex: none;
+  color: var(--color-icon-secondary);
+}
+
+.ds-artifact-card:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/components/ArtifactCard/ArtifactCard.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+/** Props owned by ArtifactCard itself — everything else falls through to the root `<button>`. */
+type ArtifactCardOwnProps = {
+    /** The artifact's name. Collides with the native `title` tooltip attribute on purpose: the card shows its name, it does not hide it in a tooltip. */
+    title: React.ReactNode;
+    /** A quiet line under the name: what kind of thing this is, or which version. */
+    meta?: React.ReactNode;
+    /** The leading mark — Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** Whether this card's artifact is on stage in its panel. The card holds the on-stage fill, announces itself pressed, and its trailing cue turns from open to close. */
+    open?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ArtifactCardProps extends ArtifactCardOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ArtifactCardOwnProps | 'type'> {
+}
+/**
+ * ArtifactCard is an artifact's place in a conversation: one row naming
+ * something the chat made, which opens it in an ArtifactPanel. It is a
+ * toggle button, so `open` is the whole state and `onClick` the whole
+ * behaviour; the host decides what opening means.
+ *
+ * Hook-free and stateless, so it renders from a Server Component until it
+ * is given a handler.
+ */
+export declare const ArtifactCard: React.ForwardRefExoticComponent<ArtifactCardProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/ArtifactCard/ArtifactCard.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ArtifactCard.css";
+import "../../fonts/material-symbols.css";
+const baseClass = "ds-artifact-card";
+const ArtifactCard = React.forwardRef(
+  ({ title, meta, icon = "draft", open = false, className = "", ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      ...rest,
+      type: "button",
+      className: [baseClass, open && `${baseClass}--open`, className].filter(Boolean).join(" "),
+      "aria-pressed": open,
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark`, children: icon }),
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+          meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__cue material-symbols-rounded`, "aria-hidden": "true", children: open ? "close" : "open_in_new_down" })
+      ]
+    }
+  )
+);
+ArtifactCard.displayName = "ArtifactCard";
+export {
+  ArtifactCard
+};