@crewlethq/ui 0.65.1 → 0.66.0

package/README.md

@@ -205,6 +205,14 @@ 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.65.0
+
+**`ProposalCard` takes `tone`, `confirmation` and `details`.** `tone="danger"` (`ProposalTone`, `PROPOSAL_TONES`) marks a change that removes or discards something: while the card waits on the person or carries the change out, Card's danger rail runs down its leading edge, the title is set in the danger ink (AA in both palettes) and the primary is the danger button. A settled card steps back with no tone, and the Tag keeps saying the state. `confirmation` (`{ label }`, `ProposalConfirmation`) draws a `Checkbox` above the decision: the primary is held soft disabled, described by `labels.confirmationNeeded` ("Check the confirmation above first"), until it is ticked. The tick clears when the card settles or is handed another proposal in place (another `title` or `approveLabel`), and `approveBlocked` still outranks it. `details` is the precise request behind the change, in a compact `Disclosure` titled `labels.details` ("Technical details"), collapsed by default and mounted only once opened, at the foot of the body above the note.
+
+**A `ProposalCard` primary that has just appeared takes no pointer for 500ms**: when the card arrives, when it is handed another proposal and when it returns to a decision (a step-up, a refused approval). A press meant for the card it replaced, such as the second press of a double click, can no longer approve it, and it shows no hover until then. Focus and the keyboard reach it at once, and it is never drawn or announced as disabled. The button carries `data-arming` while it arms.
+
+**`StatusCard` takes `rail`**, Card's own rail down the leading edge, for a risk the Tag does not carry.
+
 ## Changes in 0.62.0
 
 **`ValueField`, a labelled value with the control its kind needs.** `FormField` with the control and the rules every form holding configuration values otherwise rewrites, in one component (`ValueField`, `ValueFieldKind`, `ValueFieldChoice`, `ValueFieldLabels`, `ValueFieldProps`). `kind` picks the control: `text`, `id`, `email` and `url` are a text field, `secret` a password field, `multiline` a `Textarea`, and `choice` and `handle` the `Select` listbox. A `secret` is masked unless its value is exactly one `${NAME}` reference, which reads as a name in the `reference` appearance. Typing `$` in a one-line field offers the names in `references`, ranked closest first and written in as a whole `${NAME}` (`onReferencesNeeded` is called as the list opens, so a caller can refresh it). A `url` wears an `https://` `InputAffix`, read as part of the value, which steps aside for `http://` and for a reference. `url`, `id` and `email` drop whitespace; no kind sets `type="email"`, so a reference is never refused by the browser. Required is the unmarked default: `required={false}` says "(optional)", and `markRequired` says "(required)" where it is news. A choice's `hint` is drawn under its option and joins the help line once chosen, and a stored answer the list no longer offers keeps a row of its own. `isReference` replaces the default `${NAME}` grammar, `mark` draws a logo before the label, `helperOnFocus` is passed to `FormField`, and `labels` replaces the list's name ("Secrets") and the choice placeholder ("Choose one").

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-E55DKVY7.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-GJ7VIQWL.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-T73DMDU4.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';

package/dist/{AppShell-LZQA3XU4.css → AppShell-2IBUS4TH.css}

@@ -59,7 +59,12 @@
      past it. A page that can also scroll as a whole carries the rail off the
      top of the window. */
   height: 100dvh;
-  overflow: hidden;
+  /* CLIPPED, NOT SCROLLABLE. `overflow: hidden` is still a scroll container:
+     a focus or a scrollIntoView on anything that reaches past the viewport
+     scrolled the whole shell up, the frame showing as a band under it, and
+     nothing a reader could do scrolled it back. `clip` cuts the same edge
+     and offers nothing to scroll (SidePanel's flush body, the same rule). */
+  overflow: clip;
   /* The FRAME, the lowest rung: what the rail stands on and what shows round
      the sheet's inset. */
   background: var(--color-surface-frame);

