@crewlethq/ui 0.32.0 → 0.33.0

package/dist/SlideStage/index.js

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

package/dist/{SlideStage-KGRRALXR.css → SlideStage-S2FISF4C.css}

@@ -16,6 +16,29 @@
   height: 100%;
 }
 
+/* THE SLIDE'S OWN EDGE: the box is the slide (or, for a show in the page,
+   the room it was measured into), so its outline is the slide's edge, drawn over the slide's corners rather than outside them. A host that
+   marks a stage (selected, current) recolours this outline rather than adding
+   a second line. */
+.crewlet-slide-stage--framed {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+}
+
+:fullscreen .crewlet-slide-stage--framed,
+.crewlet-slide-stage--framed:fullscreen {
+  border-radius: 0;
+  outline: 0;
+}
+
+/* FULL SCREEN IS A PROJECTOR: the bars round a slide whose shape is not the
+   screen's are black, whatever the theme, so the room sees the slide alone. */
+:fullscreen .crewlet-slide-stage--contain,
+:fullscreen .crewlet-slide-stage--view,
+.crewlet-slide-stage:fullscreen {
+  background: var(--color-projection-letterbox);
+}
+
 /* Until it is measured, and wherever it is not (no layout), a view stage is
    its slide's shape at its width. In full screen it fills the box, sharing a
    flex column with the show's controls. */

package/dist/StatCard/StatCard.d.ts

