@crewlethq/ui 0.54.1 → 0.56.0

package/dist/CanvasToolbar/index.js

@@ -1,13 +1,14 @@
-export { CanvasToolbar, toolForKey } from '../chunk-X4NIE7CI.js';
+export { CanvasToolbar, toolForKey } from '../chunk-LQ6AGUDL.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-D7Q5MQRF.js';
+import '../chunk-YEURM24I.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChangeList/ChangeList.d.ts

@@ -0,0 +1,114 @@
+import { type ReactNode } from 'react';
+import { type DiffListLabels, type DiffRow } from '../DiffList/index.js';
+/** One run of a word diff: unchanged (`=`), added (`+`) or removed (`-`). */
+export interface WordDiffPart {
+    op: '=' | '+' | '-';
+    text: string;
+}
+interface RowBase {
+    /** What the field is called: "Status", "Assignee". */
+    label: string;
+    /** A consequence under the value, in the smallest tertiary type: "No open task matches this title". Never the current value, which the pair shows. */
+    note?: ReactNode;
+}
+/** A fact that does not change, such as the page being edited. */
+export interface ChangeListFactRow extends RowBase {
+    kind: 'fact';
+    value: ReactNode;
+}
+/** A value that changes from one thing to another. */
+export interface ChangeListChangedRow extends RowBase {
+    kind: 'changed';
+    from: ReactNode;
+    to: ReactNode;
+}
+/** A value set where there was none. */
+export interface ChangeListAddedRow extends RowBase {
+    kind: 'added';
+    to: ReactNode;
+    /**
+     * Marks the value with a small "New" tag, for a field added to a record
+     * that already exists. Left off on a create, where every field is new and
+     * the list's heading already says so.
+     */
+    isNew?: boolean | undefined;
+}
+/** A value taken away. */
+export interface ChangeListRemovedRow extends RowBase {
+    kind: 'removed';
+    from: ReactNode;
+}
+/** Long text that changes (a page section, a comment), as a word diff. */
+export interface ChangeListTextRow extends RowBase {
+    kind: 'text';
+    words: readonly WordDiffPart[];
+    /** The same change, path by path, opened under "Show the whole change" as a `DiffList`. */
+    whole?: readonly DiffRow[] | undefined;
+    /** Unchanged runs longer than this many characters are shortened with an ellipsis. 80 by default. */
+    collapseOver?: number | undefined;
+}
+export type ChangeListRow = ChangeListFactRow | ChangeListChangedRow | ChangeListAddedRow | ChangeListRemovedRow | ChangeListTextRow;
+export interface ChangeListLabels {
+    /** Said before the old value of a change: "Changed from Any open status to Blocked". */
+    changedFrom: string;
+    /** Said where the arrow is drawn. */
+    to: string;
+    /** Said before a value set where there was none. */
+    added: string;
+    /** Said before a value taken away. */
+    removed: string;
+    /** The small tag on a field new to an existing record. */
+    isNew: string;
+    /** Said before each added run of a word diff. */
+    addedWords: string;
+    /** Said before each removed run of a word diff. */
+    removedWords: string;
+    /** The disclosure that opens the whole change. */
+    showWhole: string;
+}
+export declare const CHANGE_LIST_LABELS: ChangeListLabels;
+export interface ChangeListProps {
+    rows: readonly ChangeListRow[];
+    /** The eyebrow over the rows: "What will change", "What will be created", "What changed". */
+    heading?: ReactNode;
+    /**
+     * The change is over (applied, declined, expired). The values step back to
+     * the secondary ink; the tints stay, so the record of what changed is still
+     * there to read.
+     */
+    settled?: boolean | undefined;
+    labels?: Partial<ChangeListLabels> | undefined;
+    /** Words for the `DiffList` behind "Show the whole change". */
+    diffLabels?: Partial<DiffListLabels> | undefined;
+    className?: string | undefined;
+}
+/** The longest run of unchanged words kept whole in a word diff. */
+export declare const CHANGE_LIST_COLLAPSE_OVER = 80;
+/**
+ * An unchanged run of a word diff, shortened when it is long. The run before
+ * the first change keeps its end, the run after the last keeps its start, and
+ * a run between two changes keeps both, cut at word boundaries, because what a
+ * reader needs from unchanged text is the words that touch the change.
+ */
+export declare function shortenUnchanged(text: string, place: 'first' | 'middle' | 'last', max?: number): string;
+/**
+ * What a change will do, field by field, as a before and after.
+ *
+ * THE CHANGE IS THE THING SCANNED. A changed field shows its old value struck
+ * through, an arrow and its new value on the added tint; an added one its new
+ * value on that tint; a removed one its old value struck through on the
+ * removed tint; long text a word diff with "Show the whole change" opening
+ * the path-by-path `DiffList`. These are `DiffList`'s tones and grammar, so a
+ * change a person approves looks like every other diff in the product.
+ *
+ * THE ARROW IS NEVER THE ONLY WORD: a pair is said "Changed from Any open
+ * status to Blocked", and every added or removed value says so before it. The
+ * old value is struck through in the tertiary ink and the new one carries the
+ * weight, so the eye lands on what the field will hold.
+ *
+ * A DESCRIPTION LIST on `PropertyList`'s grid: the labels in one column, the
+ * values in the other, rows apart by the list's spacing rather than rules,
+ * and no box of its own inside the card that holds it.
+ */
+export declare function ChangeList({ rows, heading, settled, labels: overrides, diffLabels, className }: ChangeListProps): import("react").JSX.Element;
+export {};