package/dist/ArtifactCard/index.js

@@ -1,15 +1,15 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-UBIPDEFV.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-3EETQFAM.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-DOY3KC6I.js';
 import '../chunk-PBCNINMB.js';
+import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';

package/dist/ChatThread/ChatThread.d.ts

@@ -49,5 +49,14 @@ export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
  * latest" pill counts what arrived since. The browser's own scroll anchoring
  * is turned off (it fights a last child that keeps growing), and the
  * anchoring is done here instead.
+ *
+ * A JUMP HOLDS UNTIL IT LANDS. A smooth scroll passes through positions short
+ * of the end, and each one read as the reader leaving: the pill came back and
+ * following stopped, so an answer still growing left the jump short and the
+ * first press did nothing. While the jump runs, those positions are ignored
+ * and growth is followed; the reader's own wheel, touch or key ends it.
+ *
+ * THE PILL COVERS NOTHING: it sits under the log, in the thread's own column,
+ * rather than over the last lines of whatever is being read.
  */
 export declare const ChatThread: import("react").ForwardRefExoticComponent<ChatThreadProps & import("react").RefAttributes<ChatThreadHandle>>;

package/dist/ChatThread/index.js

@@ -1,4 +1,4 @@
-export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-F2IYVVA3.js';
+export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-D2ZXIQ23.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';

package/dist/{ChatThread-FGXVDLI2.css → ChatThread-2KO3FZKQ.css}

@@ -1,7 +1,7 @@
 /*
  * A conversation as it grows: the scroller, the items a spacing step and a
- * half apart on the panel's 16px inset, and the Jump to latest pill floating
- * over its foot.
+ * half apart on the panel's 16px inset, and the Jump to latest pill in a row
+ * of its own under it.
  */
 .crewlet-chat-thread {
   position: relative;
@@ -53,14 +53,17 @@
   flex: none;
 }
 
-/* The pill, centred a step above the thread's foot. */
+/*
+ * The pill, centred in a row of its own under the log. IN FLOW, NOT FLOATING:
+ * laid over the scroller it covered the last lines of whatever was being read,
+ * a table's rows or an answer's text. Here the log gives up the row while the
+ * pill shows, and nothing it holds is hidden under it.
+ */
 .crewlet-chat-thread__jump {
-  position: absolute;
-  bottom: var(--spacing-3);
-  left: 50%;
-  transform: translateX(-50%);
-  box-shadow: var(--shadow-md);
-  border-radius: var(--radius-pill);
+  display: flex;
+  flex: none;
+  justify-content: center;
+  padding: var(--spacing-2) var(--spacing-4);
 }
 
 .crewlet-chat-thread__fresh {

package/dist/CommentThread/index.js

@@ -1,6 +1,6 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-DKJJ434E.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-UBJ32EO2.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';

package/dist/DataView/index.js

@@ -1,4 +1,4 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-XGBGEI6V.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-J5BIKMQY.js';
 import '../chunk-FPDIHEM4.js';
 import '../chunk-CFY257ND.js';
 import '../chunk-PX54PALQ.js';
@@ -9,7 +9,7 @@ import '../chunk-7KHM2FZH.js';
 import '../chunk-EE3DJMSQ.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PBCNINMB.js';

package/dist/DatasetSource/index.js

@@ -1,7 +1,7 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-VRG2ZXNK.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-R6K62EXV.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-UT6CW3C7.js';

package/dist/EditingStatus/index.js

@@ -1,6 +1,6 @@
-export { EditingStatus } from '../chunk-B76OKJMX.js';
+export { EditingStatus } from '../chunk-VLGGLLKH.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/InlineEditor/index.js

@@ -1,7 +1,7 @@
-export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-VVOFJFRT.js';
-import '../chunk-B76OKJMX.js';
+export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-QBWNGNF7.js';
+import '../chunk-VLGGLLKH.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-ANTAQAR4.js';
 import '../chunk-7QTPJDRF.js';

package/dist/ProposalCard/ProposalCard.d.ts

@@ -26,6 +26,26 @@ export type ProposalKind = 'change' | 'create';
  */
 export type ProposalFailureOutcome = 'unchanged' | 'unknown';
 export declare const PROPOSAL_FAILURE_OUTCOMES: readonly ["unchanged", "unknown"];
+/**
+ * How much the decision weighs: `default`, or `danger` for a change that
+ * removes, discards or overwrites something (removing a seat, deleting a
+ * record). Danger draws the card's leading edge and its title in the danger
+ * ink and the primary as the danger button, while the card waits on the
+ * person or carries the change out.
+ */
+export type ProposalTone = 'default' | 'danger';
+export declare const PROPOSAL_TONES: readonly ["default", "danger"];
+/**
+ * A deliberate confirmation: a checkbox the person ticks before the primary
+ * can be pressed, for a change whose consequence has to be acknowledged.
+ */
+export interface ProposalConfirmation {
+    /**
+     * What the person confirms, as the checkbox's name: "I understand the QA
+     * Engineer seat and its history are removed."
+     */
+    label: ReactNode;
+}
 /**
  * Why the person's own decision was refused while the card stays open to
  * another one: the approval was turned down (a fresh sign-in, a change that
@@ -68,6 +88,10 @@ export interface ProposalCardLabels {
     unknownNotice: string;
     /** Why Decline is held while the approved change is carried out. */
     busy: string;
+    /** Why the primary is held until the `confirmation` is ticked, said as its description. */
+    confirmationNeeded: string;
+    /** The title of the collapsed `details` section. */
+    details: string;
 }
 export declare const PROPOSAL_CARD_LABELS: ProposalCardLabels;
 export interface ProposalCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
