@crewlethq/ui 0.79.0 → 0.81.0

package/README.md

@@ -205,6 +205,16 @@ 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.81.0
+
+**A `Tabs` dot marker sits beside the count.** A warning or an unsaved change is drawn as its 6px dot after the tab's count rather than in its place ("Agents 5" with a warning), since how many things are behind a tab and whether one needs the reader are two facts. A danger marker, which is a count of problems, still stands in for the tab's count, so two figures never sit side by side.
+
+## Changes in 0.80.0
+
+**`DataTable` takes `columnSizing="content"`** (compact variant): each column as wide as what it holds, its header included, the cells' own insets apart, and the spare width given to the trailing spacer. For a short table in a wide pane (an agent, a switch, a level and a status), which the fit spread across the box until a row read as four separate facts. The browser's automatic table layout measures the columns, so no width is stated on a column the caller did not lock with `width`, the fit pass does not run, and no resize handle is drawn. Its cells stay on one line whatever Wrap lines says, since a column as wide as its content truncates nothing, while a panel or strip that spans the row wraps; a row wider than its box scrolls sideways. `fill`, the default, is the table as it was. The type is `DataTableColumnSizing`.
+
+**`ChangeList` takes `layout="inline"`**: each row on one line, its label and then its values as chips ("Deployments: Read-only → Read and write"), the old value on an outline chip and the new one on the added tone. A pair is still said "Changed from X to Y" and an added or removed value says so, and a word diff or a block value keeps its own layout under its label. `grid`, the default, is unchanged. The type is `ChangeListLayout`.
+
 ## Changes in 0.78.0
 
 **`Tabs` take `actions`, controls at the row's far end in a tab list too.** A screen's own buttons ("Check now", "New") stand beside its tabs, in one bar with them, and never inside the tab list: the actions are the row's next sibling, so a screen reader meets a tab list of tabs alone and then the buttons, and the keyboard reaches the tabs (one stop, the arrows inside) and then each action. In router mode they stand outside the `nav` for the same reason. The actions keep their width at every size and the row gives way first: it takes the room left beside them, and scrolls (`overflow="scroll"`) or folds into "More" (`overflow="menu"`) inside that room, where the slider and the fold are measured. A pill or chip row keeps its width while it fits and scrolls inside the bar once it does not, so no tab paints under an action. An underline row's rule runs on under the actions to the bar's edge. With `actions`, `className` lands on the bar, the outermost element (`.crewlet-tabs-bar`, the actions in `.crewlet-tabs__actions`). Actions that arrive after the row is drawn, or go, never re-parent it: every row now sits in one wrapper element, `display: contents` while there are no actions, so the focused tab keeps focus and the slider and fold measure the live row. Without actions `className` stays on the row. `trailing` is unchanged: router mode only, inside the `nav`.

package/dist/ArtifactBar/index.js

@@ -1,8 +1,8 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-HA3C53OU.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-EAIOXW2W.js';
 import '../chunk-36WK24AI.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-AVL52EME.js';
 import '../chunk-CYQBDZ6M.js';

package/dist/AvatarPicker/index.js

@@ -1,10 +1,10 @@
-export { AvatarPicker } from '../chunk-3EKXL76Z.js';
-import '../chunk-ERB7UI3P.js';
+export { AvatarPicker } from '../chunk-LOWQK2PB.js';
+import '../chunk-HEA6TERQ.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-I22MUEG7.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-KTIQSSME.js';

package/dist/ChangeList/ChangeList.d.ts

@@ -78,8 +78,23 @@ export interface ChangeListLabels {
     showWhole: string;
 }
 export declare const CHANGE_LIST_LABELS: ChangeListLabels;
