@crewlethq/ui 0.12.0 → 0.14.0

package/dist/ReadingPane/ReadingPane.d.ts

@@ -0,0 +1,95 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export interface ReadingPaneProps extends HTMLAttributes<HTMLElement> {
+    /** Overrides the level the title is rendered at. */
+    headingLevel?: HeadingLevel | undefined;
+}
+/**
+ * One item read in full, top to bottom, in one column: the line saying who is
+ * asking and about what, the question in large type, its context, the
+ * reasoning behind a recommendation, the answer, and the conversation.
+ *
+ * ONE COLUMN AND NOTHING TO OPEN. Every detail an item has is part of its
+ * reading, in the order a reader needs it, so nothing hides behind a toggle
+ * and nothing is said twice. The column is bounded to a reading measure and
+ * centred in whatever pane holds it, and it narrows its margins when the pane
+ * itself is narrow, measured on the pane rather than the window, because a
+ * pane beside a list is narrow on a wide screen too.
+ *
+ * The article is named by its title, so a reader moving by landmark hears the
+ * question rather than "article".
+ */
+export declare function ReadingPane({ headingLevel, className, children, ...rest }: ReadingPaneProps): import("react").JSX.Element;
+export declare namespace ReadingPane {
+    var Byline: typeof ReadingPaneByline;
+    var Title: typeof ReadingPaneTitle;
+    var Lead: typeof ReadingPaneLead;
+    var Quote: typeof ReadingPaneQuote;
+    var Reasoning: typeof ReadingPaneReasoning;
+    var Outcome: typeof ReadingPaneOutcome;
+    var Section: typeof ReadingPaneSection;
+}
+export interface ReadingPaneBylineProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** A control at the start of the line: Back to the list, on a phone. */
+    start?: ReactNode;
+    /** Before the sentence: an avatar. */
+    leading?: ReactNode;
+    /**
+     * After the sentence, in the quiet ink: why it reached the reader, where the
+     * sentence does not already say so ("you follow this task").
+     */
+    note?: ReactNode;
+}
+/**
+ * The one sentence over the item: who, what is asked of the reader, and the
+ * task. Set the name in `strong` and the task as a quiet link. The time is
+ * not repeated here, because the row in the list already carries it.
+ */
+export declare function ReadingPaneByline({ start, leading, note, className, children, ...rest }: ReadingPaneBylineProps): import("react").JSX.Element;
+export type ReadingPaneTitleProps = HTMLAttributes<HTMLHeadingElement>;
+/** The question, the stop or what changed, in large type. It names the pane. */
+export declare function ReadingPaneTitle({ className, children, ...rest }: ReadingPaneTitleProps): import("react").JSX.Element;
+export type ReadingPaneLeadProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * What the title needs to be understood: the context of a question, what a
+ * change adds to its own sentence. A block rather than a paragraph, so it can
+ * hold rendered markdown of more than one paragraph.
+ */
+export declare function ReadingPaneLead({ className, children, ...rest }: ReadingPaneLeadProps): import("react").JSX.Element;
+export interface ReadingPaneQuoteProps extends HTMLAttributes<HTMLQuoteElement> {
+    /**
+     * Words a machine wrote, verbatim: a coding run's question. Set in the mono
+     * face behind a rule, small, rather than as prose a person wrote.
+     */
+    verbatim?: boolean | undefined;
+}
+/** Somebody's own words, quoted whole: the comment a notice is about. */
+export declare function ReadingPaneQuote({ verbatim, className, children, ...rest }: ReadingPaneQuoteProps): import("react").JSX.Element;
+export interface ReadingPaneReasoningProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Whose reasoning, and what it recommends: "Crewlet-PM recommends **Accept**". */
+    title: ReactNode;
+    /** Under the reasoning: the evidence it rests on. */
+    footer?: ReactNode;
+}
+/**
+ * Why the asker recommends what it does, on an inset ground so it reads as an
+ * aside to the question rather than part of it, with the evidence it cites
+ * underneath.
+ */
+export declare function ReadingPaneReasoning({ title, footer, className, children, ...rest }: ReadingPaneReasoningProps): import("react").JSX.Element;
+export type ReadingPaneOutcomeProps = HTMLAttributes<HTMLParagraphElement>;
+/**
+ * What the reader's action did, in place of the controls that did it:
+ * "Answered **Accept**". A live region, so the line is announced when it
+ * replaces the button that was just pressed.
+ */
+export declare function ReadingPaneOutcome({ className, children, ...rest }: ReadingPaneOutcomeProps): import("react").JSX.Element;
+export interface ReadingPaneSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** What is below it, said exactly: "Replies to this question". */
+    label: ReactNode;
+}
+/**
+ * A part of the reading after the answer, the conversation most of all, set
+ * off by a hairline and named by a heading in the micro-label register.
+ */
+export declare function ReadingPaneSection({ label, className, children, ...rest }: ReadingPaneSectionProps): import("react").JSX.Element;

