@crewlethq/ui 0.83.0 → 0.84.1

package/dist/CatalogTile/CatalogTile.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type HeadingLevel } from '../utils/headingLevel.js';
+import type { Tone } from '../utils/tone.js';
 export type CatalogTileElement = 'article' | 'li' | 'div';
 /**
  * How much room a tile takes. `comfortable` (the default) is the catalogue's
@@ -10,6 +11,23 @@ export type CatalogTileElement = 'article' | 'li' | 'div';
  * already in use rather than offers a choice.
  */
 export type CatalogTileDensity = 'comfortable' | 'compact';
+/**
+ * An entry's state, as data: the tile draws it, the same way on every tile.
+ *
+ * ONE PRESENTATION, NOT A SLOT. Taken as any node, a service's In use came as
+ * a soft pill and an app's Connected as a dot and a word, so one row of tiles
+ * drew its states two ways and at two heights. A tone and a word cannot be
+ * drawn two ways.
+ */
+export interface CatalogTileStatus {
+    /**
+     * What the state is: `success` for in use or connected, `warning` for
+     * something owed, `danger` for broken, `neutral` for coming soon.
+     */
+    tone: Tone;
+    /** The state in a word or two: In use, Connected, Needs attention. */
+    label: string;
+}
 export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** The element the tile is: an `li` in a `TileGrid as="ul"`. */
     as?: CatalogTileElement | undefined;
@@ -24,12 +42,12 @@ export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
     /** Overrides the level the name is rendered at. */
     headingLevel?: HeadingLevel | undefined;
     /**
-     * The entry's state, as a `Tag`, ONLY when the state is worth reading: On,
-     * Connected, Needs attention, Coming soon. An entry in its resting state
-     * (available, not set up) carries none, and its name stands centred beside
-     * its mark; a pill under every name is a column a reader learns to skip.
+     * The entry's state, drawn as its tone's dot and its word, ONLY when the
+     * state is worth reading: In use, Connected, Needs attention, Coming soon.
+     * An entry in its resting state (available, not set up) carries none; a
+     * state under every name is a column a reader learns to skip.
      */
-    status?: ReactNode;
+    status?: CatalogTileStatus | undefined;
     /** One sentence: what the entry is for, or what is owed when something is. */
     description?: ReactNode;
     /** A quiet fact at the foot (`2 agents · 14 deliveries`). */

package/dist/CatalogTile/index.d.ts

@@ -1,3 +1,3 @@
 import './CatalogTile.css';
 export { CatalogTile } from './CatalogTile.js';
-export type { CatalogTileDensity, CatalogTileElement, CatalogTileProps } from './CatalogTile.js';
+export type { CatalogTileDensity, CatalogTileElement, CatalogTileProps, CatalogTileStatus } from './CatalogTile.js';

package/dist/CatalogTile/index.js

@@ -1,3 +1,4 @@
-export { CatalogTile } from '../chunk-QE4OIE3Q.js';
+export { CatalogTile } from '../chunk-DJIWCW5Z.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CatalogTile-6VF36JWA.css → CatalogTile-TMOSGSV3.css}

@@ -79,9 +79,10 @@
   overflow-wrap: anywhere;
 }
 
