@crewlethq/ui 0.49.1 → 0.51.0

package/README.md

@@ -204,6 +204,40 @@ 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.51.0
+
+Polish of the setup wizard pieces, and the parts the brand setup asked for.
+
+**`ColorField` draws its `#` and reads more than six digits.** The `#` is drawn at the start of the field, so a person types the six hex digits alone, and a pasted `#rrggbb` loses its own `#` to it. When the reader leaves the field (Enter or Tab), `rrggbb`, the three digit shorthand and `rgb(r, g, b)` or `rgb(r g b)` are normalised to lowercase `#rrggbb`; anything else is refused with one sentence. Six digits are still reported as they are typed, and `onChange` still receives only a colour, or `''` for an emptied optional field. What to change: a test that reads the text field's value reads the six digits without the `#`. The default `labels.invalid` and `labels.placeholder` changed, and `labels.prefix` is new.
+
+**`ContrastHelp` is new**: a small info button beside a contrast heading that opens a short panel saying what AA, AAA and Low or Fails mean, each drawn as `ContrastBadge` draws it. It is a `Popover` the button toggles, so it opens by touch and from the keyboard, and closes on Escape with focus handed back. Place it beside the heading, not inside it. `ContrastLevelTag` is the one drawing of a level, shared by the badge and the panel.
+
+**`ColorChip` is new**: a colour as a small decorative chip (12px `xs` or 16px `sm`, round or square) with an edge of its own and the hatch of no colour, for the mark on a button that applies a suggested colour.
+
+**`SetupWizard` takes `footerStart` and `wide`.** `footerStart` stands at the start of the footer row (the way out), with `footer`, the step's actions, held at its end. `wide` lets a step that lays out columns of its own take the whole width beside the rail. A wizard with no `aside` no longer holds an empty 320px column from 70rem.
+
+**`Callout`'s actions stand one step apart.** The action slot is a wrapping row with the kit's step between, so two actions never draw touching.
+
+**`EditingStatus` reads cleanly.** Its text is "Draft Saved 24s ago", drawn "Draft · Saved 24s ago": no hidden comma and no second "Saved". The live region holds only the label and the state, and the time follows it in a `time` element outside the region, so it is shown and never announced. What to change: `labels.saved` is now the word alone (`'Saved'`), and `labels.savedSpoken` is gone. A test that reads `getByRole('status')` reads the label and the state only.
+
+**`ListInput` ends its new-item row with an Add button.** The add control no longer floats beside the legend as a `+` square: it is a text button at the end of the box's own row, with or without a shown legend, beside Enter. It shows `addText` ("Add") and is named by `addLabel` ("Add policy").
+
+**Folder tiles are set on the artifact card's type scale.** A `FolderTile`'s name and facts take a gallery card's title and facts steps at every width, on one 1.35 line height with the card's step between; a row, and a tile on a phone, no longer drop to smaller steps beside cards that keep theirs. `ArtifactCard`'s gallery facts take the title's line height. `ArtifactNameCell` is unchanged: a folder's row in the list is set as every artifact's row there.
+
+## Changes in 0.50.0
+
+The pieces of a setup a person walks step by step, first used by the brand setup.
+
+**`SetupWizard` is new**: a page of its own for a setup walked step by step. The header is a `PageHeader` title with the trail above it (`trail`) and the draft's status (`status`) and the way out (`actions`) beside it. The rail is a `nav` named by `stepsLabel`, holding a vertical `Stepper` of `steps` with `current`, `reached` and `onSelect`. The content is a `section` named by the step's `heading`, with a `lead` sentence and the step's fields (`children`) in one column of at most 640px. The optional `aside` is a complementary landmark named by `asideLabel` (required with it), held in view beside the content. The `footer` holds the step's actions at the bottom of the view, above the device's safe area. From 70rem of the wizard's own width the rail, the content and the aside stand side by side (240px, the content, 320px); under that, as in a 1024px window beside the application's rail, the aside moves under the content. Under the phone breakpoint the rail becomes a row of steps under "Step 3 of 6 · Colours" (`labels.progress`) and the aside folds into a disclosure (`labels.asideToggle`, "Preview"). Focus moves to the step's heading when the step changes, and the step's content and the aside start one heading level under it.
+
+**`Stepper` takes `orientation`, a per-step `status` and `description`, and `onSelect`.** `orientation="vertical"` draws a column of rows: a 20px mark per step (the check, the dot, the warning glyph, or the step's number) on a hairline that joins them, the label beside it, and the description and the status words under it, with the current row lifted as the sidebar's is. A step's `status` (`done`, `current`, `upcoming`, `optional` or `attention`) draws it where its position does not say it all: an optional step says "Optional" (`optionalLabel`), and one that needs attention carries the warning glyph on the warning tint and says "Needs attention" (`attentionLabel`); in a row the words are said rather than shown. The current step is always drawn current, and `status: 'current'` on any other step is refused. With `onSelect`, every visited step (the current one, every step before it, and every step up to `reached`) is a button, the current one carrying `aria-current="step"`, and a step not reached yet stays words rather than a disabled button. The horizontal row draws exactly as before; its step-still-to-come class is now `crewlet-stepper__step--upcoming` (it was `--later`).
+
+**`ContrastBadge` takes `advisory`**: under its scale's AA floor the badge reads "Low" in the warning tone with the warning glyph (`crewlet-contrast-badge--low`), rather than "AA large text" or "Fails" in the danger tone, for a pair a person is told about and may keep. A pair that blocks leaves it off and keeps today's behaviour. `labels.levels` now takes any of the level words on its own (`ContrastBadgeLabelsInput`), and the drawn level is typed `ContrastBadgeLevel`.
+
+**`EditingStatus` takes `savedAt`**: with nothing unsaved and no save in flight, the status says how long ago the last save landed (`labels.saved`, "Saved 2m ago"; "Draft · Saved 2m ago" with `labels.editing` "Draft"). The time follows the shared clock and is hidden from the live region, which says "Saved" (`labels.savedSpoken`) once rather than every minute.
+
+**`@crewlethq/tokens` exports `nearestContrastShade(hex, ground, min)`**: the colour nearest `hex` that clears `min` against `ground`, keeping its hue and moving only its OKLab lightness, or `null` when no shade can. `#00baba` on `#f6f7fb` gives `#007f7f` at 4.5:1. It is the one implementation a "Use #007f7f (4.51:1)" suggestion is computed with; see the tokens README.
+
 ## Changes in 0.49.1
 
 **`@crewlethq/tokens` keeps its palettes and its theme registry in modules of their own.** The `themes` object (both palettes, every value) was generated into the same module as `themeRegistry`, `themeGroups`, `DEFAULT_THEME_ID` and `isThemeId`, and a bundler keeps a module whole in the chunk that first needs it: an application that reads the registry at boot (a theme preference) carried every palette value in its entry as soon as any later screen imported `themes` (since 0.47.0, `LogoSlot`), about 8 KB raw and 2 KB gzipped on every first paint of the engine dashboard. `themes` now comes from a module of its own (`dist/palettes.js`), so a consumer of the registry never carries it and the palettes land in the chunk that uses them. The package's exports are unchanged: `import { themes, themeRegistry } from '@crewlethq/tokens'` works as before.

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-Q44X36QC.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-S63QOMXC.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';

package/dist/{ArtifactCard-SOB63NV5.css → ArtifactCard-F7IVRL3A.css}

@@ -215,6 +215,9 @@
 
 .crewlet-artifact-card--card .crewlet-artifact-card__facts {
   font-size: var(--font-size-sm);
+  /* The title's line height, so a card's words and a folder tile's beside it
+     keep one rhythm. */
+  line-height: 1.35;
 }
 
 .crewlet-artifact-card__meta {

package/dist/AvatarPicker/index.js

@@ -1,8 +1,8 @@
-export { AvatarPicker } from '../chunk-3QSKDZR5.js';
+export { AvatarPicker } from '../chunk-EW2N4FOD.js';
 import '../chunk-34RMTXDZ.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
+import '../chunk-AYKXMIOR.js';
 import '../chunk-6FVGSWLS.js';
 import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';

package/dist/BrandSample/index.js

@@ -1,5 +1,5 @@
-export { BrandSample } from '../chunk-OEEYL2CM.js';
-import '../chunk-P3OIM6OC.js';
+export { BrandSample } from '../chunk-AVMQMY66.js';
+import '../chunk-X7WEE3EK.js';
 import '../chunk-5SGHW42B.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/BrandScope/index.js

@@ -1,4 +1,4 @@
-export { BrandScope, brandScopeInputs } from '../chunk-P3OIM6OC.js';
+export { BrandScope, brandScopeInputs } from '../chunk-X7WEE3EK.js';
 import '../chunk-5SGHW42B.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Callout/index.js

@@ -1,2 +1,2 @@
-export { Callout } from '../chunk-SZZRIHGT.js';
+export { Callout } from '../chunk-BPCY7ZID.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Callout-ZAVG3P66.css → Callout-G3N3IE6M.css}

@@ -77,7 +77,16 @@
   font-weight: var(--font-weight-semibold);
 }
 
+/*
+ * THE ACTIONS ARE A ROW one step apart, wrapping when there is no room, so a
+ * callout with two (Continue setting up, Review and adopt) never draws them
+ * touching, whatever the host wraps them in.
+ */
 .crewlet-callout__action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
   grid-column: 3;
   grid-row: 1;
   align-self: center;

package/dist/ColorChip/ColorChip.d.ts

@@ -0,0 +1,26 @@
+/** `xs` is 12px, a mark inside a small button; `sm` is 16px, beside a word in a row. */
+export type ColorChipSize = 'xs' | 'sm';
+export type ColorChipShape = 'round' | 'square';
+export interface ColorChipProps {
+    /**
+     * The colour, as `#rrggbb`. Anything else draws the hatch of no colour and
+     * is never put into a style.
+     */
+    value: string | null | undefined;
+    size?: ColorChipSize | undefined;
+    shape?: ColorChipShape | undefined;
+    className?: string | undefined;
+}
+/**
+ * A colour as a small chip and nothing else: the mark on a button that
+ * applies it ("Use #007f7f"), or beside a value in a row.
+ *
+ * DECORATION, hidden from a screen reader: the words beside it say what the
+ * colour is. Where a colour has to be named, read and copied, that is
+ * `ColorSwatch`.
+ *
+ * THE VALUE PASSES THE SAME GATE AS EVERY BRAND PART (`#rrggbb`, lowercased)
+ * before it reaches a style, and the chip draws an edge of its own, so a
+ * colour that matches the ground it sits on is still a chip.
+ */
+export declare function ColorChip({ value, size, shape, className }: ColorChipProps): import("react").JSX.Element;

package/dist/ColorChip/index.d.ts

@@ -0,0 +1,3 @@
+import './ColorChip.css';
+export { ColorChip } from './ColorChip.js';
+export type { ColorChipProps, ColorChipShape, ColorChipSize } from './ColorChip.js';

package/dist/ColorChip/index.js

@@ -0,0 +1,3 @@
+export { ColorChip } from '../chunk-6GTTRJWJ.js';
+import '../chunk-7W3LYIOC.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ColorChip-A5XHTH3J.css

@@ -0,0 +1,46 @@
+/*
+ * A colour as a small chip (ColorChip.tsx). Its fill is the one value that is
+ * not a token, and it arrives through `--crewlet-color-chip-value` only after
+ * it has passed `#rrggbb`.
+ */
+.crewlet-color-chip {
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  background: var(--crewlet-color-chip-value, var(--color-surface-inset));
+  /* An edge of its own, so a colour that matches its ground is still a chip. */
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  vertical-align: middle;
+}
+
+.crewlet-color-chip--sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.crewlet-color-chip--round {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-color-chip--square {
+  border-radius: var(--radius-xs);
+}
+
+/* The hatch of no colour, as every swatch in the package draws it. */
+.crewlet-color-chip.is-empty {
+  background: repeating-linear-gradient(-45deg, var(--color-border-hatch) 0 1px, transparent 1px var(--spacing-1));
+}
+
+/*
+ * FORCED COLORS drops backgrounds, which is all a chip is, so the mode keeps
+ * this one: the colour is the information, and the edge is drawn in the
+ * system's text colour so the chip still has a boundary.
+ */
+@media (forced-colors: active) {
+  .crewlet-color-chip {
+    forced-color-adjust: none;
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+}

package/dist/ColorField/ColorField.d.ts

@@ -7,10 +7,12 @@ export interface ColorFieldLabels {
     /** Names the colour picker beside the field: "Pick the Primary colour". */
     picker: (label: string) => string;
     /**
-     * What the empty field shows: the shape a value takes, never a colour, which
-     * an empty field would seem to hold.
+     * What the empty field shows after its `#`: the shape a value takes, never
+     * a colour, which an empty field would seem to hold.
      */
     placeholder: string;
+    /** Said for the `#` drawn at the start of the field, which is not part of what is typed. */
+    prefix: string;
 }
 export interface ColorFieldProps {
     /** The colour's role, which is the field's name: "Primary". */
@@ -48,12 +50,18 @@ export interface ColorFieldProps {
  * A colour a person chooses: a hex field, a swatch that opens the platform's
  * colour picker, and the reason a value was refused.
  *
- * THE VALUE IS `#` AND SIX HEX DIGITS, and nothing else is ever reported: the
- * field holds what is being typed, and a value reaches `onChange` only once it
- * reads as a colour, lowercased, the one spelling the engine stores. A value
- * that does not read is refused when the reader leaves the field (Enter or
- * Tab), never while they are still typing it, with a sentence saying what
- * right looks like.
+ * THE `#` IS THE FIELD'S, drawn at its start, so a person types the six hex
+ * digits alone; a pasted `#rrggbb` loses its own `#` to it. When the reader
+ * leaves the field (Enter or Tab) what they wrote is read as a colour:
+ * `rrggbb`, the three digit shorthand, or `rgb(r, g, b)` (commas or spaces),
+ * each normalised to the one spelling the engine stores, lowercase
+ * `#rrggbb`. Anything else is refused then, never while they are still
+ * typing, with a sentence saying what right looks like.
+ *
+ * ONLY A COLOUR IS EVER REPORTED. Six hex digits reach `onChange` as they are
+ * typed, so a preview follows the field; the shorthand and `rgb()` reach it
+ * when the reader leaves, since `abc` on its way to `abcdef` is not the colour
+ * they mean. An optional field emptied reports `''`.
  *
  * THE SWATCH IS THE PICKER. It is the platform's own colour input, drawn as
  * the chip of the colour the field holds and named for it, so it is a real,

package/dist/ColorField/index.js

@@ -1,5 +1,5 @@
-export { ColorField } from '../chunk-W6FOEBIL.js';
-import '../chunk-UZMNR366.js';
+export { ColorField } from '../chunk-73WHPLWQ.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';

package/dist/ColorSwatch/index.js

@@ -1,8 +1,8 @@
-export { ColorSwatch } from '../chunk-WLSEAIVC.js';
+export { ColorSwatch } from '../chunk-RHPBTE3F.js';
 import '../chunk-7SHAFLEX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ContrastBadge/ContrastBadge.d.ts

@@ -9,6 +9,11 @@ export type ContrastScale = 'body' | 'large';
  * 3:1 but not 4.5:1), or under every floor its scale has.
  */
 export type ContrastLevel = 'aaa' | 'aa' | 'aa-large' | 'fail';
+/**
+ * What the badge draws: a level, or `low`, which an ADVISORY badge draws for
+ * a pair under its scale's AA floor in place of `aa-large` or `fail`.
+ */
+export type ContrastBadgeLevel = ContrastLevel | 'low';
 /**
  * The level a measured ratio reaches, on the floors `@crewlethq/tokens`
  * exports. The ratio is compared UNROUNDED: a pair that passes only once
@@ -27,7 +32,7 @@ export declare function contrastRatio(foreground: string, background: string): n
  */
 export declare function formatContrastRatio(ratio: number): string;
 export interface ContrastBadgeLabels {
-    levels: Record<ContrastLevel, string>;
+    levels: Record<ContrastBadgeLevel, string>;
     /** Said for a pair that cannot be measured (a colour not set yet). */
     unmeasured: string;
     /** The ratio, said in words: "4.49 to 1". */
@@ -35,6 +40,23 @@ export interface ContrastBadgeLabels {
     /** The letters the sample draws the pair with. */
     sample: string;
 }
+/** The words a caller may replace: any of them, and any of the level words. */
+export type ContrastBadgeLabelsInput = Partial<Omit<ContrastBadgeLabels, 'levels'>> & {
+    levels?: Partial<Record<ContrastBadgeLevel, string>> | undefined;
+};
+export interface ContrastLevelTagProps {
+    /** The level drawn. */
+    level: ContrastBadgeLevel;
+    /** Its word: "AA", "Low". */
+    children: string;
+}
+/**
+ * A contrast level as the badge draws it: its word in its tone with its
+ * glyph (a check for AA and AAA, the warning triangle for large text only and
+ * Low, the alert circle for Fails). The one drawing of a level, so the badge
+ * and the explanation of the levels (`ContrastHelp`) never disagree.
+ */
+export declare function ContrastLevelTag({ level, children }: ContrastLevelTagProps): import("react").JSX.Element;
 export interface ContrastBadgeProps {
     /** The colour read: text, a logo, an accent. `#rrggbb`. */
     foreground: string;
@@ -44,8 +66,16 @@ export interface ContrastBadgeProps {
     label?: string | undefined;
     /** What it is read as: body text (the default), or large text and marks. */
     scale?: ContrastScale | undefined;
+    /**
+     * The pair is a warning and never a block: under its scale's AA floor it
+     * reads "Low" in the warning tone, rather than "AA large text" or "Fails"
+     * in the danger tone. For a pair a person is told about and allowed to
+     * keep, such as a brand's primary on its light ground; a pair that blocks
+     * (a brand's text on its light ground) leaves it off and keeps "Fails".
+     */
+    advisory?: boolean | undefined;
     className?: string | undefined;
-    labels?: Partial<ContrastBadgeLabels> | undefined;
+    labels?: ContrastBadgeLabelsInput | undefined;
 }
 /**
  * Whether one colour reads on another: a sample of the pair, the measured
@@ -56,8 +86,13 @@ export interface ContrastBadgeProps {
  * every theme to, and the floors from its `WCAG_CONTRAST`, so the badge an
  * administrator reads and the gate a theme passes never disagree.
  *
+ * BLOCKING OR ADVISORY. By default a pair under every floor "Fails" in the
+ * danger tone. An `advisory` pair is one a person may keep: under its AA
+ * floor it reads "Low" in the warning tone with the warning glyph, so a
+ * screen of pairs tells the one that blocks from the ones that only warn.
+ *
  * THE LEVEL IS A WORD AND A GLYPH, never the tint alone, and the ratio is
  * said as "4.49 to 1" rather than read out as punctuation. The sample is
  * decoration: it shows the pair, and the words say how it measures.
  */
-export declare function ContrastBadge({ foreground, background, label, scale, className, labels }: ContrastBadgeProps): import("react").JSX.Element;
+export declare function ContrastBadge({ foreground, background, label, scale, advisory, className, labels, }: ContrastBadgeProps): import("react").JSX.Element;

package/dist/ContrastBadge/index.d.ts

@@ -1,3 +1,3 @@
 import './ContrastBadge.css';
-export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
-export type { ContrastBadgeLabels, ContrastBadgeProps, ContrastLevel, ContrastScale } from './ContrastBadge.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
+export type { ContrastBadgeLabels, ContrastBadgeLabelsInput, ContrastBadgeLevel, ContrastBadgeProps, ContrastLevelTagProps, ContrastLevel, ContrastScale, } from './ContrastBadge.js';

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-B235ANDO.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-WW7TU6HE.js';
 import '../chunk-KYIAFNU7.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/ContrastHelp.d.ts

@@ -0,0 +1,40 @@
+import { type PopoverAlign } from '../Popover/index.js';
+export interface ContrastHelpLabels {
+    /** The button's name: "About contrast levels". */
+    trigger: string;
+    /** The panel's name: "Contrast levels". */
+    title: string;
+    /** What contrast is. */
+    intro: string;
+    /** The levels, each its word as the badge draws it and what it means. */
+    aa: {
+        term: string;
+        meaning: string;
+    };
+    aaa: {
+        term: string;
+        meaning: string;
+    };
+    low: {
+        term: string;
+        meaning: string;
+    };
+}
+export interface ContrastHelpProps {
+    /** Which edge of the button the panel lines up with. `start` by default. */
+    align?: PopoverAlign | undefined;
+    className?: string | undefined;
+    labels?: Partial<ContrastHelpLabels> | undefined;
+}
+/**
+ * What the contrast levels mean, a press away: a small info button beside a
+ * contrast heading that opens a short panel with AA, AAA and Low or Fails,
+ * each drawn as `ContrastBadge` draws it.
+ *
+ * A PRESS, NOT A HOVER. The panel is a `Popover` the button toggles, so it
+ * opens on a phone, where there is no hover, and from the keyboard (Enter or
+ * Space), and closes on Escape or a press outside, handing focus back to the
+ * button. A tooltip would hold this on hover alone and drop it the moment the
+ * pointer moved to read it. The panel is a dialog named by its title.
+ */
+export declare function ContrastHelp({ align, className, labels }: ContrastHelpProps): import("react").JSX.Element;

package/dist/ContrastHelp/index.d.ts

@@ -0,0 +1,3 @@
+import './ContrastHelp.css';
+export { ContrastHelp } from './ContrastHelp.js';
+export type { ContrastHelpLabels, ContrastHelpProps } from './ContrastHelp.js';

package/dist/ContrastHelp/index.js

@@ -0,0 +1,12 @@
+export { ContrastHelp } from '../chunk-KIRQZG3G.js';
+import '../chunk-WW7TU6HE.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-KHJIEPZV.js';
+import '../chunk-7W3LYIOC.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp-MZCAW5WQ.css

@@ -0,0 +1,43 @@
+/*
+ * ContrastHelp: what the contrast levels mean, in a short panel opened from an
+ * info button (ContrastHelp.tsx).
+ */
+.crewlet-contrast-help {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-contrast-help__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-contrast-help__intro {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+/* Each level's word as the badge draws it, beside what it means. */
+.crewlet-contrast-help__levels {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--spacing-2) var(--spacing-3);
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dt,
+.crewlet-contrast-help__levels dd {
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dd {
+  color: var(--color-text-secondary);
+}

package/dist/DataView/index.js

@@ -1,7 +1,7 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-NAWUXCBC.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-WX6IJJ4U.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-ZFM5L7M4.js';
 import '../chunk-WQ7S7CKZ.js';
+import '../chunk-ZFM5L7M4.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-STJ7QBC3.js';

package/dist/EditingStatus/EditingStatus.d.ts

@@ -1,14 +1,26 @@
+import { type TimeValue } from '../RelativeTime/index.js';
 /** Every string the status draws. */
 export interface EditingStatusLabels {
     editing: string;
     unsaved: string;
     saving: string;
+    /**
+     * The state once the last save landed, followed by how long ago: "Saved",
+     * drawn "Saved 2m ago". The word is announced; the time is not.
+     */
+    saved: string;
 }
 export interface EditingStatusProps {
     /** Whether anything differs from what was opened. */
     dirty: boolean;
     /** Whether a save is in flight. */
     saving?: boolean | undefined;
+    /**
+     * When the last save landed. Given, a status with nothing unsaved and no
+     * save in flight says how long ago: a draft that keeps itself, as a setup
+     * wizard's does ("Draft · Saved 2 min ago" with `labels.editing` "Draft").
+     */
+    savedAt?: TimeValue;
     labels?: Partial<EditingStatusLabels> | undefined;
     className?: string | undefined;
 }
@@ -22,4 +34,4 @@ export interface EditingStatusProps {
  * from saved to unsaved without being interrupted. On a narrow bar the words
  * fold away and the dot stays, named by the same words.
  */
-export declare function EditingStatus({ dirty, saving, labels, className }: EditingStatusProps): import("react").JSX.Element;
+export declare function EditingStatus({ dirty, saving, savedAt, labels, className }: EditingStatusProps): import("react").JSX.Element;

package/dist/EditingStatus/index.js

@@ -1,3 +1,5 @@
-export { EditingStatus } from '../chunk-MULOZYHL.js';
+export { EditingStatus } from '../chunk-EJWPYEG4.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{EditingStatus-NNA2CKIL.css → EditingStatus-YU7EGM6Y.css}

@@ -26,20 +26,32 @@
   background: var(--color-brand-accent);
 }
 
+/*
+ * THE WORDS RUN AS TEXT, not as flex items, so the space between the label
+ * and the state (which the ear needs) and the space before the time are real
+ * spaces, and the row is cut with an ellipsis rather than squeezed.
+ */
+.crewlet-editing-status__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .crewlet-editing-status__label {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
 }
 
-.crewlet-editing-status__state {
-  overflow: hidden;
+.crewlet-editing-status__state,
+.crewlet-editing-status__ago {
   color: var(--color-text-tertiary);
-  text-overflow: ellipsis;
 }
 
+/* The dot between the label and the state: drawn, never read. The space
+   before it in the text gives it the step on its left. */
 .crewlet-editing-status__state::before {
   content: '\00b7';
-  margin-right: var(--spacing-2);
+  margin-inline: var(--spacing-1) var(--spacing-2);
 }
 
 /*
@@ -53,7 +65,8 @@
  * "Editing" folds too, and Cancel and Save beside the dot say an edit is open.
  */
 @media (width < 480px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -64,7 +77,8 @@
 }
 
 @container crewlet-artifact-bar (width < 900px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -76,7 +90,8 @@
 
 @container crewlet-artifact-bar (width < 640px) {
   .crewlet-editing-status__label,
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;

package/dist/FolderTile/index.js

@@ -1,4 +1,4 @@
-export { FolderTile, describeFolderContents } from '../chunk-M4QM477B.js';
+export { FolderTile, describeFolderContents } from '../chunk-FXHWOXGD.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';

package/dist/{FolderTile-FDT5Y63Z.css → FolderTile-MIUEB7SO.css}

@@ -27,8 +27,17 @@
   --crewlet-folder-tile-floor: auto;
   --crewlet-folder-tile-glyph: 40px;
   --crewlet-folder-tile-glyph-radius: var(--radius-md);
+  /*
+   * THE WORDS ARE SET AS THE CARDS BESIDE THEM: a tile's name at a gallery
+   * card's title step and weight, its facts at the card's facts step, one
+   * line height for both and the card's step between them. The row (and a
+   * tile on a phone, which is the row) keeps the same two steps, since the
+   * cards it stands above keep theirs there too, with a tighter step between
+   * the lines so it stays one compact row.
+   */
   --crewlet-folder-tile-name: var(--font-size-md);
   --crewlet-folder-tile-facts: var(--font-size-sm);
+  --crewlet-folder-tile-words-gap: var(--spacing-1);
   --crewlet-folder-tile-actions-inset: var(--spacing-3);
   /*
    * A TILE STACKS: the glyph on top with the More menu level with it in the
@@ -61,8 +70,7 @@
   --crewlet-folder-tile-floor: var(--size-control-lg);
   --crewlet-folder-tile-glyph: 28px;
   --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-  --crewlet-folder-tile-name: var(--font-size-sm);
-  --crewlet-folder-tile-facts: var(--font-size-xs);
+  --crewlet-folder-tile-words-gap: 2px;
   --crewlet-folder-tile-actions-inset: var(--spacing-2);
   --crewlet-folder-tile-direction: row;
   --crewlet-folder-tile-align: center;
@@ -82,8 +90,7 @@
     --crewlet-folder-tile-floor: var(--size-control-lg);
     --crewlet-folder-tile-glyph: 28px;
     --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-    --crewlet-folder-tile-name: var(--font-size-sm);
-    --crewlet-folder-tile-facts: var(--font-size-xs);
+    --crewlet-folder-tile-words-gap: 2px;
     --crewlet-folder-tile-actions-inset: var(--spacing-2);
     --crewlet-folder-tile-direction: row;
     --crewlet-folder-tile-align: center;
@@ -151,7 +158,7 @@
 .crewlet-folder-tile__body {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--crewlet-folder-tile-words-gap);
   min-width: 0;
   max-width: 100%;
 }