@@ -88,6 +112,25 @@ export interface ProposalCardProps extends Omit<HTMLAttributes<HTMLElement>, 'ti
     changesHeading?: ReactNode;
     /** The consequence, in one sentence, under the list. */
     note?: ReactNode;
+    /**
+     * The precise request behind the change (a method, a path, a body) for a
+     * reader who wants it: a collapsed `Disclosure` at the foot of the body,
+     * above the note, titled `labels.details`, whose content mounts only once
+     * it is opened. Never where the change itself is said: the list is.
+     */
+    details?: ReactNode;
+    /** `default`, or `danger` for a change that removes or discards something; see `ProposalTone`. */
+    tone?: ProposalTone | undefined;
+    /**
+     * A checkbox above the decision that the person ticks before the primary
+     * can be pressed. Until then the primary is held soft disabled and
+     * described by `labels.confirmationNeeded`, as `approveBlocked` holds it.
+     * The tick belongs to the proposal it was given for: it clears when the
+     * card settles, and when the card is handed a different proposal (another
+     * `title` or `approveLabel`) in place. Drawn while the card waits on the
+     * person and while the approved change is carried out.
+     */
+    confirmation?: ProposalConfirmation | undefined;
     /** The primary action, named for its effect: "Apply to this list", "Create task". Never a bare "OK". */
     approveLabel: string;
     /**
@@ -184,5 +227,19 @@ export interface ProposalCardProps extends Omit<HTMLAttributes<HTMLElement>, 'ti
  * "NOTHING CHANGED." ONLY WHEN IT IS TRUE. A failure whose outcome nobody
  * could confirm (`failureOutcome="unknown"`) may have landed, so the card
  * says "Not confirmed" and never adds the reassurance.
+ *
+ * A DESTRUCTIVE CHANGE LOOKS LIKE ONE (`tone="danger"`): the danger rail down
+ * the leading edge, the title in the danger ink and the danger primary. The
+ * colour only adds weight; the title, the summary and the confirmation say
+ * what is lost in words. With `confirmation`, the primary waits on a ticked
+ * checkbox, so the decision is a deliberate act rather than a single press.
+ *
+ * A PRIMARY THAT HAS JUST APPEARED IS NOT YET UNDER THE POINTER. For half a
+ * second after the card arrives (or returns to a decision) its primary takes
+ * no pointer, so a press meant for the card it replaced cannot approve this
+ * one. The keyboard is never held.
+ *
+ * THE PRECISE REQUEST IS THERE, FOLDED (`details`): a compact disclosure,
+ * collapsed by default, for a reader who wants the method, path and body.
  */
