@crewlethq/ui 0.81.2 → 0.82.0

package/dist/ChatScale-L4SIHSKL.css

@@ -0,0 +1,42 @@
+/*
+ * ONE SCALE FOR A CONVERSATION. Every part of a transcript reads from these:
+ * the message rows, their toolbar, reactions and thread line, the day's rule
+ * and pill, the New line and the link previews. A name, the words under it
+ * and the box they were typed in are one size, and everything around them
+ * (times, counts, the second lines of previews) is one step down. A surface
+ * that wants a denser or roomier transcript sets them once, on itself.
+ *
+ * A sheet of its own, imported by every part that reads it, so a consumer
+ * that imports one part (`@crewlethq/ui/ChatDay`) still gets the scale.
+ */
+:root {
+  /* The words: names, bodies and the message box, on one line height. */
+  --crewlet-chat-text: var(--font-size-sm);
+  --crewlet-chat-line: var(--font-line-height-normal);
+  /* Times, counts, reactions and second lines: one step down. */
+  --crewlet-chat-meta: var(--font-size-xs);
+  /* The row's side inset, the face column, the gap after it, and the space
+     between the pieces stacked under a message's words. */
+  --crewlet-chat-pad-x: var(--spacing-5);
+  --crewlet-chat-avatar: 36px;
+  --crewlet-chat-gap: var(--spacing-3);
+  --crewlet-chat-stack: 6px;
+  /* One width for every link preview, so a stack of them shares both edges. */
+  --crewlet-chat-card: 440px;
+  /* A day: the pill's height, the room above and below its rule, and how far
+     under the list's top edge the pill pins. A host with a bar floating over
+     the list's top (an unread banner) moves the pin down past it. */
+  --crewlet-chat-day-pill: 24px;
+  --crewlet-chat-day-gap: var(--spacing-5);
+  --crewlet-chat-day-pin: var(--spacing-3);
+  /* The hover toolbar: a medium control, big enough to aim at while the
+     pointer is passing, inside its inset and its hairline, twice. */
+  --crewlet-chat-toolbar-inset: var(--spacing-1);
+  --crewlet-chat-toolbar: calc(var(--size-control-md) + (var(--crewlet-chat-toolbar-inset) + 1px) * 2);
+  /* The ground the transcript is set on. A host that sets it on another fill
+     names that fill here, and everything lifted off the rows (the toolbar,
+     the day's pill, the open thread line) is filled with it. */
+  --crewlet-chat-ground: var(--color-surface-background);
+  /* A row that names the reader: a light wash of the warning hue. */
+  --crewlet-chat-mention: var(--color-feedback-warning-soft);
+}

package/dist/ChatThread/ChatThread.d.ts

@@ -13,12 +13,26 @@ 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.
+     * Brings an item into view in the MIDDLE of the log, with what came before
+     * and after it in sight: a message opened from a link, a mention or a
+     * search, or a card that needs a decision. An item taller than the view
+     * lands with its head at the top instead, never past it, so its actions are
+     * reached by reading rather than skipped over. The item's own
+     * `scroll-margin-top` and `scroll-margin-bottom` are kept clear, so an item
+     * that names the height of a pinned day pill stops under it. The Jump to
+     * latest row the move brings in is accounted for: the item is placed in the
+     * view that is left once the row stands under the log.
      */
     reveal: (element: HTMLElement) => void;
+    /**
+     * The scrolling element, for a host that measures or moves what is inside
+     * it (a windowed transcript, or one that keeps its place while an older
+     * page is added above). Null before the log has mounted.
+     */
+    scroller: () => HTMLDivElement | null;
 }
+/** Where a short transcript rests in its view: under the top, or on the foot. */
+export type ChatThreadRest = 'start' | 'end';
 export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
     /** Names the log for a screen reader: "Conversation". */
     label: string;
@@ -29,6 +43,19 @@ export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
      * default; `false` never moves the scroll on its own.
      */
     follow?: boolean | undefined;
+    /**
+     * Draws the Jump to latest row under the log while the reader is scrolled
+     * away from the end. `true` by default; `false` for a log that offers its
+     * own way back (a day's Jump to menu), so nothing is added under it.
+     */
+    jump?: boolean | undefined;
+    /**
+     * Where a transcript shorter than the view rests: `start` (the default)
+     * under the top, or `end`, on the foot, against the composer under it, as a
+     * conversation's newest messages always are. The items keep no gap of their
+     * own in `end`, since a conversation's rows set their own spacing.
+     */
+    rest?: ChatThreadRest | undefined;
     /** The thread's blocks, one child per item, oldest first. */
     children?: ReactNode;
     labels?: Partial<ChatThreadLabels> | undefined;
@@ -57,6 +84,8 @@ export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
  * and growth is followed; the reader's own wheel, touch or key ends it.
  *
  * THE PILL COVERS NOTHING: it sits under the log, in the thread's own column,
