@crewlethq/ui 0.32.0 → 0.33.0

package/dist/FollowBanner/index.js

@@ -1,6 +1,6 @@
-export { FollowBanner } from '../chunk-LDJ3J4TQ.js';
-import '../chunk-SVSCLHHI.js';
-import '../chunk-HMPFGIWM.js';
+export { FollowBanner } from '../chunk-WGD2HX2A.js';
+import '../chunk-SZZRIHGT.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Fullscreen/index.d.ts

@@ -1,2 +1,3 @@
 export { useFullscreen } from './useFullscreen.js';
 export type { Fullscreen } from './useFullscreen.js';
+export { useIdle, IDLE_AFTER_MS } from './useIdle.js';

package/dist/Fullscreen/index.js

@@ -1 +1 @@
-export { useFullscreen } from '../chunk-XDTYBF2F.js';
+export { IDLE_AFTER_MS, useFullscreen, useIdle } from '../chunk-W5XCNEZC.js';

package/dist/Fullscreen/useIdle.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+/** How long the pointer rests before a full screen show puts its controls and cursor away. */
+export declare const IDLE_AFTER_MS = 2500;
+/**
+ * Whether the reader has left the pointer still over `ref` for `timeout`
+ * milliseconds: what a full screen show reads to put its controls and the
+ * cursor away, and bring them back on the next move.
+ *
+ * A MOVE, A PRESS OR A TOUCH WAKES IT; a key does not. A clicker sends keys,
+ * and a show whose controls flashed up on every slide would put them over the
+ * room's screen each time the presenter moved on. The controls stay reachable
+ * from the keyboard regardless: focus inside the element also keeps it awake.
+ *
+ * Off (`enabled` false), it is never idle and listens to nothing.
+ */
+export declare function useIdle(ref: RefObject<HTMLElement | null>, enabled: boolean, timeout?: number): boolean;

package/dist/HuePicker/index.js

@@ -1,8 +1,8 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker } from '../chunk-LIXSV5YI.js';
+export { HuePicker } from '../chunk-GPHWCK7M.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ImageUpload/index.js

@@ -1,4 +1,4 @@
-export { ImageUpload } from '../chunk-YDBC4DNW.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+export { ImageUpload } from '../chunk-FWYHRU7M.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Layer/index.d.ts

@@ -1,7 +1,7 @@
 import './Layer.css';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer, } from './stack.js';
 export type { DismissReason, LayerKind, ModalLayer, ModalLayerOptions, PopupLayer, PopupLayerOptions, } from './stack.js';
-export { LAYER_GAP, LAYER_REPOSITION_EVENT, outsideBounds, placePopup, viewportBounds } from './place.js';
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, anchorGone, outsideBounds, placePopup, viewportBounds } from './place.js';
 export type { Placement, PlacementRect, PlacementSize } from './place.js';
 export { LayerHost, useLayerContainer } from './LayerHost.js';
 export type { LayerHostProps } from './LayerHost.js';

package/dist/Layer/index.js

@@ -1,3 +1,3 @@
-export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-HMPFGIWM.js';
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, anchorGone, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-OMV5W53A.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Layer/place.d.ts

@@ -59,5 +59,23 @@ export declare const LAYER_GAP = 4;
 export declare function placePopup(anchor: PlacementRect, size: PlacementSize, bounds: PlacementRect, gap?: number, prefer?: 'below' | 'above'): Placement;
 /** The rectangle of the window itself, for a surface with no layer host. */
 export declare function viewportBounds(): PlacementRect;
+/**
+ * Whether an anchor has left its layer: the ANCHOR'S OWN BOX, in the layer's
+ * coordinates, carried entirely outside the layer's whole rectangle (not the
+ * gap-inset one a surface is placed in, since an anchor in the gap is at the
+ * layer's edge, not off it).
+ *
+ * ASKED OF THE ANCHOR, never of where the aligned surface would start: an
+ * end-aligned panel wider than its trigger's right edge starts left of the
+ * layer while the trigger is in plain view, and every surface that asked of
+ * that start closed on the frame it opened. Placement clamps such a panel
+ * inside the bounds instead.
+ */
+export declare function anchorGone(anchor: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, host: PlacementRect, inHost: boolean): boolean;
 /** Whether an anchor has been carried entirely outside its bounds. */
 export declare function outsideBounds(anchor: PlacementRect, bounds: PlacementRect): boolean;

