@crewlethq/ui 0.45.0 → 0.46.0

package/dist/InlineEditor/InlineEditor.d.ts

@@ -0,0 +1,86 @@
+import { type FormHTMLAttributes, type ReactNode } from 'react';
+import { type EditingStatusLabels } from '../EditingStatus/index.js';
+/** Every string the editor's bar draws. */
+export interface InlineEditorLabels {
+    save: string;
+    cancel: string;
+    /** Why Save does nothing while nothing has changed. */
+    unchanged: string;
+    /** Why Save does nothing while a field refuses its value. */
+    invalid: string;
+    /** Why Cancel does nothing while the save is in flight. */
+    saving: string;
+    /** The words after the shortcut's keycap: "to save". */
+    shortcut: string;
+    status?: Partial<EditingStatusLabels> | undefined;
+}
+export declare const INLINE_EDITOR_LABELS: InlineEditorLabels;
+export interface InlineEditorProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children' | 'aria-label'> {
+    /** The form's name, for a reader moving by landmark: "Edit the mission". */
+    label: string;
+    /** The fields. Their values, and what a save sends, are the caller's. */
+    children: ReactNode;
+    /** Save was asked for: the button, or Mod+Enter from inside the form. Not called while Save is unavailable. */
+    onSave: () => void;
+    /** Cancel was asked for: the button, or Escape from inside the form. Not called while saving. */
+    onCancel: () => void;
+    /** Anything differs from what was opened. Save waits for it, and the bar says so. */
+    dirty: boolean;
+    /** A save is in flight: Save spins, and neither Save nor Cancel can be pressed again. */
+    saving?: boolean | undefined;
+    /** A field refuses its value. Save waits for it. */
+    invalid?: boolean | undefined;
+    /** Why the last save failed, said as an alert above the bar. */
+    error?: ReactNode;
+    /** A note above the bar that is not an error: a `ConflictNote` once the record moved on. */
+    notice?: ReactNode;
+    /**
+     * Puts the focus in the first field when the editor opens, at the end of
+     * what it holds. ON by default, because an editor is opened by a press of
+     * Edit, and the reader's next keystroke is meant for the field, not for the
+     * button that has gone. Named as `ListInput`'s is.
+     */
+    focusOnMount?: boolean | undefined;
+    /** Draws the Mod+Enter keycap beside Save. ON by default. */
+    shortcutHint?: boolean | undefined;
+    /** Controls at the start of the bar, after the status: a "Reset to the default" link. */
+    secondaryActions?: ReactNode;
+    labels?: Partial<InlineEditorLabels> | undefined;
+}
+/**
+ * One record edited where it is read: its fields, then a bar with the editing
+ * status at its start and Cancel and Save at its end.
+ *
+ * WHY IT EXISTS. A page that shows a mission, a list of policies or a goal and
+ * lets the reader change it has the same five decisions to make every time,
+ * and each one made differently is a page that behaves unlike its neighbour:
+ * which keys save and cancel, whether a Save with nothing to save can be
+ * pressed, where the failure is said, where the focus goes when the form
+ * opens, and what the reader is told while the save is in flight. This is
+ * those five, once.
+ *
+ * IT OWNS NO STATE. The draft, the save call, what happens on a conflict and
+ * where the focus goes once the editor closes are the caller's: the record is
+ * the caller's, and so is the button that opened the editor, which is the one
+ * place the focus belongs when it closes.
+ *
+ * THE KEYS. Mod+Enter saves from any field and Escape cancels, each only
+ * once nothing inside has claimed the key first (an open menu's Escape closes
+ * the menu, not the editor) and never in the middle of an input method's
+ * composition. Enter alone belongs to the field: a newline in a paragraph,
+ * the next item in a list, and NOTHING in a single-line field. A browser
+ * submits a form on Enter in a one-line input, and here that would save a
+ * record mid-edit from the key a writer presses to finish a word, so the
+ * editor refuses that implicit submission: saving is always the one gesture.
+ *
+ * CANCEL DISCARDS AT ONCE. Escape and Cancel call `onCancel` whatever the
+ * draft holds, because whether a draft is worth a question is the caller's
+ * call. A caller holding a draft worth keeping asks first in `onCancel` while
+ * `dirty` ("Discard your changes to the mission?"), and closes only on yes.
+ *
+ * SAVE IS NEVER A DEAD BUTTON. While nothing has changed, while a field
+ * refuses its value and while a save is in flight it stays reachable and says
+ * why it does nothing, rather than being natively disabled, which takes the
+ * focus away from the reader who just pressed it.
+ */
+export declare function InlineEditor({ label, children, onSave, onCancel, dirty, saving, invalid, error, notice, focusOnMount, shortcutHint, secondaryActions, labels: overrides, className, onKeyDown, ...rest }: InlineEditorProps): import("react").JSX.Element;

