@crewlethq/ui 0.32.0 → 0.33.0

package/dist/{SheetGrid-J3TKKXZL.css → SheetGrid-AKPUCK67.css}

@@ -13,6 +13,8 @@
 
 .crewlet-sheet-grid {
   --crewlet-sheet-row-height: var(--size-sheet-row);
+  /* The history control: a target-sized button, which its room in the cell is sized from. */
+  --crewlet-sheet-history-size: var(--size-target-min);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -20,7 +22,33 @@
   min-height: 0;
   color: var(--color-text-primary);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
+  /* Values at the compact step, a grid's own register: the headers stay a
+     step under them, in sentence case. */
+  font-size: var(--font-size-compact);
+}
+
+/* THE MEASURING ROW: each sized column's header and sampled values, drawn by
+   the real header and cell rules at their natural width, out of sight and out
+   of reach. The grid reads each one's widest part as the column's width. */
+.crewlet-sheet-grid__measure {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.crewlet-sheet-grid__measure > div {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+}
+
+.crewlet-sheet-grid__measure :is(.crewlet-sheet-grid__header, .crewlet-sheet-grid__cell) {
+  width: max-content;
 }
 
 /* Measured by the component: the resolved row height at the current density. */
@@ -49,9 +77,16 @@
 }
 
 /* AS TALL AS ITS ROWS (fit="content"): the component writes the height, the
-   page may cap it, and the grid never grows past the height it was given. */
+   page may cap it, and the grid never grows past the height it was given.
+   IN A BOUNDED COLUMN IT GIVES WAY: the scroller shrinks to the room its
+   container has left under whatever stands above it (a bar that wraps on a
+   phone included), so the foot lands on the container's edge rather than
+   on a guess of how tall the rest is. It never shrinks below the floor the
+   page sets (--crewlet-sheet-min-height), and never below its own rows'
+   height, so a short sheet is not stretched into an empty slab. */
 .crewlet-sheet-grid--fit-content > .crewlet-sheet-grid__scroller {
-  flex: none;
+  flex: 0 1 auto;
+  min-height: min(var(--crewlet-sheet-min-height, 0px), var(--crewlet-sheet-content-height, 0px));
   max-height: var(--crewlet-sheet-max-height, 70vh);
 }
 
@@ -137,6 +172,24 @@
   margin-inline-start: auto;
 }
 
+/* A HEADER SITS ON ITS COLUMN'S EDGE: a number's and a rating's name end
+   where their values end, the sort mark on the inner side, and a checkbox's
+   name is centred over its boxes. A name on the leading edge over values on
+   the trailing one read as belonging to the column before. */
+.crewlet-sheet-grid__header--number,
+.crewlet-sheet-grid__header--rating {
+  flex-direction: row-reverse;
+}
+
+.crewlet-sheet-grid__header--number > .crewlet-sheet-grid__header-presence,
+.crewlet-sheet-grid__header--rating > .crewlet-sheet-grid__header-presence {
+  margin-inline: 0 auto;
+}
+
+.crewlet-sheet-grid__header--checkbox {
+  justify-content: center;
+}
+
 .crewlet-sheet-grid .crewlet-sheet-grid__header-badge {
   box-shadow: 0 0 0 2px var(--crewlet-presence-hue);
 }
@@ -157,6 +210,13 @@
   transform: translateY(-50%);
 }
 
+/* The active row's actions and the active cell's history are the reader's
+   tools while they are in the grid, not marks on a sheet nobody has entered. */
+.crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__row-actions--active-row,
+.crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__cell--history:not(:hover) > .crewlet-sheet-grid__history {
+  visibility: hidden;
+}
+
 /* The bar at a row's leading edge while somebody has it selected. */
 .crewlet-sheet-grid__rownum--present::before {
   position: absolute;
@@ -192,10 +252,21 @@
   justify-content: center;
 }
 
