rift-ds 1.5.0 → 1.6.0

package/components/PromptSuggestions/PromptSuggestions.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Chip } from "../Chip/Chip.js";
 import { MOTION_EXIT_SYNC_MS } from "../../tokens/motion.js";
 import "./PromptSuggestions.css";
+import "../../fonts/material-symbols.css";
 const PromptSuggestions = React.forwardRef(
   ({
     suggestions,
@@ -37,6 +38,8 @@ const PromptSuggestions = React.forwardRef(
     };
     const arrangement = layout ?? (wrap ? "wrap" : "scroll");
     const chipSize = size === "compact" ? "default" : "large";
+    const block = arrangement === "tiles" ? "tile" : arrangement === "cards" ? "card" : null;
+    const renderIcon = (icon) => typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: icon });
     const classes = [
       baseClass,
       `${baseClass}--${size}`,
@@ -55,7 +58,13 @@ const PromptSuggestions = React.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": pending || void 0,
         "data-pending": pending || void 0,
-        children: pending ? Array.from({ length: pendingCount }, (_, index) => /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: `${baseClass}__item`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__skeleton-bar` }) }) }, index)) : suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+        children: pending ? Array.from({ length: pendingCount }, (_, index) => /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: `${baseClass}__item`, children: block ? (
+          /* The block's own shell, holding the label's bar. */
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__${block} ${baseClass}__${block}--pending`, children: [
+            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(
           "div",
           {
             role: "listitem",
@@ -65,7 +74,21 @@ const PromptSuggestions = React.forwardRef(
                 setChosenId(null);
               }
             },
-            children: /* @__PURE__ */ jsx(
+            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,

package/components/SourceChip/SourceChip.css

@@ -9,10 +9,14 @@
   /* Layout */
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-100); /* 4px */
+  gap: var(--gap-200); /* 8px */
 
-  /* Spacing */
-  padding: var(--padding-050) var(--padding-200); /* 2px 8px */
+  /* Spacing — the leading slot is tucked into the pill's start: the same
+     inset above, below and before it, so its circle is concentric with the
+     pill's end cap. */
+  --ds-source-chip-inset: var(--padding-100); /* 4px */
+  padding: var(--ds-source-chip-inset);
+  padding-inline-end: var(--padding-300); /* 12px */
 
   /* Shape — borderless pill on the secondary container */
   border-radius: var(--radius-pill);
@@ -45,8 +49,14 @@
   flex-shrink: 0;
   min-width: var(--icon-size-500);
   height: var(--icon-size-500);
-  border-radius: var(--radius-pill);
-  background-color: var(--color-bg-container-tertiary);
+  /* Concentric with the pill: its radius less the inset between them. A
+     squared theme squares the badge with it. */
+  border-radius: calc(var(--radius-pill) - var(--ds-source-chip-inset));
+  /* A solid inverse disc, so the numeral carries the weight a logo's
+     full-colour disc does: dark on light in dark mode, light on dark in
+     light mode. It holds through hover and press — the pill's wash moves
+     behind it. */
+  background-color: var(--color-bg-container-inverse);
 
   font-family: var(--font-paragraph-sm-emphasis-family);
   font-size: var(--font-paragraph-sm-emphasis-size);
@@ -54,7 +64,17 @@
   letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
   line-height: 1;
   font-variant-numeric: tabular-nums;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-on-inverse);
+}
+
+/* Centre the digit, not its line box. A line box reserves room for
+   descenders a lining figure never uses, so centring the box sets the
+   numeral visibly high in a 20px disc. Trimming the box to cap height and
+   baseline leaves only the glyph for the disc to centre. Browsers without
+   text-box keep the line-box centring. */
+.ds-source-chip__numeral {
+  display: block;
+  text-box: trim-both cap alphabetic;
 }
 
 /* ============================================
@@ -62,12 +82,45 @@
    ============================================ */
 
 .ds-source-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  width: var(--icon-size-500);
+  height: var(--icon-size-500);
   --icon-size: var(--icon-size-500);
   line-height: 1;
   color: var(--color-icon-primary);
 }
 
+/* ============================================
+   LOGO (leading, when no index; and the
+   preview's top line). The source's mark,
+   cropped to the badge's shape. An image
+   fills the box; a custom element is
+   stretched to it. The tertiary ground shows
+   through a transparent favicon, so it still
+   reads as a badge.
+   ============================================ */
+
+.ds-source-chip__logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--icon-size-500);
+  height: var(--icon-size-500);
+  border-radius: calc(var(--radius-pill) - var(--ds-source-chip-inset));
+  background-color: var(--color-bg-container-tertiary);
+  overflow: hidden;
+}
+
+.ds-source-chip__logo > * {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 /* ============================================
    TITLE — truncates with an ellipsis
    ============================================ */
@@ -80,15 +133,31 @@
 }
 
 /* ============================================
-   LINK (rendered as <a>)
+   INTERACTIVE (rendered as <a> or <button>)
+   The passive wash, as on Chip: one step on
+   hover, one more while pressed. A chip whose
+   preview is showing holds the hover step.
    ============================================ */
 
