@crewlethq/ui 0.14.0 → 0.15.1

package/README.md

@@ -198,6 +198,36 @@ 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.15.1
+
+`@crewlethq/icons`: every Crewlet character is centred on its optical centre rather than its bounding box, and its face and holes are cut into its own paths rather than masked, so a slit shows the badge's plate in every hue and theme, and inside `OrgLabel` or `AddPill` no longer fills with ink. The page's fold is drawn at full detail only, as the keyline is. What to change: nothing.
+
+## Changes in 0.15.0
+
+0.15.0 gives the rail's foot a row that opens a panel, which is what the engine console's engine panel is built from. It also keeps an unread failure on screen, lets the column chart fill a stretched card, and wraps its legend on a narrow one.
+
+**`AppShell.RailRow` opens a panel.** It hands its element to `ref`, and a row with `onClick` passes `aria-expanded`, `aria-haspopup` and `aria-controls` through to its button, so it is the trigger of a `Popover` or a `Menu` as it is. A row that opens something ends in an upward chevron, and keeps the hover's lift while its panel is open, drawn from `aria-expanded`. A row nothing presses refuses all three in its type, as it refuses `label`.
+
+**`AppShell.RailRow` takes a `count`**: `{ value, label, mark?, tone? }` (`RailRowCount`), drawn after the words as a count in the nav is, and read as the end of the row's name ("Engine serving, 5 alarms"). `tone: 'warning'` draws the figure and its mark in the warning ink, which `@crewlethq/tokens` now holds to 4.5:1 on the rail and under the hover overlay in every theme.
+
+**A control in the rail's foot is a row of the rail's own grammar.** A `RailRow` with `onClick` and no `detail`, and a control dropped into the foot, stand on the nav row's 30px step with its glyph gap, its compact medium words and its secondary ink, and the row's mark takes a nav glyph's 14px width, so its words start where the nav's words start. A row the rail only states keeps the status line's caption, and a row with a `detail` keeps the status block.
+
+**`DescriptionList` takes `fit`**: the term column is as wide as its longest term, and the pairs stay side by side at every width, for a panel of its own width such as a popover.
+
+**A `Stack` or an `Inline` drawn as a list** (`as="ul"` or `as="ol"`) takes back the browser's list margins, indent and markers, and stays a list to a screen reader.
+
+**A `Popover` its own content closes hands focus back to its trigger**, as Escape does, when focus was inside the panel: the control that closed it goes with the panel, and focus used to fall to the page's body. A close while focus is elsewhere leaves it there.
+
+**A panel opened from the open drawer is drawn above it.** A `LayerHost`'s target takes no z-index of its own any more, so every surface in it stacks by its own step in the layer band. It used to be a stacking context at the bottom of the band, which held everything inside it under the shell's open drawer: a popover or a dialog opened from the drawer, below the shell breakpoint, was drawn under the drawer.
+
+**A sticky toast is never evicted.** `ToastProvider` kept its newest `max` toasts whatever they were, so the next one took away a failure nobody had read. Over `max`, the oldest toast that would have gone by itself goes now. A failure, a warning, a variant of your own that names no duration and any toast given `duration: 0` stay until they are dismissed, and when every toast held is sticky none goes: the stack holds more than `max` until the reader dismisses some, and the new toast is drawn too. A failure that can be raised again and again takes an `id`, so each repeat replaces its own strip.
+
+**`StackedColumns` takes `height="fill"`.** In a card that a taller neighbour stretches, the chart grows into the spare height and spends all of it on the plot, so nothing opens between the dates and what stands under them. The figure flexes, its rows are `auto` / `minmax(minHeight, 1fr)` / `auto`, and the axis and the plot stand at the whole of the plot's row. `minHeight` is the plot's least height, 11.5rem by default, and its height wherever nothing stretches it. `StackedColumnsHeight` and `StackedColumnsLegend` are exported.
+
+**A `StackedColumns` legend in the head wraps.** On a card too narrow for the heading and the legend side by side, the legend takes a row of its own under the heading, still flushed to the end, rather than standing beside the title as a column of one series a line. Where both fit, nothing moves.
+
+What to change: a screen that leaned on `max` to clear old failures now keeps them until they are dismissed; give a repeated failure an `id`, and take one back with `useToast().dismiss(id)` once its condition clears. A test that reads a foot control's caption ink, its regular weight or its 34px height reads the nav row's. Everything else is new.
+
 ## Changes in 0.14.0
 
 0.14.0 draws toasts as the first release did and quiets the pickers.