-/* A state in words (a StatusDot's label) at a Tag's caption step, so a row
-   reads the same whichever one a tile carries. It inherited the page's size,
-   and on a 16px page "Connected" stood taller than the name before it. */
+/* THE STATE, the tone's dot and its word, at the caption step the fact
+   beside it takes, so a compact tile's line reads name, state, fact at one
+   height. It inherited the page's size, and on a 16px page "Connected" stood
+   taller than the name before it. */
 .crewlet-catalog-tile__status {
   display: inline-flex;
   font-size: var(--font-size-xs);

package/dist/CommentThread/index.js

@@ -2,7 +2,7 @@ export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IAP7APOX.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-I4PBFJGX.js';
 import '../chunk-EBVZHVPD.js';

package/dist/CompactNav/CompactNav.d.ts

@@ -24,7 +24,7 @@
  */
 import { type MouseEventHandler, type ReactNode } from 'react';
 import { type PlacementRect } from '../Layer/index.js';
-import type { NavFigure, NavLinkProps } from '../SidebarNav/index.js';
+import type { NavBadge, NavFigure, NavLinkProps } from '../SidebarNav/index.js';
 export interface CompactNavProps {
     /** Names the navigation region, as `SidebarNav`'s label does. */
     label: string;
@@ -45,9 +45,11 @@ interface CompactPlace {
     current?: boolean | undefined;
     /**
      * How many things here are waiting on the reader: the accent figure on the
-     * tile's corner, as `SidebarNav.Item`'s badge.
+     * tile's corner, as `SidebarNav.Item`'s badge. `tone: 'quiet'` draws it as
+     * the quiet figure, as the full rail's quiet badge, and keeps it out of a
+     * group's sum.
      */
-    badge?: NavFigure | undefined;
+    badge?: NavBadge | undefined;
     /** How many of something the place holds: the quiet figure, as `SidebarNav.Item`'s count. */
     count?: NavFigure | undefined;
     /**
@@ -123,7 +125,8 @@ export interface CompactNavGroupProps {
  * badge's own value with a `+`, since there is more than it says.
  *
  * The quiet counts are not carried: a count says how much a place holds, and
- * a sum of how much six places hold is a figure about nothing.
+ * a sum of how much six places hold is a figure about nothing. Nor is a quiet
+ * badge: the group's figure is the accent, and only what calls is added to it.
  */
 export declare function groupBadge(links: readonly Pick<CompactNavLink, 'badge'>[]): (number | string) | undefined;
 /**
@@ -157,8 +160,9 @@ lift?: number): {
  * whatever came next in the document.
  *
  * EVERY PLACE IS A REAL LINK, so a modified press opens a tab as it does in
- * the full rail; choosing one closes the flyout and, where the keyboard chose
- * it, hands focus back to the tile.
+ * the full rail; choosing one closes the flyout, and focus follows the
+ * navigation: where the page it opened took focus it stays there, and where
+ * it is still in the flyout it goes back to the tile, by a press as by a key.
  *
  * WHAT OPENED IT DECIDES WHAT CLOSES IT. Opened by the pointer resting on the
  * tile, it closes when the pointer leaves both; opened by a press or the keys,

package/dist/CompactNav/index.js

@@ -1,4 +1,4 @@
-export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from '../chunk-ICE3D63E.js';
+export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout } from '../chunk-QWRAWKB2.js';
 import '../chunk-TEV5REGB.js';
 import '../chunk-HTS5RJ7S.js';
 import '../chunk-OMV5W53A.js';

package/dist/DeepWorkCard/index.js

@@ -1,7 +1,7 @@
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-CV2LU2T2.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-IYI6HWKN.js';
 import '../chunk-RJWO2PC5.js';
-import '../chunk-ZWCK4N4L.js';
 import '../chunk-RQFRRPV6.js';
+import '../chunk-ZWCK4N4L.js';
 import '../chunk-FLW5U7YS.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-U2IQNDDR.js';

package/dist/DirectoryList/index.js

@@ -1,3 +1,3 @@
-export { DirectoryList } from '../chunk-SRDNGGZE.js';
+export { DirectoryList } from '../chunk-RKIJAXQA.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DirectoryList-XZOWYOA3.css → DirectoryList-IXQIMNFS.css}

@@ -17,7 +17,12 @@
   font-family: var(--font-family-sans);
 }
 
-/* The groups take the room and scroll on their own, so the foot stays put. */
+/* The groups take the room and scroll on their own, so the foot stays put.
+
+   THEIR INSET IS INSIDE THE SCROLLER. The gutter is reserved whether or not
+   they scroll, and the lines end a step before it: a line's state pill stood
+   against the scrollbar, and moved by its width when the list grew long
+   enough to scroll. */
 .crewlet-directory__groups {
   display: flex;
   flex: 1 1 auto;
@@ -26,7 +31,9 @@
      under it rather than a band between two runs of them. */
   gap: var(--spacing-3);
   min-height: 0;
+  padding-right: var(--spacing-2);
   overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .crewlet-directory__group {

package/dist/EntityChip/index.js

@@ -1,4 +1,4 @@
 export { EntityChip } from '../chunk-65RFU7LF.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ImageUpload/index.js

@@ -1,5 +1,5 @@
 export { ImageUpload } from '../chunk-K6Y6CDEZ.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-ODEQTPFM.js';

package/dist/InboxList/InboxList.d.ts

@@ -48,13 +48,27 @@ export interface InboxGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
     /** Whether a collapsible group starts open, when the group holds it. */
     defaultOpen?: boolean | undefined;
     onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * The latest row to arrive in the group, as a token (the row's key): each
+     * new value plays a brief wash of the accent over the group's label and
+     * count, so a row that lands in a closed group (Answered) is seen to land.
+     * Pass it only for a row that has just arrived, never on a first draw.
+     */
+    arrived?: string | number | undefined;
 }
+/**
+ * The motion a leaving row waits for: its height closing, a transition of the
+ * row's own `grid-template-rows` (InboxList.css). A suite fakes exactly this.
+ */
+export declare const INBOX_ROW_LEAVE: {
+    readonly transitions: readonly ["grid-template-rows"];
+};
 /**
  * A labelled run of rows. The label is a heading set in the micro-label
  * register, so a reader navigating by heading lands on each group and a
  * reader scanning sees where one ends.
  */
-export declare function InboxGroup({ label, hideLabel, headingLevel, count, collapsible, open: controlledOpen, defaultOpen, onOpenChange, className, children, ...rest }: InboxGroupProps): import("react").JSX.Element;
+export declare function InboxGroup({ label, hideLabel, headingLevel, count, collapsible, open: controlledOpen, defaultOpen, onOpenChange, arrived, className, children, ...rest }: InboxGroupProps): import("react").JSX.Element;
 export type InboxRowTone = 'default' | 'danger';
 export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'onClick' | 'title'> {
     /** Who the row is from: a seat's or a person's name. */
@@ -114,6 +128,18 @@ export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
      * open the link in a tab.
      */
     onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    /**
+     * On its way out: the row stays drawn, inert, while its height closes, so
+     * the rows under it slide up rather than jump, and is drawn no more once it
+     * has closed. An `InboxGroup` does this itself for a keyed row that leaves
+     * its children, and a wrapper the host draws its rows through forwards
+     * this and `onLeft` to its `InboxRow`; pass it for a list of your own.
+     */
+    leaving?: boolean | undefined;
+    /** Runs once a leaving row has closed and is drawn no more, once for each leave. */
+    onLeft?: (() => void) | undefined;
+    /** Just arrived: a brief wash of the accent that fades back to the row's own ground. */
+    arrived?: boolean | undefined;
 }
 /**
  * One row: WHO, then WHAT in up to three lines, then the task it is about.
@@ -137,7 +163,7 @@ export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
  * the words take up to three lines before they stop, so a row says what it is
  * rather than its first few words.
  */
-export declare function InboxRow({ title, qualifier, qualifierTone, meta, leading, excerpt, aside, selected, unread, unreadLabel, actionable, done, doneLabel, status, outcome, outcomeIcon, outcomeTone, href, onClick, className, children, ...rest }: InboxRowProps): import("react").JSX.Element;
+export declare function InboxRow({ title, qualifier, qualifierTone, meta, leading, excerpt, aside, selected, unread, unreadLabel, actionable, done, doneLabel, status, outcome, outcomeIcon, outcomeTone, href, onClick, leaving, onLeft, arrived, className, children, ...rest }: InboxRowProps): import("react").JSX.Element | null;
 export type InboxMoreProps = HTMLAttributes<HTMLDivElement>;
 /**
  * The end of the list: the quiet toggles that open what is not in it by

package/dist/InboxList/index.d.ts

@@ -1,3 +1,3 @@
 import './InboxList.css';
-export { InboxList, InboxGroup, InboxRow, InboxMore, InboxToggle } from './InboxList.js';
+export { InboxList, InboxGroup, InboxRow, InboxMore, InboxToggle, INBOX_ROW_LEAVE } from './InboxList.js';
 export type { InboxListProps, InboxGroupProps, InboxRowProps, InboxRowTone, InboxMoreProps, InboxToggleProps, } from './InboxList.js';

package/dist/InboxList/index.js

@@ -1,5 +1,10 @@
-export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-QPHD4UUG.js';
+export { INBOX_ROW_LEAVE, InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-F6ZUM66S.js';
 import '../chunk-RK4XPHVG.js';
+import '../chunk-6C7GQOBV.js';
+import '../chunk-PCAT2EFB.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{InboxList-OFGSX5IH.css → InboxList-X5Q5WWAI.css}

@@ -26,6 +26,9 @@
 
 /* The heading's own line box is the label's, so the label sits where it is drawn. */
 .crewlet-inbox-list__label {
+  /* The arrival's wash stands behind the label's words, inside it. */
+  position: relative;
+  isolation: isolate;
   margin: 0;
   padding: var(--spacing-3) var(--spacing-2) var(--spacing-1);
   font: inherit;
@@ -33,6 +36,32 @@
   line-height: var(--font-line-height-snug);
 }
 
+/*
+ * A ROW ARRIVED: a wash of the accent that fades back to the ground, over the
+ * row itself, or over a group's label and count where the row landed in a
+ * closed group. The row's keyframes name no last step, so the wash returns
+ * to whatever the row draws of its own (hover, selected).
+ */
+.crewlet-inbox-list__arrival {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: var(--radius-xs);
+  pointer-events: none;
+  animation: crewlet-inbox-arrive calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out) both;
+}
+
+.crewlet-inbox-row--arrived {
+  animation: crewlet-inbox-arrive calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out);
+}
+
+@keyframes crewlet-inbox-arrive {
+  0%,
+  40% {
+    background: var(--color-brand-accent-soft-strong);
+  }
+}
+
 /* The count after a label, in the quiet ink and the label's own register. */
 .crewlet-inbox-list__count {
   margin-inline-start: var(--spacing-1);
@@ -107,12 +136,38 @@
  * a selected row takes no hover on top of it: both are a background on the
  * same element, and a composite of the two is a colour nothing has measured.
  */
+/* ONE TRACK, so a leaving row can close its height (below). */
 .crewlet-inbox-row {
+  display: grid;
+  grid-template-rows: 1fr;
   min-width: 0;
   border-radius: var(--radius-md);
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+.crewlet-inbox-row__body {
+  min-width: 0;
+  min-height: 0;
+}
+
+/*
+ * A ROW LEAVING closes its one track to nothing and fades, on the slow step
+ * with the emphasized curve, the motion a column opens and shuts by, so the
+ * rows under it slide up into its place. The shell's presence waits on the
+ * track's transition (`INBOX_ROW_LEAVE`), and the row is inert all the while.
+ */
+.crewlet-inbox-row--leaving {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-easing-emphasized),
+    opacity var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+.crewlet-inbox-row--leaving .crewlet-inbox-row__body {
+  overflow: hidden;
+}
+
 .crewlet-inbox-row:hover {
   background: var(--color-surface-hover);
 }
@@ -349,7 +404,7 @@
 }
 
 /* A row with no leading slot: the words start at the control's own pad, and so does the task. */
-.crewlet-inbox-row:not(:has(.crewlet-inbox-row__leading)) > .crewlet-inbox-row__aside {
+.crewlet-inbox-row:not(:has(.crewlet-inbox-row__leading)) .crewlet-inbox-row__aside {
   padding-inline-start: var(--spacing-2);
 }
 
@@ -385,10 +440,16 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .crewlet-inbox-row {
+  .crewlet-inbox-row,
+  .crewlet-inbox-row--leaving {
     transition: none;
   }
 
+  .crewlet-inbox-row--arrived,
+  .crewlet-inbox-list__arrival {
+    animation: none;
+  }
+
   .crewlet-inbox-list__toggle,
   .crewlet-inbox-list__chevron {
     transition: none;

package/dist/ListDetail/ListDetail.d.ts

@@ -21,6 +21,12 @@ export interface ListDetailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * column. The list column is `--crewlet-list-detail-list` wide (17rem by
  * default), with a hairline between the two.
  *
+ * THE DETAIL'S SCROLLBAR IS ON THE SHEET'S EDGE. Placed directly in a fill
+ * screen's column, it reaches past the column's end pad, and the detail
+ * keeps the screen's side inset inside itself, with its scrollbar's gutter
+ * always reserved: its content ends under the bar's last control, and a
+ * trailing control never touches the scrollbar.
+ *
  * BELOW 640px OF ITS OWN WIDTH IT IS ONE PANE, the one `showing` names: the
  * list and a reading detail do not both fit, whether the window is a phone or
  * an aside beside the screen has taken the room. The application gives its

package/dist/ListDetail/index.js

@@ -1,2 +1,2 @@
-export { ListDetail } from '../chunk-YBC2CYPD.js';
+export { ListDetail } from '../chunk-O4VTQMEF.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ListDetail-N3L7PB46.css → ListDetail-JGESKTR7.css}

@@ -10,6 +10,17 @@
  * drew the detail 130px wide beside a 17rem list. The phone rule below is the
  * one decision that stays the window's: on a phone the page scrolls as a
  * whole rather than each pane on its own.
+ *
+ * ON A SCREEN THAT FILLS THE WINDOW, THE PANE THAT SCROLLS IS ITS OUTERMOST
+ * BOX, and its inset is padding inside it. Standing directly in the fill
+ * column, the ListDetail reaches past the column's end pad to the sheet's
+ * edge (below), so the scrollbar is the sheet's last pixel; the detail then
+ * reserves its scrollbar's gutter whether or not it scrolls, and keeps the
+ * screen's side inset between its content and that gutter, so a trailing
+ * control (a header's Disconnect, a tile's Open) never touches the scrollbar,
+ * does not move when the detail grows long enough to scroll, and ends under
+ * the bar's last control. Anywhere else (a scrolling or a flush screen, or
+ * outside a shell) it is as wide as its box, with nothing reserved.
  */
 
 /* THE HAIRLINE STANDS MIDWAY between the two panes: the list's inset before it
@@ -17,6 +28,9 @@
    the list than to the detail it divides it from; the two still add to 64. */
 .crewlet-list-detail {
   --crewlet-list-detail-gutter: var(--spacing-7);
+  /* The inset at a scrolling pane's end: the screen's own side inset in a
+     shell, so the page's two edges match. */
+  --crewlet-list-detail-end: var(--crewlet-app-shell-inset, var(--spacing-5));
 
   container: crewlet-list-detail / inline-size;
   display: flex;
@@ -27,6 +41,21 @@
   min-height: 0;
 }
 
+/* STANDING IN A FILL SCREEN'S COLUMN, IT TAKES THE COLUMN'S END PAD BACK: the
+   inset and the scrollbar's width, which the shell publishes for exactly
+   this (`--crewlet-app-shell-bleed-end`, AppShell.css). The detail keeps the
+   same inset inside itself, and reserves its gutter, there and only there. */
+:where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content) > .crewlet-list-detail {
+  margin-right: calc(var(--crewlet-app-shell-bleed-end, 0px) * -1);
+}
+
+:where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content)
+  > .crewlet-list-detail
+  .crewlet-list-detail__detail {
+  padding-right: var(--crewlet-list-detail-end);
+  scrollbar-gutter: stable;
+}
+
 .crewlet-list-detail__panes {
   display: grid;
   flex: 1 1 auto;
@@ -68,6 +97,15 @@
     overflow-y: auto;
   }
 
+  /* The list is the pane that scrolls now, and takes the detail's end where
+     the ListDetail reaches the sheet. */
+  :where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content)
+    > .crewlet-list-detail
+    .crewlet-list-detail__list {
+    padding-right: var(--crewlet-list-detail-end);
+    scrollbar-gutter: stable;
+  }
+
   .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
   .crewlet-list-detail--showing-detail .crewlet-list-detail__list {
     display: none;

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
 export { OrgLabel } from '../chunk-5YXMKZUA.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-NKBKHOMU.js';
 import '../chunk-5YXMKZUA.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -3,7 +3,7 @@ import '../chunk-ZDWAIVWL.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-5YXMKZUA.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-CVKANYHD.js';
 import '../chunk-OMV5W53A.js';

package/dist/PeopleRail/index.js

@@ -2,7 +2,7 @@ export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-QGEDXYLB
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/PresenceStack/index.js

@@ -3,7 +3,7 @@ import '../chunk-CENOOTAV.js';
 import '../chunk-EFX2YC5T.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Principal/index.js

@@ -1,4 +1,4 @@
 export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-HF5L56YQ.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/index.js

@@ -2,7 +2,7 @@ export { PrincipalPicker } from '../chunk-Q6TCUSQA.js';
 import '../chunk-NNZRTR5M.js';
 import '../chunk-YGRTX67J.js';
 import '../chunk-HF5L56YQ.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';

package/dist/ReadingPane/ReadingPane.d.ts

@@ -3,7 +3,23 @@ import { type HeadingLevel } from '../utils/headingLevel.js';
 export interface ReadingPaneProps extends HTMLAttributes<HTMLElement> {
     /** Overrides the level the title is rendered at. */
     headingLevel?: HeadingLevel | undefined;
+    /**
+     * What the pane shows, as a key: the item's id. A new value draws the new
+     * item afresh and plays it in, a short fade and rise on the moderate step
+     * (`READING_PANE_ENTER` on the column; nothing moves under reduced motion),
+     * and moves focus to its title, without scrolling the page, where the reader
+     * was last in the pane (focus came into it, or a press landed in it): the
+     * control they answered with went with the old item. A reader in the list
+     * beside the pane, or nowhere (a live update), keeps their place.
+     */
+    contentKey?: string | number | undefined;
+    /** Where focus goes after a change of `contentKey`, in place of the title. */
+    focusTarget?: (() => HTMLElement | null | undefined) | undefined;
 }
+/** The keyframes a new item plays in by, on the column: the one motion a suite fakes. */
+export declare const READING_PANE_ENTER: {
+    readonly animations: readonly ["crewlet-reading-pane-enter"];
+};
 /**
  * One item read in full, top to bottom, in one column: the line saying who is
  * asking and about what, the question in large type, its context, the
@@ -19,7 +35,7 @@ export interface ReadingPaneProps extends HTMLAttributes<HTMLElement> {
  * The article is named by its title, so a reader moving by landmark hears the
  * question rather than "article".
  */
-export declare function ReadingPane({ headingLevel, className, children, ...rest }: ReadingPaneProps): import("react").JSX.Element;
+export declare function ReadingPane({ headingLevel, contentKey, focusTarget, className, children, ...rest }: ReadingPaneProps): import("react").JSX.Element;
 export declare namespace ReadingPane {
     var Byline: typeof ReadingPaneByline;
     var Title: typeof ReadingPaneTitle;

package/dist/ReadingPane/index.d.ts

@@ -1,3 +1,3 @@
 import './ReadingPane.css';
-export { ReadingPane, ReadingPaneByline, ReadingPaneTitle, ReadingPaneLead, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneOutcome, ReadingPaneSection, } from './ReadingPane.js';
+export { ReadingPane, ReadingPaneByline, ReadingPaneTitle, ReadingPaneLead, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneOutcome, ReadingPaneSection, READING_PANE_ENTER, } from './ReadingPane.js';
 export type { ReadingPaneProps, ReadingPaneBylineProps, ReadingPaneTitleProps, ReadingPaneLeadProps, ReadingPaneQuoteProps, ReadingPaneReasoningProps, ReadingPaneOutcomeProps, ReadingPaneSectionProps, } from './ReadingPane.js';

package/dist/ReadingPane/index.js

@@ -1,4 +1,5 @@
-export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-Q7N2ATMC.js';
+export { READING_PANE_ENTER, ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-64JNKLLP.js';
 import '../chunk-RK4XPHVG.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ReadingPane-VLYOWMCM.css → ReadingPane-VFTRDPC5.css}

@@ -32,6 +32,25 @@
   }
 }
 
+/* A NEW ITEM PLAYS IN (`contentKey`): a short fade and rise, so the reader
+   sees the pane move on rather than its words change under them. */
+.crewlet-reading-pane__column--entering {
+  animation: crewlet-reading-pane-enter var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+@keyframes crewlet-reading-pane-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-2));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-reading-pane__column--entering {
+    animation: none;
+  }
+}
+
 /* ---- The byline -------------------------------------------------------- */
 
 .crewlet-reading-pane__byline {

package/dist/SectionFrame/index.js

@@ -1,5 +1,5 @@
-export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-YRNNUCQP.js';
-import '../chunk-25JQNHTC.js';
+export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-7BDBO2NP.js';
+import '../chunk-BRK3HXGZ.js';
 import '../chunk-TEV5REGB.js';
 import '../chunk-HBDA76EZ.js';
 import '../chunk-2YTOOH3A.js';

package/dist/ShareDialog/index.js

@@ -7,7 +7,7 @@ import '../chunk-DTIW4CHZ.js';
 import '../chunk-YGRTX67J.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-HF5L56YQ.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-L72URIHR.js';

package/dist/SheetGrid/index.js

@@ -9,7 +9,7 @@ import '../chunk-Z7JYG5TF.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-EC6EUIAD.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-7ZSEUO5Q.js';