@crewlethq/ui 0.27.0 → 0.28.0

package/README.md

@@ -51,7 +51,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
-| Arranging a page | `ArrangeBoard`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
+| Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
 | Artifacts | `SandboxedFrame`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it) |
@@ -204,6 +204,32 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.28.0
+
+**`ArrangeGrid`** is the page grid a board's blocks stand on: equal columns (twelve unless `columns` says otherwise), the board's own gap, each `ArrangeFrame` spanning the columns it names. A frame writes `grid-column: span N`, which only a grid parent reads, so frames placed straight in an `ArrangeBoard` stacked at full width; every board now lays its blocks on this one grid rather than on a grid of its own. `ArrangeGroup`'s body is the same grid inside the group, so a block is one width on the page and in a group, and while the page is arranged the grid opens its rows a step for each block's toolbar.
+
+**`StackedColumns` keeps its top value inside the figure.** The axis's top tick is centred on the plot's top edge, so half of it stood above the plot; with no head row it fell outside the figure, and a container that clips its content cut the highest value in half. A chart with no head now keeps that half line above its plot, and the tick's line height is the tight step it is measured at.
+
+**`WidgetFrame` stands on the card recipe.** It drew the elevated ground at a 12px inset, so a dashboard's figures were a different object from every card beside them. It now takes the card's ground (`--color-surface-subtle`), its hairline and corner, and the card's 16px inset on every part. The title takes a second line before it gives up a word (cut at one line, a frame three columns wide named "Tokens, last 14 days" as "Tokens, last 14 da"), and the controls stand on its first line. The citation is one line, the dataset's title ending before the time leaves it; in a frame narrower than 18rem it stacks, the title over the time. A stat tile drawn `flush` as the figure takes the frame's inset rather than doubling it. New `flush` lets a table reach the frame's sides: its row rules meet the border, and its cells take the frame's inset, so the first column starts under the title.
+
+**`Note` takes a `heading`**, set at a card title's step in the note's ink, which names the note as a region. A note on a board then reads as one of its cards rather than as a label over loose prose.
+
+**`DataTableColumn.minWidth`** is the narrowest the fit pass shrinks a `defaultWidth` column to. For the one column that gives up room to its box but has to stay readable while it does, a title beside short held columns: the fit took every pixel the box was short down to the table's floor, and a title read "READ…". Past it the table scrolls sideways.
+
+**`DatasetSource` says how its rows are kept current on a line of its own**, under the facts, and sets its title at the medium weight. On the line of facts the refresh wrapped under them and began with the separator, and a rail of semibold titles outweighed the figures it cites.
+
+What to change:
+
+- Wrap a board's page of frames in `ArrangeGrid` (inside `ArrangeBoard`) in place of a grid of your own.
+- Pass `flush` to a `WidgetFrame` whose figure is a table.
+- A host that relied on the frame's elevated ground or its one-line title restyles nothing: both changed for every figure.
+
+## Changes in 0.27.1
+
+**`useSlideKeys` answers every key with the newest handlers.** It re-added its document listener after each render, so after every step there was a gap, between the new slide's commit and the effect that re-added the listener, in which a quick second press (a clicker held down, two taps) reached the previous slide's handlers and moved to the slide already shown: the press was lost. The hook now keeps one listener for as long as it is `enabled` and reads the handlers from a ref it brings up to date as each render commits, before the browser can dispatch another event. A show whose stage stays mounted across slides, as `SlideStage fit="view"` does, met the gap on almost every quick press.
+
+Nothing to change: handlers that close over the current slide are right as they are.
+
 ## Changes in 0.27.0
 
 **`SlideStage` presents in the page with `fit="view"`.** A slide presented inside a page sits below a title, a description and tabs, so a stage as tall as its column ran past the foot of the window and hid the bottom of the slide and the controls under it. A `view` stage letterboxes its slide as `contain` does, in a box whose height is measured: the room from the top of the stage's parent (the show: the stage and its controls) to the foot of its scrollport, less what else the parent holds and its `scroll-margin-bottom`, or the slide's height at the stage's width if that is less. The room is measured with the scrollport at its top, so it does not change as the reader scrolls, and again whenever the view, the show or the stage is resized. A show too low on the page to get half of what it asks takes the scrollport's whole height and is scrolled into view, clear of its `scroll-margin-top`. In full screen the stage fills its box, sharing a flex column with the show's controls.

package/dist/AppShell/index.js

@@ -1,9 +1,9 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-BFQK7CYJ.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-WENCSQ47.js';
 import '../chunk-IG75YMUN.js';
