@crewlethq/ui 0.19.0 → 0.21.0

package/dist/TableCells/TableCells.d.ts

@@ -0,0 +1,153 @@
+import type { ReactNode } from 'react';
+import { type AvatarKind, type AvatarSizeStep } from '../Avatar/index.js';
+import { type TimeValue } from '../RelativeTime/index.js';
+import type { Tone } from '../utils/tone.js';
+export interface TableKeyCellProps {
+    /** The identifier: a key, a handle, an id. Its whole value is the cell's title. */
+    value: string | null | undefined;
+    /** What the cell prints where that is shorter than the value: an id cut to its head. */
+    text?: string | undefined;
+    /** Where the identifier goes. Without it the cell is plain text. */
+    href?: string | undefined;
+    /** What an absent identifier means, read in place of the dash. */
+    emptyLabel?: string | undefined;
+}
+/**
+ * An identifier, monospaced, on ONE line, cut with its whole value on the
+ * title. An identifier is one token with no space to break at, so wrapping it
+ * at whatever character the column ran out on stood the row two lines tall and
+ * printed a key nobody could search for.
+ */
+export declare function TableKeyCell({ value, text, href, emptyLabel }: TableKeyCellProps): import("react").JSX.Element;
+export interface TableNumberCellProps {
+    value: number | null | undefined;
+    /**
+     * How the figure is spelled. The host's own formatter, so a cell never
+     * spells a figure differently from the rest of the screen. Defaults to the
+     * locale's grouping.
+     */
+    format?: ((value: number) => string) | undefined;
+    /** Printed after the figure: " ms", "%". */
+    suffix?: string | undefined;
+    title?: string | undefined;
+    /** What an absent figure means. Absent is not zero. */
+    emptyLabel?: string | undefined;
+}
+/**
+ * A figure, tabular, and a marked absence when there is none.
+ *
+ * ABSENT IS NOT ZERO, which is the whole reason the cell exists: "nothing is
+ * recorded" and "nothing was spent" are different facts, and a column that
+ * draws both as `0` makes the first invisible. A duration or a token count is
+ * this cell with the host's formatter.
+ */
+export declare function TableNumberCell({ value, format, suffix, title, emptyLabel, }: TableNumberCellProps): import("react").JSX.Element;
+export interface TableDateCellProps {
+    value: TimeValue | null | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    /** What an absent instant means: "Never", "Not scheduled". */
+    emptyLabel?: string | undefined;
+}
+/**
+ * An instant, relative in the cell and exact on hover: a table scanned for
+ * "what moved today" is read in relative time, and the exact instant is what
+ * somebody needs once they have found the row. It is [RelativeTime], kept on
+ * one line in the quiet ink a date column takes.
+ */
+export declare function TableDateCell({ value, now, emptyLabel }: TableDateCellProps): import("react").JSX.Element;
+export interface TableEntityCellProps {
+    /** Who or what the row names. Absent, the cell is a marked absence. */
+    name: string | null | undefined;
+    /** Drawn as `Avatar` draws it: a squircle for an agent, a circle for a person. */
+    kind?: AvatarKind | undefined;
+    /**
+     * A badge of the host's own in place of the initials badge, such as a
+     * `PrincipalAvatar` carrying an agent's character. It is drawn as
+     * decoration, because the name is printed beside it.
+     */
+    badge?: ReactNode;
+    /**
+     * Where the name goes. Leave it out inside a row that is itself a link: an
+     * anchor inside an anchor is markup no browser agrees about.
+     */
+    href?: string | undefined;
+    /** The hover text, where the name is not the whole story. */
+    title?: string | undefined;
+    size?: AvatarSizeStep | undefined;
+    emptyLabel?: string | undefined;
+}
+/**
+ * A seat, a person or a team: the identity badge and the name, optionally a
+ * link to its page.
+ *
+ * ONE BADGE FOR ONE IDENTITY, the kit's `Avatar`, so the same person reads the
+ * same in every table. The badge is decorative, because the name is printed
+ * beside it: without that the row reads "Ada Lovelace avatar, Ada Lovelace".
+ */
+export declare function TableEntityCell({ name, kind, badge, href, title, size, emptyLabel, }: TableEntityCellProps): import("react").JSX.Element;
+export interface TableStatusCellProps {
+    /** The state's word, always printed: a glyph is never the only carrier. */
+    label: string;
+    /**
+     * The state's mark: a character such as a filled or a hollow circle, or a
+     * glyph. Hidden from assistive technology, since the word says it.
+     */
+    glyph: ReactNode;
+    tone?: Tone | undefined;
+    title?: string | undefined;
+}
+/**
+ * A state's mark with its word, never colour alone.
+ *
+ * THE MARK IS THE CALLER'S, which is what sets it apart from `StatusDot`: half
+ * of what a status column says is a HOLLOW counterpart (filled against hollow
+ * for "running the active revision" against "nothing reported"), and a filled
+ * dot has no unfilled state. The tone colours the mark and never the word.
+ */
+export declare function TableStatusCell({ label, glyph, tone, title }: TableStatusCellProps): import("react").JSX.Element;
+export interface TableTagsCellLabels {
+    /** The count of tags past `max`, read in full: "2 more tags". */
+    more: (count: number) => string;
+}
+export declare const TABLE_TAGS_CELL_LABELS: TableTagsCellLabels;
+export interface TableTagsCellProps {
+    tags: readonly string[] | null | undefined;
+    /** How many tags are drawn before the rest are counted. Three by default. */
+    max?: number | undefined;
+    emptyLabel?: string | undefined;
+    labels?: Partial<TableTagsCellLabels> | undefined;
+}
+/**
+ * Tags, capped with a count rather than wrapping a row to three lines. Neutral
+ * and outlined: a tag names a thing, and identity takes no colour. The tags
+ * past the cap are named on the count's title and counted in words for a
+ * screen reader.
+ */
+export declare function TableTagsCell({ tags, max, emptyLabel, labels: overrides }: TableTagsCellProps): import("react").JSX.Element;
+export type TableTextCellProps = {
+    children: ReactNode;
+} & ({
+    /**
+     * A mark every row of the column wears, such as the column's own glyph.
+     * The header carries the meaning, so it is drawn as decoration.
+     */
+    icon?: ReactNode;
+    mark?: never;
+} | {
+    icon?: never;
+    /**
+     * A mark that varies per row and states a fact of its own (a bug, an
+     * epic), so it brings its own accessible name and is read.
+     */
+    mark: ReactNode;
+});
+/**
+ * Plain text with an optional leading mark, cut on one line.
+ *
+ * TWO SPELLINGS OF ONE SLOT, because a column's mark and a row's mark are
+ * different facts: `icon` is the column's and is hidden, `mark` is the row's
+ * and is read. Exactly one of the two, enforced by the type: a cell given both
+ * would draw the column's answer over the row's.
+ */
+export declare function TableTextCell({ children, icon, mark }: TableTextCellProps): import("react").JSX.Element;

