@crewlethq/ui 0.4.4 → 0.5.0

package/dist/Meter/Meter.d.ts

@@ -2,12 +2,17 @@ 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.
+ * `quantity` is the ordinary reading, because a budget that is being spent is
+ * not in a state; it is just a number. It is the first data series,
+ * `--color-data-1`: a meter is a figure of one quantity, and the label that
+ * names it is what a data hue asks for, where the accent it used to take
+ * means "act here" and a bar is not an action. 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. A caller that
+ * owns the rule passes a `MeterState` instead, which names the state rather
+ * than the paint.
  */
-export type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+export type MeterTone = 'quantity' | 'success' | 'warning' | 'danger' | 'neutral';
 /**
  * WHICH DIRECTION A FULL BAR POINTS, which is the one thing the fill itself
  * cannot say. A budget at 100 percent is a fault; a goal at 100 percent is the
@@ -26,7 +31,40 @@ export type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
  * other thing, and it is not this component.
  */
 export type MeterPolarity = 'spent' | 'progress';
-export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+/**
+ * WHAT A LIMITED QUANTITY HAS COME TO, in the words of whoever enforces the
+ * limit: `ok` is inside it, `near` is close enough that somebody should look,
+ * and `refusing` is at it, where whatever the limit guards has stopped
+ * accepting more. It is the `spent` ramp's three steps named for what they
+ * MEAN rather than for how they are painted, which is what lets a consumer
+ * that owns the rule hand the meter its verdict instead of a number to judge.
+ */
+export type MeterState = 'ok' | 'near' | 'refusing';
+/** Every `MeterState`, in escalating order, for a caller checking a value it was sent. */
+export declare const METER_STATES: readonly MeterState[];
+/**
+ * Where the `spent` ramp turns, as FRACTIONS OF THE LIMIT rather than
+ * percentages, because a limit is what the rule that owns it is written
+ * against ("warn at nine tenths of the budget").
+ *
+ * Only `near` is a threshold. `refusing` is the limit itself, a fraction of
+ * 1: a meter's maximum IS the limit, so a refusal anywhere else would be a
+ * second ceiling the bar could not draw.
+ */
+export interface MeterThresholds {
+    /**
+     * The fraction of the limit at and above which the reading is `near`.
+     * Greater than 0 and at most 1; at 1 the meter has no middle step, since
+     * the limit itself is `refusing`.
+     */
+    near: number;
+}
+/**
+ * The thresholds a meter uses when nobody says otherwise: `near` at three
+ * quarters of the limit, the ramp every existing caller has always had.
+ */
+export declare const DEFAULT_METER_THRESHOLDS: Readonly<MeterThresholds>;
+interface MeterBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     value: number;
     /**
      * The ceiling. NON-POSITIVE MEANS THERE IS NO CEILING, and the bar is then
@@ -49,6 +87,33 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     valueText?: string | undefined;
     /** Drawn at the trailing edge of the legend. Falls back to `valueText`. */
     hint?: ReactNode;
+    /**
+     * `compact` is the bar inside a table cell. Its legend drops a type step;
+     * the track does not: it is the design's 6px at both sizes, and a thinner
+     * one in a dense row is the one a reader takes for a divider.
+     */
+    size?: 'default' | 'compact' | undefined;
+    /** Keep the label out of the picture. It stays in the accessibility tree. */
+    hideLabel?: boolean | undefined;
+}
+/**
+ * THE VERDICT: a caller that owns the rule says which state the quantity is
+ * in, and the meter paints it and derives nothing. The fill still draws the
+ * value against the maximum; only the tone is the caller's.
+ *
+ * Nothing else that decides a tone may stand beside it, because each would be
+ * a second opinion about one reading, and the types refuse them.
+ */
+export interface MeterVerdictProps {
+    /** The state the owner of the limit says this is: `ok`, `near` or `refusing`. */
+    state?: MeterState | undefined;
+    tone?: undefined;
+    polarity?: undefined;
+    thresholds?: undefined;
+}
+/** A tone chosen by hand, or derived from the fill on either ramp's own steps. */
+export interface MeterRampProps {
+    state?: undefined;
     /** Overrides the tone derived from the fill. */
     tone?: MeterTone | undefined;
     /**
@@ -57,21 +122,42 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
      * is given, which overrides the ramp entirely.
      */
     polarity?: MeterPolarity | 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;
+    thresholds?: undefined;
+}
+/**
+ * The `spent` ramp with its middle step moved. Only that ramp has one, and a
+ * tone given by hand would ignore it, so neither stands beside `thresholds`.
+ */
+export interface MeterThresholdProps {
+    state?: undefined;
+    tone?: undefined;
+    polarity?: 'spent' | undefined;
+    /** Where `near` begins, as a fraction of the limit. Replaces `DEFAULT_METER_THRESHOLDS`. */
+    thresholds?: MeterThresholds | undefined;
 }
