@crewlethq/ui 0.39.0 → 0.40.1

package/README.md

@@ -52,7 +52,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `TileGrid`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
-| Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
+| Application shell | `AppShell` with `AppShell.Rail`, `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
 | Artifacts | `SandboxedFrame` (with `SandboxedFramePlaceholder` and `SandboxedFrameNotice`), `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard`, `ArtifactKindGlyph` and `ArtifactPreviewGlyph` (the preview a card draws with no cover, for a cover with nothing to draw), `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `LayersList` (the list of a canvas's items beside it, marked by the canvas's selection), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it), `ArtifactNameCell` and `ArtifactAccessLabel` (with `ArtifactAccessGlyph`) for a list of artifacts |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
@@ -204,6 +204,52 @@ 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.40.1
+
+**The rail's foot stands on the compact step.** What a reader reaches for rarely (a settings link, a status row, who they are) takes less of the rail's height: the foot's rows are 26px (`--size-control-sm`, through `--crewlet-rail-foot-row`) where they were the nav's 30px, the foot's gap is 2px and its inset 4px where they were 4px and 8px, and the account row spends 2px around its name and detail where it spent 8px. A foot of Settings, an engine row and the account row is 101px tall where it was 133px. Only heights change: every row keeps its order, its columns, its glyphs and its words, the rows above the foot keep their 30px step, and every target still clears 24px, with the targets of neighbouring rows meeting across the gap.
+
+## Changes in 0.40.0
+
+The engine dashboard's own lists, page parts and navigation pieces, moved into the kit so every application draws them from one place.
+
+### Lists and pages
+
+**`DataGrid` draws a list as columns.** One track list on the grid, which every row adopts (`subgrid`), so a value always sits under the head that names it. The sort (`sort`, `onSortChange`, as `key` or `-key`) and the column set (`cols`, `onColsChange`, `key,key`, empty for the default set) are controlled, so an application keeps them wherever it keeps state (the engine keeps them in the address). A column gives way rather than starving its neighbours: `shrink` sizes it to its content up to a share of the grid, `floor` keeps the column that is the point of the list readable, and a grid that cannot fit drops columns by their `drop` rank rather than cutting them off, saying which in its foot ("Hidden to fit"). An `optional` column is off until the column set names it. A row links (`rowHref`, an overlay over the row, so a cell's own link or button still takes its own click) or activates (`onRowActivate`); `handleRef` steps and opens rows from an application's own keymap. Bands (`bands`) draw a grouped answer with each group's count, a sticky head sticks at `--crewlet-data-grid-sticky-top`, an empty grid draws `empty` as an `EmptyState`, and a grid inside a `Card` gives up its own edge. Below 640px each row is a labelled card, or one compact line with `phoneRows="compact"`. It is announced as a table, with `aria-sort` on its sortable column heads.
+
+**`ColumnChooser` and `ChooserList`** are the checklist a reader picks what a view shows with. `ColumnChooser` takes a grid's own columns (`columnChoicesOf`) and writes the column set in declaration order; `ChooserList` is the plain checklist under it, for any set of facts a view shows (a card's fields). Both are one group named by their heading.
+
+**`PropertyList` draws an object's facts in sections on one column**: every section's terms in one column (`--crewlet-description-list-term`, which `DescriptionList` reads too, so a page lines a list up with its key-value cards), the four kinds of absent value, a section with nothing filled in said once (`whenAllAbsent`), and one "set by" line under the last of the rows one change set (`setBy`, `change`). `headings` is `eyebrow` or `sentence`.
+
+**`Tabs` take `overflow="menu"`**: what does not fit folds into a More menu (`moreLabel`, `moreMenuLabel`) instead of being cut, a tab with work in flight carries a pulsing mark and says so (`live`), and `note` is a sentence after the tabs that steps aside before any tab folds. Folded tabs stay measured and the arrow keys skip them. Link tabs spread `foldProps` on their link.
+
+**`Histogram` draws where in a window things happened** (in `Charts`): one bar per bucket with its failed part inside the fill, a floor so a bucket with one event is still drawn, a date axis (`formatTick`) and the total said once (`summary`). With `onSelect` each bar is a button that narrows the window.
+
+**`PageNote` is a screen's one quiet sentence** under its title, at the reading measure, with no word alone on its last line and no margin of its own. **`RelatedRow` is the one related place a page points at**: a quiet linked card under the page's content, its glyph and words on the card heads' columns, the whole row the link, in a `nav` named "Related".
+
+**`NamedGlyph` draws a glyph from its name** (`@crewlethq/icons/glyphs/registry`, with `glyphFor`), for a place whose glyph is data, such as a list's empty state or a navigation entry.
+
+### Fixes
+
+**Every catalogue tile's name stands on one line across a row** (`CatalogTile`). A tile without a status tag centred its name against its mark, 13px under its tagged neighbours; the name now starts at the top of the head whatever the tag.
+
+### Navigation
+
+**`LockedLabel` draws a place the reader may not open**: its words with the key after them, the reason (`reason`, "Needs Admin access") as the pointer's title and read after the name, and nothing but the words where nothing is missing. A place is locked, never hidden. `mark={false}` keeps the reason and drops the key, for a place under a heading that already carries it.
+
+**`SidebarNav.Item` takes `locked`, `title` and `onPrefetch`.** `locked` draws the row's words as a `LockedLabel`, and the row stays a link. `title` is the row's hint. `onPrefetch` is called when the pointer reaches the row and when it takes focus, on the kit's anchor and on a router's (`renderLink` is handed `title`, `onPointerEnter` and `onFocus`), so an application needs no wrapper of its own to start fetching where a row leads.
+
+**A wholly locked group draws its key once** (`SidebarNav.Group` `locked`). The key and the reason go on the group's label, and its rows stay links in the quiet ink with no key each, still saying their own reason. A reader holding none of a column's access met a key on every row of it. A mixed group, and a run with no label to carry the key, keep it on each locked row.
+
+**`SectionFrame` draws a workspace's sections as a column beside the screen** (`SectionFrame.Nav`, `SectionFrame.Body`). The column sticks at the view's height while the section scrolls and keeps the wheel at its ends; with `folded` (the application's decision, from its own arithmetic of what a section beside the column needs) it becomes one row naming the section the reader is on ("Settings Section: People"), which unfolds the list, folds again on a pick, and opens on an arrival the caller asks it to (`openOnArrival`). The frame takes the content column's padding back and gives it to the body, which takes the phone's 16px under 640px.
+
+### Application shell
+
+**The rail has a field slot and a head that takes its width** (`AppShell.Rail`). `search` is drawn first in the rail's middle, on the nav's gutter with its glyph on the nav rows' glyph column; the head's first child takes the head's width, so a long name truncates. Both were an application's own wrapper and rule.
+
+**The scroller is a size container** (`.crewlet-app-shell__main`, `container-type: size`), so a box inside a screen can be as tall as the view it scrolls in (`100cqb`), as `SectionFrame`'s column is.
+
+**A fill screen keeps the reserved scrollbar gutter.** The top bar's end inset counts the gutter, so a fill screen that reserved none put the bar's controls a gutter further out than on its neighbour: with classic scrollbars they moved 11px between an org chart and its roster. An application that restated `scrollbar-gutter: auto` for a fill screen drops it.
+
 ## Changes in 0.39.0
 
 These come from a production polish of the engine dashboard's Settings › Limits, Company › Integrations and Company › Policies, and the same patterns everywhere else it draws them.

package/dist/AppShell/AppShell.d.ts

@@ -108,8 +108,19 @@ export declare namespace AppShell {
     var AccountRow: typeof import("./AccountRow.js").AccountRow;
 }
 export interface AppShellRailProps {
-    /** The head of the rail, drawn at the top bar's own height. */
+    /**
+     * The head of the rail, drawn at the top bar's own height. Its first child
+     * takes the head's width, so a long name (a company's, in a lockup)
+     * truncates rather than wrapping.
+     */
     header?: ReactNode;
+    /**
+     * The rail's field, first in its scrolling middle: a `SearchTrigger` with
+     * `variant="rail"`. The slot stands it on the nav's own gutter with its
+     * glyph on the nav rows' glyph column, so the field needs no inset of its
+     * application's own.
+     */
+    search?: ReactNode;
     /**
      * The foot: what the engine is doing, the theme and density controls. An
      * `<AppShell.RailRow>` puts a line there on the rail's own insets, so its
@@ -120,7 +131,7 @@ export interface AppShellRailProps {
     children?: ReactNode;
 }
 /** 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;
+export declare function AppShellRail({ header, search, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
 /**
  * A figure at the end of a row in the foot, and what it counts.
  *

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-DYB66CNM.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-GR4YM7HT.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';

package/dist/{AppShell-NDU4XMGF.css → AppShell-VE2MAV42.css}

@@ -130,6 +130,8 @@
 .crewlet-app-shell__rail-head {
   display: flex;
   align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
   flex: none;
   box-sizing: border-box;
   min-height: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
@@ -143,15 +145,48 @@
   scrollbar-color: var(--color-scrollbar) transparent;
 }
 
+/*
+ * THE HEAD'S FIRST CHILD TAKES ITS WIDTH: a lockup alone on its line, whose
+ * name truncates at the rail's edge rather than wrapping or pushing the head
+ * wider. It was every application's own wrapper and rule.
+ */
+.crewlet-app-shell__rail-head > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/*
+ * THE RAIL'S FIELD ON THE NAV'S COLUMNS. It stands on the nav's gutter, so
+ * its right edge is where every row's background ends; and its glyph stands
+ * on the nav's glyph column: a row's glyph is the gutter and the row's pad
+ * in, the field's is the gutter, its own 1px edge and its pad
+ * (`SearchTrigger`'s two steps and a half), so the inset at its start makes
+ * up the difference from those measures.
+ */
+.crewlet-app-shell__rail-search {
+  padding: 0 var(--size-nav-gutter) var(--spacing-3);
+  padding-inline-start: calc(
+    var(--size-nav-gutter) + var(--size-nav-row-pad) - (var(--spacing-2) + var(--spacing-1) / 2) - 1px
+  );
+}
+
 /* The same gutter the nav takes, so what the foot says lines up with the rows
-   above it rather than sitting further out. */
+   above it rather than sitting further out.
+
+   THE FOOT IS THE COMPACT STEP. It holds what a reader reaches for rarely (a
+   settings link, the engine's state, who they are), so its rows stand on the
+   small control step (`--crewlet-rail-foot-row`, 26px, never under the 24px
+   target) on a half-step gap and a one-step inset, where the nav above keeps
+   its 30px rows. Only heights change: every row keeps its order, columns,
+   glyphs and words. */
 .crewlet-app-shell__rail-foot {
-  --crewlet-rail-foot-gap: var(--spacing-1);
+  --crewlet-rail-foot-gap: calc(var(--spacing-1) / 2);
+  --crewlet-rail-foot-row: var(--size-control-sm);
   flex: none;
   display: flex;
   flex-direction: column;
   gap: var(--crewlet-rail-foot-gap);
-  padding: var(--spacing-2) var(--size-nav-gutter);
+  padding: var(--spacing-1) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
 
@@ -252,6 +287,14 @@
   min-width: 14px;
 }
 
+/* The foot's own step (see `.crewlet-app-shell__rail-foot`), for its rows and
+   for a navigation dropped into it, whose rows keep the rail's columns. */
+.crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn,
+.crewlet-app-shell__rail-foot .crewlet-nav-item__row {
+  min-height: var(--crewlet-rail-foot-row);
+}
+
 /*
  * 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
@@ -488,6 +531,15 @@
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
+  /*
+   * A SIZE CONTAINER, so a box inside the screen can be as tall as the view
+   * it scrolls in (`100cqb`): a column that sticks beside the screen
+   * (`SectionFrame`), a record bounded by the window. The scroller's size is
+   * the shell's, never its content's, so containing it costs nothing. A box
+   * inside an inline-size container (a card, a stat row) reaches past it to
+   * this one for the block axis.
+   */
+  container-type: size;
 }
 
 /* No focus rule of its own: `main` takes focus only from the skip link, and a
@@ -505,12 +557,17 @@
 }
 
 /* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left. It
-   reserves no scrollbar gutter either, since nothing in it scrolls: the
-   reserved strip was a dead band down the screen's end edge. */
+   scrolling and the content column takes the height that is left.
+
+   IT KEEPS THE GUTTER RESERVED, like every other screen. The top bar's end
+   inset counts the scroller's gutter (`--crewlet-app-shell-gutter`, measured
+   by the shell), so a fill screen that reserved none put the bar's controls
+   one gutter further out than on the screen beside it: with classic
+   scrollbars, Add seat moved 11px between an org chart and its roster, two
+   tabs of one page. A strip at the end edge of a full-screen canvas is the
+   smaller cost than a bar that moves under the pointer. */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
-  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
@@ -690,9 +747,16 @@
  * whatever size of badge a caller hands the row, it is centred where a glyph
  * is, and the row takes the nav row's pad and its glyph-to-word gap.
  */
+.crewlet-app-shell__rail-foot .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-0);
+}
+
 .crewlet-app-shell__rail-foot .crewlet-account-row__who {
   --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
   gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  /* On the foot's compact step: the two lines of name and detail with half a
+     step above and below them, which still clears the avatar. */
+  padding-block: calc(var(--spacing-1) / 2);
   padding-inline-start: var(--size-nav-row-pad);
 }
 

