@crewlethq/ui 0.32.0 → 0.34.0

package/dist/SheetGrid/SheetGrid.d.ts

@@ -77,12 +77,16 @@ export interface SheetGridProps {
      * `content` is as tall as its rows, up to `height` (or the
      * `--crewlet-sheet-max-height` the page sets, 70% of the viewport by
      * default), so twelve rows draw no empty bordered slab under the last one
-     * and Add row sits right under them.
+     * and Add row sits right under them. In a column of bounded height it
+     * shrinks to the room left, down to the `--crewlet-sheet-min-height` the
+     * page sets.
      */
     fit?: 'container' | 'content' | undefined;
     /**
-     * Shows the row actions menu on a row's number (the active row, a hovered
-     * one, and Shift+F10 from any of its cells) with Delete row. The grid only
+     * Shows the row actions menu in a row's number gutter (the number gives way
+     * to the button under the pointer, on the row holding focus, and while the
+     * menu is open; a tap on the number opens it on a touch screen; Shift+F10
+     * opens it from any of the row's cells) with Delete row. The grid only
      * asks: the host confirms with its own dialog before it deletes anything.
      */
     onDeleteRow?: ((rowId: string) => void) | undefined;

package/dist/SheetGrid/index.js

@@ -1,19 +1,19 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-LWXRD6L6.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-EWAFN2IU.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
-import '../chunk-YEKYVJQR.js';
-import '../chunk-NHBP2XS5.js';
+import '../chunk-SGHIAGPR.js';
+import '../chunk-VI5FWDZW.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
-import '../chunk-2HIOJ4YZ.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-6ZJ3N7QI.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
+import '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';

package/dist/{SheetGrid-J3TKKXZL.css → SheetGrid-GDPCCZ4V.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,24 +172,80 @@
   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);
 }
 
+/* THE GUTTER: one centred stack, so the number and the row's actions button
+   take exactly the same place and swapping one for the other moves nothing.
+   Its width is the component's fixed track (SHEET_ROW_NUMBER_WIDTH), which
+   holds five tabular digits, so row 9 and row 10000 stand in one column. */
 .crewlet-sheet-grid__rownum {
+  display: grid;
+  grid-template-areas: 'gutter';
+  place-items: center;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
 }
 
-/* The row actions sit at the number's trailing edge, over the cell's own
-   background, so the number stays readable beside them. */
+.crewlet-sheet-grid__rownum-number,
+.crewlet-sheet-grid__row-actions {
+  grid-area: gutter;
+}
+
+/* THE ACTIONS BUTTON IS ALWAYS THERE, drawn clear until it is wanted, so a
+   tap on the number opens the row's menu on a screen with no pointer to
+   hover with. It shows, and the number gives way to it, under the pointer,
+   on the row holding focus (the active cell, or the button itself) and while
+   its menu is open. A row the reader has not entered keeps its number. */
 .crewlet-sheet-grid__row-actions {
-  position: absolute;
-  top: 50%;
-  inset-inline-end: 0;
   display: inline-flex;
-  transform: translateY(-50%);
+  opacity: 0;
+}
+
+.crewlet-sheet-grid__row:is(:hover, :focus-within) > .crewlet-sheet-grid__rownum > .crewlet-sheet-grid__row-actions,
+.crewlet-sheet-grid__rownum--open > .crewlet-sheet-grid__row-actions {
+  opacity: 1;
+}
+
+.crewlet-sheet-grid__row:is(:hover, :focus-within) > .crewlet-sheet-grid__rownum--actions > .crewlet-sheet-grid__rownum-number,
+.crewlet-sheet-grid__rownum--open > .crewlet-sheet-grid__rownum-number {
+  visibility: hidden;
+}
+
+/* THE SELECTED ROWS' NUMBERS are marked as their cells are, and on the same
+   condition (the reader is in the grid, or the selection spans more than one
+   cell), the way a spreadsheet lights the row headers of a selection. The
+   tint is laid over the gutter's own ground, which a sticky gutter needs: a
+   translucent tint alone lets the values scrolling under it show through. */
+.crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__rownum--selected {
+  background: linear-gradient(var(--color-brand-accent-soft), var(--color-brand-accent-soft)) var(--color-surface-background);
+  color: var(--color-brand-accent-ink);
+}
+
+/* The active cell's history is the reader's tool while they are in the grid,
+   not a mark on a sheet nobody has entered. */
+.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. */
@@ -192,8 +283,21 @@
   justify-content: center;
 }
 
-.crewlet-sheet-grid__cell--selected {
-  background: var(--color-brand-accent-soft);
+/* 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. The tint is laid over the cell's
+   own ground: alone, a translucent tint on a frozen cell let the values
+   scrolling under it show through. */
+.crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__cell--selected {
+  background: linear-gradient(var(--color-brand-accent-soft), var(--color-brand-accent-soft)) var(--color-surface-background);
+}
+
+/* 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,
@@ -263,6 +367,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 +399,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 +411,7 @@
 }
 
 .crewlet-sheet-grid__history:hover {
+  background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
 
@@ -654,11 +786,19 @@
 }
 
 @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;
   }
 
+  /* A selected row's number takes the selection's ink on the page's ground:
+     on a Highlight ground the browser's backplate behind the digits drew
+     them as a solid block. */
+  .crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__rownum--selected {
+    background: Canvas;
+    color: Highlight;
+  }
+
   .crewlet-sheet-grid__rownum--present::before {
     background: Highlight;
   }

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-VI5FWDZW.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';

package/dist/SheetModel/labels.d.ts

@@ -59,7 +59,7 @@ export interface SheetLabels {
     dismiss: string;
     /** A refusal, as the grid announces it: "Not saved: <reason>". */
     notSaved: (reason: string) => string;
-    /** The row actions control on a row's number, and its delete item. */
+    /** The row actions button in a row's number gutter (its name and tooltip), and its delete item. */
     rowActions: (row: number) => string;
     deleteRow: string;
     /** Appended to the keyboard help when a row has actions. */

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);
+  }
+}