- * rather than over the last lines of whatever is being read.
+ * rather than over the last lines of whatever is being read. A log that
+ * offers its own way back (a day's Jump to menu) leaves it out with
+ * `jump={false}`.
  */
 export declare const ChatThread: import("react").ForwardRefExoticComponent<ChatThreadProps & import("react").RefAttributes<ChatThreadHandle>>;

package/dist/ChatThread/index.d.ts

@@ -1,3 +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';
+export type { ChatThreadHandle, ChatThreadLabels, ChatThreadProps, ChatThreadRest } from './ChatThread.js';

package/dist/ChatThread/index.js

@@ -1,4 +1,4 @@
-export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-R5OATXWU.js';
+export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-JHQGNFN3.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/{ChatThread-2KO3FZKQ.css → ChatThread-HAECJMP6.css}

@@ -53,6 +53,23 @@
   flex: none;
 }
 
+/*
+ * A SHORT TRANSCRIPT RESTS ON ITS FOOT (`rest="end"`), against the composer
+ * under it, as a conversation's newest messages always are, rather than
+ * under the top with an empty band between it and the box. The scroller is a
+ * column and the items take the room above them; a conversation's rows set
+ * their own spacing, so the items keep no gap.
+ */
+.crewlet-chat-thread--rest-end .crewlet-chat-thread__scroller {
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-chat-thread--rest-end .crewlet-chat-thread__items {
+  margin-top: auto;
+  gap: 0;
+}
+
 /*
  * The pill, centred in a row of its own under the log. IN FLOW, NOT FLOATING:
  * laid over the scroller it covered the last lines of whatever was being read,

package/dist/CheckGrid/index.js

@@ -1,11 +1,11 @@
-export { CheckGrid } from '../chunk-MGQKF7GK.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+export { CheckGrid } from '../chunk-NN475NAP.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Checkbox/index.js

@@ -1,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+export { Checkbox, CheckboxGroup } from '../chunk-YQ7Q52XU.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChipField/ChipField.d.ts

@@ -0,0 +1,82 @@
+import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
+/** One chosen item, drawn as a chip in the field. */
+export interface ChipFieldItem {
+    id: string;
+    /** Its name on the chip, and in the chip's Remove control. */
+    label: string;
+    /** A small face or glyph before the name (an `xs` `Avatar`). Decorative. */
+    leading?: ReactNode;
+}
+/**
+ * How the field is drawn. `boxed` is a field like any other, a box with the
+ * field's ring. `bare` is a full-width row with a rule under it, for the
+ * address line at the top of a view ("To:"), whose focus is a bar along
+ * that rule.
+ */
+export type ChipFieldVariant = 'boxed' | 'bare';
+/** The words the field says, for a host that sets its own. */
+export interface ChipFieldLabels {
+    /** Names a chip's Remove control. */
+    remove: (label: string) => string;
+    /** Said when a chip is removed. */
+    removed: (label: string) => string;
+    /** Names the list of chips. */
+    chosen: string;
+}
+export declare const CHIP_FIELD_LABELS: ChipFieldLabels;
+export interface ChipFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'prefix' | 'children' | 'aria-label' | 'type'> {
+    /** What is chosen, in the order it was chosen. */
+    items: readonly ChipFieldItem[];
+    /** A chip's Remove control, and Backspace in an empty query, which removes the last chip. */
+    onRemove: (id: string) => void;
+    /** The words being typed. */
+    query: string;
+    onQueryChange: (query: string) => void;
+    /**
+     * Enter with words typed: the host takes its first match. Enter is taken
+     * from the form round the field only when this is given and there are
+     * words to commit.
+     */
+    onCommit?: (() => void) | undefined;
+    /** The text box's name: "Find people and agents", "Who the message is to". */
+    label: string;
+    /** A leading word inside the row, before the chips: "To:". */
+    prefix?: ReactNode;
+    variant?: ChipFieldVariant | undefined;
+    /** The text box, for a host that moves focus to it. */
+    inputRef?: Ref<HTMLInputElement> | undefined;
+    labels?: Partial<ChipFieldLabels> | undefined;
+    /** Classes on the field's outer box. */
+    className?: string | undefined;
+}
+/**
+ * The chosen items of a picker as chips INSIDE the field, before a bare text
+ * box: the recipients of a new message, the people being added to a room.
+ * The host owns what is offered (a list of `PersonRow`s under the field, or
+ * a listbox the field points at) and what typing finds; the field owns the
+ * chips, the box and the keys.
+ *
+ * NOT `TagsInput`. That field is a form value, its chips above the box so the
+ * box keeps its width and an ordered chain has room for its Move controls.
+ * Here the chips ARE the line being addressed, read left to right with the
+ * caret after the last one, and each carries a face.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - BACKSPACE IN AN EMPTY BOX REMOVES THE LAST CHIP, and says so through the
+ *   shared `Announcer`.
+ * - ENTER WITH WORDS TYPED IS THE HOST'S (`onCommit`): it takes the first
+ *   match. Enter with nothing typed is left to the form round the field.
+ * - FOCUS STAYS IN THE BOX when a chip is removed, by its control or by
+ *   Backspace, so the next name can be typed at once.
+ * - THE HOST'S KEYS COME FIRST. `onKeyDown` runs before the field's own, and
+ *   a key it handles (its default prevented) is left alone: a host that makes
+ *   the box a combobox over `useListbox` takes Enter, the arrows and Escape.
+ *   Every other attribute (`role`, `aria-controls`, `aria-expanded`,
+ *   `aria-activedescendant`) is passed to the box.
+ * - NOTHING IS TAKEN MID-COMPOSITION. While an input method is composing a
+ *   word, Enter and Backspace are its own.
+ * - A PRESS ON THE FIELD'S EMPTY SPACE PUTS THE CARET IN THE BOX, as a press
+ *   anywhere in a text field does.
+ */
+export declare function ChipField({ items, onRemove, query, onQueryChange, onCommit, label, prefix, variant, inputRef, labels: overrides, className, disabled, onKeyDown, ...input }: ChipFieldProps): import("react").JSX.Element;

package/dist/ChipField/index.d.ts

@@ -0,0 +1,4 @@
+import '../Tag/Tag.css';
+import './ChipField.css';
+export { CHIP_FIELD_LABELS, ChipField } from './ChipField.js';
+export type { ChipFieldItem, ChipFieldLabels, ChipFieldProps, ChipFieldVariant } from './ChipField.js';

package/dist/ChipField/index.js

@@ -0,0 +1,9 @@
+export { CHIP_FIELD_LABELS, ChipField } from '../chunk-TRXTO3WC.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChipField-D4CW6XFA.css

@@ -0,0 +1,108 @@
+/*
+ * ChipField: chosen items as chips inside the field, before a bare text box.
+ * The chips and the box wrap as one line of words; the box takes whatever
+ * width the last line leaves, and a line of its own when that is too little.
+ */
+.crewlet-chip-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  cursor: text;
+}
+
+/* A field like any other: the field's fill, boundary and corner. */
+.crewlet-chip-field--boxed {
+  min-height: var(--size-control-lg);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border-field);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-subtle);
+}
+
+/*
+ * ONE RING, the one every field in this package draws: an outline over the
+ * boundary, on the field rather than on the box inside it, because the
+ * field is what the reader sees as the control. The selector names the box
+ * rather than asking :focus-within, so tabbing to a chip's Remove control
+ * rings that control alone, not the field round it as well.
+ */
+.crewlet-chip-field--boxed:has(.crewlet-chip-field__input:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:where(:root[data-crewlet-focus='pointer']) .crewlet-chip-field--boxed:has(.crewlet-chip-field__input:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
+/*
+ * The address line at the top of a view: full width, a rule under it, and
+ * the view's own side inset (`--crewlet-chip-field-inset`, the chat's row
+ * inset by default). Its focus is a bar along the rule; the transparent
+ * outline is what forced colors, which drops the bar, draws instead.
+ */
+.crewlet-chip-field--bare {
+  gap: var(--spacing-2);
+  min-height: var(--size-shell-topbar);
+  padding: var(--spacing-2) var(--crewlet-chip-field-inset, var(--spacing-5));
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-chip-field--bare:has(.crewlet-chip-field__input:focus-visible) {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  box-shadow: inset 0 -2px 0 var(--color-focus);
+}
+
+.crewlet-chip-field__prefix {
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+/* The list lends its chips to the field's own line (ChipField.tsx spells its
+   role out, which a contents box can lose). */
+.crewlet-chip-field__chips {
+  display: contents;
+  list-style: none;
+}
+
+.crewlet-chip-field__chip {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-chip-field__input {
+  flex: 1;
+  min-width: 120px;
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.crewlet-chip-field--bare .crewlet-chip-field__input {
+  padding-inline: 0;
+}
+
+.crewlet-chip-field__input::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 1;
+}
+
+.crewlet-chip-field.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/dist/ColorField/index.js

@@ -1,11 +1,11 @@
-export { ColorField } from '../chunk-T24HBEU6.js';
+export { ColorField } from '../chunk-OOOVL77Y.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,12 +1,12 @@
-export { Combobox } from '../chunk-6EWNMSS4.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-FB3TCNQP.js';
+export { Combobox } from '../chunk-NNZRTR5M.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,18 +1,18 @@
-export { CommandPalette } from '../chunk-5CEQ3HLH.js';
-import '../chunk-C667GCU7.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+export { CommandPalette } from '../chunk-VGOWSOUA.js';
+import '../chunk-XXDB6KPV.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommentThread/index.js

@@ -1,22 +1,22 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-ADGNISEI.js';
-import '../chunk-N2BF272H.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IAP7APOX.js';
+import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-BXCL6P5Z.js';
-import '../chunk-E35HYQMK.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
+import '../chunk-I4PBFJGX.js';
+import '../chunk-EBVZHVPD.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.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-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';