@crewlethq/ui 0.82.0 → 0.84.0

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/LinkInterstitial/index.js

@@ -1,7 +1,8 @@
-export { LinkInterstitial, openExternal } from '../chunk-6YBBQAEM.js';
-import '../chunk-XXDB6KPV.js';
+export { LinkInterstitial, openExternal } from '../chunk-MYAARF4Z.js';
+import '../chunk-ZXXZESCD.js';
 import '../chunk-PLL7ZJHY.js';
 import '../chunk-BPCY7ZID.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';

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/ListInput/index.js

@@ -1,5 +1,6 @@
-export { ListInput, withDraft } from '../chunk-KLAVEJIO.js';
-import '../chunk-MPVMB2DV.js';
+export { ListInput, withDraft } from '../chunk-GLKQHN7G.js';
+import '../chunk-BVML4UVB.js';
+import '../chunk-YJQXESOJ.js';
 import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-CMAZZY2I.js';

package/dist/MarkdownEditor/index.js

@@ -1,11 +1,12 @@
-export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-2KJCUCVE.js';
+export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-TQKQRS2J.js';
 import '../chunk-NXFTCPF6.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-GZVAZ3LL.js';
-import '../chunk-HCUECVZ3.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-YOJAGKTS.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';

package/dist/MediaMatch/index.d.ts

@@ -1 +1 @@
-export { useMediaMatch } from './useMediaMatch.js';
+export { REDUCED_MOTION_QUERY, prefersReducedMotion, useMediaMatch } from './useMediaMatch.js';

package/dist/MediaMatch/index.js

@@ -1 +1 @@
-export { useMediaMatch } from '../chunk-RTPQDNW3.js';
+export { REDUCED_MOTION_QUERY, prefersReducedMotion, useMediaMatch } from '../chunk-YJQXESOJ.js';

package/dist/MediaMatch/useMediaMatch.d.ts

@@ -17,3 +17,17 @@
  * the wide layout is the one that needs no JavaScript to be usable.
  */
 export declare function useMediaMatch(query: string): boolean;
+/**
+ * The reader's request for less motion: the one spelling of the query every
+ * component asks, through `useMediaMatch` during render and through
+ * `prefersReducedMotion` outside it. A copy of the string is a copy that can
+ * drift, and a query spelt one character off never matches.
+ */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/**
+ * Whether the reader has asked for less motion, read once, for code outside a
+ * render: a scroll, a timer's length. `view` is the window the element lives
+ * in (`ownerDocument.defaultView`), the page's own by default. False on the
+ * server and wherever `matchMedia` is missing, as `useMediaMatch` answers.
+ */
+export declare function prefersReducedMotion(view?: Window | null): boolean;

package/dist/Menu/index.js

@@ -1,4 +1,5 @@
-export { Menu } from '../chunk-YOJAGKTS.js';
+export { Menu } from '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';

package/dist/MergeConflicts/index.js

@@ -1,10 +1,11 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-OAHRMR4U.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-C42XW5YP.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-GZVAZ3LL.js';
-import '../chunk-HCUECVZ3.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-YOJAGKTS.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';

package/dist/MessageActions/index.js

@@ -1,9 +1,11 @@
-export { ActionDivider, MessageAction, MessageActions, QuickReaction } from '../chunk-2TOGGCDM.js';
+export { ActionDivider, MessageAction, MessageActions, QuickReaction } from '../chunk-LT44RL62.js';
 import '../chunk-TDFLCUBE.js';
-import '../chunk-MPYRC3GO.js';
+import '../chunk-SPNTUQBV.js';
 import '../chunk-NXFTCPF6.js';
-import '../chunk-SM4P2SHB.js';
-import '../chunk-3QQIGMY3.js';
+import '../chunk-EC6EUIAD.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-OMV5W53A.js';

package/dist/Modal/index.js

@@ -1,4 +1,5 @@
-export { ConfirmModal, Modal } from '../chunk-XXDB6KPV.js';
+export { ConfirmModal, Modal } from '../chunk-ZXXZESCD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';

package/dist/OpenInAppCard/index.js

@@ -1,7 +1,7 @@
-export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-FVZPSTL2.js';
+export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-G4EHZHKM.js';
 import '../chunk-KOJPDCGQ.js';
-import '../chunk-3LI4TRUR.js';
 import '../chunk-KBZO4B33.js';
+import '../chunk-3LI4TRUR.js';
 import '../chunk-ZWCK4N4L.js';
 import '../chunk-FLW5U7YS.js';
 import '../chunk-LBGKLYBY.js';