+/**
+ * How the rows are laid out.
+ *
+ *   - 'grid'   the labels in one column and the values in the other, the
+ *              values in DiffList's tints. The default: a record's fields.
+ *   - 'inline' each row one line, its label and then its values as chips:
+ *              "Deployments: [Read-only] → [Read and write]". For a short
+ *              change read in passing, such as a level moved in a review.
+ */
+export type ChangeListLayout = 'grid' | 'inline';
 export interface ChangeListProps {
     rows: readonly ChangeListRow[];
+    /**
+     * `inline` sets each row on one line with its values as chips. A word diff
+     * and a block value keep their own layout under their label in either.
+     */
+    layout?: ChangeListLayout | undefined;
     /** The eyebrow over the rows: "What will change", "What will be created", "What changed". */
     heading?: ReactNode;
     /**
@@ -134,5 +149,5 @@ declare function BlockValue({ row, labels }: {
  * values in the other, rows apart by the list's spacing rather than rules,
  * and no box of its own inside the card that holds it.
  */
-export declare function ChangeList({ rows, heading, settled, labels: overrides, diffLabels, className }: ChangeListProps): import("react").JSX.Element;
+export declare function ChangeList({ rows, heading, layout, settled, labels: overrides, diffLabels, className, }: ChangeListProps): import("react").JSX.Element;
 export {};

package/dist/ChangeList/index.d.ts

@@ -1,3 +1,3 @@
 import './ChangeList.css';
 export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from './ChangeList.js';
-export type { ChangeListAddedRow, ChangeListChangedRow, ChangeListFactRow, ChangeListLabels, ChangeListProps, ChangeListRemovedRow, ChangeListRow, ChangeListTextRow, WordDiffPart, } from './ChangeList.js';
+export type { ChangeListAddedRow, ChangeListChangedRow, ChangeListFactRow, ChangeListLabels, ChangeListLayout, ChangeListProps, ChangeListRemovedRow, ChangeListRow, ChangeListTextRow, WordDiffPart, } from './ChangeList.js';

package/dist/ChangeList/index.js

@@ -1,4 +1,4 @@
-export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-BBD7PTBG.js';
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-4XF7ENQA.js';
 import '../chunk-LR4IWUWQ.js';
 import '../chunk-VERJCAJ4.js';
 import '../chunk-CYQBDZ6M.js';

package/dist/{ChangeList-MDFH5NPH.css → ChangeList-ITJMTVDF.css}

@@ -207,3 +207,56 @@
 .crewlet-change-list--settled .crewlet-change-list__value {
   color: var(--color-text-secondary);
 }
+
+/*
+ * INLINE: one line a row, the label and then its values as chips. The rows
+ * stack; a row wraps as the pair does, the arrow staying with what it points
+ * at. A word diff and a block value keep their own layout under the label.
+ */
+.crewlet-change-list--inline .crewlet-change-list__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-change-list--inline .crewlet-change-list__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+}
+
+.crewlet-change-list--inline .crewlet-change-list__row--text,
+.crewlet-change-list--inline .crewlet-change-list__row--block {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* The label in the secondary ink at the row's own size, closed by a colon. */
+.crewlet-change-list--inline .crewlet-change-list__label {
+  font-size: inherit;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-change-list--inline .crewlet-change-list__row:not(.crewlet-change-list__row--text):not(.crewlet-change-list__row--block) > .crewlet-change-list__label::after {
+  content: ':';
+}
+
+.crewlet-change-list--inline .crewlet-change-list__pair {
+  align-items: center;
+}
+
+.crewlet-change-list--inline .crewlet-change-list__next {
+  align-items: center;
+}
+
+/* THE CHIP IS THE MARK, so the element around it draws none of its own. */
+.crewlet-change-list__chip {
+  display: inline-flex;
+  text-decoration: none;
+}
+
+.crewlet-change-list--inline .crewlet-change-list__note {
+  flex-basis: 100%;
+  margin-top: 0;
+}

package/dist/DataTable/DataTable.d.ts

@@ -190,6 +190,17 @@ export type DataTableItemsPerPage = number | typeof ALL_ITEMS;
  * its own resizable column widths.
  */
 export type DataTableDensity = 'compact' | 'comfortable';
+/**
+ * How a compact table's columns share its width.
+ *
+ *   - 'fill'    every column grows in proportion until the row fills its
+ *               box. The default: a list page, where the columns are the
+ *               screen and a reader resizes them.
+ *   - 'content' each column is as wide as what it holds, its header
+ *               included, the cells' own insets apart, and the trailing
+ *               spacer takes the rest.
+ */
+export type DataTableColumnSizing = 'fill' | 'content';
 /**
  * Every string the table renders on its own behalf, in one prop.
  *
@@ -344,6 +355,19 @@ export interface DataTableProps<TRow = DataTableRow> {
      * render anywhere on the table.
      */
     resizable?: boolean;
+    /**
+     * How the columns share the table's width. Compact variant only.
+     *
+     * `content` IS FOR A SHORT TABLE IN A WIDE PANE: an agent, a switch, a
+     * level and a status, spread by the fit across a 900px box, sat so far
+     * apart that a row read as four facts about nothing in particular. Sized
+     * to content, the columns stand together and the spare width goes to the
+     * trailing spacer. Nothing resizes a column then, neither the fit nor a
+     * reader, so no resize handle is drawn; a column with a `width` keeps it,
+     * and a row wider than its box scrolls sideways as any table here does.
+     * `fill` (the default) is the table as it always was.
+     */
+    columnSizing?: DataTableColumnSizing;
     onRowAction?: ((row: TRow) => void) | null;
     actionLabel?: string;
     /** The action column's glyph. A component, not a name. */
@@ -637,4 +661,4 @@ export interface DataTableProps<TRow = DataTableRow> {
     /** Every string the table renders itself. Merged over the English defaults. */
     labels?: Partial<DataTableLabels>;
 }
-export declare const DataTable: <TRow>({ data, columns, storageKey, defaultColumnOrder, columnOrder: columnOrderProp, onColumnOrderChange, defaultItemsPerPage, itemsPerPage: itemsPerPageProp, onItemsPerPageChange, page: pageProp, onPageChange, pageCount, minColumnWidth, resizable, itemsPerPageOptions, onRowAction, actionLabel, actionIcon, getRowKey, rowKey, emptyMessage, endMessage, showActions, className, variant, density, maxBodyHeight, sort: sortProp, onSortChange, defaultSort, sortCycle, stableOrder, rowActions, archivedPredicate, archivedLabel, loading, skeletonRows, error, paginated, showSettings, onRowClick, getRowHref, rowTone, isSelected, renderAccessoryRow, renderToolbar, renderFilterBar, onClearFilters, filtersActive, clearFiltersLabel, filterKey, visibleColumns: visibleColumnsProp, onVisibleColumnsChange, renderExpandedRow, defaultExpandedKey, hasMore, onLoadMore, loadingMore, loadMoreLabel, title, ariaLabel, expandLabel, description, icon, defaultWrapLines, labels: labelOverrides, }: DataTableProps<TRow>) => React.JSX.Element;
+export declare const DataTable: <TRow>({ data, columns, storageKey, defaultColumnOrder, columnOrder: columnOrderProp, onColumnOrderChange, defaultItemsPerPage, itemsPerPage: itemsPerPageProp, onItemsPerPageChange, page: pageProp, onPageChange, pageCount, minColumnWidth, resizable, columnSizing, itemsPerPageOptions, onRowAction, actionLabel, actionIcon, getRowKey, rowKey, emptyMessage, endMessage, showActions, className, variant, density, maxBodyHeight, sort: sortProp, onSortChange, defaultSort, sortCycle, stableOrder, rowActions, archivedPredicate, archivedLabel, loading, skeletonRows, error, paginated, showSettings, onRowClick, getRowHref, rowTone, isSelected, renderAccessoryRow, renderToolbar, renderFilterBar, onClearFilters, filtersActive, clearFiltersLabel, filterKey, visibleColumns: visibleColumnsProp, onVisibleColumnsChange, renderExpandedRow, defaultExpandedKey, hasMore, onLoadMore, loadingMore, loadMoreLabel, title, ariaLabel, expandLabel, description, icon, defaultWrapLines, labels: labelOverrides, }: DataTableProps<TRow>) => React.JSX.Element;

package/dist/DataTable/index.d.ts

@@ -1,6 +1,6 @@
 import './DataTable.css';
 export { DataTable, DATA_TABLE_LABELS, ALL_ITEMS } from './DataTable.js';
-export type { DataTableColumn, DataTableDensity, DataTableItemsPerPage, DataTableLabels, DataTableProps, DataTableRow, DataTableRowAction, DataTableRowTone, DataTableSortCycle, DataTableSortDirection, DataTableSortState, DataTableVariant, } from './DataTable.js';
+export type { DataTableColumn, DataTableColumnSizing, DataTableDensity, DataTableItemsPerPage, DataTableLabels, DataTableProps, DataTableRow, DataTableRowAction, DataTableRowTone, DataTableSortCycle, DataTableSortDirection, DataTableSortState, DataTableVariant, } from './DataTable.js';
 export { CopyableCell } from './CopyableCell.js';
 export type { CopyableCellProps } from './CopyableCell.js';
 export { RowActionsMenu } from './RowActionsMenu.js';

package/dist/DataTable/index.js

@@ -1,4 +1,4 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-INO2OXDB.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-BRWR3QIG.js';
 import '../chunk-C667GCU7.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';

package/dist/{DataTable-H43JSHOI.css → DataTable-GSLDFY5U.css}

@@ -797,6 +797,44 @@ body.crewlet-data-table-resizing {
   width: var(--spacing-6);
 }
 
+/*
+ * A TABLE SIZED TO ITS CONTENT (`columnSizing="content"`) is laid out by the
+ * automatic algorithm, with no width stated on its columns. The spacer asks
+ * for the whole row, so every other column gives up all it can: down to its
+ * widest cell. What is left over is the spacer's.
+ *
+ * Its cells never wrap, Wrap lines or not. A cell that may break anywhere is
+ * a column the automatic layout squeezes to a few letters a line, which is
+ * what a name became the first time this was drawn; and with every column as
+ * wide as its content there is nothing to truncate, so the toggle has nothing
+ * to decide.
+ *
+ * After the gutter rule above and as specific, so a pinned column keeps its
+ * gutter as the spacer's floor while the spacer still takes the rest of the
+ * row. The panels that span the row wrap, as their content does at any width:
+ * kept on one line, a sentence in one would be measured as the narrowest the
+ * table may be.
+ */
+.crewlet-data-table--compact .crewlet-data-table__table.crewlet-data-table__table--content {
+  table-layout: auto;
+}
+
+.crewlet-data-table--compact .crewlet-data-table__table.crewlet-data-table__table--content td:not(.crewlet-data-table__expanded-cell):not(.crewlet-data-table__accessory-cell) {
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.crewlet-data-table--compact .crewlet-data-table__table.crewlet-data-table__table--content .crewlet-data-table__th--spacer,
+.crewlet-data-table--compact .crewlet-data-table__table.crewlet-data-table__table--content .crewlet-data-table__td--spacer {
+  width: 100%;
+}
+
+.crewlet-data-table__table--content td.crewlet-data-table__expanded-cell,
+.crewlet-data-table__table--content td.crewlet-data-table__accessory-cell {
+  white-space: normal;
+}
+
 /*
  * Row actions column: pinned to the viewport's right edge with
  * position: sticky so the kebab affordance stays visible during

package/dist/DataView/index.js

@@ -1,8 +1,8 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-NSCACX5Y.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-4WTLT66V.js';
 import '../chunk-FPDIHEM4.js';
 import '../chunk-K4LZXSKZ.js';
 import '../chunk-HPI5J6AR.js';
-import '../chunk-INO2OXDB.js';
+import '../chunk-BRWR3QIG.js';
 import '../chunk-C667GCU7.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-STJ7QBC3.js';

package/dist/HuePicker/index.js

@@ -1,8 +1,8 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker, HueSwatch } from '../chunk-ERB7UI3P.js';
+export { HuePicker, HueSwatch } from '../chunk-HEA6TERQ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-MLDTLZAO.js';

package/dist/MarkdownEditor/index.js

@@ -1,8 +1,8 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-JNORDILD.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-7FF6CZW5.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-MLDTLZAO.js';

package/dist/MergeConflicts/index.js

@@ -1,7 +1,7 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-3G2BC4K5.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-2FMBZCFR.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-MLDTLZAO.js';

package/dist/ProposalCard/index.js

@@ -1,6 +1,6 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-DSMQTED5.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-BLGBD2D2.js';
 import '../chunk-ZWCK4N4L.js';
-import '../chunk-BBD7PTBG.js';
+import '../chunk-4XF7ENQA.js';
 import '../chunk-LR4IWUWQ.js';
 import '../chunk-RTMNULTL.js';
 import '../chunk-VERJCAJ4.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-MP7DGKB6.js';
+export { RichEditor, preloadRichEditor } from '../chunk-6X5PGHEX.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
 import '../chunk-KOJPDCGQ.js';
 import '../chunk-KBZO4B33.js';

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
 import '../chunk-36WK24AI.js';
-export { SegmentedControl } from '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+export { SegmentedControl } from '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-MLDTLZAO.js';

package/dist/SheetColumnEditor/index.js

@@ -1,13 +1,13 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-Z4H3NF7U.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-O222F2IX.js';
 import '../chunk-VK45YJLH.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-ERB7UI3P.js';
+import '../chunk-HEA6TERQ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-LMQG3VPG.js';

package/dist/Tabs/Tabs.d.ts

@@ -28,8 +28,11 @@ export interface TabsItem {
     count?: number | string | null;
     /**
      * What needs the reader behind this tab, drawn after the label: problems
-     * as a danger count, a warning or an unsaved change as a 6px dot. It
-     * replaces the count while it is set. `label` is what a screen reader hears.
+     * as a danger count, a warning or an unsaved change as a 6px dot. A danger
+     * count replaces the tab's count while it is set, since two figures side by
+     * side read as one; a dot sits after the count, since how many things are
+     * behind a tab and whether one needs the reader are two facts ("Agents 5"
+     * with a warning). `label` is what a screen reader hears.
      */
     marker?: TabsMarker | undefined;
     /**

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-W3VDHUJM.js';
+export { TabPanel, Tabs, tabId } from '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-MLDTLZAO.js';

package/dist/ThemeSwitcher/index.js

@@ -1,9 +1,9 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-QHQGJQV7.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-YB64PWIN.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-MLDTLZAO.js';

package/dist/TimeRangePicker/index.js

@@ -1,9 +1,9 @@
-export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-JBA6ZDPV.js';
+export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-SNIPM6K7.js';
 import '../chunk-C667GCU7.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-FB3TCNQP.js';

package/dist/VersionCompare/index.js

@@ -1,8 +1,8 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-YT5SWN4Q.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-Z6JKZI4E.js';
 import '../chunk-AOFVXE6V.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-OZAMLQY7.js';
-import '../chunk-W3VDHUJM.js';
+import '../chunk-6R334YT3.js';
+import '../chunk-2IIHMJMZ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-PPUR46MK.js';

package/dist/{chunk-3G2BC4K5.js → chunk-2FMBZCFR.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-OZAMLQY7.js';
+import { SegmentedControl } from './chunk-6R334YT3.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MergeConflicts-HCXPRQVR.css';

package/dist/{chunk-W3VDHUJM.js → chunk-2IIHMJMZ.js}

@@ -201,10 +201,13 @@ function Tabs({
         item.label,
         item.live ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${item.live}` }) : null
       ] }),
-      item.marker ? item.marker.tone === "danger" ? /* @__PURE__ */ jsxs("span", { className: "crewlet-tabs__marker crewlet-tabs__marker--danger", children: [
+      item.marker?.tone === "danger" ? /* @__PURE__ */ jsxs("span", { className: "crewlet-tabs__marker crewlet-tabs__marker--danger", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.marker.count }),
         /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label })
-      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null && item.count !== "" ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        item.count != null && item.count !== "" ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null,
+        item.marker ? /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : null
+      ] })
     ] });
     const onSelect = () => {
       if (item.disabled) return;

package/dist/{chunk-NSCACX5Y.js → chunk-4WTLT66V.js}

@@ -1,7 +1,7 @@
 import { PageHeader } from './chunk-FPDIHEM4.js';
 import { FilterPill } from './chunk-K4LZXSKZ.js';
 import { DateTimePicker } from './chunk-HPI5J6AR.js';
-import { DataTable } from './chunk-INO2OXDB.js';
+import { DataTable } from './chunk-BRWR3QIG.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { Popover } from './chunk-KHJIEPZV.js';

package/dist/{chunk-BBD7PTBG.js → chunk-4XF7ENQA.js}

@@ -3,7 +3,7 @@ import { Tag } from './chunk-VERJCAJ4.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChangeList-MDFH5NPH.css';
+import './ChangeList-ITJMTVDF.css';
 import { useId } from 'react';
 import { ArrowRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -100,8 +100,40 @@ function BlockValue({ row, labels }) {
       ] });
   }
 }