package/dist/ChangeList/index.d.ts

@@ -0,0 +1,3 @@
+import './ChangeList.css';
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, shortenUnchanged } from './ChangeList.js';
+export type { ChangeListAddedRow, ChangeListChangedRow, ChangeListFactRow, ChangeListLabels, ChangeListProps, ChangeListRemovedRow, ChangeListRow, ChangeListTextRow, WordDiffPart, } from './ChangeList.js';

package/dist/ChangeList/index.js

@@ -0,0 +1,10 @@
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, shortenUnchanged } from '../chunk-NEHSV55H.js';
+import '../chunk-Z3GDMNMU.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-GG4QZWMQ.js';
+import '../chunk-TFGCNBWP.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChangeList-CB2DLR5S.css

@@ -0,0 +1,151 @@
+/*
+ * What a change will do, as a before and after on PropertyList's grid: one
+ * label column (as wide as the longest label, never under 92px) and one value
+ * column, rows a spacing step apart with no rules, and the tones of DiffList.
+ */
+.crewlet-change-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* The eyebrow register: a heading a reader passes over to reach the rows. */
+.crewlet-change-list__heading {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-change-list__rows {
+  display: grid;
+  grid-template-columns: var(--crewlet-description-list-term, minmax(92px, max-content)) minmax(0, 1fr);
+  gap: var(--spacing-2) var(--spacing-3);
+  align-items: baseline;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-change-list__row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.crewlet-change-list__label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-change-list__value {
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+/* Long text takes the row's whole width under its label. */
+.crewlet-change-list__row--text > .crewlet-change-list__value {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-change-list__fact {
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * A PAIR WRAPS AS A UNIT: the old value, then the arrow and the new value
+ * together, which drop under the old value on a narrow card rather than
+ * splitting the arrow from what it points at.
+ */
+.crewlet-change-list__pair {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  max-width: 100%;
+}
+
+.crewlet-change-list__next {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-change-list__arrow {
+  flex: none;
+  align-self: center;
+  color: var(--color-text-tertiary);
+}
+
+/* The old value: struck through in the tertiary ink. */
+.crewlet-change-list__from {
+  color: var(--color-text-tertiary);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* The new value: the primary ink at medium weight, on the added tint. */
+.crewlet-change-list__to,
+.crewlet-change-list__inserted {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-feedback-success-soft);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* A value taken away: struck through on the removed tint, in its ink. */
+.crewlet-change-list__removed {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* A word diff: one compact paragraph, removed words struck in the danger ink. */
+.crewlet-change-list__words {
+  margin: 0;
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-change-list__deleted {
+  color: var(--color-feedback-danger-ink);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* The disclosure's padding hangs into the gutter, so its chevron sits on the text edge. */
+.crewlet-change-list__whole {
+  margin-inline-start: calc(var(--spacing-2) * -1);
+}
+
+.crewlet-change-list__note {
+  display: block;
+  margin-top: 2px;
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+/* Settled: the values step back; the tints stay, so the record is still there. */
+.crewlet-change-list--settled .crewlet-change-list__fact,
+.crewlet-change-list--settled .crewlet-change-list__to,
+.crewlet-change-list--settled .crewlet-change-list__inserted,
+.crewlet-change-list--settled .crewlet-change-list__value {
+  color: var(--color-text-secondary);
+}

package/dist/ChatThread/ChatThread.d.ts

@@ -0,0 +1,53 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** How close to the end, in pixels, still counts as reading the latest. */
+export declare const CHAT_THREAD_FOLLOW_WITHIN = 48;
+export interface ChatThreadLabels {
+    /** The pill that returns to the end. */
+    jumpToLatest: string;
+    /** Said after it with how many items arrived since the reader scrolled away. */
+    newItems: (count: number) => string;
+}
+export declare const CHAT_THREAD_LABELS: ChatThreadLabels;
+/** What a host can ask of the thread. */
+export interface ChatThreadHandle {
+    /** Scrolls to the end and follows it again. */
+    scrollToLatest: () => void;
+    /**
+     * Brings an item that needs a decision into view: the whole of it when it
+     * fits, and otherwise its head at the top of the view, never past it, so
+     * its actions are reached by reading rather than skipped over.
+     */
+    reveal: (element: HTMLElement) => void;
+}
+export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    /** Names the log for a screen reader: "Conversation". */
+    label: string;
+    /** A request is running: the log is `aria-busy` until it settles. */
+    busy?: boolean | undefined;
+    /**
+     * Keeps the end in view while the reader is at it (within 48px). `true` by
+     * default; `false` never moves the scroll on its own.
+     */
+    follow?: boolean | undefined;
+    /** The thread's blocks, one child per item, oldest first. */
+    children?: ReactNode;
+    labels?: Partial<ChatThreadLabels> | undefined;
+}
+/**
+ * A conversation as it grows: the scrolling region of messages, answers and
+ * cards, which keeps the latest in view while the reader is at the end and
+ * lets them read back without being pulled down.
+ *
+ * A LOG WITH ITS LIVE REGION OFF. It is `role="log"` so assistive technology
+ * knows what it is, but `aria-live="off"`, because a streaming answer read
+ * token by token is noise: the host announces once, through the page's
+ * `Announcer`, when an answer completes. It is focusable, so a keyboard
+ * reader can scroll it, and `aria-busy` while a request runs.
+ *
+ * IT STICKS TO THE END ONLY WHILE THE READER IS THERE. Within 48px of the end
+ * it follows whatever arrives; scrolled up, it stays put and a "Jump to
+ * latest" pill counts what arrived since. The browser's own scroll anchoring
+ * is turned off (it fights a last child that keeps growing), and the
+ * anchoring is done here instead.
+ */
+export declare const ChatThread: import("react").ForwardRefExoticComponent<ChatThreadProps & import("react").RefAttributes<ChatThreadHandle>>;

package/dist/ChatThread/index.d.ts

@@ -0,0 +1,3 @@
+import './ChatThread.css';
+export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from './ChatThread.js';
+export type { ChatThreadHandle, ChatThreadLabels, ChatThreadProps } from './ChatThread.js';

package/dist/ChatThread/index.js

@@ -0,0 +1,6 @@
+export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-RV2FGESF.js';
+import '../chunk-RTPQDNW3.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChatThread-52KMDXHB.css

@@ -0,0 +1,58 @@
+/*
+ * A conversation as it grows: the scroller, the items a spacing step and a
+ * half apart on the panel's 16px inset, and the Jump to latest pill floating
+ * over its foot.
+ */
+.crewlet-chat-thread {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/*
+ * THE BROWSER'S SCROLL ANCHORING IS OFF: it pins the content above the
+ * reader's view, which fights a last child that keeps growing as an answer
+ * streams in. ChatThread.tsx anchors to the end itself.
+ */
+.crewlet-chat-thread__scroller {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+}
+
+/* A ring inside the region, which an edge-to-edge scroller would otherwise clip. */
+.crewlet-chat-thread__scroller:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-chat-thread__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4);
+}
+
+.crewlet-chat-thread__items > * {
+  flex: none;
+}
+
+/* The pill, centred a step above the thread's foot. */
+.crewlet-chat-thread__jump {
+  position: absolute;
+  bottom: var(--spacing-3);
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: var(--shadow-md);
+  border-radius: var(--radius-pill);
+}
+
+.crewlet-chat-thread__fresh {
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-secondary);
+}

package/dist/Checkbox/index.js

@@ -1,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-RQI43UJ7.js';
-import '../chunk-LJHH4WWB.js';
+export { Checkbox, CheckboxGroup } from '../chunk-NHJQXDHA.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CodeBlock/index.js

@@ -1,8 +1,9 @@
-export { CodeBlock } from '../chunk-A4GFEMVI.js';
-import '../chunk-7SHAFLEX.js';
+export { CodeBlock } from '../chunk-6T6V5565.js';
+import '../chunk-ES4HR34Y.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-OG6CL3EB.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ColorField/index.js

@@ -1,11 +1,11 @@
-export { ColorField } from '../chunk-5WYPSVRX.js';
+export { ColorField } from '../chunk-3NQS6KYG.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ColorSwatch/index.js

@@ -1,9 +1,10 @@
-export { ColorSwatch } from '../chunk-RHPBTE3F.js';
-import '../chunk-7SHAFLEX.js';
+export { ColorSwatch } from '../chunk-NQGZRMUG.js';
+import '../chunk-ES4HR34Y.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-OG6CL3EB.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,12 +1,12 @@
-export { Combobox } from '../chunk-C6Z3MLSA.js';
+export { Combobox } from '../chunk-U5PJSGHG.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,17 +1,18 @@
-export { CommandPalette } from '../chunk-NMR7AJSB.js';
-import '../chunk-YCC2S7DF.js';
+export { CommandPalette } from '../chunk-Z7PJF6F3.js';
+import '../chunk-QZ4B72FP.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommentThread/index.js

@@ -1,20 +1,22 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-EZ43L6T7.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-56P72ZBE.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-3CZ7XAVY.js';
+import '../chunk-KS7YIJ4S.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PWG3VHRQ.js';
-import '../chunk-UJ4VVK7R.js';
+import '../chunk-JLRXCKTS.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Composer/Composer.d.ts

@@ -1,18 +1,50 @@
 import { type ReactNode, type TextareaHTMLAttributes } from 'react';
 /** The share of `maxLength` at which the counter appears. */
 export declare const COMPOSER_COUNTER_AT = 0.8;
+/**
+ * Which key sends. `mod-enter` (Command+Enter, Control+Enter elsewhere) is for
+ * a brief or a reply that is often several lines, where Enter writes a line;
+ * `enter` is for a question, which is one line far more often than not, as
+ * every chat surface sends it: Enter sends and Shift+Enter writes a line.
+ */
+export type ComposerSubmitKey = 'mod-enter' | 'enter';
 export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'onSubmit' | 'children'> {
     value: string;
     onChange: (value: string) => void;
     /**
-     * Called on Command+Enter (Control+Enter elsewhere). With it, the footer
-     * carries the shortcut's hint.
+     * Called on the send key (`submitOn`). Never while the composer is
+     * disabled, and never on an Enter that ends an input method's composition.
      */
     onSubmit?: (() => void) | undefined;
+    /** Which key sends. `mod-enter` by default; see `ComposerSubmitKey`. */
+    submitOn?: ComposerSubmitKey | undefined;
     /** Names the field for a screen reader, since it carries no visible label. */
     label: string;
     /** The footer's controls, at its end: Cancel and Submit. */
     actions?: ReactNode;
+    /**
+     * A control on the field's own row, at its end: the send button of a chat
+     * composer (`SendButton`). With one, the field starts at one line and grows
+     * to six before it scrolls, and the control stays on the last line.
+     */
+    trailing?: ReactNode;
+    /**
+     * What travels with the message, drawn above the field inside the
+     * composer's edge: a row of `Tag`s, such as the page a question is asked
+     * about. It is a group named by `attachmentsLabel`, before the field in
+     * reading order, so a reader meets what is attached before what they type.
+     */
+    attachments?: ReactNode;
+    /** Names the attachments group. "Attached to this message" by default. */
+    attachmentsLabel?: string | undefined;
+    /**
+     * The composer cannot send right now, and why, in a few words ("Offline",
+     * "You can ask again in 30 seconds"). The whole composer takes the disabled
+     * field's look, the reason stands as the placeholder (so it keeps one line)
+     * and describes the field, and a draft already in it stays. Implies
+     * `disabled`.
+     */
+    disabledReason?: string | undefined;
     className?: string | undefined;
 }
 /**
@@ -23,9 +55,14 @@ export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
  * THE FOOTER IS DRAWN ONLY WITH SOMETHING IN IT. With no shortcut, counter or
  * actions there is no strip at all, and one holding only the shortcut's hint
  * goes on a phone, where the hint is not drawn, rather than stand there empty.
+ * A composer that sends on Enter draws no hint: Enter is what every chat field
+ * already does, and the send button beside the field says the rest.
  *
  * THE COUNTER IS DRAWN ONLY NEAR THE LIMIT, from [COMPOSER_COUNTER_AT] of
  * `maxLength`: a count under every short reply is noise, and a field that
  * stops taking text with no warning reads as a broken keyboard.
+ *
+ * THE BOX OWNS THE ONE FOCUS RING, by pointer and by keyboard; the field
+ * inside never draws its own, so a click in the field never shows two rings.
  */
 export declare const Composer: import("react").ForwardRefExoticComponent<ComposerProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Composer/index.js

@@ -1,11 +1,12 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-UJ4VVK7R.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-JLRXCKTS.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';