@crewlethq/ui 0.48.3 → 0.49.0

package/dist/FolderTile/FolderTile.d.ts

@@ -0,0 +1,91 @@
+import { type ReactNode } from 'react';
+/**
+ * What a folder holds that the reader can open: its direct children only,
+ * counted from the reader's own view of them. A folder grants nothing, so a
+ * reader who can open nothing inside is told so rather than told it is empty.
+ */
+export interface FolderContents {
+    artifacts: number;
+    folders: number;
+}
+export interface FolderContentsLabels {
+    /** "12 artifacts", "1 artifact". */
+    artifacts: (count: number) => string;
+    /** "2 folders", "1 folder". */
+    folders: (count: number) => string;
+    /** Said when the reader can open nothing inside, which is never "Empty". */
+    nothing: string;
+}
+/**
+ * The line a folder's tile and its list row say about what is inside: "12
+ * artifacts · 2 folders", one part alone when the other is none, and "Nothing
+ * you can open yet" for neither.
+ *
+ * ONE PHRASING, EXPORTED, so the grid's tile and the list's name cell
+ * (`ArtifactNameCell kind="folder"`, whose `detail` takes this) never say the
+ * same count two ways.
+ */
+export declare function describeFolderContents(contents: FolderContents, labels?: Partial<FolderContentsLabels>): string;
+export type FolderTileSize = 'tile' | 'row';
+export interface FolderTileLabels extends FolderContentsLabels {
+    /** What it is, said after its name: the tile draws a folder rather than printing the word. */
+    folder: string;
+    /** Said when the tile is chosen, since the chosen edge is a picture of it. */
+    selected: string;
+}
+export interface FolderTileProps {
+    name: string;
+    /** The folder's page. The whole tile is one real link. */
+    href: string;
+    /**
+     * Who can see the folder, as a glyph and a short word: an
+     * `ArtifactAccessLabel` with the folder's own word ("Everyone", "Only you").
+     * Read as part of the tile's description.
+     */
+    visibility?: ReactNode;
+    /** What is inside that the reader can open. Left out (still loading), no line is drawn. */
+    contents?: FolderContents | undefined;
+    /**
+     * The tile's own controls (a More menu), drawn OUTSIDE its link at its
+     * trailing edge and shown on hover and while focus is inside the tile, so a
+     * keyboard reaches them after the link and they are never nested in it.
+     */
+    actions?: ReactNode;
+    /** It is chosen (a selection the host keeps): the selected edge and fill. */
+    selected?: boolean | undefined;
+    /**
+     * Something held over it would land in it: the drop target's edge and fill.
+     * Reserved for dragging onto a folder, which the host drives.
+     */
+    dropTarget?: boolean | undefined;
+    /**
+     * `tile` is a gallery's (a grid of them, a few across); `row` is the full
+     * width, 44px row a phone takes. A tile takes the row's shape on its own
+     * under the phone breakpoint.
+     */
+    size?: FolderTileSize | undefined;
+    className?: string | undefined;
+    labels?: Partial<FolderTileLabels> | undefined;
+}
+/**
+ * A folder in a gallery: the folder glyph on a neutral tint, the name on one
+ * line, who can see it and what is inside, and a More menu.
+ *
+ * SHORTER THAN AN ARTIFACT'S CARD AND WITH NO PREVIEW, so a folder and an
+ * artifact never look alike and the kind's badge keeps its meaning. The tint
+ * is neutral for the same reason: a folder is not a kind.
+ *
+ * THE FACTS ARE NEVER CUT. Who can see the folder and what is inside wrap
+ * onto a second line where the tile is narrow; only the name, which carries
+ * its whole self on hover, is cut to one line.
+ *
+ * THE WHOLE TILE IS ONE LINK, named by the folder's name alone and described
+ * by the rest, so a reader moving by link hears "Q3 launch" and then, if they
+ * wait, "Folder, Everyone, 12 artifacts · 2 folders". The More menu sits
+ * beside the link rather than inside it.
+ *
+ * ITS COUNT IS THE READER'S OWN. A folder grants nothing on what it holds, so
+ * the count is of what this reader can open, and a folder holding only things
+ * they cannot open says "Nothing you can open yet", never "Empty".
+ */
+export declare function FolderTile({ name, href, visibility, contents, actions, selected, dropTarget, size, className, labels, }: FolderTileProps): import("react").JSX.Element;