package/dist/AddPill/index.js

@@ -1,3 +1,3 @@
-export { ADD_PILL_MS, AddPill } from '../chunk-74WGARJE.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-TROLVEZY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AddPill-V4TQXJ53.css → AddPill-RYCY56P4.css}

@@ -408,7 +408,9 @@
 /* THE FILL IS FOR A FILLED DRAWING, and a glyph is a stroke. Painting the
    inside of a Lucide glyph turns every closed shape in it solid and every
    open one into a smear, so a `.crewlet-glyph` keeps the fill its own frame
-   decides and takes the ink through its stroke, which is `currentColor`. */
+   decides and takes the ink through its stroke, which is `currentColor`.
+   A drawing here cuts its holes as geometry, never through a mask: this rule
+   repaints a mask's paths and groups as well, and fills its holes with ink. */
 .crewlet-add-pill__section svg:not(.crewlet-glyph),
 .crewlet-add-pill__section svg:not(.crewlet-glyph) g,
 .crewlet-add-pill__section svg:not(.crewlet-glyph) path {

package/dist/AppShell/AppShell.d.ts

@@ -37,7 +37,8 @@
  * because a rail translated out of view keeps every link in the tab order and
  * a keyboard reader walks through a dozen stops nobody can see.
  */
-import { type HTMLAttributes, type MouseEventHandler, type ReactNode, type Ref } from 'react';
+import { type AriaAttributes, type HTMLAttributes, type MouseEventHandler, type ReactNode, type Ref } from 'react';
+import type { Tone } from '../utils/tone.js';
 /** What the shell tells the components inside it. */
 interface AppShellContextValue {
     /** Whether the layout is below the shell breakpoint. */
@@ -101,7 +102,7 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
 export declare function AppShell({ sidebar, topbar, banner, footer, mainId, mainRef, fill, navigationKey, toggleLabel, skipLabel, className, style, children, ...rest }: AppShellProps): import("react").JSX.Element;
 export declare namespace AppShell {
     var Rail: typeof AppShellRail;
-    var RailRow: typeof AppShellRailRow;
+    var RailRow: import("react").ForwardRefExoticComponent<AppShellRailRowProps & import("react").RefAttributes<HTMLElement>>;
     var Topbar: typeof AppShellTopbar;
     var Toggle: typeof AppShellToggle;
 }
@@ -119,6 +120,37 @@ export interface AppShellRailProps {
 }
 /** The rail's three regions: a head, a scrolling middle, and a foot. */
 export declare function AppShellRail({ header, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
+/**
+ * A figure at the end of a row in the foot, and what it counts.
+ *
+ * VALUES RATHER THAN AN ELEMENT, for the reason `NavItem`'s figures are
+ * values: the rail paints the figure, so its ink is held to its floor on
+ * every ground the row can have, the row a panel is open from included, and
+ * that is a fact about the rail rather than something a call site can be
+ * asked to know.
+ */
+export interface RailRowCount {
+    /** The figure, drawn as given, so the caller decides its formatting. */
+    value: number | string;
+    /**
+     * What is counted, read after the figure as part of the row's name:
+     * `alarms` makes the engine's row "Engine serving, 5 alarms". Required,
+     * because a figure read with no word after it is a number nobody can place.
+     */
+    label: string;
+    /**
+     * A mark before the figure: the triangle beside a count of alarms.
+     * Decoration, because the label says the same thing in words.
+     */
+    mark?: ReactNode;
+    /**
+     * `warning` draws the figure and its mark in the warning ink, for a count
+     * of things that are wrong: the alarms standing on a node. The figure is
+     * never the only carrier, since its mark and its label say the same. Left
+     * out, it is the quiet figure a count in the nav is, in the tertiary ink.
+     */
+    tone?: Extract<Tone, 'neutral' | 'warning'> | undefined;
+}
 /** What a row in the rail's foot holds, whether or not it is a control. */
 interface RailRowContent {
     /**
@@ -128,11 +160,19 @@ interface RailRowContent {
      */
     icon?: ReactNode;
     /**
-     * A value at the end of the row: a count, a tag, a time. It stands beside
-     * the words while both fit on the rail, and drops under them when they do
-     * not, so it never takes the room the words need.
+     * A value at the end of the row: a tag, a time. It stands beside the words
+     * while both fit on the rail, and drops under them when they do not, so it
+     * never takes the room the words need. A figure with words that name it is
+     * `count`.
      */
     trailing?: ReactNode;
+    /**
+     * How many of something the row reports, as a figure after the words: the
+     * alarms standing on the engine. It is read as the end of the row's name
+     * (", 5 alarms") and hidden from assistive technology where it is drawn, so
+     * each reader is told it once.
+     */
+    count?: RailRowCount | undefined;
     /**
      * A second line under the row's words: "3 nodes · config epoch 42" under
      * "Engine healthy". Given one, the row is the design's STATUS BLOCK, drawn
@@ -148,23 +188,43 @@ interface RailRowContent {
 export interface StaticRailRowProps extends RailRowContent {
     onClick?: undefined;
     label?: undefined;
+    'aria-expanded'?: undefined;
+    'aria-haspopup'?: undefined;
+    'aria-controls'?: undefined;
 }
 /** A row that opens something: the engine panel, an account menu. */
 export interface ActionRailRowProps extends RailRowContent {
     onClick: MouseEventHandler<HTMLButtonElement>;
     /**
      * Names the control where its own words are not a name: "engine connected"
-     * names a state rather than what pressing it does.
+     * names a state rather than what pressing it does. It replaces the name the
+     * row's words and its count would give it, so it says the count too.
      */
     label?: string | undefined;
+    /**
+     * Whether the panel this row opens is open. A `Popover` or a `Menu` the row
+     * is the trigger of passes this and the two below, and the row draws its
+     * open state from it, so the picture and what a screen reader is told
+     * cannot come apart.
+     */
+    'aria-expanded'?: boolean | undefined;
+    /**
+     * What the row opens. Given one, the row ends in a chevron pointing up,
+     * which is where a panel opened from the rail's foot stands.
+     */
+    'aria-haspopup'?: AriaAttributes['aria-haspopup'];
+    /** The panel the row opens, while it is open. */
+    'aria-controls'?: string | undefined;
 }
 /**
  * A row in the rail's foot.
  *
- * `label` is refused without `onClick` by the type rather than ignored at
- * runtime: `aria-label` on an element with no role is dropped by assistive
- * technology, so a name passed to a row nothing presses is a name nobody is
- * ever told, and a silent no-op is the shape a caller cannot debug.
+ * `label` and the three popup attributes are refused without `onClick` by the
+ * type rather than ignored at runtime: `aria-label` on an element with no role
+ * is dropped by assistive technology, and `aria-expanded` on one is a state of
+ * a control that does not exist, so either passed to a row nothing presses is
+ * something nobody is ever told, and a silent no-op is the shape a caller
+ * cannot debug.
  */
 export type AppShellRailRowProps = StaticRailRowProps | ActionRailRowProps;
 /**
@@ -183,8 +243,13 @@ export type AppShellRailRowProps = StaticRailRowProps | ActionRailRowProps;
  * a dropped-in control is a row in the rail rather than a control sitting on a
  * toolbar's inset. This is still the one to reach for, because it is also the
  * thing that decides whether the row is a control at all.
+ *
+ * A ROW THAT OPENS A PANEL IS THE PANEL'S TRIGGER, as it is: the element is
+ * handed to `ref`, and the popup attributes a `Popover` or a `Menu` gives its
+ * trigger reach the button, so the panel is anchored to the row and the row
+ * says whether it is open.
  */
-export declare function AppShellRailRow({ icon, trailing, detail, onClick, label, className, children }: AppShellRailRowProps): import("react").JSX.Element;
+export declare const AppShellRailRow: import("react").ForwardRefExoticComponent<AppShellRailRowProps & import("react").RefAttributes<HTMLElement>>;
 export interface AppShellToggleProps {
     className?: string | undefined;
 }

package/dist/AppShell/index.d.ts

@@ -1,3 +1,3 @@
 import './AppShell.css';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './AppShell.js';
-export type { ActionRailRowProps, AppShellContextValue, AppShellProps, AppShellRailProps, AppShellRailRowProps, AppShellToggleProps, AppShellTopbarProps, StaticRailRowProps, } from './AppShell.js';
+export type { ActionRailRowProps, AppShellContextValue, AppShellProps, AppShellRailProps, AppShellRailRowProps, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, } from './AppShell.js';

package/dist/AppShell/index.js

@@ -1,7 +1,7 @@
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-L3CTFFLZ.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-H3XOMT7W.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AppShell-CEVLW4QG.css → AppShell-6QUD7NWM.css}

@@ -215,7 +215,44 @@
     color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-.crewlet-app-shell__rail-row--action:hover {
+/*
+ * A CONTROL IN THE FOOT IS A ROW OF THE RAIL'S OWN GRAMMAR: the nav row's 30px
+ * step, its glyph-to-word gap, its word size and weight, and its secondary ink
+ * lifting to the primary under the pointer, as Settings above it is drawn. So
+ * the engine's row under Settings reads as one more row of the rail rather
+ * than as a caption, its words start on the line the nav's words start on, and
+ * it keeps one height in every state it says: one line of the compact step.
+ * A status line the rail only states keeps the quieter caption above, and the
+ * status block keeps its card.
+ *
+ * Its mark takes a nav glyph's width, `sm` (14px), whatever the mark is, so a
+ * 7px status dot is centred where the glyph above it is centred and the words
+ * beside it start where "Settings" starts.
+ */
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn {
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-height: var(--size-nav-row);
+  padding-block: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-snug);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block) > .crewlet-app-shell__rail-row-icon {
+  min-width: 14px;
+}
+
+/*
+ * OPEN IS POINTED AT. The row a panel is open from keeps the hover's lift for
+ * as long as the panel is open, drawn from `aria-expanded` so the picture and
+ * what a screen reader is told cannot come apart, as the switcher's trigger
+ * draws it.
+ */
+.crewlet-app-shell__rail-row--action:hover,
+.crewlet-app-shell__rail-row--action[aria-expanded='true'] {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
@@ -293,6 +330,42 @@
   flex: none;
 }
 
+/*
+ * THE COUNT: how many of something the row reports, after its words, drawn as
+ * a count in the nav is: the caption step, tabular figures so a count that
+ * ticks up does not move the words beside it, and a mark half a step off the
+ * figure. It is the tertiary step, as the nav's is, unless what it counts is
+ * wrong: a warning count is the warning ink, figure and mark together, which
+ * @crewlethq/tokens holds to 4.5:1 on the rail and under the hover overlay
+ * (RAIL_PAINTS), so on the row a panel is open from too.
+ */
+.crewlet-app-shell__rail-row-count {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: calc(var(--spacing-1) + 1px);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-app-shell__rail-row-count-mark {
+  display: inline-flex;
+}
+
+.crewlet-app-shell__rail-row-count--warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* The chevron that says the row opens a panel, in the quiet step: a mark, not
+   a word, and it stays quiet while the row lifts, as the panel's own name is
+   what a reader is told. */
+.crewlet-app-shell__rail-row-opens {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
 /*
  * THE STATUS BLOCK: a row given a `detail` is the approved design's engine
  * status, its words over a second line, on the card rung inside the plain

package/dist/Avatar/index.js

@@ -1,3 +1,3 @@
-export { AvatarStack, avatarStackLabel } from '../chunk-6NIZCQUM.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-ZPWUVVIB.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Avatar-BPJ36QZR.css → Avatar-I4NFP3WQ.css}

@@ -160,9 +160,9 @@
 
 /*
  * THE CHARACTER FILLS MOST OF THE PLATE, centred by its own frame (it frames
- * every silhouette square on what it draws), with the plate's corner clear of
- * it: a wide character such as the original Crewlet reaches the plate's
- * sides, a tall one its top and its foot, and none touches the curve.
+ * every silhouette square on its optical centre), with the plate's corner
+ * clear of it: a wide character such as the original Crewlet reaches the
+ * plate's sides, a tall one its top and its foot, and none touches the curve.
  */
 .crewlet-avatar--character {
   border: 1px solid transparent;

package/dist/AvatarPicker/index.js

@@ -1,13 +1,13 @@
-export { AvatarPicker } from '../chunk-4FFHJBEN.js';
+export { AvatarPicker } from '../chunk-EFNHOVC2.js';
 import '../chunk-NXDEPUVG.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
-import '../chunk-O2ZDZZS7.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-YXMCUKFI.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-HI6Q2UXQ.js';

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-2PZBIHRV.js';
-import '../chunk-53DVJCVW.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-AMH67MLM.js';
+import '../chunk-VYOKRN2I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Charts/StackedColumns.d.ts

@@ -17,12 +17,24 @@ export interface StackedColumnsBucket {
  *
  * `below`, the default, under the dates. `head` at the END of the chart's head
  * row, top right, where the design's Spend card draws it beside the card's
- * title: pass that title as `head` and the two share one line. `none` draws no
- * legend, for a screen that names the series somewhere the chart cannot reach;
- * the chart is then that screen's to caption, and a stacked figure without its
- * legend is a picture of some numbers.
+ * title: pass that title as `head` and the two share one line wherever both
+ * fit, while on a card too narrow for both the legend drops to a row of its
+ * own under the title, still at the end. `none` draws no legend, for a screen
+ * that names the series somewhere the chart cannot reach; the chart is then
+ * that screen's to caption, and a stacked figure without its legend is a
+ * picture of some numbers.
  */
 export type StackedColumnsLegend = 'below' | 'head' | 'none';
+/**
+ * How tall the plot is: a CSS length, or `fill`.
+ *
+ * `fill` is for a chart its container stretches, such as a card beside a
+ * taller one in a row of one height. The figure flexes into the height it is
+ * given and spends all of it on the plot, so the spare height opens inside
+ * the plot rather than as a band of nothing under the dates. Wherever nothing
+ * stretches it, the plot is `minHeight` tall.
+ */
+export type StackedColumnsHeight = 'fill' | (string & {});
 export interface StackedColumnsProps {
     /**
      * Every series the figure CAN draw, in stacking order: the first stands on
@@ -46,8 +58,14 @@ export interface StackedColumnsProps {
      * row over the plot, with the legend at its end when `legend` is `head`.
      */
     head?: ReactNode;
-    /** How tall the plot is, as a CSS length. */
-    height?: string;
+    /** How tall the plot is, as a CSS length, or `fill`: see the type. Defaults to 11.5rem. */
+    height?: StackedColumnsHeight;
+    /**
+     * The least height of a `fill` plot, as a CSS length, which is its height
+     * wherever nothing stretches the figure. Defaults to 11.5rem, the height of
+     * a plot given none.
+     */
+    minHeight?: string;
     /** How a value reads out, on the scale and in the tooltip. Defaults to a compact number. */
     format?: (value: number) => string;
     /** How a bucket reads out, under the plot and in the tooltip. Defaults to the reader's date. */
@@ -105,8 +123,13 @@ export declare function niceScale(peak: number, steps?: number): {
  * under the dates or at the end of the chart's head, top right, as the
  * design's Spend card has it.
  *
+ * IT CAN TAKE THE HEIGHT IT IS GIVEN. Drawn at a fixed height in a card that a
+ * taller neighbour stretched, the plot stopped where its length said and the
+ * rest of the card was a band of nothing under the dates; `height="fill"`
+ * spends that height on the plot instead (see the type).
+ *
  * All of it is HTML positioned by style properties, so it holds a crisp 2px
  * 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, format, formatTime, summary, className, }: StackedColumnsProps): import("react").JSX.Element;
+export declare function StackedColumns({ series, buckets, hidden, label, legend, head, height, minHeight, format, formatTime, summary, className, }: StackedColumnsProps): import("react").JSX.Element;

package/dist/Charts/index.d.ts

@@ -11,7 +11,7 @@ export type { ActivityBucket, ActivityStripProps } from './ActivityStrip.js';
 export { TimeSeries, Sparkline } from './TimeSeries.js';
 export type { Series, SeriesPoint, SparklineProps, TimeSeriesProps } from './TimeSeries.js';
 export { StackedColumns, niceScale } from './StackedColumns.js';
-export type { StackedColumnsBucket, StackedColumnsProps, StackedColumnsSeries } from './StackedColumns.js';
+export type { StackedColumnsBucket, StackedColumnsHeight, StackedColumnsLegend, StackedColumnsProps, StackedColumnsSeries, } from './StackedColumns.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-4WNNEDKO.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-MLT2HBPN.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Charts-JUERFLAR.css → Charts-JYW4X5ZL.css}

@@ -405,6 +405,16 @@
   min-width: 0;
 }
 
+/*
+ * A FILL CHART GROWS INTO THE HEIGHT IT IS GIVEN (`height="fill"`). The figure
+ * flexes, so in a card a taller neighbour stretches it takes the spare height,
+ * and its rows (a style property) spend all of it on the plot's row. Nowhere to
+ * grow, it is as tall as its content, the plot at its least.
+ */
+.crewlet-stacked-columns--fill {
+  flex: 1 1 auto;
+}
+
 /*
  * EACH WORD IS A BOX OF NO HEIGHT, spread from the top of the plot to its
  * baseline, with the word centred on it: so every word stands exactly on the
@@ -519,12 +529,19 @@
  * legend at its END, top right, where the design's Spend card draws it; the
  * legend is flushed to the end of that row and wraps from there. Below, the
  * legend starts under the axis, a step clear of the dates.
+ *
+ * ON A CARD TOO NARROW FOR BOTH, THE LEGEND TAKES A ROW OF ITS OWN, under the
+ * heading and still flushed to the end. Held on one line, the two shrank
+ * together and the legend stood beside the title as a column of one series a
+ * line. The rows stand a step apart, closer than the head stands to the plot,
+ * so the legend still reads as the head's.
  */
 .crewlet-stacked-columns__head {
   grid-column: 1 / -1;
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
-  gap: var(--spacing-4);
+  gap: var(--spacing-2) var(--spacing-4);
   margin-bottom: var(--spacing-3);
   min-width: 0;
 }

package/dist/CommandPalette/index.js

@@ -1,5 +1,5 @@
-export { CommandPalette } from '../chunk-WYQOHFML.js';
-import '../chunk-TFMJH2E6.js';
+export { CommandPalette } from '../chunk-IYZZL3MZ.js';
+import '../chunk-K4VORB64.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
@@ -7,7 +7,7 @@ import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-3VVKJ7AZ.js';
-import '../chunk-TFH6SYWB.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-TK6YC5QT.js';
+import '../chunk-NS7BVLL3.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-TFMJH2E6.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-K4VORB64.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,25 +1,25 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-5IXMLWGW.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-4EOJR52M.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-3VVKJ7AZ.js';
-import '../chunk-TFH6SYWB.js';
+import '../chunk-TK6YC5QT.js';
+import '../chunk-NS7BVLL3.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-AXNQCAFC.js';
+import '../chunk-GUHP5JHC.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-TFMJH2E6.js';
+import '../chunk-5VNUYO76.js';
+import '../chunk-K4VORB64.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
-import '../chunk-5VNUYO76.js';
-import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-GXQ3B46I.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-O2ZDZZS7.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-AXNQCAFC.js';
-import '../chunk-GXQ3B46I.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-GUHP5JHC.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-GXQ3B46I.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-O2ZDZZS7.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-BWRGFKJP.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DescriptionList/DescriptionList.d.ts

@@ -4,6 +4,14 @@ export type DescriptionListEntry = readonly [term: ReactNode, detail: ReactNode]
 export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
     /** Tightens the rhythm for a panel that carries a dozen pairs. */
     dense?: boolean | undefined;
+    /**
+     * Sizes the term column to its longest term, and keeps each term beside its
+     * detail at every width: for a small panel whose terms are a word each
+     * ("Nodes", "Up"). The default column is 120px at the least and stacks on a
+     * narrow screen, which in a panel of a fixed width spends that width on the
+     * space after "Up" and stacks a list the panel had room to lay side by side.
+     */
+    fit?: boolean | undefined;
     /**
      * The pairs. Given as tuples so a caller can build them from a record
      * without inventing a key for each one; `DescriptionList.Item` children are
@@ -24,7 +32,7 @@ export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
  * Each pair is wrapped in a `div`, which HTML allows inside a `dl` and which
  * is what lets one pair be one grid row.
  */
-export declare function DescriptionList({ dense, items, className, children, ...rest }: DescriptionListProps): import("react").JSX.Element;
+export declare function DescriptionList({ dense, fit, items, className, children, ...rest }: DescriptionListProps): import("react").JSX.Element;
 export declare namespace DescriptionList {
     var Item: typeof DescriptionListItem;
 }

package/dist/DescriptionList/index.js

@@ -1,2 +1,2 @@
-export { DescriptionList, DescriptionListItem } from '../chunk-XN4JBAN3.js';
+export { DescriptionList, DescriptionListItem } from '../chunk-F2XSYBKH.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DescriptionList-YYY3V3O6.css → DescriptionList-IXMRCSMK.css}

@@ -57,3 +57,27 @@
     margin-bottom: var(--spacing-2);
   }
 }
+
+/*
+ * FIT: the term column is as wide as its longest term, and the pairs stay side
+ * by side at every width. It is for a panel of its own width, such as a
+ * popover, where the window's width says nothing about the room the list has:
+ * the narrow rule above is a question about the window, and a 260px panel is
+ * 260px on a phone and on a desktop alike. Its terms are a word each, so the
+ * column they take is a word wide and the details keep the rest.
+ *
+ * Written AFTER the narrow rule, which it overrides at the same weight, so
+ * nothing here has to outrank a media query.
+ */
+.crewlet-description-list--fit {
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--spacing-2) var(--spacing-4);
+}
+
+.crewlet-description-list--fit.crewlet-description-list--dense {
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+.crewlet-description-list--fit .crewlet-description-list__detail {
+  margin-bottom: 0;
+}

package/dist/EntityChip/index.js

@@ -1,4 +1,4 @@
 export { EntityChip } from '../chunk-DDTDN5L2.js';
-import '../chunk-6NIZCQUM.js';
+import '../chunk-ZPWUVVIB.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';