rift-ds 1.8.0 → 1.9.0

package/components/ArtifactPanel/ArtifactPanel.css

@@ -0,0 +1,159 @@
+/* ============================================
+   ARTIFACT PANEL COMPONENT
+   The surface a chat opens beside the conversation to show something it
+   made. A header names the artifact and carries its controls; the body is
+   the preview (live content, or a sandboxed frame) or the source.
+   Deliberately surface-less, like AgentRail and ThreadPanel — the host
+   paints the card it sits in, and decides where that card goes.
+
+   One scroll region only: the body. The header stays put, so the controls
+   never leave with the content.
+   ============================================ */
+
+/* Base */
+
+.ds-artifact-panel {
+  /* Width, height and padding combine on the root, so the component declares
+     its own sizing model rather than leaning on a host reset. */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER — the artifact's name, then its controls
+   ============================================ */
+
+/* The controls stand --padding-300 in from the top and trailing edges, the
+   inset AgentRail gives its own corner control, so the two panels that
+   share a chat's trailing seat put their close in the same place and a
+   rounded host card has room to turn its corner around it. */
+.ds-artifact-panel__header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-300);
+  min-width: 0;
+  padding: var(--padding-300) var(--padding-300) var(--padding-300)
+    var(--padding-400);
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+}
+
+.ds-artifact-panel__heading {
+  display: flex;
+  flex: 1;
+  align-items: baseline;
+  gap: var(--gap-200);
+  min-width: 0;
+}
+
+/* The mark sits on the row's centre line while the name and its meta share
+   a baseline. */
+.ds-artifact-panel__icon {
+  --icon-size: var(--icon-size-500);
+  display: inline-flex;
+  flex: none;
+  align-self: center;
+  color: var(--color-icon-secondary);
+}
+
+/* ChatHeader's title face, so the two headers read as one line of type.
+   The name outranks its meta when the row runs short: the meta carries a
+   shrink factor large enough to give way entirely before the name loses a
+   letter. */
+.ds-artifact-panel__title {
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-artifact-panel__meta {
+  flex: 0 1000 auto;
+  min-width: 0;
+  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-panel__controls {
+  display: flex;
+  flex: none;
+  align-items: center;
+  /* The row is the buttons' height whatever it holds: the view switch
+     stands a hair taller than a button, and a header that grew with it
+     would move every control when an artifact with source took the stage. */
+  height: 40px;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+/* The view switch stands a beat clear of the icon buttons it leads. */
+.ds-artifact-panel__controls > .ds-segmented-control {
+  margin-inline-end: var(--gap-100);
+}
+
+/* ============================================
+   BODY — the preview or the source
+   ============================================ */
+
+.ds-artifact-panel__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Live content scrolls inside the body and brings its own padding: a
+   dashboard wants an inset, a full-bleed page does not. */
+.ds-artifact-panel__content,
+.ds-artifact-panel__code {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  /* ThreadPanel's tucked-away thin scrollbar: no track fill, the thumb
+     showing only while the region is hovered or scrolled from the keyboard. */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.ds-artifact-panel__content:hover,
+.ds-artifact-panel__content:focus-within,
+.ds-artifact-panel__code:hover,
+.ds-artifact-panel__code:focus-within {
+  scrollbar-color: var(--color-bg-container-border) transparent;
+}
+
+.ds-artifact-panel__code {
+  padding: var(--padding-400);
+}
+
+/* A framed document is its own page: it fills the body edge to edge and
+   owns its own scrolling. */
+.ds-artifact-panel__frame {
+  display: block;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  border: none;
+}

package/components/ArtifactPanel/ArtifactPanel.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+/** Which face of the artifact is on stage. */
+export type ArtifactPanelView = 'preview' | 'code';
+/** Props owned by ArtifactPanel itself — everything else falls through to the root `<section>`. */
+type ArtifactPanelOwnProps = {
+    /** The artifact's name, shown in the header and used as the panel's accessible name. Collides with the native `title` tooltip attribute on purpose: a panel has a heading, not a tooltip. */
+    title: React.ReactNode;
+    /** A quiet line beside the name: what kind of thing this is, or which version. */
+    meta?: React.ReactNode;
+    /** Leading mark in the header — Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** The preview, as live React content. Wins over `html` and `src`. */
+    children?: React.ReactNode;
+    /** The preview, as a complete HTML document drawn in a sandboxed frame. Wins over `src`. A document that honours `prefers-color-scheme` follows the `color-scheme` of the page around the panel, so set that with your theme and the preview turns light or dark with it. */
+    html?: string;
+    /** The preview, as a URL drawn in a sandboxed frame: a deployed page, a site. */
+    src?: string;
+    /** The frame's `sandbox` tokens for `html` and `src`. The default lets a document run its own scripts and forms in an origin of its own, with no reach into the host page; widen it only for a source you trust. */
+    sandbox?: string;
+    /** Accessible name for the preview frame. Defaults to the title when that is a string. */
+    frameTitle?: string;
+    /** The artifact's source. Given, the header offers a Code view beside the preview (or shows the code alone when there is no preview). */
+    code?: string;
+    /** The source's language, shown on the code view. */
+    language?: string;
+    /** The view on stage, when the host owns the state. */
+    view?: ArtifactPanelView;
+    /** The view the panel opens on when it keeps its own state. */
+    defaultView?: ArtifactPanelView;
+    /** Fires with the chosen view. */
+    onViewChange?: (view: ArtifactPanelView) => void;
+    /** Whether the host is showing the panel at its expanded size. The panel never sizes itself: this only picks the toggle's icon and name. */
+    expanded?: boolean;
+    /** Fires with the next state when the expand toggle is pressed. The toggle renders only when this is given. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Fires when the close button is pressed. The button renders only when this is given. */
+    onClose?: () => void;
+    /** Extra header controls, seated ahead of the expand and close buttons: a download, a share, a version menu. */
+    actions?: React.ReactNode;
+    /** Label for the preview segment of the view switch. */
+    previewLabel?: string;
+    /** Label for the code segment of the view switch. */
+    codeLabel?: string;
+    /** Accessible name for the view switch. */
+    viewLabel?: string;
+    /** Accessible name for the expand toggle while the panel is at its resting size. */
+    expandLabel?: string;
+    /** Accessible name for the expand toggle while the panel is expanded. */
+    collapseLabel?: string;
+    /** Accessible name for the close button. */
+    closeLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ArtifactPanelProps extends ArtifactPanelOwnProps, Omit<React.ComponentPropsWithoutRef<'section'>, keyof ArtifactPanelOwnProps> {
+}
+/**
+ * ArtifactPanel is the surface a chat opens beside the conversation to show
+ * something it made: a dashboard, a document, a page, a site. A header names
+ * the artifact and carries its controls; the body is the preview, drawn from
+ * live React content, a sandboxed HTML document or a URL, with the source one
+ * switch away when there is any.
+ *
+ * Surface-less like AgentRail and ThreadPanel: it fills the box the host
+ * gives it and the host paints the card around it. Where it sits and how
+ * large it runs are the host's too, so `expanded` and `onClose` only report
+ * intent.
+ */
+export declare const ArtifactPanel: React.ForwardRefExoticComponent<ArtifactPanelProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/ArtifactPanel/ArtifactPanel.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
+import { CodeBlock } from "../CodeBlock/CodeBlock.js";
+import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
+import "./ArtifactPanel.css";
+import "../../fonts/material-symbols.css";
+const baseClass = "ds-artifact-panel";
+const ArtifactPanel = React.forwardRef(
+  ({
+    title,
+    meta,
+    icon,
+    children,
+    html,
+    src,
+    sandbox = "allow-scripts allow-forms",
+    frameTitle,
+    code,
+    language,
+    view,
+    defaultView,
+    onViewChange,
+    expanded = false,
+    onExpandedChange,
+    onClose,
+    actions,
+    previewLabel = "Preview",
+    codeLabel = "Code",
+    viewLabel = "Artifact view",
+    expandLabel = "Expand the artifact",
+    collapseLabel = "Collapse the artifact",
+    closeLabel = "Close the artifact",
+    className = "",
+    ...rest
+  }, ref) => {
+    const titleId = useId();
+    const hasPreview = Boolean(children) || html !== void 0 || Boolean(src);
+    const hasCode = code !== void 0;
+    const [ownView, setOwnView] = useState(defaultView ?? "preview");
+    const wanted = view ?? ownView;
+    const current = wanted === "code" ? hasCode ? "code" : "preview" : hasPreview ? "preview" : "code";
+    const changeView = (next) => {
+      const chosen = next === "code" ? "code" : "preview";
+      setOwnView(chosen);
+      onViewChange?.(chosen);
+    };
+    const frameName = frameTitle ?? (typeof title === "string" ? title : previewLabel);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        ...rest,
+        className: [baseClass, className].filter(Boolean).join(" "),
+        "aria-labelledby": titleId,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+              icon !== void 0 && (typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, children: icon })),
+              /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
+              meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__controls`, children: [
+              hasPreview && hasCode && /* @__PURE__ */ jsx(
+                SegmentedControl,
+                {
+                  size: "compact",
+                  variant: "neutral",
+                  ariaLabel: viewLabel,
+                  segments: [
+                    { value: "preview", label: previewLabel },
+                    { value: "code", label: codeLabel }
+                  ],
+                  activeSegment: current,
+                  onSegmentChange: changeView
+                }
+              ),
+              actions,
+              onExpandedChange && /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: expanded ? "collapse_content" : "expand_content",
+                  variant: "tertiary",
+                  ariaLabel: expanded ? collapseLabel : expandLabel,
+                  tooltipPosition: "bottom",
+                  "aria-pressed": expanded,
+                  onClick: () => onExpandedChange(!expanded)
+                }
+              ),
+              onClose && /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "close",
+                  variant: "tertiary",
+                  ariaLabel: closeLabel,
+                  tooltipPosition: "bottom",
+                  onClick: onClose
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, "data-view": current, children: current === "code" && hasCode ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__code`, children: /* @__PURE__ */ jsx(CodeBlock, { code: code ?? "", language }) }) : children ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) : html !== void 0 ? /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              className: `${baseClass}__frame`,
+              title: frameName,
+              srcDoc: html,
+              sandbox,
+              referrerPolicy: "no-referrer"
+            }
+          ) : src ? /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              className: `${baseClass}__frame`,
+              title: frameName,
+              src,
+              sandbox,
+              referrerPolicy: "no-referrer",
+              loading: "lazy"
+            }
+          ) : null })
+        ]
+      }
+    );
+  }
+);
+ArtifactPanel.displayName = "ArtifactPanel";
+export {
+  ArtifactPanel
+};

