rift-ds 1.4.0 → 1.6.0

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/Stat/Stat.css

@@ -13,8 +13,8 @@
 }
 
 /* ============================================
-   VALUE — display weight (300), per the
-   weight-contrast rule for display numerals
+   VALUE — the display tier's weight (300 in the
+   base theme), so numerals follow the theme
    ============================================ */
 
 .ds-stat__value {

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>`. */

package/components/ThreadPanel/ThreadPanel.js

@@ -3,8 +3,10 @@ import React from "react";
 import { Avatar } from "../Avatar/Avatar.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { Kbd } from "../Kbd/Kbd.js";
+import { PixelAvatar } from "../PixelAvatar/PixelAvatar.js";
 import "./ThreadPanel.css";
 import "../../fonts/material-symbols.css";
+import { distinctPixelInks } from "../PixelAvatar/pixelInks.js";
 const baseClass = "ds-thread-panel";
 function ActionRow({
   className,
@@ -134,6 +136,9 @@ const ThreadPanel = React.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const iconClass = "material-symbols-rounded";
+    const projectInks = distinctPixelInks(
+      (projects ?? []).map((project) => project.pixelAvatar ?? project.label)
+    );
     const showHeader = Boolean(logo || logoText || onExpandedChange);
     const showNew = Boolean(newThreadLabel || onNewThread || newThreadHref);
     const showFooter = Boolean(footerSlot || profile);
@@ -252,7 +257,7 @@ const ThreadPanel = React.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, "aria-label": projectsLabel, children: projects.map((project) => {
+            /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, "aria-label": projectsLabel, children: projects.map((project, projectIndex) => {
               const active = project.id === activeProjectId;
               return /* @__PURE__ */ jsx("li", { className: `${baseClass}__row`, children: /* @__PURE__ */ jsxs(
                 ActionRow,
@@ -266,12 +271,25 @@ const ThreadPanel = React.forwardRef(
                   ariaCurrent: active ? project.href ? "page" : "true" : void 0,
                   title: project.label,
                   children: [
-                    /* @__PURE__ */ jsx(
+                    project.icon == null ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${baseClass}__project-icon ${baseClass}__project-icon--avatar`,
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx(
+                          PixelAvatar,
+                          {
+                            name: project.pixelAvatar ?? project.label,
+                            ink: projectInks[projectIndex]
+                          }
+                        )
+                      }
+                    ) : /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: `${baseClass}__project-icon${typeof project.icon === "string" || project.icon == null ? ` ${iconClass}` : ""}`,
+                        className: `${baseClass}__project-icon${typeof project.icon === "string" ? ` ${iconClass}` : ""}`,
                         "aria-hidden": "true",
-                        children: project.icon ?? "folder"
+                        children: project.icon
                       }
                     ),
                     /* @__PURE__ */ jsx("span", { className: `${baseClass}__project-label`, children: project.label }),

package/components/Widget/Widget.css

