@crewlethq/ui 0.81.2 → 0.83.0

package/dist/BriefCard/BriefCard.d.ts

@@ -6,6 +6,8 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 export declare const BRIEF_CARD_MAX_NEEDS = 3;
 /** The most follow-ups a brief draws: the next questions, not a menu. The host caps them. */
 export declare const BRIEF_CARD_MAX_FOLLOW_UPS = 2;
+/** The most points of what was said a brief draws: the engine writes at most five. */
+export declare const BRIEF_CARD_MAX_POINTS = 5;
 /** The one thing a row lets the reader do, in one press. */
 export interface BriefCardAction {
     /** A verb and its object: "Answer", "Open GOP-11", "Ask why". */
@@ -29,6 +31,18 @@ export interface BriefCardNeed {
     action?: BriefCardAction | undefined;
 }
 /** A question the reader can ask next, in the same conversation. */
+/**
+ * One point of what was said (a room's catch up), and the message it came
+ * from. `source` is the citation: the host's own press that opens the message
+ * (or its thread), named for it ("Open Miles's message"), so every point can
+ * be checked against what was actually written.
+ */
+export interface BriefCardPoint {
+    key: string;
+    /** What was said, in a sentence. */
+    text: ReactNode;
+    source?: BriefCardAction | undefined;
+}
 export interface BriefCardFollowUp {
     key: string;
     question: string;
@@ -39,6 +53,8 @@ export interface BriefCardLabels {
     heading: string;
     /** The list's accessible name. */
     needs: string;
+    /** Names the list of what was said. */
+    points: string;
     /** The mark on the first row, the one the brief recommends, where there are rows to rank. */
     first: string;
     followUps: string;
@@ -63,6 +79,12 @@ export interface BriefCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title
      * empty list is "Nothing needs you".
      */
     needs: readonly BriefCardNeed[];
+    /**
+     * What was said, for a brief of a conversation (a room's catch up), each
+     * point citing the message it came from, at most [BRIEF_CARD_MAX_POINTS].
+     * Drawn as a list under the needs, in the order given.
+     */
+    points?: readonly BriefCardPoint[] | undefined;
     /** One fact from elsewhere that bears on what to do, drawn quiet under the rows. */
     context?: ReactNode;
     /** Questions to ask next, at most [BRIEF_CARD_MAX_FOLLOW_UPS], drawn as suggestion rows at the foot. */
@@ -90,4 +112,4 @@ export interface BriefCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title
  * so where a row leads (a record opened, a question asked) is settled by the
  * code that built the brief, never by text inside it.
  */
-export declare function BriefCard({ scope, asOf, about, needs, context, followUps, labels: overrides, className, ...rest }: BriefCardProps): import("react").JSX.Element;
+export declare function BriefCard({ scope, asOf, about, needs, points, context, followUps, labels: overrides, className, ...rest }: BriefCardProps): import("react").JSX.Element;

package/dist/BriefCard/index.d.ts

@@ -1,3 +1,3 @@
 import './BriefCard.css';
-export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BriefCard } from './BriefCard.js';
-export type { BriefCardAction, BriefCardFollowUp, BriefCardLabels, BriefCardNeed, BriefCardNeedTone, BriefCardProps, } from './BriefCard.js';
+export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BRIEF_CARD_MAX_POINTS, BriefCard } from './BriefCard.js';
+export type { BriefCardAction, BriefCardFollowUp, BriefCardLabels, BriefCardNeed, BriefCardNeedTone, BriefCardPoint, BriefCardProps, } from './BriefCard.js';

package/dist/BriefCard/index.js

@@ -1,13 +1,13 @@
-export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BriefCard } from '../chunk-5BOFC5OP.js';
+export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BRIEF_CARD_MAX_POINTS, BriefCard } from '../chunk-CF4M6N6A.js';
 import '../chunk-Y7PVLEZJ.js';
