@crewlethq/ui 0.19.0 → 0.21.0

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,9 +1,9 @@
-export { LinkInterstitial, openExternal } from '../chunk-RT323I4I.js';
-import '../chunk-7IJARUIF.js';
+export { LinkInterstitial, openExternal } from '../chunk-ZM7HLFOA.js';
 import '../chunk-5CLW2CXT.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-SVSCLHHI.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/Menu/Menu.d.ts

@@ -53,10 +53,19 @@
  * - IT CAN BE OPENED FROM OUTSIDE (`open`, `onOpenChange`), because a tree item
  *   that holds focus opens its card's menu from the keyboard while the trigger
  *   itself is out of the tab order (`triggerTabIndex={-1}`).
+ * - ITS TRIGGER CAN BE THE CALLER'S OWN (`renderTrigger`): a row that IS the
+ *   way in, such as the signed-in reader at the foot of the rail, opens the
+ *   menu itself rather than sitting beside a second button that does. The
+ *   caller spreads the props it is handed on its element, which keeps every
+ *   rule above, the focus coming back included.
+ * - A HEADER SAYS WHAT THE ACTIONS ARE ABOUT (`header`): a line of facts
+ *   above the items, such as the access a signed-in reader carries. It is
+ *   not an item, so the arrows never stop on it, and the menu is described by
+ *   it, so a screen reader hears it when the menu opens.
  *
  * Ported from the engine dashboard's `ui/Menu.tsx`, with its suite.
  */
-import { type ReactNode } from 'react';
+import { type KeyboardEvent, type ReactNode } from 'react';
 import { type ButtonVariant } from '../Button/index.js';
 export interface MenuItem {
     kind?: 'item';
@@ -97,6 +106,16 @@ type Run = {
 };
 /** Gathers each run of consecutive answers (items given `checked`) into one group. */
 export declare function runs(entries: readonly MenuEntry[]): Run[];
+/** What a caller's own trigger spreads on its element (`renderTrigger`). */
+export interface MenuTriggerProps {
+    ref: (el: HTMLElement | null) => void;
+    'aria-haspopup': 'menu';
+    'aria-expanded': boolean;
+    'aria-controls': string | undefined;
+    tabIndex: number | undefined;
+    onClick: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
 export interface MenuProps {
     /** The trigger's accessible name, such as "Actions for Software Engineer". */
     label: string;
@@ -112,7 +131,14 @@ export interface MenuProps {
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** Which edge of the trigger the menu lines up with. */
     align?: 'start' | 'end' | undefined;
+    /**
+     * The caller's own trigger, in place of the menu's button: an element given
+     * these props. `label` still names the menu; the trigger names itself.
+     */
+    renderTrigger?: ((props: MenuTriggerProps) => ReactNode) | undefined;
+    /** Facts above the items: what the actions are about. Never an item. */
+    header?: ReactNode;
     className?: string | undefined;
 }
-export declare function Menu({ label, items, icon, trigger, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, className, }: MenuProps): import("react").JSX.Element;
+export declare function Menu({ label, items, icon, trigger, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, renderTrigger, header, className, }: MenuProps): import("react").JSX.Element;
 export {};

package/dist/Menu/index.d.ts

@@ -1,3 +1,3 @@
 import './Menu.css';
 export { Menu } from './Menu.js';
-export type { MenuEntry, MenuItem, MenuProps, MenuSeparator } from './Menu.js';
+export type { MenuEntry, MenuItem, MenuProps, MenuSeparator, MenuTriggerProps } from './Menu.js';

package/dist/Menu/index.js

@@ -1,4 +1,4 @@
-export { Menu } from '../chunk-JULMZNGT.js';
+export { Menu } from '../chunk-4MIM356A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/{Menu-BT5PMFJI.css → Menu-XIJ4LQUT.css}

@@ -219,6 +219,21 @@
   font-size: var(--font-size-xs);
 }
 
+/*
+ * Facts above the items, across the panel's full width with a hairline under
+ * them: what the actions below are about, read rather than pressed.
+ */
+.crewlet-menu__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-bottom: 1px solid var(--color-border-default);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
 .crewlet-menu__separator {
   height: 1px;
   margin: var(--spacing-1) 0;

package/dist/Modal/index.js

@@ -1,6 +1,6 @@
-export { ConfirmModal, Modal } from '../chunk-7IJARUIF.js';
-import '../chunk-OG6CL3EB.js';
+export { ConfirmModal, Modal } from '../chunk-F4DPAJCN.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.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';

package/dist/PeopleRail/index.js

@@ -0,0 +1,11 @@
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-J4OKGJQ6.js';
+import '../chunk-CENOOTAV.js';
+import '../chunk-S35G6PNC.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PeopleRail-R64WVOSH.css

@@ -0,0 +1,75 @@
+/* PeopleRail: a raised column of everybody present, one row a person, the
+   name over what they are doing and the controls at the row's end. */
+.crewlet-people-rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-people-rail__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.crewlet-people-rail__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-people-rail__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-people-rail__person {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-people-rail__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-people-rail__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-people-rail__where {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-people-rail__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+}
+
+.crewlet-people-rail__note {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}

package/dist/ShareDialog/index.js

@@ -1,17 +1,17 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-HTCJSUIZ.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-XMGB3ZAT.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7IJARUIF.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SVSCLHHI.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-IG75YMUN.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/SheetGrid/index.js

@@ -1,10 +1,9 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-PUQY4WXR.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-36CWC2NH.js';
+import '../chunk-CENOOTAV.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-CENOOTAV.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-PPAQFGS2.js';
 import '../chunk-YYZRLLLY.js';
 import '../chunk-S35G6PNC.js';
@@ -12,6 +11,7 @@ import '../chunk-QWOPX2MN.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-5OM447RW.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Switcher/index.js

@@ -1,13 +1,13 @@
-export { Switcher } from '../chunk-7FQEUNHX.js';
+export { Switcher } from '../chunk-7X5WOECO.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-7IJARUIF.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-IG75YMUN.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';