-.crewlet-sheet-grid__cell--selected {
+/* THE SELECTION IS TINTED WHILE THE READER IS IN THE GRID, or while it
+   spans more than one cell. A grid nobody has entered still holds its first
+   cell as the active one (the keys start there), and tinting it drew a stray
+   highlight on every sheet as it opened. */
+.crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__cell--selected {
   background: var(--color-brand-accent-soft);
 }
 
+/* THE FROZEN EDGE once the grid is scrolled sideways: the columns that stay
+   (or the row numbers, where none do) end on the strong hairline, so the
+   values passing under them read as scrolled rather than cut. */
+.crewlet-sheet-grid__scroller--across .crewlet-sheet-grid__frozen-edge {
+  border-inline-end-color: var(--color-border-strong);
+}
+
 .crewlet-sheet-grid__cell:focus-visible,
 .crewlet-sheet-grid__header:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -263,6 +334,31 @@
   white-space: normal;
 }
 
+/* THE HISTORY CONTROL HAS ITS OWN ROOM while it shows, so a value ends, or
+   ellipsises, before it rather than running under it. It sits at the edge
+   the value does not start from: the trailing edge of a value drawn from the
+   leading one, the leading edge of a number or a rating (drawn on the
+   trailing one), so neither moves when its cell becomes active. A checkbox,
+   centred in a column wider than it, needs no room made. */
+.crewlet-sheet-grid__grid:focus-within .crewlet-sheet-grid__cell--history,
+.crewlet-sheet-grid__cell--history:hover {
+  padding-inline-end: calc(var(--spacing-1) * 2 + var(--crewlet-sheet-history-size));
+}
+
+.crewlet-sheet-grid__grid:focus-within :is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating).crewlet-sheet-grid__cell--history,
+:is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating).crewlet-sheet-grid__cell--history:hover {
+  padding-inline: calc(var(--spacing-1) * 2 + var(--crewlet-sheet-history-size)) var(--spacing-2);
+}
+
+.crewlet-sheet-grid__grid:focus-within .crewlet-sheet-grid__cell--checkbox.crewlet-sheet-grid__cell--history,
+.crewlet-sheet-grid__cell--checkbox.crewlet-sheet-grid__cell--history:hover {
+  padding-inline-end: var(--spacing-2);
+}
+
+:is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating) > .crewlet-sheet-grid__history {
+  inset-inline: var(--spacing-1) auto;
+}
+
 .crewlet-sheet-grid__history {
   position: absolute;
   top: 50%;
@@ -270,9 +366,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-1);
+  width: var(--crewlet-sheet-history-size);
+  height: var(--crewlet-sheet-history-size);
+  padding: 0;
   border: 0;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: var(--color-surface-elevated);
   color: var(--color-text-secondary);
   transform: translateY(-50%);
