npm - @lovett/ui - Versions diffs - 0.0.11 → 0.2.0 - Mend

@lovett/ui 0.0.11 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/dist/chunk-RBYWGBQ2.js +2752 -0
package/dist/chunk-RBYWGBQ2.js.map +1 -0
package/dist/index.d.ts +5574 -57
package/dist/index.js +21650 -11206
package/dist/index.js.map +1 -1
package/dist/rich-composer-impl-5NO443A6.js +1859 -0
package/dist/rich-composer-impl-5NO443A6.js.map +1 -0
package/dist/styles.css +1570 -0
package/dist/tokens.css +112 -0
package/package.json +8 -1
package/src/__tests__/avatar.test.tsx +272 -0
package/src/__tests__/bar-chart.test.tsx +809 -0
package/src/__tests__/board.test.tsx +420 -0
package/src/__tests__/chart-math.test.ts +922 -0
package/src/__tests__/chart-series.test.ts +339 -0
package/src/__tests__/code-block.test.tsx +134 -0
package/src/__tests__/display-popover.test.tsx +195 -0
package/src/__tests__/display-store.test.tsx +307 -0
package/src/__tests__/donut-chart.test.tsx +397 -0
package/src/__tests__/dropdown-menu.test.tsx +156 -2
package/src/__tests__/filter-menu.test.tsx +175 -0
package/src/__tests__/gauge-ring.test.tsx +233 -0
package/src/__tests__/line-chart.test.tsx +612 -0
package/src/__tests__/ranked-bars.test.tsx +343 -0
package/src/__tests__/remark-underline.test.ts +194 -0
package/src/__tests__/sortable.test.tsx +394 -0
package/src/__tests__/sparkline.test.tsx +368 -0
package/src/__tests__/stat-layer.test.tsx +271 -0
package/src/__tests__/stat-strip.test.tsx +175 -0
package/src/__tests__/status.test.tsx +293 -0
package/src/__tests__/tabs.test.tsx +303 -0
package/src/__tests__/token-shape.test.ts +132 -2
package/src/avatar.tsx +352 -0
package/src/bar-chart.tsx +1214 -0
package/src/board.tsx +658 -0
package/src/chart-frame.tsx +960 -0
package/src/chart-legend.tsx +304 -0
package/src/chart-tooltip.tsx +267 -0
package/src/code-block.tsx +62 -8
package/src/delta-chip.tsx +263 -0
package/src/detail/__tests__/activity-pane.test.tsx +369 -0
package/src/detail/__tests__/detail-chrome.test.tsx +134 -0
package/src/detail/__tests__/detail-surface.test.tsx +529 -0
package/src/detail/__tests__/field-row.test.tsx +357 -0
package/src/detail/activity-pane.tsx +611 -0
package/src/detail/calendar.tsx +355 -0
package/src/detail/detail-divider.tsx +261 -0
package/src/detail/detail-header.tsx +287 -0
package/src/detail/detail-menu.tsx +254 -0
package/src/detail/detail-surface.tsx +1110 -0
package/src/detail/field-list.tsx +196 -0
package/src/detail/field-row.tsx +1131 -0
package/src/detail/index.ts +58 -0
package/src/detail/segmented-choice.tsx +94 -0
package/src/detail/types.ts +129 -0
package/src/display-popover.tsx +487 -0
package/src/display-store.tsx +301 -0
package/src/donut-chart.tsx +988 -0
package/src/dropdown-menu.tsx +290 -19
package/src/filter-core/EXPORTS.md +85 -0
package/src/filter-core/__tests__/columns.test.ts +159 -0
package/src/filter-core/__tests__/faceting.test.ts +193 -0
package/src/filter-core/__tests__/filter-fns.test.ts +519 -0
package/src/filter-core/__tests__/operators.test.ts +235 -0
package/src/filter-core/__tests__/state.test.ts +268 -0
package/src/filter-core/__tests__/url.test.ts +350 -0
package/src/filter-core/columns.ts +134 -0
package/src/filter-core/date-utils.ts +38 -0
package/src/filter-core/examples/task-filter-columns.ts +121 -0
package/src/filter-core/faceting.ts +120 -0
package/src/filter-core/filter-fns.ts +335 -0
package/src/filter-core/index.ts +105 -0
package/src/filter-core/operators.ts +433 -0
package/src/filter-core/state.ts +280 -0
package/src/filter-core/types.ts +247 -0
package/src/filter-core/url.ts +261 -0
package/src/filter-dropdown.tsx +12 -0
package/src/filter-menu.tsx +649 -0
package/src/floating-drawer.tsx +19 -1
package/src/gauge-ring.tsx +435 -0
package/src/hue.ts +52 -0
package/src/index.ts +303 -0
package/src/kbd.tsx +27 -4
package/src/lib/chart.ts +866 -0
package/src/lib/focus.ts +43 -1
package/src/lib/layer-stack.ts +30 -3
package/src/lib/remark-underline.ts +443 -0
package/src/lib/series.ts +169 -0
package/src/line-chart.tsx +1176 -0
package/src/markdown.tsx +26 -7
package/src/modal.tsx +42 -18
package/src/progress-ledger.tsx +304 -0
package/src/ranked-bars.tsx +386 -0
package/src/segmented-pill.tsx +32 -9
package/src/sortable.tsx +520 -1
package/src/sparkline.tsx +416 -0
package/src/stat-card.tsx +376 -0
package/src/stat-strip.tsx +327 -0
package/src/status.tsx +215 -0
package/src/styles.css +1570 -0
package/src/tabs.tsx +206 -25
package/src/task-card.tsx +610 -0
package/src/thread/__tests__/comment-body-hostile.test.tsx +331 -0
package/src/thread/__tests__/comment-tree.test.ts +151 -0
package/src/thread/__tests__/emoji.test.ts +187 -0
package/src/thread/__tests__/fixtures/thread-fixture.ts +252 -0
package/src/thread/__tests__/link-preview-source.test.ts +120 -0
package/src/thread/__tests__/link-preview.test.tsx +600 -0
package/src/thread/__tests__/markdown-format.test.ts +82 -0
package/src/thread/__tests__/markdown-spec.test.ts +469 -0
package/src/thread/__tests__/relative-time.test.ts +71 -0
package/src/thread/__tests__/rich-composer.test.tsx +799 -0
package/src/thread/__tests__/scroll-caret.test.ts +58 -0
package/src/thread/__tests__/suggestion-list.test.tsx +648 -0
package/src/thread/__tests__/thread-scroll-ownership.test.tsx +88 -0
package/src/thread/__tests__/thread.test.tsx +742 -0
package/src/thread/__tests__/use-attachments.test.tsx +679 -0
package/src/thread/actions.tsx +196 -0
package/src/thread/attachments.tsx +1071 -0
package/src/thread/comment-body.tsx +148 -0
package/src/thread/comment-tree.ts +182 -0
package/src/thread/comment.tsx +967 -0
package/src/thread/composer-footer.tsx +125 -0
package/src/thread/composer.tsx +319 -0
package/src/thread/emoji.ts +283 -0
package/src/thread/index.ts +153 -0
package/src/thread/link-preview.tsx +341 -0
package/src/thread/markdown-format.ts +155 -0
package/src/thread/markdown-spec.ts +754 -0
package/src/thread/rail.tsx +372 -0
package/src/thread/reactions.tsx +415 -0
package/src/thread/relative-time.tsx +94 -0
package/src/thread/rich-composer-impl.tsx +1601 -0
package/src/thread/rich-composer.tsx +195 -0
package/src/thread/scroll-caret.ts +37 -0
package/src/thread/suggestion-list.tsx +182 -0
package/src/thread/thread.tsx +718 -0
package/src/thread/types.ts +232 -0
package/src/thread/use-attachments.ts +598 -0
package/src/thread/use-now.ts +73 -0
package/src/thread/use-thread.ts +316 -0
package/src/tokens.css +112 -0