package/dist/InlineEditor/index.d.ts

@@ -0,0 +1,3 @@
+import './InlineEditor.css';
+export { INLINE_EDITOR_LABELS, InlineEditor } from './InlineEditor.js';
+export type { InlineEditorLabels, InlineEditorProps } from './InlineEditor.js';

package/dist/InlineEditor/index.js

@@ -0,0 +1,9 @@
+export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-7P336RA5.js';
+import '../chunk-MULOZYHL.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/InlineEditor-W55DDKML.css

@@ -0,0 +1,72 @@
+/*
+ * InlineEditor: one record's fields, then a bar. It draws no surface of its
+ * own, so it reads as the card or the section it is opened in rather than as
+ * a form dropped on top of it.
+ */
+
+.crewlet-inline-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  margin: 0;
+}
+
+.crewlet-inline-editor__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-inline-editor__error {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-feedback-danger-ink);
+}
+
+/*
+ * THE BAR: the status at its start, the two controls at its end, on one line
+ * where there is room. On a narrow card it wraps whole, the controls keeping
+ * their order at the end, so Save is never the control that falls off.
+ */
+.crewlet-inline-editor__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2) var(--spacing-3);
+  padding-top: var(--spacing-3);
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--color-border-default);
+}
+
+.crewlet-inline-editor__start,
+.crewlet-inline-editor__end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-inline-editor__end {
+  margin-inline-start: auto;
+}
+
+.crewlet-inline-editor__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* A touch screen has no Mod+Enter to press: the hint goes where no keyboard
+   is the main way in. */
+@media (hover: none) and (pointer: coarse) {
+  .crewlet-inline-editor__hint {
+    display: none;
+  }
+}

package/dist/Input/FormField.d.ts

@@ -1,4 +1,13 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type CharacterCountLabels } from '../CharacterCount/index.js';
+/** A field's length limit, and how much of it the value uses. */
+export interface FormFieldLimit {
+    /** How many characters the value holds. `countCharacters` counts them as a reader would. */
+    length: number;
+    /** The most it may hold. */
+    max: number;
+    labels?: Partial<CharacterCountLabels> | undefined;
+}
 /** What a field's control needs to know about the row it sits in. */
 export interface FormFieldRender {
     /** The id the label points at. Put it on the control. */
@@ -28,6 +37,14 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
     helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode;
+    /**
+     * A length limit: the count is drawn at the end of the help line ("120 /
+     * 500"), joined into the description after the help and before the error,
+     * and a value past it marks the field invalid. A SOFT limit, never a
+     * `maxLength`: what was typed or pasted stays, and the count says by how
+     * much it is over. See `CharacterCount`.
+     */
+    limit?: FormFieldLimit | undefined;
     /** A control rendered beside the label, such as an Add button. */
     labelAction?: ReactNode;
     /**
@@ -65,4 +82,4 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
  * instant, the only line that said what right looks like disappeared. Both
  * lines are joined into `aria-describedby` in reading order, help first.
  */
-export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;
+export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, limit, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;

package/dist/Input/Textarea.d.ts

@@ -12,5 +12,21 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
      * hinting that Enter adds the value. It does not take the pointer.
      */
     trailing?: ReactNode;
+    /**
+     * A value of ONE LINE that wraps so it can be read whole: a mission, a
+     * policy, a title with a long tail. A one-line `Input` scrolls a long value
+     * sideways, so a 160-character mission shows only its last words while it
+     * is being edited; this field wraps it instead, and still holds one line.
+     * Enter inserts no line break (the key stays the surrounding form's or
+     * list's to act on), and a line break pasted or dropped in is folded into
+     * a space, and said so (`foldedMessage`), since the value is then not
+     * quite what was pasted. `aria-multiline` is false, so it is announced as
+     * the one-line field it is. Pair it with `autoResize` and `rows={1}`.
+     */
+    singleLine?: boolean;
+    /** Said through the page's `Announcer` when a `singleLine` field folds line breaks it was given. */
+    foldedMessage?: string;
 }
+/** A value with its line breaks, and the space around each, folded into one space. */
+export declare function foldLineBreaks(text: string): string;
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Input/index.d.ts

@@ -1,12 +1,12 @@
 import './Input.css';
 export { Input, InputAffix } from './Input.js';
 export type { InputAffixProps, InputAppearance, InputProps, InputSize, InputWidth } from './Input.js';