package/dist/LayersList/LayersList.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+/** One entry of the list: what it names and the id it is picked by. */
+export interface LayersListItem {
+    id: string;
+    label: string;
+}
+export interface LayersListLabels {
+    /**
+     * An entry's accessible name where the list opens entries (`onOpen`), so a
+     * reader hears how: "Hero, press Enter or double-click to open".
+     */
+    openable: (label: string) => string;
+}
+export declare const LAYERS_LIST_LABELS: LayersListLabels;
+export interface LayersListProps {
+    /** The list's accessible name, such as "Boards". */
+    label: string;
+    items: readonly LayersListItem[];
+    /** The entry picked on the surface the list stands beside; null or absent is none. */
+    selected?: string | null | undefined;
+    /** A press picks an entry: a click, or Space on the one with focus. */
+    onSelect?: ((id: string) => void) | undefined;
+    /** Enter or a double-click opens an entry. Absent, entries are only picked. */
+    onOpen?: ((id: string) => void) | undefined;
+    /** What stands over the list, such as its count ("14 boards"). It does not scroll. */
+    heading?: ReactNode;
+    labels?: Partial<LayersListLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The list of a canvas's items beside it, as a design tool's layers are: a
+ * board picked on the canvas is marked here, and one picked here is picked
+ * there. The caller holds the selection and hands it to both.
+ *
+ * QUIET UNTIL IT IS CURRENT. Entries are one line in the secondary ink; the
+ * picked one takes the primary ink and the accent edge every current row in
+ * the system takes (the document outline's open entry), and the edge is held
+ * on every entry in its resting colour, so nothing moves when the pick does.
+ * A long name is cut to one line with the whole of it as the native tip: a
+ * layer list is scanned down its left edge, and a name that wrapped made its
+ * neighbours hard to find.
+ *
+ * ITS LETTERS STAND ON ITS CONTAINER'S EDGE. The entries' padding and edge
+ * hang into the gutter beside the list, so the names line up with whatever
+ * stands above the list (a count, a bar) and only an entry's hover and the
+ * current entry's mark reach past that line.
+ *
+ * ONE TAB STOP. The list is one control: Tab passes it, the arrows and Home
+ * and End move inside it without picking (manual activation, so a reader can
+ * look along the list without moving the canvas), Space or a click picks,
+ * and Enter or a double-click opens. The stop is the picked entry, or the
+ * one focus last left.
+ *
+ * IT SCROLLS ON ITS OWN, under a heading that stays, when it holds more
+ * entries than the height it is given; it never grows the page.
+ */
+export declare function LayersList({ label, items, selected, onSelect, onOpen, heading, labels, className, }: LayersListProps): import("react").JSX.Element;

package/dist/LayersList/index.d.ts

@@ -0,0 +1,3 @@
+import './LayersList.css';
+export { LayersList, LAYERS_LIST_LABELS } from './LayersList.js';
+export type { LayersListItem, LayersListLabels, LayersListProps } from './LayersList.js';

package/dist/LayersList/index.js

@@ -0,0 +1,3 @@
+export { LAYERS_LIST_LABELS, LayersList } from '../chunk-ONL54WMH.js';
+import '../chunk-RKKO7QHH.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LayersList-NQZEIPZB.css

@@ -0,0 +1,82 @@
+/*
+ * A canvas's list of layers (LayersList.tsx): a heading that stays, over one
+ * line per entry that scrolls on its own.
+ */
+
+.crewlet-layers-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-layers-list__heading {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * THE ENTRIES HANG INTO THE GUTTER by their own padding and edge, so their
+ * letters stand on the list's edge, in line with the heading above them.
+ */
+.crewlet-layers-list__items {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 2px));
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+/*
+ * The current entry's mark is held on every entry in the resting ink, as the
+ * document outline's is, so nothing moves when the pick does. The radius is
+ * the control step's on the end the mark does not take.
+ */
+.crewlet-layers-list__item {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: none;
+  border-inline-start: 2px solid transparent;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-md);
+  border-end-end-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-normal);
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.crewlet-layers-list__item:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The accent edge every current row in the system takes, in the primary ink.
+   A border, so forced colours keep it. */
+.crewlet-layers-list__item[aria-current='true'] {
+  border-inline-start-color: var(--color-brand-accent);
+  color: var(--color-text-primary);
+}
+
+/* The ring lies inside the entry, where the scroller beside it cannot cut it. */
+.crewlet-layers-list__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}

package/dist/LinkInterstitial/index.js

@@ -1,9 +1,9 @@
-export { LinkInterstitial, openExternal } from '../chunk-ZR5VN5IV.js';
-import '../chunk-I3KKZ2O3.js';
+export { LinkInterstitial, openExternal } from '../chunk-KD2IRYCT.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-SVSCLHHI.js';
+import '../chunk-XEGZHHRH.js';
+import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/ListInput/index.js

@@ -2,7 +2,7 @@ export { ListInput } from '../chunk-Z6VW6CXX.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/Markdown/index.js

@@ -1 +1 @@
-export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-SKOYC2CF.js';
+export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-KK5OYNAF.js';

package/dist/MarkdownEditor/index.js

@@ -1,11 +1,11 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-LZHLSQYK.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-OOWPSBIS.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/MediaMatch/index.d.ts

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

package/dist/MediaMatch/index.js

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