package/dist/ArtifactBar/index.js

@@ -1,8 +1,9 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-TZYFTC4M.js';
-import '../chunk-4ISUIS6F.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-2VOHUGUA.js';
+import '../chunk-OOC7Q67K.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';

package/dist/AvatarPicker/index.js

@@ -1,16 +1,20 @@
-export { AvatarPicker } from '../chunk-ECGGQX2H.js';
-import '../chunk-F4LPQA4E.js';
+export { AvatarPicker } from '../chunk-A44YHLCQ.js';
+import '../chunk-BA32AVKS.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-YEVG2X5R.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-SNQRGH4A.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CatalogTile/index.js

@@ -1,3 +1,3 @@
-export { CatalogTile } from '../chunk-XNXK5MA4.js';
+export { CatalogTile } from '../chunk-PCT47E7O.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CatalogTile-TGR2ZZVQ.css → CatalogTile-XL4XLFUH.css}

@@ -28,7 +28,7 @@
 
 .crewlet-catalog-tile__head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-3);
   min-width: 0;
 }
@@ -46,13 +46,17 @@
   color: var(--color-text-primary);
 }
 
-/* The name, and under it the state when there is one; centred on the mark
-   either way, so a tile with no state is not a tile with a hole in it. */
+/* The name, and under it the state when there is one. THE NAME STANDS ON ONE
+   LINE ACROSS A ROW whether or not a tile has a state: centred on the mark, a
+   name with a pill under it rose 13px above its stateless neighbour's, so the
+   names of one row stood at two heights. It starts one step below the mark's
+   top edge in every tile instead. */
 .crewlet-catalog-tile__title {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
+  padding-top: var(--spacing-1);
   gap: var(--spacing-1);
   min-width: 0;
 }

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-YEVG2X5R.js';
-import '../chunk-RKKO7QHH.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-SNQRGH4A.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Charts/Histogram.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+export interface HistogramBar {
+    /** The bucket's start, epoch milliseconds. It is also the bar's key. */
+    t: number;
+    /** How many things fell in the bucket. */
+    v: number;
+    /**
+     * How many of `v` failed, where the caller has the split. Drawn as the
+     * danger-toned foot of the same fill, so the column's height is still the
+     * bucket's whole count. Absent draws the plain fill, because a split the
+     * data did not carry is not a split of zero.
+     */
+    part?: number | undefined;
+}
+export interface HistogramProps {
+    bars: HistogramBar[];
+    /** What the chart is, as the name of its group: "Turns that ended over the window". */
+    label: string;
+    /**
+     * The total and what it is a total of, read in place of the picture:
+     * "212 turns in this window". Required, and never summed here: the caller
+     * knows whether the bars cover the whole window or only the rows it holds,
+     * and a number whose scope is guessed is wrong on the second caller.
+     */
+    summary: string;
+    /** A bar's own sentence, for its tooltip and its accessible name. */
+    formatTitle: (bar: HistogramBar, index: number) => string;
+    /**
+     * A tick's label, which turns the axis on. Left out, the chart draws no
+     * dates, for a strip narrower than its own labels.
+     */
+    formatTick?: ((bar: HistogramBar, index: number) => string) | undefined;
+    /**
+     * Narrow the window to one bar. Given, every bar is a button; left out, the
+     * bars are a picture and take no tab stop.
+     */
+    onSelect?: ((bar: HistogramBar, index: number) => void) | undefined;
+    /** The plot's height in pixels. */
+    height?: number | undefined;
+    /** What the chart says in place of the bars when it has none. */
+    emptyLabel?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * Which bars get a label: the first, the last, and an even whole stride
+ * between, so a seven-day window reads every other day rather than gaps of
+ * two, one, two and one days (which reads as days missing from the data).
+ * The stride is the smallest whole number of bars that keeps the labels at or
+ * under five, preferring one that lands exactly on the last bar; where none
+ * does, a label nearer the last one than half a stride gives way to it.
+ */
+export declare function histogramTicks(bars: number): number[];
+/**
+ * A log's own time axis: where in a window things happened, which a page of
+ * rows cannot say.
+ *
+ * THE SLOT IS THE CONTROL AND THE FILL INSIDE IT IS THE BAR. The fill takes
+ * the column proportion `StackedColumns` uses, so one bucket and ninety draw
+ * with the same geometry, while the click target stays the whole slot.
+ *
+ * THE HEIGHT IS THE TRUE RATIO, with a floor in pixels rather than percent:
+ * a percentage floor grows with the panel and draws a bucket of 4 and one of
+ * 400 at the same height. An empty bucket stands one pixel under the smallest
+ * real count, because a zero-height element is invisible and an empty stretch
+ * would read as a gap in the chart rather than a quiet stretch in the data.
+ *
+ * A BUTTON WHEN IT DOES SOMETHING AND A DIV WHEN IT DOES NOT: a keyboard
+ * reader tabbing through eighty inert controls is worse served than one told
+ * there is nothing to operate.
+ */
+export declare function Histogram({ bars, label, summary, formatTitle, formatTick, onSelect, height, emptyLabel, className, }: HistogramProps): import("react").JSX.Element;

package/dist/Charts/index.d.ts

@@ -8,6 +8,8 @@ export { StackedBar } from './StackedBar.js';
 export type { StackedBarProps, StackedSegment } from './StackedBar.js';
 export { ActivityStrip } from './ActivityStrip.js';
 export type { ActivityBucket, ActivityStripProps } from './ActivityStrip.js';
+export { Histogram, histogramTicks } from './Histogram.js';
+export type { HistogramBar, HistogramProps } from './Histogram.js';
 export { TimeSeries, Sparkline } from './TimeSeries.js';
 export type { Series, SeriesPoint, SparklineProps, TimeSeriesProps } from './TimeSeries.js';
 export { StackedColumns, niceScale } from './StackedColumns.js';

package/dist/Charts/index.js

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

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

@@ -978,3 +978,121 @@
   transform: translateY(-50%);
   pointer-events: none;
 }
