@crewlethq/ui 0.19.0 → 0.21.0

package/README.md

@@ -43,9 +43,10 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
 | Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Document` and `DocumentTitle`, `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
 | Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor` |
-| Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile` |
+| Data display | `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
-| Feedback and overlays | `Callout`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
+| Feedback and overlays | `Callout`, `ConflictNote`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
+| Documents and review | `DiffView` and `DiffSummary` with the line diff they draw (`diffLines`, `diffStat`, `collapseDiff`, `firstChangedLines`, `splitLines`, `MAX_DIFF_LINES`, with no React in it), `DiffList`, `VersionCompare`, `CommentThread` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `safeFilename`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
@@ -55,7 +56,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
 | Artifacts | `SandboxedFrame`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `AccessDeniedCard`, and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it) |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
-| Presence | `PresenceStack`, `PresenceRing` and `presenceHueClass`, `CursorFlag`, `LiveCursor`, `FollowBanner`, and `PresenceModel` (the roster order, one entry per person, the session hues, with no React in it) |
+| Presence | `PresenceStack`, `PresenceRing` and `presenceHueClass`, `CursorFlag`, `LiveCursor`, `FollowBanner`, `PeopleRail` (with `peopleRailKey`), and `PresenceModel` (the roster order, one entry per person, the session hues, with no React in it) |
 
 Storybook stories live under `apps/storybook/src/stories`.
 
@@ -202,6 +203,34 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.21.0
+
+**`AppShell.AccountRow` takes `menu`** (`AccountRowMenu`: `label`, `header`, `items`): pressing who you are opens the reader's own menu instead of linking anywhere, which is where a reader looks for their account and for signing out. The row becomes the menu button, ending in the up-and-down chevron a menu's trigger draws, keeps the account page's current-row lift (`data-current`), and the menu's header holds the facts the row does not already say, such as the reader's access. Given, `menu` takes the place of `href`.
+
+**`Menu` takes `header` and `renderTrigger`.** `header` is a line of facts above the items: never an item, so the arrows never stop on it, and the menu's description, so a screen reader hears it when the menu opens. `renderTrigger` makes the caller's own element the trigger, given the props it spreads (`MenuTriggerProps`), keeping every rule of the menu's button, focus coming back to it included.
+
+**`@crewlethq/icons` vendors `log-out` and `log-in`**, for signing out and in from that menu.
+
+What to change: nothing. Everything is new.
+
+## Changes in 0.20.0
+
+0.20.0 adds the review surfaces the engine dashboard drew for itself: a line diff, two versions compared, a document's comment thread, the note a lost edit race leaves, the People rail beside a shared document, and the read-only cells its tables share. Each takes its data and its callbacks as props, so nothing in it fetches or knows a route.
+
+**`DiffView`** draws a line diff as the document it is: monospace, numbered on both sides, a row that says how many unchanged lines a gap stands for, and on every changed line a tint, a mark and the word "Added" or "Removed" read in the mark's place. **`DiffSummary`** is the line above it, `+3 −1 against version 4`, read as a sentence. The diff itself is pure and exported with them: `diffLines` (the longest common subsequence over lines, a removal above its addition, a whole replacement past `MAX_DIFF_LINES`), `diffStat`, `collapseDiff` (context either side of each change, the gap counted), `firstChangedLines` (a preview with the count of what it left out) and `splitLines`.
+
+**`VersionCompare`** is two versions of a document compared: the changes lens draws a `DiffView` of two texts with its summary, or a comparison the host draws in `changes` (a `DiffList` of files, say), and the versions lens draws the two side by side, older first, stacking where the panes are narrow. Two identical texts are said in words, a lens with nothing to draw is not offered, and `labels` renames the lenses ("Full text").
+
+**`CommentThread`** is a document's remarks in order, each with its author (`Principal`), when it was written and edited, and whom it answers, then a `Composer` to add one. Reply moves focus to the field, which names whom it answers. The post is one at a time and the draft is cleared only once `onSubmit` says it landed; a standing `disabledReason` is said in the open. Without `onSubmit` the thread is read-only.
+
+**`ConflictNote`** is the refusal of a lost race, an alert that names whoever changed the record (`changedBy`) once the host knows, the server's sentence until then, with Dismiss and any controls of the host's.
+
+**`PeopleRail`** lists everybody present in words, one entry a seat, in the order `PresenceStack` draws them, each with what they are doing and where, Follow as a toggle that names whom it follows, and a slot for the host's own controls ("Open turn"). **`peopleRailKey`** is the key `following` is compared with.
+
+**The read-only table cells** draw one kind of value the same in every table: `TableKeyCell` (an identifier on one line, its whole value on the title, optionally a link), `TableNumberCell` (tabular, the host's formatter, absent never drawn as zero), `TableDateCell` (relative, exact on hover), `TableEntityCell` (a badge and a name, optionally a link), `TableStatusCell` (the caller's mark with its word and tone), `TableTagsCell` (capped, the rest counted in words) and `TableTextCell` (a column's decorative icon or a row's own mark). They are prefixed `Table` because `SheetGrid`'s editable cells own the bare names.
+
+What to change: nothing. Every addition is new.
+
 ## Changes in 0.19.0
 
 0.19.0 adds what a page needs to be arranged by its reader: blocks they move, resize and group on a board, the layout pieces they add between them, and the tray those come from. The engine console's Home is built from it.

package/dist/AppShell/AccountRow.d.ts

@@ -1,4 +1,14 @@
 import type { ReactNode } from 'react';
+import { type MenuEntry } from '../Menu/index.js';
+/** The menu the row opens (`AccountRowProps.menu`). */
+export interface AccountRowMenu {
+    /** The menu's name. Defaults to "Your account". */
+    label?: string | undefined;
+    /** Facts above the items that the row does not already say: the reader's access. */
+    header?: ReactNode;
+    /** The reader's own actions: their account, signing out. */
+    items: readonly MenuEntry[];
+}
 export interface AccountRowProps {
     /** The reader's badge, drawn decorative: the name beside it says who it is. */
     avatar: ReactNode;
@@ -6,8 +16,14 @@ export interface AccountRowProps {
     name: ReactNode;
     /** The line under the name: a login, a seat. Left out where it would repeat the name. */
     detail?: ReactNode;
-    /** The reader's account page. Without it the row states who is signed in and goes nowhere. */
+    /** The reader's account page. Without it (or `menu`) the row states who is signed in and goes nowhere. */
     href?: string | undefined;
+    /**
+     * The reader's own menu, which the row OPENS rather than linking anywhere:
+     * their account among its items, and signing out. Given, it takes the place
+     * of `href`.
+     */
+    menu?: AccountRowMenu | undefined;
     /** Whether the reader is on that page, which marks the row as the rail marks its current row. */
     current?: boolean | undefined;
     /** What the link opens, as its tooltip. */
@@ -36,5 +52,11 @@ export interface AccountRowProps {
  *
  * The controls are siblings of the link, never inside it, so each keeps its
  * own name and the link's name stays the reader's.
+ *
+ * OR THE ROW OPENS THE READER'S MENU (`menu`): pressing who you are is where a
+ * reader looks for their account and for signing out, so the row is the menu
+ * button, ending in the up-and-down chevron a menu's trigger draws, and the
+ * account is one item of it. The menu says only what the row does not, in its
+ * header (their access), above the actions.
  */
-export declare function AccountRow({ avatar, name, detail, href, current, title, linkSuffix, actions, className, }: AccountRowProps): import("react").JSX.Element;
+export declare function AccountRow({ avatar, name, detail, href, menu, current, title, linkSuffix, actions, className, }: AccountRowProps): import("react").JSX.Element;

package/dist/AppShell/index.d.ts

@@ -1,5 +1,5 @@
 import './AppShell.css';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './AppShell.js';
 export { AccountRow } from './AccountRow.js';
-export type { AccountRowProps } from './AccountRow.js';
+export type { AccountRowMenu, AccountRowProps } from './AccountRow.js';
 export type { ActionRailRowProps, AppShellContextValue, AppShellProps, AppShellRailProps, AppShellRailRowProps, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, } from './AppShell.js';

package/dist/AppShell/index.js

@@ -1,5 +1,7 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-EDGCPVVD.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-G5TAKMEA.js';
 import '../chunk-IG75YMUN.js';
+import '../chunk-4MIM356A.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{AppShell-RUNVM4WH.css → AppShell-APHZKJYH.css}

@@ -651,18 +651,40 @@
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-a.crewlet-account-row__who:hover {
+/* The row as the reader's menu button: a button drawn as the link is. */
+button.crewlet-account-row__who {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* A row that opens a menu fills the row as the link does. */
+.crewlet-account-row > .crewlet-menu-anchor {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+a.crewlet-account-row__who:hover,
+button.crewlet-account-row__who:hover,
+button.crewlet-account-row__who[aria-expanded='true'] {
   background: var(--color-surface-hover);
 }
 
 /* After :hover, so the current row shows the lift rather than the overlay. */
-a.crewlet-account-row__who[aria-current='page'] {
+a.crewlet-account-row__who[aria-current='page'],
+button.crewlet-account-row__who[data-current] {
   background: var(--color-surface-elevated);
   outline: 1px solid var(--color-border-default);
   outline-offset: -1px;
 }
 
-a.crewlet-account-row__who:focus-visible {
+a.crewlet-account-row__who:focus-visible,
+button.crewlet-account-row__who:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }

package/dist/CommandPalette/index.js

@@ -1,11 +1,11 @@
-export { CommandPalette } from '../chunk-UXELEORU.js';
-import '../chunk-7IJARUIF.js';
+export { CommandPalette } from '../chunk-4HRB62EA.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/CommentThread/CommentThread.d.ts

@@ -0,0 +1,85 @@
+import { type ReactNode } from 'react';
+import { type Principal } from '../Principal/index.js';
+import { type TimeValue } from '../RelativeTime/index.js';
+/** One remark in a thread. */
+export interface CommentThreadComment {
+    /** Stable across edits: what a reply points at. */
+    id: string;
+    /** Who wrote it. Absent, the remark is the system's, named by `labels.system`. */
+    author?: Principal | null | undefined;
+    /** The remark, already rendered by the host: markdown turned into elements, or plain text. */
+    body: ReactNode;
+    createdAt: TimeValue;
+    /** When it was last edited. "(edited)" is shown when it differs from `createdAt`. */
+    editedAt?: TimeValue | undefined;
+    /** The id of the remark this one answers. */
+    replyTo?: string | undefined;
+}
+/**
+ * What a submit answers. `false` keeps the draft and the reply target, for a
+ * write the server refused; anything else clears them.
+ */
+export type CommentThreadSubmitResult = boolean | void;
+export interface CommentThreadLabels {
+    heading: string;
+    empty: string;
+    /** The author of a remark that names nobody. */
+    system: string;
+    edited: string;
+    inReplyTo: (name: string) => string;
+    /** The Reply control's accessible name, which names whose remark it answers. */
+    replyTo: (name: string) => string;
+    reply: string;
+    replying: (name: string) => string;
+    stopReplying: string;
+    /** The field's accessible name. `subject` is the document commented on, when the host names one. */
+    field: (subject: string | undefined, replyingTo: string | undefined) => string;
+    placeholder: string;
+    submit: string;
+    submitReply: string;
+    /** Why the submit control waits while the field is empty. */
+    emptyDraft: string;
+}
+export declare const COMMENT_THREAD_LABELS: CommentThreadLabels;
+export interface CommentThreadProps {
+    comments: readonly CommentThreadComment[];
+    /** The document commented on, named in the field's label: Comment on "Onboarding". */
+    subject?: string | undefined;
+    /**
+     * Posts a remark, or a reply when `replyTo` is set. Without it the thread is
+     * read-only: no field and no Reply controls. Resolve to `false` to keep the
+     * draft, such as when the server refused the write.
+     */
+    onSubmit?: ((body: string, replyTo: CommentThreadComment | null) => CommentThreadSubmitResult | Promise<CommentThreadSubmitResult>) | undefined;
+    /** Why the reader cannot post right now. The submit control is disabled and the reason is shown under it. */
+    disabledReason?: string | undefined;
+    /** A post in flight that the host is tracking. The thread also tracks its own. */
+    busy?: boolean | undefined;
+    /** A line beside the submit control: who is told, how the remark is shared. */
+    hint?: ReactNode;
+    /** Under the field: the server's refusal of the last post, as the host words it. */
+    notice?: ReactNode;
+    /** Whether the thread draws its own heading. On by default; off where the host already titles the section. */
+    heading?: boolean | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    labels?: Partial<CommentThreadLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A document's comments, oldest first, and a field to add one.
+ *
+ * A REPLY NAMES WHAT IT ANSWERS in words ("in reply to Maya"), so the thread
+ * stays flat and readable in order while each answer still points at its
+ * question. Pressing Reply moves focus into the field, which names whom it
+ * answers, and the reply can be abandoned from beside it.
+ *
+ * THE BODY IS THE HOST'S. A remark arrives already rendered (markdown into
+ * elements), so this draws it in the kit's document type at the size a remark
+ * read beside other things takes, and never parses anything itself.
+ *
+ * A SUBMIT IS ONE AT A TIME. The submit control is disabled while a post is in
+ * flight, so a second press cannot send the same remark twice, and the draft
+ * is cleared only once the host says the post landed.
+ */
+export declare function CommentThread({ comments, subject, onSubmit, disabledReason, busy, hint, notice, heading, now, labels: overrides, className, }: CommentThreadProps): import("react").JSX.Element;

package/dist/CommentThread/index.d.ts

@@ -0,0 +1,3 @@
+import './CommentThread.css';
+export { CommentThread, COMMENT_THREAD_LABELS } from './CommentThread.js';
+export type { CommentThreadComment, CommentThreadLabels, CommentThreadProps, CommentThreadSubmitResult, } from './CommentThread.js';

package/dist/CommentThread/index.js

@@ -0,0 +1,16 @@
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IC64IWOO.js';
+import '../chunk-WI6K5M5X.js';
+import '../chunk-VJLYGPPE.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-Q55TXPA3.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CommentThread-7VXOFTZO.css

@@ -0,0 +1,90 @@
+/* CommentThread: a document's remarks, one per row with a hairline between,
+   then the field to add one. */
+.crewlet-comment-thread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__heading {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-comment-thread__empty,
+.crewlet-comment-thread__hint {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-comment-thread__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-comment-thread__comment {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding: var(--spacing-3) 0;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-comment-thread__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__author {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-comment-thread__meta {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* Reply sits at the row's far end, wherever the head wraps. */
+.crewlet-comment-thread__reply {
+  margin-inline-start: auto;
+}
+
+.crewlet-comment-thread__compose {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-comment-thread__replying {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}

package/dist/ConflictNote/ConflictNote.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ConflictNoteLabels {
+    /** The sentence once the host knows who won the race. */
+    changedBy: (subject: string, name: string) => string;
+    /** The sentence while it does not, or when nobody can be named. */
+    changed: (subject: string) => string;
+    dismiss: string;
+}
+export declare const CONFLICT_NOTE_LABELS: ConflictNoteLabels;
+export interface ConflictNoteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> {
+    /** What the sentence calls the record the reader tried to change: a key, a title. */
+    subject: string;
+    /**
+     * Who changed it in the meantime, once the host has looked it up. Without
+     * it the note says the record changed and names nobody, or says `message`.
+     */
+    changedBy?: string | undefined;
+    /**
+     * The sentence to say while nobody can be named, in place of the default:
+     * usually the server's own refusal.
+     */
+    message?: ReactNode;
+    /** Takes the note down. Without it the note offers no Dismiss control. */
+    onDismiss?: (() => void) | undefined;
+    /** Controls beside Dismiss: "Reload", "Keep mine". */
+    actions?: ReactNode;
+    labels?: Partial<ConflictNoteLabels> | undefined;
+}
+/**
+ * The refusal of a lost race: somebody changed a record between the reader's
+ * read and their write, and the write was refused.
+ *
+ * IT NAMES WHO WON, when the host can say, because "changed by Maya since you
+ * opened it" names the person to talk to where "somebody else" names nobody.
+ * Until the host knows, it says the record changed, or the server's own
+ * sentence.
+ *
+ * AN ALERT, because it answers a press the reader just made and they need to
+ * hear that the change did not land. The glyph is drawn beside the words so
+ * the danger ink is never the only carrier.
+ */
+export declare function ConflictNote({ subject, changedBy, message, onDismiss, actions, labels: overrides, className, ...rest }: ConflictNoteProps): import("react").JSX.Element;

package/dist/ConflictNote/index.d.ts

@@ -0,0 +1,3 @@
+import './ConflictNote.css';
+export { ConflictNote, CONFLICT_NOTE_LABELS } from './ConflictNote.js';
+export type { ConflictNoteLabels, ConflictNoteProps } from './ConflictNote.js';

package/dist/ConflictNote/index.js

@@ -0,0 +1,4 @@
+export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-UO7JZVCO.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ConflictNote-DH77PYF7.css

@@ -0,0 +1,27 @@
+/* ConflictNote: a refused write's sentence in the danger ink, with its glyph
+   so the colour is never the only carrier, and its controls beside it. */
+.crewlet-conflict-note {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  max-width: 40rem;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-conflict-note__glyph {
+  flex: none;
+}
+
+.crewlet-conflict-note__text {
+  flex: 1 1 16rem;
+  min-width: 0;
+}
+
+.crewlet-conflict-note__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-AJESMWJS.js';
-import '../chunk-JULMZNGT.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-LG244LY7.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7IJARUIF.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-I6NZKJGK.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4MIM356A.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DataView/index.js

@@ -1,16 +1,14 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-OIMAK5AE.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-AV6YX4GZ.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-AJESMWJS.js';
-import '../chunk-JULMZNGT.js';
-import '../chunk-L4H7SSWF.js';
+import '../chunk-RE6ED5TO.js';
+import '../chunk-LG244LY7.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7IJARUIF.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-I6NZKJGK.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-3CZ7XAVY.js';
@@ -19,6 +17,8 @@ import '../chunk-BWRGFKJP.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-4MIM356A.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DateTimePicker/index.js

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

package/dist/DiffView/DiffView.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'react';
+import type { DiffSection } from './diff.js';
+export interface DiffViewLabels {
+    /** The row a dropped run of unchanged lines is drawn as: "12 unchanged lines". */
+    skipped: (count: number) => string;
+    /** Read in place of the `+` mark on an added line. */
+    added: string;
+    /** Read in place of the minus mark on a removed line. */
+    removed: string;
+    /** The region's accessible name when the caller gives none. */
+    region: string;
+}
+export declare const DIFF_VIEW_LABELS: DiffViewLabels;
+export interface DiffViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The lines to draw, grouped into sections with the count of unchanged
+     * lines dropped before each: `collapseDiff(diffLines(before, after))`, or
+     * sections a host computed some other way.
+     */
+    sections: readonly DiffSection[];
+    labels?: Partial<DiffViewLabels> | undefined;
+}
+/**
+ * A line diff, rendered as the document it is.
+ *
+ * MONOSPACE AND LINE-NUMBERED on both sides, because the two numbers are what
+ * a reader uses to find the paragraph in the version beside it. A skipped run
+ * is a row of its own saying how many lines it stands for: a gap silently
+ * closed makes a document edited at both ends look like one rewritten in the
+ * middle.
+ *
+ * COLOUR IS NEVER THE ONLY SIGNAL. An added or removed line carries a tint, a
+ * drawn mark and a word: the mark is hidden from assistive technology and the
+ * word ("Added", "Removed") is read in its place, because a minus sign is
+ * announced as anything from "minus" to nothing at all.
+ */
+export declare function DiffView({ sections, labels: overrides, className, 'aria-label': ariaLabel, ...rest }: DiffViewProps): import("react").JSX.Element;
+export interface DiffSummaryLabels {
+    /** Read in place of the drawn counts: "3 lines added, 1 removed". */
+    spoken: (added: number, removed: number) => string;
+    /** What the counts are measured against: "against version 4". */
+    against: (what: string) => string;
+}
+export declare const DIFF_SUMMARY_LABELS: DiffSummaryLabels;
+export interface DiffSummaryProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> {
+    added: number;
+    removed: number;
+    /** What the diff is measured against, named the way the reader knows it: "version 4", "rev 12". */
+    against?: string | undefined;
+    labels?: Partial<DiffSummaryLabels> | undefined;
+}
+/**
+ * The one line above a diff that says how big it is: `+3 −1 against version 4`.
+ *
+ * The drawn counts are tinted with the same inks as the lines they count, and
+ * a sentence is read in their place, so the size of the change never rests on
+ * a plus sign and a colour.
+ */
+export declare function DiffSummary({ added, removed, against, labels: overrides, className, ...rest }: DiffSummaryProps): import("react").JSX.Element;