@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Listbox/useOptionKeys.d.ts

@@ -0,0 +1,64 @@
+/**
+ * What a listbox has to do that the platform's own dropdown did for free.
+ *
+ * WHY IT IS ITS OWN FILE. `useListbox` is the keyboard of a list that follows a
+ * TEXT FIELD: the arrows, Enter, Escape and the layer it sits on. It knows
+ * nothing about the options themselves, so it cannot step over a disabled row,
+ * cannot answer Home or End, and has no type-ahead. Those three are exactly
+ * what a reader loses the moment a product stops drawing a native `<select>`,
+ * and the house style is now the listbox everywhere (a native control is drawn
+ * only where a caller asks for one). Written twice, one list would skip
+ * disabled rows while the one beside it parked the highlight on them, and only
+ * one of the two would answer End.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - THE ARROWS, HOME AND END STEP OVER A DISABLED ROW. A highlight parked on
+ *   one is a list where Enter does nothing and nobody is told why.
+ * - TYPE-AHEAD IS THE NATIVE CONTROL'S ONE IRREPLACEABLE TRICK. Letters typed
+ *   within half a second are one run, so "sa" reaches Saturday rather than
+ *   stopping at the first S; a single letter repeated walks the rows starting
+ *   with it, which is what a `<select>` does. A list with a search box has no
+ *   type-ahead at all, because there the letters belong to the box.
+ * - A RUN IS MATCHED FROM THE ROW AFTER THE HIGHLIGHT, so pressing one letter
+ *   twice moves on rather than re-finding the row already under it.
+ * - IT REPORTS WHAT IT HANDLED, so the component around it can take the keys
+ *   it owns itself (a Select takes Tab) and leave the rest alone.
+ *
+ * It owns no markup and no state beyond the type-ahead run: the highlight
+ * lives in `useListbox`, and this moves it.
+ */
+import { type KeyboardEvent } from 'react';
+import type { Listbox } from './useListbox.js';
+/** How long a type-ahead run stays open, in milliseconds. */
+export declare const TYPE_AHEAD_WINDOW = 500;
+export interface OptionKeysOptions {
+    /** The highlight this moves. */
+    listbox: Listbox;
+    /** How many options are offered right now. */
+    count: number;
+    /** Whether the option at `index` refuses to be taken. */
+    disabled?: ((index: number) => boolean) | undefined;
+    /**
+     * The words type-ahead matches at `index`. Leave it out for a list whose
+     * letters belong to a search box: that list has no type-ahead, on purpose.
+     */
+    textOf?: ((index: number) => string) | undefined;
+}
+export interface OptionKeys {
+    /**
+     * Handles the keys the options themselves decide, and says whether it did.
+     * Anything it does not take belongs to `listbox.onKeyDown` and then to the
+     * component.
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => boolean;
+    /** The next index at or after `from`, walking `by`, that Enter would accept, or -1. */
+    step: (from: number, by: 1 | -1) => number;
+    /**
+     * Which row a freshly opened list highlights: the chosen one when it can be
+     * taken, else the first that can. A list that opens on a disabled row is one
+     * where the first Enter does nothing.
+     */
+    opening: (chosen: number) => number;
+}
+export declare function useOptionKeys({ listbox, count, disabled, textOf }: OptionKeysOptions): OptionKeys;

package/dist/Listbox-X2DOTSQA.css