-import '../chunk-RTMNULTL.js';
-import '../chunk-VERJCAJ4.js';
-import '../chunk-CYQBDZ6M.js';
-import '../chunk-4AUTALJA.js';
+import '../chunk-FLW5U7YS.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{BriefCard-VKTH3BSW.css → BriefCard-QCL7MVUV.css}

@@ -113,3 +113,29 @@
 .crewlet-brief-card__follow-ups {
   margin-inline: calc(-1 * var(--spacing-3));
 }
+
+/*
+ * WHAT WAS SAID (a room's catch up): one point to a row, the sentence and its
+ * citation, the press that opens the message it came from, at the row's end.
+ * A quiet list with no markers, between the needs and the context.
+ */
+.crewlet-brief-card__points {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-brief-card__point {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  padding-block: var(--spacing-1);
+}
+
+.crewlet-brief-card__point-text {
+  color: var(--color-text-primary);
+}

package/dist/Canvas/index.js

@@ -1,12 +1,14 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OBPINJNO.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-NCUSI4ZU.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-I33UIUZD.js';
-import '../chunk-ANTAQAR4.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,16 +1,18 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-FQI62PIZ.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-2SVQBQAD.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-KL6A7JGH.js';
-import '../chunk-NR4CPM4T.js';
-import '../chunk-OBPINJNO.js';
+import '../chunk-DRFOTWJE.js';
+import '../chunk-NXFTCPF6.js';
+import '../chunk-NCUSI4ZU.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-I33UIUZD.js';
-import '../chunk-ANTAQAR4.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasToolbar/index.js

@@ -1,14 +1,16 @@
-export { CanvasToolbar, toolForKey } from '../chunk-KL6A7JGH.js';
-import '../chunk-NR4CPM4T.js';
-import '../chunk-OBPINJNO.js';
+export { CanvasToolbar, toolForKey } from '../chunk-DRFOTWJE.js';
+import '../chunk-NXFTCPF6.js';
+import '../chunk-NCUSI4ZU.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-I33UIUZD.js';
-import '../chunk-ANTAQAR4.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Card/index.js

@@ -1,6 +1,6 @@
-export { Card } from '../chunk-4AUTALJA.js';
+export { Card } from '../chunk-U2IQNDDR.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
-import '../chunk-MLDTLZAO.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChangeList/index.js

@@ -1,10 +1,10 @@
-export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-4XF7ENQA.js';
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-AOJ6ZA77.js';
 import '../chunk-LR4IWUWQ.js';
-import '../chunk-VERJCAJ4.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-222VILSP.js';
-import '../chunk-IVTQWOXV.js';
-import '../chunk-MLDTLZAO.js';
+import '../chunk-LVJGN5II.js';
+import '../chunk-ULYHDP7U.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChangeMark/index.js

@@ -1,9 +1,11 @@
-export { ChangeMark } from '../chunk-Z2MZTI3H.js';
+export { ChangeMark } from '../chunk-VB3FVKNI.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-I33UIUZD.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-I22MUEG7.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-LNQSNXGJ.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-KTIQSSME.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChatDay/ChatDay.d.ts

@@ -0,0 +1,53 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+export interface ChatDayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    /** The day, as the reader says it: "Today", "Yesterday", "Monday, October 27". It names the day for a screen reader too. */
+    label: string;
+    /**
+     * The host's own control in the pill's place, such as a Jump to menu whose
+     * trigger is a `ChatDayPill`. Left out, the day draws its label as a plain
+     * pill.
+     */
+    pill?: ReactNode;
+    /**
+     * The New line's word ("New"), for a day whose FIRST message is the first
+     * one the reader has not read. It is drawn on the day's own rule, as one
+     * line, rather than as a second line under it.
+     */
+    unread?: string | undefined;
+    /** The day's rows, oldest first. */
+    children?: ReactNode;
+}
+/**
+ * A day of a conversation under its date.
+ *
+ * - THE DAY'S RULE is a hairline across the whole list, in the flow where the
+ *   day starts. It scrolls away with the day like any row.
+ * - THE DAY'S PILL sits on the rule while the rule is in view, then stays
+ *   pinned a little under the top of the list while any of the day is in it,
+ *   floating over the rows: only the pill covers them, never a band across
+ *   the list. It is pinned within its own day, so the next day's pill pushes
+ *   it out from below as that day reaches the top.
+ * - THE PIN IS A VARIABLE, `--crewlet-chat-day-pin`, so a host with a bar
+ *   floating over the top of the list (an unread banner) moves the pills
+ *   down past it while the bar shows.
+ *
+ * A GROUP TO A SCREEN READER, named by its day, so a reader moving through a
+ * long log by group hears where each day starts. The pill's words are the
+ * same name, drawn; the rule is decoration, unless it carries the New line,
+ * which is a separator of its own.
+ */
+export declare function ChatDay({ label, pill, unread, className, children, ...rest }: ChatDayProps): import("react").JSX.Element;
+export interface ChatDayPillProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The day's words on the pill. */
+    label: string;
+}
+/**
+ * The day's pill as a control, for a day whose pill does something: spread
+ * with a menu's trigger props it opens that menu, and draws the chevron that
+ * says so (`<Menu renderTrigger={(props) => <ChatDayPill {...props} label="Today" />}>`).
+ * The same size, fill and ring as the plain pill a `ChatDay` draws on its own.
+ *
+ * Filled with the transcript's own ground and ringed with a hairline and a
+ * small shadow, so it reads as lifted off the messages it passes over.
+ */
+export declare const ChatDayPill: import("react").ForwardRefExoticComponent<ChatDayPillProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/ChatDay/index.d.ts

