@crewlethq/ui 0.27.1 → 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,26 @@ 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.

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-OGAAHVF6.js';
 import '../chunk-O63MWA4G.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/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-ALMSY7RL.js';
 import '../chunk-O63MWA4G.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/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';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-RSC7UJCR.js';
+export { TreeCanvas } from '../chunk-S6VG5ZFZ.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-KZOGQXSP.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/WidgetFrame/WidgetFrame.d.ts

@@ -44,6 +44,12 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
     onCite?: (() => void) | undefined;
     /** The host's controls for this figure, such as a menu offering CSV and PNG. */
     actions?: ReactNode;
+    /**
+     * The figure reaches the frame's sides: a table, whose row rules meet the
+     * frame's border and whose first column starts where the title does. Any
+     * other figure keeps the frame's inset.
+     */
+    flush?: boolean | undefined;
     /** The heading level of the title. Default 3, under a board's own heading. */
     headingLevel?: 2 | 3 | 4 | undefined;
     /** Overrides the shared clock, for a story or a suite. */
@@ -67,7 +73,14 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
  * of the figure itself: a host that passed rows by mistake still shows none.
  * `failed` reads the same way with its own sentence.
  *
+ * ONE INSET FOR EVERY PART. The title, the figure and the citation stand on
+ * the card's own 16px from each side, so a frame lines up with every other
+ * card on a board. A table passes `flush` and reaches the sides instead, its
+ * cells taking the same inset so its first column starts under the title. A
+ * stat tile drawn `flush` as the figure takes the frame's inset, not one of
+ * its own on top of it.
+ *
  * Sits inside the host's `ArrangeFrame`, which owns the grid, the drag and
  * the resize; this owns what is inside the card.
  */
-export declare function WidgetFrame({ title, source, onCite, actions, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;
+export declare function WidgetFrame({ title, source, onCite, actions, flush, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;

package/dist/WidgetFrame/index.js

@@ -1,4 +1,4 @@
-export { WidgetFrame } from '../chunk-BQYQWJPK.js';
+export { WidgetFrame } from '../chunk-AAOH2P6Y.js';
 import '../chunk-W5J7R5EB.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';