-export { Textarea } from './Textarea.js';
+export { Textarea, foldLineBreaks } from './Textarea.js';
 export type { TextareaProps } from './Textarea.js';
 export { Label } from './Label.js';
 export type { LabelProps } from './Label.js';
 export { FormField } from './FormField.js';
-export type { FormFieldProps, FormFieldRender } from './FormField.js';
+export type { FormFieldLimit, FormFieldProps, FormFieldRender } from './FormField.js';
 export { FormRow } from './FormRow.js';
 export type { FormRowProps } from './FormRow.js';
 export { FormSection } from './FormSection.js';

package/dist/Input/index.js

@@ -1,5 +1,8 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-ZI5G5RS7.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Input-OQZBCRX5.css → Input-VDSV7VWJ.css}

@@ -561,6 +561,25 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * THE HELP LINE WITH A COUNT AT ITS END (`limit`). The help wraps in the room
+ * the count leaves, and the count keeps its width and its line: it is the
+ * figure a writer glances at, so it does not move as the sentence beside it
+ * wraps.
+ */
+.crewlet-form-field__meta {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+
+.crewlet-form-field__meta > .crewlet-form-field__helper,
+.crewlet-form-field__meta-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
 /* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
    labels and values at rest, and the sentence appears under the field the
    reader is in. Still described, so a screen reader hears it on entry. */

package/dist/LinkInterstitial/index.js

@@ -1,11 +1,11 @@
-export { LinkInterstitial, openExternal } from '../chunk-KKUJSMLF.js';
+export { LinkInterstitial, openExternal } from '../chunk-DY4DQ7EB.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-FYINAYAJ.js';
+import '../chunk-6AKG2VLR.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/List/List.d.ts

@@ -32,6 +32,21 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
      * row measures itself against the same track list.
      */
     template?: string | undefined;
+    /**
+     * How much room a row takes. `comfortable` (the default) is the list as it
+     * always was. `compact` sets the rows a small step apart in the body's size
+     * at its normal leading, for a card that has to hold a long list on one
+     * screen: eight standing policies of two lines each, on a page that also
+     * shows the mission and the vision above them.
+     */
+    density?: 'comfortable' | 'compact' | undefined;
+    /**
+     * Holds each row's words to a reading measure while the row itself, and the
+     * rule under it, still spans the list: `normal` is prose's (68ch), `wide`
+     * is a list of statements read one at a time (80ch), a company's policies.
+     * Unset, the words take the row's width, as a feed's do.
+     */
+    measure?: 'normal' | 'wide' | undefined;
 }
 /**
  * The non-tabular list: an activity feed, a set of search results, a
@@ -43,7 +58,7 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
  * means nothing. What a feed does want is alignment, which `template` gives it
  * without the promise.
  */
-export declare function List({ variant, template, className, style, children, ...rest }: ListProps): import("react").JSX.Element;
+export declare function List({ variant, template, density, measure, className, style, children, ...rest }: ListProps): import("react").JSX.Element;
 export declare namespace List {
     var Item: typeof ListItem;
 }

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-NZWX27J7.js';
+export { List, ListItem } from '../chunk-TDQ262TB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-YHLIZFK4.css → List-XY445TKY.css}