-function Value({ row, labels }) {
+function ChipValue({ row, labels }) {
+  switch (row.kind) {
+    case "fact":
+      return /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "neutral", children: row.value });
+    case "changed":
+      return /* @__PURE__ */ jsxs("span", { className: "crewlet-change-list__pair", children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.changedFrom} ` }),
+        /* @__PURE__ */ jsx("del", { className: "crewlet-change-list__chip", children: /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "neutral", appearance: "outline", children: row.from }) }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-change-list__next", children: [
+          /* @__PURE__ */ jsx(ArrowRightGlyph, { size: "sm", className: "crewlet-change-list__arrow" }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: ` ${labels.to} ` }),
+          /* @__PURE__ */ jsx("ins", { className: "crewlet-change-list__chip", children: /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "success", children: row.to }) })
+        ] })
+      ] });
+    case "added":
+      return /* @__PURE__ */ jsxs("span", { className: "crewlet-change-list__pair", children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.added} ` }),
+        /* @__PURE__ */ jsx("ins", { className: "crewlet-change-list__chip", children: /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "success", children: row.to }) }),
+        row.isNew ? /* @__PURE__ */ jsx(Tag, { size: "xs", variant: "success", appearance: "outline", children: labels.isNew }) : null
+      ] });
+    case "removed":
+      return /* @__PURE__ */ jsxs("span", { className: "crewlet-change-list__pair", children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.removed} ` }),
+        /* @__PURE__ */ jsx("del", { className: "crewlet-change-list__chip", children: /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "danger", appearance: "outline", children: row.from }) })
+      ] });
+  }
+}
+function Value({
+  row,
+  labels,
+  inline
+}) {
   if (row.block) return /* @__PURE__ */ jsx(BlockValue, { row, labels });
+  if (inline) return /* @__PURE__ */ jsx(ChipValue, { row, labels });
   switch (row.kind) {
     case "fact":
       return /* @__PURE__ */ jsx("span", { className: "crewlet-change-list__fact", children: row.value });
@@ -130,33 +162,52 @@ function Value({ row, labels }) {
       ] });
   }
 }
-function ChangeList({ rows, heading, settled = false, labels: overrides, diffLabels, className }) {
+function ChangeList({
+  rows,
+  heading,
+  layout = "grid",
+  settled = false,
+  labels: overrides,
+  diffLabels,
+  className
+}) {
   const labels = overrides ? { ...CHANGE_LIST_LABELS, ...overrides } : CHANGE_LIST_LABELS;
   const headingId = useId();
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-change-list", settled && "crewlet-change-list--settled", className), children: [
-    heading === void 0 || heading === null ? null : /* @__PURE__ */ jsx("div", { id: headingId, className: "crewlet-change-list__heading", children: heading }),
-    /* @__PURE__ */ jsx("dl", { className: "crewlet-change-list__rows", "aria-labelledby": heading === void 0 || heading === null ? void 0 : headingId, children: rows.map((row, index) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cx(
-          "crewlet-change-list__row",
-          `crewlet-change-list__row--${row.kind}`,
-          row.kind !== "text" && row.block && "crewlet-change-list__row--block"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("dt", { className: "crewlet-change-list__label", children: row.label }),
-          /* @__PURE__ */ jsxs("dd", { className: "crewlet-change-list__value", children: [
-            row.kind === "text" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(WordDiff, { row, labels }),
-              row.whole && row.whole.length > 0 ? /* @__PURE__ */ jsx(Disclosure, { title: labels.showWhole, headingLevel: "none", size: "compact", className: "crewlet-change-list__whole", children: /* @__PURE__ */ jsx(DiffList, { rows: [...row.whole], layout: "auto", labels: diffLabels }) }) : null
-            ] }) : /* @__PURE__ */ jsx(Value, { row, labels }),
-            row.note === void 0 || row.note === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-change-list__note", children: row.note })
-          ] })
-        ]
-      },
-      `${index}:${row.label}`
-    )) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-change-list",
+        layout === "inline" && "crewlet-change-list--inline",
+        settled && "crewlet-change-list--settled",
+        className
+      ),
+      children: [
+        heading === void 0 || heading === null ? null : /* @__PURE__ */ jsx("div", { id: headingId, className: "crewlet-change-list__heading", children: heading }),
+        /* @__PURE__ */ jsx("dl", { className: "crewlet-change-list__rows", "aria-labelledby": heading === void 0 || heading === null ? void 0 : headingId, children: rows.map((row, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "crewlet-change-list__row",
+              `crewlet-change-list__row--${row.kind}`,
+              row.kind !== "text" && row.block && "crewlet-change-list__row--block"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("dt", { className: "crewlet-change-list__label", children: row.label }),
+              /* @__PURE__ */ jsxs("dd", { className: "crewlet-change-list__value", children: [
+                row.kind === "text" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(WordDiff, { row, labels }),
+                  row.whole && row.whole.length > 0 ? /* @__PURE__ */ jsx(Disclosure, { title: labels.showWhole, headingLevel: "none", size: "compact", className: "crewlet-change-list__whole", children: /* @__PURE__ */ jsx(DiffList, { rows: [...row.whole], layout: "auto", labels: diffLabels }) }) : null
+                ] }) : /* @__PURE__ */ jsx(Value, { row, labels, inline: layout === "inline" }),
+                row.note === void 0 || row.note === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-change-list__note", children: row.note })
+              ] })
+            ]
+          },
+          `${index}:${row.label}`
+        )) })
+      ]
+    }
+  );
 }
 
 export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged };

package/dist/{chunk-OZAMLQY7.js → chunk-6R334YT3.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-W3VDHUJM.js';
+import { tabId } from './chunk-2IIHMJMZ.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';

package/dist/{chunk-MP7DGKB6.js → chunk-6X5PGHEX.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-BXOWAV46.js').then(
+  loading ??= import('./Editor-IMYESOW7.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-JNORDILD.js → chunk-7FF6CZW5.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { SegmentedControl } from './chunk-OZAMLQY7.js';
-import { tabId } from './chunk-W3VDHUJM.js';
+import { SegmentedControl } from './chunk-6R334YT3.js';
+import { tabId } from './chunk-2IIHMJMZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-BLCJRGDC.css';

package/dist/{chunk-DSMQTED5.js → chunk-BLGBD2D2.js}

@@ -1,5 +1,5 @@
 import { RefusalStrip, ReceiptStrip } from './chunk-ZWCK4N4L.js';
-import { ChangeList } from './chunk-BBD7PTBG.js';
+import { ChangeList } from './chunk-4XF7ENQA.js';
 import { StatusCard } from './chunk-RTMNULTL.js';
 import { Checkbox } from './chunk-LMQG3VPG.js';
 import { Disclosure } from './chunk-222VILSP.js';