+export type MeterProps = MeterBaseProps & (MeterVerdictProps | MeterRampProps | MeterThresholdProps);
+/** The tone a `MeterState` is painted in. */
+export declare function meterStateTone(state: MeterState): MeterTone;
+/**
+ * The state a fraction of the limit is in: at or past the limit it is
+ * `refusing`, at or past `thresholds.near` it is `near`, below that `ok`.
+ *
+ * The boundaries are INCLUSIVE, so `near: 0.9` flips at exactly `9 / 10`:
+ * a rule that says "warn at nine tenths" warns at nine tenths.
+ *
+ * A `near` outside (0, 1] is refused with a `RangeError` naming it, because
+ * every such value is a rule that cannot be drawn: at 0 or below everything,
+ * even an empty bar, is `near`, and past 1 the limit is `refusing` before it
+ * can ever be `near`.
+ */
+export declare function meterState(fraction: number, thresholds?: MeterThresholds): MeterState;
 /**
  * The `spent` ramp: at the top it is a fault, near the top it wants a person,
  * below that it is just a number.
  *
  * Keeps its plain name because renaming an export is breaking, and it is still
- * the ramp a `Meter` uses when nobody says otherwise.
+ * the ramp a `Meter` uses when nobody says otherwise. It is `meterState` at
+ * `DEFAULT_METER_THRESHOLDS`, painted, over a percentage.
  */
 export declare function meterTone(percent: number): MeterTone;
 /**
@@ -123,4 +209,5 @@ export declare function progressTone(percent: number): MeterTone;
  * figures, so nothing is lost: what a reader hears is "140 of 100", not a bar
  * that quietly rounds itself down to exactly the limit it has overrun.
  */
-export declare function Meter({ value, max, label, valueText, hint, tone, polarity, size, hideLabel, className, ...rest }: MeterProps): import("react").JSX.Element;
+export declare function Meter({ value, max, label, valueText, hint, state, tone, polarity, thresholds, size, hideLabel, className, ...rest }: MeterProps): import("react").JSX.Element;
+export {};

package/dist/Meter/index.d.ts

@@ -1,3 +1,3 @@
 import './Meter.css';
-export { Meter, meterTone, progressTone } from './Meter.js';
-export type { MeterPolarity, MeterProps, MeterTone } from './Meter.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone, } from './Meter.js';
+export type { MeterPolarity, MeterProps, MeterRampProps, MeterState, MeterThresholdProps, MeterThresholds, MeterTone, MeterVerdictProps, } from './Meter.js';

package/dist/Meter/index.js

@@ -1,3 +1,3 @@
-export { Meter, meterTone, progressTone } from '../chunk-YODNNSZL.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-4PZ6FJKW.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Meter-SKOOXQBC.css → Meter-5VCSFMZW.css}

@@ -42,22 +42,41 @@
 }
 
 /*
- * 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.
+ * A 6px track with round ends, the approved design's meter, at both sizes. It
+ * stands at the end of a stat tile's value line beside a 28px number and a
+ * 28px sparkline, and under a line of 12px text inside a card; the design
+ * draws it at six in both places, where the engine's older bar was four.
+ *
+ * The track is RAISED, the approved design's, and a rung rather than a well.
+ * The fill is measured against it as a mark, and the palette suite measures a
+ * mark on the four opaque rungs: on the inset well this track used to be, the
+ * light warning and success fills measured 2.84:1 and 2.86:1 over the frame
+ * once the states took the approved hues, a pair no palette rule could see.
+ *
+ * An opaque track has an edge only against a ground that is not itself, so a
+ * meter is drawn on a CARD, where the design puts every one and where the
+ * palette holds raised a visible step above the ground (dE 3.13 dark, 3.65
+ * light). On the raised rung the unfilled remainder, and with it the extent
+ * of the bar, would not be there at all.
  */
 .crewlet-meter__track {
-  height: 4px;
+  height: 6px;
   border-radius: var(--radius-pill);
-  background: var(--color-surface-inset);
+  background: var(--color-surface-elevated);
   overflow: hidden;
 }
 