package/dist/Outline/index.js

@@ -1,2 +1,3 @@
-export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
+export { Outline, scrollToHeading, useActiveHeading } from '../chunk-7QCSISHM.js';
+import '../chunk-YJQXESOJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Popover/index.js

@@ -1,4 +1,5 @@
-export { Popover } from '../chunk-SM4P2SHB.js';
+export { Popover } from '../chunk-EC6EUIAD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-TUEM2XIW.js';
 import '../chunk-4ITETIGZ.js';

package/dist/Presence/index.d.ts

@@ -0,0 +1,2 @@
+export { afterMotion, releaseFocus, runningMotion, usePresence } from './usePresence.js';
+export type { MotionOwnership, Presence, PresenceOptions } from './usePresence.js';

package/dist/Presence/index.js

@@ -0,0 +1,4 @@
+export { afterMotion, releaseFocus, runningMotion, usePresence } from '../chunk-PCAT2EFB.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-4ITETIGZ.js';

package/dist/Presence/usePresence.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Keeps something drawn while it leaves, and says when it has arrived.
+ *
+ * A SURFACE THAT EASES SHUT HAS TO STAY DRAWN UNTIL IT IS SHUT. Unmounted the
+ * moment it is closed, a column that eases its width to nothing eases an
+ * empty box, and the reader sees its content vanish before the motion they
+ * asked for has begun. So the content is kept for as long as the motion runs,
+ * and INERT all the while: it is on its way out, and nothing in it may take
+ * focus, a press or a screen reader's attention.
+ *
+ * THE STYLESHEET SAYS HOW LONG. The wait is for the motion actually running
+ * (`getAnimations()`), whatever the stylesheet set it to, rather than for a
+ * duration written again here: a copy of the duration is a second number that
+ * drifts from the first. A motion replaced mid way (a transition retargeted,
+ * or reversed by a reopen) is waited out in its turn.
+ *
+ * AND IT WAITS ONLY FOR ITS OWN MOTION (`MotionOwnership`): the transitions on
+ * the element ITSELF, and the keyframes the surface names, wherever they run
+ * under it. Never a motion something else inside it happens to run (a meter
+ * filling, a badge arriving), which would hold a rail inert for as long as
+ * the meter took; never a paused one, which would hold it for ever; never an
+ * endless one (a pulse). And never longer than the motion's own remaining
+ * time and a margin, so a tab hidden mid motion, where a browser may not
+ * report the end until it is seen again, still settles.
+ *
+ * NOTHING WAITS WHERE NOTHING MOVES. Under `prefers-reduced-motion: reduce`,
+ * where no motion of its own runs, and where the Web Animations API is
+ * missing, the change goes straight through in the same commit, before any
+ * paint.
+ */
+import { type RefObject } from 'react';
+/** Which motions are a surface's own: the ones its presence waits for. */
+export interface MotionOwnership {
+    /**
+     * The transitions on the element ITSELF, by property: `width`, for a
+     * column that eases its width. Left out, any transition on the element
+     * itself. A transition on an element inside it is never its own.
+     */
+    transitions?: readonly string[] | undefined;
+    /**
+     * The keyframes that are part of the motion, by name, wherever they run
+     * under the element: a rail's words fading in while its edge moves. Left
+     * out, none.
+     */
+    animations?: readonly string[] | undefined;
+}
+/**
+ * The motions of its own running on an element that will end (see
+ * `MotionOwnership`): playing, not paused, not endless, and its own.
+ */
+export declare function runningMotion(element: Element, owned?: MotionOwnership): Animation[];
+/**
+ * Calls `done` once the element's own motion has ended: AT ONCE,
+ * synchronously, where none runs, so a caller in a layout effect draws the
+ * outcome before the first paint, and never later than that motion's
+ * remaining time and a margin. Returns the cancel, which a caller runs when
+ * the wait no longer matters (the thing was opened again).
+ *
+ * A motion cancelled rather than finished (retargeted, reversed) counts as
+ * ended, and whatever of its own runs in its place is waited for in turn.
+ */
+export declare function afterMotion(element: Element | null, done: () => void, owned?: MotionOwnership): () => void;
+/**
+ * Takes focus out of something that is about to turn inert, as it starts to
+ * leave: to `target` where the host names one (the control that brings it
+ * back), and otherwise off the element that held it.
+ *
+ * FOCUS IS NEVER LEFT INSIDE WHAT IS LEAVING. An inert element cannot hold
+ * focus, and a browser that blurs it hands the reader to the top of the
+ * document, with no telling where Tab goes next; one that does not leaves a
+ * keyboard reader typing into a panel that takes nothing. Does nothing when
+ * focus is elsewhere: a reader who has moved on is not pulled back.
+ */
+export declare function releaseFocus(container: Element | null, target?: HTMLElement | null): void;
+export interface PresenceOptions extends MotionOwnership {
+    /**
+     * Makes this change instant: the host knows it is not one the reader made
+     * (a window resized across a breakpoint), so nothing waits for it.
+     */
+    instant?: boolean | undefined;
+}
+export interface Presence {
+    /** Whether to draw it: while it is shown, and while it leaves. */
+    present: boolean;
+    /** Drawn only to finish leaving: make it `inert`. */
+    leaving: boolean;
+    /**
+     * Shown again (never on the first draw) and its motion still running: the
+     * window a stylesheet scopes an entrance to, so the first paint of a page
+     * plays none.
+     */
+    entering: boolean;
+    /**
+     * Shown again BEFORE IT HAD LEFT: entering, from wherever its exit had
+     * reached rather than from nothing, so a stylesheet turns the exit back
+     * instead of playing an entrance over it.
+     */
+    returning: boolean;
+}
+/**
+ * Whether to draw something that is `shown`, and whether it is on its way in
+ * or out, waiting on the motion running on `motion`'s element.
+ *
+ * The element to wait on is the one the stylesheet moves: a column easing its
+ * width, or a rail. It can be the same element the content stands in or an
+ * ancestor of it; it is never the content itself, which is gone once it has
+ * left.
+ */
+export declare function usePresence(shown: boolean, motion: RefObject<Element | null>, { transitions, animations, instant }?: PresenceOptions): Presence;

