@crewlethq/ui 0.19.0 → 0.20.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,24 @@ 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.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/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-EZBLOUWX.js';
+import '../chunk-WI6K5M5X.js';
+import '../chunk-VJLYGPPE.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-OG6CL3EB.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-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/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;

package/dist/DiffView/diff.d.ts

@@ -0,0 +1,97 @@
+/**
+ * What changed between two versions of a document, by line.
+ *
+ * OVER LINES, by the classic longest-common-subsequence table. The shape is
+ * the one a prose document wants: a paragraph somebody rewrote is a line
+ * replaced, not thirty character edits scattered through it. Word-level
+ * refinement inside a changed line is deliberately absent: it makes a small
+ * edit prettier and a large one unreadable, and documents are rewritten in
+ * paragraphs.
+ *
+ * THE TABLE RATHER THAN MYERS, and [MAX_DIFF_LINES] is what pays for that
+ * choice. The table is quadratic on every input, but it is a dozen lines
+ * anybody can check by reading; the cap keeps the quadratic term small, and a
+ * document past it is reported as a whole replacement rather than freezing the
+ * tab.
+ *
+ * FRAMEWORK FREE. Nothing here imports React, so a host can compute a diff in
+ * a worker or a test and hand the sections to [DiffView].
+ */
+/** One line of the result. `same` lines carry both numbers. */
+export interface DiffLine {
+    kind: 'same' | 'add' | 'remove';
+    text: string;
+    /** 1-based line number in the OLD document, or null on an addition. */
+    before: number | null;
+    /** 1-based line number in the NEW document, or null on a removal. */
+    after: number | null;
+}
+/** What a diff amounts to, for a one-line summary above it. */
+export interface DiffStat {
+    added: number;
+    removed: number;
+    /** True when the two documents are identical, which is a real outcome. */
+    identical: boolean;
+}
+/**
+ * A run of lines kept for display, and how many unchanged lines were dropped
+ * before it. The gap is a count rather than a marker line, so the renderer
+ * decides what a gap looks like.
+ */
+export interface DiffSection {
+    /** The lines of this section, in order. */
+    lines: DiffLine[];
+    /** How many unchanged lines were dropped BEFORE this section. */
+    skipped: number;
+}
+/**
+ * The size past which the table is not worth building.
+ *
+ * SIZED FROM THE TABLE'S MEMORY, because that is the quantity that binds and
+ * it is paid on every input: `(N+1)` rows of `(M+1)` `Uint32` entries, every
+ * cell filled. At two thousand lines that is about 16 MB and 60 ms, which a
+ * tab holds without noticing; at ten thousand it is hundreds of megabytes and
+ * seconds on the main thread. Raising it means replacing the table with Myers
+ * or Hirschberg first.
+ */
+export declare const MAX_DIFF_LINES = 2000;
+/**
+ * Split a document into the lines a diff compares.
+ *
+ * A trailing newline is not a line. Every file that ends properly has one, so
+ * counting it would report an added last line on every document that gained
+ * one. Both line endings read as one.
+ */
+export declare function splitLines(text: string): string[];
+/**
+ * The line diff of two documents: every line of the result in order, context
+ * included, because a document diff is read as a document rather than as a
+ * patch.
+ */
+export declare function diffLines(before: string, after: string): DiffLine[];
+/**
+ * Count the additions and removals, and say when there are none: identical is
+ * its own answer, not "0 added, 0 removed".
+ */
+export declare function diffStat(diff: readonly DiffLine[]): DiffStat;
+/**
+ * Drop the runs of unchanged lines a reader does not need, keeping `context`
+ * lines either side of every change.
+ *
+ * A HOLE IS REPORTED, never silently closed: each section carries how many
+ * lines were dropped before it, so a reader can tell a document with two edits
+ * at its ends from one rewritten in the middle.
+ */
+export declare function collapseDiff(diff: readonly DiffLine[], context?: number): DiffSection[];
+/**
+ * The first `max` changed lines of a collapsed diff, and how many changed
+ * lines are left out: what a preview of a save shows, with the count that says
+ * it is one. An unchanged context line is drawn and not counted.
+ *
+ * A COUNT, never a quiet cut: a preview ending at its sixth line reads as a
+ * save that changed six lines.
+ */
+export declare function firstChangedLines(sections: readonly DiffSection[], max: number): {
+    sections: DiffSection[];
+    more: number;
+};

package/dist/DiffView/index.d.ts