+
+/* ─── Histogram, a log's own time axis ─────────────────────────── */
+
+/*
+ * Time runs left to right on this axis in every writing direction, as it does
+ * on every chart, and the ticks are placed on physical sides to match.
+ */
+.crewlet-histogram {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  direction: ltr;
+}
+
+/* The plot's bottom border is the axis line the ticks hang under. */
+.crewlet-histogram__plot {
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+  width: 100%;
+  height: var(--crewlet-histogram-height, 96px);
+  padding: var(--spacing-1) 0;
+  border-bottom: 1px solid var(--color-border-hover);
+}
+
+/* The slot is the control, and the whole of it is the target. */
+.crewlet-histogram__bar {
+  all: unset;
+  flex: 1 1 0;
+  min-width: 2px;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+button.crewlet-histogram__bar {
+  cursor: pointer;
+}
+
+/* A slot draws no edge, so its ring stands off it. `all: unset` takes the
+   baseline ring away; this states it again at a weight the reset cannot
+   out-rank. */
+.crewlet-histogram__bar:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * A count is data, so it is drawn in the data ramp; the accent is kept for the
+ * bar the reader is pointing at, the selection a click is about to make. The
+ * fill stacks from its foot, so the failed share sits at its bottom. Floors in
+ * pixels: an empty bucket at two, the smallest real count at three.
+ */
+.crewlet-histogram__fill {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+  width: 63%;
+  min-width: 2px;
+  max-width: var(--spacing-7);
+  height: var(--crewlet-histogram-fill, 0%);
+  min-height: 3px;
+  background: var(--color-data-1);
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-histogram__part {
+  display: block;
+  width: 100%;
+  height: var(--crewlet-histogram-part, 0%);
+  background: var(--color-feedback-danger);
+}
+
+button.crewlet-histogram__bar:hover > .crewlet-histogram__fill,
+button.crewlet-histogram__bar:focus-visible > .crewlet-histogram__fill {
+  background: var(--color-brand-accent);
+}
+
+/* An empty bucket is a visible floor in the tone an axis is ruled in:
+   present, and plainly not a quantity. */
+.crewlet-histogram__bar[data-empty] > .crewlet-histogram__fill {
+  min-height: 2px;
+  background: var(--color-border-strong);
+}
+
+button.crewlet-histogram__bar[data-empty]:hover > .crewlet-histogram__fill,
+button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fill {
+  background: var(--color-border-strong-hover);
+}
+
+/*
+ * The dates under the bars. Absolutely placed, so a tick sits over the bucket
+ * it names; the row states its own height because absolutely placed children
+ * contribute none.
+ */
+.crewlet-histogram__axis {
+  position: relative;
+  height: calc(var(--font-size-2xs) * var(--font-line-height-normal));
+  margin-top: 2px;
+}
+
+.crewlet-histogram__tick {
+  position: absolute;
+  top: 0;
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-histogram__fill {
+    transition: none;
+  }
+}