@crewlethq/ui 0.39.0 → 0.40.0

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,48 @@ 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.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-KKNHMXTE.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';

package/dist/{AppShell-NDU4XMGF.css → AppShell-NPSWZ3XW.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,6 +145,31 @@
   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. */
 .crewlet-app-shell__rail-foot {
@@ -488,6 +515,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 +541,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 {

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;
+  }
+}