package/components/ThreadPanel/ThreadPanel.css

@@ -51,10 +51,9 @@
    HEADER — brand row and the collapse toggle
    ============================================ */
 
-/* Collapsed, --padding-200 centres the 24px mark on the rail's axis
-   (12 + 8 = the rows' icon seat); expanded it deepens to the 28px optical
-   seat with everything else, the padding gliding with the sweep. The
-   margin sits the brand row evenly between the panel's top edge and the
+/* --padding-200 centres the 24px mark on the rail's axis (12 + 8 = the
+   rows' icon seat) and holds it there expanded, so the logo never moves
+   as the rail sweeps. The margin sits the brand row evenly between the panel's top edge and the
    new-thread row: 6 + 12 + the panel's 4px gap below mirrors the 16px
    panel padding + 6 above. */
 .ds-thread-panel__header {
@@ -64,11 +63,6 @@
   min-width: 0;
   padding: var(--padding-150) var(--padding-200);
   margin-bottom: var(--gap-300);
-  transition: padding var(--motion-duration-slow) var(--motion-ease-emphasized);
-}
-
-.ds-thread-panel--expanded .ds-thread-panel__header {
-  padding: var(--padding-150) var(--padding-400);
 }
 
 /* A logo-less header collapsed to the rail: the empty brand slot would
@@ -151,11 +145,57 @@
   overflow: hidden;
   opacity: 0;
   transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
-    width 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);
+}
+
+/* The hover wash is a circle drawn around the 24px mark rather than a
+   bigger button, so the glyph keeps its place on the trailing rail. The
+   toggle clips while it folds, so the wash only exists once it is open. */
+.ds-thread-panel__toggle::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--gap-100));
+  z-index: -1;
+  border-radius: var(--radius-pill);
+  background-color: transparent;
+  transition: background-color var(--motion-duration-fast)
+    var(--motion-ease-standard);
 }
 