-.ds-source-chip--link {
+.ds-source-chip--interactive {
   cursor: pointer;
 }
 
-.ds-source-chip--link:hover {
-  background-color: var(--color-bg-container-tertiary);
+/* The <button> form: clear the UA chrome the anchor never had. */
+button.ds-source-chip {
+  border: 0;
+  margin: 0;
+  appearance: none;
+}
+
+.ds-source-chip--interactive:hover,
+.ds-source-chip--open {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ds-source-chip--interactive:active {
+  background-color: var(--color-action-passive-bg-active);
   color: var(--color-text-primary);
 }
 
@@ -96,11 +165,142 @@
    FOCUS
    ============================================ */
 
-.ds-source-chip--link:focus-visible {
+.ds-source-chip--interactive:focus-visible {
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: 2px;
 }
 
+/* ============================================
+   PREVIEW
+   The source behind the chip, on the floating
+   surface (see HoverCard). The host is the
+   positioning box; the panel opens above the
+   chip, flush with its leading edge. The
+   component flips it below (data-side) and
+   slides it sideways (--ds-source-chip-shift)
+   when the space runs out.
+   ============================================ */
+
+.ds-source-chip-host {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+}
+
+.ds-source-chip__preview {
+  position: absolute;
+  z-index: 50;
+  bottom: 100%;
+  left: var(--ds-source-chip-shift, 0px);
+  margin-block: var(--gap-200);
+  width: max-content;
+  max-width: min(320px, calc(100vw - var(--padding-400)));
+  padding: var(--padding-300) var(--padding-400);
+  flex-direction: column;
+  gap: var(--gap-100);
+
+  border-radius: var(--radius-300);
+  background-color: var(--color-bg-page-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  box-shadow: var(--shadow-floating);
+
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+  text-align: start;
+  white-space: normal;
+  cursor: default;
+
+  /* display:none keeps the closed panel out of the tab order and the page's
+     scrollable overflow; the flip transitions discretely so the fade
+     survives (see HoverCard, which owns the explanation). */
+  display: none;
+  opacity: 0;
+  transform: translateY(4px);
+  transition-property: opacity, transform, display;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-ease-standard);
+  transition-behavior: allow-discrete;
+}
+
+.ds-source-chip__preview[data-side='bottom'] {
+  top: 100%;
+  bottom: auto;
+  transform: translateY(-4px);
+}
+
+.ds-source-chip__preview--visible,
+.ds-source-chip__preview--visible[data-side='bottom'] {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@starting-style {
+  .ds-source-chip__preview--visible {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  .ds-source-chip__preview--visible[data-side='bottom'] {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+/* Top line: where the source lives, a trailing fact, and the outbound
+   arrow when the chip is a link. */
+.ds-source-chip__preview-top {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  color: var(--color-text-tertiary);
+}
+
+.ds-source-chip__preview-source {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ds-source-chip__preview-meta {
+  flex-shrink: 0;
+}
+
+/* A middle dot between the two, drawn only when both are present. */
+.ds-source-chip__preview-source + .ds-source-chip__preview-meta::before {
+  content: '\00B7';
+  margin-inline-end: var(--gap-200);
+}
+
+.ds-source-chip__preview-open {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-source-chip__preview-title {
+  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);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* The excerpt is a glance, not the document: four lines, then an ellipsis. */
+.ds-source-chip__preview-excerpt {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  overflow: hidden;
+}
+
 /* Icons take the colour of the text around them. Explicit, not just
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would

package/components/SourceChip/SourceChip.d.ts

@@ -3,16 +3,34 @@ import { default as React } from 'react';
 type SourceChipOwnProps = {
     /** The source name, e.g. "Design tokens quarterly". Truncates with an ellipsis when long. */
     title: string;
-    /** Citation number, rendered as a leading numeral in its own small badge circle. */
+    /** Citation number, rendered as a leading numeral in its own small badge circle. Wins the leading slot over `logo` and `icon`. */
     index?: number;
     /**
-     * Leading icon — a Material Symbol name (string) or custom element (ReactNode).
-     * The icon and the index share the leading slot: when both are passed, `index` wins
-     * and the icon is not rendered.
+     * The glyph for a source with neither a number nor a logo — a Material Symbol
+     * name (string) or custom element (ReactNode). Defaults to a globe, so the
+     * leading slot is never empty.
      */
     icon?: string | React.ReactNode;
     /** Optional href — renders as an `<a>` instead of a `<span>`. */
     href?: string;
+    /**
+     * The passage the answer drew on. Setting it gives the chip a preview panel
+     * that opens on hover, focus or press: the full title over this excerpt.
+     * Without an `href` the chip then renders as a `<button>`, so the preview
+     * is reachable from the keyboard.
+     */
+    excerpt?: string;
+    /** Where the source lives, shown as the preview's top line, e.g. "docs.acme.com". Only rendered with `excerpt`. */
+    source?: string;
+    /**
+     * The source's logo or favicon — an image URL (string) or a custom element
+     * (ReactNode), cropped to a circle. It fills the chip's leading slot when
+     * there is no `index`, and always leads the preview's top line. Decorative:
+     * the title and `source` text carry the name.
+     */
+    logo?: string | React.ReactNode;
+    /** A short trailing fact for the preview's top line, e.g. "Updated 3 days ago". Only rendered with `excerpt`. */
+    meta?: string;
     /** Additional CSS classes */
     className?: string;
 };
@@ -21,12 +39,17 @@ export interface SourceChipProps extends SourceChipOwnProps, Omit<React.Componen
 /**
  * SourceChip is the numbered citation pill linking a claim to its source.
  * It renders inline after a sentence or in a sources row under an assistant
- * chat message: a leading citation number (or icon) beside a truncating
- * source title.
+ * chat message: a leading slot — the citation number, the source's logo in
+ * a circle, or a globe — beside a truncating source title.
+ *
+ * Renders an `<a>` when `href` is supplied, a `<button>` when it has a preview
+ * but nowhere to link, and a plain `<span>` otherwise. Forwards a ref to
+ * whichever element it renders, and spreads unrecognised props onto it —
+ * `target` and `rel` pass through as native anchor attributes.
  *
- * Renders an `<a>` when `href` is supplied, a plain `<span>` otherwise.
- * Forwards a ref to whichever element it renders, and spreads unrecognised
- * props onto it — `target` and `rel` pass through as native anchor attributes.
+ * With an `excerpt` the chip previews its source: a floating panel that opens
+ * above the chip on hover or focus, flips below when there is no room, and
+ * slides sideways to stay inside whatever clips it. Escape dismisses it.
  */
-export declare const SourceChip: React.ForwardRefExoticComponent<SourceChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
+export declare const SourceChip: React.ForwardRefExoticComponent<SourceChipProps & React.RefAttributes<HTMLButtonElement | HTMLSpanElement | HTMLAnchorElement>>;
 export {};

package/components/SourceChip/SourceChip.js

@@ -1,30 +1,182 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React from "react";
+import React, { useState, useRef, useId, useEffect, useLayoutEffect } from "react";
 import "./SourceChip.css";
 import "../../fonts/material-symbols.css";
-const SourceChip = React.forwardRef(
-  ({ title, index, icon, href, className = "", ...rest }, ref) => {
-    const baseClass = "ds-source-chip";
-    const classes = [baseClass, href ? `${baseClass}--link` : "", className].filter(Boolean).join(" ");
-    const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: index }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
-    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      leading,
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
-    ] });
-    if (href) {
-      return /* @__PURE__ */ jsx("a", { ...rest, ref, className: classes, href, children: content });
+import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
+const PREVIEW_EDGE_MARGIN = 8;
+let closeOpenPreview = null;
+function clipBounds(el) {
+  const bounds = { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight };
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const { overflowX, overflowY } = getComputedStyle(node);
+    const rect = node.getBoundingClientRect();
+    if (overflowX !== "visible") {
+      bounds.left = Math.max(bounds.left, rect.left);
+      bounds.right = Math.min(bounds.right, rect.right);
+    }
+    if (overflowY !== "visible") {
+      bounds.top = Math.max(bounds.top, rect.top);
+      bounds.bottom = Math.min(bounds.bottom, rect.bottom);
     }
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...rest,
-        ref,
-        className: classes,
-        children: content
-      }
-    );
   }
-);
+  return bounds;
+}
+const SourceChip = React.forwardRef(({ title, index, icon = "language", href, excerpt, source, logo, meta, className = "", ...rest }, ref) => {
+  const baseClass = "ds-source-chip";
+  const hasPreview = Boolean(excerpt);
+  const [visible, setVisible] = useState(false);
+  const showTimeoutRef = useRef(void 0);
+  const hideTimeoutRef = useRef(void 0);
+  const hostRef = useRef(null);
+  const panelRef = useRef(null);
+  const panelId = useId();
+  const clearTimers = () => {
+    clearTimeout(showTimeoutRef.current);
+    clearTimeout(hideTimeoutRef.current);
+  };
+  const show = () => {
+    clearTimeout(hideTimeoutRef.current);
+    showTimeoutRef.current = setTimeout(() => setVisible(true), MOTION_HOVER_SHOW_DELAY_MS);
+  };
+  const hide = () => {
+    clearTimeout(showTimeoutRef.current);
+    hideTimeoutRef.current = setTimeout(() => setVisible(false), MOTION_HOVER_HIDE_DELAY_MS);
+  };
+  const showNow = () => {
+    clearTimers();
+    setVisible(true);
+  };
+  useEffect(() => clearTimers, []);
+  useEffect(() => {
+    if (!visible) return;
+    const close = () => {
+      clearTimers();
+      setVisible(false);
+    };
+    closeOpenPreview?.();
+    closeOpenPreview = close;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") close();
+    };
+    const onPointerDown = (e) => {
+      if (!hostRef.current?.contains(e.target)) close();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      if (closeOpenPreview === close) closeOpenPreview = null;
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [visible]);
+  useLayoutEffect(() => {
+    const host = hostRef.current;
+    const panel = panelRef.current;
+    if (!visible || !host || !panel) return;
+    const bounds = clipBounds(host);
+    const anchor = host.getBoundingClientRect();
+    const width = panel.offsetWidth;
+    const height = panel.offsetHeight;
+    const roomAbove = anchor.top - bounds.top - PREVIEW_EDGE_MARGIN;
+    const roomBelow = bounds.bottom - anchor.bottom - PREVIEW_EDGE_MARGIN;
+    const side = roomAbove >= height || roomAbove >= roomBelow ? "top" : "bottom";
+    const minLeft = bounds.left + PREVIEW_EDGE_MARGIN;
+    const maxLeft = bounds.right - PREVIEW_EDGE_MARGIN - width;
+    const left = Math.max(minLeft, Math.min(anchor.left, maxLeft));
+    panel.dataset.side = side;
+    panel.style.setProperty("--ds-source-chip-shift", `${Math.round(left - anchor.left)}px`);
+  }, [visible]);
+  const element = href ? "a" : hasPreview ? "button" : "span";
+  const classes = [
+    baseClass,
+    href ? `${baseClass}--link` : "",
+    element !== "span" ? `${baseClass}--interactive` : "",
+    visible ? `${baseClass}--open` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const logoMark = logo ? typeof logo === "string" ? /* @__PURE__ */ jsx("img", { src: logo, alt: "" }) : logo : null;
+  const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__numeral`, children: index }) }) : logoMark ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo`, "aria-hidden": "true", children: logoMark }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading,
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+  ] });
+  const describedBy = hasPreview ? panelId : void 0;
+  const chip = element === "a" ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-describedby": describedBy,
+      ...rest,
+      ref,
+      className: classes,
+      href,
+      children: content
+    }
+  ) : element === "button" ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-describedby": describedBy,
+      ...rest,
+      ref,
+      className: classes,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: classes,
+      children: content
+    }
+  );
+  if (!hasPreview) return chip;
+  const handleBlur = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) hide();
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: hostRef,
+      className: `${baseClass}-host`,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: handleBlur,
+      onClick: showNow,
+      children: [
+        chip,
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            ref: panelRef,
+            id: panelId,
+            role: "tooltip",
+            className: `${baseClass}__preview${visible ? ` ${baseClass}__preview--visible` : ""}`,
+            children: [
+              (logo || source || meta || href) && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__preview-top`, children: [
+                logoMark && /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo`, "aria-hidden": "true", children: logoMark }),
+                source && /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-source`, children: source }),
+                meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-meta`, children: meta }),
+                href && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__preview-open material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: "arrow_outward"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-title`, children: title }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-excerpt`, children: excerpt })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
 SourceChip.displayName = "SourceChip";
 export {
   SourceChip

package/components/ThreadPanel/ThreadPanel.css

@@ -396,6 +396,12 @@
   flex-shrink: 0;
 }
 
+/* A generated avatar in the icon seat: a block-level sprite, so the seat
+   lays it out as a box rather than on the text baseline. */
+.ds-thread-panel__project-icon--avatar {
+  display: inline-flex;
+}
+
 .ds-thread-panel__project-label {
   flex: 1;
   min-width: 0;

package/components/ThreadPanel/ThreadPanel.d.ts

@@ -52,8 +52,10 @@ export interface ThreadPanelProject {
     id: string;
     /** The project's name. */
     label: string;
-    /** Leading icon on the row — Material Symbol name (string) or custom element (ReactNode). Defaults to `folder`. */
+    /** Leading icon on the row — Material Symbol name (string) or custom element (ReactNode). Omit it and the row draws the project's generated PixelAvatar, which is the default mark. */
     icon?: string | React.ReactNode;
+    /** Seed for the generated PixelAvatar a project wears when it has no `icon`. Defaults to `label`; pass a stable id so a renamed project keeps its character. The panel spreads the inks across its projects, so neighbours differ in colour as well as shape. */
+    pixelAvatar?: string;
     /** Small trailing annotation in the caption face, e.g. how recently the project was touched. */
     meta?: string;
     /** Optional href — the row renders as an `<a>` instead of a `<button>`. */