+/*
+ * The ordinary reading, `quantity`, is the first data series. A meter is a
+ * figure of ONE quantity and its label names it, which is all a data hue
+ * asks for; the accent it used to take means "act here", and a bar is not
+ * something to act on. Every other tone below is a state, derived from the
+ * fill or passed by the caller.
+ */
 .crewlet-meter__fill {
   height: 100%;
   border-radius: var(--radius-pill);
-  background: var(--color-brand-accent);
+  background: var(--color-data-1);
   transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
@@ -85,3 +104,23 @@
     transition: none;
   }
 }
+
+/*
+ * FORCED COLORS. The mode repaints every author background to Canvas, and the
+ * track and the fill are nothing but backgrounds, so the bar used to disappear
+ * whole, track and reading together, for exactly the reader who asked for
+ * more contrast. A system colour an author writes is kept, so the fill is
+ * drawn in CanvasText and the track in GrayText, the system's own pair for
+ * "there" and "quieter", which is what a SegmentedMeter draws its parts and
+ * its remainder in. The tone goes, as every hue does in this mode; the length
+ * is the reading, and it stays.
+ */
+@media (forced-colors: active) {
+  .crewlet-meter__track {
+    background: GrayText;
+  }
+
+  .crewlet-meter__fill[data-tone] {
+    background: CanvasText;
+  }
+}

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-2EOKFKHX.js';
+export { ConfirmModal, Modal } from '../chunk-IG27QX7Q.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-XYQJ4BL6.css → Modal-JAYBS2KS.css}