+.ds-thread-panel--expanded .ds-thread-panel__toggle,
+.ds-thread-panel__toggle--standalone {
+  position: relative;
+  z-index: 0;
+  overflow: visible;
+}
+
+.ds-thread-panel__toggle:hover::before {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-thread-panel__toggle:active::before {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* Collapsed, the rail is too narrow for a tooltip and clips it; the
+   native title carries the name there instead. */
+.ds-thread-panel__toggle-tip {
+  flex: none;
+}
+
+.ds-thread-panel:not(.ds-thread-panel--expanded)
+  .ds-thread-panel__toggle-tip
+  .ds-tooltip__panel {
+  display: none;
+}
+
+/* The glyph's ink stops a bearing short of its 24px box, so the box is
+   pulled out by that much: the mark's right edge lands on the rail the
+   rows' meta captions and the profile's caption end on. */
 .ds-thread-panel--expanded .ds-thread-panel__toggle {
   width: 24px;
+  margin-inline-end: calc(-1 * var(--gap-100));
   opacity: 1;
 }
 
@@ -199,20 +239,13 @@
   text-align: left;
   text-decoration: none;
   transition: background-color var(--motion-duration-fast)
-      var(--motion-ease-standard),
-    padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+    var(--motion-ease-standard);
 }
 
-/* Expanded, the rows breathe: --padding-400 inline sets the 28px optical
-   seat (12 + 16) that everything in the panel aligns to — the pen icon's
-   box is the guide. Collapsed returns to --padding-200, which is what the
-   40px circle's math needs; the padding glides with the rail's sweep. */
-.ds-thread-panel--expanded .ds-thread-panel__new,
-.ds-thread-panel--expanded .ds-thread-panel__control,
-.ds-thread-panel--expanded .ds-thread-panel__project,
-.ds-thread-panel--expanded .ds-thread-panel__thread {
-  padding: var(--padding-200) var(--padding-400);
-}
+/* One seat in both states: the 20px inset (12 + 8) the collapsed circle's
+   math needs is also where the expanded panel's marks sit, so no mark
+   shifts as the rail sweeps. Text-led content sits a bearing deeper — see
+   TEXT SEAT at the end of the file. */
 
 .ds-thread-panel__new:hover,
 .ds-thread-panel__control:hover,
@@ -335,8 +368,7 @@
   align-items: center;
   gap: var(--gap-200);
   min-width: 0;
-  padding: var(--padding-150) var(--padding-200) var(--padding-150)
-    var(--padding-400);
+  padding: var(--padding-150) var(--padding-200);
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
@@ -356,7 +388,7 @@
   overflow: hidden;
   white-space: nowrap;
   font-family: var(--font-overline-family);
-  font-size: var(--font-overline-size);
+  font-size: var(--font-caption-size);
   font-weight: var(--font-overline-weight);
   line-height: var(--font-overline-line-height);
   letter-spacing: var(--font-overline-letter-spacing);
@@ -477,16 +509,19 @@
   gap: var(--gap-050);
 }
 
