@crewlethq/ui 0.32.0 → 0.34.0

package/dist/Charts/ActivityStrip.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface ActivityBucket {
     /** The bucket's start, epoch milliseconds. It is also the cell's key. */
     t: number;
@@ -21,6 +22,20 @@ export interface ActivityStripProps {
         total: number;
         buckets: number;
     }) => string;
+    /**
+     * Makes every cell READABLE, as every other chart's marks are: pointing at a
+     * cell, or walking the cells with ←/→ once the strip has focus, opens a
+     * tooltip with the bucket's time and value. Opt-in, because a strip is also
+     * a glance beside a row (a seat's last hour on Live), where a tab stop and a
+     * tooltip on every row of a list would be noise; a strip that is a figure of
+     * its own, on a dashboard, passes it.
+     */
+    reading?: {
+        formatTime: (at: number) => string;
+        format?: (value: number) => string;
+    } | undefined;
+    /** What the strip says in place of the cells when it has no bucket. */
+    emptyLabel?: ReactNode;
     className?: string;
 }
 /**
@@ -42,4 +57,4 @@ export interface ActivityStripProps {
  * ONE IMAGE, not sixty. The cells are marks in a single picture, so the
  * strip is the `img` and its label is the sentence.
  */
-export declare function ActivityStrip({ buckets, label, summary, className }: ActivityStripProps): import("react").JSX.Element;
+export declare function ActivityStrip({ buckets, label, summary, reading, emptyLabel, className, }: ActivityStripProps): import("react").JSX.Element;

package/dist/Charts/BarList.d.ts