package/src/detail/field-row.tsx ADDED Viewed

@@ -0,0 +1,1131 @@
+/**
+ * FieldRow — a property that reads as its own value, not as a form.
+ *
+ * `docs/design-briefs/tasks-item-detail-full.md` §4, and the owner's words in
+ * the brief above it:
+ *
+ *   "Don't immediately reach for the dropdowns with the input fields — I think
+ *    we should have some notion type field where it looks native to the field,
+ *    not really an input either."
+ *
+ * So AT REST a row is `[icon] [label] [value]` and the value is plain text on
+ * the surface — no border, no shell, no chevron. Empty is a muted verb phrase
+ * ("Set due date", "Unassigned", "No tags"), never a blank box. The affordance
+ * is a hover tint and a focus ring, which is exactly as much as Notion gives
+ * it. ENGAGED, the value is replaced IN PLACE by the right editor for the
+ * type, and the row is the only thing on screen that changed.
+ *
+ * ## Every value starts on the same column
+ *
+ * The label column is one custom property declared by `<FieldList>`
+ * (`--field-label-inline-size`), so the values line up down the list and no
+ * row can drift by setting its own width.
+ *
+ * ## Commit semantics, and where they differ
+ *
+ * §4: "Escape reverts, Enter commits, blur commits." Exact for the rows that
+ * hold a DRAFT, with the two variations the controls themselves force:
+ *
+ *   Text       all three, verbatim. A MULTILINE text row is the one exception
+ *              worth naming: Enter is a newline there, so the deliberate
+ *              "I am done" gesture is Cmd/Ctrl+Enter. Escape and blur are
+ *              unchanged.
+ *   Tags       all three. The draft is the chip array, so Enter adds a chip
+ *              and leaving the row is what commits the set.
+ *   Date       all three, plus an explicit confirm (§4 asks for one). Escape
+ *              discards the pending day; clicking away commits it.
+ *   People     a pending SET, because toggling is repeated: it commits when
+ *              the picker closes, and Escape discards it.
+ *   Select     commits the moment you pick a row. A single choice closes the
+ *              list as it is made, so there is no pending state left for an
+ *              Escape to revert — the last press before a pick reverts by
+ *              changing nothing.
+ *
+ * ## Focus comes back to the row (added 2026-09-06)
+ *
+ * Every editor here REPLACES the resting value, so committing or reverting
+ * unmounts the element that holds focus. Before this, the file contained no
+ * `.focus()` at all: Enter and Escape — the two most common gestures in the
+ * detail surface — dropped focus to `<body>`, and the next Tab restarted
+ * from the top of the document. `useRestingFocus` gives each row a ref to
+ * its resting `FieldValueButton` and puts focus back the moment the editor
+ * closes, for all five row types.
+ *
+ * It restores ONLY when focus was orphaned (`activeElement` is `<body>`).
+ * That one test is what separates "Enter / Escape / Save" — where nothing
+ * else claimed focus — from "the operator clicked another control", where
+ * blur commits and the thing they clicked must keep focus. It needs no
+ * knowledge of WHY the editor closed, which is exactly as much as the
+ * popover-based rows can tell us.
+ *
+ * Escape inside a plain-text editor calls `stopPropagation`. Without it the
+ * keypress reaches the shared layer stack's document listener and closes the
+ * whole detail — reverting a field would throw the operator out of the item.
+ * The popover-based editors deliberately do NOT stop it: there, Escape SHOULD
+ * reach the layer above and close the picker first.
+ *
+ * ## What the editors are
+ *
+ * The pickers are `Combobox` and the tag editor is `TagChipInput` — the
+ * primitives that already exist, not new ones. The rest state is the part that
+ * had to be built; a searchable multi-select with chips, keyboard handling and
+ * an empty message is a solved problem in this package and forking it to get a
+ * different resting appearance would be the drift CLAUDE.md §2 names.
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ReactNode,
+} from 'react'
+import { Avatar, asAvatarTint } from '../avatar'
+import { Button } from '../button'
+import { Combobox } from '../combobox'
+import { Popover } from '../popover'
+import { TagChipInput } from '../tag-chip-input'
+import { ToggleRow } from '../display-popover'
+import { Input } from '../input'
+import { cn } from '../lib/utils'
+import {
+  MonthCalendar,
+  formatDateDisplay,
+  formatDateValue,
+  parseDateValue,
+  type DateParts,
+} from './calendar'
+import { useFieldRowVisible } from './field-list'
+import type { FieldOption, FieldPerson } from './types'
+/* ------------------------------------------------------------------ */
+/* The row                                                             */
+/* ------------------------------------------------------------------ */
+interface FieldRowContextValue {
+  readonly labelId: string
+}
+const FieldRowCtx = createContext<FieldRowContextValue | null>(null)
+/**
+ * Puts focus back on the resting value when an editor closes.
+ *
+ * `engaged` is whatever makes the editor exist — `editing` for the inline
+ * rows, `open` for the date popover. Attach the returned ref to the row's
+ * `FieldValueButton`.
+ */
+function useRestingFocus(engaged: boolean) {
+  const restingRef = useRef<HTMLButtonElement | null>(null)
+  const wasEngaged = useRef(engaged)
+  useEffect(() => {
+    const justClosed = wasEngaged.current && !engaged
+    wasEngaged.current = engaged
+    if (!justClosed) return
+    // Only reclaim focus that nothing else took. A blur-commit caused by
+    // clicking another control must leave that control focused.
+    const active = document.activeElement
+    if (active !== null && active !== document.body) return
+    restingRef.current?.focus()
+  }, [engaged])
+  return restingRef
+}
+/**
+ * A value that is text rather than a control (a `readOnly` row, or a row
+ * given a plain `value`).
+ *
+ * `role="group"` + `aria-labelledby` is the association: a bare `<span>` is
+ * `role="generic"`, where a name is ignored, so the value used to reach a
+ * screen reader as a loose string with no tie to the label beside it — the
+ * interactive rows were named and the static ones were not.
+ */
+function StaticFieldValue({
+  className,
+  style,
+  title,
+  children,
+}: {
+  className?: string | undefined
+  style?: CSSProperties | undefined
+  title?: string | undefined
+  children: ReactNode
+}) {
+  const row = useContext(FieldRowCtx)
+  return (
+    <span
+      role="group"
+      {...(row === null ? {} : { 'aria-labelledby': row.labelId })}
+      {...(title === undefined ? {} : { title })}
+      className={className}
+      style={style}
+    >
+      {children}
+    </span>
+  )
+}
+/**
+ * The description every INLINE-editing row points at. The five rows share
+ * one affordance but not one behaviour: Date opens a dialog, Select and
+ * People open a listbox, Text and Tags become an editor in place. The
+ * popup rows say so with `aria-haspopup` + `aria-expanded`; the inline rows
+ * say so with this. Referenced-but-hidden text is still used for the
+ * accessible description (accname §4.3), so it costs no layout.
+ */
+function InlineEditHint({ id }: { id: string }) {
+  return (
+    <span id={id} hidden className="hidden">
+      Edits in place. Enter commits, Escape reverts.
+    </span>
+  )
+}
+export interface FieldRowProps {
+  /** A Lucide icon at 14px. Optional, but the rows read better with one. */
+  icon?: ReactNode | undefined
+  label: string
+  /** Whether the row holds a value. Drives the placeholder and the chips. */
+  filled: boolean
+  /** The muted verb phrase for empty. Default "Empty". */
+  placeholder?: string | undefined
+  /** A static value, when the row is not editable. Ignored if `children`. */
+  value?: ReactNode | undefined
+  /** The value slot — a `<FieldValueButton>`, an editor, a popover. */
+  children?: ReactNode | undefined
+  className?: string | undefined
+}
+function FieldRowRoot({
+  icon,
+  label,
+  filled,
+  placeholder = 'Empty',
+  value,
+  children,
+  className,
+}: FieldRowProps) {
+  const labelId = useId()
+  // A filtered-out row is hidden, NOT unmounted: it keeps a half-finished
+  // edit through a keystroke in the field search. See field-list.tsx.
+  const visible = useFieldRowVisible(label, filled)
+  return (
+    <FieldRowCtx.Provider value={{ labelId }}>
+      <div
+        data-field-row=""
+        data-filled={filled ? 'true' : 'false'}
+        hidden={!visible}
+        className={cn('flex items-start', className)}
+      >
+        {/* The row's BOX — gap, label width, stacking — lives in styles.css,
+            not here. An inline style beats a container query, so anything the
+            narrow bands need to change cannot be written on the element. */}
+        <span
+          data-slot="field-label"
+          className="flex shrink-0 items-center"
+          style={{ color: 'rgb(var(--text-tertiary))' }}
+        >
+          {icon === undefined ? null : (
+            <span className="flex shrink-0 items-center">{icon}</span>
+          )}
+          <span id={labelId} className="min-w-0 truncate text-[12.5px] font-medium">
+            {label}
+          </span>
+        </span>
+        <div data-slot="field-value-col" className="min-w-0 flex-1">
+          {children ?? (
+            <span
+              role="group"
+              aria-labelledby={labelId}
+              className="block truncate text-[13px] leading-[1.5]"
+              {...(typeof value === 'string' || !filled
+                ? { title: filled ? String(value) : placeholder }
+                : {})}
+              style={{
+                paddingBlock: 'var(--space-2)',
+                color: filled
+                  ? 'rgb(var(--foreground))'
+                  : 'rgb(var(--text-tertiary))',
+              }}
+            >
+              {filled ? value : placeholder}
+            </span>
+          )}
+        </div>
+      </div>
+    </FieldRowCtx.Provider>
+  )
+}
+/* ------------------------------------------------------------------ */
+/* The resting value                                                   */
+/* ------------------------------------------------------------------ */
+export interface FieldValueButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'children'> {
+  filled: boolean
+  /** Shown, muted, when `filled` is false. */
+  placeholder: string
+  /** The value at rest. */
+  children?: ReactNode | undefined
+}
+/**
+ * The resting value, and the whole affordance: text on the surface, a hover
+ * tint, a focus ring. Named by its row's label plus its own content
+ * ("Due date, Set due date"), so it announces which field it belongs to
+ * without the label being repeated on screen.
+ */
+export const FieldValueButton = forwardRef<HTMLButtonElement, FieldValueButtonProps>(
+  function FieldValueButton(
+    { filled, placeholder, children, className, title, ...rest },
+    ref,
+  ) {
+    const ownId = useId()
+    const row = useContext(FieldRowCtx)
+    // Truncated text has to stay READABLE somewhere. `title` is the cheap,
+    // always-available channel; a caller with a longer value passes its own.
+    const hoverTitle = title ?? (filled ? undefined : placeholder)
+    return (
+      <button
+        ref={ref}
+        type="button"
+        id={ownId}
+        {...(hoverTitle === undefined ? {} : { title: hoverTitle })}
+        data-slot="field-value"
+        data-filled={filled ? 'true' : 'false'}
+        aria-labelledby={row === null ? undefined : `${row.labelId} ${ownId}`}
+        // `overflow-hidden` is the whole fix for the four-character column:
+        // without it the button is a flex line that wraps its own content, so
+        // a narrow pane broke "Aug 22, 2026" across three lines rather than
+        // ending it in an ellipsis. Rows that carry CHIPS opt back into
+        // wrapping with `flex-wrap` — chips are short and wrap cleanly.
+        className={cn(
+          'flex w-full min-w-0 items-center gap-[var(--space-2)] overflow-hidden',
+          'text-left text-[13px] leading-[1.5]',
+          'rounded-[var(--radius-sm)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+          'motion-reduce:transition-none',
+          'hover:bg-[rgb(var(--surface-hover))]',
+          'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+          className,
+        )}
+        style={{
+          paddingInline: 'var(--space-2)',
+          paddingBlock: 'var(--space-1)',
+          minBlockSize: 'var(--ctrl-sm)',
+          color: filled ? 'rgb(var(--foreground))' : 'rgb(var(--text-tertiary))',
+        }}
+        {...rest}
+      >
+        {filled ? (
+          children
+        ) : (
+          // The empty state is a verb phrase — "Set start date", "Add a link" —
+          // and it is the string the screenshot showed wrapping to "Set star
+          // date". It truncates like a value, and the `title` on the button
+          // says it in full.
+          <span className="min-w-0 truncate">{placeholder}</span>
+        )}
+      </button>
+    )
+  },
+)
+/* ------------------------------------------------------------------ */
+/* Chips — the resting shape for the multi-value rows                  */
+/* ------------------------------------------------------------------ */
+function ValueChip({ children }: { children: ReactNode }) {
+  return (
+    <span
+      className="inline-flex items-center gap-[var(--space-1)] text-[12px]"
+      style={{
+        // A flat OPAQUE grey. `--surface-overlay` here would wash out against
+        // whatever the row is sitting on (CLAUDE.md §2).
+        background: 'rgb(var(--muted))',
+        color: 'rgb(var(--foreground))',
+        borderRadius: 'var(--radius-xs)',
+        paddingInline: 'var(--space-2)',
+        paddingBlock: 'var(--space-1)',
+      }}
+    >
+      {children}
+    </span>
+  )
+}
+/* ------------------------------------------------------------------ */
+/* Shared prop surface                                                 */
+/* ------------------------------------------------------------------ */
+interface FieldRowCommonProps {
+  icon?: ReactNode | undefined
+  label: string
+  placeholder?: string | undefined
+  /** Renders the value with no engage affordance at all. */
+  readOnly?: boolean | undefined
+  className?: string | undefined
+}
+/* ------------------------------------------------------------------ */
+/* Text                                                                */
+/* ------------------------------------------------------------------ */
+export interface FieldRowTextProps extends FieldRowCommonProps {
+  value: string
+  /** Fires only when the committed text differs from `value`. */
+  onCommit: (next: string) => void
+  /** A textarea instead of an input. Enter then inserts a newline. */
+  multiline?: boolean | undefined
+  maxLength?: number | undefined
+  /** The editor's placeholder while typing. */
+  editPlaceholder?: string | undefined
+}
+function FieldRowText({
+  icon,
+  label,
+  value,
+  onCommit,
+  multiline = false,
+  maxLength = 2000,
+  placeholder = 'Empty',
+  editPlaceholder,
+  readOnly = false,
+  className,
+}: FieldRowTextProps) {
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(value)
+  const restingRef = useRestingFocus(editing)
+  const hintId = useId()
+  const commit = () => {
+    setEditing(false)
+    if (draft !== value) onCommit(draft)
+  }
+  const revert = () => {
+    setDraft(value)
+    setEditing(false)
+  }
+  const editorClass =
+    'w-full rounded-[var(--radius-sm)] border bg-[rgb(var(--surface-inset))] text-[13px] leading-[1.5] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]'
+  const editorStyle = {
+    borderColor: 'rgb(var(--border))',
+    color: 'rgb(var(--foreground))',
+    paddingInline: 'var(--space-2)',
+    paddingBlock: 'var(--space-1)',
+  }
+  return (
+    <FieldRowRoot
+      icon={icon}
+      label={label}
+      filled={value.trim().length > 0}
+      placeholder={placeholder}
+      className={className}
+    >
+      {editing && !readOnly ? (
+        multiline ? (
+          <textarea
+            aria-label={label}
+            autoFocus
+            rows={4}
+            maxLength={maxLength}
+            value={draft}
+            placeholder={editPlaceholder}
+            onChange={(event) => setDraft(event.target.value)}
+            onBlur={commit}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                // Never let this reach the layer stack: reverting a field
+                // must not close the item.
+                event.stopPropagation()
+                event.preventDefault()
+                revert()
+                return
+              }
+              // Enter is a newline in a multiline field, so the deliberate
+              // "I am done" gesture is the modifier.
+              if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault()
+                commit()
+              }
+            }}
+            className={editorClass}
+            style={editorStyle}
+          />
+        ) : (
+          <input
+            aria-label={label}
+            autoFocus
+            maxLength={maxLength}
+            value={draft}
+            placeholder={editPlaceholder}
+            onChange={(event) => setDraft(event.target.value)}
+            onBlur={commit}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                event.stopPropagation()
+                event.preventDefault()
+                revert()
+                return
+              }
+              if (event.key === 'Enter') {
+                event.preventDefault()
+                commit()
+              }
+            }}
+            className={editorClass}
+            style={editorStyle}
+          />
+        )
+      ) : readOnly ? (
+        <StaticFieldValue
+          className={cn(
+            'block text-[13px] leading-[1.5]',
+            multiline ? 'whitespace-pre-wrap' : 'truncate',
+          )}
+          title={value.trim().length > 0 ? value : placeholder}
+          style={{
+            paddingBlock: 'var(--space-2)',
+            color: value.trim().length > 0
+              ? 'rgb(var(--foreground))'
+              : 'rgb(var(--text-tertiary))',
+          }}
+        >
+          {value.trim().length > 0 ? value : placeholder}
+        </StaticFieldValue>
+      ) : (
+        <>
+          <InlineEditHint id={hintId} />
+          <FieldValueButton
+            ref={restingRef}
+            aria-describedby={hintId}
+            filled={value.trim().length > 0}
+            placeholder={placeholder}
+            {...(value.trim().length > 0 ? { title: value } : {})}
+            onClick={() => {
+              setDraft(value)
+              setEditing(true)
+            }}
+          >
+            {/* A multiline value WRAPS on purpose — it is a paragraph, and the
+                row's floor keeps the column wide enough to read. `line-clamp`
+                keeps it from becoming the whole pane. */}
+            <span
+              className={
+                multiline ? 'line-clamp-3 whitespace-pre-wrap' : 'min-w-0 truncate'
+              }
+            >
+              {value}
+            </span>
+          </FieldValueButton>
+        </>
+      )}
+    </FieldRowRoot>
+  )
+}
+/* ------------------------------------------------------------------ */
+/* Date                                                                */
+/* ------------------------------------------------------------------ */
+export interface FieldRowDateProps extends FieldRowCommonProps {
+  /** `YYYY-MM-DD`, or `YYYY-MM-DDTHH:mm` with a time. Null is empty. */
+  value: string | null
+  onCommit: (next: string | null) => void
+  /** Offer the `Include time` toggle. Default true. */
+  allowTime?: boolean | undefined
+  locale?: string | undefined
+  /** Frozen clock, epoch ms — the calendar's "today". */
+  now?: number | undefined
+  confirmLabel?: string | undefined
+  clearLabel?: string | undefined
+}
+function FieldRowDate({
+  icon,
+  label,
+  value,
+  onCommit,
+  allowTime = true,
+  locale,
+  now,
+  placeholder = 'Set date',
+  confirmLabel = 'Save date',
+  clearLabel = 'Clear',
+  readOnly = false,
+  className,
+}: FieldRowDateProps) {
+  const parsed = parseDateValue(value)
+  const [open, setOpen] = useState(false)
+  const restingRef = useRestingFocus(open)
+  const [pending, setPending] = useState<DateParts | null>(parsed)
+  const [includeTime, setIncludeTime] = useState(parsed !== null && parsed.time !== null)
+  // A REF, not state. Escape is handled here and then travels on to the layer
+  // stack, which closes the popover in the same native dispatch — before any
+  // queued state update has been applied. A flag that has to be read by the
+  // close handler therefore cannot be state.
+  const revertingRef = useRef(false)
+  const commitPending = () => {
+    const next = pending === null ? null : formatDateValue(pending)
+    if (next !== value) onCommit(next)
+  }
+  const openEditor = () => {
+    const seed = parseDateValue(value)
+    setPending(seed)
+    setIncludeTime(seed !== null && seed.time !== null)
+    setOpen(true)
+  }
+  const filled = parsed !== null
+  return (
+    <FieldRowRoot
+      icon={icon}
+      label={label}
+      filled={filled}
+      placeholder={placeholder}
+      className={className}
+    >
+      {readOnly ? (
+        <StaticFieldValue
+          className="block truncate text-[13px] leading-[1.5] tabular-nums"
+          title={filled ? formatDateDisplay(value, locale) : placeholder}
+          style={{
+            paddingBlock: 'var(--space-2)',
+            color: filled ? 'rgb(var(--foreground))' : 'rgb(var(--text-tertiary))',
+          }}
+        >
+          {filled ? formatDateDisplay(value, locale) : placeholder}
+        </StaticFieldValue>
+      ) : (
+        <Popover
+          open={open}
+          onOpenChange={(next) => {
+            // Closing any way other than Escape is a blur, and blur commits.
+            if (!next) {
+              if (revertingRef.current) {
+                revertingRef.current = false
+                setPending(parseDateValue(value))
+              } else {
+                commitPending()
+              }
+            }
+            setOpen(next)
+          }}
+        >
+          <Popover.Trigger asChild>
+            {/* Popover.Trigger `asChild` composes this ref with its own, and
+                supplies `aria-haspopup="dialog"` + `aria-expanded`. */}
+            <FieldValueButton
+              ref={restingRef}
+              filled={filled}
+              placeholder={placeholder}
+              className="tabular-nums"
+              {...(filled ? { title: formatDateDisplay(value, locale) } : {})}
+              onClick={() => {
+                if (!open) openEditor()
+              }}
+            >
+              {/* The row from the owner's screenshot: "Aug 22, 202". A bare
+                  string child is a wrapping flex line; the span is what makes
+                  it an ellipsis. */}
+              <span className="min-w-0 truncate">
+                {formatDateDisplay(value, locale)}
+              </span>
+            </FieldValueButton>
+          </Popover.Trigger>
+          <Popover.Content
+            aria-label={label}
+            align="start"
+            className="w-[17.5rem]"
+            onKeyDown={(event) => {
+              if (event.key !== 'Escape') return
+              // Mark the revert and let the keypress travel on: the popover's
+              // own layer closes it, and the close handler reads this flag
+              // instead of committing.
+              revertingRef.current = true
+            }}
+          >
+            <div className="flex flex-col" style={{ gap: 'var(--space-3)' }}>
+              <MonthCalendar
+                selected={pending}
+                onSelect={(day) =>
+                  setPending((current) => ({
+                    ...day,
+                    time: current?.time ?? (includeTime ? '09:00' : null),
+                  }))
+                }
+                locale={locale}
+                now={now}
+              />
+              {!allowTime ? null : (
+                <div
+                  className="flex flex-col border-t"
+                  style={{
+                    gap: 'var(--space-2)',
+                    borderColor: 'rgb(var(--border))',
+                    paddingBlockStart: 'var(--space-2)',
+                  }}
+                >
+                  <ToggleRow
+                    label="Include time"
+                    checked={includeTime}
+                    onCheckedChange={(next) => {
+                      setIncludeTime(next)
+                      setPending((current) =>
+                        current === null
+                          ? current
+                          : { ...current, time: next ? (current.time ?? '09:00') : null },
+                      )
+                    }}
+                  />
+                  {!includeTime ? null : (
+                    <Input
+                      inputSize="sm"
+                      type="time"
+                      aria-label="Time"
+                      className="tabular-nums"
+                      value={pending?.time ?? '09:00'}
+                      onChange={(event) =>
+                        setPending((current) =>
+                          current === null
+                            ? current
+                            : { ...current, time: event.target.value || null },
+                        )
+                      }
+                    />
+                  )}
+                </div>
+              )}
+              <div
+                className="flex items-center justify-end border-t"
+                style={{
+                  gap: 'var(--space-2)',
+                  borderColor: 'rgb(var(--border))',
+                  paddingBlockStart: 'var(--space-2)',
+                }}
+              >
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => {
+                    setPending(null)
+                    if (value !== null) onCommit(null)
+                    setOpen(false)
+                  }}
+                >
+                  {clearLabel}
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={() => {
+                    commitPending()
+                    setOpen(false)
+                  }}
+                >
+                  {confirmLabel}
+                </Button>
+              </div>
+            </div>
+          </Popover.Content>
+        </Popover>
+      )}
+    </FieldRowRoot>
+  )
+}
+/* ------------------------------------------------------------------ */
+/* Select                                                              */
+/* ------------------------------------------------------------------ */
+export interface FieldRowSelectProps<T extends string = string>
+  extends FieldRowCommonProps {
+  value: T | null
+  options: readonly FieldOption<T>[]
+  onCommit: (next: T | null) => void
+  /** The picker's own placeholder. */
+  searchPlaceholder?: string | undefined
+  emptyMessage?: string | undefined
+}
+function FieldRowSelect<T extends string = string>({
+  icon,
+  label,
+  value,
+  options,
+  onCommit,
+  placeholder = 'Empty',
+  searchPlaceholder = 'Search',
+  emptyMessage = 'No matches',
+  readOnly = false,
+  className,
+}: FieldRowSelectProps<T>) {
+  const [editing, setEditing] = useState(false)
+  const restingRef = useRestingFocus(editing)
+  const selected = options.find((option) => option.value === value) ?? null
+  const filled = selected !== null
+  return (
+    <FieldRowRoot
+      icon={icon}
+      label={label}
+      filled={filled}
+      placeholder={placeholder}
+      className={className}
+    >
+      {editing && !readOnly ? (
+        <Combobox<T>
+          aria-label={label}
+          autoFocus
+          open
+          placeholder={searchPlaceholder}
+          emptyMessage={emptyMessage}
+          size="sm"
+          options={options.map((option) => ({
+            value: option.value,
+            label: option.label,
+            ...(option.icon === undefined ? {} : { icon: option.icon }),
+            ...(option.disabled === undefined ? {} : { disabled: option.disabled }),
+          }))}
+          value={value}
+          onValueChange={(next) => {
+            if (next !== value) onCommit(next)
+          }}
+          onOpenChange={(next) => {
+            if (!next) setEditing(false)
+          }}
+        />
+      ) : readOnly ? (
+        <StaticFieldValue
+          className="flex min-w-0 items-center gap-[var(--space-2)] overflow-hidden text-[13px] leading-[1.5]"
+          title={filled && selected !== null ? selected.label : placeholder}
+          style={{
+            paddingBlock: 'var(--space-2)',
+            color: filled ? 'rgb(var(--foreground))' : 'rgb(var(--text-tertiary))',
+          }}
+        >
+          {filled && selected !== null ? (
+            <>
+              <span className="flex shrink-0 items-center">{selected.icon}</span>
+              <span className="min-w-0 truncate">{selected.label}</span>
+            </>
+          ) : (
+            <span className="min-w-0 truncate">{placeholder}</span>
+          )}
+        </StaticFieldValue>
+      ) : (
+        <FieldValueButton
+          ref={restingRef}
+          // What actually opens: a searchable list, not a dialog and not an
+          // inline editor. Same affordance as the other rows, honest promise.
+          aria-haspopup="listbox"
+          aria-expanded={editing}
+          filled={filled}
+          placeholder={placeholder}
+          {...(selected === null ? {} : { title: selected.label })}
+          onClick={() => setEditing(true)}
+        >
+          {selected === null ? null : (
+            <>
+              <span className="flex shrink-0 items-center">{selected.icon}</span>
+              <span className="min-w-0 truncate">{selected.label}</span>
+            </>
+          )}
+        </FieldValueButton>
+      )}
+    </FieldRowRoot>
+  )
+}
+/* ------------------------------------------------------------------ */
+/* People                                                              */
+/* ------------------------------------------------------------------ */
+export interface FieldRowPeopleProps extends FieldRowCommonProps {
+  value: readonly string[]
+  people: readonly FieldPerson[]
+  onCommit: (next: string[]) => void
+  searchPlaceholder?: string | undefined
+  emptyMessage?: string | undefined
+}
+/** D5's rule: never fabricate a display name — fall back, do not invent. */
+function personLabel(person: FieldPerson): string {
+  return person.name ?? person.id
+}
+/**
+ * One avatar. A component rather than an inline expression because
+ * `exactOptionalPropertyTypes` makes `tint={asAvatarTint(x)}` an error when
+ * the helper can return `undefined` — the tint has to be narrowed once and
+ * spread, and doing that inline twice reads worse than doing it here once.
+ */
+function PersonAvatar({ person }: { person: FieldPerson }) {
+  const tint = asAvatarTint(person.tint)
+  return (
+    <Avatar
+      name={person.name}
+      size="sm"
+      seed={person.id}
+      src={person.avatarUrl ?? null}
+      {...(tint === undefined ? {} : { tint })}
+    />
+  )
+}
+function FieldRowPeople({
+  icon,
+  label,
+  value,
+  people,
+  onCommit,
+  placeholder = 'Unassigned',
+  searchPlaceholder = 'Search people',
+  emptyMessage = 'No people match',
+  readOnly = false,
+  className,
+}: FieldRowPeopleProps) {
+  const [editing, setEditing] = useState(false)
+  const [pending, setPending] = useState<readonly string[]>(value)
+  const revertingRef = useRef(false)
+  const restingRef = useRestingFocus(editing)
+  const byId = new Map(people.map((person) => [person.id, person]))
+  const chosen = value.map((id) => byId.get(id)).filter((person): person is FieldPerson => person !== undefined)
+  const filled = value.length > 0
+  const finish = () => {
+    setEditing(false)
+    if (revertingRef.current) {
+      revertingRef.current = false
+      return
+    }
+    const next = [...pending]
+    const changed =
+      next.length !== value.length || next.some((id, index) => id !== value[index])
+    if (changed) onCommit(next)
+  }
+  return (
+    <FieldRowRoot
+      icon={icon}
+      label={label}
+      filled={filled}
+      placeholder={placeholder}
+      className={className}
+    >
+      {editing && !readOnly ? (
+        <div
+          onKeyDown={(event) => {
+            // Escape discards the pending selection, then travels on so the
+            // combobox's own layer closes it.
+            if (event.key === 'Escape') revertingRef.current = true
+          }}
+        >
+          <Combobox
+            multiple
+            aria-label={label}
+            autoFocus
+            open
+            size="sm"
+            placeholder={searchPlaceholder}
+            emptyMessage={emptyMessage}
+            options={people.map((person) => ({
+              value: person.id,
+              label: personLabel(person),
+              ...(person.hint === undefined ? {} : { description: person.hint }),
+              icon: <PersonAvatar person={person} />,
+            }))}
+            value={pending}
+            onValueChange={setPending}
+            onOpenChange={(next) => {
+              if (!next) finish()
+            }}
+          />
+        </div>
+      ) : readOnly ? (
+        <StaticFieldValue
+          className="block truncate text-[13px] leading-[1.5]"
+          title={filled ? chosen.map(personLabel).join(', ') : placeholder}
+          style={{
+            paddingBlock: 'var(--space-2)',
+            color: filled ? 'rgb(var(--foreground))' : 'rgb(var(--text-tertiary))',
+          }}
+        >
+          {filled ? chosen.map(personLabel).join(', ') : placeholder}
+        </StaticFieldValue>
+      ) : (
+        <FieldValueButton
+          ref={restingRef}
+          aria-haspopup="listbox"
+          aria-expanded={editing}
+          filled={filled}
+          placeholder={placeholder}
+          className="flex-wrap"
+          onClick={() => {
+            setPending(value)
+            setEditing(true)
+          }}
+        >
+          {chosen.map((person) => (
+            <span
+              key={person.id}
+              className="inline-flex items-center gap-[var(--space-1)]"
+            >
+              <PersonAvatar person={person} />
+              <span className="truncate">{personLabel(person)}</span>
+            </span>
+          ))}
+        </FieldValueButton>
+      )}
+    </FieldRowRoot>
+  )
+}
+/* ------------------------------------------------------------------ */
+/* Tags                                                                */
+/* ------------------------------------------------------------------ */
+export interface FieldRowTagsProps extends FieldRowCommonProps {
+  value: readonly string[]
+  onCommit: (next: string[]) => void
+  suggestions?: readonly string[] | undefined
+  max?: number | undefined
+  maxLength?: number | undefined
+  editPlaceholder?: string | undefined
+}
+function FieldRowTags({
+  icon,
+  label,
+  value,
+  onCommit,
+  suggestions,
+  max,
+  maxLength,
+  placeholder = 'No tags',
+  editPlaceholder = 'Add a tag',
+  readOnly = false,
+  className,
+}: FieldRowTagsProps) {
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState<string[]>([...value])
+  const restingRef = useRestingFocus(editing)
+  const hintId = useId()
+  const editorRef = useRef<HTMLDivElement | null>(null)
+  const filled = value.length > 0
+  // The other four editors autofocus themselves; TagChipInput has no such
+  // prop, so engaging this row by keyboard used to unmount the button and
+  // leave focus on <body> — with nothing to press Escape on.
+  useEffect(() => {
+    if (!editing) return
+    editorRef.current?.querySelector('input')?.focus()
+  }, [editing])
+  const commit = () => {
+    setEditing(false)
+    const changed =
+      draft.length !== value.length || draft.some((tag, index) => tag !== value[index])
+    if (changed) onCommit(draft)
+  }
+  return (
+    <FieldRowRoot
+      icon={icon}
+      label={label}
+      filled={filled}
+      placeholder={placeholder}
+      className={className}
+    >
+      {editing && !readOnly ? (
+        <div
+          ref={editorRef}
+          onKeyDown={(event) => {
+            if (event.key !== 'Escape') return
+            event.stopPropagation()
+            event.preventDefault()
+            setDraft([...value])
+            setEditing(false)
+          }}
+          onBlur={(event) => {
+            // A click on the chip editor's own remove button is not a blur.
+            if (event.currentTarget.contains(event.relatedTarget)) return
+            commit()
+          }}
+        >
+          <TagChipInput
+            value={draft}
+            onChange={setDraft}
+            placeholder={editPlaceholder}
+            {...(suggestions === undefined ? {} : { suggestions: [...suggestions] })}
+            {...(max === undefined ? {} : { max })}
+            {...(maxLength === undefined ? {} : { maxLength })}
+          />
+        </div>
+      ) : readOnly ? (
+        <StaticFieldValue
+          className="flex flex-wrap items-center gap-[var(--space-1)] text-[13px] leading-[1.5]"
+          style={{
+            paddingBlock: 'var(--space-2)',
+            color: filled ? 'rgb(var(--foreground))' : 'rgb(var(--text-tertiary))',
+          }}
+        >
+          {filled ? value.map((tag) => <ValueChip key={tag}>{tag}</ValueChip>) : placeholder}
+        </StaticFieldValue>
+      ) : (
+        <>
+          <InlineEditHint id={hintId} />
+          <FieldValueButton
+            ref={restingRef}
+            aria-describedby={hintId}
+            filled={filled}
+            placeholder={placeholder}
+            className="flex-wrap"
+            onClick={() => {
+              setDraft([...value])
+              setEditing(true)
+            }}
+          >
+            {value.map((tag) => (
+              <ValueChip key={tag}>{tag}</ValueChip>
+            ))}
+          </FieldValueButton>
+        </>
+      )}
+    </FieldRowRoot>
+  )
+}
+/* ------------------------------------------------------------------ */
+/**
+ * The family. `Object.assign` rather than property assignment on a function
+ * declaration — the same shape `DisplayPopover` and `Popover` use, and the
+ * one that keeps `Select`'s type parameter intact.
+ */
+export const FieldRow = Object.assign(FieldRowRoot, {
+  Text: FieldRowText,
+  Date: FieldRowDate,
+  Select: FieldRowSelect,
+  People: FieldRowPeople,
+  Tags: FieldRowTags,
+})