package/dist/ReadingPane/index.d.ts

@@ -0,0 +1,3 @@
+import './ReadingPane.css';
+export { ReadingPane, ReadingPaneByline, ReadingPaneTitle, ReadingPaneLead, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneOutcome, ReadingPaneSection, } from './ReadingPane.js';
+export type { ReadingPaneProps, ReadingPaneBylineProps, ReadingPaneTitleProps, ReadingPaneLeadProps, ReadingPaneQuoteProps, ReadingPaneReasoningProps, ReadingPaneOutcomeProps, ReadingPaneSectionProps, } from './ReadingPane.js';

package/dist/ReadingPane/index.js

@@ -0,0 +1,4 @@
+export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-ZAJHGDAW.js';
+import '../chunk-RK4XPHVG.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ReadingPane-5UOLPWY5.css

@@ -0,0 +1,194 @@
+/*
+ * One item read in full, in one column.
+ *
+ * The pane is its own container, so the column narrows its margins when the
+ * PANE is narrow (beside a list on a small laptop, or alone on a phone)
+ * rather than when the window is.
+ */
+
+.crewlet-reading-pane {
+  container: crewlet-reading-pane / inline-size;
+  min-width: 0;
+}
+
+.crewlet-reading-pane__column {
+  /* A question and its answers read best at about seventy characters a line. */
+  --crewlet-reading-pane-measure: 640px;
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  max-width: var(--crewlet-reading-pane-measure);
+  margin: 0 auto;
+  padding: calc(var(--spacing-6) + var(--spacing-1)) calc(var(--spacing-6) + var(--spacing-1)) var(--spacing-8);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-primary);
+}
+
+@container crewlet-reading-pane (width < 640px) {
+  .crewlet-reading-pane__column {
+    padding-inline: var(--spacing-4);
+  }
+}
+
+/* ---- The byline -------------------------------------------------------- */
+
+.crewlet-reading-pane__byline {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-reading-pane__start,
+.crewlet-reading-pane__leading {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-reading-pane__by {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__by strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__note {
+  color: var(--color-text-tertiary);
+}
+
+/* ---- The title and what it needs -------------------------------------- */
+
+.crewlet-reading-pane__title {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-snug);
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__lead {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__lead > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__quote {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__quote > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__quote--verbatim {
+  padding: var(--spacing-2) var(--spacing-3);
+  border-left: 2px solid var(--color-border-strong);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  white-space: pre-wrap;
+}
+
+/* ---- The reasoning ----------------------------------------------------- */
+
+.crewlet-reading-pane__reasoning {
+  display: grid;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-3) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-reading-pane__reasoning-title {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-reading-pane__reasoning-title strong {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__reasoning-body {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__reasoning-body > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__reasoning-footer {
+  margin-top: calc(var(--spacing-1) / 2);
+}
+
+/* ---- What the reader did ----------------------------------------------- */
+
+.crewlet-reading-pane__outcome {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-reading-pane__outcome-mark {
+  flex: none;
+}
+
+.crewlet-reading-pane__outcome strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+/* ---- A section after the answer ---------------------------------------- */
+
+.crewlet-reading-pane__section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-3);
+  padding-top: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* The heading's own line box is the label's, so the label sits where it is drawn. */
+.crewlet-reading-pane__section-label {
+  margin: 0;
+  font: inherit;
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+}

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -45,6 +45,14 @@ interface SegmentedShared<T extends string> {
      * caret moves inside it as it does in any field.
      */
     trailing?: ReactNode | undefined;
+    /**
+     * Every option takes an equal share of the row, and the row fills the
+     * width it is given. Two settings drawn one above the other (Mode over
+     * Density) then draw one box, whatever their options say: a row sized to
+     * its own options draws a glyph row and a letter row at two widths, which
+     * reads as two kinds of control. Pill rows only.
+     */
+    fill?: boolean | undefined;
     className?: string | undefined;
 }
 /**
@@ -115,5 +123,5 @@ export type SegmentedControlProps<T extends string = string> = SegmentedShared<T
  * look like two different controls depending on which component a screen
  * reached for.
  */
-export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, layout, trailing, className, semantics, panelId, activate, activateHint, }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, layout, trailing, fill, className, semantics, panelId, activate, activateHint, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export {};

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
-import '../chunk-UAQIUSSK.js';
-export { SegmentedControl } from '../chunk-EBBAAQDY.js';
-import '../chunk-JHQUT4WJ.js';
+import '../chunk-VYY56AMX.js';
+export { SegmentedControl } from '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{SegmentedControl-76HODRBT.css → SegmentedControl-PKBLJVSA.css}

@@ -158,3 +158,21 @@
 .crewlet-segmented--cards .crewlet-segmented__option.is-active .crewlet-segmented__description {
   color: var(--color-brand-accent-ink);
 }
+
+/*
+ * EQUAL SHARES. The row fills the width it is given and every option takes
+ * an equal column of it, so two settings stacked in one panel draw one box.
+ * Two classes, for the reason the card row gives: the pill's own rules size
+ * the row to its content.
+ */
+.crewlet-tabs.crewlet-segmented--fill {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  width: 100%;
+}
+
+.crewlet-segmented--fill .crewlet-segmented__option {
+  justify-content: center;
+  min-width: 0;
+}

package/dist/Select/Select.d.ts

@@ -42,6 +42,19 @@ export interface SelectOption {
     label: ReactNode;
     /** A second line under the label: a handle, a path, what the choice means. */
     description?: ReactNode;
+    /**
+     * Drawn before the label, in the list and on the trigger while the option is
+     * the one chosen: a swatch, an avatar, a glyph. Decorative, so it is hidden
+     * from assistive technology: the label carries the words. Listbox mode only;
+     * a native option draws text alone.
+     */
+    leading?: ReactNode;
+    /**
+     * A quieter word on the label's own line, at the row's end: a tag, a count,
+     * the one fact that tells two options apart at a glance. Read with the
+     * label. Listbox mode only.
+     */
+    hint?: ReactNode;
     disabled?: boolean;
     /** Options sharing a group are listed under its name, in first-seen order. */
     group?: string;
@@ -126,6 +139,15 @@ export interface SelectProps extends NativePassthrough {
     renderMultiLabel?: (selected: SelectOption[]) => ReactNode;
     /** The line shown when a search matches nothing. */
     emptyMessage?: string;
+    /**
+     * Told where the highlight COMES TO REST while the list is open, and `null`
+     * when it closes or the pointer leaves it: at once for a key, and once the
+     * pointer has rested on a row for `HIGHLIGHT_REST_MS`. What a list that
+     * previews its options listens to, so a pointer crossing the list does not
+     * preview every row it passed. Told the chosen row as the list opens.
+     * Listbox mode only.
+     */
+    onHighlight?: ((option: SelectOption | null) => void) | undefined;
 }
 /**
  * A picker over a known set of values.

package/dist/Select/index.js

@@ -1,5 +1,5 @@
-export { Select } from '../chunk-SEFMO2EV.js';
-import '../chunk-6MU7HNB4.js';
+export { Select } from '../chunk-IXUU5DLZ.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Select-4ANVLHUY.css → Select-2P7AWUE4.css}

@@ -7,9 +7,12 @@
  * into the nearest layer host and drawn with the shared listbox register, so
  * a list of options looks the same wherever it is offered from.
  *
- * The boundary is --color-border-control, like every other control: the
- * hairline measured 1.27:1 in light, which is a box a reader has to know is
- * there already.
+ * THE BOUNDARY IS A BUTTON'S, --color-border-strong, the secondary button's
+ * and the date and time-window pickers'. A picker shows its value and its
+ * chevron, and those are what a reader knows it by. --color-border-control,
+ * at 3:1, is for the controls whose outline IS the control (a text box, a
+ * checkbox, a switch; see Input.css): on a picker it drew the one bright box
+ * in a row of buttons and switchers, brighter at rest than under the pointer.
  */
 
 .crewlet-select {
@@ -27,7 +30,7 @@
   width: 100%;
   min-height: var(--size-control-md);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   /* The boundary is the only thing that moves. The ring is an outline, which
@@ -48,7 +51,7 @@
 }
 
 .crewlet-select:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -197,7 +200,7 @@ svg.crewlet-select__chevron {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  max-height: var(--crewlet-select-menu-max-height);
+  max-height: min(var(--crewlet-select-menu-max-height), 60vh);
   /*
    * THE PANEL IS THE PRODUCT'S SURFACE, on the panel hairline, at the panel
    * corner. A list offered from a field is another panel over the one the
@@ -224,11 +227,25 @@ svg.crewlet-select__chevron {
   position: absolute;
 }
 
+/*
+ * THE PANEL'S HEIGHT IS THE LIST'S. The shared listbox register caps a list
+ * at min(360px, 60vh) on its own, which inside this panel made
+ * `--crewlet-select-menu-max-height` a promise it could not keep past 360px:
+ * a taller panel drew the same short list and scrolled it. Here the list
+ * fills what the panel allows, and the panel keeps the register's cap on the
+ * window (see `.crewlet-select__menu`).
+ */
 .crewlet-select__list {
   flex: 1;
   min-height: 0;
 }
 
+/* Scoped to the panel for the weight, as the option rules below are: the
+   register's cap is one class, and the bundle orders equal weights by hash. */
+.crewlet-select__menu .crewlet-select__list {
+  max-height: none;
+}
+
 .crewlet-select__group {
   display: flex;
   flex-direction: column;
@@ -290,6 +307,15 @@ svg.crewlet-select__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * AT THE ROW'S END in a list whose rows lead with a mark (see `tickAtEnd`),
+ * so the mark starts at the panel's edge. After a hint it follows the hint,
+ * which already takes the free space; without one it takes it itself.
+ */
+.crewlet-select__option-body + .crewlet-select__option-tick--end {
+  margin-left: auto;
+}
+
 .crewlet-select__option-body {
   display: flex;
   flex-direction: column;
@@ -297,6 +323,30 @@ svg.crewlet-select__chevron {
   min-width: 0;
 }
 
+/*
+ * WHAT AN OPTION DRAWS BEFORE ITS LABEL (a swatch, an avatar, a glyph),
+ * centred on the label's first line rather than on the row, so a row with a
+ * second line keeps its mark beside the words it belongs to. The same slot on
+ * the trigger, while that option is the one chosen, sits on the value's line.
+ */
+.crewlet-select__option-leading,
+.crewlet-select__leading {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+
+.crewlet-select__option-leading {
+  min-height: calc(var(--font-line-height-normal) * 1em);
+}
+
+/* A hint ends the row's FIRST line, on the label's baseline, rather than
+   sitting on the row's top edge at its own smaller size. */
+.crewlet-select__option:has(> .crewlet-listbox__hint) .crewlet-select__option-body,
+.crewlet-select__option > .crewlet-listbox__hint {
+  align-self: baseline;
+}
+
 /*
  * ONE LINE, WHICH IS WHAT THE ELLIPSIS BELOW WAS ALWAYS FOR. `overflow:
  * hidden` clips what leaves the box and `text-overflow` replaces what a LINE

package/dist/SidebarNav/index.js

@@ -1,3 +1,4 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-IVFJD7WY.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-UCCC7YVZ.js';
+import '../chunk-FYTIJM2T.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SidebarNav-X5NLZNWA.css → SidebarNav-KF66MLOM.css}

@@ -263,26 +263,11 @@
 
 /*
  * A PROJECT'S KEY, as a chip in the glyph's place: the prefix every item in
- * the project is filed under, in mono so ENG and PROD line up by letter. It
- * is the raised rung inside the plain hairline, in the secondary ink, which
- * the palette suite measures on every ground a row can have; on the reader's
- * own row, which is raised too, the hairline is what draws it.
+ * the project is filed under, in mono so ENG and PROD line up by letter. The
+ * chip is the kit's `KeyChip` (KeyChip.css); the suite below measures its ink
+ * on every ground a row can have, and on the reader's own row, which is raised
+ * too, its hairline is what draws it.
  */
-.crewlet-nav-item__lead {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  padding: 0 calc(var(--spacing-1) + 1px);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-xs);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--font-letter-spacing-normal);
-  line-height: var(--font-line-height-body);
-}
 
 /*
  * THE COUNT: how many of something the destination holds, as a quiet figure