package/dist/ReactionBar/index.js

@@ -1,8 +1,10 @@
-export { AddReaction, REACTION_BAR_LABELS, ReactionBar, reactionWho } from '../chunk-LQRN2XZK.js';
+export { AddReaction, REACTION_BAR_LABELS, ReactionBar, reactionWho } from '../chunk-4DEKONVJ.js';
 import '../chunk-TDFLCUBE.js';
-import '../chunk-MPYRC3GO.js';
-import '../chunk-SM4P2SHB.js';
-import '../chunk-3QQIGMY3.js';
+import '../chunk-SPNTUQBV.js';
+import '../chunk-EC6EUIAD.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-OMV5W53A.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/RecordChip/index.js

@@ -1,5 +1,6 @@
-export { RecordChip, RecordChipList } from '../chunk-BSAU7QRW.js';
-import '../chunk-SM4P2SHB.js';
+export { RecordChip, RecordChipList } from '../chunk-ZPTKAYJK.js';
+import '../chunk-EC6EUIAD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-TUEM2XIW.js';
 import '../chunk-4ITETIGZ.js';

package/dist/Reorder/index.js

@@ -1,4 +1,5 @@
-export { DEFAULT_REORDER_LABELS, moveKey, useReorder, useReorderLists } from '../chunk-MPVMB2DV.js';
+export { DEFAULT_REORDER_LABELS, moveKey, useReorder, useReorderLists } from '../chunk-BVML4UVB.js';
+import '../chunk-YJQXESOJ.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-N2T7Y5KR.js';
+export { RichEditor, preloadRichEditor } from '../chunk-3AMWXJQX.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
 import '../chunk-KOJPDCGQ.js';
 import '../chunk-KBZO4B33.js';

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/SegmentedControl/index.js

@@ -1,9 +1,10 @@
 import '../chunk-36WK24AI.js';
-export { SegmentedControl } from '../chunk-GZVAZ3LL.js';
-import '../chunk-HCUECVZ3.js';
+export { SegmentedControl } from '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-YOJAGKTS.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';

package/dist/SetupWizard/index.js

@@ -1,7 +1,7 @@
-export { SetupWizard } from '../chunk-C75WZMXG.js';
+export { SetupWizard } from '../chunk-K6RWEQ6P.js';
 import '../chunk-RJWO2PC5.js';
 import '../chunk-FPDIHEM4.js';
-import '../chunk-RTPQDNW3.js';
+import '../chunk-YJQXESOJ.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-LVJGN5II.js';
 import '../chunk-XSPCITPN.js';

package/dist/ShareDialog/index.js

@@ -1,15 +1,16 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-HFOTRZFU.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-AQNP3KQU.js';
 import '../chunk-3IWZVEXA.js';
-import '../chunk-XXDB6KPV.js';
+import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-IRONPJB4.js';
 import '../chunk-XZY6S3UC.js';
-import '../chunk-RTPQDNW3.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';