@@ -166,6 +166,37 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * COMPACT: a row a small step tall, in the body's size at its normal leading,
+ * so a list of statements that each run to two lines still stands on one
+ * screen. Only the rhythm changes; the number column, the rule between rows
+ * and the inset a card gives them stay where they were.
+ */
+.crewlet-list--compact .crewlet-list__row {
+  min-height: 0;
+  padding-block: var(--spacing-1);
+}
+
+.crewlet-list--compact.crewlet-list--numbered-divided .crewlet-list__row {
+  padding-block: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  text-wrap: pretty;
+}
+
+/*
+ * THE WORDS AT A READING MEASURE (`measure`), while the row and its rule
+ * still span the list. In a card the width of the page a policy otherwise
+ * runs to some 150 characters a line. A maximum, never a width.
+ */
+.crewlet-list--measure-normal .crewlet-list__content {
+  max-inline-size: var(--size-measure);
+}
+
+.crewlet-list--measure-wide .crewlet-list__content {
+  max-inline-size: var(--size-measure-wide);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*

package/dist/ListInput/ListInput.d.ts

@@ -1,4 +1,26 @@
 import { type ReactNode } from 'react';
+/**
+ * The list a form would save: `value` with the new-item box's text appended,
+ * trimmed, when there is any.
+ *
+ * WHY A FORM NEEDS IT. Text typed into the new-item box is not an item until
+ * Enter adds it, and a writer who types a policy and presses the form's Save
+ * expects it saved, not silently dropped. An owner that holds the box's text
+ * (`draft` and `onDraftChange`) counts it as unsaved and saves it with this,
+ * so the rule is written once rather than by each form.
+ */
+export declare function withDraft(value: readonly string[], draft: string | undefined): string[];
+/** What a caller can ask the list to do from outside it. */
+export interface ListInputHandle {
+    /**
+     * Puts the focus in the item at `index` (in `value`'s order), with the caret
+     * at its end: the first item a failed save refused, or the one a conflict
+     * kept. Does nothing for an index the list does not hold.
+     */
+    focusItem: (index: number) => void;
+    /** Puts the focus in the new-item box, when the list is not full. */
+    focusNew: () => void;
+}
 export interface ListInputProps {
     /** The list's name, such as "Responsibilities". It is the group's legend. */
     label: string;
@@ -6,7 +28,26 @@ export interface ListInputProps {
     itemName: string;
     value: readonly string[];
     onChange: (next: string[]) => void;
-    /** Items are paragraphs: Shift+Enter makes a newline. */
+    /**
+     * The text in the new-item box, held by the owner. Left out, the list holds
+     * it itself. Hold it wherever a form saves the list: text typed and not yet
+     * added is part of what the writer means to save, so the owner counts it
+     * as a change and saves it (`withDraft`) rather than dropping it.
+     */
+    draft?: string | undefined;
+    /** Every change to the new-item box's text, an add clearing it included. */
+    onDraftChange?: ((next: string) => void) | undefined;
+    /**
+     * The legend is kept for assistive technology and drawn for nobody, for a
+     * list whose name is already the heading right above it (a card titled
+     * "Standing policies"). The add control stays where it is.
+     */
+    hideLabel?: boolean | undefined;
+    /**
+     * Items are paragraphs: Shift+Enter makes a newline. Without it each item
+     * is ONE line, which still wraps so a long one can be read while it is
+     * edited, and takes no line break however it arrives.
+     */
     multiline?: boolean | undefined;
     /** Where the values come from, or what shape they take. */
     helper?: ReactNode | undefined;
@@ -29,6 +70,45 @@ export interface ListInputProps {
      * focus to its own first control. Named as `TagsInput`'s is.
      */
     focusOnMount?: boolean | undefined;
+    /**
+     * Each row carries a grip it can be DRAGGED by, as well as Move up and Move
+     * down. Off by default. The grip is a pointer's affordance only, hidden from
+     * a screen reader and out of the tab order, because the keyboard already
+     * has the whole of reordering (Alt+Up and Alt+Down from the item, and the
+     * two buttons) and a third control per row that does the same thing is a
+     * row a keyboard has to Tab through for nothing.
+     */
+    reorderByDrag?: boolean | undefined;
+    /**
+     * The most items the list holds. Once it is full the new-item box gives way
+     * to a sentence saying so (`fullMessage`), the add control does nothing,
+     * and every item stays editable, movable and removable.
+     */
+    maxItems?: number | undefined;
+    /**
+     * The most characters one item holds, counted on its TRIMMED text as a
+     * server judging the saved list does, and as code points (see
+     * `countCharacters`). A SOFT limit, as `FormField`'s
+     * `limit` is: an item past it keeps what was typed, draws its count in the
+     * danger ink and is marked invalid; the new-item box refuses to add one,
+     * and shows its count from nine tenths of the way.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Removing an item leaves a row where it was, saying so, with Undo (which
+     * puts it back where it was, with the focus in it) and Dismiss. The focus
+     * goes to Undo. The row goes on the list's next change or on Dismiss, so an
+     * Undo never restores an item into a list that has moved on.
+     */
+    undoRemove?: boolean | undefined;
+    /**
+     * A refusal of one item, said under it and linked to it, which marks it
+     * invalid: a server's word about policy 3, or a rule only the caller knows.
+     * Called for every item on every render, with its index and its value.
+     */
+    itemError?: ((index: number, value: string) => ReactNode) | undefined;
+    /** What the list says in place of the new-item box once it is full. */
+    fullMessage?: ((max: number) => string) | undefined;
     /** The name of the control beside the legend that appends what the box holds. */
     addLabel?: ((itemName: string) => string) | undefined;
     itemLabel?: ((name: string, position: string) => string) | undefined;
@@ -39,6 +119,11 @@ export interface ListInputProps {
     addedMessage?: ((itemName: string, position: string) => string) | undefined;
     removedMessage?: ((itemName: string, position: string) => string) | undefined;
     movedMessage?: ((itemName: string, position: number, count: number) => string) | undefined;
+    /** The row a removed item leaves (`undoRemove`): "Policy 3 removed." */
+    removedNotice?: ((name: string, position: number) => string) | undefined;
+    undoLabel?: string | undefined;
+    dismissLabel?: string | undefined;
+    restoredMessage?: ((itemName: string, position: string) => string) | undefined;
 }
 /**
  * An ordered list of strings, edited in place.
@@ -75,4 +160,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, focusOnMount, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare const ListInput: import("react").ForwardRefExoticComponent<ListInputProps & import("react").RefAttributes<ListInputHandle>>;

package/dist/ListInput/index.d.ts

@@ -1,3 +1,3 @@
 import './ListInput.css';
-export { ListInput } from './ListInput.js';
-export type { ListInputProps } from './ListInput.js';
+export { ListInput, withDraft } from './ListInput.js';
+export type { ListInputHandle, ListInputProps } from './ListInput.js';

package/dist/ListInput/index.js

@@ -1,9 +1,12 @@
-export { ListInput } from '../chunk-NMYGJJJK.js';
-import '../chunk-ZI5G5RS7.js';
+export { ListInput, withDraft } from '../chunk-SQZEVWVC.js';
+import '../chunk-XJ2QEBMM.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';

package/dist/{ListInput-O7LJKOIG.css → ListInput-DP2CSJ22.css}

@@ -13,6 +13,7 @@
 .crewlet-list-input__add {
   display: flex;
   align-items: flex-start;
+  gap: var(--spacing-2);
 }
 
 .crewlet-list-input__add > * {
@@ -69,10 +70,75 @@
   border-block-end-style: none;
 }
 
-.crewlet-list-input__item > .crewlet-input,
-.crewlet-list-input__item > .crewlet-textarea {
+/*
+ * THE FIELD TAKES THE ROW'S WIDTH, and holds the control with whatever is
+ * said under it (its count, its refusal) as one column, so a note under an
+ * item sits under the item's words and not under its number or its buttons.
+ */
+.crewlet-list-input__field {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-list-input__field > .crewlet-input,
+.crewlet-list-input__field > .crewlet-textarea,
+.crewlet-list-input__field > .crewlet-textarea-shell {
+  width: 100%;
+  min-width: 0;
+}
+
+/* What is said under one item: its refusal at the start, its count at the end. */
+.crewlet-list-input__note {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  padding-bottom: var(--spacing-1);
+}
+
+.crewlet-list-input__error {
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-feedback-danger-ink);
+}
+
+/*
+ * THE ROW A REMOVED ITEM LEAVES (`undoRemove`): the item's own place in the
+ * order, at a row's height and on the row's rule, saying what happened in the
+ * quiet ink with Undo beside it, so the list does not close up over the place
+ * an Undo would put it back.
+ */
+.crewlet-list-input__removed {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-block-end-width: 1px;
+  border-block-end-style: solid;
+  border-block-end-color: var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-list-input__removed:last-child {
+  border-block-end-style: none;
+}
+
+.crewlet-list-input__removed-text {
   flex: 1;
   min-width: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+}
+
+/* Where the new-item box was, once the list holds all it may. */
+.crewlet-list-input__full {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
 }
 
 /*
@@ -140,8 +206,58 @@
   opacity: 1;
 }
 
+/*
+ * THE GRIP (`reorderByDrag`) waits with the move pair: the pointer's way to
+ * take hold of a row, shown under the pointer and while the row holds the
+ * focus, in the quiet ink so the row's number stays the first mark on it.
+ */
+.crewlet-list-input__handle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: calc(var(--spacing-1) * -1);
+  color: var(--color-text-tertiary);
+  cursor: grab;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-list-input__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-list-input__item:hover .crewlet-list-input__handle,
+.crewlet-list-input__item:focus-within .crewlet-list-input__handle {
+  opacity: 1;
+}
+
+/* The row being dragged keeps its place as an outline, so the list does not
+   close up under the pointer and the reader can see where it came from. */
+.crewlet-list-input__item[data-reorder='dragging'] {
+  outline-width: 1px;
+  outline-style: dashed;
+  outline-color: var(--color-border-strong);
+  outline-offset: -1px;
+}
+
+.crewlet-list-input__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-list-input__move {
     transition: none;
   }
+
+  .crewlet-list-input__handle {
+    transition: none;
+  }
+}
+
+/* With a hidden legend the add control stands at the end of the box's row. */
+.crewlet-list-input__add-control {
+  display: inline-flex;
+  flex: none;
+  align-self: center;
 }