-export declare function ProposalCard({ title, subtitle, state, scope, kind, summary, changes, changesHeading, note, approveLabel, onApprove, onDecline, onPrepareAgain, onRetry, receipt, failure, failureOutcome, failureHint, approveBlocked, decisionRefusal, notice, labels: overrides, changeLabels, diffLabels, className, ...rest }: ProposalCardProps): import("react").JSX.Element;
+export declare function ProposalCard({ title, subtitle, state, scope, kind, summary, changes, changesHeading, note, details, tone, confirmation, approveLabel, onApprove, onDecline, onPrepareAgain, onRetry, receipt, failure, failureOutcome, failureHint, approveBlocked, decisionRefusal, notice, labels: overrides, changeLabels, diffLabels, className, ...rest }: ProposalCardProps): import("react").JSX.Element;

package/dist/ProposalCard/index.d.ts

@@ -1,4 +1,4 @@
 import '../VisuallyHidden/VisuallyHidden.css';
 import './ProposalCard.css';
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from './ProposalCard.js';
-export type { ProposalCardLabels, ProposalCardProps, ProposalDecisionRefusal, ProposalFailureOutcome, ProposalKind, ProposalScope, ProposalState, } from './ProposalCard.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from './ProposalCard.js';
+export type { ProposalCardLabels, ProposalCardProps, ProposalConfirmation, ProposalDecisionRefusal, ProposalFailureOutcome, ProposalKind, ProposalScope, ProposalState, ProposalTone, } from './ProposalCard.js';

package/dist/ProposalCard/index.js

@@ -1,4 +1,4 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from '../chunk-FZUDUNCK.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-2AQMXGWA.js';
 import '../chunk-M25IV5MH.js';
 import '../chunk-NTQPJJAN.js';
 import '../chunk-WQRSZMN4.js';
@@ -7,11 +7,18 @@ import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-PBCNINMB.js';
 import '../chunk-222VILSP.js';
+import '../chunk-ETSF7SU6.js';
+import '../chunk-PGCLHYVP.js';
 import '../chunk-IVTQWOXV.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ProposalCard-VTTCDXYK.css → ProposalCard-SF332W4E.css}

@@ -18,6 +18,28 @@
   text-align: end;
 }
 
+/* THE DELIBERATE CONFIRMATION, on a row of its own above the decision. It
+   starts at the foot's start edge, unlike the one-line reasons around it: a
+   checkbox's sentence wraps under its own first line, and set at the end its
+   lines would start in a different place each. */
+.crewlet-proposal-card__confirmation {
+  flex: 1 1 100%;
+}
+
+/* A PRIMARY THAT HAS JUST APPEARED takes no pointer for a moment (ARMING_MS
+   in ProposalCard.tsx): no hover, and no press from a pointer that was
+   already resting where it landed. Focus and the keyboard still reach it. */
+.crewlet-proposal-card__approve[data-arming] {
+  pointer-events: none;
+}
+
+/* THE DANGER TONE, while the decision is open: Card's rail (passed through
+   StatusCard) and the title in the danger ink, the step the tokens measure as
+   text, so it holds AA in every palette. The Tag keeps the state. */
+.crewlet-proposal-card--danger .crewlet-card__title {
+  color: var(--color-feedback-danger-ink);
+}
+
 /* WHY THE LAST DECISION WAS REFUSED, on a line of its own above the
    decision and at its end, as the held primary's reason is: the refusal
    strip's own inline drawing, which wraps rather than widening the row. */

