@crewlethq/ui 0.15.1 → 0.17.0

package/dist/styles.css

@@ -537,7 +537,7 @@
 }
 
 
-/* AppShell-6QUD7NWM.css */
+/* AppShell-RUNVM4WH.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1162,8 +1162,158 @@
   }
 }
 
+/* ── the account row ───────────────────────────────────────────────────── */
 
-/* Avatar-I4NFP3WQ.css */
+/*
+ * The signed-in reader at the foot of the rail, with the row's controls at
+ * its end. The link takes the room, so a long name is cut rather than pushing
+ * the controls off the rail.
+ */
+.crewlet-account-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-1) 0;
+}
+
+.crewlet-account-row__who {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding: var(--spacing-1);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  /* The fill eases under the pointer, as the rail's rows do. */
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+a.crewlet-account-row__who:hover {
+  background: var(--color-surface-hover);
+}
+
+/* After :hover, so the current row shows the lift rather than the overlay. */
+a.crewlet-account-row__who[aria-current='page'] {
+  background: var(--color-surface-elevated);
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+}
+
+a.crewlet-account-row__who:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-account-row__avatar {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-account-row__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-account-row__name,
+.crewlet-account-row__detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-account-row__name {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-account-row__detail {
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-account-row__go {
+  flex: none;
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-account-row__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-account-row__who {
+    transition: none;
+  }
+}
+
+
+/* AuthLayout-ODHBUPHQ.css */
+/*
+ * The sign-in page: one narrow column near the top of the window.
+ *
+ * THE PAGE SCROLLS ITSELF, at the viewport's dynamic height, because it is
+ * drawn outside any shell that would: on a phone with the keyboard up, a form
+ * taller than what is left of the window has to scroll, not be cut off.
+ */
+.crewlet-auth-layout {
+  display: flex;
+  justify-content: center;
+  height: 100dvh;
+  overflow-y: auto;
+  padding: var(--spacing-8) var(--spacing-4);
+  background: var(--color-surface-background);
+}
+
+/* A sentence's measure wide, and held at the top: the form does not jump when
+   an error line appears under a field. */
+.crewlet-auth-layout__column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  width: 100%;
+  max-width: 52ch;
+  margin-block-end: auto;
+}
+
+/* The lockup is centred over the card, and takes none of the rail's inset,
+   which is what its own padding is for. */
+.crewlet-auth-layout__brand {
+  align-self: center;
+  padding: 0;
+}
+
+/* The form's parts stand one field step apart, under the title and lede. */
+.crewlet-auth-layout__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+/* A submit does not stretch: every button here states one gesture, and a
+   full-width bar reads as the page's edge rather than a control. */
+.crewlet-auth-layout__body > form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.crewlet-auth-layout__body > form > button,
+.crewlet-auth-layout__body > button {
+  align-self: flex-start;
+}
+
+
+/* Avatar-3C2H2WA4.css */
 /*
  * The identity badge.
  *
@@ -1292,6 +1442,25 @@
   object-fit: cover;
 }
 
+/*
+ * A GLYPH IN PLACE OF THE INITIALS, for a principal whose name's initials
+ * mean nothing (an API token, a service account). It takes a little over half
+ * the box, the share the initials' cap height and width take, so a key badge
+ * beside a person's badge reads as the same size of mark.
+ */
+.crewlet-avatar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 55%;
+  height: 55%;
+}
+
+.crewlet-avatar__icon > * {
+  width: 100%;
+  height: 100%;
+}
+
 /* ── tones ─────────────────────────────────────────────────────────────── */
 
 .crewlet-avatar--fallback {
@@ -1487,6 +1656,21 @@
   background: var(--color-feedback-danger);
 }
 
+/*
+ * A MARK (`mark`): how a principal is present, not a state, so it is drawn
+ * quiet rather than in a state's fill: the neutral badge's raised rung, its
+ * strong hairline and its secondary ink. The hairline is the corner's own
+ * outline, inset by its width, so it keeps the corner's size and survives
+ * forced colours.
+ */
+.crewlet-avatar__status--mark {
+  padding: 1px;
+  background: var(--color-surface-elevated);
+  outline-color: var(--color-border-strong);
+  outline-offset: -1px;
+  color: var(--color-text-secondary);
+}
+
 
 /* AvatarPicker-PREY36MG.css */
 /*
@@ -2418,7 +2602,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Callout-S7QDWHDL.css */
+/* Callout-SXXK4B5R.css */
 /*
  * The callout: a status that stays in the content flow.
  *
@@ -2473,8 +2657,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 .crewlet-callout__title {
+  /* A LINE OF ITS OWN above the message, so the heading and the first
+     sentence are never read as one run-on sentence. */
+  display: block;
   font-weight: var(--font-weight-semibold);
-  margin-right: var(--spacing-2);
 }
 
 .crewlet-callout__action {
@@ -4219,7 +4405,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Checkbox-UE7TEPAM.css */
+/* Checkbox-KT7RS6QQ.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
  *
@@ -4340,6 +4526,22 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   outline-offset: 0;
 }
 
+/*
+ * A group of boxes under one legend. The boxes keep a field's inner rhythm,
+ * one step apart, so the group reads as one field and its boxes as its parts.
+ */
+.crewlet-checkbox-group__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-checkbox-group__empty {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
 
 /* ChoiceButtons-DJ5EOGUA.css */
 /*
@@ -9953,7 +10155,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* InlineCode-6WSR5COL.css */
+/* InlineCode-ASYHLN3E.css */
 /*
  * One identifier inside a sentence: a mono chip on the inset surface.
  *
@@ -10011,6 +10213,15 @@ svg.crewlet-datetime__chevron {
   color: inherit;
 }
 
+/*
+ * A short token read as one: it moves to the next line whole rather than
+ * splitting, which `overflow-wrap: anywhere` would otherwise allow.
+ */
+.crewlet-inline-code--whole {
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
 .crewlet-inline-code--truncate {
   display: inline-block;
   max-width: 100%;
@@ -10021,7 +10232,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Input-RAKNQJCV.css */
+/* Input-3KVSNUO5.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -10459,6 +10670,17 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-tertiary);
 }
 
+/*
+ * A LITERAL INSIDE A LABEL KEEPS ITS CASE. The label is set in capitals, and
+ * a value a reader has to type back exactly ("Type jane.founder to confirm")
+ * read as JANE.FOUNDER, which is not what the field accepts.
+ */
+.crewlet-label code,
+.crewlet-label__text code {
+  text-transform: none;
+  letter-spacing: normal;
+}
+
 .crewlet-label--with-action {
   display: flex;
   justify-content: space-between;
@@ -12755,6 +12977,183 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* ObjectHeader-UNVYM2KD.css */
+/*
+ * The header of an object: its eyebrow, its head row and its fact line.
+ */
+.crewlet-object-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-4) 0 var(--spacing-3);
+}
+
+.crewlet-object-header--peek {
+  padding: var(--spacing-3) 0 var(--spacing-2);
+}
+
+.crewlet-object-header__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-object-header__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/* A key or a name keeps its own case: in capitals a name is a shout. */
+.crewlet-object-header__id {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.crewlet-object-header__id--mono {
+  font-family: var(--font-family-mono);
+}
+
+/* The head row wraps: the marks and the actions take a line under the title
+   rather than every pill on the row giving up a few characters. */
+.crewlet-object-header__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* TWO LINES, AND THAT IS THE CEILING, which catches a title written as a
+   paragraph and holds every real one. */
+.crewlet-object-header__title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+.crewlet-object-header--peek .crewlet-object-header__title {
+  font-size: var(--font-size-lg);
+}
+
+/* The state keeps its width: a pill squeezed to "13 pro…" says something
+   else. The marks travel together when the row wraps. */
+.crewlet-object-header__status,
+.crewlet-object-header__actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-object-header__actions {
+  margin-left: auto;
+}
+
+/* ── the fact line ─────────────────────────────────────────────────────── */
+
+/* THE TRACK FLOOR IS 7.5rem, which fits seven facts on one line at 1280px and
+   still holds every label and a two-line value. */
+.crewlet-fact-line {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr));
+  column-gap: var(--spacing-4);
+  row-gap: var(--spacing-3);
+  padding-top: var(--spacing-1);
+}
+
+/* Two bands: the label, then the value with its footnotes in one cell. */
+.crewlet-fact-line__fact {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 2;
+  row-gap: 0;
+  min-width: 0;
+}
+
+/* A token and a set of chips take two tracks. */
+.crewlet-fact-line__fact--token,
+.crewlet-fact-line__fact--set {
+  grid-column: span 2;
+}
+
+.crewlet-fact-line__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-fact-line__label {
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-line__value {
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-fact-line__value--clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+/* One token, one line, cut with an ellipsis where two tracks are too narrow;
+   its title carries the whole of it. */
+.crewlet-fact-line__value--token {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
+/* A footnote may not set its column's width: the track does, and the note
+   wraps inside it, balanced so the wrap reads as deliberate. */
+.crewlet-fact-line__note,
+.crewlet-fact-line__set-by {
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  text-wrap: balance;
+}
+
+/* ── the by-line ───────────────────────────────────────────────────────── */
+
+/* The word and its arrow are one atomic box, so the arrow never takes a line
+   of its own. */
+.crewlet-set-by__turn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+
 /* OrgLabel-R5KY7C3W.css */
 /*
  * What a node of an org chart and a row of an org table both say
@@ -14482,6 +14881,28 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* QrCode-JWJTWMU5.css */
+/*
+ * A QR code on its own plate.
+ *
+ * A FIXED BOX, because a camera needs modules of a readable size: at 208px a
+ * second factor's code (a version 7 symbol and its quiet zone) draws each
+ * module at about 4.3px. A consumer that needs another size sets the variable.
+ *
+ * ITS INKS ARE KEPT UNDER FORCED COLOURS. A high-contrast mode repaints fills
+ * to system colours, and a plate repainted dark is a code no scanner reads.
+ */
+.crewlet-qr-code {
+  --crewlet-qr-code-size: 208px;
+  display: block;
+  flex: none;
+  width: var(--crewlet-qr-code-size);
+  height: var(--crewlet-qr-code-size);
+  border-radius: var(--radius-sm);
+  forced-color-adjust: none;
+}
+
+
 /* ReadingPane-5UOLPWY5.css */
 /*
  * One item read in full, in one column.
@@ -18969,7 +19390,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Text-XIPYYZX2.css */
+/* Text-S3Q4O3IG.css */
 /*
  * The type registers, one rule each.
  *
@@ -19021,6 +19442,17 @@ b.crewlet-switcher__match {
   color: var(--color-text-primary);
 }
 
+/*
+ * The register around it: nothing is set, so the run keeps its sentence's
+ * size, weight, tracking and ink, and only a modifier (mono, numeric) or a
+ * tone changes it.
+ */
+.crewlet-text--inherit {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
 .crewlet-text--body {
   font-size: var(--font-size-sm);
   line-height: var(--font-line-height-normal);

package/dist/utils/index.d.ts

@@ -1,6 +1,10 @@
 export { cx } from './cx.js';
 export { useClipboard, writeClipboard } from './useClipboard.js';
 export type { Clipboard, ClipboardOptions, ClipboardState } from './useClipboard.js';
+export { useOutcome } from './useOutcome.js';
+export type { Outcome, OutcomeOptions, OutcomeState } from './useOutcome.js';
+export { downloadText, safeFilename, useDownload } from './useDownload.js';
+export type { Download, DownloadState } from './useDownload.js';
 export type { Tone } from './tone.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './nodeHue.js';
 export type { NodeHue } from './nodeHue.js';

package/dist/utils/index.js

@@ -1,5 +1,7 @@
-import '../chunk-AER7UDD4.js';
-export { useClipboard, writeClipboard } from '../chunk-5VNUYO76.js';
+import '../chunk-U5LQ2AS5.js';
+export { downloadText, safeFilename, useDownload } from '../chunk-F6NZOVWL.js';
+export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
+export { useOutcome } from '../chunk-DTIW4CHZ.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/utils/useClipboard.d.ts

@@ -33,6 +33,8 @@ export interface ClipboardOptions {
 }
 export interface Clipboard {
     state: ClipboardState;
+    /** How many copies have settled. See [Outcome.attempt]. */
+    attempt: number;
     copy: (text: string | (() => string)) => Promise<boolean>;
 }
 /**
@@ -56,9 +58,10 @@ export interface Clipboard {
  *    timer exists AT THAT MOMENT, and for a write still in flight that is
  *    none: the settle then ran after the cleanup and armed a fresh timer with
  *    nothing left alive to clear it, so the hook leaked a timer per abandoned
- *    copy and wrote state to a component that was gone. `live` is what the
- *    settle is checked against, and it is checked AFTER the await rather than
- *    before, because the await is the whole of the gap.
+ *    copy and wrote state to a component that was gone. [useOutcome], the
+ *    machine this and `useDownload` share, checks whether the component is
+ *    still mounted AFTER the await rather than before, because the await is
+ *    the whole of the gap.
  *
  * The text may be a THUNK, resolved on the press. On a live screen the thing
  * worth copying is assembled from everything on it, so a string prop means

package/dist/utils/useDownload.d.ts

@@ -0,0 +1,63 @@
+import { type OutcomeOptions } from './useOutcome.js';
+/** Where a download stands: not tried, handed to the browser, or refused. */
+export type DownloadState = 'idle' | 'started' | 'failed';
+export interface Download {
+    state: DownloadState;
+    /** How many downloads have settled. See [Outcome.attempt]. */
+    attempt: number;
+    /**
+     * Offers `text` as a file, and answers whether the browser took it. The
+     * text may be a thunk, resolved on the press.
+     */
+    download: (text: string | (() => string), filename: string, mime?: string) => Promise<boolean>;
+}
+/**
+ * Handing text to the reader as a file, and saying whether it landed: the
+ * mirror of `useClipboard`, on the same state machine.
+ *
+ * "STARTED", NOT "SAVED". There is no completion event on an `<a download>`:
+ * the browser took the click, and a gate such as Chrome's automatic multiple
+ * download prompt can still stop it silently after that. What the control can
+ * honestly say is that the download was handed over, and under which name.
+ */
+export declare function useDownload(options?: OutcomeOptions): Download;
+/**
+ * Saves `text` on the reader's machine and reports whether the browser took
+ * it, with the name it was offered under ([safeFilename] of `filename`).
+ *
+ * For a control that cannot say so on itself, such as a menu item that
+ * closes on the press: the caller raises a toast from the answer.
+ *
+ * TWO THINGS ARE CHECKED UP FRONT rather than assumed. Without
+ * `URL.createObjectURL` there is nothing to point a saveable link at, and a
+ * `data:` URL is the wrong fallback because several engines cap it near two
+ * megabytes, so it would fail silently on exactly the large files. Without the
+ * `download` attribute the click NAVIGATES to the text instead of saving it,
+ * which looks enough like something happening that nobody checks.
+ *
+ * The blob URL is revoked on the NEXT macrotask: the click only queues the
+ * download, and freeing the entry inside the same task races the fetch that is
+ * about to read it. Never revoking is the other failure, a second copy of the
+ * text held for the life of the tab.
+ */
+export declare function downloadText(text: string, filename: string, mime?: string): {
+    started: boolean;
+    name: string;
+};
+/**
+ * A filename the reader will actually get, out of whatever the caller had.
+ *
+ * The `download` attribute is only a suggestion and each browser sanitises it
+ * its own way, so the name is decided here and every caller gets one
+ * predictable answer. A name composed from data (an id off the URL) that
+ * arrived as `../etc/passwd` or with a newline in it never reaches that guess.
+ *
+ * UNICODE-AWARE: letters, marks and numbers in every script are kept, and
+ * separators and invisibles (a slash, a colon, the fullwidth solidus, a
+ * right-to-left override) become a hyphen. An ASCII-only class turned
+ * `日本語.json` into a file called `json`. The EXTENSION is never what gets cut
+ * or stripped, because a name that loses it opens in the wrong application;
+ * leading dots, which make `..` a traversal and `.name` a hidden file, are
+ * stripped from the stem.
+ */
+export declare function safeFilename(name: string): string;