-import '../chunk-UFKUWVMV.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeGrid/ArrangeGrid.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ArrangeGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Columns of the grid, which each block spans a number of. Twelve by default. */
+    columns?: number | undefined;
+    children?: ReactNode;
+}
+/**
+ * The page grid a board's blocks stand on: equal columns, each block
+ * (an `ArrangeFrame`) spanning the number of them it says.
+ *
+ * A FRAME'S WIDTH IS READ ONLY BY A GRID. `ArrangeFrame` writes
+ * `grid-column: span N`, which means nothing to a block parent, so frames
+ * placed straight in an `ArrangeBoard` stack at the page's full width. This is
+ * that grid, once, for every board: the page's blocks stand on it, and an
+ * `ArrangeGroup`'s body is the same grid inside the group, so a block is the
+ * same width on the page and in a group.
+ *
+ * ITS GAP IS THE BOARD'S. The board's column lanes are drawn from
+ * `--crewlet-arrange-board-gap`, and so is this, so a lane is exactly the
+ * column a block snaps to.
+ */
+export declare function ArrangeGrid({ columns, className, style, children, ...rest }: ArrangeGridProps): import("react").JSX.Element;

package/dist/ArrangeGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './ArrangeGrid.css';
+export { ArrangeGrid } from './ArrangeGrid.js';
+export type { ArrangeGridProps } from './ArrangeGrid.js';

package/dist/ArrangeGrid/index.js

@@ -0,0 +1,2 @@
+export { ArrangeGrid } from '../chunk-QBA5B2Z5.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArrangeGrid-XM4ZFTED.css

@@ -0,0 +1,17 @@
+/*
+ * ArrangeGrid: the page grid a board's blocks stand on. Equal columns, the
+ * board's gap between them, and each block stretched to its row's height, so
+ * the cards in one row share their bottom edge.
+ */
+.crewlet-arrange-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
+  gap: var(--crewlet-arrange-board-gap, var(--spacing-4));
+  align-items: stretch;
+}
+
+/* More room between rows while the page is arranged: each block's toolbar
+   sits on its top edge, half in the gap above it. */
+.crewlet-arrange-board.is-editing .crewlet-arrange-grid {
+  row-gap: var(--spacing-5);
+}

package/dist/ArrangeGroup/index.js

@@ -1,4 +1,4 @@
-export { ArrangeGroup } from '../chunk-35XVR5JQ.js';
+export { ArrangeGroup } from '../chunk-B4EBHPK3.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArrangeGroup-SHFHA7BE.css → ArrangeGroup-GY5YMP6E.css}

@@ -132,11 +132,10 @@
   margin-inline-start: auto;
 }
 
+/* The body is the page's grid (ArrangeGrid's `.crewlet-arrange-grid`), inside
+   the group: the same columns and gap, so a block is one width on the page
+   and in a group. */
 .crewlet-arrange-group__body {
-  display: grid;
-  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
-  gap: var(--spacing-4);
-  align-items: stretch;
   padding: var(--spacing-4);
   min-height: 5rem;
 }

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-KZOGQXSP.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OJ45PPCV.js';
 import '../chunk-VYOKRN2I.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,10 +1,10 @@
-export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_NOTE_COLORS, CanvasBoard, liveBoards } from '../chunk-3D7PSL2L.js';
-import '../chunk-63WJLRB2.js';
-import '../chunk-KZOGQXSP.js';
+export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_NOTE_COLORS, CanvasBoard, liveBoards } from '../chunk-JODJS7MR.js';
+import '../chunk-CJKMURZO.js';
+import '../chunk-OJ45PPCV.js';
 import '../chunk-VYOKRN2I.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Charts/index.js

@@ -1,3 +1,3 @@
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-MLT2HBPN.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-77DRMDXR.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Charts-JYW4X5ZL.css → Charts-RY4JN5FC.css}

@@ -433,11 +433,23 @@
   height: 0;
   font-family: var(--font-family-mono);
   font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
   color: var(--color-text-tertiary);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 
