@crewlethq/ui 0.32.0 → 0.34.0

package/dist/{PresenceStack-QSXQJND5.css → PresenceStack-FJJQVH74.css}

@@ -4,6 +4,14 @@
  * each present collaborator's hue, outside the cut-out, and the idle fade.
  */
 
+/* HOW FAR THE RING REACHES past each badge: the cut-out, then the hue. The
+   ring is drawn outside the stack's own box, so a container that places the
+   stack flush to an edge (or clips) keeps this much clear round it. */
+.crewlet-presence-stack {
+  --crewlet-presence-stack-cutout: 2px;
+  --crewlet-presence-stack-reach: calc(var(--crewlet-presence-stack-cutout) * 2);
+}
+
 /* The wrapper (a span, or a button when badges select) carries no edge of its
    own: the cut-out and the hue ring are drawn on the badge inside it, which
    has the badge's own outline to follow. */
@@ -36,15 +44,15 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 .crewlet-presence-stack .crewlet-presence-stack__badge {
-  box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
+  box-shadow: 0 0 0 var(--crewlet-presence-stack-cutout) var(--crewlet-avatar-stack-ground);
 }
 
 /* The hue ring sits outside the cut-out, so it reads as a ring round the
    badge rather than a stroke on it. */
 .crewlet-presence-stack .crewlet-presence-stack__badge--present {
   box-shadow:
-    0 0 0 2px var(--crewlet-avatar-stack-ground),
-    0 0 0 4px var(--crewlet-presence-hue);
+    0 0 0 var(--crewlet-presence-stack-cutout) var(--crewlet-avatar-stack-ground),
+    0 0 0 var(--crewlet-presence-stack-reach) var(--crewlet-presence-hue);
 }
 
 .crewlet-presence-stack .crewlet-presence-stack__badge--idle {

package/dist/PresenterView/PresenterView.d.ts

@@ -2,6 +2,9 @@ import { type ReactNode } from 'react';
 export interface PresenterViewLabels {
     current: (position: number, total: number, title: string) => string;
     next: (title: string) => string;
+    /** The captions over the room's slide and the next one. */
+    onScreen: string;
+    upNext: string;
     end: string;
     notes: string;
     noNotes: string;

package/dist/PresenterView/index.js

@@ -1,6 +1,8 @@
-export { PresenterView, formatStopwatch } from '../chunk-MBNFJSZS.js';
-import '../chunk-E6CR5PEV.js';
-import '../chunk-HMPFGIWM.js';
+export { PresenterView, formatStopwatch } from '../chunk-THROPJZC.js';
+import '../chunk-6VOS2GMB.js';
+import '../chunk-LV4APO72.js';
+import '../chunk-RK4XPHVG.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/PresenterView-T3EXIQ5S.css

@@ -0,0 +1,147 @@
+/*
+ * PresenterView: the presenter's own screen beside the room's.
+ *
+ * The room's slide is as large as fits the column with its controls right
+ * under it, drawn as the slide itself rather than letterboxed in a well. The
+ * notes take the space a glance needs: a large, readable size and their own
+ * scroll, so a long note never pushes the next slide or the timer away.
+ */
+
+.crewlet-presenter {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
+  gap: var(--spacing-5);
+  height: 100%;
+  min-height: 0;
+  padding: var(--spacing-4);
+  box-sizing: border-box;
+  background: var(--color-surface-background);
+  color: var(--color-text-primary);
+}
+
+/* THE SLIDE AS LARGE AS FITS, measured against the room under its caption
+   (a size container), less the controls under it: the largest box of the
+   slide's shape that fits both ways, so nothing is letterboxed and the
+   controls sit on the slide's foot wherever that is. */
+.crewlet-presenter__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+}
+
+.crewlet-presenter__screen {
+  container-type: size;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: 0;
+}
+
+.crewlet-presenter__screen > .crewlet-slide-stage {
+  flex: none;
+  width: min(
+    100cqw,
+    (100cqh - var(--size-control-sm) - var(--spacing-3)) * var(--crewlet-presenter-ratio, 1.7778)
+  );
+  border-radius: var(--radius-md);
+}
+
+.crewlet-presenter__side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-height: 0;
+}
+
+.crewlet-presenter__next,
+.crewlet-presenter__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-height: 0;
+  margin: 0;
+}
+
+.crewlet-presenter__caption {
+  margin: 0;
+}
+
+/* THE END HOLDS THE NEXT SLIDE'S PLACE at its shape, so the timer and the
+   notes under it stay where they were on the last slide. */
+.crewlet-presenter__end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: var(--crewlet-presenter-ratio, 1.7778);
+  margin: 0;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.crewlet-presenter__timer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-presenter__elapsed {
+  margin-right: auto;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xl);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-presenter__notes {
+  flex: 1;
+}
+
+.crewlet-presenter__notes-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  font-size: var(--font-size-lg);
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.crewlet-presenter__notes-body p {
+  margin: 0;
+}
+
+.crewlet-presenter__empty {
+  color: var(--color-text-tertiary);
+}
+
+/* ONE COLUMN on a narrow screen: the page scrolls, so the slide is as wide as
+   the column and the notes as tall as they are. */
+@media (max-width: 48rem) {
+  .crewlet-presenter {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto;
+  }
+
+  .crewlet-presenter__screen {
+    container-type: normal;
+    flex: none;
+  }
+
+  .crewlet-presenter__screen > .crewlet-slide-stage {
+    width: 100%;
+  }
+
+  .crewlet-presenter__notes-body {
+    flex: none;
+    overflow: visible;
+  }
+}