package/dist/RelativeTime/index.js

@@ -1,4 +1,4 @@
-export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-L6NG7CUA.js';
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-DS5NBENV.js';
+export { RichEditor, preloadRichEditor } from '../chunk-BVNFNFA6.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-BPCY7ZID.js';

package/dist/SetupWizard/index.js

@@ -1,6 +1,6 @@
-export { SetupWizard } from '../chunk-R2YHKVWN.js';
-import '../chunk-FPDIHEM4.js';
+export { SetupWizard } from '../chunk-SBHAKX2T.js';
 import '../chunk-HJBHP66O.js';
+import '../chunk-FPDIHEM4.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-222VILSP.js';
 import '../chunk-IVTQWOXV.js';

package/dist/StatusCard/StatusCard.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type CardSectionPadding } from '../Card/index.js';
+import { type CardRail, type CardSectionPadding } from '../Card/index.js';
 import { type TagVariant } from '../Tag/index.js';
 /** A card's state, drawn as a `Tag` at the end of its head. */
 export interface StatusCardStatus {
@@ -58,6 +58,12 @@ export interface StatusCardProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
      * stays legible.
      */
     settled?: boolean | undefined;
+    /**
+     * A risk down the card's leading edge, Card's own rail: what the reader
+     * has to weigh before acting, such as a proposal that removes something.
+     * Never the state, which the Tag already says in words.
+     */
+    rail?: CardRail | undefined;
     /** The body's inset. `md` by default; `none` lets a table run to the card's edges. */
     bodyPadding?: CardSectionPadding | undefined;
     /** What happened, as a `ReceiptStrip` at the card's foot, above any actions. */
@@ -72,8 +78,9 @@ export interface StatusCardProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
  * A record with a state, as the product's own card: the default `Card`, one
  * hairline, a sentence-case title over the head's rule, the state as a `Tag`
  * at the end of the head, and what happened as a strip at the foot. No tone
- * rail and no tinted head: the Tag says the state in words, and a rail beside
- * it only repeated it in colour.
+ * rail for the state and no tinted head: the Tag says the state in words, and
+ * a rail beside it only repeated it in colour. A rail is drawn only for a
+ * risk the Tag does not carry (`rail`).
  *
  * A SECTION NAMED BY ITS TITLE AND ITS STATE ("Create task, Needs your
  * approval"), so a reader moving by region hears both before reading the

package/dist/TableCells/index.js

@@ -1,8 +1,8 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-NWTHGZBH.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-GNDKUSCG.js';
 import '../chunk-QF5UNP4T.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';

package/dist/VersionTimeline/index.js

@@ -1,6 +1,6 @@
-export { VersionTimeline } from '../chunk-SRSE7FGL.js';
+export { VersionTimeline } from '../chunk-WPMZKZUH.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';

package/dist/WidgetFrame/index.js

@@ -1,6 +1,6 @@
-export { WidgetFrame } from '../chunk-4EDSEX7U.js';
+export { WidgetFrame } from '../chunk-S5QJZOPL.js';
 import '../chunk-BRLZXYPA.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-FZUDUNCK.js → chunk-2AQMXGWA.js}

@@ -1,12 +1,14 @@
 import { RefusalStrip, ReceiptStrip } from './chunk-M25IV5MH.js';
 import { StatusCard } from './chunk-NTQPJJAN.js';
 import { ChangeList } from './chunk-WQRSZMN4.js';
+import { Checkbox } from './chunk-PBCNINMB.js';
+import { Disclosure } from './chunk-222VILSP.js';
 import { Button } from './chunk-7QTPJDRF.js';
 import { Spinner } from './chunk-XSPCITPN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './VisuallyHidden-AOEXU5EB.css';
-import './ProposalCard-VTTCDXYK.css';
-import { useId, useRef, useLayoutEffect } from 'react';
+import './ProposalCard-SF332W4E.css';
+import { useId, useRef, useLayoutEffect, useState, useEffect } from 'react';
 import { RefreshCwGlyph, LockGlyph, BanGlyph, ClockGlyph, CircleAlertGlyph, CircleCheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -21,6 +23,7 @@ var PROPOSAL_STATES = [
   "failed"
 ];
 var PROPOSAL_FAILURE_OUTCOMES = ["unchanged", "unknown"];
+var PROPOSAL_TONES = ["default", "danger"];
 var PROPOSAL_CARD_LABELS = {
   needsApproval: "Needs your approval",
   needsSignIn: "Needs sign-in",
@@ -48,9 +51,12 @@ var PROPOSAL_CARD_LABELS = {
   staleNotice: "What this would change moved after it was prepared, so it was not applied. Nothing changed.",
   nothingChanged: "Nothing changed.",
   unknownNotice: "Could not confirm whether this was applied. It may have landed.",
-  busy: "The approved change is being carried out"
+  busy: "The approved change is being carried out",
+  confirmationNeeded: "Check the confirmation above first",
+  details: "Technical details"
 };
 var SETTLED = /* @__PURE__ */ new Set(["applied", "declined", "expired", "stale", "failed"]);
+var ARMING_MS = 500;
 function statusOf(state, scope, outcome, labels) {
   switch (state) {
     case "pending":
@@ -90,6 +96,9 @@ function ProposalCard({
   changes,
   changesHeading,
   note,
+  details,
+  tone = "default",
+  confirmation,
   approveLabel,
   onApprove,
   onDecline,
@@ -132,6 +141,23 @@ function ProposalCard({
   const deciding = state === "pending" || state === "stepup";
   const blocked = deciding && approveBlocked ? approveBlocked : void 0;
   const refusal = deciding ? decisionRefusal : void 0;
+  const danger = tone === "danger" && !settled;
+  const identity = `${title}\0${approveLabel}`;
+  const [tickedFor, setTickedFor] = useState(void 0);
+  if (settled && tickedFor !== void 0) setTickedFor(void 0);
+  const unconfirmed = deciding && confirmation !== void 0 && tickedFor !== identity ? labels.confirmationNeeded : void 0;
+  const armKey = deciding ? `${state}\0${identity}` : void 0;
+  const [arm, setArm] = useState({ key: armKey, armed: false });
+  if (arm.key !== armKey) setArm({ key: armKey, armed: false });
+  useEffect(() => {
+    if (armKey === void 0) return;
+    const timer = setTimeout(
+      () => setArm((current) => current.key === armKey ? { key: armKey, armed: true } : current),
+      ARMING_MS
+    );
+    return () => clearTimeout(timer);
+  }, [armKey]);
+  const arming = armKey !== void 0 && !(arm.key === armKey && arm.armed);
   const decision = deciding || state === "applying" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -142,6 +168,18 @@ function ProposalCard({
       }
     ),
     blocked === void 0 ? null : /* @__PURE__ */ jsx("p", { className: "crewlet-proposal-card__blocked", "aria-hidden": "true", children: blocked }),
+    confirmation === void 0 ? null : /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        className: "crewlet-proposal-card__confirmation",
+        size: "sm",
+        tone: danger ? "danger" : "default",
+        label: confirmation.label,
+        checked: tickedFor === identity,
+        disabled: state === "applying",
+        onCheckedChange: (checked) => setTickedFor(checked ? identity : void 0)
+      }
+    ),
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -151,7 +189,18 @@ function ProposalCard({
         children: labels.decline
       }
     ),
-    /* @__PURE__ */ jsx(Button, { variant: "primary", loading: state === "applying", disabledReason: blocked, onClick: onApprove, children: state === "stepup" ? labels.confirmIdentity : approveLabel })
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: danger ? "danger" : "primary",
+        className: "crewlet-proposal-card__approve",
+        loading: state === "applying",
+        disabledReason: blocked ?? unconfirmed,
+        "data-arming": arming || void 0,
+        onClick: onApprove,
+        children: state === "stepup" ? labels.confirmIdentity : approveLabel
+      }
+    )
   ] }) : void 0;
   const again = (state === "expired" || state === "stale") && onPrepareAgain ? /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", leadingIcon: /* @__PURE__ */ jsx(RefreshCwGlyph, {}), onClick: onPrepareAgain, children: labels.prepareAgain }) : void 0;
   const strip = state === "stepup" ? /* @__PURE__ */ jsx(ReceiptStrip, { tone: "neutral", icon: /* @__PURE__ */ jsx(LockGlyph, { size: "md" }), children: notice ?? labels.stepUpNotice }) : state === "applied" && receipt !== void 0 ? /* @__PURE__ */ jsx(ReceiptStrip, { ...landing, tone: "success", children: receipt }) : state === "declined" ? /* @__PURE__ */ jsx(ReceiptStrip, { ...landing, tone: "neutral", icon: /* @__PURE__ */ jsx(BanGlyph, { size: "md" }), children: notice ?? labels.declinedNotice }) : state === "expired" ? /* @__PURE__ */ jsx(ReceiptStrip, { ...landing, tone: "neutral", icon: /* @__PURE__ */ jsx(ClockGlyph, { size: "md" }), children: notice ?? labels.expiredNotice }) : state === "stale" ? /* @__PURE__ */ jsx(ReceiptStrip, { ...landing, tone: "neutral", icon: /* @__PURE__ */ jsx(ClockGlyph, { size: "md" }), children: notice ?? labels.staleNotice }) : state === "failed" ? /* @__PURE__ */ jsx(
@@ -182,8 +231,15 @@ function ProposalCard({
       strip,
       actions: decision ?? again,
       actionsAlign: decision ? "end" : "start",
-      className: cx("crewlet-proposal-card", `crewlet-proposal-card--${state}`, className),
+      rail: danger ? "danger" : void 0,
+      className: cx(
+        "crewlet-proposal-card",
+        `crewlet-proposal-card--${state}`,
+        danger && "crewlet-proposal-card--danger",
+        className
+      ),
       "data-state": state,
+      "data-tone": danger ? "danger" : void 0,
       "data-outcome": state === "failed" ? failureOutcome : void 0,
       children: [
         summary === void 0 || summary === null ? null : /* @__PURE__ */ jsx("p", { className: "crewlet-proposal-card__summary", children: summary }),
@@ -197,10 +253,11 @@ function ProposalCard({
             diffLabels
           }
         ),
+        details === void 0 || details === null ? null : /* @__PURE__ */ jsx(Disclosure, { className: "crewlet-proposal-card__details", title: labels.details, size: "compact", lazy: true, children: details }),
         note === void 0 || note === null ? null : /* @__PURE__ */ jsx("p", { className: "crewlet-proposal-card__note", children: note })
       ]
     }
   );
 }
 
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard };
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard };

package/dist/{chunk-UBIPDEFV.js → chunk-3EETQFAM.js}

@@ -1,11 +1,11 @@
 import { Skeleton } from './chunk-BRLZXYPA.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
-import { RelativeTime } from './chunk-L6NG7CUA.js';
+import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Card } from './chunk-4AUTALJA.js';
 import { AvatarStack } from './chunk-BKP6XCAJ.js';
 import { ArtifactKindGround } from './chunk-NHLNHH4J.js';
-import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
 import { Checkbox } from './chunk-PBCNINMB.js';
+import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-DS5NBENV.js → chunk-BVNFNFA6.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-NZRUKWB4.js').then(
+  loading ??= import('./Editor-URGZOK2S.js').then(
     (module) => {
       engine = module.Editor;
       return engine;