rift-ds 1.6.0 → 1.7.0

package/components/Mention/Mention.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useRef, useLayoutEffect } from "react";
+import "../../fonts/material-symbols.css";
+import "./Mention.css";
+import { mentionOptionId, mentionListboxId, splitMentions } from "./mentions.js";
+import { filterMentionItems, getMentionQuery, insertMention } from "./mentions.js";
+const Mention = React.forwardRef(
+  ({ trigger = "@", className = "", children, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: ["ds-mention", className].filter(Boolean).join(" "),
+      "data-trigger": trigger,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-mention__trigger", children: trigger }),
+        children
+      ]
+    }
+  )
+);
+Mention.displayName = "Mention";
+const MentionText = React.forwardRef(
+  ({ text, sources, className = "", ...rest }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: ["ds-mention-text", className].filter(Boolean).join(" "),
+      children: splitMentions(text, sources).map(
+        (segment, index) => segment.type === "mention" ? (
+          // Segments never reorder: the text is re-split whole on every change
+          /* @__PURE__ */ jsx(Mention, { trigger: segment.trigger, children: segment.item.label }, index)
+        ) : /* @__PURE__ */ jsx(React.Fragment, { children: segment.text }, index)
+      )
+    }
+  )
+);
+MentionText.displayName = "MentionText";
+const renderLabel = (label, query) => {
+  const needle = query.trim().toLowerCase();
+  const at = needle === "" ? -1 : label.toLowerCase().indexOf(needle);
+  if (at < 0) return label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label.slice(0, at),
+    /* @__PURE__ */ jsx("span", { className: "ds-mention-menu__match", children: label.slice(at, at + needle.length) }),
+    label.slice(at + needle.length)
+  ] });
+};
+const MentionMenu = React.forwardRef(
+  ({
+    items,
+    activeId,
+    onActiveChange,
+    onSelect,
+    query = "",
+    label = "Suggestions",
+    emptyText,
+    className = "",
+    id,
+    onMouseDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-mention-menu";
+    const generatedId = React.useId();
+    const menuId = id ?? generatedId;
+    const listRef = useRef(null);
+    useLayoutEffect(() => {
+      const list = listRef.current;
+      if (!list || activeId === void 0) return;
+      const row = list.querySelector('[aria-selected="true"]');
+      if (!row) return;
+      const top = row.offsetTop;
+      const bottom = top + row.offsetHeight;
+      if (top < list.scrollTop) list.scrollTop = top;
+      else if (bottom > list.scrollTop + list.clientHeight) {
+        list.scrollTop = bottom - list.clientHeight;
+      }
+    }, [activeId, items]);
+    if (items.length === 0 && !emptyText) return null;
+    const handleMouseDown = (event) => {
+      onMouseDown?.(event);
+      event.preventDefault();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        id: menuId,
+        className: [baseClass, query.trim() !== "" ? `${baseClass}--filtered` : "", className].filter(Boolean).join(" "),
+        onMouseDown: handleMouseDown,
+        children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__empty`, role: "status", children: emptyText }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            id: mentionListboxId(menuId),
+            className: `${baseClass}__list`,
+            role: "listbox",
+            "aria-label": label,
+            tabIndex: 0,
+            children: items.map((item) => {
+              const active = item.id === activeId;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: mentionOptionId(menuId, item.id),
+                  className: [
+                    `${baseClass}__option`,
+                    active ? `${baseClass}__option--active` : "",
+                    item.disabled ? `${baseClass}__option--disabled` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "option",
+                  "aria-selected": active,
+                  "aria-disabled": item.disabled || void 0,
+                  onMouseMove: item.disabled || active ? void 0 : () => onActiveChange?.(item.id),
+                  onClick: item.disabled ? void 0 : () => onSelect?.(item),
+                  children: [
+                    item.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof item.icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: item.icon }) : item.icon }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: renderLabel(item.label, query) }),
+                    item.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: item.description })
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+MentionMenu.displayName = "MentionMenu";
+export {
+  Mention,
+  MentionMenu,
+  MentionText,
+  filterMentionItems,
+  getMentionQuery,
+  insertMention,
+  mentionListboxId,
+  mentionOptionId,
+  splitMentions
+};

package/components/Mention/mentions.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+/** One thing a person can reference: a teammate, a file, a skill. */
+export type MentionItem = {
+    /** Stable identity, unique within its source. */
+    id: string;
+    /** The name shown in the menu and written into the text after the trigger character. */
+    label: string;
+    /** A quieter second phrase on the same row: a role, a path, what a skill does. */
+    description?: string;
+    /** Leading mark: a Material Symbol name, or any node (an Avatar). Decorative. */
+    icon?: string | React.ReactNode;
+    /** Extra words the filter matches on besides the label. */
+    keywords?: string[];
+    /** Listed but not choosable. */
+    disabled?: boolean;
+};
+/** Everything one trigger character opens: `@` for entities, `/` for skills. */
+export type MentionSource = {
+    /** The single character that opens this source. */
+    trigger: string;
+    /** The items it offers. */
+    items: MentionItem[];
+    /** Accessible name for this source's menu ("People", "Skills"). */
+    label?: string;
+};
+/** A trigger being typed: where it starts, and what has been typed after it. */
+export type MentionQuery = {
+    /** The trigger character that opened it. */
+    trigger: string;
+    /** The text typed after the trigger, up to the caret. */
+    query: string;
+    /** Index of the trigger character. */
+    start: number;
+    /** Index of the caret. */
+    end: number;
+};
+/** One run of text from `splitMentions`: plain words, or a recognised mention. */
+export type MentionSegment = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'mention';
+    text: string;
+    trigger: string;
+    item: MentionItem;
+};
+/**
+ * Reads the mention being typed at the caret, if there is one: a trigger
+ * character that opens a word, followed by no whitespace up to the caret.
+ * A trigger in the middle of a word (the slash in a path, the at-sign in an
+ * address) opens nothing.
+ */
+export declare function getMentionQuery(text: string, caret: number, triggers: string[]): MentionQuery | null;
+/**
+ * Narrows and ranks a source's items for a query: labels that start with it
+ * first, then labels where a later word starts with it, then labels that
+ * contain it, then keyword matches. An empty query returns every item in its
+ * given order.
+ */
+export declare function filterMentionItems(items: MentionItem[], query: string): MentionItem[];
+/**
+ * Splits text into plain runs and the mentions it contains. A mention is a
+ * trigger character followed by the exact label of one of that source's
+ * items, standing as its own word. Nothing is stored alongside the text: a
+ * mention is recognised wherever its name is written, and stops being one
+ * the moment the name is edited.
+ */
+export declare function splitMentions(text: string, sources: MentionSource[]): MentionSegment[];
+/**
+ * Writes a chosen item over the query being typed: the trigger, the label,
+ * and one trailing space, so the next word starts clean. Returns the new
+ * text and where the caret belongs in it.
+ */
+export declare function insertMention(text: string, query: Pick<MentionQuery, 'trigger' | 'start' | 'end'>, item: MentionItem): {
+    value: string;
+    caret: number;
+};
+/** The DOM id of one option inside a MentionMenu, for `aria-activedescendant`. */
+export declare const mentionOptionId: (menuId: string, itemId: string) => string;
+/** The DOM id of the listbox inside a MentionMenu, for `aria-controls`. */
+export declare const mentionListboxId: (menuId: string) => string;

package/components/Mention/mentions.js

@@ -0,0 +1,83 @@
+const MAX_QUERY_LENGTH = 48;
+const isSpace = (char) => char === void 0 || /\s/.test(char);
+function getMentionQuery(text, caret, triggers) {
+  for (let index = caret - 1; index >= 0 && caret - index <= MAX_QUERY_LENGTH + 1; index -= 1) {
+    const char = text[index];
+    if (isSpace(char)) return null;
+    if (triggers.includes(char) && isSpace(text[index - 1])) {
+      return { trigger: char, query: text.slice(index + 1, caret), start: index, end: caret };
+    }
+  }
+  return null;
+}
+function filterMentionItems(items, query) {
+  const needle = query.trim().toLowerCase();
+  if (needle === "") return items;
+  const rank = (item) => {
+    const label = item.label.toLowerCase();
+    if (label.startsWith(needle)) return 0;
+    if (label.split(/[\s\-_:./]+/).some((word) => word.startsWith(needle))) return 1;
+    if (label.includes(needle)) return 2;
+    if (item.keywords?.some((keyword) => keyword.toLowerCase().includes(needle))) return 3;
+    return -1;
+  };
+  return items.map((item, index) => ({ item, index, rank: rank(item) })).filter((entry) => entry.rank >= 0).sort((a, b) => a.rank - b.rank || a.index - b.index).map((entry) => entry.item);
+}
+const OPENERS = /* @__PURE__ */ new Set(["(", "[", "{", '"', "“", "‘", "'"]);
+const continuesName = (char) => char !== void 0 && /[\p{L}\p{N}_-]/u.test(char);
+function splitMentions(text, sources) {
+  const candidates = sources.flatMap(
+    (source) => source.items.map((item) => ({
+      trigger: source.trigger,
+      item,
+      token: `${source.trigger}${item.label}`
+    }))
+  ).sort((a, b) => b.token.length - a.token.length);
+  const triggers = new Set(sources.map((source) => source.trigger));
+  const segments = [];
+  let plainFrom = 0;
+  let index = 0;
+  while (index < text.length) {
+    const before = text[index - 1];
+    if (triggers.has(text[index]) && (isSpace(before) || OPENERS.has(before))) {
+      const match = candidates.find(
+        (candidate) => text.startsWith(candidate.token, index) && !continuesName(text[index + candidate.token.length])
+      );
+      if (match) {
+        if (index > plainFrom) segments.push({ type: "text", text: text.slice(plainFrom, index) });
+        segments.push({
+          type: "mention",
+          text: match.token,
+          trigger: match.trigger,
+          item: match.item
+        });
+        index += match.token.length;
+        plainFrom = index;
+        continue;
+      }
+    }
+    index += 1;
+  }
+  if (plainFrom < text.length) segments.push({ type: "text", text: text.slice(plainFrom) });
+  return segments;
+}
+function insertMention(text, query, item) {
+  const before = text.slice(0, query.start);
+  const after = text.slice(query.end);
+  const token = `${query.trigger}${item.label}`;
+  const spacer = after.startsWith(" ") ? "" : " ";
+  return {
+    value: `${before}${token}${spacer}${after}`,
+    caret: before.length + token.length + 1
+  };
+}
+const mentionOptionId = (menuId, itemId) => `${menuId}-option-${itemId}`;
+const mentionListboxId = (menuId) => `${menuId}-listbox`;
+export {
+  filterMentionItems,
+  getMentionQuery,
+  insertMention,
+  mentionListboxId,
+  mentionOptionId,
+  splitMentions
+};

package/components/ShaderField/ShaderField.d.ts

@@ -1,8 +1,5 @@
 import { default as React } from 'react';
 import { ShaderBlob, ShaderParams } from './useShaderField';
-export type { ShaderBlob, ShaderParams, ShaderFieldParams, ShaderFieldState, } from './useShaderField';
-export { useShaderField, DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS } from './useShaderField';
-export { BLOB_COUNT } from './field.glsl';
 /**
  * How the renderer has resolved.
  *
@@ -66,3 +63,6 @@ export interface ShaderFieldProps extends ShaderFieldOwnProps, Omit<React.Compon
  * the clipping and any mask.
  */
 export declare const ShaderField: React.ForwardRefExoticComponent<ShaderFieldProps & React.RefAttributes<HTMLCanvasElement>>;
+export type { ShaderBlob, ShaderParams, ShaderFieldParams, ShaderFieldState, } from './useShaderField';
+export { useShaderField, DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS } from './useShaderField';
+export { BLOB_COUNT } from './field.glsl';

package/components/StatusDot/StatusDot.css

@@ -1,7 +1,7 @@
 /* ============================================
    STATUS DOT COMPONENT
    Bare presence/status indicator with optional
-   label and live pulse
+   label, hollow outline and live pulse
    ============================================ */
 
 /* Base */
@@ -16,6 +16,7 @@
   position: relative;
   flex-shrink: 0;
   border-radius: var(--radius-pill);
+  background-color: var(--ds-status-dot-color);
 }
 
 .ds-status-dot__label {
@@ -29,7 +30,14 @@
 }
 
 /* Sizes — the dot rides the icon scale at half-diameter, so it can never
-   drift from the glyphs it sits beside. */
+   drift from the glyphs it sits beside. `xs` is the one step off it: the
+   list-row mark sits on the gap scale, because no icon token is that small
+   and 8px matches a title's cap height. */
+
+.ds-status-dot--xs .ds-status-dot__indicator {
+  width: var(--gap-200); /* 8px */
+  height: var(--gap-200);
+}
 
 .ds-status-dot--sm .ds-status-dot__indicator {
   width: calc(var(--icon-size-500) / 2); /* 10px */
@@ -49,24 +57,39 @@
 /* Variants — the plain-surface icon steps, tuned to hold on bare
    containers where the status text tints wash out. */
 
-.ds-status-dot--info .ds-status-dot__indicator {
-  background-color: var(--color-status-info-icon);
+.ds-status-dot--info {
+  --ds-status-dot-color: var(--color-status-info-icon);
+}
+
+.ds-status-dot--positive {
+  --ds-status-dot-color: var(--color-status-positive-icon);
 }
 
-.ds-status-dot--positive .ds-status-dot__indicator {
-  background-color: var(--color-status-positive-icon);
+.ds-status-dot--warning {
+  --ds-status-dot-color: var(--color-status-warning-icon);
 }
 
-.ds-status-dot--warning .ds-status-dot__indicator {
-  background-color: var(--color-status-warning-icon);
+.ds-status-dot--error {
+  --ds-status-dot-color: var(--color-status-error-icon);
 }
 
-.ds-status-dot--error .ds-status-dot__indicator {
-  background-color: var(--color-status-error-icon);
+.ds-status-dot--neutral {
+  --ds-status-dot-color: var(--color-status-neutral-icon);
+}
+
+/* Outline — the hollow dot: the role's colour drawn as an inset ring, so
+   the mark keeps its box and its seat while reading as "nothing here yet".
+   The two small sizes take the hairline; the larger two the heavier step,
+   so the ring keeps its proportion to the diameter. */
+
+.ds-status-dot--outline .ds-status-dot__indicator {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 var(--border-025) var(--ds-status-dot-color);
 }
 
-.ds-status-dot--neutral .ds-status-dot__indicator {
-  background-color: var(--color-status-neutral-icon);
+.ds-status-dot--outline.ds-status-dot--md .ds-status-dot__indicator,
+.ds-status-dot--outline.ds-status-dot--lg .ds-status-dot__indicator {
+  box-shadow: inset 0 0 0 var(--border-050) var(--ds-status-dot-color);
 }
 
 /* Pulse — a ring of the dot's own colour swelling out and fading, on the
@@ -77,7 +100,7 @@
   position: absolute;
   inset: 0;
   border-radius: var(--radius-pill);
-  background-color: inherit;
+  background-color: var(--ds-status-dot-color);
   animation: ds-status-dot-pulse var(--motion-duration-loop-shimmer) var(--motion-ease-standard)
     infinite;
 }

package/components/StatusDot/StatusDot.d.ts

@@ -3,8 +3,14 @@ import { default as React } from 'react';
 type StatusDotOwnProps = {
     /** Status role the dot carries — coloured through the plain-surface `--color-status-*-icon` steps. */
     variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
-    /** Dot diameter, derived from the icon scale (half of `--icon-size-500/md/lg`). */
-    size?: 'sm' | 'md' | 'lg';
+    /** Dot diameter, derived from the icon scale (half of `--icon-size-500/600/800`); `xs` is the 8px list-row mark, sized on the gap scale. */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Draws the dot hollow: a ring in the role's colour around an empty
+     * centre, for a settled or empty state that still holds its seat beside
+     * filled dots.
+     */
+    outline?: boolean;
     /**
      * Radiates a repeating ring from the dot for a live state — recording,
      * online now, deploy in flight. The ring stills under reduced motion.
@@ -16,6 +22,12 @@ type StatusDotOwnProps = {
      * a colour alone announces nothing.
      */
     label?: string;
+    /**
+     * Renders the dot as decoration: no `role="status"`, hidden from assistive
+     * technology. For a dot repeated down a list, where the host announces the
+     * state in the row's own text and a live region per row would be noise.
+     */
+    decorative?: boolean;
     /** Additional CSS classes */
     className?: string;
 };
@@ -23,8 +35,8 @@ export interface StatusDotProps extends StatusDotOwnProps, Omit<React.ComponentP
 }
 /**
  * StatusDot — the bare presence/status indicator: a small dot in one of the
- * five status roles, with an optional visible label and an optional live
- * pulse. Where Badge carries a text label on a tinted fill, StatusDot is the
+ * five status roles, filled or hollow, with an optional visible label and
+ * an optional live pulse. Where Badge carries a text label on a tinted fill, StatusDot is the
  * mark alone — for table rows, avatars, nav items, and anywhere a full badge
  * is too loud.
  *

package/components/StatusDot/StatusDot.js

@@ -2,19 +2,39 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./StatusDot.css";
 const StatusDot = React.forwardRef(
-  ({ variant = "neutral", size = "md", pulse = false, label, className = "", ...rest }, ref) => {
+  ({
+    variant = "neutral",
+    size = "md",
+    outline = false,
+    pulse = false,
+    label,
+    decorative = false,
+    className = "",
+    ...rest
+  }, ref) => {
     const baseClass = "ds-status-dot";
     const classes = [
       baseClass,
       `${baseClass}--${variant}`,
       `${baseClass}--${size}`,
+      outline && `${baseClass}--outline`,
       pulse && `${baseClass}--pulse`,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, role: "status", children: [
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true" }),
-      label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: decorative ? void 0 : "status",
+        "aria-hidden": decorative ? true : rest["aria-hidden"],
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true" }),
+          label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
+      }
+    );
   }
 );
 StatusDot.displayName = "StatusDot";

package/components/ThreadPanel/ThreadPanel.css

@@ -531,15 +531,24 @@
   row-gap: 0;
 }
 
-/* The unread dot: a small status disc leading the title. Sized on the gap
-   scale — there is no icon token this small, and 8px matches the title's
-   cap height. */
-.ds-thread-panel__unread {
+/* The status dot: a StatusDot at its 8px list-row size leading the title.
+   The panel seats one on every row or on none, so titles share an edge. */
+.ds-thread-panel__status {
   flex: none;
-  width: var(--gap-200);
-  height: var(--gap-200);
-  border-radius: var(--radius-pill);
-  background-color: var(--color-status-info-icon);
+}
+
+/* The status read aloud: the dot is decorative, so its state rides in the
+   row's text for assistive technology only. */
+.ds-thread-panel__status-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .ds-thread-panel__title {
@@ -616,8 +625,8 @@
 }
 
 /* The description line: the caption face on the full second line, fading
-   at the trailing edge like the title above it. Indented past the unread
-   dot's column so both lines share a left edge.
+   at the trailing edge like the title above it. Indented past the status
+   dot's column, when the panel has one, so both lines share a left edge.
    ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
 .ds-thread-panel__description {
   flex-basis: 100%;
@@ -641,7 +650,7 @@
   );
 }
 
-.ds-thread-panel__thread--unread .ds-thread-panel__description {
+.ds-thread-panel--dotted .ds-thread-panel__description {
   /* The dot's width plus the row's column gap. */
   margin-left: calc(var(--gap-200) + var(--gap-200));
 }

package/components/ThreadPanel/ThreadPanel.d.ts

@@ -9,6 +9,14 @@ export interface ThreadPanelThreadAction {
     /** Destructive styling (the error text colour) for delete-like actions. */
     destructive?: boolean;
 }
+/**
+ * What a thread's leading dot reports. Fill says whether the thread wants
+ * the reader, colour says what it wants, motion says it is live right now:
+ * `idle` is a hollow neutral ring, `working` a pulsing neutral dot, and
+ * `unread`, `waiting` and `error` solid dots in the info, warning and error
+ * roles.
+ */
+export type ThreadPanelThreadStatus = 'idle' | 'working' | 'unread' | 'waiting' | 'error';
 export interface ThreadPanelThread {
     /** Stable identifier: `activeThreadId` matches against it and `onThreadSelect` reports it. */
     id: string;
@@ -24,7 +32,9 @@ export interface ThreadPanelThread {
     actions?: ThreadPanelThreadAction[];
     /** Quiet second line under the title in the caption face — a repo, an environment, a one-line summary. Overflows under the same trailing mask as the title. */
     description?: string;
-    /** The thread holds unseen activity: a small status dot leads the row. The dot is decorative — put the state in `meta` or `description` when it must be read aloud. */
+    /** The thread's state, drawn as the dot leading the row: `idle` (nothing new, nothing running), `working` (an agent is running now), `unread` (finished, not yet seen), `waiting` (blocked on the reader) or `error` (stopped on a failure). Once any thread in the panel carries a status every row draws a dot, the rest reading `idle`, so the titles share one left edge. The dot is decorative; every state but `idle` is also read aloud through `statusLabels`. */
+    status?: ThreadPanelThreadStatus;
+    /** Legacy boolean for `status: 'unread'`, ignored when `status` is set. @deprecated Use `status: 'unread'` instead. */
     unread?: boolean;
     /** Trailing icon before the meta — Material Symbol name (string) or custom element (ReactNode), e.g. `cloud` for a session that lives remotely. */
     icon?: string | React.ReactNode;
@@ -81,6 +91,8 @@ type ThreadPanelOwnProps = {
     threadActions?: ThreadPanelThreadAction[];
     /** Fires with the thread's id and the chosen action's id. */
     onThreadAction?: (threadId: string, actionId: string) => void;
+    /** Spoken text for each thread status, read after the row's title; the dot itself is decorative. Merged over the English defaults (Working, Unread, Needs input, Failed). `idle` is silent unless given a label here. */
+    statusLabels?: Partial<Record<ThreadPanelThreadStatus, string>>;
     /** Accessible name for a row's menu trigger; the thread's title is appended after it. */
     threadMenuLabel?: string;
     /** Id of the thread being renamed: its row swaps to an inline text field, prefilled with the title and selected. The host owns the state, like everything else. */
@@ -150,8 +162,8 @@ export interface ThreadPanelProps extends ThreadPanelOwnProps, Omit<React.Compon
  * control rows, an optional projects section with its own new-project
  * button, the grouped thread history (the one region that scrolls), and a
  * footer for the profile row and host furniture like a theme toggle.
- * Thread rows scale from a bare title to the full detail anatomy: an
- * unread dot, a quiet description line, a trailing glyph, a pin marker,
+ * Thread rows scale from a bare title to the full detail anatomy: a
+ * leading status dot, a quiet description line, a trailing glyph, a pin marker,
  * and the meta caption.
  *
  * Fully controlled and stateless: the host owns the active thread, the