@@ -26,6 +26,12 @@ export interface BarDatum {
     display?: ReactNode;
     /** A second line under the label. */
     sub?: ReactNode;
+    /**
+     * The bar's hue. Defaults to the first data hue for EVERY row: a ranked
+     * list is one series, and a hue per rank (blue, orange, green, amber, then
+     * the residual grey) gave five rows five identities the data does not have
+     * and painted the tail as "the rest" although every row is named.
+     */
     color?: string;
     /** Where the row leads. A link, wherever the destination is an address. */
     href?: string;

package/dist/Charts/ChartEmpty.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export interface ChartEmptyProps {
+    children: ReactNode;
+    /**
+     * The height of the plot it stands in for, as a CSS length, so a chart with
+     * nothing to draw keeps the height it would have drawn and a row of figures
+     * stays even. Left out, it is as tall as its sentence, or as its container
+     * when that is given a height.
+     */
+    height?: string | undefined;
+    /**
+     * Where the sentence stands: `center`, the default, in the middle of the
+     * plot it stands in for; `start` at the start of a list, where its rows
+     * would have begun.
+     */
+    align?: 'center' | 'start' | undefined;
+    className?: string | undefined;
+}
+/**
+ * What a chart says when it has nothing to draw.
+ *
+ * ONE SENTENCE IN THE CHART'S PLACE, the same for every chart in the kit. A
+ * chart of no data drew its scaffolding (an empty grid, a scale of 0 to 4, a
+ * track with nothing on it, a window starting at the epoch), which is a
+ * picture of a measurement that was never taken.
+ *
+ * IN THE MIDDLE OF THE PLOT, AT ITS HEIGHT. At the top left of a tall empty
+ * card the sentence read as a card that had failed to draw; centred in the
+ * area the plot would have filled, in the quiet ink, it reads as a chart with
+ * nothing in it, and the card keeps its height. A list's sentence stands
+ * where its rows would have begun (`align="start"`).
+ */
+export declare function ChartEmpty({ children, height, align, className }: ChartEmptyProps): import("react").JSX.Element;

package/dist/Charts/Legend.d.ts

@@ -12,6 +12,12 @@ export interface LegendItem {
     color?: string;
     /** The number beside the name, where the legend doubles as the readout. */
     value?: ReactNode;
+    /**
+     * The key's shape, which MIRRORS THE MARK it names: a `swatch` for a fill
+     * (a bar, a column, a part of a whole), the default, and a `line` for a
+     * series drawn as a line, so a reader matches a stroke to a stroke.
+     */
+    shape?: 'swatch' | 'line';
 }
 export interface LegendProps {
     items: LegendItem[];

package/dist/Charts/StackedBar.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface StackedSegment {
     /** Keyed by id, so a push that re-ranks the parts moves no other part. */
     id: string;
@@ -22,6 +23,8 @@ export interface StackedBarProps {
      * Defaults to the reader's own number format.
      */
     format?: (value: number) => string;
+    /** What the bar says in place of the track when no part holds anything. */
+    emptyLabel?: ReactNode;
     className?: string;
 }
 /**
@@ -53,4 +56,4 @@ export interface StackedBarProps {
  * `segments`, zero parts included, so the swatch in its reading is the hue the
  * Legend keyed from the same list shows.
  */
-export declare function StackedBar({ segments, summary, format, className }: StackedBarProps): import("react").JSX.Element;
+export declare function StackedBar({ segments, summary, format, emptyLabel, className, }: StackedBarProps): import("react").JSX.Element;

package/dist/Charts/StackedColumns.d.ts

@@ -9,7 +9,10 @@ export interface StackedColumnsSeries {
 export interface StackedColumnsBucket {
     /** The bucket's start, epoch milliseconds. It is the column's identity. */
     t: number;
-    /** Each series' value in this bucket, by series id. A missing id is zero. */
+    /**
+     * Each series' value in this bucket, by series id. A missing id is zero. A
+     * negative value stands below the zero line, its parts stacked down from it.
+     */
     values: Readonly<Record<string, number>>;
 }
 /**
@@ -66,10 +69,18 @@ export interface StackedColumnsProps {
      * a plot given none.
      */
     minHeight?: string;
-    /** How a value reads out, on the scale and in the tooltip. Defaults to a compact number. */
+    /** How a value reads out, in the tooltip and the summary. Defaults to a compact number. */
     format?: (value: number) => string;
+    /**
+     * How the scale's words read. Defaults to `format`. A scale is read at a
+     * glance, so a caller whose values carry a unit or every digit ("7,500 USD")
+     * passes the short form here and keeps the exact one for the tooltip.
+     */
+    formatScale?: (value: number) => string;
     /** How a bucket reads out, under the plot and in the tooltip. Defaults to the reader's date. */
     formatTime?: (at: number) => string;
+    /** What the chart says in place of the plot when there is no bucket to draw. */
+    emptyLabel?: ReactNode;
     /** The chart's own sentence. The default names the window, the tallest column and each series' total. */
     summary?: (facts: {
         from: number | null;
@@ -132,4 +143,4 @@ export declare function niceScale(peak: number, steps?: number): {
  * gap and a true 4px corner at any width, which a stretched SVG cannot, and no
  * style element is ever drawn.
  */
-export declare function StackedColumns({ series, buckets, hidden, label, legend, head, height, minHeight, format, formatTime, summary, className, }: StackedColumnsProps): import("react").JSX.Element;
+export declare function StackedColumns({ series, buckets, hidden, label, legend, head, height, minHeight, format, formatScale, formatTime, emptyLabel, summary, className, }: StackedColumnsProps): import("react").JSX.Element;

package/dist/Charts/TimeSeries.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface SeriesPoint {
     /** The bucket's start, epoch milliseconds. */
     t: number;
@@ -42,6 +43,15 @@ export interface TimeSeriesProps {
             peak: number;
         }[];
     }) => string;
+    /**
+     * Where the legend goes: `below`, the default, under the scale, or `none`
+     * for a screen that names the series somewhere the chart cannot reach, such
+     * as a card whose title names its one series. A split that answered one band
+     * still draws its key: nothing else names the band.
+     */
+    legend?: 'below' | 'none';
+    /** What the chart says in place of the plot when no series has a point. */
+    emptyLabel?: ReactNode;
     className?: string;
 }
 /**
@@ -72,7 +82,7 @@ export interface TimeSeriesProps {
  * contrast floors the palette suite measures, and a library's theming surface
  * is a second design system to keep in step with this one.
  */
-export declare function TimeSeries({ series, from, to, label, height, format, formatTime, summary, className, }: TimeSeriesProps): import("react").JSX.Element;
+export declare function TimeSeries({ series, from, to, label, height, format, formatTime, summary, legend, emptyLabel, className, }: TimeSeriesProps): import("react").JSX.Element;
 export interface SparklineProps {
     values: readonly number[];
     /**

package/dist/Charts/index.d.ts

@@ -12,6 +12,8 @@ export { TimeSeries, Sparkline } from './TimeSeries.js';
 export type { Series, SeriesPoint, SparklineProps, TimeSeriesProps } from './TimeSeries.js';
 export { StackedColumns, niceScale } from './StackedColumns.js';
 export type { StackedColumnsBucket, StackedColumnsHeight, StackedColumnsLegend, StackedColumnsProps, StackedColumnsSeries, } from './StackedColumns.js';
+export { ChartEmpty } from './ChartEmpty.js';
+export type { ChartEmptyProps } from './ChartEmpty.js';
 export { ChartTooltip } from './ChartTooltip.js';
 export type { ChartTooltipProps, ChartTooltipRow } from './ChartTooltip.js';
 export { useChartHover } from './useChartHover.js';

package/dist/Charts/index.js

@@ -1,3 +1,3 @@
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-77DRMDXR.js';
+export { ActivityStrip, BarList, ChartEmpty, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-HG5VF3TZ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Charts-RY4JN5FC.css → Charts-MBJG72BS.css}

@@ -39,6 +39,12 @@
   background: var(--crewlet-legend-swatch-color, var(--color-data-other));
 }
 
+.crewlet-legend__swatch--line {
+  width: 12px;
+  height: 2px;
+  border-radius: calc(var(--radius-xs) / 4);
+}
+
 .crewlet-legend__label {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -157,7 +163,7 @@
  */
 .crewlet-bar-list__sub,
 .crewlet-bar-list__more,
-.crewlet-bar-list__empty {
+.crewlet-chart-empty {
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
@@ -174,9 +180,22 @@
  * A card draws its own content in a body now, so a padding here is the panel's
  * inset a second time.
  */
-.crewlet-bar-list__empty {
+.crewlet-chart-empty {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
   margin: 0;
   padding: 0;
+  line-height: var(--font-line-height-normal);
+  text-align: center;
+}
+
+.crewlet-chart-empty--start {
+  display: block;
+  height: auto;
+  text-align: start;
 }
 
 .crewlet-bar-list__sub {
@@ -403,6 +422,8 @@
   row-gap: var(--spacing-1);
   margin: 0;
   min-width: 0;
+  /* Measured by its own width, for the dates under the plot. */
+  container: crewlet-stacked-columns / inline-size;
 }
 
 /*
@@ -427,12 +448,16 @@
   align-items: flex-end;
 }
 
+/*
+ * The scale's words are set as the dates under the plot are, the sans at the
+ * caption step with tabular figures, so the two axes of one chart read as one
+ * scale. They were the mono at the step below, beside dates in the sans.
+ */
 .crewlet-stacked-columns__tick {
   display: flex;
   align-items: center;
   height: 0;
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   line-height: var(--font-line-height-tight);
   color: var(--color-text-tertiary);
   font-variant-numeric: tabular-nums;
@@ -447,7 +472,7 @@
  * keeps that half line above the plot itself.
  */
 .crewlet-stacked-columns--headless {
-  padding-block-start: calc(var(--font-size-2xs) * var(--font-line-height-tight) / 2);
+  padding-block-start: calc(var(--font-size-xs) * var(--font-line-height-tight) / 2);
 }
 
 .crewlet-stacked-columns__plot {
@@ -497,14 +522,23 @@
 /*
  * THE COLUMN IS ITS TOTAL'S HEIGHT (a style property), and its parts share it
  * by value, first series at the baseline. They stand 2px apart for the reason
- * a stacked bar's do, and the gap comes out of the parts.
+ * a stacked bar's do, and the gap comes out of the parts. It stands on the
+ * zero line (a style property), centred in its slot; the column of a
+ * bucket's negative parts hangs from the same line, first series nearest it.
  */
 .crewlet-stacked-columns__column {
+  position: absolute;
+  inset-inline-start: 50%;
   display: flex;
   flex-direction: column-reverse;
   gap: 2px;
   width: 63%;
-  max-width: var(--spacing-7);
+  max-width: var(--spacing-6);
+  transform: translateX(-50%);
+}
+
+.crewlet-stacked-columns__column--below {
+  flex-direction: column;
 }
 
 .crewlet-stacked-columns__segment {
@@ -516,13 +550,19 @@
   background: var(--crewlet-stacked-columns-segment-color, var(--color-data-other));
 }
 
-/* The VALUE END: the top of the topmost part, rounded at the smallest step.
-   The foot stays square on the baseline every column shares. */
-.crewlet-stacked-columns__segment:last-child {
+/* The VALUE END: the top of the topmost part, rounded at the smallest step
+   (the foot of the lowest one, below zero). The end on the zero line stays
+   square, where every column starts. */
+.crewlet-stacked-columns__column:not(.crewlet-stacked-columns__column--below) > .crewlet-stacked-columns__segment:last-child {
   border-top-left-radius: var(--radius-xs);
   border-top-right-radius: var(--radius-xs);
 }
 
+.crewlet-stacked-columns__column--below > .crewlet-stacked-columns__segment:last-child {
+  border-bottom-left-radius: var(--radius-xs);
+  border-bottom-right-radius: var(--radius-xs);
+}
+
 .crewlet-stacked-columns__scale {
   position: relative;
   grid-column: 2;
@@ -574,7 +614,9 @@
   margin-top: var(--spacing-2);
 }
 
-/* The middle label stands on the column it names (a style property). */
+/* The middle label stands on the column it names (a style property). On a
+   chart too narrow for three dates it leaves the line to the two ends, which
+   it ran into; the tooltip reads every column's date. */
 .crewlet-stacked-columns__middle {
   position: absolute;
   top: 0;
@@ -582,6 +624,16 @@
   white-space: nowrap;
 }
 
+.crewlet-stacked-columns__scale > span {
+  white-space: nowrap;
+}
+
+@container crewlet-stacked-columns (width < 22rem) {
+  .crewlet-stacked-columns__middle {
+    display: none;
+  }
+}
+
 /* ─── The reading layer: a focusable plot and its tooltip ─────── */
 
 /*
@@ -681,13 +733,18 @@
   background: var(--crewlet-chart-tooltip-swatch-color, var(--color-data-other));
 }
 
+/* A name too long for the box ends in an ellipsis before its value: it ran
+   under the number ("lifec1,397 USD"). The value is never cut. */
 .crewlet-chart-tooltip__name {
   flex: 1;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--color-text-secondary);
 }
 
 .crewlet-chart-tooltip__value {
+  flex: none;
   color: var(--color-text-primary);
   font-variant-numeric: tabular-nums;
 }
@@ -710,9 +767,14 @@
   width: 100%;
 }
 
+/*
+ * A cell shares the strip's width with the others, up to a column's width,
+ * so a strip of one day is one mark rather than a slab across the figure.
+ */
 .crewlet-activity-strip__cell {
   flex: 1;
   min-width: var(--crewlet-activity-strip-cell-min-width, 2px);
+  max-width: var(--crewlet-activity-strip-cell-max-width, var(--spacing-6));
   height: var(--crewlet-activity-strip-fill, 10%);
   /*
    * A quarter of the smallest step. A cell is two pixels wide, so at the step
@@ -730,6 +792,12 @@
   background: var(--color-data-1);
 }
 
+/* The cell being read lifts, as a column being read does, by the hover step
+   behind it rather than by a second colour. */
+.crewlet-activity-strip__cell.is-read {
+  box-shadow: 0 0 0 2px var(--color-surface-hover);
+}
+
 /* ─── Time series, and the sparkline beside a number ──────────── */
 
 /*
@@ -756,14 +824,16 @@
 }
 
 /*
- * The grid is DASHED, which is what keeps three horizontal lines from reading
- * as three series. They carry no values of their own: the peak under the plot
- * is the scale, and a chart this size cannot label four gridlines legibly.
+ * The grid is a SOLID HAIRLINE in the default border, the ink the column
+ * chart's grid is drawn in. It was dashed, so that three lines would
+ * not read as three series, but a one pixel rule in a border ink beside a two
+ * pixel line in a data hue reads as neither, and a dash is how a chart says
+ * "projection" or "threshold". The lines carry no values of their own: the
+ * peak under the plot is the scale.
  */
 .crewlet-chart__grid-line {
   stroke: var(--color-border-default);
   stroke-width: 1;
-  stroke-dasharray: 2 4;
 }
 
 /*
@@ -788,7 +858,34 @@
   pointer-events: none;
 }
 
-/* The window's two ends and its peak, under the plot: the scale, as words. */
+/*
+ * A POINT: a disc 8px across in its series' hue, cut out of the ground by a
+ * 2px ring of the card (`--crewlet-spark-ground`, as a sparkline's point is),
+ * centred on its value. It stands over the plot rather than in it, so it stays
+ * round at every width, and is drawn for a series of one point and for every
+ * series at the instant being read.
+ */
+.crewlet-time-series__dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--crewlet-time-series-dot-color, var(--color-data-other));
+  box-shadow: 0 0 0 2px var(--crewlet-spark-ground, var(--color-surface-subtle));
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/*
+ * The window's two ends and its peak, under the plot: the scale, as words.
+ * The ends hold their words whole and the range between them gives way, so a
+ * narrow chart never runs one into another; under 18rem the range leaves the
+ * line to the tooltip and the summary, which carry it too.
+ */
+.crewlet-time-series {
+  container: crewlet-time-series / inline-size;
+}
+
 .crewlet-time-series__scale {
   display: flex;
   justify-content: space-between;
@@ -799,6 +896,33 @@
   font-variant-numeric: tabular-nums;
 }
 
+.crewlet-time-series__scale > span {
+  flex: none;
+  white-space: nowrap;
+}
+
+/* A window of one instant is drawn at the plot's middle, and so is its date. */
+.crewlet-time-series__scale--instant {
+  justify-content: center;
+}
+
+.crewlet-time-series__scale > .crewlet-time-series__range {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@container crewlet-time-series (width < 18rem) {
+  .crewlet-time-series__range {
+    display: none;
+  }
+}
+
+.crewlet-time-series__legend {
+  margin-top: var(--spacing-2);
+}
+
 /*
  * THE SPARKLINE: the plot stretched to the box, and, with `current`, one
  * accent point on the last value.

package/dist/Checkbox/index.js

@@ -1,4 +1,4 @@
-export { Checkbox, CheckboxGroup } from '../chunk-7T42VQQT.js';
+export { Checkbox, CheckboxGroup } from '../chunk-CPEPST4S.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{Checkbox-5UORUG3F.css → Checkbox-ALWG3WV2.css}

@@ -108,6 +108,17 @@
 .crewlet-checkbox--sm {
   --crewlet-checkbox-size: 14px;
 
+  /*
+   * ITS LINE IS CENTRED IN THE ROW. The row's floor was a minimum height with
+   * the label at its top, so in a form row of small inputs (whose text sits
+   * on their middle) the box and its label stood 5px above the line every
+   * other control's text was on. The floor is made of equal padding round
+   * the first line instead: one line comes out exactly the row's height with
+   * the text on its middle, and a longer label grows the row downwards with
+   * the box still on its first line.
+   */
+  min-height: 0;
+  padding-block: calc((var(--size-row-sm) - var(--font-line-height-snug) * 1em) / 2);
   font-size: var(--font-size-compact);
 }
 

package/dist/CommandPalette/index.js

@@ -1,11 +1,11 @@
-export { CommandPalette } from '../chunk-VVRL27HM.js';
-import '../chunk-I3KKZ2O3.js';
+export { CommandPalette } from '../chunk-ULPL26BU.js';
+import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{CommandPalette-HBTNKHZQ.css → CommandPalette-7CFGVBND.css}

@@ -147,7 +147,11 @@
   background: var(--color-surface-background);
 }
 
+/* THE LEGEND SPANS THE BAND: a palette's foot has no actions, so its start
+   slot takes the whole width, and a consumer that ends the legend with what
+   the search is doing can push that to the band's end. */
 .crewlet-palette .crewlet-modal__footer-start {
+  flex: 1 1 auto;
   gap: var(--spacing-4);
   font-size: var(--font-size-xs);
 }

package/dist/CommentThread/index.js

@@ -1,13 +1,13 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-GR55WT4R.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IYO2N5ZH.js';
 import '../chunk-7DZDSSJS.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-M3LUNN7F.js';
-import '../chunk-4KP4RC3O.js';
+import '../chunk-TYKQ33CL.js';
+import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Container/index.js

@@ -1,2 +1,2 @@
-export { Container } from '../chunk-QVE4GJAT.js';
+export { Container } from '../chunk-HJO4WCH6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Container-3TSKMGNI.css → Container-34BAKG7B.css}

@@ -45,8 +45,10 @@
   max-width: none;
 }
 
+/* A PHONE'S GUTTER IS THE SHELL'S, 16px, the top bar's own inset: a narrower
+   one stood a page's content left of the title over it. */
 @media (max-width: 480px) {
   .crewlet-container {
-    padding-inline: var(--spacing-3);
+    padding-inline: var(--spacing-4);
   }
 }

package/dist/{DashboardCover-RMINBODB.css → DashboardCover-KYGYMRKW.css}

@@ -11,23 +11,27 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * THE FIGURES ARE ROWS, the label at the start and the figure (or the dataset
+ * it cites) at the end. Three tiles side by side gave each label a third of a
+ * card's width, so every one was cut to its first word ("Open w…" over "Open
+ * w…"); a row gives the label the card's width, which is what says what the
+ * board measures.
+ */
 .crewlet-dashboard-cover--stats {
   display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
-  align-items: center;
+  grid-auto-rows: minmax(0, 1fr);
   gap: var(--spacing-2);
 }
 
 .crewlet-dashboard-cover__stat {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--spacing-1);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
   min-width: 0;
-  height: 100%;
-  max-height: 100%;
-  padding: var(--spacing-2) var(--spacing-3);
+  min-height: 0;
+  padding: 0 var(--spacing-3);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
   background: var(--color-surface-elevated);
@@ -42,6 +46,33 @@
   white-space: nowrap;
 }
 
+.crewlet-dashboard-cover__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-dashboard-cover__value {
+  flex: none;
+  max-width: 50%;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-dashboard-cover__source {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .crewlet-dashboard-cover__label {
   color: var(--color-text-secondary);
 }
@@ -58,6 +89,8 @@
 }
 
 .crewlet-dashboard-cover__source {
+  flex: 0 1 auto;
+  max-width: 50%;
   color: var(--color-text-tertiary);
 }