@@ -0,0 +1,5 @@
+import './DiffView.css';
+export { DiffView, DiffSummary, DIFF_VIEW_LABELS, DIFF_SUMMARY_LABELS } from './DiffView.js';
+export type { DiffViewLabels, DiffViewProps, DiffSummaryLabels, DiffSummaryProps } from './DiffView.js';
+export { MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from './diff.js';
+export type { DiffLine, DiffSection, DiffStat } from './diff.js';

package/dist/DiffView/index.js

@@ -0,0 +1,3 @@
+export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from '../chunk-BVWSLXTY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/DiffView-RVLIHTKG.css

@@ -0,0 +1,91 @@
+/* DiffView: a line diff, monospace and line-numbered on both sides.
+
+   A changed line is marked three ways, a tint, a drawn mark and a word read
+   in its place, because colour alone is not a signal and a printed or
+   forced-colours render loses the tint entirely. The tint is the soft step of
+   the state and the mark the matching ink step, the pairing the palette suite
+   measures. */
+.crewlet-diff-view {
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-diff-view__section + .crewlet-diff-view__section,
+.crewlet-diff-view__skip + .crewlet-diff-view__line {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* A GAP SAYS WHAT IT STANDS FOR. Silently closed, a document edited at both
+   ends looks like one rewritten in the middle. */
+.crewlet-diff-view__skip {
+  padding: var(--spacing-1) var(--spacing-3);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-diff-view__line {
+  display: grid;
+  grid-template-columns: 3.5ch 3.5ch 2ch minmax(0, 1fr);
+  gap: var(--spacing-2);
+  padding: calc(var(--spacing-1) / 4) var(--spacing-3) calc(var(--spacing-1) / 4) var(--spacing-2);
+}
+
+.crewlet-diff-view__number {
+  color: var(--color-text-tertiary);
+  text-align: right;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-view__mark {
+  text-align: center;
+  user-select: none;
+}
+
+.crewlet-diff-view__text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-diff-view__line--add {
+  background: var(--color-feedback-success-soft);
+}
+
+.crewlet-diff-view__line--add .crewlet-diff-view__mark {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-view__line--remove {
+  background: var(--color-feedback-danger-soft);
+}
+
+.crewlet-diff-view__line--remove .crewlet-diff-view__mark {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* DiffSummary: the size of the change, in the same inks as its lines. */
+.crewlet-diff-summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-diff-summary__added,
+.crewlet-diff-summary__removed {
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-summary__added {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-summary__removed {
+  color: var(--color-feedback-danger-ink);
+}

package/dist/LinkInterstitial/index.js

@@ -1,6 +1,6 @@
-export { LinkInterstitial, openExternal } from '../chunk-RT323I4I.js';
-import '../chunk-7IJARUIF.js';
+export { LinkInterstitial, openExternal } from '../chunk-A4VMJMXJ.js';
 import '../chunk-5CLW2CXT.js';
+import '../chunk-7IJARUIF.js';
 import '../chunk-SVSCLHHI.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';

package/dist/PeopleRail/PeopleRail.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+import { type PresenceLabels, type PresenceMember } from '../PresenceModel/index.js';
+/** The reader, drawn first as "You". */
+export type PeopleRailSelf = Pick<PresenceMember, 'name' | 'kind' | 'character' | 'hue' | 'src'>;
+export interface PeopleRailLabels {
+    title: string;
+    close: string;
+    you: string;
+    nobody: string;
+    follow: string;
+    following: string;
+    /** The Follow control's accessible name, which names whom it follows. */
+    followName: (name: string) => string;
+    stopFollowingName: (name: string) => string;
+    /** The activity word under a name with no location: "Editing", "Reading". */
+    activity: PresenceLabels['activity'];
+}
+export declare const PEOPLE_RAIL_LABELS: PeopleRailLabels;
+export interface PeopleRailProps {
+    /** Everybody present but the reader. Two tabs of one seat are listed once, the most active. */
+    members: readonly PresenceMember[];
+    /** The reader, listed first as "You". */
+    self?: PeopleRailSelf | undefined;
+    /** The key of the followed member: its `seat`, or its `id` where it has none. */
+    following?: string | undefined;
+    /** Follow a member, or `null` to stop. Without it the rail offers no Follow controls. */
+    onFollow?: ((member: PresenceMember | null) => void) | undefined;
+    /** Close the rail. Without it the rail draws no close control. */
+    onClose?: (() => void) | undefined;
+    /** Further controls for one member, before Follow: "Open turn" for an agent at work. */
+    actions?: ((member: PresenceMember) => ReactNode) | undefined;
+    labels?: Partial<PeopleRailLabels> | undefined;
+    className?: string | undefined;
+}
+/** What identifies a member for following: the seat, so a second tab of the same person stays followed. */
+export declare function peopleRailKey(member: Pick<PresenceMember, 'id' | 'seat'>): string;
+/**
+ * Who is in a shared document now, what each is doing and where, with Follow
+ * beside everybody but the reader.
+ *
+ * THE SAME FACTS AS THE PRESENCE STACK, IN WORDS. A ring, a cursor and a cell
+ * outline are decorative to assistive technology, so this list is where a
+ * screen reader user learns who is here and where. It is ordered the way the
+ * stack is (people editing, agents editing, people viewing, agents reading,
+ * anybody idle last), so the two never disagree about who comes first.
+ *
+ * FOLLOW IS A TOGGLE, pressed while following, and its name says whom it
+ * follows or stops following, because a column of buttons all called "Follow"
+ * is a column of identical controls to a screen reader. The strip that says
+ * the reader is following is `FollowBanner`, which the host draws.
+ */
+export declare function PeopleRail({ members, self, following, onFollow, onClose, actions, labels: overrides, className, }: PeopleRailProps): import("react").JSX.Element;

package/dist/PeopleRail/index.d.ts

@@ -0,0 +1,3 @@
+import './PeopleRail.css';
+export { PeopleRail, PEOPLE_RAIL_LABELS, peopleRailKey } from './PeopleRail.js';
+export type { PeopleRailLabels, PeopleRailProps, PeopleRailSelf } from './PeopleRail.js';