@@ -220,10 +220,11 @@
 }
 
 /*
- * The shell's one breakpoint. Below it there is no content beside a sheet to
- * keep in view, so the sheet takes the whole width and its edge goes with it.
+ * The shell's one breakpoint, strictly under it as the shell switches. Below
+ * it there is no content beside a sheet to keep in view, so the sheet takes
+ * the whole width and its edge goes with it.
  */
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-modal--sheet {
     width: 100%;
     border-inline: none;
@@ -249,6 +250,14 @@
  * it on the line the bar behind it draws, and holds the two buttons that
  * commit and abandon the form at a full control step with room around them.
  *
+ * THE HEIGHT IS THE ROOM, NOT THE PADDING. The head centres what it holds, so
+ * the room around the buttons is what the bar's height leaves, and the block
+ * padding is only the least it keeps when a title wraps. It was the 16px step
+ * while the bar was 64px, which a full control step filled exactly; at 52px
+ * the same padding stood the head 12px past the bar behind it. At the 4px step
+ * the head is the bar's height with the control step at every density, 36.48px
+ * at comfortable included, and with a subtitle under the title.
+ *
  * It used to be the tighter band, 49px with a close control alone, and the
  * commit pair sat in a foot below a body that scrolled 1,764px on a seat with
  * a dozen fields: the reader had to travel the whole form to reach Apply, and
@@ -256,7 +265,7 @@
  */
 .crewlet-modal__header--sheet {
   min-height: var(--size-shell-topbar);
-  padding: var(--spacing-4) var(--spacing-6);
+  padding: var(--spacing-1) var(--spacing-6);
   gap: var(--spacing-4);
   box-sizing: border-box;
 }

package/dist/OrgLabel/OrgLabel.d.ts

@@ -17,8 +17,10 @@
  *     because a node is read as a box and a column is read down its leading
  *     edge: names centred in a column are a column nobody can scan;
  *   - the mark's zone is a large control step in a node and a small one in a
- *     row, and the mark inside it takes the step that half-fills or
- *     three-quarter-fills whichever zone it is in;
+ *     row, and a glyph inside it takes the step that half-fills or
+ *     three-quarter-fills whichever zone it is in; a seat's badge is the
+ *     approved org chart's own 26px in a node and the smallest badge, 20px,
+ *     in a row;
  *   - the push slot keeps a FIXED room in a node, because a node is
  *     `width: max-content` and a slot that grew with its content would relay
  *     the whole chart, and is content-sized in a row, where the grid already
@@ -41,36 +43,67 @@
  * became one.
  */
 import type { ReactNode } from 'react';
+import { type AvatarKind } from '../Avatar/index.js';
 import type { TreeCardTone } from '../TreeCanvas/index.js';
 /**
  * Which of the two things this label is: a card in a chart, or a line in a
  * grid of them.
  */
 export type OrgLabelLayout = 'node' | 'row';
-/** What both layouts say, in the order they say it. */
-export interface OrgLabelContent {
-    /** The mark in the leading zone: a glyph, a brand mark, an image. */
+/**
+ * The seat a node or a row stands for, drawn as its badge in the mark's zone.
+ *
+ * `kind` IS REQUIRED HERE, where `Avatar` defaults it: an org chart is the one
+ * surface whose whole job is saying which seats a person holds and which the
+ * engine runs, and a default would draw every person the caller forgot to
+ * mark as an agent.
+ */
+export interface OrgLabelAvatar {
+    /** Whose badge: the initials are made from it, usually the label's own name. */
+    name: string;
+    /** An agent is a squircle, a human a circle: `Avatar`'s own kind. */
+    kind: AvatarKind;
+    /** A picture, where the seat has one; otherwise the initials. */
+    src?: string | undefined;
+}
+/**
+ * The mark in the leading zone: a glyph, or a seat's badge. Never both, since
+ * the zone holds one mark.
+ */
+export type OrgLabelMark = {
+    /** A glyph, a brand mark or an image, for what is not a seat: a company, a unit, a group. */
     icon?: ReactNode | undefined;
     /**
-     * A ring around that mark.
+     * How big the glyph is drawn in its zone, as a proportion of the zone
+     * rather than as a size: `md` half-fills it, `lg` fills three quarters.
      *
-     * `dashed` is the boundary something standing for somebody outside the
-     * system wears, the same mark a dashed card and a dashed row carry. The
-     * BOUNDARY says it rather than a hue, so it reads to somebody who cannot
-     * separate hues at all.
+     * `md` is what a container takes (a company, a unit, a group) and `lg`
+     * is for the mark that stands for the THING the chart is about, so a
+     * reader tells one from the other at the far end of a chart without
+     * reading either caption. The zone itself does not change either way,
+     * so this moves nothing: only what is drawn inside it.
      */
-    iconRing?: 'none' | 'dashed' | undefined;
+    iconSize?: 'md' | 'lg' | undefined;
+    avatar?: undefined;
+} | {
     /**
-     * How big the mark is drawn in its zone, as a proportion of the zone rather
-     * than as a size: `md` half-fills it, `lg` fills three quarters.
+     * A SEAT'S BADGE, with its kind as its outline: a squircle for an agent,
+     * a circle for a person, which is the one cue that tells them apart.
+     * There used to be a second, a dashed ring round a glyph for a human
+     * seat, and two cues for one fact are two things to keep agreeing.
+     *
+     * The layout sizes it and nothing here does: the approved org chart's
+     * 26px badge in a node and the smallest step, 20px, in a row.
      *
-     * `md` is what a container takes (a company, a unit, a group) and `lg` is
-     * for the mark that stands for the THING the chart is about, so a reader
-     * tells one from the other at the far end of a chart without reading either
-     * caption. The zone itself does not change either way, so this moves
-     * nothing: only what is drawn inside it.
+     * Optional in this branch as well, so a label that draws no mark at all
+     * matches both and a caller can hand either layout the same content.
      */
-    iconSize?: 'md' | 'lg' | undefined;
+    avatar?: OrgLabelAvatar | undefined;
+    icon?: undefined;
+    iconSize?: undefined;
+};
+/** What both layouts say besides the mark, in the order they say it. */
+interface OrgLabelWords {
     /** The name, which takes the width the two fixed zones leave and truncates. */
     name: ReactNode;
     /** What kind of thing this is: "Department", "Human seat", "Crewlet agent". */
@@ -98,7 +131,9 @@ export interface OrgLabelContent {
      */
     className?: string | undefined;
 }
-export interface OrgLabelNodeProps extends OrgLabelContent {
+/** What both layouts say, in the order they say it. */
+export type OrgLabelContent = OrgLabelMark & OrgLabelWords;
+export type OrgLabelNodeProps = OrgLabelContent & {
     layout?: 'node' | undefined;
     /**
      * Refused on a node, because a node has no element to carry it. A chart card
@@ -106,12 +141,13 @@ export interface OrgLabelNodeProps extends OrgLabelContent {
      * is where a node's ink comes from; there is nothing here to tone.
      */
     tone?: never | undefined;
-}
-export interface OrgLabelRowProps extends OrgLabelContent {
+};
+export type OrgLabelRowProps = OrgLabelContent & {
     layout: 'row';
-    /** The row's hue, which its mark and its name are drawn in. */
+    /** The row's hue, which its glyph and its name are drawn in. */
     tone?: TreeCardTone | undefined;
-}
+};
 export type OrgLabelProps = OrgLabelNodeProps | OrgLabelRowProps;
 /** The mark, the name and the caption of an org chart node or an org table row. */
 export declare function OrgLabel(props: OrgLabelProps): import("react").JSX.Element;
+export {};

package/dist/OrgLabel/index.d.ts

@@ -1,3 +1,3 @@
 import './OrgLabel.css';
 export { OrgLabel } from './OrgLabel.js';
-export type { OrgLabelContent, OrgLabelLayout, OrgLabelProps, OrgLabelNodeProps, OrgLabelRowProps, } from './OrgLabel.js';
+export type { OrgLabelAvatar, OrgLabelContent, OrgLabelLayout, OrgLabelMark, OrgLabelProps, OrgLabelNodeProps, OrgLabelRowProps, } from './OrgLabel.js';

package/dist/OrgLabel/index.js

@@ -1,2 +1,3 @@
-export { OrgLabel } from '../chunk-5C5YMZQU.js';
+export { OrgLabel } from '../chunk-WOFOMTGB.js';
+import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgLabel-D7U6QJZD.css → OrgLabel-CR233G34.css}

@@ -73,26 +73,17 @@
      had the fill alone and therefore the same defect; one rule now answers for
      both surfaces. */
   color: inherit;
-  fill: currentColor;
-}
-
-/*
- * THE DASHED RING is the boundary something standing for somebody outside the
- * system wears, around the mark rather than instead of it: the card's own edge
- * and the row's own mark carry the same dash, and the two together are what a
- * reader recognises without reading a word.
- */
-.crewlet-org-label__icon--dashed {
-  position: relative;
 }
 
-.crewlet-org-label__icon--dashed::before {
-  content: '';
-  position: absolute;
-  width: var(--size-target-min);
-  height: var(--size-target-min);
-  border: 1px dashed var(--color-border-hover);
-  border-radius: var(--radius-circle);
+/* THE FILL IS FOR A FILLED DRAWING, and a glyph is a stroke. Painting the
+   inside of a Lucide glyph turns every closed shape in it solid and every
+   open one into a smear (a person's head and shoulders, a unit's building, a
+   warning's triangle, each a blob), so a `.crewlet-glyph` keeps the fill its
+   own frame decides and takes the ink through its stroke. */
+.crewlet-org-label__icon svg:not(.crewlet-glyph),
+.crewlet-org-label__icon svg:not(.crewlet-glyph) g,
+.crewlet-org-label__icon svg:not(.crewlet-glyph) path {
+  fill: currentColor;
 }
 
 /* ---- The name and its caption -------------------------------------------- */

package/dist/OrgNode/index.js

@@ -1,3 +1,4 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IAJLHVUA.js';
-import '../chunk-5C5YMZQU.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TIWAHZZ6.js';
+import '../chunk-WOFOMTGB.js';
+import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/OrgTable.d.ts

@@ -71,9 +71,9 @@ export declare function OrgTable({ rows, renderCell, tone, controls, labels, ref
  * this folder is drawing. It adds nothing and takes nothing away beyond the
  * row's `tone`, which only a row has: a chart card publishes its own.
  */
-export interface OrgTableNameProps extends OrgLabelContent {
+export type OrgTableNameProps = OrgLabelContent & {
     tone?: OrgTableTone | undefined;
-}
+};
 export declare function OrgTableName({ tone, ...content }: OrgTableNameProps): import("react").JSX.Element;
 /**
  * The strip of controls at the end of a row.

package/dist/OrgTable/index.js

@@ -1,11 +1,12 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-H4FBTAYS.js';
-import '../chunk-5SDBMKUO.js';
-import '../chunk-NTRZGNEX.js';
-import '../chunk-5C5YMZQU.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-BNCCEER3.js';
+import '../chunk-FIFNP6PL.js';
+import '../chunk-S3BCVWTU.js';
+import '../chunk-WOFOMTGB.js';
 import '../chunk-53DVJCVW.js';
-import '../chunk-S4GZWSKR.js';
+import '../chunk-OM5E3TTK.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-IA232OTU.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-EFSG7HNU.js';
+export { Popover } from '../chunk-AUS5FNQE.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PricingCard/index.js

@@ -1,4 +1,4 @@
-export { PricingCard } from '../chunk-KLJCCMF3.js';
-import '../chunk-S2XHHEW4.js';
-import '../chunk-PZSWF74H.js';
+export { PricingCard } from '../chunk-R6735B37.js';
+import '../chunk-74KMX7YH.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PricingCard-JFI7RYXP.css → PricingCard-7EFXRSD2.css}

@@ -36,13 +36,12 @@
 /* ── Card root ──────────────────────────────────────────────────── */
 .crewlet-pricing-card {
   text-align: left;
-  /* The panel recipe: on dark the top hairline is the elevation, on light the
-     shadow is. One card surface across the system, so a plan tier and a
+  /* The card recipe, flat: the card's surface, its hairline and its 12px
+     corner. One card surface across the system, so a plan tier and a
      dashboard panel are the same object. */
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   padding: var(--spacing-4);
   display: flex;
   flex-direction: column;
@@ -75,7 +74,7 @@
 .crewlet-pricing-card.is-selected {
   border-color: var(--color-brand-accent);
   background: var(--color-brand-accent-soft);
-  box-shadow: var(--shadow-selection), var(--shadow-hairline);
+  box-shadow: var(--shadow-selection);
 }
 
 .crewlet-pricing-card.is-disabled,
@@ -90,7 +89,7 @@
 }
 
 .crewlet-pricing-card.is-selected:has(.crewlet-pricing-card__amount--discounted) {
-  box-shadow: var(--shadow-selection), var(--shadow-hairline), var(--shadow-glow);
+  box-shadow: var(--shadow-selection), var(--shadow-glow);
 }
 
 /* Compact a card's interior at small container widths, so a four-up grid on a

package/dist/SearchTrigger/SearchTrigger.d.ts

@@ -1,7 +1,25 @@
 import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * Where the field stands, which decides its ground, its height and whether it
+ * ever gives up its words.
+ *
+ * `rail` is the approved design's: the whole width of the sidebar, on the
+ * frame, so it takes the SHEET's ground one rung up, and it keeps its label
+ * and its hint at every width, because under the shell breakpoint the rail is
+ * a drawer as wide as it ever was.
+ *
+ * `toolbar` stands in a bar on the sheet, so it takes the CARD's ground, at
+ * the height of the controls beside it and a width of its own
+ * (`--crewlet-search-trigger-width`); under the shell breakpoint it drops its
+ * label and its hint and keeps the glyph, because a bar is where the room
+ * runs out.
+ */
+export type SearchTriggerVariant = 'rail' | 'toolbar';
 export interface SearchTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
     /** What it is called, drawn inside the box and used as its name. */
     label?: string | undefined;
+    /** Where it stands. The sidebar field by default. See the type. */
+    variant?: SearchTriggerVariant | undefined;
     /** The shortcut hint, as a Kbd with `keys`. */
     shortcut?: ReactNode;
     /**
@@ -21,9 +39,10 @@ export interface SearchTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButton
  * and a box that takes focus and then throws the first keystroke away is worse
  * than one that never looked like a field at all.
  *
- * ITS NAME IS ON THE BUTTON, not in its text. The narrow layout hides the
- * label and the hint and leaves the glyph, and content under `display: none`
- * names nothing: the dashboard this comes from had a search button that a
- * screen reader announced as "button" at every width under the breakpoint.
+ * ITS NAME IS ON THE BUTTON, not in its text. The toolbar form's narrow
+ * layout hides the label and the hint and leaves the glyph, and content under
+ * `display: none` names nothing: the dashboard this comes from had a search
+ * button that a screen reader announced as "button" at every width under the
+ * breakpoint.
  */
 export declare const SearchTrigger: import("react").ForwardRefExoticComponent<SearchTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/SearchTrigger/index.d.ts

@@ -1,3 +1,3 @@
 import './SearchTrigger.css';
 export { SearchTrigger } from './SearchTrigger.js';
-export type { SearchTriggerProps } from './SearchTrigger.js';
+export type { SearchTriggerProps, SearchTriggerVariant } from './SearchTrigger.js';

package/dist/SearchTrigger/index.js

@@ -1,2 +1,2 @@
-export { SearchTrigger } from '../chunk-Q4ZPPART.js';
+export { SearchTrigger } from '../chunk-EFYPAJT3.js';
 import '../chunk-ODEQTPFM.js';