@crewlethq/ui 0.31.1 → 0.33.0

package/dist/{CommandPalette-HBTNKHZQ.css → CommandPalette-7CFGVBND.css}

@@ -147,7 +147,11 @@
   background: var(--color-surface-background);
 }
 
+/* THE LEGEND SPANS THE BAND: a palette's foot has no actions, so its start
+   slot takes the whole width, and a consumer that ends the legend with what
+   the search is doing can push that to the band's end. */
 .crewlet-palette .crewlet-modal__footer-start {
+  flex: 1 1 auto;
   gap: var(--spacing-4);
   font-size: var(--font-size-xs);
 }

package/dist/CommentThread/index.js

@@ -1,13 +1,13 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-GR55WT4R.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IYO2N5ZH.js';
 import '../chunk-7DZDSSJS.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-M3LUNN7F.js';
-import '../chunk-4KP4RC3O.js';
+import '../chunk-TYKQ33CL.js';
+import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Container/index.js

@@ -1,2 +1,2 @@
-export { Container } from '../chunk-QVE4GJAT.js';
+export { Container } from '../chunk-HJO4WCH6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Container-3TSKMGNI.css → Container-34BAKG7B.css}

@@ -45,8 +45,10 @@
   max-width: none;
 }
 
+/* A PHONE'S GUTTER IS THE SHELL'S, 16px, the top bar's own inset: a narrower
+   one stood a page's content left of the title over it. */
 @media (max-width: 480px) {
   .crewlet-container {
-    padding-inline: var(--spacing-3);
+    padding-inline: var(--spacing-4);
   }
 }

package/dist/{DashboardCover-RMINBODB.css → DashboardCover-KYGYMRKW.css}

@@ -11,23 +11,27 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * THE FIGURES ARE ROWS, the label at the start and the figure (or the dataset
+ * it cites) at the end. Three tiles side by side gave each label a third of a
+ * card's width, so every one was cut to its first word ("Open w…" over "Open
+ * w…"); a row gives the label the card's width, which is what says what the
+ * board measures.
+ */
 .crewlet-dashboard-cover--stats {
   display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
-  align-items: center;
+  grid-auto-rows: minmax(0, 1fr);
   gap: var(--spacing-2);
 }
 
 .crewlet-dashboard-cover__stat {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--spacing-1);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
   min-width: 0;
-  height: 100%;
-  max-height: 100%;
-  padding: var(--spacing-2) var(--spacing-3);
+  min-height: 0;
+  padding: 0 var(--spacing-3);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
   background: var(--color-surface-elevated);
@@ -42,6 +46,33 @@
   white-space: nowrap;
 }
 
