rift-ds 1.5.0 → 1.6.0

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 {};

package/components/Widget/Widget.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./Widget.css";
+const Widget = React.forwardRef(
+  ({ title, count, action, titleAs: Title = "h3", children, className = "", ...rest }, ref) => {
+    const baseClass = "ds-widget";
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": title,
+        ...rest,
+        ref,
+        className: [baseClass, className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
+            /* @__PURE__ */ jsxs(Title, { className: `${baseClass}__title`, children: [
+              title,
+              count !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__count`, children: count })
+            ] }),
+            action && /* @__PURE__ */ jsx("span", { className: `${baseClass}__action`, children: action })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children })
+        ]
+      }
+    );
+  }
+);
+Widget.displayName = "Widget";
+const WidgetGroup = React.forwardRef(
+  ({ label, children, className = "", ...rest }, ref) => {
+    const baseClass = "ds-widget-group";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": label,
+        ...rest,
+        ref,
+        className: [baseClass, className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, "aria-hidden": "true", children: label }),
+          children
+        ]
+      }
+    );
+  }
+);
+WidgetGroup.displayName = "WidgetGroup";
+const WidgetRow = React.forwardRef(
+  ({ title, description, leading, meta, href, className = "", onClick, ...rest }, ref) => {
+    const baseClass = "ds-widget-row";
+    const interactive = Boolean(href || onClick);
+    const classes = [baseClass, interactive ? `${baseClass}--interactive` : "", className].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leading && /* @__PURE__ */ jsx("span", { className: `${baseClass}__leading`, children: leading }),
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__main`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: description })
+      ] }),
+      meta !== void 0 && meta !== null && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          href,
+          className: classes,
+          onClick,
+          children: content
+        }
+      );
+    }
+    if (onClick) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ...rest,
+          ref,
+          type: "button",
+          className: classes,
+          onClick,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: content });
+  }
+);
+WidgetRow.displayName = "WidgetRow";
+const WidgetGrid = React.forwardRef(
+  ({ columns = 2, children, className = "", ...rest }, ref) => {
+    const baseClass = "ds-widget-grid";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: [baseClass, `${baseClass}--columns-${columns}`, className].filter(Boolean).join(" "),
+        children
+      }
+    );
+  }
+);
+WidgetGrid.displayName = "WidgetGrid";
+export {
+  Widget,
+  WidgetGrid,
+  WidgetGroup,
+  WidgetRow
+};

package/components/registry.json

@@ -853,6 +853,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "PixelAvatar",
+      "label": "Pixel avatar",
+      "slug": "pixel-avatar",
+      "description": "A generated character mark drawn from a name: the same name is always the same pixel creature in the same ink.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "Popover",
       "label": "Popover",
@@ -1017,7 +1025,7 @@
       "slug": "source-chip",
       "description": "A numbered citation pill linking a claim to its source.",
       "category": "ai",
-      "client": false
+      "client": true
     },
     {
       "name": "SourceTrail",
@@ -1263,6 +1271,14 @@
       "category": "ai",
       "client": false
     },
+    {
+      "name": "Widget",
+      "label": "Widget",
+      "slug": "widget",
+      "description": "A titled tile for a dashboard or home screen, with rows, labelled groups, and a board that packs tiles into columns.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "WorldMap",
       "label": "World map",

package/components/registry.json.d.ts

@@ -853,6 +853,14 @@ declare const _default: {
       "category": "forms",
       "client": true
     },
+    {
+      "name": "PixelAvatar",
+      "label": "Pixel avatar",
+      "slug": "pixel-avatar",
+      "description": "A generated character mark drawn from a name: the same name is always the same pixel creature in the same ink.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "Popover",
       "label": "Popover",
@@ -1017,7 +1025,7 @@ declare const _default: {
       "slug": "source-chip",
       "description": "A numbered citation pill linking a claim to its source.",
       "category": "ai",
-      "client": false
+      "client": true
     },
     {
       "name": "SourceTrail",
@@ -1263,6 +1271,14 @@ declare const _default: {
       "category": "ai",
       "client": false
     },
+    {
+      "name": "Widget",
+      "label": "Widget",
+      "slug": "widget",
+      "description": "A titled tile for a dashboard or home screen, with rows, labelled groups, and a board that packs tiles into columns.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "WorldMap",
       "label": "World map",