@@ -280,6 +378,7 @@
 }
 
 .crewlet-sheet-grid__history:hover {
+  background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
 
@@ -654,7 +753,7 @@
 }
 
 @media (forced-colors: active) {
-  .crewlet-sheet-grid__cell--selected {
+  .crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__cell--selected {
     background: Highlight;
     color: HighlightText;
   }

package/dist/SheetModel/fit.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Columns sized to what they hold. A column that declares no width is as wide
+ * as the widest of its header and its values as drawn, within bounds its type
+ * sets: a status column wide enough for "Changes requested", a checkbox column
+ * wide enough for its name, and no text column running a screen wide.
+ *
+ * The grid measures; this module says WHAT it measures (a few values per
+ * column, not every row) and how a measurement becomes a width.
+ */
+import type { SheetColumn, SheetColumnType, SheetRow, SheetValue } from './types.js';
+import { type SheetValueContext } from './values.js';
+/**
+ * The narrowest and widest a column sizes itself to, in px, by type. The
+ * floor keeps a column a target and its header readable; the ceiling keeps one
+ * long value from pushing every other column off the screen (the rest of it is
+ * one Enter away, in the editor).
+ */
+export declare const SHEET_COLUMN_BOUNDS: Readonly<Record<SheetColumnType, readonly [min: number, max: number]>>;
+/** How many of a column's longest values it is measured by. */
+export declare const SHEET_FIT_SAMPLES = 8;
+/**
+ * The width a column takes from its measurement (the widest of its header and
+ * sampled values as drawn, border included), within its type's bounds. Nothing
+ * measured (no layout, as on a server or in a test) leaves the type's default.
+ */
+export declare function fittedWidth(type: SheetColumnType, measured: number): number;
+/**
+ * The values a column is measured by. A choice column is measured by every
+ * live choice, whatever the rows hold, so a choice nobody has picked yet still
+ * fits when somebody does. A checkbox and a multi-select by their header alone
+ * (one box, and chips that count what does not fit), a rating by its full
+ * mark. Every other column by its `limit` longest values as displayed.
+ */
+export declare function fitSamples(column: SheetColumn, rows: readonly SheetRow[], context: SheetValueContext, limit?: number): SheetValue[];

package/dist/SheetModel/index.d.ts

@@ -7,6 +7,7 @@ export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, TEXT_MAX_
 export type { SheetParse, SheetValueContext } from './values.js';
 export { SHEET_COLUMN_WIDTHS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, columnOffsets, columnWidth, drawnColumns, editorSide, inRange, isMod, isMultiCell, isTypingKey, moveFrom, rangeOf, scrollToRow, visibleRows, } from './navigation.js';
 export type { SheetBounds, SheetKey, SheetPosition, SheetRange } from './navigation.js';
+export { SHEET_COLUMN_BOUNDS, SHEET_FIT_SAMPLES, fitSamples, fittedWidth } from './fit.js';
 export { parseTSV, planClear, planPaste, toTSV } from './clipboard.js';
 export type { SheetPastePlan } from './clipboard.js';
 export { SheetPendingEdits, changeText, changeTime, hasPrevious, refusalText } from './edits.js';

package/dist/SheetModel/index.js

@@ -1,3 +1,3 @@
-export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-NHBP2XS5.js';
+export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-J6ZSH3F5.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';

package/dist/Shortcut/index.js

@@ -1,4 +1,4 @@
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Skeleton/Skeleton.d.ts

@@ -30,7 +30,8 @@ export interface SkeletonProps {
     style?: CSSProperties;
     width?: number | string;
     height?: number | string;
-    borderRadius?: number;
+    /** A number of px, or any CSS length, such as a radius token: `var(--radius-md)`. */
+    borderRadius?: number | string;
     marginTop?: number;
     marginBottom?: number;
 }

package/dist/Skeleton/index.js

@@ -1,3 +1,3 @@
-export { Skeleton } from '../chunk-W5J7R5EB.js';
+export { Skeleton } from '../chunk-TEUQWOWZ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideCompare/SlideCompare.d.ts

@@ -24,7 +24,8 @@ export interface SlideCompareLabels {
     removed: string;
     unchanged: string;
     moved: (from: number, to: number) => string;
-    missing: (version: string) => string;
+    /** The empty side of a slide one version lacks, under that version's heading. */
+    missing: string;
     summary: (counts: Record<Exclude<SlideChange, 'unchanged'> | 'moved', number>) => string;
     showUnchanged: (count: number) => string;
     hideUnchanged: string;
@@ -43,6 +44,10 @@ export interface SlideCompareProps {
  * drawings side by side, paired by its id, with a slide one version lacks in
  * its place and an empty side saying so.
  *
+ * EACH SIDE IS NAMED: the two columns carry their versions' names over the
+ * first row, and again over each side once the sides stack on a phone, so a
+ * reader never has to guess which drawing is the older one.
+ *
  * SAID IN WORDS, NEVER COLOUR ALONE. Every row names what happened to it
  * (Changed, Added, Removed, Moved from 6 to 7) beside a glyph, and the list
  * opens with the count of each, so a reader hears the comparison before they

package/dist/SlideCompare/index.js

@@ -1,6 +1,6 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-CRKFL423.js';
-import '../chunk-E6CR5PEV.js';
-import '../chunk-HMPFGIWM.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-LL5AFXU7.js';
+import '../chunk-LV4APO72.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{SlideCompare-MGM3U2ME.css → SlideCompare-HTCMPQFY.css}

@@ -56,9 +56,34 @@
   gap: var(--spacing-3);
 }
 
-.crewlet-slide-compare__side .crewlet-slide-stage {
-  border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
+.crewlet-slide-compare__side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/* THE VERSIONS' NAMES over the two columns; over each side instead once the
+   sides stack. */
+.crewlet-slide-compare__columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-3);
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-slide-compare__side-label {
+  display: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-slide-compare__toggle {
+  align-self: flex-start;
 }
 
 .crewlet-slide-compare__missing {
@@ -77,4 +102,12 @@
   .crewlet-slide-compare__sides {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .crewlet-slide-compare__columns {
+    display: none;
+  }
+
+  .crewlet-slide-compare__side-label {
+    display: block;
+  }
 }

package/dist/SlideFilmstrip/SlideFilmstrip.d.ts

@@ -15,6 +15,11 @@ export interface SlideFilmstripLabels {
     hidden: string;
     untitled: string;
 }
+/**
+ * Which way the strip runs: a column beside the stage, or a row under it
+ * where the stage takes the whole width (a phone).
+ */
+export type SlideFilmstripOrientation = 'vertical' | 'horizontal';
 export interface SlideFilmstripProps {
     slides: readonly FilmstripSlide[];
     /** The slide on the stage. */
@@ -27,6 +32,7 @@ export interface SlideFilmstripProps {
      * out, the filmstrip is read only and draws no handles.
      */
     onReorder?: ((ids: string[]) => void) | undefined;
+    orientation?: SlideFilmstripOrientation | undefined;
     className?: string | undefined;
     labels?: Partial<SlideFilmstripLabels> | undefined;
 }
@@ -37,14 +43,19 @@ export interface SlideFilmstripProps {
  *
  * ONE STOP IN THE TAB ORDER for the thumbnails: each is a button marked
  * `aria-current` when its slide is on the stage, and only that one is in the
- * tab order; Up and Down move to the next or previous slide, Home and End to
- * the ends, and the stage follows. A handle is its own control beside its
+ * tab order; Up and Down (Left and Right in a row) move to the next or
+ * previous slide, Home and End to the ends, and the stage follows. A handle is its own control beside its
  * thumbnail, since moving a slide is a different act from looking at it; its
  * arrow keys move the slide, and the move is announced with where it landed.
  * (A listbox would hold the handles inside its options, which a listbox may
  * not.)
  *
+ * THE SLIDE ON THE STAGE IS KEPT IN VIEW. The strip is its own scroller, and
+ * whenever the selection moves, whether by a press here, by Present, by a link
+ * that opened on slide 25 or by following somebody, the strip scrolls just
+ * enough to show it, and nothing else on the page moves.
+ *
  * THUMBNAILS ARE THE SLIDES THEMSELVES, drawn by the caller at the slide's own
  * size and scaled by `SlideStage`, so what the strip shows is what presents.
  */
-export declare function SlideFilmstrip({ slides, selected, onSelect, renderSlide, onReorder, className, labels, }: SlideFilmstripProps): import("react").JSX.Element;
+export declare function SlideFilmstrip({ slides, selected, onSelect, renderSlide, onReorder, orientation, className, labels, }: SlideFilmstripProps): import("react").JSX.Element;

package/dist/SlideFilmstrip/index.js

@@ -1,7 +1,7 @@
-export { SlideFilmstrip } from '../chunk-RV7SZAHR.js';
-import '../chunk-E6CR5PEV.js';
+export { SlideFilmstrip } from '../chunk-XV32RKQZ.js';
+import '../chunk-LV4APO72.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{SlideFilmstrip-BCLNAHFX.css → SlideFilmstrip-5U6Z55GS.css}

@@ -1,10 +1,21 @@
 /*
- * SlideFilmstrip: the column of slide thumbnails beside a deck's stage.
+ * SlideFilmstrip: the column of slide thumbnails beside a deck's stage, or
+ * the row under it on a phone.
  *
  * The selected slide is ringed in the brand accent rather than filled, so its
  * thumbnail still shows the slide's own colours.
+ *
+ * THE STRIP IS ITS OWN SCROLLER: a host bounds it (a column's max-height, a
+ * row's width) and the strip scrolls inside that, keeping the selected slide
+ * in view, with its scroll chained to nothing so a flick at its end does not
+ * scroll the page under the reader's thumb.
  */
 
+.crewlet-slide-filmstrip {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
 .crewlet-slide-filmstrip__list {
   display: flex;
   flex-direction: column;
@@ -72,6 +83,9 @@
   color: var(--color-text-secondary);
 }
 
+/* A CONTROL'S CORNER: the handle is a 24px control like any toolbar button,
+   so it takes --radius-md; the thumbnail beside it is a slide, and keeps the
+   slide's own smaller corner. */
 .crewlet-slide-filmstrip__handle {
   display: inline-flex;
   align-items: center;
@@ -80,7 +94,7 @@
   min-height: var(--size-target-min);
   padding: 0;
   border: 0;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: transparent;
   color: var(--color-text-tertiary);
   cursor: grab;
@@ -106,3 +120,50 @@
 .crewlet-slide-filmstrip__item[data-reorder-target='after'] .crewlet-slide-filmstrip__thumb {
   box-shadow: 0 var(--spacing-1) 0 var(--color-brand-accent);
 }
+
+/* A ROW UNDER THE STAGE: fixed-width thumbnails that scroll sideways, each
+   with its number and its handle under it rather than beside it. */
+/* NO SCROLL SNAP: a snap point would pull the strip back to the start of an
+   earlier thumbnail just after it scrolled the selected one into view. */
+.crewlet-slide-filmstrip--horizontal {
+  overflow-y: hidden;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__list {
+  flex-direction: row;
+  gap: var(--spacing-3);
+  width: max-content;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__item {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'thumb thumb'
+    'number handle';
+  align-items: center;
+  width: 7.5rem;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__thumb {
+  grid-area: thumb;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__number {
+  grid-area: number;
+  padding-top: 0;
+  text-align: left;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__handle {
+  grid-area: handle;
+  min-height: var(--size-control-sm);
+  cursor: grab;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__item[data-reorder-target='before'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: calc(var(--spacing-1) * -1) 0 0 var(--color-brand-accent);
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__item[data-reorder-target='after'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: var(--spacing-1) 0 0 var(--color-brand-accent);
+}

package/dist/SlideGrid/index.js

@@ -1,5 +1,5 @@
-export { SlideGrid } from '../chunk-VS3KOOOL.js';
-import '../chunk-E6CR5PEV.js';
-import '../chunk-HMPFGIWM.js';
+export { SlideGrid } from '../chunk-ILAEBSLJ.js';
+import '../chunk-LV4APO72.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SlideGrid-RT6QEQEE.css → SlideGrid-S4LTJ4UU.css}

@@ -38,11 +38,6 @@
   cursor: pointer;
 }
 
-.crewlet-slide-grid__card .crewlet-slide-stage {
-  border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
-}
-
 .crewlet-slide-grid__card:hover .crewlet-slide-stage {
   outline-color: var(--color-border-hover);
 }
@@ -80,3 +75,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* TWO TO A ROW ON A PHONE: a grid of one is the filmstrip at full size, and
+   the grid is for seeing the deck's run at a glance. */
+@media (width < 640px) {
+  .crewlet-slide-grid__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-3);
+  }
+}

package/dist/SlideNav/SlideNav.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+export interface SlideNavLabels {
+    /** The group's name. */
+    nav: string;
+    previous: string;
+    next: string;
+    /** Why Previous is off on the first slide. */
+    start: string;
+    /** Why Next is off on the last slide. */
+    end: string;
+    position: (position: number, total: number) => string;
+}
+export declare const SLIDE_NAV_LABELS: SlideNavLabels;
+/**
+ * Where the controls sit: `page` on the interface's own ground, `projection`
+ * floating over a slide shown full screen, on a scrim in its own light ink
+ * whatever the theme, since the letterbox under it is black in every theme.
+ */
+export type SlideNavTone = 'page' | 'projection';
+export interface SlideNavProps {
+    /** One-based. */
+    position: number;
+    total: number;
+    onPrevious: () => void;
+    onNext: () => void;
+    tone?: SlideNavTone | undefined;
+    /**
+     * Controls after Next, set apart by a rule: Full screen. IconButtons take
+     * the tone; give them `size="sm"`, the step Previous and Next are drawn at.
+     */
+    children?: ReactNode;
+    className?: string | undefined;
+    labels?: Partial<SlideNavLabels> | undefined;
+}
+/**
+ * Previous, where the show is, and Next: the one set of controls every way of
+ * presenting a deck moves by, in the page, full screen and at the lectern.
+ *
+ * A TOOLBAR'S STEP: Previous and Next are the small control step, as tall as
+ * the buttons a toolbar or a panel sets beside them (the presenter's Pause).
+ *
+ * STOPS AT THE ENDS, SAYING WHY. Previous on the first slide and Next on the
+ * last are off, with the reason on the control, rather than pressable and
+ * doing nothing. The position is tabular in a fixed width, so the controls
+ * either side of it do not move as the count changes. It is not a live region:
+ * the host announces each slide as it arrives, by its number and its title,
+ * and a second announcement of the number alone would repeat it.
+ */
+export declare function SlideNav({ position, total, onPrevious, onNext, tone, children, className, labels, }: SlideNavProps): import("react").JSX.Element;

package/dist/SlideNav/index.d.ts

@@ -0,0 +1,3 @@
+import './SlideNav.css';
+export { SlideNav, SLIDE_NAV_LABELS } from './SlideNav.js';
+export type { SlideNavLabels, SlideNavProps } from './SlideNav.js';

package/dist/SlideNav/index.js

@@ -0,0 +1,4 @@
+export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-6VOS2GMB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SlideNav-BLFJF6AH.css

@@ -0,0 +1,53 @@
+/*
+ * SlideNav: Previous, the position and Next, and whatever follows them.
+ */
+
+.crewlet-slide-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-slide-nav__position {
+  min-width: 5em;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.crewlet-slide-nav__more {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-left: var(--spacing-2);
+  padding-left: var(--spacing-3);
+  border-left: 1px solid var(--color-border-default);
+}
+
+/* OVER A PROJECTED SLIDE: a pill in the projection's own fixed colours, so it
+   reads over black bars and over a slide of any colour, in every theme. */
+.crewlet-slide-nav--projection {
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-pill);
+  background: var(--color-projection-ground);
+  color: var(--color-projection-ink);
+}
+
+.crewlet-slide-nav--projection .crewlet-slide-nav__position {
+  color: inherit;
+}
+
+.crewlet-slide-nav--projection .crewlet-slide-nav__more {
+  border-left-color: var(--color-projection-rule);
+}
+
+.crewlet-slide-nav--projection .crewlet-icon-btn--ghost {
+  color: inherit;
+}
+
+.crewlet-slide-nav--projection .crewlet-icon-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-projection-hover);
+  color: inherit;
+}

package/dist/SlideStage/SlideStage.d.ts

@@ -33,6 +33,14 @@ export interface SlideStageProps {
      * "artboard" for a design's board shown at its own layout.
      */
     roleDescription?: string | undefined;
+    /**
+     * The slide's own edge, a hairline on a small radius, so a slide whose
+     * ground is the page's own colour still reads as a slide: a thumbnail, a
+     * card, the editor's stage, a show in the page. Not for `fit="contain"`,
+     * whose box is letterboxed by design, nor in full screen, where the screen's
+     * own edge is the slide's.
+     */
+    framed?: boolean | undefined;
     className?: string | undefined;
 }
 /**
@@ -60,4 +68,4 @@ export interface SlideStageProps {
  * A GROUP NAMED AS A SLIDE, so a screen reader announces "slide" with its
  * name and reads its text in source order, which is the slide's reading order.
  */
-export declare function SlideStage({ children, label, fit, scale, width, height, roleDescription, className, }: SlideStageProps): import("react").JSX.Element;
+export declare function SlideStage({ children, label, fit, scale, width, height, roleDescription, framed, className, }: SlideStageProps): import("react").JSX.Element;