@@ -0,0 +1,110 @@
+/*
+ * The listbox register: one look for every list a field offers.
+ *
+ * A combobox's completions, a multi-select's options and a command palette's
+ * results are the same shape read the same way, so they are drawn by one
+ * family rather than three. The component owns the markup and the filtering;
+ * this owns the rows.
+ *
+ * A MENU'S ROWS ARE NOT IN THIS FAMILY, and that is a decision rather than an
+ * oversight. A menu is a short list of verbs run past at a glance and is drawn
+ * tight (`Menu.css`); this is a list of candidates read one at a time for the
+ * one that matches, and the row it is read at is the command palette's.
+ *
+ * THE HIGHLIGHT IS NOT FOCUS. Focus stays in the text field and the list is
+ * pointed at with `aria-activedescendant`, so the active row is drawn from
+ * `[aria-selected]` rather than from `:focus-visible`, and a hover paints the
+ * same row the arrows would.
+ */
+
+.crewlet-listbox {
+  list-style: none;
+  margin: 0;
+  padding: var(--spacing-1);
+  display: flex;
+  flex-direction: column;
+  max-height: min(360px, 60vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.crewlet-listbox__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-sm);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  /*
+   * The SECONDARY step, not the primary one. A list of candidates is read by
+   * running the eye down it for the one that matches, and rows drawn at full
+   * strength all shout at once; the row the reader is actually on is the one
+   * that takes the accent and its ink. The step is held at 4.5:1 on every
+   * ground a row can sit on, so quieter is not fainter.
+   */
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  text-align: left;
+  cursor: pointer;
+  /* A row is chosen by the arrows as often as by the pointer, so the highlight
+     lands with no transition: a fade would lag a held arrow key. */
+}
+
+/*
+ * The active row, whether the arrows put it there or a hover did. The accent
+ * is what means "here", and it is a tint plus its ink step rather than a fill
+ * with a label on it.
+ */
+.crewlet-listbox__option[aria-selected='true'],
+.crewlet-listbox__option:hover {
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-listbox__option[aria-disabled='true'] {
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+/*
+ * The words a row carries beyond its label: a path, a kind, a shortcut. Held
+ * off the label by the row's own gap and never wrapped: a hint that broke
+ * across two lines turned every row in the list a different height.
+ */
+.crewlet-listbox__hint {
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+/*
+ * A group heading, on the tertiary step. It is a heading for the eye; the
+ * grouping a screen reader hears comes from the `group` the component wraps
+ * its rows in, which is why nothing here makes it focusable.
+ */
+.crewlet-listbox__heading {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+/*
+ * The empty line. An honest empty state says which kind of nothing this is,
+ * so the component supplies the sentence and this only draws it.
+ */
+.crewlet-listbox__empty {
+  padding: var(--spacing-3) var(--spacing-3);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-listbox__separator {
+  height: 1px;
+  margin: var(--spacing-1) 0;
+  background: var(--color-border-default);
+}

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,118 @@
+/**
+ * A menu button: a trigger that opens a short list of actions.
+ *
+ * WHY IT EXISTS. A row in a table, a card on a chart or a node in a tree has
+ * more actions than it has room for buttons, and a row of icons nobody can
+ * name is not an interface. The WAI-ARIA menu button pattern is the one a
+ * screen reader and a keyboard already know, and it has enough rules that a
+ * second hand-written copy misses some of them: the one this replaces put
+ * `role="menu"` on two nested elements, moved focus nowhere on open, had no
+ * arrows, used native `disabled` items a keyboard reader never met, ran an
+ * action before returning focus, did not close on Tab, and let its keys reach
+ * the row beneath it.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - OPENING PUTS FOCUS ON THE FIRST ITEM (ArrowUp on the trigger: the last).
+ *   Arrows move and wrap, Home and End jump, a letter moves to the next item
+ *   starting with it, Enter or Space activates.
+ * - IT IS A POPUP ON THE SHARED LAYER STACK: Escape closes the menu before
+ *   anything beneath it, and a press outside closes it without also counting
+ *   as a press on a veil.
+ * - FOCUS GOES BACK TO WHAT OPENED IT on Escape, on Tab (which then carries on
+ *   to the next control, as the pattern says) and BEFORE AN ACTION RUNS. The
+ *   last is what lets an action open a dialog that returns focus to the right
+ *   place: the dialog captures its opener when it first renders, and by then
+ *   focus is back on the trigger rather than on an item about to unmount. What
+ *   opened it is whatever held focus when it opened, so a menu opened from a
+ *   tree item with the Menu key returns to the tree item, not to the
+ *   pointer-only button that anchors it.
+ * - A DISABLED ITEM STAYS FOCUSABLE and says so (`aria-disabled`), so a
+ *   keyboard user learns the action exists and is unavailable rather than
+ *   meeting a list that silently skips it.
+ * - IT IS PLACED BY ARITHMETIC inside the layer it renders into, follows its
+ *   trigger through a pan or a scroll, and closes when the trigger leaves the
+ *   bounds. Focus moves in only once it has been placed: until then it is
+ *   drawn hidden, so it never flashes at a corner, and a browser refuses focus
+ *   to a hidden element anyway.
+ * - WHAT HAPPENS IN THE MENU STAYS IN THE MENU. A key, a press or a click
+ *   inside it does not reach the element it was opened from. A portal carries
+ *   React events up the component tree, not the document, so without this the
+ *   Enter that activates "Delete" would also reach the card's own Enter, and
+ *   ArrowDown would move the tree's focus as well as the menu's. Escape and
+ *   Tab still travel, because the layer stack acts on them at the document,
+ *   and so does a chord with Control, Command or Alt.
+ * - A CHOICE IS A RADIO ITEM. An item given `checked` is a `menuitemradio`
+ *   that says whether it is the current value and draws a check where the
+ *   others draw nothing, so a menu that picks one value reads as a choice with
+ *   an answer rather than a list of actions that all look alike. Every answer
+ *   of such a choice should say `checked`, true or false, so the check column
+ *   lines up. The answers that stand together are nested in one `group`, as
+ *   the pattern asks of radio items sharing a menu with actions, so a screen
+ *   reader counts "2 of 3" among the answers rather than among every item.
+ * - IT CAN BE OPENED FROM OUTSIDE (`open`, `onOpenChange`), because a tree item
+ *   that holds focus opens its card's menu from the keyboard while the trigger
+ *   itself is out of the tab order (`triggerTabIndex={-1}`).
+ *
+ * Ported from the engine dashboard's `ui/Menu.tsx`, with its suite.
+ */
+import { type ReactNode } from 'react';
+import { type ButtonVariant } from '../Button/index.js';
+export interface MenuItem {
+    kind?: 'item';
+    key: string;
+    label: string;
+    /** A glyph component, drawn before the label. */
+    icon?: ReactNode;
+    onSelect: () => void;
+    disabled?: boolean | undefined;
+    /** A destructive action: drawn in the critical ink. */
+    danger?: boolean | undefined;
+    /** A shortcut or a short note, shown at the end of the row. */
+    hint?: ReactNode;
+    /** A second line under the label, for an action whose name is not enough. */
+    description?: ReactNode;
+    /**
+     * Makes the item one answer of a single choice: a `menuitemradio` that is
+     * the current value when true. Left out, the item is an action.
+     */
+    checked?: boolean | undefined;
+}
+export interface MenuSeparator {
+    kind: 'separator';
+    key: string;
+}
+export type MenuEntry = MenuItem | MenuSeparator;
+/** A menu's entries as it draws them: an action, a separator, or a run of answers. */
+type Run = {
+    kind: 'action';
+    item: MenuItem;
+} | {
+    kind: 'separator';
+    key: string;
+} | {
+    kind: 'answers';
+    key: string;
+    items: MenuItem[];
+};
+/** Gathers each run of consecutive answers (items given `checked`) into one group. */
+export declare function runs(entries: readonly MenuEntry[]): Run[];
+export interface MenuProps {
+    /** The trigger's accessible name, such as "Actions for Software Engineer". */
+    label: string;
+    items: readonly MenuEntry[];
+    /** The trigger's glyph, when it has no visible text. */
+    icon?: ReactNode;
+    /** Visible trigger text; without it the trigger is an icon button named by `label`. */
+    trigger?: ReactNode;
+    triggerVariant?: ButtonVariant | undefined;
+    /** -1 for a pointer-only trigger whose actions the keyboard reaches another way. */
+    triggerTabIndex?: number | undefined;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Which edge of the trigger the menu lines up with. */
+    align?: 'start' | 'end' | undefined;
+    className?: string | undefined;
+}
+export declare function Menu({ label, items, icon, trigger, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, className, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Menu/index.d.ts

@@ -0,0 +1,3 @@
+import './Menu.css';
+export { Menu } from './Menu.js';
+export type { MenuEntry, MenuItem, MenuProps, MenuSeparator } from './Menu.js';

package/dist/Menu/index.js

@@ -0,0 +1,7 @@
+export { Menu } from '../chunk-FBZAKNSX.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Menu-6DE7I66I.css

@@ -0,0 +1,222 @@
+/*
+ * The menu button's panel.
+ *
+ * It shares the popover's surface deliberately: a menu and a popover are the
+ * same object to a reader, and two surfaces that differ by a shadow step are
+ * how a design system starts to look assembled rather than designed. What is
+ * its own is the row: a check column, a danger ink, and a hover that is
+ * neutral because focus, not the pointer, is what moves through a menu.
+ *
+ * THE PANEL IS SIZED BY ITS LONGEST ROW, not by a minimum of its own. A menu
+ * is a short list of verbs, and a floor wide enough for the longest one in the
+ * product leaves every other menu padded out with air. The ceiling stays, so a
+ * label nobody expected truncates instead of running off the screen.
+ *
+ * THE ROW IS ONE LINE HIGH AND TIGHT. A menu is read by running the eye down
+ * the verbs, and a row with a dialog's padding turns six of them into a
+ * scroller. The rows that carry a second line say so (`--described`) rather
+ * than every row paying for the two that need it.
+ */
+
+.crewlet-menu-anchor {
+  display: inline-flex;
+}
+
+.crewlet-menu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-1);
+  /*
+   * WIDTH, not min-width. Both spell "as wide as the longest row", and only
+   * this one leaves the ceiling below able to hold it: a min-width larger than
+   * a max-width replaces it, so the pair sized the panel to its longest label
+   * however long that label was and the 320px was a number nothing read. A
+   * width is clamped by the ceiling, and the label that no longer fits is the
+   * one that truncates.
+   */
+  width: max-content;
+  max-width: 320px;
+  max-height: min(360px, 60vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xl);
+  animation: crewlet-menu-in var(--motion-duration-base) var(--motion-easing-emphasized);
+}
+
+/* Inside a LayerHost the coordinates are the host's own, so the panel is
+   absolute within it rather than fixed against the window. */
+.crewlet-menu--in-host {
+  position: absolute;
+}
+
+/* Up from under its trigger, which is where it is about to be. */
+@keyframes crewlet-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-2));
+  }
+}
+
+.crewlet-menu__group {
+  display: contents;
+}
+
+.crewlet-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border: none;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: var(--font-size-compact);
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/*
+ * The rows that carry a second line, and only those. The row height alone
+ * would hold a label and a description in the space meant for one line.
+ */
+.crewlet-menu__item--described {
+  padding-block: var(--spacing-2);
+}
+
+/* Neutral, because the accent means "where the reader is" and in a menu that
+   is what focus already says. */
+.crewlet-menu__item:hover:not(.is-disabled) {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE TINT IS ON `:focus`, NOT ON `:focus-visible`. A menu puts focus on a row
+ * as it opens, and a row a script focused after a POINTER opened the panel
+ * does not match `:focus-visible` in any browser: the panel came up with no
+ * row lit at all until the reader moved the pointer or pressed an arrow, which
+ * is the one thing a menu has to say before it says anything else. A disabled
+ * row is not excluded here as it is from the hover above, and the asymmetry is
+ * the point: hover is an invitation and a disabled row declines it, while
+ * focus is a fact about where the keys will land.
+ */
+.crewlet-menu__item:focus {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * Focus is the only cursor a menu has, so the ring is the important mark here,
+ * and it is inset: the panel scrolls its own rows, and an outset ring is
+ * clipped by the scroller and painted over by the row below. The ring alone,
+ * because the rule above has already drawn the tint under it.
+ */
+.crewlet-menu__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The whole row, its glyph included: a destructive action is one thing. */
+.crewlet-menu__item.is-danger,
+.crewlet-menu__item.is-danger .crewlet-menu__icon {
+  color: var(--color-feedback-danger-ink);
+}
+
+/*
+ * A disabled item is still reachable and still says what it is. It is drawn
+ * quieter rather than removed, so a keyboard reader learns the action exists.
+ *
+ * The quiet step is the tertiary one and NOT an opacity. Half-strength ink is
+ * a composite nothing measured, and on this panel it lands at 2.4:1; the
+ * tertiary step is the one the palette suite holds at 4.5:1 on every ground a
+ * row can sit on, which is what makes "unavailable" readable rather than
+ * merely faint.
+ *
+ * IT IS DECLARED AFTER THE DESTRUCTIVE ROW ON PURPOSE. The two weigh the same,
+ * so the later one wins, and the one a reader has to be told is the one that
+ * says the row cannot be pressed: a Delete nobody is allowed to press was
+ * drawn in full danger ink, which is the strongest "press me" in the palette.
+ * The opacity this replaced faded both at once and so never had to choose.
+ */
+.crewlet-menu__item.is-disabled,
+.crewlet-menu__item.is-disabled .crewlet-menu__icon {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-menu__item.is-disabled {
+  cursor: not-allowed;
+}
+
+/*
+ * The check column. It is drawn for every answer of a choice, filled or not,
+ * so the labels line up and the answered one is the only row with a mark. It
+ * is the width of a glyph step rather than of a font size, so the column is
+ * the same width in a menu of any register.
+ */
+.crewlet-menu__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-4);
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-menu__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-menu__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-menu__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-menu__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  white-space: normal;
+}
+
+/*
+ * A shortcut or a short note at the end of the row, held off the label by a
+ * full glyph step so the two never read as one phrase.
+ */
+.crewlet-menu__hint {
+  margin-left: auto;
+  padding-left: var(--spacing-4);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-menu__separator {
+  height: 1px;
+  margin: var(--spacing-1) 0;
+  background: var(--color-border-default);
+}
+
+/*
+ * The rows themselves carry no transition, and that is the rule rather than an
+ * omission: the arrows move the highlight, and a fade lags a held arrow key so
+ * the row the reader is on stops being the row that is lit.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-menu {
+    animation: none;
+  }
+}

package/dist/Meter/Meter.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * What the bar is saying.
+ *
+ * `brand` is the ordinary reading, because a budget that is being spent is not
+ * in a state; it is just a number. The three that ARE states are derived from
+ * the fill unless a caller overrides them, so a bar that is nearly full says
+ * so without every call site remembering to.
+ */
+export type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    value: number;
+    max: number;
+    /**
+     * What is being measured. REQUIRED, and LINKED to the bar: the meter this
+     * replaces drew its legend as a sibling and named nothing, so a screen
+     * reader announced "meter, 62 percent" with no idea of what.
+     */
+    label: ReactNode;
+    /**
+     * The value in words, for a reader who is told the number rather than shown
+     * the bar: "12.4K of 20K tokens". Without one, the platform reads the raw
+     * value against the maximum, which is right for a plain count and wrong for
+     * anything with a unit.
+     */
+    valueText?: string | undefined;
+    /** Drawn at the trailing edge of the legend. Falls back to `valueText`. */
+    hint?: ReactNode;
+    /** Overrides the tone derived from the fill. */
+    tone?: MeterTone | undefined;
+    /**
+     * `compact` is the bar inside a table cell. Its legend drops a type step;
+     * the track does not, because the track is already the engine's 4px and
+     * there is nothing below four a fill still reads as a proportion in.
+     */
+    size?: 'default' | 'compact' | undefined;
+    /** Keep the label out of the picture. It stays in the accessibility tree. */
+    hideLabel?: boolean | undefined;
+}
+/** At the top it is a fault, near the top it wants a person, below that it is just a number. */
+export declare function meterTone(percent: number): MeterTone;
+/**
+ * A budget, a share, a fill.
+ *
+ * THE TRACK IS ALWAYS DRAWN. A bar with no track is a bar whose maximum the
+ * reader has to guess, and at 8 percent it is indistinguishable from a bar
+ * that is simply short.
+ */
+export declare function Meter({ value, max, label, valueText, hint, tone, size, hideLabel, className, ...rest }: MeterProps): import("react/jsx-runtime").JSX.Element;

package/dist/Meter/index.d.ts

@@ -0,0 +1,3 @@
+import './Meter.css';
+export { Meter, meterTone } from './Meter.js';
+export type { MeterProps, MeterTone } from './Meter.js';

package/dist/Meter/index.js

@@ -0,0 +1,3 @@
+export { Meter, meterTone } from '../chunk-LGCPQIOZ.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Meter-SKOOXQBC.css

@@ -0,0 +1,87 @@
+/*
+ * The meter.
+ *
+ * ITS FILL IS A MARK, so it takes the tone's FILL step, which is measured at
+ * 3:1 against every surface it can sit on. Nothing is written on it, which is
+ * what lets it be a fill rather than an ink: a percentage printed inside the
+ * bar would need a fourth measured pair for every tone.
+ */
+
+.crewlet-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/*
+ * The legend is the QUIET half. What a reader takes from a meter is the bar;
+ * the words under it name what is being measured and are read once. The engine
+ * sets the whole legend at the tertiary step, which still clears 4.5:1 on
+ * every ground.
+ */
+.crewlet-meter__legend {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  min-width: 0;
+}
+
+.crewlet-meter__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-meter__hint {
+  font-variant-numeric: tabular-nums;
+  flex: none;
+}
+
+/*
+ * A 4px track, which is the engine's. A meter sits under a line of 12px text
+ * inside a card, and the 6px bar read as a divider rather than as a reading of
+ * something; four is the height at which the fill is still unmistakably a
+ * proportion and the bar is unmistakably chrome.
+ */
+.crewlet-meter__track {
+  height: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inset);
+  overflow: hidden;
+}
+
+.crewlet-meter__fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+  transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
+}
+
+.crewlet-meter__fill[data-tone='success'] { background: var(--color-feedback-success); }
+.crewlet-meter__fill[data-tone='warning'] { background: var(--color-feedback-warning); }
+.crewlet-meter__fill[data-tone='danger'] { background: var(--color-feedback-danger); }
+/* The quiet reading is still a mark, so it takes the tertiary step rather than
+   the decoration one the engine spends here: a 4px bar has to clear 3:1 to be
+   seen at all, and --color-text-muted measures 2.33:1 on a light page and
+   2.25:1 on a dark one at their worst grounds. The tertiary step measures
+   4.87:1 and 4.65:1 on the same pair. */
+.crewlet-meter__fill[data-tone='neutral'] { background: var(--color-text-tertiary); }
+
+.crewlet-meter--compact .crewlet-meter__legend {
+  font-size: var(--font-size-2xs);
+}
+
+/*
+ * The bar arrives at its width rather than growing into it. A value that is
+ * pushed every second would otherwise be permanently in motion, which is the
+ * one thing a reader watching a budget does not need.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-meter__fill {
+    transition: none;
+  }
+}