+/*
+ * THE TOP TICK STANDS ON THE PLOT'S TOP EDGE, centred on it, so half its line
+ * sits above the plot. Under a head row that half falls in the row; with no
+ * head it fell outside the figure, and a container that clips its content
+ * (a dashboard widget's body) cut the axis's top value in half. The figure
+ * keeps that half line above the plot itself.
+ */
+.crewlet-stacked-columns--headless {
+  padding-block-start: calc(var(--font-size-2xs) * var(--font-line-height-tight) / 2);
+}
+
 .crewlet-stacked-columns__plot {
   position: relative;
   display: flex;

package/dist/CommandPalette/index.js

@@ -1,13 +1,13 @@
-export { CommandPalette } from '../chunk-GTLJXJ3U.js';
-import '../chunk-F4DPAJCN.js';
+export { CommandPalette } from '../chunk-HCKJGBQH.js';
+import '../chunk-I3KKZ2O3.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/DataTable.d.ts

@@ -83,6 +83,15 @@ export interface DataTableColumn<TRow = DataTableRow> {
      */
     hideable?: boolean;
     defaultWidth?: number;
+    /**
+     * The narrowest the fit pass shrinks a `defaultWidth` column to, where it
+     * is wider than the table's `minColumnWidth`. For the one column that
+     * gives up room to its box but has to stay readable while it does, a
+     * title beside short held columns: without it the fit took every pixel
+     * the box was short down to the table's floor, and a title read "READ…".
+     * Past it the table scrolls sideways. A reader's own drag is not held to it.
+     */
+    minWidth?: number;
     /** Override the value used when sorting this column (defaults to row[key]). */
     sortValue?: (row: TRow) => string | number | Date | null | undefined;
     /**

package/dist/DataTable/index.js

@@ -1,16 +1,16 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-SVW3VG72.js';
-import '../chunk-F4DPAJCN.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-EBJREOKS.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-I3KKZ2O3.js';
 import '../chunk-7T42VQQT.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-UFKUWVMV.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,26 +1,26 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-OJRDEVHV.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-VOMYRJV5.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-SVW3VG72.js';
-import '../chunk-WG5WUFBX.js';
-import '../chunk-F4DPAJCN.js';
-import '../chunk-F73MC7EZ.js';
-import '../chunk-SMBKXWML.js';
+import '../chunk-EBJREOKS.js';
+import '../chunk-Y5NQ2LMS.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-I3KKZ2O3.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-7T42VQQT.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-UFKUWVMV.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DatasetSource/index.js

@@ -1,4 +1,4 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-ZZDY4XL7.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-ZB5O3ELS.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';

package/dist/{DatasetSource-47LBDMPR.css → DatasetSource-XFPZBRXL.css}

@@ -61,7 +61,9 @@ button.crewlet-dataset-source__summary:focus-visible {
   overflow: hidden;
   color: var(--color-text-primary);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  /* Medium, not semibold: the rail is the board's footnotes, and a column of
+     semibold titles beside it outweighed the figures' own. */
+  font-weight: var(--font-weight-medium);
   line-height: var(--font-line-height-snug);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -93,9 +95,15 @@ button.crewlet-dataset-source__summary:focus-visible {
   color: var(--color-text-secondary);
 }
 
-/* The separators are drawn, not typed, so a screen reader hears the facts alone. */
-.crewlet-dataset-source__rows::before,
-.crewlet-dataset-source__refresh::before {
+/* How the rows are kept current, on the quiet step under the facts. */
+.crewlet-dataset-source__refresh {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+/* The separator is drawn, not typed, so a screen reader hears the facts alone. */
+.crewlet-dataset-source__rows::before {
   content: '\00b7' / '';
   margin-inline-end: var(--spacing-2);
 }

package/dist/DateTimePicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-WG5WUFBX.js';
-import '../chunk-GXQ3B46I.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-Y5NQ2LMS.js';
 import '../chunk-BWRGFKJP.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-GXQ3B46I.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/FollowBanner/index.js

@@ -1,7 +1,7 @@
-export { FollowBanner } from '../chunk-FW7HN6AP.js';
+export { FollowBanner } from '../chunk-LDJ3J4TQ.js';
 import '../chunk-SVSCLHHI.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LinkInterstitial/index.js

@@ -1,11 +1,11 @@
-export { LinkInterstitial, openExternal } from '../chunk-L2OQRPXJ.js';
-import '../chunk-F4DPAJCN.js';
+export { LinkInterstitial, openExternal } from '../chunk-ZR5VN5IV.js';
+import '../chunk-I3KKZ2O3.js';
 import '../chunk-5CLW2CXT.js';
 import '../chunk-SVSCLHHI.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-UFKUWVMV.js';
-import '../chunk-OG6CL3EB.js';
+export { Menu } from '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-F4DPAJCN.js';
+export { ConfirmModal, Modal } from '../chunk-I3KKZ2O3.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Note/Note.d.ts

@@ -6,6 +6,13 @@ export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
     align?: 'start' | 'center' | undefined;
     /** `lg` for a line meant to be read across the room: a goal, a rule. */
     size?: 'md' | 'lg' | undefined;
+    /**
+     * The note's name, set over its words at a card title's step: "How to read
+     * this board". The note is then a region named by it.
+     */
+    heading?: ReactNode;
+    /** The heading's level. Default 3, under a board's own heading. */
+    headingLevel?: 2 | 3 | 4 | undefined;
     children: ReactNode;
 }
 /**
@@ -17,6 +24,9 @@ export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
  * A note is never coloured to mean a state; the hues here are the reader's
  * labels, the same six a group's band takes.
  *
+ * A HEADING NAMES IT, at the step a card's title is set on, so a note on a
+ * board reads as one of its cards rather than as a label over loose prose.
+ *
  * IT SCROLLS rather than clipping when the reader makes it shorter than its
  * words.
  */

package/dist/Note/index.js

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

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

@@ -41,6 +41,16 @@
   letter-spacing: var(--font-letter-spacing-tight);
 }
 
+/* The note's name, at a card title's step, in the note's own ink. */
+.crewlet-note__heading {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  text-wrap: balance;
+}
+
 /* Prose inside takes the note's ink, links included. */
 .crewlet-note :is(p, li, h2, h3, h4, strong, em) {
   color: inherit;

package/dist/PeopleRail/index.js

@@ -1,8 +1,8 @@
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-FVLCTCMV.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/PresenceStack/index.js

@@ -2,8 +2,8 @@ export { PresenceStack } from '../chunk-ODT5H4MN.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-I6POAB4V.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenterView/index.js

@@ -1,8 +1,8 @@
-export { PresenterView, formatStopwatch } from '../chunk-CTHM6YSJ.js';
-import '../chunk-VCRFFIYI.js';
-import '../chunk-OG6CL3EB.js';
+export { PresenterView, formatStopwatch } from '../chunk-OGAAHVF6.js';
+import '../chunk-O63MWA4G.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ShareDialog/index.js

@@ -1,19 +1,19 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-URUGEAFB.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-JQLTG4KH.js';
 import '../chunk-FC4YTTFJ.js';
-import '../chunk-F4DPAJCN.js';
-import '../chunk-F73MC7EZ.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-I3KKZ2O3.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-SVSCLHHI.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-IG75YMUN.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetGrid/index.js

@@ -1,4 +1,4 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-INTEH4F3.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-CT4EZF62.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-3BYIWOTV.js';
@@ -9,13 +9,13 @@ import '../chunk-YEKYVJQR.js';
 import '../chunk-NHBP2XS5.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-QWOPX2MN.js';
-import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-UFKUWVMV.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SlideCompare/index.js

@@ -1,7 +1,7 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-33Z2SEDQ.js';
-import '../chunk-VCRFFIYI.js';
-import '../chunk-OG6CL3EB.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-ALMSY7RL.js';
+import '../chunk-O63MWA4G.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideFilmstrip/index.js

@@ -1,5 +1,5 @@
-export { SlideFilmstrip } from '../chunk-UOPHR5CE.js';
-import '../chunk-VCRFFIYI.js';
+export { SlideFilmstrip } from '../chunk-LR5QTFOE.js';
+import '../chunk-O63MWA4G.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/SlideGrid/index.js

@@ -1,5 +1,5 @@
-export { SlideGrid } from '../chunk-TD2MIINY.js';
-import '../chunk-VCRFFIYI.js';
+export { SlideGrid } from '../chunk-3C3BRIMY.js';
+import '../chunk-O63MWA4G.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideStage/index.js

@@ -1,4 +1,4 @@
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-VCRFFIYI.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-O63MWA4G.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideStage/useSlideKeys.d.ts

@@ -17,5 +17,14 @@ export interface SlideKeys {
  * its key wherever focus is. A key a field is typing, a composition is using,
  * or a nearer surface (a menu, a dialog) already handled is left alone, and
  * modified keys are the browser's.
+ *
+ * THE NEWEST HANDLERS ANSWER EVERY KEY. A show's handlers close over the slide
+ * it is on, so a key must never reach the handlers of a slide already left.
+ * They are read from a ref the hook brings up to date as each render commits,
+ * before the browser can dispatch another event, and the listener itself
+ * stays put. Re-adding the listener after each render instead left a gap
+ * after every step, between the new slide's commit and the effect that
+ * re-added it, where a quick second press (a clicker held down, or two taps)
+ * went to the old slide's handlers and moved to the slide already shown.
  */
 export declare function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled }: SlideKeys): void;

package/dist/Switcher/index.js

@@ -1,15 +1,15 @@
-export { Switcher } from '../chunk-5OY4LJFH.js';
+export { Switcher } from '../chunk-HVNTQ36V.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-F4DPAJCN.js';
+import '../chunk-I3KKZ2O3.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-6QFAK2WV.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-IG75YMUN.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-LREN6TUG.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-UZ6MA2V6.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-6QFAK2WV.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';