@@ -0,0 +1,5 @@
+import '../ChatMessage/ChatScale.css';
+import '../ChatDivider/ChatDivider.css';
+import './ChatDay.css';
+export { ChatDay, ChatDayPill } from './ChatDay.js';
+export type { ChatDayPillProps, ChatDayProps } from './ChatDay.js';

package/dist/ChatDay/index.js

@@ -0,0 +1,3 @@
+export { ChatDay, ChatDayPill } from '../chunk-ONHYFU7D.js';
+import '../chunk-K774LUN3.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChatDay-E3FF5HWF.css

@@ -0,0 +1,116 @@
+/*
+ * ChatDay: a day of a conversation under its date, set on the conversation's
+ * own scale (ChatScale.css).
+ */
+
+/* The day is the pill's range: pinned, the pill stays inside it, so the next
+   day pushes it out from below. */
+.crewlet-chat-day {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * THE PILL'S PLACE. A box as tall as the pill, first in the day, set so the
+ * pill's middle is on the rule. Sticky in the day, it holds the pill a little
+ * under the list's top edge for as long as the day is in view, and the day's
+ * end pushes it out, a small gap above the next day's pill.
+ *
+ * ITS OWN MARGINS STAY POSITIVE. A sticky box may travel as far as its margin
+ * box allows, so a negative margin here let the pill run past the end of its
+ * day and sit on the next day's pill. The rule under it takes the overlap
+ * instead, with a negative margin of its own, which moves nothing sticky.
+ *
+ * The box lets the pointer through to the rows beside the pill; the pill
+ * takes it. It stands under a message's hover toolbar (which stands over the
+ * rows and the pill alike) and over the rows and the New line.
+ */
+.crewlet-chat-day__label {
+  position: sticky;
+  top: var(--crewlet-chat-day-pin);
+  z-index: var(--z-index-sticky);
+  display: flex;
+  flex: none;
+  justify-content: center;
+  height: var(--crewlet-chat-day-pill);
+  margin-top: calc(var(--crewlet-chat-day-gap) - var(--crewlet-chat-day-pill) / 2);
+  pointer-events: none;
+  /* A host that raises the pin (a banner arriving) moves the pinned pill
+     down with it rather than jumping it. */
+  transition: top var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/*
+ * THE DAY'S RULE: a hairline across the whole list with the day's gap under
+ * it, in the flow like any row. It rises half a pill, so it runs through the
+ * pill's middle.
+ */
+.crewlet-chat-day__rule {
+  position: relative;
+  flex: none;
+  height: 1px;
+  margin: calc(var(--crewlet-chat-day-pill) / -2) 0 var(--crewlet-chat-day-gap);
+  background: var(--color-edge-hairline);
+}
+
+/* The New line on the day's rule covers the rule, as one line. */
+.crewlet-chat-day__rule > .crewlet-chat-divider--unread {
+  position: absolute;
+  inset: 0;
+}
+
+/*
+ * THE PILL floats over the rows: the transcript's own ground, ringed with the
+ * hairline and a small shadow, so it reads as lifted off the messages it
+ * passes over. The ring is a shadow, which forced colors drops, so a
+ * transparent outline stands in for it there.
+ */
+.crewlet-chat-day__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: var(--crewlet-chat-day-pill);
+  box-sizing: border-box;
+  padding: 0 var(--spacing-3);
+  border: 0;
+  border-radius: var(--radius-pill);
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+  background-color: var(--crewlet-chat-ground);
+  box-shadow:
+    0 0 0 1px var(--color-edge-hairline),
+    var(--shadow-xs);
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: auto;
+}
+
+/* A pill that opens a menu: its chevron sits a step closer to its edge. */
+.crewlet-chat-day__pill--button {
+  padding-inline-end: var(--spacing-2);
+  cursor: pointer;
+}
+
+/* Under the pointer, and while its menu is open, the hover overlay laid on
+   the pill's own ground. */
+.crewlet-chat-day__pill--button:hover,
+.crewlet-chat-day__pill--button[aria-expanded='true'] {
+  background-image: linear-gradient(var(--color-surface-hover), var(--color-surface-hover));
+}
+
+/* The pill draws its own ring, so focus is drawn over it, as one edge. */
+.crewlet-chat-day__pill--button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-chat-day__label {
+    transition: none;
+  }
+}