@@ -34,6 +34,13 @@ export interface StatCardDelta {
 export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
     /** What is being counted, in sentence case: "Tasks in progress". */
     label: ReactNode;
+    /**
+     * Keep the label out of the picture. It stays in the accessibility tree.
+     * For a tile whose container already names it, such as a dashboard
+     * widget's frame, where the frame's title above the label said the same
+     * thing twice. A Meter's `hideLabel`, for the same reason.
+     */
+    hideLabel?: boolean;
     /** The headline value, already formatted by the caller. */
     value: ReactNode;
     /** A unit after the value, at a quieter weight: "ms", "/ 7", "per turn". */
@@ -61,6 +68,14 @@ export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
      * says otherwise.
      */
     trend?: ReactNode;
+    /**
+     * Where `trend` stands: at the END of the value's line (the default), or
+     * BELOW it at the tile's full width. Below is a quota's tile, a number of a
+     * known ceiling whose bar is the reading and not a sparkline beside it; a
+     * row of them keeps one shape at every width, where three end slots wrapped
+     * one by one as each number's width decided.
+     */
+    trendPlacement?: 'end' | 'below' | undefined;
     /** A glyph before the label. A component, not a name. */
     icon?: ReactNode;
     /** Colours the VALUE's ink. See the type for when that is right. */
@@ -100,4 +115,4 @@ export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
  * being zero. The trend and the delta wait with it: both are readings of the
  * number that has not arrived.
  */
-export declare const StatCard: ({ label, value, unit, sub, subTone, delta, trend, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;
+export declare const StatCard: ({ label, hideLabel, value, unit, sub, subTone, delta, trend, trendPlacement, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;

package/dist/StatCard/index.js

@@ -1,3 +1,3 @@
-export { StatCard } from '../chunk-IKB6HFGK.js';
+export { StatCard } from '../chunk-XO7PUL4F.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatCard-KPAFD4E2.css → StatCard-4T7TMWMN.css}

@@ -72,12 +72,18 @@
  * The value's line: the number at its start, the figure at its end, both on
  * the line's FOOT, so a 28px number and a 28px sparkline share a baseline
  * rather than centring on each other.
+ *
+ * THE FIGURE GIVES WAY BEFORE THE NUMBER. Where a tile is too narrow for
+ * both (a row of tiles on a phone, two to a line), the figure moves under the
+ * number rather than the number being cut to its first digit: "2…" beside a
+ * meter said nothing, and the meter alone says less than the number.
  */
 .crewlet-statcard__reading {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
-  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  gap: var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1) / 2);
   min-width: 0;
 }
 
@@ -86,40 +92,51 @@
  * track, with tabular figures so a number that ticks up moves nothing beside
  * it.
  *
- * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The value is one line
+ * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The number is one line
  * that never wraps, and any leading over it is air under the digits that
  * opens between the number and the line below it and stands the number
  * higher than the figure it shares a foot with.
  *
- * A BLOCK, NOT A FLEX ROW, because it is one line of text that has to END
- * rather than stop: `text-overflow` acts on a block container only, and as a
- * flex row the number and its unit were anonymous flex items no rule could
- * reach, so a value too long for its tile was cut mid-digit with nothing to
- * say a digit was lost. The unit sits on the same line as inline text, on
- * the number's baseline.
+ * THE NUMBER ENDS, THE UNIT MOVES. The number and its unit are a wrapping
+ * row on one baseline: where the tile is too narrow for both, the unit moves
+ * under the number whole ("of 10 GB"), rather than being cut to "of 1…"; and
+ * the number, alone on its line and still too long, ends in an ellipsis
+ * rather than stopping mid-digit with nothing to say a digit was lost. The
+ * ellipsis is the number's own box's, since `text-overflow` acts on a block
+ * container only.
  */
 .crewlet-statcard__value {
-  display: block;
-  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  /* Never narrower than the number, so the figure wraps first; never wider
+     than the tile, so a number too long for the tile alone still ends. */
+  flex: 1 0 auto;
   min-width: 0;
+  max-width: 100%;
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
   line-height: 1;
   font-variant-numeric: tabular-nums;
+}
+
+.crewlet-statcard__number {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* The unit, "/ 7" after the 4: the quiet ink at a text step, medium, so it
-   reads as part of the figure rather than as a second one. */
+/* The unit, on the number's baseline at a quieter weight, kept whole. */
 .crewlet-statcard__unit {
-  margin-inline-start: var(--spacing-1);
+  flex: none;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--font-letter-spacing-normal);
   color: var(--color-text-tertiary);
+  white-space: nowrap;
 }
 
 /*
@@ -137,6 +154,16 @@
   min-width: 0;
 }
 
+/* BELOW: the figure under the number, as wide as the tile. */
+.crewlet-statcard__reading--below {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.crewlet-statcard__reading--below > .crewlet-statcard__trend {
+  width: auto;
+}
+
 .crewlet-statcard__trend > :where(button, a) {
   align-self: flex-end;
 }

package/dist/Switcher/index.js

@@ -1,13 +1,13 @@
-export { Switcher } from '../chunk-HVNTQ36V.js';
-import '../chunk-W5J7R5EB.js';
-import '../chunk-I3KKZ2O3.js';
+export { Switcher } from '../chunk-O37AQNLK.js';
+import '../chunk-TEUQWOWZ.js';
+import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-BWRGFKJP.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-IG75YMUN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-RTPQDNW3.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';

package/dist/TableCells/index.js

@@ -1,10 +1,10 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-LFNUH4GY.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-K4VP6ZKE.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type Ref } from 'react';
 /**
  * How the row is drawn. `pill` is a segmented well with a raised chip for the
  * one that is on; `underline` is a strip with a sliding bar, for a screen's
@@ -14,8 +14,12 @@ export interface TabsItem {
     label: ReactNode;
     /** A glyph drawn before the label. A component, not a name. */
     icon?: ReactNode;
-    /** How many things are behind this tab. Drawn as a Count beside the label. */
-    count?: number | null;
+    /**
+     * How many things are behind this tab. Drawn as a Count beside the label,
+     * as it is given: a string is a figure the caller has already formatted
+     * ("1.2k", "50+").
+     */
+    count?: number | string | null;
     /**
      * What needs the reader behind this tab, drawn after the label: problems
      * as a danger count, a warning or an unsaved change as a 6px dot. It
@@ -77,6 +81,19 @@ export interface TabsProps {
      * and a screen reader told otherwise looks for a panel that never arrives.
      */
     renderItem?: (props: TabsRenderItemProps) => ReactNode;
+    /**
+     * Drawn inside the row after the last item, ROUTER MODE ONLY: the menu a
+     * navigation row folds its overflow into ("More"), or a note about every
+     * section. It is part of the navigation landmark, so a screen reader meets
+     * it with the links it continues. A tab list holds tabs alone, so a row
+     * without `renderItem` ignores it.
+     */
+    trailing?: ReactNode;
+    /**
+     * The row's root element, for a consumer that measures the row: which of
+     * its items fit, and what folds into its trailing menu.
+     */
+    ref?: Ref<HTMLElement> | undefined;
 }
 /**
  * The id of the tab that labels a tab panel, so a panel and the row that
@@ -103,7 +120,7 @@ export declare function tabId(panelId: string, value: string): string;
  * says. In router mode that IS what the items are, so the root becomes a
  * `nav`, the tab roles go, and the consumer's own link carries the state.
  */
-export declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, panelId, renderItem, }: TabsProps): React.JSX.Element;
+export declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, panelId, renderItem, trailing, ref, }: TabsProps): React.JSX.Element;
 export interface TabPanelProps {
     /** The same id the row was given as `panelId`. */
     id: string;

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-HJEVSQN6.js';
+export { TabPanel, Tabs, tabId } from '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Tabs-CJGO35BH.css → Tabs-MMZXV5EF.css}

@@ -95,13 +95,14 @@
  * chips floated; the raised rung is held a visible step above the card by the
  * palette suite, and the hairline finds it on any other ground.
  *
- * The inset is 2px, which is smaller than the scale's first step on purpose:
- * it is the gap a chip needs to read as sitting IN the well. With the 1px
- * boundary it is three pixels a side, and a 24px chip makes a 30px row: the
- * medium control step, the height of the button beside it.
+ * The inset is 1px, a hairline of the well's own ground round each chip:
+ * with the 1px boundary it is two pixels a side, and a 24px chip makes a 28px
+ * row, the tab step. Tabs sit between the 26px controls of a toolbar or a
+ * panel and the 32px actions of a page, so a row of them reads as the place's
+ * navigation rather than as one more button beside them.
  */
 .crewlet-tabs--pill {
-  --crewlet-tabs-pill-inset: 2px;
+  --crewlet-tabs-pill-inset: 1px;
 
   gap: var(--crewlet-tabs-pill-inset);
   padding: var(--crewlet-tabs-pill-inset);
@@ -205,8 +206,8 @@
  * can hit. max() against --size-target-min holds every density at 24px or
  * more, and at density 1 the two agree.
  *
- * The corner is the small radius, the design's: the well's 8px less its 1px
- * boundary and 2px inset is 5px, and a chip a pixel rounder than that
+ * The corner is the chip radius (--radius-chip): the well's 8px less its 1px
+ * boundary and 1px inset is 6px, and a chip a pixel rounder than that
  * concentric curve is what reads as a chip sitting IN the well rather than a
  * second well inside it. The side pad is the design's 10px, two steps and a
  * half.
@@ -224,7 +225,7 @@
 .crewlet-tabs--pill .crewlet-tabs__tab {
   min-height: max(var(--size-target-min), calc(var(--size-control-md) - 6px));
   padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-chip);
   color: var(--color-text-secondary);
   font-size: var(--font-size-xs);
 }

package/dist/TagsInput/index.js

@@ -2,7 +2,7 @@ export { TagsInput } from '../chunk-2CQLNML5.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/ThemeSwitcher/index.js

@@ -1,9 +1,9 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-WJDQ7XQA.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-2QEDJSJC.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,11 +1,11 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-UZ6MA2V6.js';
-import '../chunk-FC4YTTFJ.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-2DHMVB5J.js';
+import '../chunk-UQGFHNDI.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-BWRGFKJP.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/Toaster/index.js

@@ -1,5 +1,5 @@
-export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
-import '../chunk-HMPFGIWM.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-AC22RZKC.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Toaster-EOOOTSJT.css → Toaster-C6BQ7L6I.css}

@@ -234,13 +234,22 @@
  * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
  * whole strip, draining from the right as the time runs out. It sits under
  * every raised child, and it is the timer's picture, not the timer.
+ *
+ * ITS LEADING EDGE FADES OUT rather than stopping. Cut square, the wash read
+ * as a strip painted in two tones whenever it stood still: in a still frame,
+ * and under the pointer, which pauses it, which is when a reader is looking.
+ * Feathered, a stopped wash still reads as a tint running out.
  */
 .crewlet-toast__progress {
   position: absolute;
   inset: 0;
   z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-wash);
+  background: linear-gradient(
+    to right,
+    var(--crewlet-toast-wash) calc(100% - var(--spacing-7)),
+    transparent
+  );
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;

package/dist/Toolbar/index.js

@@ -1,4 +1,4 @@
 export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tooltip/index.js

@@ -1,4 +1,4 @@
-export { Tooltip } from '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+export { Tooltip } from '../chunk-5FYPE5GL.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-WTNUVQVI.js';
+export { TreeCanvas } from '../chunk-4IJS5CPF.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-OTN35CI4.js';
-import '../chunk-VYOKRN2I.js';
+import '../chunk-22UEIXZE.js';
+import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-5FYPE5GL.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/TreeGrid/index.js

@@ -1,7 +1,7 @@
-export { TreeGrid } from '../chunk-VEB5ERRE.js';
+export { TreeGrid } from '../chunk-QWNVSR6G.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-VYOKRN2I.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-LM3ISVJA.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/VersionCompare/index.js

@@ -1,8 +1,8 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-EHQTPVV4.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-PLTCDSTU.js';
 import '../chunk-BVWSLXTY.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-RA2ULG6H.js';
 import '../chunk-BHHIIK3M.js';

package/dist/VersionTimeline/index.js

@@ -1,10 +1,10 @@
-export { VersionTimeline } from '../chunk-W4XYY73O.js';
+export { VersionTimeline } from '../chunk-VHZ3AXJD.js';
 import '../chunk-AUQPBL4O.js';
-import '../chunk-4KP4RC3O.js';
+import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/WidgetFrame/WidgetFrame.d.ts

@@ -50,6 +50,13 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
      * other figure keeps the frame's inset.
      */
     flush?: boolean | undefined;
+    /**
+     * Keep the title's two lines whether it fills them or not, so the figures of
+     * a row of frames start on one line: a number under a title of one line and
+     * a number under a title of two stood a line apart. For a row of figures
+     * read across (stats and meters), never for a frame alone in its row.
+     */
+    holdTitle?: 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. */
@@ -83,4 +90,4 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
  * 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, flush, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;
+export declare function WidgetFrame({ title, source, onCite, actions, flush, holdTitle, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;

package/dist/WidgetFrame/index.js

@@ -1,5 +1,5 @@
-export { WidgetFrame } from '../chunk-AAOH2P6Y.js';
-import '../chunk-W5J7R5EB.js';
+export { WidgetFrame } from '../chunk-DFK5EQTU.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{WidgetFrame-LRZIL62O.css → WidgetFrame-BTFW3CRK.css}

@@ -60,6 +60,11 @@
   line-clamp: 2;
 }
 
+/* A held title keeps its two lines empty or not (see `holdTitle`). */
+.crewlet-widget-frame--hold-title .crewlet-widget-frame__title {
+  min-height: calc(2 * 1em * var(--font-line-height-snug));
+}
+
 /* The controls stand on the title's first line: the box is one line of the
    title tall and the control is centred in it, whatever its own height. */
 .crewlet-widget-frame__actions {
@@ -77,15 +82,27 @@
   overflow: auto;
 }
 
-/* A flush figure reaches the frame's sides, and a table's cells take the
-   frame's inset, so its first column starts under the title and its row
-   rules meet the border. */
+/*
+ * A flush figure reaches the frame's sides, and a table's OUTER cells take the
+ * frame's inset, so its first column starts under the title, its last ends
+ * where the title row's controls do, and its row rules meet the border.
+ *
+ * ONLY THE OUTER ONES. Every cell took the frame's 16px a side, so two columns
+ * stood 32px apart and a table of eight columns ran past a widget the full
+ * width of a board; between columns a cell keeps the compact table's own
+ * inset. The last column is the last before the table's trailing spacer,
+ * which is not a column of the data.
+ */
 .crewlet-widget-frame--flush .crewlet-widget-frame__body {
   padding-inline: 0;
 }
 
-.crewlet-widget-frame--flush .crewlet-data-table--compact {
-  --crewlet-data-table-cell-pad-x: var(--spacing-4);
+.crewlet-widget-frame--flush .crewlet-data-table--compact :is(th, td):first-child {
+  padding-inline-start: var(--spacing-4);
+}
+
+.crewlet-widget-frame--flush .crewlet-data-table--compact :is(th, td):nth-last-child(1 of :not(.crewlet-data-table__th--spacer, .crewlet-data-table__td--spacer)) {
+  padding-inline-end: var(--spacing-4);
 }
 
 /* A stat tile drawn flush as the figure stands on the frame's inset; its own
@@ -95,6 +112,23 @@
   padding: 0;
 }
 
+/* A FRAME TOO NARROW FOR THE DISPLAY NUMBER sets it a step down rather than
+   cutting it: two columns of a board are about 120px, and a number at the
+   display step lost its last digits there ("123.…"). */
+@container crewlet-widget-frame (width < 11rem) {
+  .crewlet-widget-frame__body .crewlet-statcard__value {
+    font-size: var(--font-size-xl);
+  }
+}
+
+/* NOR DOES IT RESERVE A SECOND LINE IT HAS NOTHING FOR. The reserve keeps a
+   StatGroup's tiles at one height; a frame takes its height from the board,
+   and the empty line stood as a band of air between the number and the
+   citation that no other figure has. */
+.crewlet-widget-frame__body .crewlet-statcard__sub:empty {
+  display: none;
+}
+
 .crewlet-widget-frame__blocked {
   display: flex;
   align-items: flex-start;
@@ -190,8 +224,18 @@
     align-items: flex-start;
   }
 
+  /* STACKED, THE TITLE TAKES A SECOND LINE BEFORE IT ENDS: a frame three
+     columns wide cut "Deploys for the chosen service" to "Deploys for the
+     chosen se…". Past two lines it ends in an ellipsis, and the whole title
+     is the citation's tooltip. */
   .crewlet-widget-frame__source {
+    display: -webkit-box;
     max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 
   .crewlet-widget-frame__when::before {

package/dist/{chunk-OTN35CI4.js → chunk-22UEIXZE.js}

@@ -1,12 +1,12 @@
-import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
+import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Tooltip } from './chunk-QWOPX2MN.js';
-import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-HMPFGIWM.js';
+import { Tooltip } from './chunk-5FYPE5GL.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Canvas-LRVNW7XN.css';
+import './Canvas-VUG2HLZK.css';
 import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
 import { CURSORS, ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -515,7 +515,7 @@ function Canvas({
     {
       className: cx("crewlet-canvas", className),
       ref: root,
-      style: CURSOR_PROPERTIES,
+      style: ground === "grid" ? { ...CURSOR_PROPERTIES, ...gridProperties(view) } : CURSOR_PROPERTIES,
       "data-cursor": cursor,
       "data-dimmed": dimmed,
       "data-ground": ground,
@@ -628,6 +628,10 @@ function Canvas({
     }
   );
 }
+function gridOf(view) {
+  const k = view.k > 0 && Number.isFinite(view.k) ? view.k : 1;
+  return { scale: k * 2 ** -Math.floor(Math.log2(k)), x: view.x, y: view.y };
+}
 var CURSOR_PROPERTIES = {
   "--crewlet-canvas-cursor-pointer": CURSORS.pointer,
   "--crewlet-canvas-cursor-hand": CURSORS.hand,
@@ -635,6 +639,14 @@ var CURSOR_PROPERTIES = {
   "--crewlet-canvas-cursor-crosshair": CURSORS.crosshair,
   "--crewlet-canvas-cursor-text": CURSORS.text
 };
+function gridProperties(view) {
+  const grid = gridOf(view);
+  return {
+    "--crewlet-canvas-grid-scale": String(grid.scale),
+    "--crewlet-canvas-grid-x": `${grid.x}px`,
+    "--crewlet-canvas-grid-y": `${grid.y}px`
+  };
+}
 function ZoomReadout({
   zoom,
   onZoom,
@@ -716,4 +728,4 @@ function swallowNextClick(within) {
   setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
 }
 
-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, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };
+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, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };