@crewlethq/ui 0.53.0 → 0.54.0

package/dist/LinkInterstitial/index.js

@@ -1,12 +1,12 @@
-export { LinkInterstitial, openExternal } from '../chunk-4QW6K7RK.js';
-import '../chunk-SFG7TS4Q.js';
+export { LinkInterstitial, openExternal } from '../chunk-U3LNU4B2.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-5CLW2CXT.js';
 import '../chunk-BPCY7ZID.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ListInput/index.js

@@ -1,14 +1,14 @@
-export { ListInput, withDraft } from '../chunk-ROXAHDMA.js';
+export { ListInput, withDraft } from '../chunk-6PEALINJ.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-OMV5W53A.js';
-import '../chunk-TN22R6LW.js';
-import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-QLEJPU5R.js';
+import '../chunk-XCUUI7E7.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-LACA4JGC.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MarkdownEditor/index.js

@@ -1,17 +1,17 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-Z2SK4MPL.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-F45VSK2M.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-5FB6DGGC.js';
-import '../chunk-I4Q6PACO.js';
+import '../chunk-SMVWDO72.js';
+import '../chunk-GKRPPSWY.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-3JIZ2A6K.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MergeConflicts/index.js

@@ -1,16 +1,16 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-JV4G7LH3.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-PZZHO6OS.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-5FB6DGGC.js';
-import '../chunk-I4Q6PACO.js';
+import '../chunk-SMVWDO72.js';
+import '../chunk-GKRPPSWY.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-3JIZ2A6K.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,9 +1,9 @@
-export { ConfirmModal, Modal } from '../chunk-SFG7TS4Q.js';
+export { ConfirmModal, Modal } from '../chunk-YCC2S7DF.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -5,8 +5,8 @@ import '../chunk-ONQKKHON.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-TROLVEZY.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';

package/dist/PeopleRail/index.js

@@ -1,11 +1,11 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-DEBVNLFJ.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-3RCHEFIL.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/index.js

@@ -1,16 +1,16 @@
-export { PrincipalPicker } from '../chunk-ATRRLHLU.js';
-import '../chunk-WO4W5FTB.js';
+export { PrincipalPicker } from '../chunk-EMC2QD76.js';
+import '../chunk-PZQK7DWI.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-2YTOOH3A.js';
-import '../chunk-TN22R6LW.js';
+import '../chunk-QLEJPU5R.js';
 import '../chunk-XCUUI7E7.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-LACA4JGC.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ReviewList/ReviewList.d.ts

@@ -0,0 +1,58 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** The tones a part's state is said in: done, leaning on defaults, needing a look, or holding the finish. */
+export type ReviewListTone = 'success' | 'neutral' | 'warning' | 'danger';
+/** A part's state, as its pill says it: "Complete", "Uses defaults", "Missing required". */
+export interface ReviewListStatus {
+    label: string;
+    tone: ReviewListTone;
+}
+export interface ReviewListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** What the list reviews, for assistive technology: "Brand summary". */
+    label: string;
+    /** The parts: `ReviewList.Item` elements, in the order the setup walks them. */
+    children?: ReactNode;
+}
+export interface ReviewListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title' | 'children'> {
+    /** The part's glyph, drawn on a tile at the start of its row. Decorative: the title names the part. */
+    icon?: ReactNode;
+    /** The part's name, as a heading one level under where the list sits: "Logos". */
+    title: ReactNode;
+    /** The part's state, as a pill beside its title. */
+    status?: ReviewListStatus | undefined;
+    /** What changes the part, at the end of its row: an Edit button that names the part. */
+    action?: ReactNode;
+    /**
+     * What keeps the part from being finished, in one sentence, said under its
+     * values in the danger ink: "Add the primary logo to adopt." It is an alert,
+     * so it is read as it appears; show it once a finish was tried, not before.
+     */
+    error?: ReactNode;
+    /** The part's values, SHOWN rather than described: the logos, the swatches, the faces. */
+    children?: ReactNode;
+}
+/**
+ * A review of a setup's parts before it is finished: one row a part, each with
+ * its glyph, its name, its state and the way back to it, over the values it
+ * holds.
+ *
+ * ONE BOX, ONE ROW A PART. The parts share one bordered box with a hairline
+ * between them, so five parts read as one summary and every row starts its
+ * title, its state and its values on the same lines, whatever each holds. A
+ * card a part, laid out in a grid, gave every card the height of its own
+ * values: a tall row of logos beside a one-line name left holes in the grid
+ * and a summary that read as five scattered objects.
+ *
+ * THE VALUES UNDER THE TITLE, at the title's start, so the row's glyph stands
+ * alone in its column and the eye runs down the titles. Under 28rem of the
+ * list's own width the values take the whole row, as a phone needs.
+ *
+ * A HEADING A PART, one level under where the list sits, so a screen reader
+ * moves part to part by heading; the state and the action follow the heading
+ * in reading order, and the error closes the row it is about.
+ */
+export declare function ReviewList({ label, className, children, ...rest }: ReviewListProps): import("react").JSX.Element;
+export declare namespace ReviewList {
+    var Item: typeof ReviewListItem;
+}
+declare function ReviewListItem({ icon, title, status, action, error, className, children, ...rest }: ReviewListItemProps): import("react").JSX.Element;
+export {};