package/dist/ChatDivider/ChatDivider.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react';
+export type ChatDividerVariant = 
+/**
+ * The New line: a hairline in the danger hue across the whole list, laid
+ * on the boundary between the last message the reader has read and the
+ * first one they have not, with its word at the line's end.
+ */
+'unread'
+/** A quiet labelled rule, as a thread pane sets its reply count over the replies. */
+ | 'date';
+export interface ChatDividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    variant: ChatDividerVariant;
+    /** The words on the line, and its name for a screen reader: "New", "3 replies". */
+    label: string;
+}
+/**
+ * A line between the rows of a conversation.
+ *
+ * THE NEW LINE TAKES NO HEIGHT. Marking where the reader left off moves no
+ * message: the line is drawn on the boundary between two rows, over the gap
+ * they already keep, so a list that gains or loses it never shifts under the
+ * reader's eye. Inside a `ChatDay` whose first message is the first unread
+ * one, the day draws it on its own rule (`unread`), as one line rather than
+ * a second line under the first.
+ *
+ * A SEPARATOR TO A SCREEN READER, named by its words, so a reader moving
+ * through the log hears "New" where the unread messages start. The host can
+ * find it again by `data-divider` (to bring it into view, or to tell whether
+ * it is on screen for an unread banner).
+ */
+export declare function ChatDivider({ variant, label, className, ...rest }: ChatDividerProps): import("react").JSX.Element;

package/dist/ChatDivider/index.d.ts

@@ -0,0 +1,4 @@
+import '../ChatMessage/ChatScale.css';
+import './ChatDivider.css';
+export { ChatDivider } from './ChatDivider.js';
+export type { ChatDividerProps, ChatDividerVariant } from './ChatDivider.js';

package/dist/ChatDivider/index.js

@@ -0,0 +1,2 @@
+export { ChatDivider } from '../chunk-K774LUN3.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChatDivider-7ZNDL2PZ.css