package/dist/Principal/index.js

@@ -1,4 +1,4 @@
-export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-4KP4RC3O.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-CI3VPIJN.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/index.js

@@ -1,10 +1,10 @@
-export { PrincipalPicker } from '../chunk-ZITJKF6Z.js';
+export { PrincipalPicker } from '../chunk-AYB6AYNH.js';
 import '../chunk-QS4ZGTEU.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-6QFAK2WV.js';
-import '../chunk-4KP4RC3O.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-CI3VPIJN.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/RichEditor/index.js

@@ -1,8 +1,8 @@
-export { RichEditor, preloadRichEditor } from '../chunk-V5IGUXMZ.js';
-export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-A4E5YLXO.js';
-import '../chunk-W5J7R5EB.js';
-import '../chunk-SKOYC2CF.js';
-import '../chunk-SVSCLHHI.js';
+export { RichEditor, preloadRichEditor } from '../chunk-E4NNGC6X.js';
+export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-4B6LSFDS.js';
+import '../chunk-KK5OYNAF.js';
+import '../chunk-SZZRIHGT.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RichEditor/schema.d.ts

@@ -20,4 +20,4 @@
 import { Schema } from 'prosemirror-model';
 /** A heading's element: a body's `#` is an `h2`, because the page's title is its `h1`. */
 export declare function headingTag(level: number): string;
-export declare const schema: Schema<"blockquote" | "table" | "image" | "text" | "heading" | "doc" | "paragraph" | "callout" | "code_block" | "horizontal_rule" | "bullet_list" | "ordered_list" | "list_item" | "table_row" | "table_header" | "table_cell" | "hard_break", "code" | "em" | "link" | "strong" | "strike">;
+export declare const schema: Schema<"heading" | "table" | "text" | "blockquote" | "image" | "doc" | "paragraph" | "callout" | "code_block" | "horizontal_rule" | "bullet_list" | "ordered_list" | "list_item" | "table_row" | "table_header" | "table_cell" | "hard_break", "link" | "strike" | "code" | "em" | "strong">;

package/dist/RichEditorMarkdown/index.js

@@ -1,3 +1,3 @@
-export { canonicalMarkdown, roundTripMarkdown } from '../chunk-IDBHX5SR.js';
-import '../chunk-YFW4MTK4.js';
-import '../chunk-SKOYC2CF.js';
+export { canonicalMarkdown, roundTripMarkdown } from '../chunk-TRQCHF2F.js';
+import '../chunk-C7DKX453.js';
+import '../chunk-KK5OYNAF.js';

package/dist/SandboxedFrame/SandboxedFrame.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { type FrameBridgeRange, type FrameHello, type FrameOriginMode, type FrameTheme } from '../FrameProtocol/index.js';
 /**
  * Where the frame is in its life.
@@ -66,8 +66,17 @@ export interface SandboxedFrameLabels {
     outdatedDetail: string;
     reload: string;
 }
-/** How long a document has to say hello after the frame mounts, or after a load, before it is torn down. */
+/** How long a document has to say hello after the frame mounts before it is torn down. */
 export declare const FRAME_HELLO_TIMEOUT_MS = 10000;