package/dist/ReviewList/index.d.ts

@@ -0,0 +1,3 @@
+import './ReviewList.css';
+export { ReviewList } from './ReviewList.js';
+export type { ReviewListItemProps, ReviewListProps, ReviewListStatus, ReviewListTone } from './ReviewList.js';

package/dist/ReviewList/index.js

@@ -0,0 +1,6 @@
+export { ReviewList } from '../chunk-OBUQVGEG.js';
+import '../chunk-IXJHTFXG.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ReviewList-TIN6C2JN.css

@@ -0,0 +1,116 @@
+/*
+ * ReviewList: a setup's parts in one bordered box, a row each, before the
+ * setup is finished (ReviewList.tsx).
+ *
+ * A ROW IS A GRID OF THREE COLUMNS: the glyph's tile, the part (its title and
+ * state over its values), and the action. The values sit under the title, at
+ * its start, and reach the row's end under the action, so a row of logos or
+ * swatches has the whole width and the titles still run down one line.
+ */
+.crewlet-review-list {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-subtle);
+  list-style: none;
+}
+
+.crewlet-review-list__item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    'icon head action'
+    '.    body body'
+    '.    error error';
+  align-items: center;
+  column-gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.crewlet-review-list__item + .crewlet-review-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-review-list__icon {
+  grid-area: icon;
+}
+
+.crewlet-review-list__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  grid-area: head;
+  min-width: 0;
+}
+
+.crewlet-review-list__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-review-list__action {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  grid-area: action;
+}
+
+.crewlet-review-list__body {
+  grid-area: body;
+  min-width: 0;
+  margin-top: var(--spacing-3);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-body);
+}
+
+/* WHAT HOLDS THE FINISH, in the danger ink with its glyph, so it never rests on the hue alone. */
+.crewlet-review-list__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  grid-area: error;
+  margin: var(--spacing-2) 0 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-review-list__error > svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+/* WITHOUT A GLYPH the part starts at the row's start, with no empty column before it. */
+.crewlet-review-list__item--plain {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'head action'
+    'body body'
+    'error error';
+}
+
+/* A NARROW LIST gives the values the whole row: an indent of a tile and a gap is a fifth of a phone. */
+@container (width < 28rem) {
+  .crewlet-review-list__item {
+    padding: var(--spacing-3) var(--spacing-4);
+  }
+
+  .crewlet-review-list__item:not(.crewlet-review-list__item--plain) {
+    grid-template-areas:
+      'icon head action'
+      'body body body'
+      'error error error';
+  }
+}

package/dist/RichEditor/index.js

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

package/dist/SegmentedControl/index.js

@@ -1,15 +1,15 @@
 import '../chunk-OOC7Q67K.js';
-export { SegmentedControl } from '../chunk-5FB6DGGC.js';
-import '../chunk-I4Q6PACO.js';
+export { SegmentedControl } from '../chunk-SMVWDO72.js';
+import '../chunk-GKRPPSWY.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-3JIZ2A6K.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SetupWizard/SetupWizard.d.ts

@@ -47,9 +47,10 @@ export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     /** What stands at the start of the footer row, apart from the step's actions: Exit. */
     footerStart?: ReactNode;
     /**
-     * The content takes the whole width beside the rail rather than one 640px
-     * column, for a step that lays out columns of its own (a review of every
-     * step beside a preview). Meant for a step with no `aside`.
+     * The content takes the content's and the aside's columns together (1000px
+     * at most) rather than one 640px column, for a step that lays out columns
+     * of its own (a review of every step beside a preview). Its footer ends
+     * where every other step's does. Meant for a step with no `aside`.
      */
     wide?: boolean | undefined;
     labels?: Partial<SetupWizardLabels> | undefined;
@@ -66,17 +67,22 @@ export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  * most 640px. The aside is a complementary landmark named by `asideLabel`,
  * held in view beside the content. The footer holds the step's actions at the
  * end of its row (and `footerStart`, the way out, at its start) at the bottom