package/dist/FolderTile/index.d.ts

@@ -0,0 +1,3 @@
+import './FolderTile.css';
+export { FolderTile, describeFolderContents } from './FolderTile.js';
+export type { FolderContents, FolderContentsLabels, FolderTileLabels, FolderTileProps, FolderTileSize } from './FolderTile.js';

package/dist/FolderTile/index.js

@@ -0,0 +1,7 @@
+export { FolderTile, describeFolderContents } from '../chunk-M4QM477B.js';
+import '../chunk-INHXF2CL.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FolderTile-FDT5Y63Z.css

@@ -0,0 +1,231 @@
+/*
+ * A folder in a gallery: a short tile on Card (no preview), the folder glyph
+ * on a neutral tint over the name and one quiet line, and a More menu in the
+ * top corner outside the link. `row` is the full width, 44px row a phone
+ * takes, and a tile becomes one under the phone breakpoint.
+ *
+ * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
+ * class too: the two sheets meet at equal weight and the bundle orders them by
+ * file name, which puts Card's after this one.
+ */
+
+/*
+ * THE ARTIFACT CARD'S CORNER, so a folder tile and the cards below it read as
+ * one gallery, and Card's own hover step (the hairline darkens, nothing
+ * lifts). The chosen state is Card's (`selected`): the selected edge over the
+ * selected fill.
+ */
+.crewlet-card.crewlet-folder-tile {
+  /*
+   * THE TWO SHAPES ARE ONE LAYOUT AT TWO SIZES, so the row (and a tile under
+   * the phone breakpoint) restates these and nothing else.
+   */
+  --crewlet-folder-tile-radius: var(--radius-xl);
+  --crewlet-folder-tile-gap: var(--spacing-3);
+  --crewlet-folder-tile-pad-block: var(--spacing-4);
+  --crewlet-folder-tile-pad-inline: var(--spacing-4);
+  --crewlet-folder-tile-floor: auto;
+  --crewlet-folder-tile-glyph: 40px;
+  --crewlet-folder-tile-glyph-radius: var(--radius-md);
+  --crewlet-folder-tile-name: var(--font-size-md);
+  --crewlet-folder-tile-facts: var(--font-size-sm);
+  --crewlet-folder-tile-actions-inset: var(--spacing-3);
+  /*
+   * A TILE STACKS: the glyph on top with the More menu level with it in the
+   * other corner, then the name and the facts the full width of the tile,
+   * where a gallery four across has room for "Everyone · 12 artifacts · 2
+   * folders". A row is one line of glyph and words with the menu centred on
+   * it, and only the row gives the menu room.
+   */
+  --crewlet-folder-tile-direction: column;
+  --crewlet-folder-tile-align: flex-start;
+  --crewlet-folder-tile-actions-top: calc(
+    var(--crewlet-folder-tile-pad-block) + (var(--crewlet-folder-tile-glyph) - var(--size-control-sm)) / 2
+  );
+  --crewlet-folder-tile-actions-shift: 0;
+  --crewlet-folder-tile-reserve-link: 0px;
+
+  flex-direction: row;
+  align-items: stretch;
+  min-width: 0;
+  border-radius: var(--crewlet-folder-tile-radius);
+}
+
+/* ---- the row: a phone's, full width at 44px ---- */
+
+.crewlet-card.crewlet-folder-tile--row {
+  --crewlet-folder-tile-radius: var(--radius-lg);
+  --crewlet-folder-tile-gap: var(--spacing-2);
+  --crewlet-folder-tile-pad-block: var(--spacing-1);
+  --crewlet-folder-tile-pad-inline: var(--spacing-3);
+  --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-actions-inset: var(--spacing-2);
+  --crewlet-folder-tile-direction: row;
+  --crewlet-folder-tile-align: center;
+  --crewlet-folder-tile-actions-top: 50%;
+  --crewlet-folder-tile-actions-shift: -50%;
+  --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+}
+
+/* UNDER THE PHONE BREAKPOINT A TILE IS THE ROW, strictly under, as the
+   package switches there everywhere else. */
+@media (width < 640px) {
+  .crewlet-card.crewlet-folder-tile--tile {
+    --crewlet-folder-tile-radius: var(--radius-lg);
+    --crewlet-folder-tile-gap: var(--spacing-2);
+    --crewlet-folder-tile-pad-block: var(--spacing-1);
+    --crewlet-folder-tile-pad-inline: var(--spacing-3);
+    --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-actions-inset: var(--spacing-2);
+    --crewlet-folder-tile-direction: row;
+    --crewlet-folder-tile-align: center;
+    --crewlet-folder-tile-actions-top: 50%;
+    --crewlet-folder-tile-actions-shift: -50%;
+    --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+  }
+}
+
+/*
+ * SOMETHING HELD OVER IT WOULD LAND IN IT: the accent edge over the accent's
+ * soft fill, the same pair a file drop target takes while files are over it,
+ * so "let go here" reads one way across the package.
+ */
+.crewlet-card.crewlet-folder-tile.is-drop-target {
+  border-color: var(--color-brand-accent);
+  background-color: var(--color-brand-accent-soft);
+}
+
+.crewlet-card.crewlet-folder-tile:has(.crewlet-folder-tile__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* THE LINK IS THE TILE: it fills it, and the ring is drawn on the tile. */
+.crewlet-folder-tile__link,
+.crewlet-folder-tile__link:hover {
+  text-decoration: none;
+}
+
+.crewlet-folder-tile__link {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: var(--crewlet-folder-tile-direction);
+  align-items: var(--crewlet-folder-tile-align);
+  gap: var(--crewlet-folder-tile-gap);
+  min-width: 0;
+  min-height: var(--crewlet-folder-tile-floor);
+  padding: var(--crewlet-folder-tile-pad-block) var(--crewlet-folder-tile-pad-inline);
+  border-radius: inherit;
+  color: inherit;
+  outline: none;
+}
+
+/* Room for the More menu on a row, where it sits beside the words. */
+.crewlet-folder-tile--with-actions .crewlet-folder-tile__link {
+  padding-inline-end: calc(var(--crewlet-folder-tile-pad-inline) + var(--crewlet-folder-tile-reserve-link));
+}
+
+/* A NEUTRAL TINT, never a kind's: a folder is not a kind. */
+.crewlet-folder-tile__glyph {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-folder-tile-glyph);
+  height: var(--crewlet-folder-tile-glyph);
+  box-sizing: border-box;
+  border-radius: var(--crewlet-folder-tile-glyph-radius);
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-folder-tile__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-folder-tile__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--crewlet-folder-tile-name);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * THE FACTS WRAP, NEVER CUT. "Everyone" and "Nothing you can open yet" are
+ * both things a reader has to read, and four tiles across a laptop's page do
+ * not have room for them on one line: the count moves under who can see the
+ * folder rather than losing its end to an ellipsis. The two are told apart by
+ * the visibility glyph and the gap between them, not by a separator, so a
+ * line that breaks never opens on a stray dot.
+ */
+.crewlet-folder-tile__facts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px var(--spacing-3);
+  min-width: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-folder-tile-facts);
+  line-height: 1.35;
+}
+
+.crewlet-folder-tile__visibility {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-folder-tile__contents {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * THE TILE'S OWN CONTROLS, at its trailing edge and outside the link: hidden
+ * until the tile is hovered or holds focus, so a gallery rests as names, and
+ * always there on a screen with no hover or while their menu is open.
+ */
+.crewlet-folder-tile__actions {
+  position: absolute;
+  top: var(--crewlet-folder-tile-actions-top);
+  right: var(--crewlet-folder-tile-actions-inset);
+  display: inline-flex;
+  gap: var(--spacing-1);
+  transform: translateY(var(--crewlet-folder-tile-actions-shift));
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-folder-tile:hover .crewlet-folder-tile__actions,
+.crewlet-folder-tile:focus-within .crewlet-folder-tile__actions,
+.crewlet-folder-tile__actions:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-folder-tile__actions {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-folder-tile__actions {
+    transition: none;
+  }
+}

package/dist/LinkInterstitial/index.js

@@ -1,6 +1,6 @@
-export { LinkInterstitial, openExternal } from '../chunk-DY4DQ7EB.js';
+export { LinkInterstitial, openExternal } from '../chunk-GP4YWZFO.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-6AKG2VLR.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';

package/dist/ListInput/index.js

@@ -1,8 +1,8 @@
-export { ListInput, withDraft } from '../chunk-ICVS3U4S.js';
+export { ListInput, withDraft } from '../chunk-PGR2PKH6.js';
 import '../chunk-XJ2QEBMM.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';

package/dist/LogoSlot/LogoSlot.d.ts

@@ -0,0 +1,84 @@
+import { type ReactNode } from 'react';
+/** The ground a logo is drawn on: the light one it is usually made for, or a dark one. */
+export type LogoSlotGround = 'light' | 'dark';
+/** A wide logo (a wordmark, a lockup) or a square mark. */
+export type LogoSlotShape = 'wide' | 'square';
+export interface LogoSlotLabels {
+    /** The picker's label while the slot is empty. */
+    choose: string;
+    /** The picker's label once the slot holds a logo. */
+    replace: string;
+    remove: string;
+    /** What the overlay says while a file is held over the slot. */
+    drop: string;
+    /** Said and shown while a file is uploading. */
+    uploading: string;
+    /** Printed under an empty slot for a reader who cannot fill it. */
+    empty: string;
+    /** What may be brought, under the picker. */
+    hint: string;
+}
+export interface LogoSlotProps {
+    /** The slot's name: "Primary", "For dark grounds", "Mark". */
+    label: string;
+    /** One line under it: "On a light ground". */
+    description?: ReactNode;
+    /** The ground the logo is drawn on. */
+    ground: LogoSlotGround;
+    /**
+     * The brand's own colour for that ground, `#rrggbb`. Left out (or not a
+     * colour), the slot draws the product's own ground for that mode.
+     */
+    groundColor?: string | undefined;
+    shape?: LogoSlotShape | undefined;
+    /**
+     * The logo, as an address the host has already validated (the engine's file
+     * route, through the dashboard's checked blob path). Empty, the slot shows
+     * where a logo would go.
+     */
+    src?: string | null | undefined;
+    /** What the logo says, for a reader who cannot see it: "Acme logo". */
+    alt: string;
+    /** The clear-space guide: a dashed line round the logo at the space it keeps. On by default. */
+    guide?: boolean | undefined;
+    /** A file is uploading: the picker spins and the slot takes no new file until it lands. */
+    uploading?: boolean | undefined;
+    /** Why the last file was refused, with what to do about it. Drawn under the slot and announced. */
+    error?: ReactNode;
+    /** The reader may change the logo: a picker, Remove, and dropping a file on the slot. */
+    editable?: boolean | undefined;
+    /** A file was picked or dropped. One file: a slot holds one logo. */
+    onFile?: ((file: File) => void) | undefined;
+    /** Remove was pressed. Offered only while the slot holds a logo. */
+    onRemove?: (() => void) | undefined;
+    /** The types the picker offers, as the input's `accept` takes them. The engine still checks every file. */
+    accept?: string | undefined;
+    /** A reader's action beside the slot's name: a download of the logo. */
+    download?: ReactNode;
+    /**
+     * Said under an empty slot in place of `empty`: what an empty slot means
+     * here ("The primary logo is used on dark grounds until one is added").
+     */
+    emptyNote?: ReactNode;
+    className?: string | undefined;
+    labels?: Partial<LogoSlotLabels> | undefined;
+}
+/**
+ * One of a brand's logos, drawn on the ground it is made for, with the space
+ * it keeps round it.
+ *
+ * ON ITS OWN GROUND, NOT THE PAGE'S. A logo for a light ground is shown on a
+ * light ground in a dark theme too, and one for dark grounds on a dark one:
+ * the brand's own ground colour when it has one, the product's sheet for that
+ * mode when it has not. The guide and the placeholder are inked in whichever
+ * of the two palettes' text reads better on that ground.
+ *
+ * THE CLEAR-SPACE GUIDE is a dashed line round the logo at the space it keeps,
+ * so an administrator sees how it will sit in a header before it is in one.
+ *
+ * BRINGING A FILE IS NEVER ONLY A DROP. An editable slot carries a picker
+ * (`FilePickButton`), and the slot itself is a `FileDrop` region for a pointer.
+ * The engine checks every file; a refusal comes back as `error`, drawn under
+ * the slot and announced, saying what to change.
+ */
+export declare function LogoSlot({ label, description, ground, groundColor, shape, src, alt, guide, uploading, error, editable, onFile, onRemove, accept, download, emptyNote, className, labels, }: LogoSlotProps): import("react").JSX.Element;

package/dist/LogoSlot/index.d.ts

@@ -0,0 +1,3 @@
+import './LogoSlot.css';
+export { LogoSlot } from './LogoSlot.js';
+export type { LogoSlotGround, LogoSlotLabels, LogoSlotProps, LogoSlotShape } from './LogoSlot.js';

package/dist/LogoSlot/index.js

@@ -0,0 +1,9 @@
+export { LogoSlot } from '../chunk-ITI2Z44C.js';
+import '../chunk-THDGBD6Y.js';
+import '../chunk-B235ANDO.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LogoSlot-T2UFOJXU.css

@@ -0,0 +1,159 @@
+/*
+ * One of a brand's logos on the ground it is made for. The ground and the ink
+ * of its guide are the only values here that are not tokens: they arrive
+ * through `--crewlet-logo-slot-ground` (the brand's own `#rrggbb`, or a
+ * palette's sheet read from the tokens package) and `--crewlet-logo-slot-ink`
+ * (whichever palette's text reads better on that ground).
+ */
+.crewlet-logo-slot {
+  /* Every stage is one height, so three slots side by side line up whatever
+     their logos' shapes. */
+  --crewlet-logo-slot-height: calc(var(--size-row-lg) * 3);
+  --crewlet-logo-slot-padding: var(--spacing-5);
+  --crewlet-logo-slot-clear: var(--spacing-3);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-logo-slot__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-logo-slot__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-logo-slot__label {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-logo-slot__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-logo-slot__download {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * THE STAGE: the logo's own ground, at one height, inside the page's hairline
+ * so a ground that matches the page is still a stage. An empty one draws its
+ * edge dashed, a place waiting to be filled.
+ */
+.crewlet-logo-slot__stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--crewlet-logo-slot-height);
+  box-sizing: border-box;
+  padding: var(--crewlet-logo-slot-padding);
+  overflow: hidden;
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-logo-slot-ground);
+  color: var(--crewlet-logo-slot-ink);
+}
+
+.crewlet-logo-slot__stage.is-empty {
+  border-style: dashed;
+  border-color: var(--color-border-strong);
+}
+
+/*
+ * THE SPACE THE LOGO KEEPS: padding round it at the clear space, and with the
+ * guide on, a dashed line at that edge in the ground's ink, half strength so
+ * it reads as a guide and never as part of the logo.
+ */
+.crewlet-logo-slot__space {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: var(--crewlet-logo-slot-clear);
+}
+
+.crewlet-logo-slot__space.has-guide::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px dashed var(--crewlet-logo-slot-ink);
+  border-radius: var(--radius-xs);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.crewlet-logo-slot__image {
+  display: block;
+  max-width: 100%;
+  max-height: calc(var(--crewlet-logo-slot-height) - 2 * var(--crewlet-logo-slot-padding) - 2 * var(--crewlet-logo-slot-clear));
+  object-fit: contain;
+}
+
+/* WHERE A LOGO WOULD GO, at the shape it would take: a wordmark's band or a
+   mark's square, with the image glyph in the ground's ink. */
+.crewlet-logo-slot__placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--size-row-lg) * 3);
+  height: var(--size-row-lg);
+  opacity: 0.7;
+}
+
+.crewlet-logo-slot__stage--square .crewlet-logo-slot__placeholder {
+  width: var(--size-row-lg);
+}
+
+.crewlet-logo-slot__stage.is-uploading .crewlet-logo-slot__space {
+  opacity: 0.5;
+}
+
+.crewlet-logo-slot__empty {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* A REFUSAL, in the danger ink with its glyph, so it never rests on the hue. */
+.crewlet-logo-slot__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  margin: 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-logo-slot__error > svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+.crewlet-logo-slot__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-logo-slot__hint {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}

package/dist/Modal/Modal.d.ts

@@ -102,6 +102,19 @@ export interface ModalProps extends FrameAttributes {
     variant?: ModalVariant | undefined;
     shape?: ModalShape | undefined;
     placement?: ModalPlacement | undefined;
+    /**
+     * On a phone (strictly under the phone breakpoint), the dialog takes the
+     * whole window as a full-height sheet: no inset and no corners, the head
+     * and the foot standing still while the body scrolls between them, and the
+     * foot clear of the home indicator. For a dialog whose body is a long list
+     * a thumb works through, such as a folder picker, where a dialog inset from
+     * every edge leaves a few rows of it on the screen at a time.
+     *
+     * OPT-IN, so every other dialog keeps its shape on a phone. It reshapes the
+     * framed dialog only: a prompt is one sentence and stays a prompt, and a
+     * side sheet is already the full width there.
+     */
+    phoneSheet?: boolean | undefined;
     role?: ModalRole | undefined;
     /**
      * False while a request is in flight: Escape, the veil and the close

package/dist/Modal/index.js

@@ -1,4 +1,4 @@
-export { ConfirmModal, Modal } from '../chunk-6AKG2VLR.js';
+export { ConfirmModal, Modal } from '../chunk-YCC2S7DF.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{Modal-TOEWHDCQ.css → Modal-3HMP7WAZ.css}

@@ -112,6 +112,32 @@
   animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
 }
 
+/*
+ * THE PHONE SHEET (`phoneSheet`), strictly under the phone breakpoint as the
+ * package switches there everywhere else: the dialog takes the whole window,
+ * with no inset and no corners, so a long list in its body has the screen's
+ * height to scroll in between a head and a foot that stay put. It rises from
+ * the bottom edge as the bottom sheet does, and its foot stays clear of the
+ * home indicator. Above the breakpoint nothing here applies, and the dialog
+ * keeps its placement.
+ */
+@media (width < 640px) {
+  .crewlet-modal-overlay--dialog.crewlet-modal-overlay--phone-sheet {
+    align-items: stretch;
+    padding: 0;
+  }
+
+  .crewlet-modal-overlay--phone-sheet > .crewlet-modal--dialog {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border: none;
+    border-radius: 0;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
+  }
+}
+
 /*
  * The sheet's veil fades over the same span the sheet itself travels, so the
  * two are one movement rather than a ground that lands and a panel that
@@ -584,4 +610,8 @@
   .crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
     animation: none;
   }
+
+  .crewlet-modal-overlay--phone-sheet > .crewlet-modal--dialog {
+    animation: none;
+  }
 }