@@ -0,0 +1,76 @@
+/*
+ * ChatDivider: a line between the rows of a conversation, set on the
+ * conversation's own scale (ChatScale.css).
+ */
+
+/* A quiet labelled rule: the words in the middle, a hairline either side. */
+.crewlet-chat-divider--date {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--crewlet-chat-pad-x);
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-chat-divider--date::before,
+.crewlet-chat-divider--date::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-border-default);
+}
+
+.crewlet-chat-divider--date .crewlet-chat-divider__label {
+  white-space: nowrap;
+}
+
+/*
+ * THE NEW LINE TAKES NO HEIGHT. A hairline across the whole list in the
+ * danger hue, laid on the boundary between the last read message and the
+ * first unread one, with "New" at its end on the transcript's ground, so it
+ * reads over the rows it passes. Brought to the top of the view (scrolled to
+ * as a target), it stops under the day's pinned pill rather than behind it.
+ */
+.crewlet-chat-divider--unread {
+  position: relative;
+  z-index: var(--z-index-raised);
+  height: 0;
+  pointer-events: none;
+  scroll-margin-top: calc(var(--crewlet-chat-day-pin) + var(--crewlet-chat-day-pill) + var(--spacing-3));
+}
+
+.crewlet-chat-divider--unread::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 1px;
+  background: var(--color-feedback-danger);
+}
+
+.crewlet-chat-divider--unread .crewlet-chat-divider__label {
+  position: absolute;
+  top: 0;
+  right: var(--crewlet-chat-pad-x);
+  padding: 0 var(--spacing-1);
+  transform: translateY(-50%);
+  background: var(--crewlet-chat-ground);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * FORCED COLORS drops the line's background, which is the whole line. A
+ * border is the one edge the mode keeps, painted in its own text colour.
+ */
+@media (forced-colors: active) {
+  .crewlet-chat-divider--unread::before,
+  .crewlet-chat-divider--date::before,
+  .crewlet-chat-divider--date::after {
+    border-top: 1px solid CanvasText;
+  }
+}

package/dist/ChatMessage/ChatMessage.d.ts

@@ -0,0 +1,111 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Why a row is drawn apart from the rest: it names the reader, or the whole room. */
+export type ChatMessageHighlight = 'mention';
+/** An outbox row: `sending` is drawn faint in place, `failed` carries its own line. */
+export type ChatMessagePending = 'sending' | 'failed';
+/**
+ * Where the toolbar stands. `auto` rests it on the row's first line, over the
+ * row above, and inside the row's own head where the scroller's edge would cut
+ * it. `inside` always draws it inside the row, for a row with something of the
+ * host's own above it that the toolbar must not cover (the head of a card).
+ */
+export type ChatMessageActionsPlacement = 'auto' | 'inside';
+/** The class every message row carries, which the row's keys walk between. */
+export declare const CHAT_MESSAGE_CLASS = "crewlet-chat-message";
+export interface ChatMessageProps extends Omit<HTMLAttributes<HTMLElement>, 'id' | 'children'> {
+    /** The message's own id, drawn as `data-message-id` so a host can find the row it opens at. */
+    id: string;
+    /** Names the row for a screen reader: "Product Manager, 11:02 AM". */
+    label: string;
+    /** The author's face, drawn in the gutter of a message that starts a run. A button that opens their profile is styled to fit. */
+    avatar: ReactNode;
+    /** The author's name, usually a button that opens their profile. */
+    author: ReactNode;
+    /** After the name: a quiet `Tag` naming the seat's kind ("Agent"), a saved flag, the room a mention came from. */
+    badges?: ReactNode;
+    /** The short time beside the name ("11:40 AM"). */
+    time: string;
+    /** The full time, shown on hover of either time. */
+    timeTitle: string;
+    /** The machine-readable time, for the `<time>` elements' `dateTime`. */
+    dateTime?: string | undefined;
+    /**
+     * The time a continuation shows in its gutter, which is a face wide:
+     * "11:40" rather than "11:40 AM". `time` by default.
+     */
+    gutterTime?: string | undefined;
+    /** A later message from the same author, close in time to the one before: no face and no head. */
+    continuation?: boolean | undefined;
+    /** `mention` for a message that names the reader or the whole room: a light warning wash and a bar on its edge. */
+    highlight?: ChatMessageHighlight | null | undefined;
+    /** An outbox row. See `ChatMessageFailure` for the line a failed one carries. */
+    pending?: ChatMessagePending | undefined;
+    /** Holds the row's fill and its toolbar in view while one of the toolbar's menus or pickers is open. */
+    active?: boolean | undefined;
+    /** The row a link, a mention or a search opened at: a wash of the accent that fades out. */
+    flash?: boolean | undefined;
+    /** The words are being edited in place: the toolbar steps aside. */
+    editing?: boolean | undefined;
+    /** The hover toolbar, a `MessageActions`. */
+    actions?: ReactNode;
+    /** Where the toolbar stands, `auto` by default. */
+    actionsPlacement?: ChatMessageActionsPlacement | undefined;
+    /** Under the words, one stack a step apart: previews, a `ReactionBar`, a `ThreadSummary`, a `ChatMessageFailure`. */
+    footer?: ReactNode;
+    /** The message's words. */
+    children: ReactNode;
+}
+/**
+ * One message in a transcript: the author's face in a gutter, the name, a
+ * quiet label and the time on one head line, the words, and a footer stack
+ * under them.
+ *
+ * A RUN OF MESSAGES IS ONE BLOCK. A `continuation` (the same author again,
+ * close in time) draws no face and no head: its gutter holds the time, a
+ * face wide, shown while the row is pointed at or focused, on the baseline
+ * of the words' first line.
+ *
+ * THE TOOLBAR RESTS ON THE ROW'S FIRST LINE, over the row above. Laid across
+ * the row's top edge, it covered the end of the row's own head, which on a
+ * narrow column is the time of the very message it acts on. A row with less
+ * room above it than the toolbar needs, at the top of its scroller, would
+ * have it cut by the scroller's edge, so that row draws it inside its own
+ * head. The room is MEASURED, when the pointer arrives or focus enters: the
+ * toolbar's height less the row's own top inset, against the distance to the
+ * scroller's top.
+ *
+ * A TOUCH SCREEN HAS NO HOVER. A tap on the row focuses it (it is focusable,
+ * out of the tab order), and a focused row shows its toolbar there, so
+ * replying, saving and the More menu are reached by touch as well.
+ *
+ * THE KEYS. ArrowUp and ArrowDown on a focused row move to the row before and
+ * after it in the same log. A host's own `onKeyDown` runs first, and a key it
+ * handles (`preventDefault`) is left alone.
+ *
+ * NO BOLD. The name is the medium weight and everything else on the head the
+ * regular one, in the meta step and the tertiary ink.
+ */
+export declare const ChatMessage: import("react").ForwardRefExoticComponent<ChatMessageProps & import("react").RefAttributes<HTMLElement>>;
+/** The words a failed row's line says. */
+export interface ChatMessageFailureLabels {
+    /** Leads the line, before the reason. */
+    notSent: string;
+    retry: string;
+    discard: string;
+}
+export declare const CHAT_MESSAGE_FAILURE_LABELS: ChatMessageFailureLabels;
+export interface ChatMessageFailureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Why it was not sent, in a sentence: "The engine did not answer." */
+    reason?: ReactNode;
+    /** Sends it again. */
+    onRetry: () => void;
+    /** Drops it from the outbox. */
+    onDiscard: () => void;
+    labels?: Partial<ChatMessageFailureLabels> | undefined;
+}
+/**
+ * The line under a message that was not sent (`pending="failed"`): what
+ * happened in the danger ink, then Retry and Discard. It is a status, so a
+ * screen reader hears it once when it appears.
+ */
+export declare function ChatMessageFailure({ reason, onRetry, onDiscard, labels: overrides, className, ...rest }: ChatMessageFailureProps): import("react").JSX.Element;