- * of the view, above the device's safe area. A step that lays out columns of
- * its own takes the whole width beside the rail with `wide`.
+ * of the view, above the device's safe area, and at the end of a scroll rests
+ * on the scroller's bottom edge rather than above the shell's room under the
+ * content (`--crewlet-app-shell-content-end`). A step that lays out columns
+ * of its own takes the content's and the aside's columns with `wide`.
  *
  * THREE SHAPES. On a wide page the rail, the content and the aside stand side
- * by side (240px, the content, 320px). Where the wizard has under 70rem of its
- * own width, which is a 1024px window beside the application's rail, the aside
- * moves under the content and the rail stays: a container query, because the
- * room is the page's and not the window's, as in `AsideLayout`. Under the
+ * by side (240px, the content up to 640px, 320px), the aside right beside the
+ * content however wide the window, and the header and the footer ending where
+ * the parts do. Where the wizard has under 70rem of its own width, which is a
+ * 1024px window beside the application's rail, the aside moves under the
+ * content and the rail stays: a container query, because the room is the
+ * page's and not the window's, as in `AsideLayout`. Under the
  * phone breakpoint the rail becomes a row of steps above the content, under a
- * line that says "Step 3 of 6 · Colours", and the aside folds into a
- * disclosure, so the fields come first. Which element a phone draws is decided
+ * line that says "Step 3 of 6 · Colours", the aside folds into a
+ * disclosure, so the fields come first, and the footer's actions share two
+ * rows with the last of them, the primary, the whole width. Which element a phone draws is decided
  * in `useMediaMatch`, the one subscription for that question; how it is laid
  * out is decided in the stylesheet, at the same breakpoint token.
  *

package/dist/SetupWizard/index.js

@@ -1,11 +1,11 @@
-export { SetupWizard } from '../chunk-4C5CZT4D.js';
+export { SetupWizard } from '../chunk-WXWMHYKW.js';
 import '../chunk-LDGQIDIZ.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-RTPQDNW3.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-OGXHZHRX.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RTPQDNW3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SetupWizard-GZK5UDKC.css → SetupWizard-Z54H6RYW.css}

@@ -7,27 +7,58 @@
  * from 70rem of the wizard's own width, the aside (320px). Under 70rem the
  * aside takes the row under the content and the rail runs down beside both.
  * Under the phone breakpoint every part is one column, in reading order.
+ *
+ * THE TRACKS ARE THE MEASURE, NOT THE WINDOW. The content's track is at most
+ * its column, so on a window wider than the parts the aside stands right
+ * beside the content and the header and the footer end where the parts do.
+ * A track of 1fr with the content held to 640px inside it left the preview
+ * stranded at the window's far edge with a void between, and Continue a
+ * window's width from the fields it continues. A wide step (`wide`) takes
+ * the content and the aside's columns together, so its footer ends where
+ * every other step's does.
  */
 
 .crewlet-setup-wizard {
+  --crewlet-setup-wizard-rail: 240px;
+  --crewlet-setup-wizard-column: 640px;
+  --crewlet-setup-wizard-aside: 320px;
+  --crewlet-setup-wizard-gap: var(--spacing-8);
+  --crewlet-setup-wizard-wide: calc(
+    var(--crewlet-setup-wizard-column) + var(--crewlet-setup-wizard-gap) + var(--crewlet-setup-wizard-aside)
+  );
+
   container-type: inline-size;
   min-width: 0;
 }
 
 .crewlet-setup-wizard__frame {
   display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column));
   grid-template-areas:
     'head head'
     'rail content'
     'rail aside'
     'foot foot';
   grid-template-rows: auto auto 1fr auto;
-  column-gap: var(--spacing-8);
+  column-gap: var(--crewlet-setup-wizard-gap);
   row-gap: var(--spacing-6);
   min-width: 0;
 }
 
+/* With no aside there is no row for one, and no second gap above the footer. */
+.crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+  grid-template-areas:
+    'head head'
+    'rail content'
+    'foot foot';
+  grid-template-rows: auto 1fr auto;
+}
+
+/* A WIDE STEP lays out columns of its own across the content's and the aside's columns together. */
+.crewlet-setup-wizard--wide .crewlet-setup-wizard__frame {
+  grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-wide));
+}
+
 .crewlet-setup-wizard__head {
   display: flex;
   flex-direction: column;
@@ -59,7 +90,6 @@
   grid-area: content;
   box-sizing: border-box;
   width: 100%;
-  max-width: 640px;
   min-width: 0;
 }
 