package/dist/TableCells/index.d.ts

@@ -0,0 +1,3 @@
+import './TableCells.css';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, } from './TableCells.js';
+export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, } from './TableCells.js';

package/dist/TableCells/index.js

@@ -0,0 +1,10 @@
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-MUGM7SEG.js';
+import '../chunk-GFV4LJHH.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-FBSEJO2C.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/TableCells-3VN5N2M3.css

@@ -0,0 +1,104 @@
+/* The read-only table cells. Each one holds a single line and shrinks inside
+   its column (`min-width: 0`), so a long value is cut with an ellipsis and
+   its whole text on the title rather than standing the row two lines tall. */
+
+.crewlet-table-cell__truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* AN IDENTIFIER IS ONE LINE, cut with its value on the title rather than
+   broken at whichever character the column ran out on. Named with the link's
+   class as well, so a linked identifier keeps the block box whatever order
+   the two stylesheets load in. */
+.crewlet-table-cell__key,
+.crewlet-link.crewlet-table-cell__key {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-family-mono);
+}
+
+.crewlet-table-cell__number {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__date {
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__entity,
+.crewlet-link.crewlet-table-cell__entity,
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  gap: calc(var(--spacing-1) * 1.5);
+}
+
+.crewlet-table-cell__badge,
+.crewlet-table-cell__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-table-cell__icon {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__glyph {
+  display: inline-flex;
+  flex: none;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  /* The quiet state is still a mark, so it takes the tertiary step: the
+     decoration step does not clear 3:1 on every ground. */
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__status--info .crewlet-table-cell__glyph {
+  color: var(--color-feedback-info);
+}
+
+.crewlet-table-cell__status--success .crewlet-table-cell__glyph {
+  color: var(--color-feedback-success);
+}
+
+.crewlet-table-cell__status--warning .crewlet-table-cell__glyph {
+  color: var(--color-feedback-warning);
+}
+
+.crewlet-table-cell__status--danger .crewlet-table-cell__glyph {
+  color: var(--color-feedback-danger);
+}
+
+.crewlet-table-cell__status--brand .crewlet-table-cell__glyph {
+  color: var(--color-brand-accent);
+}
+
+.crewlet-table-cell__tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-table-cell__more {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}

package/dist/TimeWindowPicker/index.js

@@ -1,11 +1,11 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-EIGEIT4O.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-NUZC6PJX.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/VersionCompare/VersionCompare.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react';
+/** How two versions are compared: what changed between them, or the versions themselves. */
+export type VersionCompareLens = 'changes' | 'versions';
+export declare const VERSION_COMPARE_LENSES: readonly ["changes", "versions"];
+export interface VersionCompareLabels {
+    /** The heading when the host gives no title: "Version 3 and version 5". */
+    title: (from: string, to: string) => string;
+    /** Names the lens switch. */
+    lens: string;
+    changes: string;
+    versions: string;
+    /** The changes region's accessible name. */
+    region: (from: string, to: string) => string;
+    identicalTitle: string;
+    identicalDescription: string;
+}
+export declare const VERSION_COMPARE_LABELS: VersionCompareLabels;
+export interface VersionCompareProps {
+    /** The older version, named the way the reader knows it: "Version 3", "rev 12". */
+    fromLabel: string;
+    /** The newer version. */
+    toLabel: string;
+    /** The heading. Defaults to naming both versions. */
+    title?: ReactNode;
+    /** A sentence beside the heading: "What changed between them". */
+    description?: ReactNode;
+    /** The lens on show. A lens with nothing to draw falls back to the other. */
+    lens: VersionCompareLens;
+    /** Switches the lens. Without it, or with only one lens to draw, no switch is drawn. */
+    onLensChange?: ((lens: VersionCompareLens) => void) | undefined;
+    /**
+     * The older text, compared line by line with `after` for the changes lens.
+     * Leave both out and pass `changes` for a comparison the host draws itself,
+     * such as a list of changed files.
+     */
+    before?: string | undefined;
+    after?: string | undefined;
+    /** The changes lens, drawn by the host in place of the line diff of `before` and `after`. */
+    changes?: ReactNode;
+    /** Unchanged lines kept either side of a change in the line diff. Three by default. */
+    context?: number | undefined;
+    /** The older version, drawn for the versions lens. */
+    from?: ReactNode;
+    /** The newer version, drawn for the versions lens. With `from` left out it is drawn alone. */
+    to?: ReactNode;
+    /** A sentence over the versions lens: "Both versions show today's data." */
+    note?: ReactNode;
+    /** Controls at the end of the head, after the lens switch: "Back to the page". */
+    actions?: ReactNode;
+    labels?: Partial<VersionCompareLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * Two versions of a document, compared: what changed between them, or the two
+ * drawn side by side.
+ *
+ * THE OLDER VERSION IS ALWAYS THE "FROM" SIDE and the left pane, whichever the
+ * reader picked first, so a comparison reads forward in time. The host orders
+ * the two before it hands them over.
+ *
+ * THE CHANGES LENS IS A [DiffView] when the host hands over two texts, with
+ * the [DiffSummary] above it; two identical texts are said in words ("Nothing
+ * changed") rather than drawn as a pane of unmarked lines that reads as one
+ * that failed to load. A comparison that is not two texts, such as the files
+ * of two releases, is drawn by the host in `changes`.
+ *
+ * A LENS THAT CANNOT BE DRAWN IS ABSENT, not offered and then empty: a first
+ * version has nothing to compare with, and a sheet has no side by side.
+ */
+export declare function VersionCompare({ fromLabel, toLabel, title, description, lens, onLensChange, before, after, changes, context, from, to, note, actions, labels: overrides, className, }: VersionCompareProps): import("react").JSX.Element;

package/dist/VersionCompare/index.d.ts

@@ -0,0 +1,3 @@
+import './VersionCompare.css';
+export { VersionCompare, VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES } from './VersionCompare.js';
+export type { VersionCompareLabels, VersionCompareLens, VersionCompareProps } from './VersionCompare.js';

package/dist/VersionCompare/index.js

@@ -0,0 +1,11 @@
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-73QBUUYX.js';
+import '../chunk-VYY56AMX.js';
+import '../chunk-BVWSLXTY.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-RA2ULG6H.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/VersionCompare-UUZOPTQO.css

@@ -0,0 +1,68 @@
+/* VersionCompare: a head naming the two versions with the lens switch at its
+   end, then the changes or the two versions. */
+.crewlet-version-compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-version-compare__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-3);
+}
+
+.crewlet-version-compare__titles {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-version-compare__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-version-compare__description,
+.crewlet-version-compare__note {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-version-compare__changes,
+.crewlet-version-compare__versions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+/* SIDE BY SIDE where there is room for two readable columns, and one above
+   the other where there is not, decided by the width the panes are given
+   rather than by the viewport, so a comparison in a side pane stacks too. */
+.crewlet-version-compare__panes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+  gap: var(--spacing-4);
+}
+
+.crewlet-version-compare__pane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-version-compare__pane-title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}

package/dist/VersionTimeline/index.js

@@ -1,10 +1,10 @@
-export { VersionTimeline } from '../chunk-WXAULPBH.js';
+export { VersionTimeline } from '../chunk-UNZ7TVV5.js';
 import '../chunk-AUQPBL4O.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-UXELEORU.js → chunk-4HRB62EA.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-7IJARUIF.js';
+import { Modal } from './chunk-F4DPAJCN.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-Q55TXPA3.js';

package/dist/{chunk-JULMZNGT.js → chunk-4MIM356A.js}

@@ -3,11 +3,11 @@ import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup
 import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Menu-BT5PMFJI.css';
+import './Menu-XIJ4LQUT.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { EllipsisVerticalGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ITEM_SELECTOR = "[role='menuitem'],[role='menuitemradio']";
 function runs(entries) {
@@ -34,10 +34,13 @@ function Menu({
   open: controlled,
   onOpenChange,
   align = "start",
+  renderTrigger,
+  header,
   className
 }) {
   const id = useId();
   const menuId = `${id}-menu`;
+  const headerId = `${id}-header`;
   const [uncontrolled, setUncontrolled] = useState(false);
   const open = controlled ?? uncontrolled;
   const triggerRef = useRef(null);
@@ -217,13 +220,14 @@ function Menu({
     },
     entry.key
   );
-  const list = open ? /* @__PURE__ */ jsx(
+  const list = open ? /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx("crewlet-menu", container !== null && container !== document.body ? "crewlet-menu--in-host" : null, className),
       id: menuId,
       role: "menu",
       "aria-label": label,
+      "aria-describedby": header ? headerId : void 0,
       tabIndex: -1,
       ref: (el) => {
         menu.current = el;
@@ -233,9 +237,16 @@ function Menu({
       onKeyDown: onMenuKeyDown,
       onPointerDown: (event) => event.stopPropagation(),
       onClick: (event) => event.stopPropagation(),
-      children: runs(items).map(
-        (run) => run.kind === "separator" ? /* @__PURE__ */ jsx("div", { role: "separator", className: "crewlet-menu__separator" }, run.key) : run.kind === "answers" ? /* @__PURE__ */ jsx("div", { role: "group", className: "crewlet-menu__group", children: run.items.map(item) }, run.key) : item(run.item)
-      )
+      children: [
+        header ? (
+          // PRESENTATIONAL, so a menu holds only items to a screen reader, and
+          // the menu's description, so what it says is heard when it opens.
+          /* @__PURE__ */ jsx("div", { role: "presentation", id: headerId, className: "crewlet-menu__header", children: header })
+        ) : null,
+        runs(items).map(
+          (run) => run.kind === "separator" ? /* @__PURE__ */ jsx("div", { role: "separator", className: "crewlet-menu__separator" }, run.key) : run.kind === "answers" ? /* @__PURE__ */ jsx("div", { role: "group", className: "crewlet-menu__group", children: run.items.map(item) }, run.key) : item(run.item)
+        )
+      ]
     }
   ) : null;
   const shared = {
@@ -258,7 +269,7 @@ function Menu({
     onKeyDown: onTriggerKeyDown
   };
   return /* @__PURE__ */ jsxs("span", { className: "crewlet-menu-anchor", children: [
-    trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
+    renderTrigger ? renderTrigger(shared) : trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
     list && container ? createPortal(list, container) : null
   ] });
 }

package/dist/chunk-73QBUUYX.js

@@ -0,0 +1,102 @@
+import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
+import { SegmentedControl } from './chunk-26PEPONN.js';
+import { EmptyState } from './chunk-RA2ULG6H.js';
+import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './VersionCompare-UUZOPTQO.css';
+import { useId, useMemo } from 'react';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var VERSION_COMPARE_LENSES = ["changes", "versions"];
+var VERSION_COMPARE_LABELS = {
+  title: (from, to) => `${from} and ${to}`,
+  lens: "Compare by",
+  changes: "Changes",
+  versions: "Side by side",
+  region: (from, to) => `Changes from ${from} to ${to}`,
+  identicalTitle: "Nothing changed",
+  identicalDescription: "The two versions hold the same text."
+};
+function VersionCompare({
+  fromLabel,
+  toLabel,
+  title,
+  description,
+  lens,
+  onLensChange,
+  before,
+  after,
+  changes,
+  context = 3,
+  from,
+  to,
+  note,
+  actions,
+  labels: overrides,
+  className
+}) {
+  const labels = overrides ? { ...VERSION_COMPARE_LABELS, ...overrides } : VERSION_COMPARE_LABELS;
+  const headingID = useId();
+  const level = useHeadingLevel();
+  const Heading = headingTag(level);
+  const inner = nextHeadingLevel(level);
+  const PaneHeading = headingTag(inner);
+  const hostChanges = changes !== void 0 && changes !== null;
+  const canChanges = hostChanges || before !== void 0 && after !== void 0;
+  const canVersions = from !== void 0 && from !== null || to !== void 0 && to !== null;
+  const shown = lens === "versions" ? canVersions ? "versions" : "changes" : canChanges ? "changes" : "versions";
+  const diff = useMemo(() => {
+    if (hostChanges || shown !== "changes" || before === void 0 || after === void 0) return null;
+    const lines = diffLines(before, after);
+    return { sections: collapseDiff(lines, context), stat: diffStat(lines) };
+  }, [hostChanges, shown, before, after, context]);
+  const panes = [
+    { key: "from", label: fromLabel, node: from },
+    { key: "to", label: toLabel, node: to }
+  ].filter((pane) => pane.node !== void 0 && pane.node !== null);
+  return /* @__PURE__ */ jsxs("section", { className: cx("crewlet-version-compare", className), "aria-labelledby": headingID, children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__head", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__titles", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "crewlet-version-compare__title", id: headingID, children: title ?? labels.title(fromLabel, toLabel) }),
+        description !== void 0 && description !== null && /* @__PURE__ */ jsx("p", { className: "crewlet-version-compare__description", children: description })
+      ] }),
+      onLensChange && canChanges && canVersions && /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          semantics: "radio",
+          activate: "manual",
+          size: "sm",
+          label: labels.lens,
+          value: shown,
+          onValueChange: onLensChange,
+          options: [
+            { value: "changes", label: labels.changes },
+            { value: "versions", label: labels.versions }
+          ]
+        }
+      ),
+      actions
+    ] }),
+    /* @__PURE__ */ jsx(HeadingLevelProvider, { level: inner, children: shown === "changes" ? diff ? diff.stat.identical ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        size: "compact",
+        icon: /* @__PURE__ */ jsx(CheckGlyph, { size: "xl" }),
+        title: labels.identicalTitle,
+        description: labels.identicalDescription
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__changes", children: [
+      /* @__PURE__ */ jsx(DiffSummary, { added: diff.stat.added, removed: diff.stat.removed, against: fromLabel }),
+      /* @__PURE__ */ jsx(DiffView, { sections: diff.sections, "aria-label": labels.region(fromLabel, toLabel) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "crewlet-version-compare__changes", children: changes }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__versions", children: [
+      note !== void 0 && note !== null && /* @__PURE__ */ jsx("p", { className: "crewlet-version-compare__note", children: note }),
+      /* @__PURE__ */ jsx("div", { className: "crewlet-version-compare__panes", children: panes.map((pane) => /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__pane", children: [
+        /* @__PURE__ */ jsx(PaneHeading, { className: "crewlet-version-compare__pane-title", children: pane.label }),
+        /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(inner), children: pane.node })
+      ] }, pane.key)) })
+    ] }) })
+  ] });
+}
+
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare };

package/dist/{chunk-7FQEUNHX.js → chunk-7X5WOECO.js}

@@ -1,5 +1,5 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-7IJARUIF.js';
+import { Modal } from './chunk-F4DPAJCN.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-Q55TXPA3.js';
 import { Popover } from './chunk-BWRGFKJP.js';

package/dist/{chunk-OIMAK5AE.js → chunk-AV6YX4GZ.js}

@@ -1,15 +1,15 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-AJESMWJS.js';
-import { Menu } from './chunk-JULMZNGT.js';
-import { DateTimePicker } from './chunk-L4H7SSWF.js';
+import { DateTimePicker } from './chunk-RE6ED5TO.js';
+import { DataTable } from './chunk-LG244LY7.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { Input } from './chunk-Q55TXPA3.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Popover } from './chunk-BWRGFKJP.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { Menu } from './chunk-4MIM356A.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';