@@ -0,0 +1,207 @@
+/* ============================================
+   WIDGET COMPONENT
+   A titled tile for a dashboard or home screen,
+   with its rows, its groups, and the board that
+   packs tiles into columns
+   ============================================ */
+
+/* Tile — the translucent container behind a hairline, blurred so the body
+   stays on a calm field when the tile sits over an ambient background. The
+   navigation-tile radius, per the radius scale. */
+
+.ds-widget {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-300);
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--padding-500);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  background-color: var(--color-bg-container-primary-semi);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+}
+
+.ds-widget__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200);
+}
+
+.ds-widget__title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-200);
+  min-width: 0;
+  margin: 0;
+  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);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-widget__count {
+  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-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.ds-widget__action {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.ds-widget__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+/* Group — a labelled run of rows */
+
+.ds-widget-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+.ds-widget-group + .ds-widget-group {
+  margin-top: var(--gap-300);
+}
+
+.ds-widget-group__label {
+  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);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+/* Row — a leading mark, a title over a description, a trailing fact */
+
+.ds-widget-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: var(--padding-150) 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+
+.ds-widget-row__leading {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-secondary);
+}
+
+.ds-widget-row__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ds-widget-row__title,
+.ds-widget-row__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-widget-row__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);
+}
+
+.ds-widget-row__description {
+  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);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+.ds-widget-row__meta {
+  flex-shrink: 0;
+  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);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* A row that goes somewhere: the hover fill bleeds past the text into the
+   tile's padding, so the whole line reads as one target. */
+
+.ds-widget-row--interactive {
+  width: calc(100% + 2 * var(--padding-200));
+  margin-inline: calc(-1 * var(--padding-200));
+  padding-inline: var(--padding-200);
+  border-radius: var(--radius-300);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-widget-row--interactive:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-widget-row--interactive:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Grid — CSS columns, so tiles of different heights pack with no holes and
+   the board folds as it narrows. The column floor is stated on the icon
+   scale (seven cover icons, the narrowest a row of title, description and
+   fact stays readable), not as a breakpoint. */
+
+.ds-widget-grid {
+  column-gap: var(--gap-400);
+  column-width: calc(var(--icon-size-1200) * 7);
+}
+
+.ds-widget-grid--columns-1 {
+  column-count: 1;
+}
+
+.ds-widget-grid--columns-2 {
+  column-count: 2;
+}
+
+.ds-widget-grid--columns-3 {
+  column-count: 3;
+}
+
+.ds-widget-grid > * {
+  break-inside: avoid;
+  margin-bottom: var(--gap-400);
+}

package/components/Widget/Widget.d.ts

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+/** Props owned by Widget itself — everything else falls through to the root `<section>`. */
+type WidgetOwnProps = {
+    /** The tile's heading. Also the section's accessible name, unless an `aria-label` is passed. Note: this shadows the native `title` tooltip attribute, which Widget does not expose. */
+    title: string;
+    /** A quiet figure after the title: how many rows the tile holds, how many are open. */
+    count?: number;
+    /** Trailing header slot, opposite the title — a compact button, a link, a period label. */
+    action?: React.ReactNode;
+    /** Heading element for the title, so the tile takes its place in the page's outline. */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** The tile's body: WidgetRows, WidgetGroups, a chart, a figure, anything. */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetProps extends WidgetOwnProps, Omit<React.ComponentPropsWithoutRef<'section'>, keyof WidgetOwnProps> {
+}
+/**
+ * Widget — a titled tile for a dashboard or a home screen: a heading with an
+ * optional count, then whatever the tile is about. The surface is the
+ * system's translucent container behind a hairline, so a board of them sits
+ * over an ambient background without going flat. Compose the body from
+ * WidgetRow and WidgetGroup for lists, or pass a chart or a figure.
+ *
+ * Purely presentational: safe to render from a Server Component.
+ */
+export declare const Widget: React.ForwardRefExoticComponent<WidgetProps & React.RefAttributes<HTMLElement>>;
+/** Props owned by WidgetGroup itself — everything else falls through to the root `<div>`. */
+type WidgetGroupOwnProps = {
+    /** The run's quiet label, e.g. "Waiting on you". */
+    label: string;
+    /** The rows in this run. */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetGroupProps extends WidgetGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof WidgetGroupOwnProps> {
+}
+/** WidgetGroup — splits a Widget's rows into labelled runs. */
+export declare const WidgetGroup: React.ForwardRefExoticComponent<WidgetGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** Props owned by WidgetRow itself — everything else falls through to the root element. */
+type WidgetRowOwnProps = {
+    /** The row's main line. Note: this shadows the native `title` tooltip attribute, which WidgetRow does not expose. */
+    title: string;
+    /** A quiet second line under the title: who, where, or how much. */
+    description?: string;
+    /** Leading mark — a StatusDot, a PixelAvatar, an Avatar, a Spinner, an icon. Decorative unless the element names itself. */
+    leading?: React.ReactNode;
+    /** Trailing fact in the caption face: a date, an amount, a state. */
+    meta?: React.ReactNode;
+    /** Renders the row as a link to this URL. */
+    href?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetRowProps extends WidgetRowOwnProps, Omit<React.HTMLAttributes<HTMLElement>, keyof WidgetRowOwnProps> {
+}
+/**
+ * WidgetRow — one line inside a Widget: a leading mark, a title over an
+ * optional description, and a trailing fact. It is a link when given an
+ * `href`, a button when given an `onClick`, and a plain row otherwise, so a
+ * list only offers a target where there is somewhere to go.
+ */
+export declare const WidgetRow: React.ForwardRefExoticComponent<WidgetRowProps & React.RefAttributes<HTMLElement>>;
+/** Props owned by WidgetGrid itself — everything else falls through to the root `<div>`. */
+type WidgetGridOwnProps = {
+    /** The most columns the board runs to. It folds to fewer as its own width narrows. */
+    columns?: 1 | 2 | 3;
+    /** The Widgets on the board, in reading order: they fill the first column, then the next. */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetGridProps extends WidgetGridOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof WidgetGridOwnProps> {
+}
+/**
+ * WidgetGrid — lays Widgets out as a board. Tiles of different heights pack
+ * into columns with no holes beside the tall ones, and the board folds to
+ * fewer columns as it narrows, with no breakpoint to configure.
+ */
+export declare const WidgetGrid: React.ForwardRefExoticComponent<WidgetGridProps & React.RefAttributes<HTMLDivElement>>;
+export {};