+/**
+ * How long a document that has LOADED has to say hello. The runtime says it
+ * as the page's first script runs, long before the load event, so a load with
+ * no hello is an answer the engine served without one (an expired ticket, a
+ * page that is not there, a node that is starting) and is said within a beat
+ * rather than after the reader has watched a placeholder for ten seconds. The
+ * beat covers a hello still crossing the process boundary behind its load.
+ */
+export declare const FRAME_LOAD_GRACE_MS = 1500;
 type FrameDivAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onMessage' | 'children' | 'role' | 'aria-label'>;
 export interface SandboxedFrameProps extends FrameDivAttributes {
     /** The engine's ticketed frame URL (`Frame.frame_url`). The host appends the fragment. */
@@ -113,6 +122,8 @@ export interface SandboxedFrameProps extends FrameDivAttributes {
     /** Offered on every end state as the Reload action. Mint a fresh frame, then re-render with it. */
     onReload?: (() => void) | undefined;
     helloTimeoutMs?: number | undefined;
+    /** How long a loaded document has to say hello; the hello timeout where that is shorter. */
+    loadGraceMs?: number | undefined;
     labels?: Partial<SandboxedFrameLabels> | undefined;
 }
 /**
@@ -139,4 +150,35 @@ export interface SandboxedFrameProps extends FrameDivAttributes {
  * again, as if the component had been remounted.
  */
 export declare function SandboxedFrame(props: SandboxedFrameProps): import("react").JSX.Element;
+export interface SandboxedFramePlaceholderProps extends FrameDivAttributes {
+    /** The artifact's title. It names the region, as the frame that replaces it will. */
+    title: string;
+    /** The loading line said to a screen reader. `Loading <title>` when absent. */
+    label?: string | undefined;
+}
+/**
+ * The frame's loading state, for a host that has no frame to mount yet: the
+ * frame's ticket is still being minted, say. It is the very placeholder the
+ * frame shows until its document says hello, in the same box, so the reader
+ * sees one loading state from the first paint to the document, never a
+ * placeholder that jumps when the frame takes over from it.
+ */
+export declare function SandboxedFramePlaceholder({ title, label, className, ...rest }: SandboxedFramePlaceholderProps): import("react").JSX.Element;
+export interface SandboxedFrameNoticeProps extends FrameDivAttributes {
+    /** The artifact's title. It names the region, as the frame would have. */
+    title: string;
+    /** What went wrong, as a short heading with no closing full stop. */
+    heading: string;
+    /** What the reader can do about it. */
+    children: ReactNode;
+    /** One control at the callout's trailing edge, such as Try again. */
+    action?: ReactNode;
+}
+/**
+ * A frame that could not be opened at all, for a host that has no frame to
+ * mount: the engine refused its ticket, say. It is drawn exactly as the
+ * frame's own end states are, in the same box, so a reader meets one way of
+ * saying "this page is not here" whichever side found the problem.
+ */
+export declare function SandboxedFrameNotice({ title, heading, action, children, className, ...rest }: SandboxedFrameNoticeProps): import("react").JSX.Element;
 export {};

package/dist/SandboxedFrame/index.d.ts

@@ -1,3 +1,3 @@
 import './SandboxedFrame.css';
-export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from './SandboxedFrame.js';
-export type { FrameRefusal, SandboxedFrameLabels, SandboxedFrameProps, SandboxedFrameState } from './SandboxedFrame.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from './SandboxedFrame.js';
+export type { FrameRefusal, SandboxedFrameLabels, SandboxedFrameNoticeProps, SandboxedFramePlaceholderProps, SandboxedFrameProps, SandboxedFrameState, } from './SandboxedFrame.js';

package/dist/SandboxedFrame/index.js

@@ -1,8 +1,8 @@
-export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from '../chunk-VYDFB6PJ.js';
-import '../chunk-W5J7R5EB.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-356JNSER.js';
 import '../chunk-F6V2PTN6.js';
 import '../chunk-ZXXDZJQN.js';
-import '../chunk-SVSCLHHI.js';
+import '../chunk-SZZRIHGT.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SandboxedFrame-P5NASXB7.css

@@ -0,0 +1,72 @@
+/*
+ * The frame fills the box it is given. The page around it does not scroll
+ * round the artifact: the artifact scrolls inside its own document, which is
+ * what a viewer body that holds one wants.
+ */
+
+.crewlet-sandboxed-frame {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+}
+
+.crewlet-sandboxed-frame__frame {
+  flex: 1 1 auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+}
+
+/* THE PLACEHOLDER AND THE END STATES SIT AT ONE INSET, the frame's margin,
+   so a reader who watches a page load and then fail sees the callout take
+   the placeholder's place rather than jump beside it. */
+
+/* Kept out of sight while it starts, so a document that has not painted in
+   the reader's palette yet is never what they see. It still loads. */
+.crewlet-sandboxed-frame[data-state='loading'] .crewlet-sandboxed-frame__frame {
+  visibility: hidden;
+}
+
+.crewlet-sandboxed-frame__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  padding: var(--spacing-4);
+}
+
+.crewlet-sandboxed-frame__end {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: var(--spacing-4);
+}
+
+/* THE REGION TAKES FOCUS WHEN THE FRAME HANDS IT BACK, and a reader who just
+   left a page by keyboard needs to see where they landed. The document's own
+   ring sits outside the box, where a frame filling a clipping card loses it,
+   so the region draws its ring inside its edge, on a layer above the frame. */
+.crewlet-sandboxed-frame:focus-visible {
+  /* Transparent rather than none: forced-colors mode paints a transparent
+     outline in the system ink, so the region's edge is never left bare. */
+  outline: 2px solid transparent;
+}
+
+.crewlet-sandboxed-frame:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  /* An outline, never a shadow: forced-colors mode keeps only outlines. */
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  pointer-events: none;
+}

