@crewlethq/ui 0.81.1 → 0.82.0

package/dist/CompactNav/CompactNav.d.ts

@@ -0,0 +1,175 @@
+/**
+ * The rail folded to its marks: each destination is its glyph over its name,
+ * in one column, and a whole group can fold into one tile whose flyout lists
+ * its places beside the rail.
+ *
+ * IT IS THE SAME LIST AS `SidebarNav`, DRAWN NARROW. Every prop a place takes
+ * here has the type `SidebarNav.Item` gives it (`NavFigure` for a badge and a
+ * count, `NavLinkProps` for a router's link, a reason string for a lock), so
+ * an application keeps ONE list of its places and hands each to whichever of
+ * the two the shell is drawing (`useAppShell().rail`). Two lists would be two
+ * answers to "where can I go from here", and the first place added to one of
+ * them is the place the other forgets.
+ *
+ * THE HIGHLIGHT IS ON THE GLYPH'S TILE, not the whole entry: the name under it
+ * stays quiet, and the current place reads at a glance down a column of
+ * shapes. It is the full rail's own selected row (raised, a hairline, no hue),
+ * drawn on the tile and from `aria-current`, so the two shapes say "you are
+ * here" the same way.
+ *
+ * A FIGURE RIDES THE TILE'S CORNER, and is READ as part of the name ("Inbox,
+ * 5 unread"), exactly as a full row's figure is, so nothing a reader needs is
+ * hidden by the fold: a folded group's tile carries its places' badges added
+ * up, and says each of them.
+ */
+import { type MouseEventHandler, type ReactNode } from 'react';
+import { type PlacementRect } from '../Layer/index.js';
+import type { NavFigure, NavLinkProps } from '../SidebarNav/index.js';
+export interface CompactNavProps {
+    /** Names the navigation region, as `SidebarNav`'s label does. */
+    label: string;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/** The column of tiles: a navigation landmark holding one list. */
+export declare function CompactNav({ label, className, children }: CompactNavProps): import("react").JSX.Element;
+/** What a place in the compact rail takes, whether it is a tile or a link in a flyout. */
+interface CompactPlace {
+    /** The place's name. Drawn under the glyph on a tile, beside it in a flyout. */
+    label: string;
+    /** The place's glyph (a nav glyph, `size="sm"`). Decoration: the label is the name. */
+    icon: ReactNode;
+    /** Where it goes. Without it (and without `renderLink`) the tile is a button. */
+    href?: string | undefined;
+    /** Whether this is the screen the reader is on. */
+    current?: boolean | undefined;
+    /**
+     * How many things here are waiting on the reader: the accent figure on the
+     * tile's corner, as `SidebarNav.Item`'s badge.
+     */
+    badge?: NavFigure | undefined;
+    /** How many of something the place holds: the quiet figure, as `SidebarNav.Item`'s count. */
+    count?: NavFigure | undefined;
+    /**
+     * Closed to this reader, and why ("Needs Admin access"). The place stays a
+     * link, its name carries the key, and the reason is its title and is read
+     * after its name, as `SidebarNav.Item`'s `locked`.
+     */
+    locked?: string | undefined;
+    /** Called when the pointer reaches the place and when it takes focus, as `SidebarNav.Item`'s. */
+    onPrefetch?: (() => void) | undefined;
+}
+export interface CompactNavItemProps extends CompactPlace {
+    /**
+     * The pointer's title. Defaults to the name with its figure and its lock,
+     * because the name under a tile is the rail's narrowest line and ends in an
+     * ellipsis where it is long: the title is where it is read whole.
+     */
+    title?: string | undefined;
+    /** The tile's shortcut, in the syntax `aria-keyshortcuts` takes: the Search tile's `Meta+K Control+K`. */
+    keyshortcuts?: string | undefined;
+    onClick?: MouseEventHandler<HTMLElement> | undefined;
+    /** Draws the link element, for a router that owns navigation, as `SidebarNav.Item`'s. */
+    renderLink?: ((props: NavLinkProps) => ReactNode) | undefined;
+    className?: string | undefined;
+}
+/**
+ * One destination: its glyph on a tile, its name under it.
+ *
+ * A LINK WHERE IT GOES SOMEWHERE AND A BUTTON WHERE IT DOES SOMETHING. A place
+ * with an `href` is an anchor (a modified press opens a tab, as a full row
+ * does); one without is a button, which is what the compact rail's Search tile
+ * is, since it opens the palette rather than going anywhere.
+ */
+export declare function CompactNavItem({ label, icon, href, current, badge, count, locked, onPrefetch, title, keyshortcuts, onClick, renderLink, className, }: CompactNavItemProps): import("react").JSX.Element;
+export interface CompactNavSeparatorProps {
+    /**
+     * What the runs either side of it are, said rather than drawn: "Company and
+     * Workspace". A separator with no name parts the column for the eye alone.
+     */
+    label?: string | undefined;
+}
+/**
+ * A short rule between two runs of tiles: the full rail's group headings,
+ * which a 76px column has no room to print.
+ *
+ * A SEPARATOR INSIDE AN ENTRY of the list, so the list holds only entries (a
+ * list item in another role breaks the list for assistive technology) and the
+ * rule is named where it has a name.
+ */
+export declare function CompactNavSeparator({ label }: CompactNavSeparatorProps): import("react").JSX.Element;
+/** A place in a folded group's flyout. */
+export interface CompactNavLink extends CompactPlace {
+    /** Unique within the group. */
+    key: string;
+    onClick?: MouseEventHandler<HTMLElement> | undefined;
+}
+export interface CompactNavGroupProps {
+    /** The group's name: "Company". Drawn under the tile and at the head of its flyout. */
+    label: string;
+    /** The group's glyph, for its tile. */
+    icon: ReactNode;
+    /** The group's places, in the order the full rail lists them. */
+    links: readonly CompactNavLink[];
+    /** Draws each link's element, for a router that owns navigation. */
+    renderLink?: ((props: NavLinkProps) => ReactNode) | undefined;
+    className?: string | undefined;
+}
+/**
+ * What a folded group's tile carries: its places' badges, ADDED UP, so the
+ * fold never hides what is waiting on the reader. One badge is drawn as it
+ * is; several are summed, keeping a `+` where any of them stopped counting
+ * ("50+" and 3 are "53+"); a value that is not a count is drawn as the first
+ * badge's own value with a `+`, since there is more than it says.
+ *
+ * The quiet counts are not carried: a count says how much a place holds, and
+ * a sum of how much six places hold is a figure about nothing.
+ */
+export declare function groupBadge(links: readonly Pick<CompactNavLink, 'badge'>[]): (number | string) | undefined;
+/**
+ * Where a flyout stands: BESIDE the rail, not beside the tile, so every
+ * group's flyout opens on one line a gap off the rail's edge, with its head
+ * level with the tile it opened from and slid back inside the bounds where
+ * the tile is near the window's foot.
+ *
+ * Pure arithmetic, in whichever coordinate space the caller uses for all
+ * three, for the reason `placePopup` is: none of it can be observed in jsdom.
+ */
+export declare function placeFlyout(tile: PlacementRect, railEnd: number, size: {
+    width: number;
+    height: number;
+}, bounds: PlacementRect, 
+/** How far above the tile's top the flyout's top stands: its own edge and inset, so its head is level with the tile. */
+lift?: number): {
+    left: number;
+    top: number;
+};
+/**
+ * A group folded into one tile, and its flyout.
+ *
+ * THE FLYOUT IS A MENU OF LINKS BESIDE THE RAIL. Pointing at the tile opens it
+ * after a moment; a press, Enter, Space or Right opens it too, and the keys
+ * put focus on its first place. In the flyout Up and Down move (wrapping),
+ * Home and End jump, Escape or Left close it and hand focus back to the tile,
+ * and Tab closes it and moves on FROM THE TILE, as if the flyout sat right
+ * after it: the flyout is drawn in the layer host at the end of the document,
+ * so the browser's own Tab from inside it would have left the rail for
+ * whatever came next in the document.
+ *
+ * EVERY PLACE IS A REAL LINK, so a modified press opens a tab as it does in
+ * the full rail; choosing one closes the flyout and, where the keyboard chose
+ * it, hands focus back to the tile.
+ *
+ * WHAT OPENED IT DECIDES WHAT CLOSES IT. Opened by the pointer resting on the
+ * tile, it closes when the pointer leaves both; opened by a press or the keys,
+ * it stays until it is dismissed, so a reader who clicked does not lose it by
+ * moving the pointer toward it the long way round. It is on the shared layer
+ * stack, so a press outside closes it and Escape closes it before anything
+ * beneath it.
+ *
+ * THE TILE SAYS WHERE THE READER IS: it is current (`aria-current="true"`,
+ * since the tile is not itself the page) while one of its places is, so the
+ * fold never hides which part of the product the reader is in.
+ */
+export declare function CompactNavGroup({ label, icon, links, renderLink, className }: CompactNavGroupProps): import("react").JSX.Element;
+export {};

package/dist/CompactNav/index.d.ts

@@ -0,0 +1,4 @@
+import '../HitArea/HitArea.css';
+import './CompactNav.css';
+export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from './CompactNav.js';
+export type { CompactNavGroupProps, CompactNavItemProps, CompactNavLink, CompactNavProps, CompactNavSeparatorProps, } from './CompactNav.js';

package/dist/CompactNav/index.js

@@ -0,0 +1,8 @@
+export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from '../chunk-GP5TNTZH.js';
+import '../chunk-TEV5REGB.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CompactNav-CU2AQXBC.css

@@ -0,0 +1,322 @@
+/*
+ * The compact rail: each place its glyph's tile over its name, in one column.
+ *
+ * A PLACE IS 48PX TALL: a 26px tile, its name under it and a breath. Fourteen
+ * places, two rules, and the rail's head and foot stand in a 900px window, so
+ * the column a reader folded the rail to see more of the page never scrolls
+ * on a laptop.
+ *
+ * Tokens only. The tile's sizes are component variables, so a surface that
+ * draws the compact rail at another width changes them in one place.
+ */
+
+.crewlet-compact-nav {
+  --crewlet-compact-nav-tile-width: 36px;
+  --crewlet-compact-nav-tile-height: var(--size-control-sm);
+  --crewlet-compact-nav-glyph: 17px;
+  width: 100%;
+  min-width: 0;
+}
+
+.crewlet-compact-nav__list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-compact-nav__entry {
+  display: flex;
+  min-width: 0;
+}
+
+/* A place is a link or a button, and a folded group is a button: one look for
+   all three. The entry itself draws nothing; the tile is what lifts. */
+.crewlet-compact-nav__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--spacing-1) / 2);
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: calc(var(--spacing-1) - 1px) 0 var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The ring is drawn on the tile (below), not round the whole entry. The
+   entry's own outline is transparent rather than none, so forced colours,
+   which paint a transparent outline in the system's ink, still draw one. */
+.crewlet-compact-nav__item:focus {
+  outline: 2px solid transparent;
+}
+
+.crewlet-compact-nav__tile {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--crewlet-compact-nav-tile-width);
+  height: var(--crewlet-compact-nav-tile-height);
+  border-radius: var(--radius-md);
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* A step larger than the full rail's 14px glyph: in the compact rail the
+   glyph is the place's name at a glance, and the word under it is the
+   caption. */
+.crewlet-compact-nav__tile > .crewlet-glyph {
+  width: var(--crewlet-compact-nav-glyph);
+  height: var(--crewlet-compact-nav-glyph);
+}
+
+.crewlet-compact-nav__item:hover .crewlet-compact-nav__tile,
+.crewlet-compact-nav__item[data-open] .crewlet-compact-nav__tile {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-compact-nav__item:hover .crewlet-compact-nav__label,
+.crewlet-compact-nav__item[data-open] .crewlet-compact-nav__label {
+  color: var(--color-text-primary);
+}
+
+/*
+ * WHERE THE READER IS: the full rail's own current row, drawn on the tile.
+ * Raised, the plain hairline as an OUTLINE (forced colours keep outlines and
+ * drop backgrounds), and the primary ink. After :hover, so the current tile
+ * shows its lift rather than the overlay. A folded group's tile is current
+ * (`aria-current="true"`) while one of its places is.
+ */
+.crewlet-compact-nav__item[aria-current] .crewlet-compact-nav__tile {
+  background: var(--color-surface-elevated);
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  color: var(--color-text-primary);
+}
+
+.crewlet-compact-nav__item[aria-current] .crewlet-compact-nav__label {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* The ring is the tile's, after the current rule that draws its hairline on
+   the same property, so a focused current tile draws the ring. */
+.crewlet-compact-nav__item:focus-visible .crewlet-compact-nav__tile {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-compact-nav__label {
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(var(--spacing-1) / 2);
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A place the reader holds no access to keeps its name and its key, in the
+   quiet ink, as a locked group's rows do in the full rail. */
+.crewlet-compact-nav__item--locked:not([aria-current]):not(:hover) .crewlet-compact-nav__label,
+.crewlet-compact-nav__item--locked:not([aria-current]):not(:hover) .crewlet-compact-nav__tile {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE FIGURE RIDES THE TILE'S TOP END CORNER, cut out of the rail by a ring of
+ * the rail's own ground, so it reads apart from the glyph under it. It is the
+ * one count badge size the whole chrome draws (`--size-badge`), the accent
+ * fill where it is waiting on the reader and the raised ground where it is
+ * only a tally.
+ */
+.crewlet-compact-nav__figure {
+  position: absolute;
+  top: calc(var(--spacing-1) * -1 - 1px);
+  right: calc(var(--spacing-2) * -1 + 1px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  box-sizing: border-box;
+  padding: 0 var(--size-badge-pad);
+  border: 2px solid var(--color-surface-frame);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-compact-nav__figure--badge {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+/* A short rule between two runs of tiles, centred in the column. */
+.crewlet-compact-nav__separator {
+  display: flex;
+  justify-content: center;
+  padding: calc(var(--spacing-1) + var(--spacing-1) / 2) 0;
+}
+
+.crewlet-compact-nav__rule {
+  width: var(--spacing-6);
+  height: 1px;
+  background: var(--color-border-default);
+}
+
+/*
+ * THE FLYOUT: a folded group's places beside the rail, on the popover's rung.
+ * Its rows are the full rail's rows at the menu's step: the glyph, the name,
+ * and the figure at the end, so the places read as they do unfolded.
+ */
+.crewlet-compact-nav__flyout {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 208px;
+  max-width: min(320px, calc(100vw - var(--spacing-4)));
+  box-sizing: border-box;
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-family-sans);
+  animation: crewlet-compact-nav-flyout-in var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* Inside a LayerHost the coordinates are the host's own, so the flyout is
+   absolute within it rather than fixed against the window. */
+.crewlet-compact-nav__flyout--in-host {
+  position: absolute;
+}
+
+@keyframes crewlet-compact-nav-flyout-in {
+  from {
+    opacity: 0;
+    transform: translateX(calc(var(--spacing-1) * -1));
+  }
+}
+
+.crewlet-compact-nav__flyout-head {
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+/* A router's link is drawn by the caller; its wrapper stays out of the box tree. */
+.crewlet-compact-nav__link-slot {
+  display: contents;
+}
+
+.crewlet-compact-nav__link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  height: var(--size-control-md);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  outline: none;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-compact-nav__link:hover,
+.crewlet-compact-nav__link:focus-visible {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The place the reader is on: the selected fill, the primary ink, a step
+   heavier. Declared after the hover so the selected fill holds under it. */
+.crewlet-compact-nav__link[aria-current='page'] {
+  background: var(--color-surface-selected);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-compact-nav__link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-compact-nav__link--locked:not([aria-current]):not(:hover):not(:focus-visible) {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-compact-nav__link-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-compact-nav__link-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-compact-nav__link-figure {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  box-sizing: border-box;
+  padding: 0 var(--size-badge-pad);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-compact-nav__link-figure--badge {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-compact-nav__tile,
+  .crewlet-compact-nav__link {
+    transition: none;
+  }
+
+  .crewlet-compact-nav__flyout {
+    animation: none;
+  }
+}

package/dist/Composer/Composer.d.ts

@@ -8,6 +8,8 @@ export declare const COMPOSER_COUNTER_AT = 0.8;
  * every chat surface sends it: Enter sends and Shift+Enter writes a line.
  */
 export type ComposerSubmitKey = 'mod-enter' | 'enter';
+/** The box's look: `default`, a form's field, or `chat`, a conversation's message box. */
+export type ComposerAppearance = 'default' | 'chat';
 export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'onSubmit' | 'children'> {
     value: string;
     onChange: (value: string) => void;
@@ -20,8 +22,29 @@ export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     submitOn?: ComposerSubmitKey | undefined;
     /** Names the field for a screen reader, since it carries no visible label. */
     label: string;
+    /**
+     * `chat` is a conversation's message box, on the transcript's own type and
+     * ground (the `--crewlet-chat-*` scale): the large corner, the transcript's
+     * ground with the row wash and a small shadow, the words at the chat step, a
+     * footer with no rule of its own, a tool whose menu is open drawn pressed,
+     * and the formatting row's glyphs quiet until the box is in use.
+     */
+    appearance?: ComposerAppearance | undefined;
     /** The footer's controls, at its end: Cancel and Submit. */
     actions?: ReactNode;
+    /**
+     * Tools at the footer's START, before the actions: what a chat composer
+     * offers beside sending (attach, emoji, a mention, drafting with the
+     * assistant). They stand where the eye starts, under the words, and the
+     * send control keeps the corner.
+     */
+    tools?: ReactNode;
+    /**
+     * A row along the box's top, inside its edge and before everything else: a
+     * formatting `Toolbar` (bold, italic, a list) that acts on the words below.
+     * Pass a `Toolbar` with its own name; the row is laid out, not labelled.
+     */
+    toolbar?: 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
@@ -49,8 +72,9 @@ export interface ComposerProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
 }
 /**
  * A message written in place: a borderless field that grows with its text,
- * and a footer strip holding the send shortcut, a counter and the actions, in
- * one box that takes the focus ring as a whole.
+ * and a footer strip holding the tools, the send shortcut, a counter and the
+ * actions, in one box that takes the focus ring as a whole. A formatting row
+ * (`toolbar`) may stand along the box's top, above the words it acts on.
  *
  * 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

package/dist/Composer/index.d.ts

@@ -1,3 +1,4 @@
+import '../ChatMessage/ChatScale.css';
 import './Composer.css';
 export { COMPOSER_COUNTER_AT, Composer } from './Composer.js';
-export type { ComposerProps } from './Composer.js';
+export type { ComposerAppearance, ComposerProps } from './Composer.js';

package/dist/Composer/index.js

@@ -1,12 +1,12 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-E35HYQMK.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-EBVZHVPD.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-OMV5W53A.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/{Composer-HQIMTMRC.css → Composer-ZEGHEAFE.css}

@@ -136,6 +136,32 @@
   padding: var(--spacing-2) var(--spacing-3) 0;
 }
 
+/*
+ * THE FORMATTING ROW, along the box's top on the field's own inset less the
+ * small tool's own room round its glyph, so the first glyph starts on the
+ * words' line. It belongs to the field rather than to a strip of its own: no
+ * rule under it.
+ */
+.crewlet-composer__toolbar {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: var(--spacing-1) var(--spacing-1) 0 calc(var(--spacing-3) - (var(--size-control-sm) - var(--font-size-xs)) / 2);
+}
+
+/*
+ * THE TOOLS AT THE FOOTER'S START, a tight row whose first glyph starts on
+ * the words' line, as the formatting row's does. The spacer after them puts
+ * the actions at the end.
+ */
+.crewlet-composer__tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  margin-inline-start: calc(-1 * (var(--size-control-sm) - var(--font-size-xs)) / 2);
+}
+
 /*
  * DISABLED, AS A FIELD IS: the whole box at the disabled field's 0.6 and the
  * not-allowed cursor, so it no longer reads as somewhere to type. Faded once:
@@ -212,3 +238,48 @@
     transition: none;
   }
 }
+
+/*
+ * A CONVERSATION'S MESSAGE BOX (`appearance="chat"`), on the transcript's own
+ * scale (ChatMessage/ChatScale.css): the large corner on the transcript's
+ * ground with the row wash laid over it, a step lighter than the list, and a
+ * small shadow, so the box sits just above the messages, inside the edge
+ * scale's strong step, the edge a field draws. The words are set at the
+ * transcript's size on one line to start. The footer belongs to the field
+ * rather than standing as a strip under it: no rule and no ground of its own.
+ */
+.crewlet-composer--chat {
+  border-color: var(--color-edge-strong);
+  background:
+    linear-gradient(var(--color-fill-row), var(--color-fill-row)),
+    var(--crewlet-chat-ground);
+  box-shadow: var(--shadow-xs);
+}
+
+.crewlet-composer--chat .crewlet-composer__field {
+  min-height: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--crewlet-chat-text);
+  line-height: var(--crewlet-chat-line);
+}
+
+.crewlet-composer--chat .crewlet-composer__footer {
+  gap: 2px;
+  padding: var(--spacing-1);
+  padding-inline-start: var(--spacing-3);
+  border-top: 0;
+  background: transparent;
+}
+
+/* A tool whose menu or picker is open reads as held down. */
+.crewlet-composer--chat .crewlet-composer__tools [aria-expanded='true'] {
+  background: var(--color-surface-pressed);
+  color: var(--color-text-primary);
+}
+
+/* The formatting row's glyphs rest in the tertiary ink while the box is not
+   in use, so the row reads as part of the field rather than as a toolbar
+   competing with the conversation, and take their own ink once it is. */
+.crewlet-composer--chat:not(:focus-within) .crewlet-composer__toolbar :is(button, [role='button']):not(:hover) {
+  color: var(--color-text-tertiary);
+}

package/dist/ConfirmField/index.js

@@ -1,11 +1,11 @@
-export { ConfirmField, confirmMatches } from '../chunk-TPIMOGOZ.js';
+export { ConfirmField, confirmMatches } from '../chunk-PEBQMX5X.js';
 import '../chunk-PLL7ZJHY.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';