-/* Aligned with the expanded rows' 28px optical seat. The vertical padding
+/* The overline face set one step down, at the caption's size: the labels
+   sit among caption-sized meta and second lines, and the full overline
+   outweighed the thread titles it files. The overline's own line-height
+   stays, so the rhythm below is unchanged. Aligned with the text seat. The vertical padding
    is the rows' own inset restated — as if the label sat inside a row —
    so the overline keeps the pills' rhythm instead of hugging the
    new-thread row above and the first thread below. */
 .ds-thread-panel__group-label {
-  padding: var(--padding-200) var(--padding-400);
+  padding: var(--padding-200);
   overflow: hidden;
   white-space: nowrap;
   font-family: var(--font-overline-family);
-  font-size: var(--font-overline-size);
+  font-size: var(--font-caption-size);
   font-weight: var(--font-overline-weight);
   line-height: var(--font-overline-line-height);
   letter-spacing: var(--font-overline-letter-spacing);
@@ -760,7 +795,7 @@
   width: 100%;
   height: 40px;
   min-width: 0;
-  padding: 0 var(--padding-400);
+  padding: 0 var(--padding-200);
   border: var(--border-025) solid var(--color-action-primary-bg);
   border-radius: var(--radius-pill);
   background-color: var(--color-bg-container-primary);
@@ -778,7 +813,7 @@
 
 .ds-thread-panel__more {
   align-self: flex-start;
-  padding: var(--padding-150) var(--padding-400);
+  padding: var(--padding-150) var(--padding-200);
   border: none;
   border-radius: var(--radius-pill);
   background: transparent;
@@ -826,8 +861,9 @@
   pointer-events: auto;
 }
 
-/* Same per-state seat as the header: collapsed, --padding-100 centres the
-   32px avatar on the rail's axis (12 + 4); expanded joins the 28px seat. */
+/* --padding-100 centres the 32px avatar on the rail's axis (12 + 4) in
+   both states, so it holds still like the header's mark; expanded, only
+   the trailing inset deepens, landing the caption on the rows' meta rail. */
 .ds-thread-panel__profile {
   display: flex;
   align-items: center;
@@ -838,7 +874,8 @@
 }
 
 .ds-thread-panel--expanded .ds-thread-panel__profile {
-  padding: var(--padding-100) var(--padding-400);
+  padding: var(--padding-100) var(--padding-200) var(--padding-100)
+    var(--padding-100);
 }
 
 .ds-thread-panel__profile-name {
@@ -875,3 +912,20 @@
 .ds-thread-panel--expanded .ds-thread-panel__profile-meta {
   opacity: 1;
 }
+
+/* ============================================
+   TEXT SEAT — last, so it wins over each rule's padding shorthand
+   ============================================ */
+
+/* Text-led content — group labels, thread rows, the more row, the rename
+   field — sits a bearing deeper than the icon seat: a glyph's ink starts
+   that far inside its 24px box, so this is what lands the labels and status
+   dots under the pen's visible edge while the glyph itself stays centred
+   under the logo. None of it shows collapsed, so nothing moves. */
+.ds-thread-panel__thread,
+.ds-thread-panel__group-label,
+.ds-thread-panel__projects-header,
+.ds-thread-panel__more,
+.ds-thread-panel__rename {
+  padding-inline-start: var(--padding-300);
+}

package/components/ThreadPanel/ThreadPanel.js

@@ -5,6 +5,7 @@ import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { Kbd } from "../Kbd/Kbd.js";
 import { PixelAvatar } from "../PixelAvatar/PixelAvatar.js";
 import { StatusDot } from "../StatusDot/StatusDot.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 import "./ThreadPanel.css";
 import "../../fonts/material-symbols.css";
 import { distinctPixelInks } from "../PixelAvatar/pixelInks.js";
@@ -163,18 +164,28 @@ const ThreadPanel = React.forwardRef(
     const showNew = Boolean(newThreadLabel || onNewThread || newThreadHref);
     const showFooter = Boolean(footerSlot || profile);
     const logoExpands = Boolean(logo && !expanded && onExpandedChange);
+    const toggleLabel = expanded ? collapseLabel : expandLabel;
     const toggle = onExpandedChange && /* @__PURE__ */ jsx(
-      "button",
+      Tooltip,
       {
-        type: "button",
-        className: [
-          `${baseClass}__toggle`,
-          !logo && `${baseClass}__toggle--standalone`
-        ].filter(Boolean).join(" "),
-        "aria-label": expanded ? collapseLabel : expandLabel,
-        "aria-expanded": expanded,
-        onClick: () => onExpandedChange(!expanded),
-        children: /* @__PURE__ */ jsx("span", { className: iconClass, "aria-hidden": "true", children: expanded ? "left_panel_close" : "left_panel_open" })
+        content: toggleLabel,
+        position: "left",
+        className: `${baseClass}__toggle-tip`,
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: [
+              `${baseClass}__toggle`,
+              !logo && `${baseClass}__toggle--standalone`
+            ].filter(Boolean).join(" "),
+            "aria-label": toggleLabel,
+            title: expanded ? void 0 : toggleLabel,
+            "aria-expanded": expanded,
+            onClick: () => onExpandedChange(!expanded),
+            children: /* @__PURE__ */ jsx("span", { className: iconClass, "aria-hidden": "true", children: expanded ? "left_panel_close" : "left_panel_open" })
+          }
+        )
       }
     );
     const expandOnClick = !expanded && onExpandedChange ? (e) => {

package/components/registry.json

@@ -161,6 +161,22 @@
       "folder": "Chart",
       "recharts": true
     },
+    {
+      "name": "ArtifactCard",
+      "label": "Artifact card",
+      "slug": "artifact-card",
+      "description": "The tile a chat leaves in the thread for something it made, a toggle that opens the artifact in its panel.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ArtifactPanel",
+      "label": "Artifact panel",
+      "slug": "artifact-panel",
+      "description": "The panel a chat opens beside the conversation to preview what it made: live content, a sandboxed page or a site, with the source a switch away.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "AttachmentDropZone",
       "label": "Attachment drop zone",

package/components/registry.json.d.ts

@@ -161,6 +161,22 @@ declare const _default: {
       "folder": "Chart",
       "recharts": true
     },
+    {
+      "name": "ArtifactCard",
+      "label": "Artifact card",
+      "slug": "artifact-card",
+      "description": "The tile a chat leaves in the thread for something it made, a toggle that opens the artifact in its panel.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ArtifactPanel",
+      "label": "Artifact panel",
+      "slug": "artifact-panel",
+      "description": "The panel a chat opens beside the conversation to preview what it made: live content, a sandboxed page or a site, with the source a switch away.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "AttachmentDropZone",
       "label": "Attachment drop zone",