+.crewlet-dashboard-cover__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-dashboard-cover__value {
+  flex: none;
+  max-width: 50%;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-dashboard-cover__source {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .crewlet-dashboard-cover__label {
   color: var(--color-text-secondary);
 }
@@ -58,6 +89,8 @@
 }
 
 .crewlet-dashboard-cover__source {
+  flex: 0 1 auto;
+  max-width: 50%;
   color: var(--color-text-tertiary);
 }
 

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-EBJREOKS.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-UXXJDIYE.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-I3KKZ2O3.js';
-import '../chunk-7T42VQQT.js';
+import '../chunk-XEGZHHRH.js';
+import '../chunk-CPEPST4S.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-2HIOJ4YZ.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{DataTable-WZK3V62B.css → DataTable-NL2YWAIA.css}

@@ -547,6 +547,9 @@ body.crewlet-data-table-resizing {
    */
   --crewlet-data-table-cell-pad-y: calc((var(--spacing-2) + var(--spacing-3)) / 2);
   --crewlet-data-table-cell-pad-x: var(--spacing-3);
+  /* The row's height, the list row token unless a host's list keeps another
+     rhythm (and rebinds the cell's vertical inset to fit inside it). */
+  --crewlet-data-table-row-height: var(--size-row-md);
   /* The header's own vertical inset. It equals the cell's at this density and
      parts from it at comfortable, which is where 0.2.0 drew the two apart. */
   --crewlet-data-table-head-pad-y: var(--crewlet-data-table-cell-pad-y);
@@ -964,7 +967,7 @@ body.crewlet-data-table-resizing {
 .crewlet-data-table--compact .crewlet-data-table__table td {
   /* The row token, so a compact table lines up with every other list in a
      product and a cell holding one word is as tall as a cell holding a chip. */
-  height: var(--size-row-md);
+  height: var(--crewlet-data-table-row-height);
 }
 
 /*

package/dist/DataView/index.js

@@ -1,15 +1,15 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-RODMM35O.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-7Q7WDXHG.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-Y5NQ2LMS.js';
-import '../chunk-EBJREOKS.js';
+import '../chunk-BY4N65PM.js';
+import '../chunk-UXXJDIYE.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-I3KKZ2O3.js';
+import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-BWRGFKJP.js';
+import '../chunk-PGRPNDWM.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-7T42VQQT.js';
+import '../chunk-CPEPST4S.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-3CZ7XAVY.js';
@@ -17,8 +17,8 @@ import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-2HIOJ4YZ.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DateTimePicker/index.js

@@ -1,7 +1,7 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-Y5NQ2LMS.js';
-import '../chunk-BWRGFKJP.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-BY4N65PM.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DocTabsEditor/DocTabsEditor.d.ts

@@ -6,21 +6,20 @@ export interface DocTabsEditorItem {
     title: string;
 }
 export interface DocTabsEditorLabels extends ReorderLabels {
-    /** The name of a tab's title field, by its position (from 1). */
+    /** The list's visible heading. */
+    heading: string;
+    /** The name of a tab's title field while it is renamed, by its position (from 1). */
     titleField: (position: number) => string;
-    /** The name of the control that opens a tab's text; it is pressed while that text is open. */
-    editText: (title: string) => string;
-    remove: (title: string) => string;
-    /** Why the last tab cannot be removed. */
-    lastTab: string;
-    moveUp: (title: string) => string;
-    moveDown: (title: string) => string;
-    atTop: (title: string) => string;
-    atBottom: (title: string) => string;
-    newTitle: string;
+    /** The name of a tab's menu of actions. */
+    actions: (title: string) => string;
+    rename: string;
+    moveUp: string;
+    moveDown: string;
+    remove: string;
+    /** The name of the control that starts a new tab. */
     add: string;
-    /** Why Add waits for a title. */
-    addNeedsTitle: string;
+    /** The name and placeholder of the new tab's title field. */
+    newTitle: string;
     untitled: string;
 }
 export declare const DOC_TABS_EDITOR_LABELS: DocTabsEditorLabels;
@@ -45,16 +44,30 @@ export interface DocTabsEditorProps {
     className?: string | undefined;
 }
 /**
- * The tabs of a document an editor arranges: each tab's title edited in place,
- * its text opened beside the list, moved by its handle, the arrow keys or the
- * move buttons, and removed; and a tab added after the one open.
+ * The tabs of a document an editor arranges, drawn as the list a reader's
+ * outline is: each tab a row that opens its text beside the list, the open
+ * one marked, and what else a tab can do (rename, move, remove) in the row's
+ * own menu, so a list of six tabs reads as six titles rather than thirty
+ * controls.
+ *
+ * A TITLE IS RENAMED IN PLACE. Rename (or a double press on the title) turns
+ * the row's title into its field, where Enter or leaving the field keeps the
+ * title and Escape puts back the one it had. A title the host refuses
+ * (`titleProblem`) is said under it, while it is renamed and after, since the
+ * host will not save it either.
+ *
+ * A NEW TAB IS NAMED BEFORE IT EXISTS. Add opens a field under the open tab,
+ * where the new tab will land; Enter, or leaving a field that holds a title,
+ * reports the title, and Escape or an empty field adds nothing, so the host
+ * never names a tab's file after a placeholder.
  *
  * THE HOST OWNS THE TABS. Every change is reported and nothing is kept here
- * but the new tab's title as it is typed, so a draft the host merges or
- * resets is what the list shows. A title is held to the host's rules at its
- * field (`titleProblem`), said beside it rather than after a save.
+ * but which row is being renamed and the new tab's title as it is typed, so a
+ * draft the host merges or resets is what the list shows. The handle moves a
+ * tab by pointer or by the arrow keys, and the menu moves it a step for
+ * anyone who reaches neither.
  *
- * THE LAST TAB IS NOT REMOVED: a document keeps one, so its Remove says why
- * rather than disappearing.
+ * THE LAST TAB IS NOT REMOVED: a document keeps one, so its Remove is shown
+ * unavailable rather than missing.
  */
 export declare function DocTabsEditor({ label, items, selected, onSelect, onRename, onReorder, onRemove, onAdd, titleProblem, addBlocked, disabled, labels: overrides, className, }: DocTabsEditorProps): import("react").JSX.Element;

package/dist/DocTabsEditor/index.js

@@ -1,7 +1,10 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-UZ7ZUSLH.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-YZFLH463.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DocTabsEditor-4M452LNS.css

@@ -0,0 +1,189 @@
+/*
+ * DocTabsEditor: a document's tabs as the rows of a list, set in the register
+ * of the outline a reader sees in the same column. A row is its title, the
+ * open one filled as an inbox's open row is; its handle and its menu wait at
+ * its edges and show under the pointer or the keyboard, so six tabs read as
+ * six titles.
+ */
+
+.crewlet-doc-tabs-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/* The list's name in the outline's register, with Add at its end. */
+.crewlet-doc-tabs-editor__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-height: var(--size-control-sm);
+}
+
+.crewlet-doc-tabs-editor__heading {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-doc-tabs-editor__list {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * A ROW IS THREE TRACKS that every row shares: the handle, the title and the
+ * menu. The title's column starts at one edge all the way down, and a title
+ * wraps rather than being cut, since a tab cut to fit is one an editor
+ * cannot tell from its neighbour.
+ */
+.crewlet-doc-tabs-editor__item {
+  display: grid;
+  grid-template-columns: var(--size-control-sm) minmax(0, 1fr) var(--size-control-sm);
+  align-items: start;
+  gap: calc(var(--spacing-1) / 2);
+  padding: calc(var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-doc-tabs-editor__item:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-doc-tabs-editor__item.is-open,
+.crewlet-doc-tabs-editor__item.is-open:hover {
+  background: var(--color-surface-pressed);
+}
+
+/* A row being renamed is its field: the fill would sit around a second box. */
+.crewlet-doc-tabs-editor__item.is-renaming,
+.crewlet-doc-tabs-editor__item.is-renaming:hover {
+  background: none;
+}
+
+/* The new tab's field stands where its title will, in the title's track. */
+.crewlet-doc-tabs-editor__item--new > .crewlet-doc-tabs-editor__field {
+  grid-column: 2;
+}
+
+.crewlet-doc-tabs-editor__item[data-reorder='dragging'] {
+  outline: 1px dashed var(--color-border-strong);
+  outline-offset: -1px;
+  background: transparent;
+}
+
+.crewlet-doc-tabs-editor__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
+.crewlet-doc-tabs-editor__handle {
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-doc-tabs-editor__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-doc-tabs-editor__field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
+  min-width: 0;
+}
+
+/*
+ * The title, which opens the tab: the row's own words, never a second box.
+ * Its words start where the small field's do (its side padding and its 1px
+ * border), so a title does not jump sideways when Rename turns it into one.
+ */
+.crewlet-doc-tabs-editor__open {
+  display: block;
+  width: 100%;
+  min-height: var(--size-control-sm);
+  margin: 0;
+  padding: calc((var(--size-control-sm) - var(--font-size-compact) * var(--font-line-height-snug)) / 2)
+    calc(var(--spacing-2) + 1px);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-snug);
+  text-align: start;
+  color: var(--color-text-secondary);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.crewlet-doc-tabs-editor__item:hover .crewlet-doc-tabs-editor__open,
+.crewlet-doc-tabs-editor__open[aria-current='true'] {
+  color: var(--color-text-primary);
+}
+
+.crewlet-doc-tabs-editor__open:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-doc-tabs-editor__open:disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-doc-tabs-editor__problem {
+  padding-inline: calc(var(--spacing-2) + 1px);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+/*
+ * THE EDGES WAIT FOR THE POINTER. The handle and the menu are drawn on the
+ * row under the pointer, on the open row, on a row the keyboard is inside and
+ * on a row whose menu is open; elsewhere they keep their place unseen, so
+ * nothing moves when they appear. A device with no hover shows them always,
+ * since there is no pointer to wait for.
+ */
+@media (hover: hover) {
+  .crewlet-doc-tabs-editor__handle,
+  .crewlet-doc-tabs-editor__actions {
+    opacity: 0;
+    transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+  }
+
+  .crewlet-doc-tabs-editor__item:is(:hover, :focus-within, .is-open, :has([aria-expanded='true']))
+    :is(.crewlet-doc-tabs-editor__handle, .crewlet-doc-tabs-editor__actions) {
+    opacity: 1;
+  }
+}
+
+.crewlet-doc-tabs-editor__actions {
+  display: inline-flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-doc-tabs-editor__item,
+  .crewlet-doc-tabs-editor__handle,
+  .crewlet-doc-tabs-editor__actions {
+    transition: none;
+  }
+}
+
+/* FORCED COLORS drop the open row's fill, so it is outlined instead. */
+@media (forced-colors: active) {
+  .crewlet-doc-tabs-editor__item.is-open {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+}

package/dist/Document/Document.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 export type DocumentSize = 
 /**
  * A page read on its own: the small step at the relaxed leading, sections at
@@ -61,3 +61,20 @@ export interface DocumentTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  * a size of its own beside the body it heads.
  */
 export declare function DocumentTitle({ as: Tag, className, children, ...rest }: DocumentTitleProps): import("react").JSX.Element;
+export interface DocumentTitleFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Marks the title as refused. Sets `aria-invalid`, which is what a screen reader reads. */
+    error?: boolean | undefined;
+}
+/**
+ * A title being written: the field a new page's title is typed into, set as
+ * `DocumentTitle` sets it once the page exists, so what a writer types is what
+ * a reader will see above the body rather than a form's field above a page.
+ *
+ * IT DRAWS NO BOX. The words are the field, as the body under it is; a line
+ * along its foot marks it under the pointer, in focus (the ring's colour,
+ * since the caret alone is no indicator a keyboard can rely on) and in the
+ * danger ink when the title is refused. The name is the caller's
+ * (`aria-label`, or a label it points at), because a title field's visible
+ * cue is its placeholder, and a placeholder is not a name.
+ */
+export declare function DocumentTitleField({ error, className, ...rest }: DocumentTitleFieldProps): import("react").JSX.Element;

package/dist/Document/index.d.ts

@@ -1,3 +1,3 @@
 import './Document.css';
-export { Document, DocumentTitle } from './Document.js';
-export type { DocumentElement, DocumentProps, DocumentSize, DocumentTitleProps } from './Document.js';
+export { Document, DocumentTitle, DocumentTitleField } from './Document.js';
+export type { DocumentElement, DocumentProps, DocumentSize, DocumentTitleFieldProps, DocumentTitleProps } from './Document.js';

package/dist/Document/index.js

@@ -1,2 +1,2 @@
-export { Document, DocumentTitle } from '../chunk-M3LUNN7F.js';
+export { Document, DocumentTitle, DocumentTitleField } from '../chunk-TYKQ33CL.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Document-G3YTZIUL.css → Document-JUGCSQ4L.css}

@@ -72,10 +72,25 @@
   font-size: var(--font-size-lg);
 }
 
-.crewlet-document :where(h4, h5, h6) {
+/*
+ * EVERY LEVEL A STEP OF ITS OWN. A renderer draws a body from `h2` down, so a
+ * page's fourth and fifth levels land on `h5` and `h6`; set at one size with
+ * `h4`, three levels of a document read as one. The two deepest take the
+ * body's own step, and the last is told apart by its ink, as a run-in
+ * heading is in print.
+ */
+.crewlet-document h4 {
   font-size: var(--font-size-md);
 }
 
+.crewlet-document :where(h5, h6) {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-document h6 {
+  color: var(--color-text-secondary);
+}
+
 .crewlet-document--sm h1 {
   font-size: var(--font-size-lg);
 }
@@ -118,6 +133,26 @@
   margin-block-start: var(--spacing-1);
 }
 
+/*
+ * THE RHYTHM HOLDS INSIDE A BLOCK THAT HOLDS BLOCKS. The sibling rule above
+ * reaches only the body's own children, so a quote's second paragraph and a
+ * list item's second paragraph ran into the first with no gap at all. A quote
+ * is prose and takes the body's gap; a list item is one point and takes the
+ * smaller step, so its paragraphs still read as one item. A task item's
+ * blocks sit in the column beside its box, which is the same item.
+ */
+.crewlet-document :where(blockquote, [data-callout-body]) > * + * {
+  margin-block-start: var(--crewlet-document-gap);
+}
+
+.crewlet-document :where(li, li > input[type='checkbox'] + *) > :not(input, ul, ol) + :not(ul, ol) {
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-document li > input[type='checkbox'] + * > :where(ul, ol) {
+  margin-block-start: var(--spacing-1);
+}
+
 .crewlet-document li::marker {
   color: var(--color-text-tertiary);
 }
@@ -287,6 +322,48 @@
   overflow-wrap: anywhere;
 }
 
+/*
+ * The title while it is written (`DocumentTitleField`): the title's own type
+ * on no surface of its own, with a line along its foot that answers the
+ * pointer, the focus and a refusal. The line is a border rather than a
+ * shadow, because forced colours keep a border and drop a shadow.
+ */
+.crewlet-document-title-field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: 0 0 var(--spacing-1);
+  border: 0;
+  border-block-end: 2px solid transparent;
+  border-radius: 0;
+  background: none;
+  outline: none;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-document-title-field::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 1;
+}
+
+.crewlet-document-title-field:hover {
+  border-block-end-color: var(--color-border-default);
+}
+
+.crewlet-document-title-field:focus-visible {
+  border-block-end-color: var(--color-focus);
+}
+
+.crewlet-document-title-field[aria-invalid='true'] {
+  border-block-end-color: var(--color-feedback-danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-document-title-field {
+    transition: none;
+  }
+}
+
 /*
  * A TABLE CELL'S ALIGNMENT, read off `data-align` as well as off a style: an
  * editor that may not write a style attribute under a strict policy marks a
@@ -353,7 +430,3 @@
 .crewlet-document [data-callout-body] {
   color: var(--color-text-primary);
 }
-
-.crewlet-document [data-callout-body] > * + * {
-  margin-block-start: var(--crewlet-document-gap);
-}

package/dist/EditingStatus/index.js

@@ -1,2 +1,2 @@
-export { EditingStatus } from '../chunk-FPS3JIPQ.js';
+export { EditingStatus } from '../chunk-TC7DJTXI.js';
 import '../chunk-ODEQTPFM.js';