@crewlethq/ui 0.11.0 → 0.12.0

package/README.md

@@ -42,7 +42,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `Kbd` |
 | Content and text | `Text` (the eight registers), `Prose`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer` |
 | Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `Skeleton`, `Eyebrow` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
@@ -191,6 +191,16 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.12.0
+
+0.12.0 adds the parts a question is answered in place with.
+
+**`ChoiceList`** draws one answer from a short list in one bordered box: each choice a native radio with its label, a line of `detail` under it and an optional `tag` at its end ("Recommended"). The whole row selects, the arrow keys move between choices, and the selected row takes the accent's soft fill. A choice marked `separated` is set apart by a dashed rule, and its `panel` is drawn under it only while it is selected, which is how a list ends in "Something else" with a field of its own. `footer` holds the list's Cancel and Submit.
+
+**`Composer`** is a message written in place: a borderless field that grows with its text and a footer strip with the send shortcut, a counter and `actions`, in one box that takes the focus ring as a whole. `onSubmit` runs on Command+Enter (Control+Enter elsewhere) and adds the shortcut's hint; the counter appears from four fifths of `maxLength` (`COMPOSER_COUNTER_AT`).
+
+What to change: nothing. Every addition is new.
+
 ## Changes in 0.11.0
 
 0.11.0 adds the parts a dense editing form is built from.

package/dist/ChoiceList/ChoiceList.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+/** One choice in a [ChoiceList]. */
+export interface ChoiceListOption {
+    /** Stable identity, and what `onChange` is called with. */
+    value: string;
+    /** What the choice is, in a few words. */
+    label: ReactNode;
+    /** One line under the label saying what choosing it means. */
+    detail?: ReactNode;
+    /** A short word at the row's end, such as "Recommended". */
+    tag?: ReactNode;
+    /**
+     * Draws a rule above this choice, setting it apart from the ones before it:
+     * the "Something else" a list of set answers ends with.
+     */
+    separated?: boolean | undefined;
+    /**
+     * Drawn under the choice while it is selected, such as the field a
+     * "Something else" choice opens.
+     */
+    panel?: ReactNode;
+}
+export interface ChoiceListProps {
+    options: readonly ChoiceListOption[];
+    /** The selected choice's `value`, or null when none is. */
+    value: string | null;
+    onChange: (value: string) => void;
+    /** Names the group for a screen reader. */
+    label: string;
+    /** Drawn at the foot of the box, after every choice: its Cancel and Submit. */
+    footer?: ReactNode;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * One answer from a short list, each choice a row with its label, a line of
+ * detail and an optional tag, in one bordered box.
+ *
+ * NATIVE RADIOS, so the arrow keys move the choice and Tab leaves the group as
+ * the platform does, and every row is its radio's label, so the whole row
+ * takes the pointer. A choice's `panel` is drawn under it only while it is
+ * selected, which is how a list ends in "Something else" with a field of its
+ * own without a second control beside the list.
+ */
+export declare function ChoiceList({ options, value, onChange, label, footer, disabled, className }: ChoiceListProps): import("react").JSX.Element;

package/dist/ChoiceList/index.d.ts

@@ -0,0 +1,3 @@
+import './ChoiceList.css';
+export { ChoiceList } from './ChoiceList.js';
+export type { ChoiceListOption, ChoiceListProps } from './ChoiceList.js';

package/dist/ChoiceList/index.js

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

package/dist/ChoiceList-2PQJS4DX.css

@@ -0,0 +1,109 @@
+/*
+ * A short list of answers in one bordered box: a radio, the label with a line
+ * of detail under it, and a tag at the row's end. The selected row takes the
+ * accent's soft fill, so the answer reads at a glance without the radio.
+ */
+.crewlet-choice-list {
+  display: grid;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-choice-list.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-choice-list__group {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+.crewlet-choice-list__item {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+/* The "Something else" a list ends with, set apart by a dashed rule. */
+.crewlet-choice-list__item.is-separated {
+  padding-top: var(--spacing-1);
+  border-top: 1px dashed var(--color-border-strong);
+}
+
+.crewlet-choice-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-list__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-choice-list__row.is-checked {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-choice-list.is-disabled .crewlet-choice-list__row {
+  cursor: not-allowed;
+}
+
+.crewlet-choice-list__radio {
+  margin: 3px 0 0;
+  accent-color: var(--color-brand-accent);
+  cursor: inherit;
+}
+
+/* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
+.crewlet-choice-list__radio:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-choice-list__text {
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-choice-list__label {
+  font-size: var(--font-size-compact);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__tag {
+  padding-top: 2px;
+  font-size: var(--font-size-2xs);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent-ink);
+  white-space: nowrap;
+}
+
+.crewlet-choice-list__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-list__row {
+    transition: none;
+  }
+}

package/dist/Combobox/index.js

@@ -1,6 +1,6 @@
-export { Combobox } from '../chunk-ELZKOVEC.js';
-import '../chunk-FTEJPHBI.js';
+export { Combobox } from '../chunk-GXYNEDNA.js';
 import '../chunk-6MU7HNB4.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-R25RGPUB.js';

package/dist/CommandPalette/index.js

@@ -1,7 +1,7 @@
-export { CommandPalette } from '../chunk-6SDGRKQ7.js';
+export { CommandPalette } from '../chunk-XV65NTIT.js';
+import '../chunk-6MU7HNB4.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
-import '../chunk-6MU7HNB4.js';
 import '../chunk-TEEJSTFG.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';

package/dist/Composer/Composer.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+/** The share of `maxLength` at which the counter appears. */
+export declare const COMPOSER_COUNTER_AT = 0.8;
+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.
+     */
+    onSubmit?: (() => void) | 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;
+    className?: string | undefined;
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+export declare const Composer: import("react").ForwardRefExoticComponent<ComposerProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Composer/index.d.ts

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

package/dist/Composer/index.js

@@ -0,0 +1,7 @@
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-QSLIN64M.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Composer-ABGJIAIR.css

@@ -0,0 +1,88 @@
+/*
+ * A message written in place: the field and its footer strip in one box. The
+ * BOX takes the focus ring, an accent border and a 2px soft halo, so the
+ * field inside draws no border or outline of its own and the footer reads as
+ * part of what is being written.
+ */
+.crewlet-composer {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-composer:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-composer:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-composer .crewlet-composer__field {
+  min-height: 68px;
+  max-height: 220px;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  resize: none;
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-composer .crewlet-composer__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+/* Past its cap the field scrolls rather than pushing the page. */
+.crewlet-composer .crewlet-composer__field.is-auto-resize {
+  overflow-y: auto;
+}
+
+.crewlet-composer__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-composer__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-composer__counter {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-composer__spacer {
+  flex: 1;
+}
+
+@media (width < 640px) {
+  .crewlet-composer__hint {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-composer {
+    transition: none;
+  }
+}

package/dist/DataTable/index.js

@@ -1,10 +1,10 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-R4ZJB5YX.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-GOUKOXJK.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-TEEJSTFG.js';
 import '../chunk-5VNUYO76.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-AV2DXAEL.js';
 import '../chunk-YCTMKKRA.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DataView/index.js

@@ -1,19 +1,19 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CIOKUMVC.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-IINFVK3W.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-3CZ7XAVY.js';
 import '../chunk-HOXGBLEY.js';
+import '../chunk-3CZ7XAVY.js';
 import '../chunk-JCNUQ3US.js';
+import '../chunk-6MU7HNB4.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
-import '../chunk-6MU7HNB4.js';
-import '../chunk-R4ZJB5YX.js';
+import '../chunk-GOUKOXJK.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-TEEJSTFG.js';
 import '../chunk-5VNUYO76.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-AV2DXAEL.js';
 import '../chunk-YCTMKKRA.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/ListInput/index.js

@@ -1,9 +1,9 @@
-export { ListInput } from '../chunk-LZP7FGT7.js';
+export { ListInput } from '../chunk-GARACZAH.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TagsInput/index.js

@@ -1,9 +1,9 @@
-export { TagsInput } from '../chunk-7JGWSOLM.js';
+export { TagsInput } from '../chunk-ZHOM65MI.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,7 +1,7 @@
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-HLBRPES3.js';
 import '../chunk-SEFMO2EV.js';
-import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';

package/dist/{chunk-CIOKUMVC.js → chunk-IINFVK3W.js}

@@ -1,11 +1,11 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { DateTimePicker } from './chunk-JCNUQ3US.js';
+import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';
-import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
-import { DataTable } from './chunk-R4ZJB5YX.js';
+import { DataTable } from './chunk-GOUKOXJK.js';
 import { Menu } from './chunk-TFH6SYWB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/chunk-QBXZLGK2.js

@@ -0,0 +1,40 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChoiceList-2PQJS4DX.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ChoiceList({ options, value, onChange, label, footer, disabled, className }) {
+  const name = useId();
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-choice-list", disabled && "is-disabled", className), children: [
+    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: "crewlet-choice-list__group", children: options.map((option) => {
+      const id = `${name}-${option.value}`;
+      const checked = option.value === value;
+      return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-choice-list__item", option.separated && "is-separated"), children: [
+        /* @__PURE__ */ jsxs("label", { className: cx("crewlet-choice-list__row", checked && "is-checked"), htmlFor: id, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              type: "radio",
+              name,
+              value: option.value,
+              checked,
+              disabled,
+              onChange: () => onChange(option.value),
+              className: "crewlet-choice-list__radio"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-list__text", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-choice-list__label", children: option.label }),
+            option.detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-list__detail", children: option.detail }) : null
+          ] }),
+          option.tag ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-list__tag", children: option.tag }) : null
+        ] }),
+        checked && option.panel ? /* @__PURE__ */ jsx("div", { className: "crewlet-choice-list__panel", children: option.panel }) : null
+      ] }, option.value);
+    }) }),
+    footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-choice-list__footer", children: footer }) : null
+  ] });
+}
+
+export { ChoiceList };

package/dist/chunk-QSLIN64M.js

@@ -0,0 +1,47 @@
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Textarea } from './chunk-FTEJPHBI.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Composer-ABGJIAIR.css';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var COMPOSER_COUNTER_AT = 0.8;
+var Composer = forwardRef(function Composer2({ value, onChange, onSubmit, label, actions, maxLength, className, rows = 3, onKeyDown, ...rest }, ref) {
+  const near = maxLength !== void 0 && value.length >= maxLength * COMPOSER_COUNTER_AT;
+  const keyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || !onSubmit) return;
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      onSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-composer", className), children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref,
+        className: "crewlet-composer__field",
+        "aria-label": label,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        onKeyDown: keyDown,
+        maxLength,
+        rows,
+        autoResize: true,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-composer__footer", children: [
+      onSubmit ? /* @__PURE__ */ jsxs("span", { className: "crewlet-composer__hint", children: [
+        /* @__PURE__ */ jsx(Kbd, { keys: ["Mod", "Enter"], subtle: true }),
+        " to send"
+      ] }) : null,
+      near ? /* @__PURE__ */ jsx("span", { className: "crewlet-composer__counter", "aria-live": "polite", children: `${value.length.toLocaleString()} / ${maxLength.toLocaleString()}` }) : null,
+      /* @__PURE__ */ jsx("span", { className: "crewlet-composer__spacer" }),
+      actions
+    ] })
+  ] });
+});
+
+export { COMPOSER_COUNTER_AT, Composer };

package/dist/generated/index.d.ts

@@ -13,9 +13,11 @@ export * from '../Card/index.js';
 export * from '../CharacterPicker/index.js';
 export * from '../Charts/index.js';
 export * from '../Checkbox/index.js';
+export * from '../ChoiceList/index.js';
 export * from '../CodeBlock/index.js';
 export * from '../Combobox/index.js';
 export * from '../CommandPalette/index.js';
+export * from '../Composer/index.js';
 export * from '../Container/index.js';
 export * from '../Copyable/index.js';
 export * from '../Count/index.js';

package/dist/generated/index.js

@@ -1,24 +1,26 @@
-import '../chunk-PQLMLG5K.js';
+import '../chunk-74OVQWA5.js';
 export { TreeCanvas } from '../chunk-5WEVLIB6.js';
+export { Card } from '../chunk-EG6NYWVK.js';
 import '../chunk-AER7UDD4.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-WEIINZPA.js';
 export { ThemeToggle } from '../chunk-ORNOOMVY.js';
+export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-HLBRPES3.js';
 export { Timeline, TimelineItem } from '../chunk-O67VF5MS.js';
 export { ToastProvider, Toaster, useToast } from '../chunk-UG5ZMAXW.js';
+export { Stepper } from '../chunk-5QWIJSQM.js';
 export { Switch } from '../chunk-A722MUNR.js';
 export { Table } from '../chunk-V2N3BMOT.js';
 export { TagGroup } from '../chunk-E6UWRXNM.js';
-export { TagsInput } from '../chunk-7JGWSOLM.js';
+export { TagsInput } from '../chunk-ZHOM65MI.js';
 export { Text } from '../chunk-23DHIMJA.js';
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-WEIINZPA.js';
-export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
+export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { Select } from '../chunk-SEFMO2EV.js';
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
 export { NavGroup, NavItem, SidebarNav } from '../chunk-IVFJD7WY.js';
 export { Skeleton } from '../chunk-W5J7R5EB.js';
 export { StatCard } from '../chunk-IKB6HFGK.js';
 export { StatGroup } from '../chunk-QVAFL2LE.js';
-export { Stepper } from '../chunk-5QWIJSQM.js';
 export { PricingCard } from '../chunk-UCYIRDND.js';
 export { Tag } from '../chunk-LOECRMHA.js';
 export { StatusDot } from '../chunk-WIATRXEJ.js';
@@ -26,7 +28,6 @@ export { Prose } from '../chunk-JCSA3XVH.js';
 export { SearchTrigger } from '../chunk-6DRDCT22.js';
 export { Section } from '../chunk-A2UXBCLO.js';
 import '../chunk-UAQIUSSK.js';
-export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-4PZ6FJKW.js';
 export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IHGKPEEV.js';
@@ -34,10 +35,12 @@ export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-Z
 export { TreeGrid } from '../chunk-MCPKHYMC.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from '../chunk-S3BCVWTU.js';
 export { OrgLabel } from '../chunk-6OF2DBKY.js';
+export { InlineCode } from '../chunk-NN62JQLR.js';
 export { AutoGrid, Inline, Spacer, Stack } from '../chunk-W4ENKCXJ.js';
 export { Link } from '../chunk-ZPSOF6VL.js';
 export { List, ListItem } from '../chunk-DS2C73RJ.js';
-export { ListInput } from '../chunk-LZP7FGT7.js';
+export { ListInput } from '../chunk-GARACZAH.js';
+export { ErrorBoundary } from '../chunk-XX2VQE55.js';
 export { Eyebrow } from '../chunk-RK4XPHVG.js';
 export { FactList } from '../chunk-URYDN2KA.js';
 export { Tooltip } from '../chunk-CQY5NTRS.js';
@@ -45,27 +48,27 @@ export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-5YL
 export { useFullscreen } from '../chunk-XDTYBF2F.js';
 import '../chunk-EXHQ2QVW.js';
 export { ImageUpload } from '../chunk-LAQK4V3Z.js';
-export { InlineCode } from '../chunk-NN62JQLR.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-IINFVK3W.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
+export { PageHeader } from '../chunk-HOXGBLEY.js';
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-3CZ7XAVY.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JCNUQ3US.js';
 export { DescriptionList, DescriptionListItem } from '../chunk-XN4JBAN3.js';
 export { DIFF_LIST_LABELS, DiffList } from '../chunk-LFHCXZO5.js';
 export { Disclosure } from '../chunk-S4RCG44T.js';
 export { EmptyState } from '../chunk-RA2ULG6H.js';
 export { EntityChip } from '../chunk-DDTDN5L2.js';
-export { ErrorBoundary } from '../chunk-XX2VQE55.js';
 export { CodeBlock } from '../chunk-KGTQ5CVD.js';
-export { Combobox } from '../chunk-ELZKOVEC.js';
-export { CommandPalette } from '../chunk-6SDGRKQ7.js';
-export { Container } from '../chunk-QVE4GJAT.js';
-export { CopyButton, Copyable } from '../chunk-YACKC3K2.js';
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CIOKUMVC.js';
-export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
-export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-3CZ7XAVY.js';
-export { PageHeader } from '../chunk-HOXGBLEY.js';
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JCNUQ3US.js';
+export { Combobox } from '../chunk-GXYNEDNA.js';
+export { CommandPalette } from '../chunk-XV65NTIT.js';
+export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-6MU7HNB4.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-QSLIN64M.js';
 export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SMBKXWML.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-FTEJPHBI.js';
-export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-6MU7HNB4.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-R4ZJB5YX.js';
+export { Container } from '../chunk-QVE4GJAT.js';
+export { CopyButton, Copyable } from '../chunk-YACKC3K2.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-GOUKOXJK.js';
+export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 export { Menu } from '../chunk-TFH6SYWB.js';
 export { EMPTY_VALUE, EmptyValue } from '../chunk-EUCC37WY.js';
 export { ConfirmModal, Modal } from '../chunk-TEEJSTFG.js';
@@ -75,19 +78,19 @@ export { Callout } from '../chunk-R6FBDTP3.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, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-2PZBIHRV.js';
 import '../chunk-53DVJCVW.js';
 export { Button, ButtonLink } from '../chunk-OG6CL3EB.js';
-export { Card } from '../chunk-EG6NYWVK.js';
-export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-3L5NHASN.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-4WNNEDKO.js';
 export { Checkbox } from '../chunk-YCTMKKRA.js';
+export { ChoiceList } from '../chunk-QBXZLGK2.js';
 export { Accordion, AccordionItem } from '../chunk-G2AVKPSL.js';
 export { DisclosureAnatomy } from '../chunk-ENJUPIND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { ADD_PILL_MS, AddPill } from '../chunk-74WGARJE.js';
+export { Announcer, announce, useAnnouncer } from '../chunk-RSAQOKH3.js';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-7LD6P32I.js';
 export { IconButton } from '../chunk-4FQT6ZAY.js';
-export { Announcer, announce, useAnnouncer } from '../chunk-RSAQOKH3.js';
 export { AvatarStack, avatarStackLabel } from '../chunk-3UK4VFSK.js';
+export { BrandLockup } from '../chunk-7KBNFFM3.js';
 export { AvatarPicker } from '../chunk-HV6IZFBK.js';
 export { HuePicker } from '../chunk-K5Q2DK3P.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
@@ -101,5 +104,4 @@ export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
 export { VisuallyHidden } from '../chunk-BZFWDIV6.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from '../chunk-HI6Q2UXQ.js';
-export { BrandLockup } from '../chunk-7KBNFFM3.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/index.js

@@ -1,24 +1,26 @@
-import './chunk-PQLMLG5K.js';
+import './chunk-74OVQWA5.js';
 export { TreeCanvas } from './chunk-5WEVLIB6.js';
+export { Card } from './chunk-EG6NYWVK.js';
 import './chunk-AER7UDD4.js';
+export { DensitySwitcher, ThemeSwitcher } from './chunk-WEIINZPA.js';
 export { ThemeToggle } from './chunk-ORNOOMVY.js';
+export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-K3OWD7BJ.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-HLBRPES3.js';
 export { Timeline, TimelineItem } from './chunk-O67VF5MS.js';
 export { ToastProvider, Toaster, useToast } from './chunk-UG5ZMAXW.js';
+export { Stepper } from './chunk-5QWIJSQM.js';
 export { Switch } from './chunk-A722MUNR.js';
 export { Table } from './chunk-V2N3BMOT.js';
 export { TagGroup } from './chunk-E6UWRXNM.js';
-export { TagsInput } from './chunk-7JGWSOLM.js';
+export { TagsInput } from './chunk-ZHOM65MI.js';
 export { Text } from './chunk-23DHIMJA.js';
-export { DensitySwitcher, ThemeSwitcher } from './chunk-WEIINZPA.js';
-export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-K3OWD7BJ.js';
+export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { Select } from './chunk-SEFMO2EV.js';
 export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-IVFJD7WY.js';
 export { Skeleton } from './chunk-W5J7R5EB.js';
 export { StatCard } from './chunk-IKB6HFGK.js';
 export { StatGroup } from './chunk-QVAFL2LE.js';
-export { Stepper } from './chunk-5QWIJSQM.js';
 export { PricingCard } from './chunk-UCYIRDND.js';
 export { Tag } from './chunk-LOECRMHA.js';
 export { StatusDot } from './chunk-WIATRXEJ.js';
@@ -26,7 +28,6 @@ export { Prose } from './chunk-JCSA3XVH.js';
 export { SearchTrigger } from './chunk-6DRDCT22.js';
 export { Section } from './chunk-A2UXBCLO.js';
 import './chunk-UAQIUSSK.js';
-export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-4PZ6FJKW.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-IHGKPEEV.js';
@@ -34,10 +35,12 @@ export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-ZM
 export { TreeGrid } from './chunk-MCPKHYMC.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from './chunk-S3BCVWTU.js';
 export { OrgLabel } from './chunk-6OF2DBKY.js';
+export { InlineCode } from './chunk-NN62JQLR.js';
 export { AutoGrid, Inline, Spacer, Stack } from './chunk-W4ENKCXJ.js';
 export { Link } from './chunk-ZPSOF6VL.js';
 export { List, ListItem } from './chunk-DS2C73RJ.js';
-export { ListInput } from './chunk-LZP7FGT7.js';
+export { ListInput } from './chunk-GARACZAH.js';
+export { ErrorBoundary } from './chunk-XX2VQE55.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
 export { FactList } from './chunk-URYDN2KA.js';
 export { Tooltip } from './chunk-CQY5NTRS.js';
@@ -45,27 +48,27 @@ export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLO
 export { useFullscreen } from './chunk-XDTYBF2F.js';
 import './chunk-EXHQ2QVW.js';
 export { ImageUpload } from './chunk-LAQK4V3Z.js';
-export { InlineCode } from './chunk-NN62JQLR.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from './chunk-IINFVK3W.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
+export { PageHeader } from './chunk-HOXGBLEY.js';
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-JCNUQ3US.js';
 export { DescriptionList, DescriptionListItem } from './chunk-XN4JBAN3.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LFHCXZO5.js';
 export { Disclosure } from './chunk-S4RCG44T.js';
 export { EmptyState } from './chunk-RA2ULG6H.js';
 export { EntityChip } from './chunk-DDTDN5L2.js';
-export { ErrorBoundary } from './chunk-XX2VQE55.js';
 export { CodeBlock } from './chunk-KGTQ5CVD.js';
-export { Combobox } from './chunk-ELZKOVEC.js';
-export { CommandPalette } from './chunk-6SDGRKQ7.js';
-export { Container } from './chunk-QVE4GJAT.js';
-export { CopyButton, Copyable } from './chunk-YACKC3K2.js';
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from './chunk-CIOKUMVC.js';
-export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
-export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
-export { PageHeader } from './chunk-HOXGBLEY.js';
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-JCNUQ3US.js';
+export { Combobox } from './chunk-GXYNEDNA.js';
+export { CommandPalette } from './chunk-XV65NTIT.js';
+export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
+export { COMPOSER_COUNTER_AT, Composer } from './chunk-QSLIN64M.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-FTEJPHBI.js';
-export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-R4ZJB5YX.js';
+export { Container } from './chunk-QVE4GJAT.js';
+export { CopyButton, Copyable } from './chunk-YACKC3K2.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-GOUKOXJK.js';
+export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 export { Menu } from './chunk-TFH6SYWB.js';
 export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
 export { ConfirmModal, Modal } from './chunk-TEEJSTFG.js';
@@ -75,19 +78,19 @@ export { Callout } from './chunk-R6FBDTP3.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, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-2PZBIHRV.js';
 import './chunk-53DVJCVW.js';
 export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
-export { Card } from './chunk-EG6NYWVK.js';
-export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import './chunk-3L5NHASN.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-4WNNEDKO.js';
 export { Checkbox } from './chunk-YCTMKKRA.js';
+export { ChoiceList } from './chunk-QBXZLGK2.js';
 export { Accordion, AccordionItem } from './chunk-G2AVKPSL.js';
 export { DisclosureAnatomy } from './chunk-ENJUPIND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
 export { ADD_PILL_MS, AddPill } from './chunk-74WGARJE.js';
+export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-7LD6P32I.js';
 export { IconButton } from './chunk-4FQT6ZAY.js';
-export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
 export { AvatarStack, avatarStackLabel } from './chunk-3UK4VFSK.js';
+export { BrandLockup } from './chunk-7KBNFFM3.js';
 export { AvatarPicker } from './chunk-HV6IZFBK.js';
 export { HuePicker } from './chunk-K5Q2DK3P.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './chunk-AYKXMIOR.js';
@@ -101,5 +104,4 @@ export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-R25RGPUB.js';
 export { VisuallyHidden } from './chunk-BZFWDIV6.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from './chunk-HI6Q2UXQ.js';
-export { BrandLockup } from './chunk-7KBNFFM3.js';
 export { cx } from './chunk-ODEQTPFM.js';

package/dist/styles.css

@@ -4053,6 +4053,118 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
+/* ChoiceList-2PQJS4DX.css */
+/*
+ * A short list of answers in one bordered box: a radio, the label with a line
+ * of detail under it, and a tag at the row's end. The selected row takes the
+ * accent's soft fill, so the answer reads at a glance without the radio.
+ */
+.crewlet-choice-list {
+  display: grid;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-choice-list.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-choice-list__group {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+.crewlet-choice-list__item {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+/* The "Something else" a list ends with, set apart by a dashed rule. */
+.crewlet-choice-list__item.is-separated {
+  padding-top: var(--spacing-1);
+  border-top: 1px dashed var(--color-border-strong);
+}
+
+.crewlet-choice-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-list__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-choice-list__row.is-checked {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-choice-list.is-disabled .crewlet-choice-list__row {
+  cursor: not-allowed;
+}
+
+.crewlet-choice-list__radio {
+  margin: 3px 0 0;
+  accent-color: var(--color-brand-accent);
+  cursor: inherit;
+}
+
+/* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
+.crewlet-choice-list__radio:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-choice-list__text {
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-choice-list__label {
+  font-size: var(--font-size-compact);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-list__tag {
+  padding-top: 2px;
+  font-size: var(--font-size-2xs);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent-ink);
+  white-space: nowrap;
+}
+
+.crewlet-choice-list__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-list__row {
+    transition: none;
+  }
+}
+
+
 /* CodeBlock-GYNJ2HI6.css */
 /*
  * CodeBlock, a monospace command, config or record surface. One step off the
@@ -4589,6 +4701,97 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
+/* Composer-ABGJIAIR.css */
+/*
+ * A message written in place: the field and its footer strip in one box. The
+ * BOX takes the focus ring, an accent border and a 2px soft halo, so the
+ * field inside draws no border or outline of its own and the footer reads as
+ * part of what is being written.
+ */
+.crewlet-composer {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-composer:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-composer:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-composer .crewlet-composer__field {
+  min-height: 68px;
+  max-height: 220px;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  resize: none;
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-composer .crewlet-composer__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+/* Past its cap the field scrolls rather than pushing the page. */
+.crewlet-composer .crewlet-composer__field.is-auto-resize {
+  overflow-y: auto;
+}
+
+.crewlet-composer__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-composer__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-composer__counter {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-composer__spacer {
+  flex: 1;
+}
+
+@media (width < 640px) {
+  .crewlet-composer__hint {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-composer {
+    transition: none;
+  }
+}
+
+
 /* Container-3TSKMGNI.css */
 /*
  * Container, the centred content measure. One max-width scale shared by every

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.11.0",
-    "@crewlethq/tokens": "0.11.0"
+    "@crewlethq/icons": "0.12.0",
+    "@crewlethq/tokens": "0.12.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/{chunk-LZP7FGT7.js → chunk-GARACZAH.js}

@@ -1,7 +1,7 @@
 import { Kbd } from './chunk-SMBKXWML.js';
 import { FormField, Textarea, Input } from './chunk-FTEJPHBI.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';

package/dist/{chunk-R4ZJB5YX.js → chunk-GOUKOXJK.js}

@@ -1,9 +1,9 @@
+import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Menu } from './chunk-TFH6SYWB.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Modal } from './chunk-TEEJSTFG.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Checkbox } from './chunk-YCTMKKRA.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-ELZKOVEC.js → chunk-GXYNEDNA.js}

@@ -1,5 +1,5 @@
-import { Input } from './chunk-FTEJPHBI.js';
 import { useListbox } from './chunk-6MU7HNB4.js';
+import { Input } from './chunk-FTEJPHBI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-6SDGRKQ7.js → chunk-XV65NTIT.js}

@@ -1,6 +1,6 @@
+import { useListbox } from './chunk-6MU7HNB4.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';
-import { useListbox } from './chunk-6MU7HNB4.js';
 import { Modal } from './chunk-TEEJSTFG.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';

package/dist/{chunk-7JGWSOLM.js → chunk-ZHOM65MI.js}

@@ -1,7 +1,7 @@
 import { Tag } from './chunk-LOECRMHA.js';
 import { useListbox } from './chunk-6MU7HNB4.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-P2HS5QL4.css';