@@ -102,7 +132,6 @@
   gap: var(--spacing-4);
   grid-area: aside;
   box-sizing: border-box;
-  max-width: 640px;
   min-width: 0;
   padding-top: var(--spacing-6);
   border-top: 1px solid var(--color-border-default);
@@ -112,6 +141,14 @@
  * THE FOOTER holds the step's actions at the bottom of the view while the
  * content scrolls under it, on the sheet's own ground with a hairline above,
  * and clears the device's safe area where it has one.
+ *
+ * IT ENDS THE SCREEN. Inside an `AppShell` the content column keeps room
+ * under its last line (`--crewlet-app-shell-content-end`, 64px wide), and a
+ * docked bar is that last line: the footer takes the room back, so at the end
+ * of a scroll it rests on the scroller's bottom edge, where it stood while
+ * scrolling, rather than rising 64px with a strip of empty sheet under it.
+ * Outside a shell there is no room to take back and the margin is zero. The
+ * wizard is the screen's last element for the same reason.
  */
 .crewlet-setup-wizard__footer {
   position: sticky;
@@ -122,6 +159,7 @@
   align-items: center;
   gap: var(--spacing-2);
   grid-area: foot;
+  margin-bottom: calc(-1 * var(--crewlet-app-shell-content-end, 0px));
   padding: var(--spacing-3) 0 calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
   border-top: 1px solid var(--color-border-default);
   background: var(--color-surface-background);
@@ -140,15 +178,16 @@
   margin-inline-start: auto;
 }
 
-/* A WIDE STEP lays out columns of its own across the whole width beside the rail. */
-.crewlet-setup-wizard--wide .crewlet-setup-wizard__content {
-  max-width: none;
-}
-
-/* BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in view. */
+/*
+ * BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in
+ * view. Written at the specificity of the wide and no-aside rules above, and
+ * after them, so the three shapes are decided by source order alone.
+ */
 @container (min-width: 70rem) {
-  .crewlet-setup-wizard__frame {
-    grid-template-columns: 240px minmax(0, 1fr) 320px;
+  .crewlet-setup-wizard .crewlet-setup-wizard__frame {
+    grid-template-columns:
+      var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column))
+      var(--crewlet-setup-wizard-aside);
     grid-template-areas:
       'head head head'
       'rail content aside'
@@ -156,15 +195,19 @@
     grid-template-rows: auto 1fr auto;
   }
 
-  /* With no aside, nothing is held for one: the content takes its column too. */
+  /* With no aside, nothing is held for one. */
   .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
-    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column));
     grid-template-areas:
       'head head'
       'rail content'
       'foot foot';
   }
 
+  .crewlet-setup-wizard--wide.crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-wide));
+  }
+
   .crewlet-setup-wizard__aside {
     position: sticky;
     top: var(--spacing-5);
@@ -180,7 +223,7 @@
  * position line, and scrolls away with the page rather than covering it.
  */
 @media (width < 640px) {
-  .crewlet-setup-wizard__frame {
+  .crewlet-setup-wizard .crewlet-setup-wizard__frame {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       'head'
@@ -192,6 +235,14 @@
     row-gap: var(--spacing-5);
   }
 
+  .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-areas:
+      'head'
+      'rail'
+      'content'
+      'foot';
+  }
+
   .crewlet-setup-wizard__rail {
     position: static;
     display: flex;
@@ -208,6 +259,26 @@
     padding-top: 0;
     border-top: 0;
   }
+
+  /*
+   * THE ACTIONS SHARE TWO ROWS: the way out and the step's other actions on
+   * the first, the step's last action, its primary, the whole width on the
+   * second, under the thumb. The two groups give their buttons to the
+   * footer's own row, so three short buttons no longer take three lines of a
+   * footer held over the content.
+   */
+  .crewlet-setup-wizard__footer-start,
+  .crewlet-setup-wizard__footer-end {
+    display: contents;
+  }
+
+  .crewlet-setup-wizard__footer-end > :first-child {
+    margin-inline-start: auto;
+  }
+
+  .crewlet-setup-wizard__footer-end > :last-child {
+    flex: 1 1 100%;
+  }
 }
 
 .crewlet-setup-wizard__position {

package/dist/ShareDialog/index.js

@@ -1,6 +1,6 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-362TAJUQ.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-PGYIDNGG.js';
 import '../chunk-XQZ6EWOE.js';
-import '../chunk-SFG7TS4Q.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-7SHAFLEX.js';
 import '../chunk-STJ7QBC3.js';
@@ -9,13 +9,13 @@ import '../chunk-BPCY7ZID.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';