package/dist/MediaMatch/useMediaMatch.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Whether a media query matches now, and again whenever that changes.
+ *
+ * ONE COPY FOR EVERY CONSUMER. The shell reads it to decide where its rail
+ * goes, the switcher whether it opens as a sheet, and an application the one
+ * layout decision a stylesheet cannot make (which element a phone draws, not
+ * how it is styled); two copies of the subscription would be two answers to
+ * "is this a phone" that can disagree for a frame while a window is resized.
+ * Anything a media query in a stylesheet CAN decide belongs there instead: a
+ * width written in both places is a width that can disagree with itself.
+ *
+ * READ DURING RENDER, through `useSyncExternalStore`, so the first render
+ * already has the answer: a layout decided in an effect paints the wrong
+ * shape for a frame and then moves.
+ *
+ * On the server, and in a browser without `matchMedia`, the answer is `false`:
+ * the wide layout is the one that needs no JavaScript to be usable.
+ */
+export declare function useMediaMatch(query: string): boolean;

package/dist/Menu/index.js

@@ -1,5 +1,5 @@
-export { Menu } from '../chunk-2HIOJ4YZ.js';
-import '../chunk-HMPFGIWM.js';
+export { Menu } from '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/MergeConflicts/index.js

@@ -1,7 +1,7 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-RWA4H2TV.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-J6ON5SYE.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Modal/index.js

@@ -1,6 +1,6 @@
-export { ConfirmModal, Modal } from '../chunk-I3KKZ2O3.js';
+export { ConfirmModal, Modal } from '../chunk-XEGZHHRH.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{Modal-XOSV6FAH.css → Modal-7MWRCWAI.css}

@@ -284,6 +284,36 @@
   border-bottom: 1px solid var(--color-border-default);
 }
 
+/*
+ * WITH A SUBTITLE, THE HEAD'S CONTROLS SIT ON THE TITLE'S LINE. Centred on
+ * the whole head, the mark, the actions and the close control floated beside
+ * the description, belonging to neither line; top-aligned, they hung from the
+ * head's top edge, a few pixels above the title they belong to. So the row
+ * aligns to the top and each control is centred on the title's first line:
+ * the mark and the actions in a box one title line tall (what is taller
+ * overflows it evenly, into the head's padding), and a lone control by the
+ * margin that puts its centre there. A dialog with no subtitle keeps the
+ * centring above, where the two are the same thing.
+ *
+ * DIALOGS ONLY. A sheet's head is a bar at the shell's top-bar height and
+ * centres what it holds on the bar, as the bar behind it does.
+ */
+.crewlet-modal__header--subtitled {
+  --crewlet-modal-title-line: calc(var(--font-size-sm) * var(--font-line-height-tight));
+  align-items: flex-start;
+}
+
+.crewlet-modal__header--subtitled > .crewlet-modal__icon,
+.crewlet-modal__header--subtitled > .crewlet-modal__actions {
+  align-items: center;
+  height: var(--crewlet-modal-title-line);
+}
+
+.crewlet-modal__header--subtitled > .crewlet-modal__close,
+.crewlet-modal__header--subtitled > .crewlet-modal__back {
+  margin-block: calc((var(--crewlet-modal-title-line) - var(--size-control-md)) / 2);
+}
+
 /*
  * A SHEET IS COMMITTED FROM ITS HEAD, so its head is the taller band, not the
  * tighter one. It stands at the shell's own top-bar height, which is what puts

package/dist/Note/index.js

@@ -1,2 +1,2 @@
-export { Note } from '../chunk-CJKMURZO.js';
+export { Note } from '../chunk-5SZGKSGL.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Note-ONSKKTOA.css → Note-WI5MLZOO.css}

@@ -60,6 +60,19 @@
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+/*
+ * PARAGRAPHS STAND APART, by the step a note's heading stands from its words.
+ * A host that resets a paragraph's margins (as an application's base sheet
+ * does) ran two paragraphs into what read as one that wrapped early.
+ */
+.crewlet-note :is(p, ul, ol) {
+  margin-block: 0;
+}
+
+.crewlet-note :is(p, ul, ol) + :is(p, ul, ol) {
+  margin-block-start: var(--spacing-2);
+}
+
 .crewlet-note > :first-child {
   margin-top: 0;
 }

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
-export { OrgLabel } from '../chunk-AKEZ3G5V.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+export { OrgLabel } from '../chunk-ONQKKHON.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TBMDMXEX.js';
-import '../chunk-AKEZ3G5V.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-YA3AWELW.js';
+import '../chunk-ONQKKHON.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,12 +1,12 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-AMNN4WDX.js';
-import '../chunk-VEB5ERRE.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-JBUMD6DS.js';
+import '../chunk-QWNVSR6G.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-AKEZ3G5V.js';
-import '../chunk-VYOKRN2I.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-ONQKKHON.js';
+import '../chunk-LM3ISVJA.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-TROLVEZY.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/PeopleRail/index.js

@@ -1,9 +1,9 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-UQHKFF2N.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-GPWJCP3U.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-BWRGFKJP.js';
-import '../chunk-HMPFGIWM.js';
+export { Popover } from '../chunk-K3IJQNB7.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenceStack/index.js

@@ -1,9 +1,9 @@
-export { PresenceStack } from '../chunk-ODT5H4MN.js';
+export { PresenceStack } from '../chunk-3LYWD3BO.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-I6POAB4V.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

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';