package/dist/Section/index.js

@@ -1,3 +1,3 @@
-export { Section } from '../chunk-FAQGGX2Z.js';
+export { Section } from '../chunk-3TFDQLW3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Section-QR3ILQVK.css → Section-O5AHGSOG.css}

@@ -56,7 +56,11 @@
 .crewlet-section__title {
   margin: 0;
   font-family: var(--font-family-display);
-  font-size: var(--font-size-lg);
+  /* THE REGISTER IS THE CONTAINER'S TO SET. A screen's band heads at the large
+     step; a side panel, whose own title is the small step, sets
+     `--crewlet-section-title-size` so the sections inside it never outrank the
+     heading they sit under. */
+  font-size: var(--crewlet-section-title-size, var(--font-size-lg));
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-normal);
   letter-spacing: var(--font-letter-spacing-tight);
@@ -115,15 +119,34 @@
     padding-block: var(--spacing-10);
   }
 
-  /*
-   * Narrow: the sentence moves under the heading rather than competing with it
-   * for a line that has room for neither.
-   */
   .crewlet-section__header {
     flex-wrap: wrap;
+    row-gap: var(--spacing-1);
   }
 
   .crewlet-section__description {
+    order: 1;
+    white-space: normal;
+    flex-basis: 100%;
+  }
+}
+
+/*
+ * NARROW: the sentence moves under the heading rather than competing with it
+ * for a line that has room for neither, and the actions stay on the heading's
+ * line. Measured on the column the section sits in where it sits in a size
+ * container (a side panel, a screen's content column), since a panel beside a
+ * wide window is as narrow as a phone; the window's width above is the answer
+ * where there is no container to ask.
+ */
+@container (width < 36rem) {
+  .crewlet-section__header {
+    flex-wrap: wrap;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-section__description {
+    order: 1;
     white-space: normal;
     flex-basis: 100%;
   }

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
-import '../chunk-FQCLKD7U.js';
-export { SegmentedControl } from '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-WKEPORNM.js';
+export { SegmentedControl } from '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Select/Select.d.ts

@@ -12,6 +12,8 @@ export type SelectAlign = 'left' | 'right';
  * one question per line, which is not what a filter bar is.
  */
 export type SelectWidth = 'full' | 'auto';
+/** How much chrome a picker draws. See [SelectProps.appearance]. */
+export type SelectAppearance = 'field' | 'quiet';
 /**
  * Which control this is.
  *
@@ -124,6 +126,14 @@ export interface SelectProps extends NativePassthrough {
     active?: boolean;
     /** Marks the value as refused. Sets `aria-invalid`. */
     error?: boolean;
+    /**
+     * `field` (the default) is a bordered picker, a form's. `quiet` draws no
+     * boundary until the pointer is over it, for a toolbar whose pickers
+     * arrange content that is the page's point (a gallery's type and order): a
+     * row of bordered boxes above a grid of cards read as a form to fill in.
+     * A quiet filter that is on takes the accent's soft fill and ink.
+     */
+    appearance?: SelectAppearance;
     ariaLabel?: string;
     searchable?: boolean;
     searchPlaceholder?: string;

package/dist/Select/index.d.ts

@@ -1,3 +1,3 @@
 import './Select.css';
 export { Select } from './Select.js';
-export type { SelectAlign, SelectMode, SelectOption, SelectProps, SelectSize, SelectValue, } from './Select.js';
+export type { SelectAlign, SelectAppearance, SelectMode, SelectOption, SelectProps, SelectSize, SelectValue, } from './Select.js';

package/dist/Select/index.js

@@ -1,5 +1,5 @@
-export { Select } from '../chunk-FC4YTTFJ.js';
+export { Select } from '../chunk-BQ7AKL2N.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Select-2P7AWUE4.css → Select-A54YS5EP.css}

@@ -97,6 +97,35 @@
   border-color: var(--color-feedback-danger);
 }
 
+/*
+ * QUIET: no boundary and no fill at rest, the hover overlay under the
+ * pointer, and the ring on focus as every field draws it. It sizes to its
+ * answer with no floor, since a quiet picker in a toolbar reads as its words.
+ * A quiet filter that is on takes the accent's soft fill under its accent ink,
+ * so "this narrows the list" still shows without a box around it.
+ */
+.crewlet-select--quiet {
+  --crewlet-select-auto-min-width: 0px;
+
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.crewlet-select--quiet:hover {
+  border-color: transparent;
+  background-color: var(--color-surface-hover);
+}
+
+.crewlet-select--quiet.is-open {
+  background-color: var(--color-surface-hover);
+}
+
+.crewlet-select--quiet.is-active,
+.crewlet-select--quiet.is-active:hover {
+  border-color: transparent;
+  background-color: var(--color-brand-accent-soft);
+}
+
 /* A refused picker keeps its colour while the reader is in it: the ring
    covers the boundary, so a focus-coloured one would paint out the refusal.
    See Input.css. */

package/dist/ShareDialog/ShareDialog.d.ts

@@ -26,6 +26,14 @@ export interface ShareAudienceRow {
     removable?: boolean | undefined;
     /** A line under the row. An agent's row says what the agent may do with its role when this is left out. */
     note?: string | undefined;
+    /**
+     * Why this share reaches nobody, in words ("token:maya is a sign-in, not a
+     * seat. Remove it and share with their seat."). A stored share the engine
+     * can no longer honour is LISTED, not hidden, so its owner sees it and takes
+     * it away: the row says so in the warning ink in place of its note, reads
+     * `labels.noAccess` in place of a role, and offers Remove as its one action.
+     */
+    invalid?: string | undefined;
 }
 export interface ShareDialogLabels {
     title: (artifact: string) => string;
@@ -36,6 +44,8 @@ export interface ShareDialogLabels {
     roleDescriptions: Record<ArtifactRole, string>;
     roleFor: (name: string) => string;
     remove: (name: string) => string;
+    /** What an invalid row ([ShareAudienceRow.invalid]) reads in place of its role. */
+    noAccess: string;
     saving: string;
     /** Why a row's controls wait while its change is in flight. */
     busy: string;

package/dist/ShareDialog/index.js

@@ -1,17 +1,17 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-JQLTG4KH.js';
-import '../chunk-FC4YTTFJ.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-CCLNGVCM.js';
+import '../chunk-BQ7AKL2N.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-I3KKZ2O3.js';
+import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-SVSCLHHI.js';
-import '../chunk-4KP4RC3O.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-SZZRIHGT.js';
+import '../chunk-CI3VPIJN.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-IG75YMUN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-RTPQDNW3.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{ShareDialog-YZ4F37MW.css → ShareDialog-4QDCBWMH.css}

@@ -16,6 +16,10 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
+  /* A BLOCK'S WORTH OF ROOM ABOVE EACH HEADING, over the body's own gap: at
+     the gap alone "Who has access" sat as close under the add field as the
+     role select beside it, and read as that field's label. */
+  padding-block-start: var(--spacing-2);
 }
 
 .crewlet-share-dialog__heading {
@@ -87,11 +91,19 @@
 }
 
 .crewlet-share-dialog__note,
+.crewlet-share-dialog__invalid,
 .crewlet-share-dialog__refusal {
   grid-column: 2 / -1;
   font-size: var(--font-size-xs);
 }
 
+/* A SHARE THAT REACHES NOBODY says why in the warning ink, the state a person
+   is asked to act on, and its "No access" stands in the quiet ink a role
+   would. */
+.crewlet-share-dialog__invalid {
+  color: var(--color-feedback-warning-ink);
+}
+
 .crewlet-share-dialog__note {
   color: var(--color-text-tertiary);
 }